refactor : ResultLetter 타입 변경

Author: wldnjs990

src/components/ResultLetter.tsx

@@ -15,7 +15,7 @@ export default function ResultLetter({
 
   return (
     <div
-      className="flex w-full flex-col gap-[35px] p-4"
+      className="flex w-full max-w-[300px] flex-col gap-[35px] p-4"
       style={{ backgroundImage: `url(${letterPink})` }}
     >
       <div className="flex justify-between gap-3">

src/pages/Admin/Report.tsx

@@ -80,7 +80,7 @@ export default function ReportManage() {
       },
     },
   ];
-  const [allReports, setAllReports] = useState();
+  // const [allReports, setAllReports] = useState();
   useEffect(() => {
     const getAllReports = async () => {
       const res = await client.get('/api/reports');

src/pages/RandomLetters/Matched.tsx

@@ -9,7 +9,7 @@ export default function Matched() {
           {'00'} : {'00'} : {'00'}
         </p>
         <div className="mt-2 w-75">
-          <ResultLetter stampName="기타" title="테스트용가리" />
+          <ResultLetter categoryName="ETC" title="테스트용가리" />
         </div>
         <button className="bg-primary-3 body-m mt-12.5 w-full rounded-lg py-2" onClick={() => {}}>
           매칭 취소하기

src/pages/RandomLetters/MatchingSelect.tsx

@@ -18,18 +18,18 @@ export default function MatchingSelect({
   const [selectedCategory, setSelectedCategory] = useState('전체');
 
   const CATEGORY_LIST = ['전체', '위로와 공감', '축하와 응원', '고민 상담', '기타'];
-  const DUMMY_LIST: { stampName: Stamp; title: string }[] = [
-    { stampName: '위로와 공감', title: '위로가 필요해요' },
-    { stampName: '축하와 응원', title: '저에게 미움받을 용기를 주세요' },
-    { stampName: '고민 상담', title: '삶이 무료해서 고민이에요' },
-    { stampName: '기타', title: '어제 꾼 꿈이 신기했어요' },
-    { stampName: '고민 상담', title: '삶이 유료해서 고민이에요' },
-    { stampName: '축하와 응원', title: '어제 취업했어요!!!!' },
-    { stampName: '축하와 응원', title: '어제 게임 신기록 세웠어요!!!!!' },
-    { stampName: '기타', title: '기타는 핑거스타일이 멋있는거 같아요' },
-    { stampName: '위로와 공감', title: '10년지기 친구가 이사를 가요' },
+  const DUMMY_LIST: { categoryName: Category; title: string }[] = [
+    { categoryName: 'CONSOLATION', title: '위로가 필요해요' },
+    { categoryName: 'CELEBRATION', title: '저에게 미움받을 용기를 주세요' },
+    { categoryName: 'CONSULT', title: '삶이 무료해서 고민이에요' },
+    { categoryName: 'ETC', title: '어제 꾼 꿈이 신기했어요' },
+    { categoryName: 'CONSULT', title: '삶이 유료해서 고민이에요' },
+    { categoryName: 'CELEBRATION', title: '어제 취업했어요!!!!' },
+    { categoryName: 'CELEBRATION', title: '어제 게임 신기록 세웠어요!!!!!' },
+    { categoryName: 'ETC', title: '기타는 핑거스타일이 멋있는거 같아요' },
+    { categoryName: 'CONSOLATION', title: '10년지기 친구가 이사를 가요' },
     {
-      stampName: '기타',
+      categoryName: 'ETC',
       title:
         '햄부기햄북 햄북어 햄북스딱스 함부르크햄부가우가 햄비기햄부거 햄부가티햄부기온앤 온 을 차려오거라.',
     },
@@ -53,10 +53,13 @@ export default function MatchingSelect({
                     className="w-full cursor-pointer"
                     onClick={() => {
                       setOpenModal(true);
-                      setSelectedLetter(() => ({ stampName: list.stampName, title: list.title }));
+                      setSelectedLetter(() => ({
+                        categoryName: list.categoryName,
+                        title: list.title,
+                      }));
                     }}
                   >
-                    <ResultLetter stampName={list.stampName} title={list.title} />
+                    <ResultLetter categoryName={list.categoryName} title={list.title} />
                   </div>
                 </SwiperSlide>
               );

src/pages/RandomLetters/MatchingSelectModal.tsx

@@ -19,7 +19,7 @@ function MatchingSelectModal({
           <span>수락한 편지는 5분이 지나면 취소할 수 없습니다.</span>
         </div>
         <div className="mt-4 w-full">
-          <ResultLetter stampName={selectedLetter.stampName} title={selectedLetter.title} />
+          <ResultLetter categoryName={selectedLetter.categoryName} title={selectedLetter.title} />
         </div>
         <div className="mt-12.5 flex w-[300px] gap-4">
           <button

src/pages/RandomLetters/index.tsx

@@ -9,15 +9,15 @@ import MatchingSelectModal from './MatchingSelectModal';
 
 const RandomLettersPage = () => {
   const [openModal, setOpenModal] = useState<boolean>(false);
-  const [matched, setMatched] = useState<boolean>(false);
+  const [matched] = useState<boolean>(false); //setMatched 임시 제거
   const [selectedLetter, setSelectedLetter] = useState<SelectedLetter>({
-    stampName: '기타',
+    categoryName: 'ETC',
     title: 'error',
   });
 
   return (
     <>
-      <div className="flex grow flex-col items-center overflow-hidden">
+      <div className="z-10 flex grow flex-col items-center overflow-hidden">
         <PageTitle className="mt-20">
           {!matched ? '답장하고 싶은 편지를 선택해주세요!' : '이미 답장 중인 편지가 있어요!'}
         </PageTitle>
@@ -26,11 +26,11 @@ const RandomLettersPage = () => {
         ) : (
           <Matched />
         )}
-        <BackgroundBottom />
         {openModal && (
           <MatchingSelectModal setOpenModal={setOpenModal} selectedLetter={selectedLetter} />
         )}
       </div>
+      <BackgroundBottom />
     </>
   );
 };

src/types/random.d.ts

@@ -1,4 +1,4 @@
 interface SelectedLetter {
-  stampName: Stamp;
+  categoryName: Category;
   title: string;
 }