refactor : 지도 페이지 리팩토링 (#461)

* design : 주석 제거 및 디자인 변경경 * design : 지도 편지 작성 아이콘 위치 변경경 * refactor : 검색 로직 중복 제거
prgrms-web-devcourse-final-project · Jan 3, 2025 · 04f8986 · 04f8986
1 parent b7b3bb9
commit 04f8986
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 53 deletions.
diff --git a/...tterDetailContainer/MapLetterArchieveDetailContainer/MapLetterArchieveDetailContainer.tsx b/...tterDetailContainer/MapLetterArchieveDetailContainer/MapLetterArchieveDetailContainer.tsx
@@ -33,7 +33,6 @@ export const MapLetterArchieveDetailContainer = () => {
         letterId:
             dataType === 'REPLY_LETTER' ? Number(replyLetterId || letterId) : 0
     });
-    console.log(replyLetterId);
 
     useEffect(() => {
         const error = mapError || replyError;

diff --git a/src/components/MapPage/LetterInfoContainer/LetterInfoContainer.tsx b/src/components/MapPage/LetterInfoContainer/LetterInfoContainer.tsx
@@ -28,7 +28,7 @@ export const LetterInfoContainer = ({
     return (
         <div className="flex flex-col w-[330px] bg-white border rounded-lg p-4 shadow-md">
             <div className="flex gap-4 mb-4">
-                <div className="p-2 bg-gray-100 rounded-md w-20 h-20">
+                <div className="p-2 bg-gray-100 rounded-full w-20 h-20">
                     <BottleLetter Letter={Letter} />
                 </div>
                 <div className="flex flex-col h-20">

diff --git a/src/components/MapPage/SearchFullScreen/SearchFullScreen.tsx b/src/components/MapPage/SearchFullScreen/SearchFullScreen.tsx
@@ -32,10 +32,12 @@ export const SearchFullScreen = ({
         loadRecentSearches();
     }, [loadRecentSearches]);
 
-    const onBackClick = () => {
-        clearSearchedLocation();
-        onClose();
-    };
+    useEffect(() => {
+        if (isOpen && inputRef.current) {
+            inputRef.current.focus();
+        }
+    }, [isOpen]);
+
     const onSearchClick = () => {
         const searchTerm = inputRef.current?.value.trim();
         if (searchTerm) {
@@ -45,14 +47,12 @@ export const SearchFullScreen = ({
     };
 
     const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
-        const searchTerm = inputRef.current?.value?.trim() || '';
-        if (e.key === 'Enter' && searchTerm !== '') {
-            saveSearchTerm(searchTerm);
-            onClose();
+        if (e.key === 'Enter') {
+            onSearchClick();
         }
     };
 
-    const onTermsClick = (searchTerm: string) => {
+    const onTermClick = (searchTerm: string) => {
         if (inputRef.current) {
             inputRef.current.value = searchTerm;
             saveSearchTerm(searchTerm);
@@ -63,22 +63,19 @@ export const SearchFullScreen = ({
         }
     };
 
-    useEffect(() => {
-        if (inputRef.current) {
-            inputRef.current.focus();
-        }
-    }, [isOpen]);
-
-    if (!isOpen) {
-        return null;
-    }
-
     const isInputNotEmpty = inputRef.current?.value.trim() !== '';
 
+    if (!isOpen) return null;
+
     return (
         <div className="mx-auto min-w-[375px] max-w-[475px]">
             <div className="flex items-center justify-between w-full h-12 pl-3 pr-4 border-b">
-                <BackButton onClick={onBackClick} />
+                <BackButton
+                    onClick={() => {
+                        clearSearchedLocation();
+                        onClose();
+                    }}
+                />
                 <input
                     ref={inputRef}
                     type="text"
@@ -113,28 +110,24 @@ export const SearchFullScreen = ({
                         <RelatedSearchTermsList
                             key={index}
                             place={related}
-                            onClick={() => onTermsClick(related)}
+                            onClick={() => onTermClick(related)}
+                        />
+                    ))
+                ) : recentSearches.length > 0 ? (
+                    recentSearches.map((history, index) => (
+                        <SearchHistoryList
+                            key={index}
+                            place={history.place}
+                            date={history.date}
+                            index={index}
+                            onDelete={deleteSearchTerm}
+                            onClick={() => onTermClick(history.place)}
                         />
                     ))
                 ) : (
-                    <>
-                        {recentSearches.length > 0 ? (
-                            recentSearches.map((history, index) => (
-                                <SearchHistoryList
-                                    key={index}
-                                    place={history.place}
-                                    date={history.date}
-                                    index={index}
-                                    onDelete={deleteSearchTerm}
-                                    onClick={() => onTermsClick(history.place)}
-                                />
-                            ))
-                        ) : (
-                            <p className="mt-16 text-sm text-gray-500 flex-center">
-                                최근 검색어 내역이 없습니다.
-                            </p>
-                        )}
-                    </>
+                    <p className="mt-16 text-sm text-gray-500 flex-center">
+                        최근 검색어 내역이 없습니다.
+                    </p>
                 )}
             </div>
         </div>

diff --git a/src/pages/Map/MapExplorerPage.tsx b/src/pages/Map/MapExplorerPage.tsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { LetterInfoContainer } from '@/components/MapPage/LetterInfoContainer/LetterInfoContainer';
 import { NavigateContainer } from '@/components/MapPage/NavigateContainer/NavigateContainer';
 import { MaplibreWithSearch } from '@/components/MapPage/Maplibre/MaplibreWithSearch';
-import { HiOutlinePencilAlt } from 'react-icons/hi';
+import { PiPencilSimpleLine } from 'react-icons/pi';
 import { useSelectedLetterStore } from '@/stores/useSelectedLetterStore';
 import { NavLink } from 'react-router-dom';
 import { SearchFullScreen } from '@/components/MapPage/SearchFullScreen/SearchFullScreen';
@@ -51,7 +51,7 @@ const MapExplorerPage = () => {
         setQuery(event.target.value);
     };
 
-    const CreateBtnStyle = `text-sample-blue absolute gap-2 p-2 transform -translate-x-12 flex-center bottom-[5rem] translate-y-7 left-[46%] bg-white  w-52 rounded-2xl`;
+    const CreateBtnStyle = `text-sample-blue absolute p-2 transform translate-x-64 flex-center bottom-[5rem] translate-y-7 bg-white w-10 rounded-2xl`;
 
     return (
         <div className="h-full">
@@ -86,19 +86,17 @@ const MapExplorerPage = () => {
                                 {searchedLocation ? (
                                     <NavLink
                                         to={`/letter/map/:${searchedLocation.lat}/:${searchedLocation.lon}/create`}
-                                        className={CreateBtnStyle}
+                                        className={`mb-32 ml-8 ${CreateBtnStyle}`}
                                     >
-                                        <HiOutlinePencilAlt />
-                                        지도 편지 작성하기
+                                        <PiPencilSimpleLine />
                                     </NavLink>
                                 ) : (
                                     <NavLink
                                         to={'/letter/create'}
-                                        className={`cursor-not-allowed mb-36 ${CreateBtnStyle}`}
+                                        className={`cursor-not-allowed transform translate-x-72 mb-32 ${CreateBtnStyle}`}
                                         onClick={(e) => e.preventDefault()}
                                     >
-                                        <HiOutlinePencilAlt />
-                                        지도 편지 작성하기
+                                        <PiPencilSimpleLine />
                                     </NavLink>
                                 )}
                                 <LetterInfoContainer
@@ -119,17 +117,15 @@ const MapExplorerPage = () => {
                                         to={`/letter/map/:${searchedLocation.lat}/:${searchedLocation.lon}/create`}
                                         className={CreateBtnStyle}
                                     >
-                                        <HiOutlinePencilAlt />
-                                        지도 편지 작성하기
+                                        <PiPencilSimpleLine />
                                     </NavLink>
                                 ) : (
                                     <NavLink
                                         to={'/letter/create'}
                                         className={`cursor-not-allowed ${CreateBtnStyle}`}
                                         onClick={(e) => e.preventDefault()}
                                     >
-                                        <HiOutlinePencilAlt />
-                                        지도 편지 작성하기
+                                        <PiPencilSimpleLine />
                                     </NavLink>
                                 )}
                                 <NavigateContainer