191 feat 지도 편지 페이지 검색창 포커스 시 searchfullscreen 표시 (#192)

* feat: 지도 편지 페이지 검색창 포커스 시 SearchFullScreen 표시 * style : SearchFullScreen 테일윈드 수정
prgrms-web-devcourse-final-project · Dec 3, 2024 · 0da4f87 · 0da4f87
1 parent e2724c5
commit 0da4f87
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 37 deletions.
diff --git a/src/components/MapPage/Maplibre/MaplibreWithSearch.stories.tsx b/src/components/MapPage/Maplibre/MaplibreWithSearch.stories.tsx
@@ -18,9 +18,6 @@ export default meta;
 type Story = StoryObj<typeof MaplibreWithSearch>;
 
 export const WithSearch: Story = {
-    args: {
-        searchText: '서울'
-    },
     parameters: {
         docs: {
             description: {

diff --git a/src/components/MapPage/Maplibre/MaplibreWithSearch.tsx b/src/components/MapPage/Maplibre/MaplibreWithSearch.tsx
@@ -6,7 +6,11 @@ import mapStyle from './map_style.json';
 import { StyleSpecification } from 'maplibre-gl';
 import { IoIosSearch } from 'react-icons/io';
 
-export const MaplibreWithSearch = () => {
+type MaplibreWithSearchProps = {
+    onFocus: () => void;
+};
+
+export const MaplibreWithSearch = ({ onFocus }: MaplibreWithSearchProps) => {
     const [searchText, setSearchText] = useState('');
     const [currentLocation, setCurrentLocation] = useState<{
         longitude: number;
@@ -79,6 +83,7 @@ export const MaplibreWithSearch = () => {
                     onChange={(e) => setSearchText(e.target.value)}
                     placeholder="원하는 위치를 검색해보세요!"
                     className="w-56 p-2 rounded-md outline-none"
+                    onFocus={onFocus}
                 />
                 <button onClick={handleSearch} className="px-4 py-2">
                     <IoIosSearch />

diff --git a/src/components/MapPage/SearchFullScreen/SearchFullScreen.tsx b/src/components/MapPage/SearchFullScreen/SearchFullScreen.tsx
@@ -1,5 +1,4 @@
 import { BackButton } from '@/components/Common/BackButton/BackButton';
-import { useNavigate } from 'react-router-dom';
 import { IoIosSearch } from 'react-icons/io';
 import { SearchHistoryList } from '../SearchHistoryList/SearchHistoryList';
 
@@ -9,14 +8,25 @@ const searchHistory = [
     { place: '서울시 송파구 올림픽로', date: '12.03.' }
 ];
 
-export const SearchFullScreen = () => {
-    const navigate = useNavigate();
+type SearchFullScreenProps = {
+    isOpen: boolean;
+    onClose: () => void;
+};
+
+export const SearchFullScreen = ({
+    isOpen,
+    onClose
+}: SearchFullScreenProps) => {
     const onBackClick = () => {
-        navigate(-1);
+        onClose();
     };
 
+    if (!isOpen) {
+        return null;
+    }
+
     return (
-        <div className="z-10 mx-auto min-w-[375px] max-w-[475px]  bg-white border h-lvh">
+        <div className="mx-auto border min-w-[375px] max-w-[475px] h-[1vh]">
             <div className="flex items-center pl-3 pr-4 justify-between w-full border-b h-12">
                 <BackButton onClick={onBackClick} />
                 <input

diff --git a/src/pages/Map/MapExplorerPage.tsx b/src/pages/Map/MapExplorerPage.tsx
@@ -1,49 +1,72 @@
+import { useState } from 'react';
 import { LetterInfoContainer } from '@/components/MapPage/LetterInfoContainer/LetterInfoContainer';
 import { NavigateContainer } from '@/components/MapPage/NavigateContainer/NavigateContainer';
-import { Maplibre } from '@/components/MapPage/Maplibre/Maplibre';
+import { MaplibreWithSearch } from '@/components/MapPage/Maplibre/MaplibreWithSearch';
 import { HiOutlinePencilAlt } from 'react-icons/hi';
 import { useSelectedLetterStore } from '@/stores/useSelectedLetterStore';
 import { NavLink } from 'react-router-dom';
+import { SearchFullScreen } from '@/components/MapPage/SearchFullScreen/SearchFullScreen';
 
 export const MapExplorerPage = () => {
     const selectedLetter = useSelectedLetterStore(
         (state) => state.selectedLetter
     );
+    const [isSearchFocused, setIsSearchFocused] = useState(false);
+    const [isOpen, setIsOpen] = useState(false);
+
+    const onFocus = () => {
+        setIsSearchFocused(true);
+        setIsOpen(true);
+    };
+
+    const onClose = () => {
+        setIsOpen(false);
+        setIsSearchFocused(false);
+    };
 
     return (
         <div className="">
             <div className="relative">
-                <Maplibre />
+                {!isSearchFocused && <MaplibreWithSearch onFocus={onFocus} />}
+                {isOpen && (
+                    <div className="absolute top-0 w-full">
+                        <SearchFullScreen isOpen={isOpen} onClose={onClose} />
+                    </div>
+                )}
             </div>
 
             <div className="absolute bottom-20 left-1/2 transform -translate-x-1/2">
-                {selectedLetter ? (
-                    <>
-                        <NavLink
-                            to={'/letter/create'}
-                            className="flex-center bottom-60 translate-y-7 absolute left-1/2 transform -translate-x-12 btn-base gap-2 w-52 p-2 rounded-2xl"
-                        >
-                            <HiOutlinePencilAlt />
-                            지도 편지 작성하기
-                        </NavLink>
-                        <LetterInfoContainer
-                            id={123}
-                            title="익명 편지"
-                            distance={400}
-                            date="21.11.15"
-                            daysLeft={21}
-                        />
-                    </>
-                ) : (
+                {!isSearchFocused && (
                     <>
-                        <NavLink
-                            to={'/letter/create'}
-                            className="flex-center bottom-24 translate-y-7 absolute left-1/2 transform -translate-x-12 btn-base gap-2 w-52 p-2 rounded-2xl"
-                        >
-                            <HiOutlinePencilAlt />
-                            지도 편지 작성하기
-                        </NavLink>
-                        <NavigateContainer count={5} />
+                        {selectedLetter ? (
+                            <>
+                                <NavLink
+                                    to={'/letter/create'}
+                                    className="flex-center bottom-60 translate-y-7 absolute left-1/2 transform -translate-x-12 btn-base gap-2 w-52 p-2 rounded-2xl"
+                                >
+                                    <HiOutlinePencilAlt />
+                                    지도 편지 작성하기
+                                </NavLink>
+                                <LetterInfoContainer
+                                    id={123}
+                                    title="익명 편지"
+                                    distance={400}
+                                    date="21.11.15"
+                                    daysLeft={21}
+                                />
+                            </>
+                        ) : (
+                            <>
+                                <NavLink
+                                    to={'/letter/create'}
+                                    className="flex-center bottom-24 translate-y-7 absolute left-1/2 transform -translate-x-12 btn-base gap-2 w-52 p-2 rounded-2xl"
+                                >
+                                    <HiOutlinePencilAlt />
+                                    지도 편지 작성하기
+                                </NavLink>
+                                <NavigateContainer count={5} />
+                            </>
+                        )}
                     </>
                 )}
             </div>