fix: selected pin reset issue and revert pin ui to original design

web/src/entities/honbob/model/constant.ts

@@ -34,7 +34,7 @@ export const honbobLevelCardList: HonbobLevelCardInfo[] = [
     honbobLevelTitle: "혼밥 입문자",
     honbobLevelDescription: "누구나 할 수 있는 혼밥의 첫걸음",
     honbobLevelIcon: Lv1Character,
-    recommendedMenu: "간편식 및 즉석식, 패스트푸드",
+    recommendedMenu: "편의점 도시락, 샌드위치, 김밥, 패스트푸드",
     recommendedStore: "바 좌석 · 1-2인석",
     characteristics:
       "패스트푸드처럼 눈치 안 보고 후딱 먹을 수 있는 곳을 찾아다녀요. 다른 시선이 조금 신경쓰이는, 혼밥 세계로 발을 들인 풋풋한 초보자예요.",
@@ -44,7 +44,7 @@ export const honbobLevelCardList: HonbobLevelCardInfo[] = [
     honbobLevelTitle: "혼밥 탐험가 ",
     honbobLevelDescription: "혼밥 전용석이 마련된 친절한 식당",
     honbobLevelIcon: Lv2Character,
-    recommendedMenu: "단품, 디저트/카페",
+    recommendedMenu: "쌀국수, 덮밥류, 돈까스, 디저트·카페 메뉴",
     recommendedStore: "바 좌석 · 1-2인석",
     characteristics:
       "1인석이나 바 좌석을 찾아서 앉는 게 편안해요. 국밥 같은 혼밥 메뉴를 즐기며 '혼자 먹는 거 괜찮네?' 라는 자신감을 키우는 단계예요",
@@ -54,8 +54,8 @@ export const honbobLevelCardList: HonbobLevelCardInfo[] = [
     honbobLevelTitle: "혼밥 숙련자 ",
     honbobLevelDescription: "이제는 4인석도 두렵지 않아",
     honbobLevelIcon: Lv3Character,
-    recommendedMenu: "단품",
-    recommendedStore: "4인석",
+    recommendedMenu: "백반 정식, 파스타, 김치찌개/된장찌개 ",
+    recommendedStore: "바 좌석 · 1-2인석, 4인석",
     characteristics:
       '4인 테이블에 앉아도 당당하게 메뉴를 주문해요.가끔 "혼자세요?"라는 질문을 받아도 웃으며 넘어갈 수 있는 혼밥 중급자예요.',
   },
@@ -64,8 +64,8 @@ export const honbobLevelCardList: HonbobLevelCardInfo[] = [
     honbobLevelTitle: "혼밥 고수",
     honbobLevelDescription: "최소 주문 단위가 2인분? 문제없지",
     honbobLevelIcon: Lv4Character,
-    recommendedMenu: "세트 메뉴 (2인 이상)",
-    recommendedStore: "4인석",
+    recommendedMenu: "닭갈비, 찜닭, 부대찌개, 고깃집",
+    recommendedStore: "바 좌석 · 1-2인석, 4인석",
     characteristics:
       "2인분 이상 주문 조건에도 굴하지 않아요. 닭갈비, 고깃집도 혼자서 정복하고, 필요하면 포장까지 완벽하게 챙기는 혼밥 고수예요.",
   },

web/src/entities/map/index.ts

@@ -0,0 +1,4 @@
+export * from "./lib/utils/textShadowUtils";
+
+export * from "./ui/MapLocation";
+export * from "./ui/MapPin";

web/src/entities/map/lib/utils/textShadowUtils.ts

@@ -0,0 +1,20 @@
+/**
+ * 텍스트 아웃라인 효과를 위한 text-shadow 값을 생성합니다.
+ * 8방향으로 그림자를 적용하여 텍스트 주변에 아웃라인을 만듭니다.
+ *
+ * @param color - 그림자 색상 (CSS 변수 또는 색상 값)
+ * @returns text-shadow CSS 값
+ */
+export function createTextOutlineShadow(color: string): string {
+  const offsets = [
+    [1, 0],
+    [-1, 0],
+    [0, 1],
+    [0, -1],
+    [1, 1],
+    [-1, -1],
+    [1, -1],
+    [-1, 1],
+  ];
+  return offsets.map(([x, y]) => `${x}px ${y}px ${color}`).join(", ");
+}

web/src/entities/map/ui/MapLocation.tsx

@@ -2,7 +2,7 @@ export function MapLocation() {
   return (
     <div className="relative">
       <div className="h-[54px] w-[54px] rounded-full bg-primary400 opacity-30" />
-      <div className="absolute top-[17px] left-[17px] box-border h-5 w-5 rounded-full border-4 border-gray0 bg-primary400 shadow-[0_4px_12px_0_rgba(0,0,0,0.15)]" />
+      <div className="absolute top-[17px] left-[17px] box-border h-5 w-5 rounded-full border-4 border-gray0 bg-primary400 shadow-fab" />
     </div>
   );
 }

web/src/entities/map/ui/MapPin.tsx

@@ -1,9 +1,12 @@
-import { DynamicColorLevelTag, Icon } from "@/shared/ui";
+import { createTextOutlineShadow } from "@/entities/map";
+import { Icon } from "@/shared/ui";
 
 function SelectedPin({ honbobLevel }: { honbobLevel: number }) {
   return (
     <div className="flex w-13 flex-col items-center gap-0.5">
-      <DynamicColorLevelTag level={honbobLevel} size="small" />
+      <div className="flex items-center bg-primary400 rounded-[4px] border-[1.4px] border-gray0 px-1.5 py-0.5">
+        <span className="text-caption2-semibold text-gray0">{`레벨 ${honbobLevel}`}</span>
+      </div>
       <Icon name="bubble" size={60} disableCurrentColor className="mx-auto" />
     </div>
   );
@@ -16,9 +19,9 @@ function UnselectedPin() {
 function StoreName({ name }: { name: string }) {
   return (
     <span
-      className="whitespace-nowrap rounded-sm text-caption2-semibold"
+      className="whitespace-nowrap rounded-sm text-caption2-semibold text-gray900"
       style={{
-        textShadow: `1px 0 var(--color-gray0), -1px 0 var(--color-gray0), 0 1px var(--color-gray0), 0 -1px var(--color-gray0), 1px 1px var(--color-gray0), -1px -1px var(--color-gray0), 1px -1px var(--color-gray0), -1px 1px var(--color-gray0)`,
+        textShadow: createTextOutlineShadow("var(--color-gray0)"),
       }}
     >
       {name}

web/src/features/map/lib/hooks/useLocationMarker.tsx

@@ -2,7 +2,7 @@
 
 import { useCallback, useRef } from "react";
 import { renderToString } from "react-dom/server";
-import { MapLocation } from "@/entities/map/ui";
+import { MapLocation } from "@/entities/map";
 
 export function useLocationMarker() {
   const markerRef = useRef<naver.maps.Marker | null>(null);

web/src/features/map/ui/MapMarkers.tsx

@@ -2,7 +2,7 @@
 
 import { useCallback, useEffect, useRef } from "react";
 import { renderToString } from "react-dom/server";
-import { MapPin } from "@/entities/map/ui";
+import { MapPin } from "@/entities/map";
 import type { StoreListResponseData } from "@/entities/storeList/api";
 import { useMapMarkers } from "../lib/hooks/useMapMarkers";
 import { useMapStore } from "../model";
@@ -14,9 +14,14 @@ interface MapMarkersProps {
 
 export function MapMarkers({ map, storeList }: MapMarkersProps) {
   const prevSelectedStoreIdRef = useRef<number | null>(null);
+  // selectedStoreId를 ref로 추적하여 핀 선택 시 불필요한 마커들 재생성 방지
+  const selectedStoreIdRef = useRef<number | null>(null);
+
   const { createMarker, updateMarker, clearMarker, getStore } = useMapMarkers(map);
   const { selectedStoreId } = useMapStore();
 
+  selectedStoreIdRef.current = selectedStoreId;
+
   const getMarkerHtml = useCallback((store: StoreListResponseData, selected: boolean) => {
     return renderToString(
       <MapPin selected={selected} name={store.name} honbobLevel={store.honbobLevel} />,
@@ -27,7 +32,8 @@ export function MapMarkers({ map, storeList }: MapMarkersProps) {
     clearMarker();
 
     storeList.forEach((store) => {
-      createMarker(store, getMarkerHtml(store, false));
+      const isSelected = store.id === selectedStoreIdRef.current;
+      createMarker(store, getMarkerHtml(store, isSelected));
     });
   }, [storeList, createMarker, clearMarker, getMarkerHtml]);
 

web/src/shared/ui/BottomSheet.tsx

@@ -81,7 +81,7 @@ function BottomSheet({
       <dialog
         ref={isFixed ? null : sheetRef}
         className={cn(
-          "fixed right-0 left-0 mx-auto flex w-full flex-col rounded-t-[24px] bg-white shadow-[0_4px_12px_rgba(0,0,0,0.06)] overflow-x-hidden",
+          "fixed right-0 left-0 mx-auto flex w-full flex-col rounded-t-[24px] bg-white shadow-[0_4px_12px_rgba(0,0,0,0.06)]",
           "transition-all duration-300 ease-out",
           isFixed ? "z-51" : "z-49",
         )}
@@ -111,7 +111,7 @@ function BottomSheetContent({ className, children }: PropsWithChildren<{ classNa
     <div
       ref={contentRef}
       className={cn("scrollbar-hide h-full w-full", className)}
-      style={{ overflowY: "scroll", touchAction: "pan-y" }}
+      style={{ overflowY: "scroll", overflowX: "hidden", touchAction: "pan-y" }}
     >
       {children}
     </div>