Feat: 패널 및 마커 기능 고도화

package.json

@@ -16,6 +16,7 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
+    "jotai": "^2.11.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.4.0",

src/components/Building.tsx

@@ -1,12 +1,12 @@
 import styled from "@emotion/styled";
 import Divider from "./Divider.tsx";
-import { buildingData, BuildingInfo } from "./data/buildingData.ts";
+import { buildingData } from "./data/buildingData.ts";
 import Overflow from "./Overflow.tsx";
+import { useAtom } from "jotai";
+import { selectedBuildingAtom } from "../store/building.ts";
 
-interface BuildingProps {
-  onBuildingClick: (building: BuildingInfo) => void;
-}
-const Building: React.FC<BuildingProps> = ({ onBuildingClick }) => {
+const Building = () => {
+  const [, setSelectedBuilding] = useAtom(selectedBuildingAtom);
   return (
     <>
       <Overflow>
@@ -20,7 +20,7 @@ const Building: React.FC<BuildingProps> = ({ onBuildingClick }) => {
             <>
               <BuildingItem
                 key={building.name}
-                onClick={() => onBuildingClick(building)}
+                onClick={() => setSelectedBuilding(building)}
               >
                 <Image src={building.image} />
                 <Detail>

src/components/BuildingDetail.tsx

@@ -1,9 +1,17 @@
 import styled from "@emotion/styled";
 import { BuildingInfo, FacilityInfo } from "./data/buildingData";
 import Divider from "./Divider";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import FacilityItem from "./FacilityItem.tsx";
 import Overflow from "./Overflow.tsx";
+import { FaAngleLeft } from "react-icons/fa6";
+import { useAtom } from "jotai";
+import {
+  isPanelOpenAtom,
+  markFacilityAtom,
+  selectedBuildingAtom,
+} from "../store/building.ts";
+import { BackButton } from "./Buttons.tsx";
 interface BuildingDetailProps {
   building: BuildingInfo;
   onFacilityClick?: (facility: FacilityInfo) => void;
@@ -13,24 +21,35 @@ const BuildingDetail: React.FC<BuildingDetailProps> = ({
   onFacilityClick,
 }) => {
   const [selectedFloor, setSelectedFloor] = useState<string | null>(null);
-  const [selectedType, setSelectedType] = useState<number | null>(null);
+  const [, setSelectedBuilding] = useAtom(selectedBuildingAtom);
+  const [markFacility, setMarkFacility] = useAtom(markFacilityAtom);
+  const [isPanelOpen] = useAtom(isPanelOpenAtom);
   const handleTypeChange = (type: number) => {
-    setSelectedType(Number(type));
-    if (selectedType == type) {
-      setSelectedType(null);
+    if (markFacility === type) {
+      setMarkFacility(null);
+    } else {
+      setMarkFacility(type);
     }
   };
   const handleFloorChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
     setSelectedFloor(event.target.value);
   };
+  useEffect(() => {
+    setSelectedFloor("");
+  }, [building]);
   return (
     <>
       <Overflow>
+        {isPanelOpen && (
+          <BackButton onClick={() => setSelectedBuilding(null)}>
+            <FaAngleLeft size="25px" />
+          </BackButton>
+        )}
         <Image src={building.image} alt={building.name} />
         <Container>
           <h2>{building.name}</h2>
           <p>운영 시간: {building.time}</p>
-          <DropDown onChange={handleFloorChange}>
+          <DropDown value={selectedFloor ?? ""} onChange={handleFloorChange}>
             <option key={null} value="">
               층수 선택
             </option>
@@ -49,19 +68,19 @@ const BuildingDetail: React.FC<BuildingDetailProps> = ({
           <Facilities>
             <Button
               onClick={() => handleTypeChange(1)}
-              selected={1 === selectedType}
+              selected={1 === markFacility}
             >
               화장실
             </Button>
             <Button
               onClick={() => handleTypeChange(2)}
-              selected={2 === selectedType}
+              selected={2 === markFacility}
             >
               정수기
             </Button>
             <Button
               onClick={() => handleTypeChange(3)}
-              selected={3 === selectedType}
+              selected={3 === markFacility}
             >
               카페
             </Button>
@@ -77,8 +96,8 @@ const BuildingDetail: React.FC<BuildingDetailProps> = ({
                   <>
                     {selectedFloor === facility.floor && (
                       <>
-                        {selectedType ? (
-                          facility.type === selectedType && (
+                        {markFacility ? (
+                          facility.type === markFacility && (
                             <>
                               <FacilityItem facility={facility} />
                               <Divider size={false} />
@@ -96,8 +115,8 @@ const BuildingDetail: React.FC<BuildingDetailProps> = ({
                 ) : (
                   <>
                     {" "}
-                    {selectedType ? (
-                      facility.type === selectedType && (
+                    {markFacility ? (
+                      facility.type === markFacility && (
                         <>
                           <FacilityItem facility={facility} />
                           <Divider size={false} />
@@ -160,7 +179,7 @@ const Button = styled.button<ButtonProps>`
     selected &&
     `
     background:  rgb(0, 51, 99, 0.5);
-  `}//
+  `}
 `;
 
 const Image = styled.img`

src/components/LikeButton.tsx → src/components/Buttons.tsx

@@ -17,4 +17,15 @@ const LikeButton = styled.button`
     color: white;
   }
 `;
-export default LikeButton;
+const BackButton = styled.button`
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  color: white;
+
+`;
+
+export { LikeButton, BackButton };

src/components/FacilityDetail.tsx

@@ -1,17 +1,26 @@
 import React from "react";
 import { FacilityInfo } from "./data/buildingData";
 import styled from "@emotion/styled";
-import LikeButton from "./LikeButton";
+import { BackButton, LikeButton } from "./Buttons";
 import Divider from "./Divider";
 import { IoMdHeart } from "react-icons/io";
-
+import { FaAngleLeft } from "react-icons/fa6";
+import { facilityAtom, isPanelOpenAtom } from "../store/building.ts";
+import { useAtom } from "jotai";
 interface FacilityDetailProps {
   facility: FacilityInfo;
 }
 
 const FacilityDetail: React.FC<FacilityDetailProps> = ({ facility }) => {
+  const [, setFacility] = useAtom(facilityAtom);
+  const [isPanelOpen] = useAtom(isPanelOpenAtom);
   return (
     <>
+      {isPanelOpen && (
+        <BackButton onClick={() => setFacility(null)}>
+          <FaAngleLeft size="25px" color="gray" />
+        </BackButton>
+      )}
       <Container>
         <Title>
           <h2>
@@ -77,12 +86,13 @@ const ReviewContainer = styled.div`
 `;
 const Container = styled.div`
   width: 400px;
-  padding: 20px 30px;
+  padding: 20px 40px;
+  overflow: hidden;
 `;
 const Title = styled.div`
   display: flex;
   align-items: center;
-  margin-top: 10px;
+  margin-top: 20px;
 `;
 const Building = styled.p`
   margin-left: 10px;

src/components/FacilityItem.tsx

@@ -1,5 +1,5 @@
 import styled from "@emotion/styled";
-import LikeButton from "./LikeButton.tsx";
+import { LikeButton } from "./Buttons.tsx";
 import { FacilityInfo } from "./data/buildingData.ts";
 interface FacilityItemProps {
   facility?: FacilityInfo | null;

src/components/HomeBoard.tsx

@@ -1,42 +1,62 @@
 import styled from "@emotion/styled";
-import { useState } from "react";
 import { IoIosArrowBack, IoIosArrowForward } from "react-icons/io";
 import Building from "./Building";
-import { BuildingInfo, FacilityInfo } from "./data/buildingData.ts";
+import { FacilityInfo } from "./data/buildingData.ts";
 import BuildingDetail from "./BuildingDetail.tsx";
 import FacilityDetail from "./FacilityDetail.tsx";
+import { useAtom } from "jotai";
+import {
+  facilityAtom,
+  isPanelOpenAtom,
+  selectedBuildingAtom,
+  markFacilityAtom,
+} from "../store/building.ts";
 
-interface HomeBoardProps {
-  onBuildingClick: (building: BuildingInfo) => void;
-  selectedBuilding: BuildingInfo | null;
-  isPanelOpen: boolean;
-  setIsPanelOpen: (isPanelOpen: boolean) => void;
-}
-const HomeBoard: React.FC<HomeBoardProps> = ({
-  selectedBuilding,
-  onBuildingClick,
-  isPanelOpen,
-  setIsPanelOpen,
-}) => {
-  const [facility, setFacility] = useState<FacilityInfo | null>(null);
+const HomeBoard: React.FC = () => {
+  const [isPanelOpen, setIsPanelOpen] = useAtom(isPanelOpenAtom);
+  const [facility, setFacility] = useAtom(facilityAtom);
+  const [selectedBuilding] = useAtom(selectedBuildingAtom);
+  const [markFacility, setMarkFacility] = useAtom(markFacilityAtom);
   const toggleMenu = () => {
     setIsPanelOpen(!isPanelOpen);
   };
   const handleFacilityClick = (facility: FacilityInfo) => {
     setFacility(facility);
   };
+  const handleMarkFacility = (selectedMarkFacility: number) => {
+    setMarkFacility(Number(selectedMarkFacility));
+    if (markFacility === selectedMarkFacility) {
+      setMarkFacility(null);
+    }
+  };
   return (
     <>
       <Panel isOpen={isPanelOpen}>
         <MarkList>
           <li>
-            <Mark> 화장실</Mark>
+            <Mark
+              onClick={() => handleMarkFacility(1)}
+              selected={markFacility === 1}
+            >
+              {" "}
+              화장실
+            </Mark>
           </li>
           <li>
-            <Mark>정수기</Mark>
+            <Mark
+              onClick={() => handleMarkFacility(2)}
+              selected={markFacility === 2}
+            >
+              정수기
+            </Mark>
           </li>
           <li>
-            <Mark>카페</Mark>
+            <Mark
+              onClick={() => handleMarkFacility(3)}
+              selected={markFacility === 3}
+            >
+              카페
+            </Mark>
           </li>
         </MarkList>
         <Button onClick={toggleMenu}>
@@ -59,7 +79,7 @@ const HomeBoard: React.FC<HomeBoardProps> = ({
               onFacilityClick={handleFacilityClick}
             />
           ) : (
-            <Building onBuildingClick={onBuildingClick} />
+            <Building />
           )}
         </Container>
       </Panel>
@@ -95,16 +115,28 @@ const Panel = styled.div<PanelProps>`
   transition: width 0.3s ease-out;
   box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 4px 0px;
 `;
-const Mark = styled.button`
+interface MarkProps {
+  selected: boolean;
+}
+const Mark = styled.button<MarkProps>`
   background: white;
   width: 120px;
   height: 40px;
   border-radius: 20px;
   font-size: 15px;
-  border: none;
+  border: none;å
   cursor: pointer;
   box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
   padding: 10px;
+  cursor: pointer;
+  &:hover {
+    background: #B0C0CF;
+  }
+  ${({ selected }) =>
+    selected &&
+    `
+    background: #B0C0CF;
+  `}
 `;
 const Button = styled.button`
   position: absolute;