fix:장소선택시 -> 색깔변경 (#60)

moidot · Jan 18, 2024 · 91f5db2 · 91f5db2
1 parent 3a67faf
commit 91f5db2
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 4 deletions.
diff --git a/src/components/home/Home4.tsx b/src/components/home/Home4.tsx
@@ -9,8 +9,8 @@ const Home4 = () => {
   return (
     <div className="flex flex-col justify-center items-center gap-10 p-4">
       <div className="flex flex-col justify-center items-center">
-        <div className="font-Pretendard text-black text-h2 font-bold ">모임장이 되어</div>
-        <div className="font-Pretendard text-black text-h2 font-bold ">모임원들과 장소를 정해보세요!</div>
+        <div className="font-Pretendard text-black text-h3 font-bold ">모임장이 되어</div>
+        <div className="font-Pretendard text-black text-h3 font-bold ">모임원들과 장소를 정해보세요!</div>
       </div>
       <div onClick={onClick}>
         <StartButton />

diff --git a/src/components/spaceCreate/spaceCreatLocationModal/index.tsx b/src/components/spaceCreate/spaceCreatLocationModal/index.tsx
@@ -19,6 +19,7 @@ const SpaceCreateStartLocationModal = ({ modalClick, setModalClick }: SpaceCreat
   const [loadCurrentLocation, setLoadCurrentLocation] = useState<boolean>(false);
   const geolocationInfo = useGeolocation();
   const [searchDataList, setSearchDataList] = useState<GetKakaoLocationSearchData[]>([]);
+  const [selectedItemId, setSelectedItemId] = useState<string | null>(null);
 
   useEffect(() => {
     const mapScript = document.createElement('script');
@@ -94,7 +95,12 @@ const SpaceCreateStartLocationModal = ({ modalClick, setModalClick }: SpaceCreat
           <div className="w-[586px] h-[8px] bg-bg_orange mt-[22px] mb-[16px]"></div>
           {searchDataList &&
             searchDataList.map((item) => (
-              <div key={item.id}>
+              <div
+                key={item.id}
+                onClick={() => setSelectedItemId(item.id)}
+                className={`w-[586px] h-[72px] mt-[53px] rounded-lg p-[20px]  flex flex-row items-center justify-between outline-none ${
+                  selectedItemId === item.id ? 'bg-bg_orange' : ''
+                }`}>
                 <SearchLocationItem
                   locationTitle={item.place_name}
                   detailLocation={item.road_address_name}

diff --git a/src/components/spaceCreate/spaceCreatLocationModal/searchLocationItem/index.tsx b/src/components/spaceCreate/spaceCreatLocationModal/searchLocationItem/index.tsx
@@ -26,7 +26,7 @@ const SearchLocationItem = ({ detailLocation, locationTitle, lat, lng }: SearchL
   };
 
   return (
-    <div className="w-[586px] h-[72px] mt-[53px] rounded-lg p-[20px] bg-bg_orange flex flex-row items-center justify-between outline-none">
+    <div className="w-[586px]   flex flex-row items-center justify-between outline-none">
       <div>
         <div className="font-normal font-Pretendard text-font_black text-b2">{locationTitle}</div>
         <div className="font-normal font-Pretendard text-b3 text-font_gray">{detailLocation}</div>