refactor : 리스트 아이템 컴포넌트 리팩토링

prgrms-web-devcourse-final-project · Jan 2, 2025 · a3a9441 · a3a9441
1 parent 32197c7
commit a3a9441
Showing 1 changed file with 99 additions and 45 deletions.
diff --git a/src/components/StoragePage/LetterListItem.tsx b/src/components/StoragePage/LetterListItem.tsx
@@ -1,20 +1,22 @@
-import { Itembox } from '@/components/Common/Itembox/Itembox';
 import { BottleLetter } from '@/components/Common/BottleLetter/BottleLetter';
 import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
-import { DeleteLetterType, storageLetterType } from '@/types/letter';
-import { match } from 'ts-pattern';
+import {
+    DeleteLetterType,
+    StorageKeywordLetter,
+    StorageLetterDataType,
+    StorageMapArchivedLetter,
+    StorageMapReceivedLetter,
+    StorageMapSentLetter
+} from '@/types/letter';
+import { Category } from '../Common/LetterListItem/Category';
 
-interface Letter {
-    letterId: number;
-    title: string;
-    label: string;
-    letterType: string;
-    boxType: string;
-    createdAt: string;
-}
+export const ASSETS = {
+    LOCATION: '/src/assets/Location.svg',
+    RIGHT_ARROW: '/src/assets/rightArrow.svg'
+} as const;
 
 type LetterListItemProps = {
-    letter: Letter;
+    letter: StorageLetterDataType;
     checked: boolean;
     handleSingleCheck: (
         checked: boolean,
@@ -28,39 +30,91 @@ export const LetterListItem = ({
     handleSingleCheck
 }: LetterListItemProps) => {
     const navigate = useNavigate();
-
-    const { letterType } = useParams();
+    const { selectedLetterType } = useParams();
     const [searchParams] = useSearchParams();
     const filterType = searchParams.get('filtertype');
 
-    const renderCategory = (boxType: string, letterType: string) => {
-        const condition = `${boxType}-${letterType}`;
-        switch (condition) {
-            case 'SEND-LETTER':
-                return '보낸 편지';
-            case 'SEND-REPLY_LETTER':
-                return '보낸 답장';
-            case 'RECEIVE-LETTER':
-                return '받은 편지';
-            case 'RECEIVE-REPLY_LETTER':
-                return '받은 답장';
+    const getNavigatePath = (letter: StorageLetterDataType) => {
+        switch (selectedLetterType) {
+            case 'keyword':
+                return `/letter/keyword/${letter.letterType}/${filterType}/${letter.letterId}`;
+            case 'map':
+                return `/letter/map/${filterType}/${letter.letterId}`;
+            case 'bookmark':
+                return `/letter/map/${filterType}/bookmark/${letter.letterId}`;
             default:
+                throw new Error(
+                    `Unsupported letter type: ${selectedLetterType}`
+                );
         }
     };
 
-    const getNavigatePath = (letter: Letter) => {
-        return match<storageLetterType>(letterType as storageLetterType)
-            .with(
-                'keyword',
-                () =>
-                    `/letter/keyword/${letter.letterType}/${filterType}/${letter.letterId}`
-            )
-            .with('map', () => `/letter/map/${filterType}/${letter.letterId}`)
-            .with(
-                'bookmark',
-                () => `/letter/map/${filterType}/bookmark/${letter.letterId}`
-            )
-            .exhaustive();
+    const renderListContent = () => {
+        switch (selectedLetterType) {
+            case 'keyword': {
+                const keywordLetter = letter as StorageKeywordLetter;
+                return (
+                    <>
+                        <Category
+                            boxType={keywordLetter.boxType}
+                            letterType={keywordLetter.letterType}
+                        />
+                        <h3 className="text-md font-bold">
+                            {keywordLetter.title}
+                        </h3>
+                    </>
+                );
+            }
+            case 'map': {
+                const mapLetter = letter as
+                    | StorageMapSentLetter
+                    | StorageMapReceivedLetter;
+
+                const getUserNicknameLabel = (
+                    letter: StorageMapSentLetter | StorageMapReceivedLetter
+                ) => {
+                    if (letter.type === 'PUBLIC') return '';
+                    // Target
+                    const prefix =
+                        'targetUserNickname' in letter ? 'To.' : 'From.';
+                    const nickname =
+                        'targetUserNickname' in letter
+                            ? letter.targetUserNickname
+                            : letter.senderNickname;
+
+                    return nickname ? `${prefix} ${nickname}` : '';
+                };
+                return (
+                    <>
+                        <div className="text-sm">
+                            {getUserNicknameLabel(mapLetter)}
+                        </div>
+                        <div className="flex flex-row gap-1 items-center">
+                            <h3 className="text-md font-bold">
+                                {letter.title}
+                            </h3>
+                        </div>
+                        <div className="flex flex-row gap-1">
+                            <img src="/src/assets/Location.svg"></img>
+                            <div className="text-sm">
+                                서울특별시 동대문구 어디어디
+                            </div>
+                        </div>
+                    </>
+                );
+            }
+            case 'bookmark': {
+                const bookmarkLetter = letter as StorageMapArchivedLetter;
+                return (
+                    <>
+                        <h3 className="text-md font-bold">
+                            {bookmarkLetter.title}
+                        </h3>
+                        <div>샘플 위치가 들어갑니다.</div>
+                    </>
+                );
+            }
+        }
     };
 
     return (
@@ -81,15 +135,15 @@ export const LetterListItem = ({
                 className="flex flex-row gap-4 w-full h-[90px] items-center p-4 rounded-lg bg-sample-gray cursor-pointer"
                 onClick={() => navigate(getNavigatePath(letter))}
             >
-                <Itembox>
-                    <BottleLetter Letter={letter} />
-                </Itembox>
-                <div className="flex flex-col h-full">
-                    <div className="text-[12px] text-gray-500 mt-2">
-                        {renderCategory(letter.boxType, letter.letterType)}
+                <div className="flex flex-row gap-4 w-full items-center">
+                    <div className="w-[67px] h-[67px] p-2 bg-white rounded-full">
+                        <BottleLetter Letter={letter} />
+                    </div>
+                    <div className="flex flex-col h-full">
+                        {renderListContent()}
                     </div>
-                    <h3 className="text-sm font-bold">{letter.title}</h3>
                 </div>
+                <img src={ASSETS.RIGHT_ARROW} />
             </div>
         </div>
     );