prgrms-web-devcourse-final-project · wldnjs990 · Feb 27, 2025 · Feb 24, 2025 · Feb 26, 2025 · Feb 26, 2025
diff --git a/src/apis/letterDetail.ts b/src/apis/letterDetail.ts
@@ -3,20 +3,23 @@ import client from './client';
 const getLetter = async (
   letterId: string,
   setLetterState: React.Dispatch<React.SetStateAction<LetterDetail | null>>,
+  callBack?: () => void,
 ) => {
   try {
     const res = await client.get(`/api/letters/${letterId}`);
     setLetterState(res.data.data);
+    if (callBack) callBack();
     console.log(res);
   } catch (error) {
     console.error(error);
   }
 };
 
-const deleteLetter = async (letterId: string) => {
+const deleteLetter = async (letterId: string, callBack?: () => void) => {
   try {
     console.log(`/api/letters/${letterId}`);
     const res = await client.delete(`/api/letters/${letterId}`);
+    if (callBack) callBack();
     console.log(res);
   } catch (error) {
     console.error(error);

diff --git a/src/apis/write.ts b/src/apis/write.ts
@@ -1,25 +1,24 @@
 import client from './client';
 
-const postLetter = async (
-  data: LetterRequest,
-  setState?: React.Dispatch<React.SetStateAction<boolean>>,
-) => {
+const postLetter = async (data: LetterRequest, callBack?: () => void) => {
   try {
     const res = await client.post('/api/letters', data);
-    if (setState) setState(true);
+    if (callBack) callBack();
     console.log(res);
   } catch (error) {
     console.error(error);
   }
 };
 
 const getPrevLetter = async (
-  setPrevLetterState: React.Dispatch<React.SetStateAction<PrevLetter[]>>,
   letterId: string,
+  setPrevLetterState: React.Dispatch<React.SetStateAction<PrevLetter[]>>,
+  callBack?: () => void,
 ) => {
   try {
     const res = await client.get(`/api/letters/${letterId}/previous`);
     setPrevLetterState(res.data.data);
+    if (callBack) callBack();
     console.log(res);
   } catch (error) {
     console.error(error);

diff --git a/src/components/ResultLetter.tsx b/src/components/ResultLetter.tsx
@@ -5,11 +5,12 @@ import LetterWrapper from './LetterWrapper';
 export default function ResultLetter({
   categoryName = 'CONSOLATION',
   title,
+  zipCode = 'error',
 }: {
   categoryName: Category;
   title: string;
+  zipCode?: string;
 }) {
-  const address = '1A3E2';
   const date = new Date();
   const today = `${date.getFullYear()}년 ${date.getMonth() + 1}월 ${date.getDate()}일`;
 
@@ -26,14 +27,16 @@ export default function ResultLetter({
         <div className="flex flex-col gap-[5px]">
           <span className="caption-sb text-gray-60">{today}</span>
           <div className="flex gap-1">
-            {address.split('').map((spell, idx) => (
-              <span
-                className="caption-r flex h-6 w-6 items-center justify-center rounded-sm bg-white/40"
-                key={idx}
-              >
-                {spell}
-              </span>
-            ))}
+            {zipCode.split('').map((spell, idx) => {
+              return (
+                <span
+                  className="caption-r flex h-6 w-6 items-center justify-center rounded-sm bg-white/40"
+                  key={idx}
+                >
+                  {spell}
+                </span>
+              );
+            })}
           </div>
         </div>
       </div>

diff --git a/src/pages/Write/CategorySelect.tsx b/src/pages/Write/CategorySelect.tsx
@@ -1,8 +1,6 @@
-import { useState } from 'react';
 import { Link } from 'react-router';
 
 import { postLetter } from '@/apis/write';
-import BackButton from '@/components/BackButton';
 import PageTitle from '@/components/PageTitle';
 import CategoryList from '@/pages/Write/components/CategoryList';
 import useWrite from '@/stores/writeStore';
@@ -13,33 +11,20 @@ import WritePageButton from './components/WritePageButton';
 export default function CategorySelect({
   setStep,
   prevLetter,
+  send,
+  setSend,
 }: {
   setStep: React.Dispatch<React.SetStateAction<Step>>;
   prevLetter: PrevLetter[];
+  send: boolean;
+  setSend: React.Dispatch<React.SetStateAction<boolean>>;
 }) {
-  const letterTitle = useWrite((state) => state.letterTitle);
-  const letterText = useWrite((state) => state.letterText);
-  const category = useWrite((state) => state.category);
-  const paperType = useWrite((state) => state.paperType);
-  const fontType = useWrite((state) => state.fontType);
-
-  const [send, setSend] = useState<boolean>(false);
-
-  const LETTER_REQUEST: LetterRequest = {
-    receiver: null,
-    parentLetterId: null,
-    title: letterTitle,
-    content: letterText,
-    category: category,
-    paperType: paperType,
-    fontType: fontType,
-  };
+  const letterRequest = useWrite((state) => state.letterRequest);
 
   return (
     <>
       <div className="flex w-full grow flex-col items-center">
         <div className="absolute left-0 flex w-full items-center justify-between px-5">
-          <BackButton />
           {!send && prevLetter.length <= 0 && (
             <WritePageButton
               text="이전 단계"
@@ -60,9 +45,9 @@ export default function CategorySelect({
         {/* 카테고리 선택 컴포넌트 */}
         {!send && prevLetter.length <= 0 && <CategoryList />}
 
-        {prevLetter.length > 0 && (
+        {send && prevLetter.length > 0 && (
           <div className="mt-25 flex w-full max-w-[300px] flex-col items-center gap-5">
-            <ResultLetterAnimation categoryName="답변자" />
+            <ResultLetterAnimation />
             <div className="animate-show-text flex flex-col items-center opacity-0">
               <span className="body-sb text-gray-60">작성하신 편지는</span>
               <span className="body-sb text-gray-60">
@@ -74,9 +59,9 @@ export default function CategorySelect({
           </div>
         )}
 
-        {send && (
+        {send && prevLetter.length <= 0 && (
           <div className="mt-25 flex w-full max-w-[300px] flex-col items-center gap-5">
-            <ResultLetterAnimation categoryName={category} />
+            <ResultLetterAnimation />
             <span className="animate-show-text body-sb text-gray-60 opacity-0">
               두근두근! 답장이 언제 올까요?
             </span>
@@ -94,8 +79,11 @@ export default function CategorySelect({
           <button
             className="bg-primary-3 body-m mt-auto flex h-10 w-full items-center justify-center rounded-lg"
             onClick={() => {
-              if (category) {
-                postLetter(LETTER_REQUEST, setSend);
+              if (letterRequest.category) {
+                postLetter(letterRequest, () => {
+                  console.log(letterRequest);
+                  setSend(true);
+                });
                 // setSend(true);
               } else {
                 alert('우표 선택을 해주세요');

diff --git a/src/pages/Write/LetterEditor.tsx b/src/pages/Write/LetterEditor.tsx
@@ -1,6 +1,8 @@
-import { useRef } from 'react';
+import { useEffect, useState } from 'react';
+import { useLocation } from 'react-router';
 import { twMerge } from 'tailwind-merge';
 
+import { postLetter } from '@/apis/write';
 import BackButton from '@/components/BackButton';
 import WritePageButton from '@/pages/Write/components/WritePageButton';
 import { FONT_TYPE_OBJ } from '@/pages/Write/constants';
@@ -10,26 +12,36 @@ import useWrite from '@/stores/writeStore';
 export default function LetterEditor({
   setStep,
   prevLetter,
+  setSend,
+  searchParams,
 }: {
   setStep: React.Dispatch<React.SetStateAction<Step>>;
   prevLetter: PrevLetter[];
+  setSend: React.Dispatch<React.SetStateAction<boolean>>;
+  searchParams: URLSearchParams;
 }) {
-  const textareaRef = useRef<HTMLTextAreaElement | null>(null);
+  const location = useLocation();
+  const [randomMatched, setRandomMatched] = useState<boolean>(false);
 
-  const fontType = useWrite((state) => state.fontType);
+  const letterRequest = useWrite((state) => state.letterRequest);
+  const setLetterRequest = useWrite((state) => state.setLetterRequest);
 
-  const letterTitle = useWrite((state) => state.letterTitle);
-  const setLetterTitle = useWrite((state) => state.setLetterTitle);
-
-  const letterText = useWrite((state) => state.letterText);
-  const setLetterText = useWrite((state) => state.setLetterText);
+  useEffect(() => {
+    if (location.state?.randomMatched) {
+      setRandomMatched(true);
+    }
+  }, [location.state?.randomMatched]);
 
-  const handleResizeHeight = () => {
-    if (textareaRef.current !== null) {
-      textareaRef.current.style.height = 'auto'; //height 초기화
-      textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
+  useEffect(() => {
+    if (prevLetter.length > 0) {
+      console.log('d');
+      setLetterRequest({
+        receiverId: prevLetter[0].memberId,
+        parentLetterId: Number(searchParams.get('letterId')),
+        category: prevLetter[0].category,
+      });
     }
-  };
+  }, [prevLetter, searchParams, setLetterRequest]);
 
   return (
     <div className="flex grow flex-col pb-15">
@@ -40,8 +52,17 @@ export default function LetterEditor({
           <WritePageButton
             text="답장 전송"
             onClick={() => {
-              if (letterTitle.trim() !== '' && letterText.trim() !== '') {
-                setStep('category');
+              if (letterRequest.title.trim() !== '' && letterRequest.content.trim() !== '') {
+                if (randomMatched) {
+                  console.log('랜덤편지 답장 전송용API');
+                } else {
+                  postLetter(letterRequest, () => {
+                    console.log(letterRequest);
+                    console.log(prevLetter);
+                    setSend(true);
+                    setStep('category');
+                  });
+                }
               } else {
                 alert('편지 제목, 내용이 작성되었는지 확인해주세요');
               }
@@ -51,7 +72,7 @@ export default function LetterEditor({
           <WritePageButton
             text="다음 단계"
             onClick={() => {
-              if (letterTitle.trim() !== '' && letterText.trim() !== '') {
+              if (letterRequest.title.trim() !== '' && letterRequest.content.trim() !== '') {
                 setStep('category');
               } else {
                 alert('편지 제목, 내용이 작성되었는지 확인해주세요');
@@ -67,23 +88,22 @@ export default function LetterEditor({
           placeholder="제목을 입력해주세요."
           className="body-sb placeholder:text-gray-40 placeholder:border-0"
           onChange={(e) => {
-            setLetterTitle(e.target.value);
+            setLetterRequest({ title: e.target.value });
           }}
-          value={letterTitle}
+          value={letterRequest.title}
         />
       </div>
       <div className="mt-9 flex grow">
         <textarea
           className={twMerge(
             `body-r basic-theme min-h-full w-full px-6`,
-            `${FONT_TYPE_OBJ[fontType]}`,
+            `${FONT_TYPE_OBJ[letterRequest.fontType]}`,
           )}
           placeholder="클릭해서 내용을 작성하세요"
           onChange={(e) => {
-            handleResizeHeight();
-            setLetterText(e.target.value);
+            setLetterRequest({ ...letterRequest, content: e.target.value });
           }}
-          value={letterText}
+          value={letterRequest.content}
         ></textarea>
       </div>
     </div>

diff --git a/src/pages/Write/OptionSlide.tsx b/src/pages/Write/OptionSlide.tsx
@@ -14,6 +14,14 @@ function OptionSlide({ prevLetter }: { prevLetter: PrevLetter[] }) {
   const optionRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
+    const handleOutsideClick = (e: MouseEvent) => {
+      const target = e.target as HTMLElement;
+      if (target && !slideRef.current?.contains(target)) {
+        setSlideActive(false);
+      }
+    };
+    document.body.addEventListener('click', handleOutsideClick);
+
     const handleSlideButton = () => {
       // ref가 처음 높이를 못 받아오는거 같아서 비동기로 후처리함
       if (slideRef.current) {
@@ -25,6 +33,10 @@ function OptionSlide({ prevLetter }: { prevLetter: PrevLetter[] }) {
       }
     };
     handleSlideButton();
+
+    return () => {
+      document.body.removeEventListener('click', handleOutsideClick);
+    };
   }, [slideActive]);
 
   return (

diff --git a/src/pages/Write/components/CategoryStamp.tsx b/src/pages/Write/components/CategoryStamp.tsx
@@ -5,8 +5,8 @@ import useWrite from '@/stores/writeStore';
 function CategoryStamp({ categoryName, image }: { categoryName: Category; image: string }) {
   const [hovered, setHovered] = useState(false);
 
-  const category = useWrite((state) => state.category);
-  const setCategory = useWrite((state) => state.setCategory);
+  const letterRequest = useWrite((state) => state.letterRequest);
+  const setLetterRequest = useWrite((state) => state.setLetterRequest);
 
   return (
     <div className="flex w-full cursor-pointer flex-col items-center justify-center">
@@ -16,14 +16,16 @@ function CategoryStamp({ categoryName, image }: { categoryName: Category; image:
         fill="none"
         onMouseEnter={() => setHovered(true)}
         onMouseLeave={() => setHovered(false)}
-        onClick={() => setCategory(categoryName)}
+        onClick={() => {
+          setLetterRequest({ category: categoryName });
+        }}
       >
         <image href={image} width="125" height="150" x={5} y={5}></image>
         <path
           fillRule="evenodd"
           clipRule="evenodd"
           d="M129.303 4.27673C131.675 4.27673 133.598 2.36197 133.598 2.22916e-08L137.894 0V5.34591C135.521 5.34591 133.598 7.26067 133.598 9.62264C133.598 11.9846 135.521 13.8994 137.894 13.8994V20.3145C135.521 20.3145 133.598 22.2292 133.598 24.5912C133.598 26.9532 135.521 28.8679 137.894 28.8679V35.283C135.521 35.283 133.598 37.1978 133.598 39.5597C133.598 41.9217 135.521 43.8365 137.894 43.8365V50.2516C135.521 50.2516 133.598 52.1663 133.598 54.5283C133.598 56.8903 135.521 58.805 137.894 58.805V65.2201C135.521 65.2201 133.598 67.1349 133.598 69.4969C133.598 71.8588 135.521 73.7736 137.894 73.7736V80.1887C135.521 80.1887 133.598 82.1034 133.598 84.4654C133.598 86.8274 135.521 88.7421 137.894 88.7421V95.1572C135.521 95.1572 133.598 97.072 133.598 99.434C133.598 101.796 135.521 103.711 137.894 103.711V110.126C135.521 110.126 133.598 112.041 133.598 114.403C133.598 116.764 135.521 118.679 137.894 118.679V125.094C135.521 125.094 133.598 127.009 133.598 129.371C133.598 131.733 135.521 133.648 137.894 133.648V140.063C135.521 140.063 133.598 141.978 133.598 144.34C133.598 146.702 135.521 148.616 137.894 148.616V155.031C135.521 155.031 133.598 156.946 133.598 159.308C133.598 161.67 135.521 163.585 137.894 163.585L137.894 170H133.598C133.598 167.638 131.675 165.723 129.303 165.723C126.931 165.723 125.008 167.638 125.008 170H118.565C118.565 167.638 116.642 165.723 114.27 165.723C111.898 165.723 109.975 167.638 109.975 170H103.532C103.532 167.638 101.609 165.723 99.2367 165.723C96.8645 165.723 94.9415 167.638 94.9415 170H88.4986C88.4986 167.638 86.5756 165.723 84.2034 165.723C81.8312 165.723 79.9082 167.638 79.9082 170H73.4654C73.4654 167.638 71.5424 165.723 69.1702 165.723C66.798 165.723 64.875 167.638 64.875 170H58.4321C58.4321 167.638 56.5091 165.723 54.1369 165.723C51.7648 165.723 49.8417 167.638 49.8417 170H43.3989C43.3989 167.638 41.4759 165.723 39.1037 165.723C36.7315 165.723 34.8085 167.638 34.8085 170H28.3657C28.3657 167.638 26.4426 165.723 24.0704 165.723C21.6983 165.723 19.7752 167.638 19.7752 170H13.3324C13.3324 167.638 11.4094 165.723 9.0372 165.723C6.66502 165.723 4.74199 167.638 4.74199 170H0.446785L0.446777 163.585C2.81896 163.585 4.74199 161.67 4.74199 159.308C4.74199 156.946 2.81896 155.031 0.446777 155.031L0.446777 148.616C2.81896 148.616 4.74199 146.702 4.74199 144.34C4.74199 141.978 2.81896 140.063 0.446777 140.063L0.446777 133.648C2.81896 133.648 4.74199 131.733 4.74199 129.371C4.74199 127.009 2.81896 125.094 0.446779 125.094L0.446779 118.679C2.81896 118.679 4.74199 116.764 4.74199 114.403C4.74199 112.041 2.81896 110.126 0.44678 110.126L0.44678 103.711C2.81896 103.711 4.74199 101.796 4.74199 99.434C4.74199 97.072 2.81896 95.1572 0.44678 95.1572L0.446781 88.7421C2.81896 88.7421 4.74199 86.8274 4.74199 84.4654C4.74199 82.1034 2.81896 80.1887 0.446781 80.1887L0.446781 73.7736C2.81896 73.7736 4.74199 71.8588 4.74199 69.4969C4.74199 67.1349 2.81896 65.2201 0.446782 65.2201L0.446782 58.805C2.81896 58.805 4.74199 56.8903 4.74199 54.5283C4.74199 52.1663 2.81896 50.2516 0.446782 50.2516L0.446783 43.8365C2.81896 43.8365 4.74199 41.9217 4.742 39.5597C4.742 37.1978 2.81896 35.283 0.446782 35.283L0.446783 28.8679C2.81896 28.8679 4.742 26.9532 4.742 24.5912C4.742 22.2292 2.81896 20.3145 0.446783 20.3145L0.446783 13.8994C2.81896 13.8994 4.742 11.9846 4.742 9.62264C4.742 7.26067 2.81896 5.34591 0.446784 5.34591L0.446784 7.1333e-07L4.74199 6.91038e-07C4.74199 2.36197 6.66502 4.27673 9.0372 4.27673C11.4094 4.27673 13.3324 2.36197 13.3324 6.46455e-07L19.7752 6.13018e-07C19.7752 2.36197 21.6983 4.27673 24.0704 4.27673C26.4426 4.27673 28.3657 2.36197 28.3657 5.68435e-07L34.8085 5.34998e-07C34.8085 2.36197 36.7315 4.27673 39.1037 4.27673C41.4759 4.27673 43.3989 2.36197 43.3989 4.90415e-07L49.8417 4.56977e-07C49.8417 2.36197 51.7648 4.27673 54.1369 4.27673C56.5091 4.27673 58.4321 2.36197 58.4321 4.12394e-07L64.875 3.78957e-07C64.875 2.36197 66.798 4.27673 69.1702 4.27673C71.5424 4.27673 73.4654 2.36197 73.4654 3.34373e-07L79.9082 3.00936e-07C79.9082 2.36197 81.8312 4.27673 84.2034 4.27673C86.5756 4.27673 88.4986 2.36197 88.4986 2.56353e-07L94.9415 2.22916e-07C94.9415 2.36197 96.8645 4.27673 99.2367 4.27673C101.609 4.27673 103.532 2.36197 103.532 1.78333e-07L109.975 1.44895e-07C109.975 2.36197 111.898 4.27673 114.27 4.27673C116.642 4.27673 118.565 2.36197 118.565 1.00312e-07L125.008 6.68747e-08C125.008 2.36197 126.931 4.27673 129.303 4.27673ZM119.809 18.0851H18.5324V151.915H119.809V18.0851Z"
-          fill={`${category === categoryName || hovered ? '#FAB546' : 'white'}`}
+          fill={`${letterRequest.category === categoryName || hovered ? '#FAB546' : 'white'}`}
         />
       </svg>
     </div>

diff --git a/src/pages/Write/components/FontOption.tsx b/src/pages/Write/components/FontOption.tsx
@@ -6,9 +6,8 @@ import useWrite from '@/stores/writeStore';
 import { FONT_LIST } from '../constants';
 
 export default function FontOption() {
-  const setFontType = useWrite((state) => state.setFontType);
-  const fontType = useWrite((state) => state.fontType);
-
+  const letterRequest = useWrite((state) => state.letterRequest);
+  const setLetterRequest = useWrite((state) => state.setLetterRequest);
   return (
     <div className="flex w-full flex-col gap-3 px-4 pt-3 pb-[30px]">
       <div className="flex h-[330px] flex-col gap-3 overflow-y-scroll">
@@ -23,13 +22,13 @@ export default function FontOption() {
                     `${font.fontFamily}`,
                   )}
                   onClick={() => {
-                    setFontType(font.fontType);
+                    setLetterRequest({ fontType: font.fontType });
                   }}
                 >
                   안녕! 나는 따수미야! 0123456789{' '}
                   <CheckIcon
                     className={twMerge(
-                      `h-5 w-5 ${fontType === font.fontType ? 'text-primary-1-hover' : 'text-black'}`,
+                      `h-5 w-5 ${letterRequest.fontType === font.fontType ? 'text-primary-1-hover' : 'text-black'}`,
                     )}
                   />
                 </button>