✨ Feat: 폼데이터로 모달 커버에서 입력한 타이틀로 넘어가게 수정 #86

prgrms-web-devcourse-final-project · Dec 9, 2024 · 5190b8e · 5190b8e
1 parent 06a77ff
commit 5190b8e
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 5 deletions.
diff --git a/src/components/common/MainModalCover.jsx b/src/components/common/MainModalCover.jsx
@@ -1,10 +1,19 @@
 import { useModalStore } from '../../stores/modalStatus';
+import { useThreadsTitleStore } from '../../stores/titleStatus';
 import Remix from './Remix';
 import DropdownSelector from './DropdownSelector';
 import SignatureImage from './SignatureImage';
 import tempOptionList from '../../datas/temp-options-list.json'; // 임시 드롭다운 옵션 데이터
 
-const MainModalCover = ({ isPlaceEdit = null }) => {
+const MainModalCover = ({ isPlaceEdit = null, onTitleChange = () => {} }) => {
+    const { threadsTitle, setThreadsTitle } = useThreadsTitleStore();
+
+    const handleTitleChange = (event) => {
+        const newTitle = event.target.value;
+        setThreadsTitle(newTitle);
+        onTitleChange(newTitle);
+    };
+
     const { modalStatus, modalData, toggleModal, setEditMode, setSlaveIndex } =
         useModalStore((state) => state);
 
@@ -95,10 +104,12 @@ const MainModalCover = ({ isPlaceEdit = null }) => {
                                     type="text"
                                     id="input-thread-title"
                                     placeholder="글타래 제목 입력..."
+                                    value={threadsTitle}
+                                    onChange={handleTitleChange}
                                 />
                             ) : (
                                 <span className="thread-title-content">
-                                    {modalData.threadTitle}
+                                    {threadsTitle}
                                 </span>
                             )}
                         </h5>

diff --git a/src/pages/ThreadMissingReport.jsx b/src/pages/ThreadMissingReport.jsx
@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { createMissingReportArticle } from '../api/threadApi';
+import { useThreadsTitleStore } from '../stores/titleStatus';
 
 import AsteriskTextGuide from '../components/common/AsteriskTextGuide';
 import ModalInstruction from '../components/common/ModalInstruction';
@@ -29,6 +30,7 @@ const ThreadMissingReport = () => {
     const [errorMessage, setErrorMessage] = useState('');
     const [isNeutered, setIsNeutered] = useState(false);
     const [hasChip, setHasChip] = useState(false);
+    const { threadsTitle } = useThreadsTitleStore();
 
     const handleTypeSelect = (typeId) => {
         setIsSelectedType(typeId);
@@ -79,7 +81,7 @@ const ThreadMissingReport = () => {
         const formData = {
             type: 'lost',
             articleStatus: 'PUBLISHED',
-            title: '타이틀받아와야하는데',
+            title: threadsTitle,
             latitude: missingAddress.coordinates.lat.toString(),
             longitude: missingAddress.coordinates.lng.toString(),
             description: detailExplanation,

diff --git a/src/pages/ThreadPlace.jsx b/src/pages/ThreadPlace.jsx
@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { createPlaceArticle } from '../api/threadApi';
+import { useThreadsTitleStore } from '../stores/titleStatus';
 
 import ModalInstruction from '../components/common/ModalInstruction';
 import ModalSectionTitle from '../components/common/ModalSectionTitle';
@@ -27,6 +28,7 @@ const ThreadPlace = () => {
         // longitude: latestLocation.lng,
     });
     const [errorMessage, setErrorMessage] = useState('');
+    const { threadsTitle } = useThreadsTitleStore();
 
     const handleAddressChange = (info) => {
         setAddressInfo(info);
@@ -63,7 +65,7 @@ const ThreadPlace = () => {
         const formData = {
             type: 'place',
             articleStatus: 'PUBLISHED',
-            title: '테스트스테',
+            title: threadsTitle,
             latitude: latestLocation.lat || 0, // 위도
             longitude: latestLocation.lng || 0, // 경도
             description: introduce,

diff --git a/src/pages/ThreadRescue.jsx b/src/pages/ThreadRescue.jsx
@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { createRescueArticle } from '../api/threadApi';
+import { useThreadsTitleStore } from '../stores/titleStatus';
 
 import ModalInstruction from '../components/common/ModalInstruction';
 import ModalSectionTitle from '../components/common/ModalSectionTitle';
@@ -16,6 +17,7 @@ const ThreadRescue = () => {
     const [dateTime, setDateTime] = useState('');
     const [situation, setSituation] = useState('');
     const [errorMessage, setErrorMessage] = useState('');
+    const { threadsTitle } = useThreadsTitleStore();
 
     const mallangTypes = [
         { id: 'DOG', label: '강아지' },
@@ -54,7 +56,7 @@ const ThreadRescue = () => {
         const formData = {
             type: 'rescue',
             articleStatus: 'PUBLISHED', // 필요한 상태값
-            title: '꽁꽁 얼어붙은 한강 위로 고양이가 걸어다닙니다', // 제목
+            title: threadsTitle, // 제목
             latitude: addressInfo.coordinates.lat.toString(), // 위도
             longitude: addressInfo.coordinates.lng.toString(), // 경도
             description: situation, // 상황 설명

diff --git a/src/stores/titleStatus.js b/src/stores/titleStatus.js
@@ -0,0 +1,6 @@
+import { create } from 'zustand';
+
+export const useThreadsTitleStore = create((set) => ({
+    threadsTitle: '',
+    setThreadsTitle: (title) => set({ threadsTitle: title }),
+}));