feat: improve dx of kakao map

src/app/page.tsx

@@ -1,91 +1,56 @@
 'use client'
 
-import BoardingInfoPass from '@/components/boarding-pass/boarding-info-pass'
-import PlaceListItem from '@/components/place/place-list-item'
+import { useState } from 'react'
+import KakaoMap from '@/components/kakao-map/kakao-map'
+import Marker from '@/components/kakao-map/marker'
 import PlaceMapPopup from '@/components/place/place-map-popup'
 
 const Home = () => {
+  const [temp, setTemp] = useState(false)
+
   return (
-    <main className="w-full min-h-dvh flex flex-col justify-center items-center bg-neutral-700 px-5">
-      <BoardingInfoPass
-        owner="주병호"
-        numOfCrews={1330}
-        day={19933}
-        members={[
-          '주병호',
-          '손병호',
-          '김병호',
-          '이병호',
-          '상병호',
-          '고병호',
-          '양병호',
-        ]}
-        numOfPins={19339}
-      />
-      <PlaceListItem
-        placeId="sdfsgasf"
-        name="존라멘"
-        address="서울시 성동구 장터5길"
-        rating={0.5}
-        images={[
-          'https://images.unsplash.com/photo-1551782450-a2132b4ba21d?w=164&h=164&fit=crop&auto=format',
-          'https://images.unsplash.com/photo-1551782450-a2132b4ba21d?w=164&h=164&fit=crop&auto=format',
-          'https://images.unsplash.com/photo-1551782450-a2132b4ba21d?w=164&h=164&fit=crop&auto=format',
-        ]}
-        pick={{
-          hashtags: [
-            '존맛탱구리',
-            '존존맛탱구리',
-            '존맛존맛탱구리',
-            '존맛탱존맛탱구리',
-            '존맛탱구리',
-          ],
-          isLiked: false,
-          isMyPick: false,
-          numOfLikes: 122,
-          onClickLike: () => null,
-        }}
-      />
-      <PlaceListItem
-        placeId="fasfasfas"
-        name="존라멘"
-        address="서울시 성동구 장터5길"
-        rating={0.5}
-        pick={{
-          hashtags: [
-            '존존맛탱구리',
-            '존맛',
-            '존맛탱',
-            '존맛탱구',
-            '존맛탱구리',
-          ],
-          isLiked: false,
-          isMyPick: false,
-          numOfLikes: 122,
-          onClickLike: () => null,
-        }}
-      />
-      <PlaceMapPopup
-        placeId="dsd3egg"
-        name="존라멘"
-        address="서울시 성동구 장터5길"
-        distance="3km"
-        image="https://images.unsplash.com/photo-1551782450-a2132b4ba21d?w=164&h=164&fit=crop&auto=format"
-        pick={{
-          hashtags: [
-            '존맛탱구리',
-            '존존맛탱구리',
-            '존맛존맛탱구리',
-            '존맛탱존맛탱구리',
-            '존맛탱구리',
-          ],
-          isLiked: false,
-          isMyPick: false,
-          numOfLikes: 122,
-          onClickLike: () => null,
-        }}
-      />
-    </main>
+    <div className="w-full min-h-dvh flex flex-col justify-center items-center bg-neutral-700 px-5">
+      <KakaoMap
+        className="w-[calc(100%+40px)] h-screen"
+        center={{ lat: 37.5665, lng: 126.978 }}
+        level={3}
+        onClick={(event) => console.log('Map clicked', event)}
+        onDoubleClick={(event) => console.log('Map double-clicked', event)}
+      >
+        <Marker
+          latitude={37.5665}
+          longitude={126.978}
+          type={temp ? 'selectedCafe' : 'cafe'}
+          isSaved={true}
+          onClick={() => setTemp((prev) => !prev)}
+        />
+      </KakaoMap>
+
+      {temp && (
+        <PlaceMapPopup
+          className="absolute bottom-5 px-5"
+          placeId="dsd3egg"
+          name="존라멘"
+          category="일식"
+          address="서울시 성동구 장터5길"
+          distance="3km"
+          image="https://images.unsplash.com/photo-1551782450-a2132b4ba21d?w=164&h=164&fit=crop&auto=format"
+          pick={{
+            hashtags: [
+              '존맛탱구리',
+              '존존맛탱구리',
+              '존맛존맛탱구리',
+              '존맛탱존맛탱구리',
+              '존맛탱구리',
+            ],
+            isLiked: false,
+            isMyPick: false,
+            numOfLikes: 122,
+            onClickLike: () => null,
+          }}
+        />
+      )}
+    </div>
   )
 }
 

src/components/common/icons/index.ts

@@ -1,3 +1,5 @@
+import Bar from './Bar.svg'
+import Cafe from './Cafe.svg'
 import CaretDown from './CaretDown.svg'
 import CaretLeft from './CaretLeft.svg'
 import CaretUp from './CaretUp.svg'
@@ -11,9 +13,14 @@ import HeartStraightFilled from './HeartStraightFilled.svg'
 import HeartStraightOutlined from './HeartStraightOutlined.svg'
 import Info from './Info.svg'
 import InfoCircle from './InfoCircle.svg'
+import PickFlag from './PickFlag.svg'
 import Plus from './Plus.svg'
+import Restaurant from './Restaurant.svg'
 import RoundedTriangle from './RoundedTriangle.svg'
 import Search from './Search.svg'
+import SelectedBar from './SelectedBar.svg'
+import SelectedCafe from './SelectedCafe.svg'
+import SelectedRestaurant from './SelectedRestaurant.svg'
 import ShareNetwork from './ShareNetwork.svg'
 import SignOut from './SignOut.svg'
 import StarFilled from './StarFilled.svg'
@@ -24,6 +31,8 @@ import UploadSimple from './UploadSimple.svg'
 import KakaoLogo from './KakaoLogo.svg'
 
 export const icons = {
+  bar: Bar,
+  cafe: Cafe,
   caretDown: CaretDown,
   caretLeft: CaretLeft,
   caretUp: CaretUp,
@@ -37,9 +46,14 @@ export const icons = {
   heartStraightOutlined: HeartStraightOutlined,
   info: Info,
   infoCircle: InfoCircle,
+  pickFlag: PickFlag,
   plus: Plus,
+  restaurant: Restaurant,
   roundedTriangle: RoundedTriangle,
   search: Search,
+  selectedBar: SelectedBar,
+  selectedCafe: SelectedCafe,
+  selectedRestaurant: SelectedRestaurant,
   shareNetwork: ShareNetwork,
   signOut: SignOut,
   starFilled: StarFilled,

src/components/hashtag-list.tsx

@@ -1,11 +1,10 @@
-'use client'
-
-import { useEffect, useLayoutEffect, useRef, useState } from 'react'
+import { useRef, useState } from 'react'
 
 import { Chip } from '@/components'
 import cn from '@/utils/cn'
 import { ClassName } from '@/models/interface'
 import { getFitContainerWidthHashtag } from '@/utils/hashtag'
+import { useIsomorphicLayoutEffect } from '@/hooks/use-isomorphic-layout-effect'
 
 interface HashtagListProps extends ClassName {
   placeId: string
@@ -16,9 +15,6 @@ const HashtagList = ({ placeId, hashtags, className }: HashtagListProps) => {
   const [visibleHashtags, setVisibleHashtags] = useState(hashtags)
   const containerRef = useRef<HTMLDivElement>(null)
 
-  const useIsomorphicLayoutEffect =
-    typeof window !== 'undefined' ? useLayoutEffect : useEffect
-
   useIsomorphicLayoutEffect(() => {
     const editHashtag = () => {
       if (!containerRef.current) return
@@ -35,7 +31,7 @@ const HashtagList = ({ placeId, hashtags, className }: HashtagListProps) => {
   return (
     <div
       ref={containerRef}
-      className={cn('w-full max-w-[380px] flex items-center gap-2', className)}
+      className={cn('w-full max-w-full flex items-center gap-2', className)}
     >
       {visibleHashtags.map((hashtag) => (
         <Chip

src/components/kakao-map/context.tsx

@@ -0,0 +1,23 @@
+import type { PropsWithChildren } from 'react'
+import { createContext, useContext } from 'react'
+
+interface KakaoMapContextProps {
+  map: kakao.maps.Map | null
+}
+
+const KakaoMapContext = createContext<KakaoMapContextProps>({
+  map: null,
+})
+
+export const KakaoMapProvider = ({
+  map,
+  children,
+}: PropsWithChildren<KakaoMapContextProps>) => {
+  return (
+    <KakaoMapContext.Provider value={{ map }}>
+      {children}
+    </KakaoMapContext.Provider>
+  )
+}
+
+export const useKakaoMap = () => useContext(KakaoMapContext)