[배포 대기] release 최신화

CLAUDE.md

@@ -75,6 +75,7 @@ CI(`jest.yml`: PR→develop, `playwright.yml`: PR→main/develop)가 PR 시점
   - 타입으로 알 수 있는 정보(string, number 등)는 주석에 중복해 적지 않는다.
   - "무엇을 하는지"를 넘어 "어떻게 쓰는지"와 "주의할 점"에 집중한다.
   - 3단 구조로 쓴다: `[요약/상세]` → `[인터페이스/파라미터]` → `[예시]`. props가 없으면 `[요약/상세]` → `[예시]` 2단으로 줄인다.
+- TODO 주석: 나중에 처리할 작업을 남길 때는 `TODO(담당자): 할 일` 형태로 담당자 이름을 괄호 안에 명시한다. 담당자를 적어 누구에게 물어보면 되는지 추적할 수 있게 하기 위함이다. 예: `// TODO(수현): 후기 등록 API 연동 시 성공 응답 후 완료 팝업을 열도록 교체`.
 
 ## 표준 작업 흐름
 

ios/App/Podfile.lock

@@ -1,7 +1,7 @@
 PODS:
-  - Capacitor (7.6.7):
+  - Capacitor (7.6.9):
     - CapacitorCordova
-  - CapacitorCordova (7.6.7)
+  - CapacitorCordova (7.6.9)
 
 DEPENDENCIES:
   - "Capacitor (from `../../node_modules/@capacitor/ios`)"
@@ -14,9 +14,9 @@ EXTERNAL SOURCES:
     :path: "../../node_modules/@capacitor/ios"
 
 SPEC CHECKSUMS:
-  Capacitor: 8ef25ba872436d2c5ac2a4791f7255529bdcd93b
-  CapacitorCordova: 139e2ed3d91c54b5aeae7941135c9f9aefc6da1d
+  Capacitor: 46067d1c8df89760dbed78780d436327d588c726
+  CapacitorCordova: 2080fc0d6bfbc9dcc0e6d88e77fa624190d343ca
 
 PODFILE CHECKSUM: e5aad413742a07f9e736126612b43b6c058babcd
 
-COCOAPODS: 1.16.2
+COCOAPODS: 1.17.0

package.json

@@ -27,8 +27,8 @@
     "check:i18n-keys": "node scripts/check-i18n-keys.js"
   },
   "dependencies": {
-    "@capacitor/core": "^7.6.7",
-    "@capacitor/ios": "^7.6.7",
+    "@capacitor/core": "^7.6.9",
+    "@capacitor/ios": "^7.6.9",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
@@ -42,14 +42,14 @@
     "@tanstack/react-query-devtools": "^5.85.5",
     "@vercel/analytics": "^1.5.0",
     "@vercel/speed-insights": "^1.2.0",
-    "axios": "^1.16.0",
+    "axios": "^1.20.0",
     "babel-plugin-react-compiler": "^1.0.0",
     "clsx": "^2.1.1",
     "cookies-next": "^6.1.1",
     "date-fns": "^4.1.0",
     "es-toolkit": "^1.49.0",
     "framer-motion": "^12.27.0",
-    "next": "^15.5.24",
+    "next": "^15.5.27",
     "next-intl": "^4.13.4",
     "react": "^19.1.4",
     "react-dom": "^19.1.4",
@@ -66,11 +66,11 @@
   "overrides": {
     "postcss": "$postcss",
     "next": {
-      "sharp": "^0.35.4"
+      "sharp": "^0.35.5"
     }
   },
   "devDependencies": {
-    "@capacitor/cli": "^7.6.7",
+    "@capacitor/cli": "^7.6.9",
     "@chromatic-com/storybook": "^5.3.1",
     "@commitlint/cli": "^20.3.1",
     "@commitlint/config-conventional": "^20.3.1",

src/api/fetch/post/api/usePutPostStatus.ts

@@ -6,26 +6,32 @@ import { useQueryClient } from "@tanstack/react-query";
 import { useTranslations } from "next-intl";
 import { PutPostStatusRequestBody } from "../types/PutPostStatusType";
 
-export const usePutPostStatus = (postId: number, isFound: boolean) => {
+interface UsePutPostStatusOptions {
+  /** true면 성공 토스트를 띄우지 않는다. 실패 토스트는 항상 띄운다. (default: false) */
+  silent?: boolean;
+}
+
+export const usePutPostStatus = (
+  postId: number,
+  isFound: boolean,
+  options?: UsePutPostStatusOptions
+) => {
   const { addToast } = useToast();
   const queryClient = useQueryClient();
   const t = useTranslations("usePutPostStatus");
+  const silent = options?.silent ?? false;
 
   return useAppMutation<PutPostStatusRequestBody>("auth", `/posts/${postId}/status`, "put", {
     onSuccess: () => {
-      addToast(
-        isFound ? t("changeToSearchingSuccess") : t("changeToFoundSuccess"),
-        "success"
-      );
+      if (!silent) {
+        addToast(isFound ? t("changeToSearchingSuccess") : t("changeToFoundSuccess"), "success");
+      }
       queryClient.invalidateQueries({ queryKey: ["post-detail", postId] });
       queryClient.invalidateQueries({ queryKey: ["posts"] });
       queryClient.invalidateQueries({ queryKey: ["/users/me/posts"] });
     },
     onError: () => {
-      addToast(
-        isFound ? t("changeToSearchingError") : t("changeToFoundError"),
-        "error"
-      );
+      addToast(isFound ? t("changeToSearchingError") : t("changeToFoundError"), "error");
     },
   });
 };

src/app/[locale]/(home)/_components/BottomSheet/BottomSheet.tsx

@@ -62,7 +62,7 @@ const BottomSheetContent = () => {
     >
       {!isFullyExpanded && (
         <div className="relative">
-          <MyLocationButton />
+          <MyLocationButton getSheetHeight={() => height.get()} />
         </div>
       )}
 

src/app/[locale]/(home)/_components/HOME_CONST.ts

@@ -89,6 +89,9 @@ export const MAIN_SEARCH_CHIPS = [
 
 export type MainSearchChipType = (typeof MAIN_SEARCH_CHIPS)[number]["type"];
 
+/** 지도 위에 떠 있는 검색 헤더의 id. 내 위치로 이동할 때 헤더가 가리는 높이를 재는 데 쓴다. */
+export const MAIN_SEARCH_HEADER_ID = "main-search-header";
+
 export const BOTTOM_OFFSET_PX = 86.67;
 export const HEADER_HEIGHT_PX = 85;
 export const MIN_HEIGHT_PX = 27;

src/app/[locale]/(home)/_components/MainSearchHeader/MainSearchHeader.tsx

@@ -11,6 +11,7 @@ import SearchFocusDropdown from "../SearchFocusDropdown/SearchFocusDropdown";
 import MainSearchChipList from "../MainSearchChipList/MainSearchChipList";
 import { focusSearchDropdownBoundary } from "../../_utils/searchDropdownListKeyboard";
 import MainSearchLayout from "../MainSearchLayout/MainSearchLayout";
+import { MAIN_SEARCH_HEADER_ID } from "../HOME_CONST";
 import { DEFAULT_ADDRESS } from "@/constants";
 import { useGeolocationPermissionGranted } from "@/hooks";
 import { useMainNaverMapStore, useMainRecentSearch } from "@/store";
@@ -154,6 +155,7 @@ const HeaderContent = ({
 
   return (
     <header
+      id={MAIN_SEARCH_HEADER_ID}
       className={cn(
         "fixed left-1/2 top-0 z-10 w-full max-w-[768px] -translate-x-1/2 px-5 pb-[10px] pt-[calc(10px+var(--safe-area-top))]",
         (searchValue || focused) && "border-x-2 bg-white"

src/app/[locale]/(home)/_components/MyLocationButton/MyLocationButton.tsx

@@ -5,10 +5,15 @@ import { Icon } from "@/components";
 import { LocationPermissionBottomSheet } from "../PermissionBottomSheet/PermissionBottomSheet";
 import useMyLocationButton from "../../_hooks/useMyLocationButton/useMyLocationButton";
 
-const MyLocationButton = () => {
+interface MyLocationButtonProps {
+  /** 바텀시트의 현재 높이를 읽는 함수. 내 위치로 이동할 때 시트에 가리는 만큼 중심을 보정한다. */
+  getSheetHeight?: () => number;
+}
+
+const MyLocationButton = ({ getSheetHeight }: MyLocationButtonProps) => {
   const t = useTranslations("MyLocationButton");
   const { handleMyLocationClick, isLocationPermissionSheetOpen, closeLocationPermissionSheet } =
-    useMyLocationButton();
+    useMyLocationButton(getSheetHeight);
 
   return (
     <>

src/app/[locale]/(home)/_docs/plan.md

@@ -248,3 +248,11 @@ startTime`, 시작==종료면 24시간 운영
 - [x] `BaseNaverMap`이 지도에서 올라온 중간 줌으로 다시 morph해 목표 줌 애니메이션을 덮어쓰지 않게 한다.
 - [x] 바텀시트 드래그 종료를 document의 `pointerup`/`pointercancel`로 받고, 새 드래그 전에 이전 리스너를 정리해 시트가 마우스를 따라다니지 않게 한다.
 - [x] 사용자 줌과 관성 이동 뒤 지도가 멈추면(`idle`) 실제 중심을 `latLng`에 저장해, 마커 조회가 화면 중심을 기준으로 이뤄지게 한다.
+
+## 내 위치 버튼 바텀시트 높이 보정 (refactor/map-auto-location)
+
+- [x] 픽셀 오프셋만큼 위도를 옮기는 메르카토르 계산 `offsetLatLngByPixels`를 `_utils/mapOffsetUtils.ts`에 추가한다.
+- [x] `BottomSheet`가 현재 시트 높이를 읽는 `getSheetHeight`를 `MyLocationButton`에 넘긴다.
+- [x] `useMyLocationButton`이 이동할 때 시트 높이의 절반만큼 중심을 남쪽으로 옮겨, 내 위치가 시트를 뺀 지도 영역 가운데에 오게 한다. 누른 시점에 한 번만 보정하고 시트 높이가 바뀌어도 다시 맞추지 않는다.
+- [x] 지도 위에 떠 있는 검색 헤더(`MAIN_SEARCH_HEADER_ID`)의 하단도 재서, 헤더와 시트 사이 영역의 가운데에 오도록 `(시트 높이 - 헤더 하단) / 2`로 보정한다.
+- [x] 브라우저에서 시트 50%와 최소 높이일 때 내 위치가 헤더와 시트 사이 가운데에 오는지 확인한다(오차 1px 안팎).

src/app/[locale]/(home)/_hooks/useMyLocationButton/useMyLocationButton.test.tsx

@@ -2,6 +2,8 @@ import { act, renderHook } from "@testing-library/react";
 import { DEFAULT_MAP_ZOOM } from "@/constants";
 import { useMainNaverMapStore } from "@/store";
 import { clearMainGeoSessionConfirmed } from "@/utils/mainGeoSession";
+import { MAIN_SEARCH_HEADER_ID } from "../../_components/HOME_CONST";
+import { offsetLatLngByPixels } from "../../_utils/mapOffsetUtils";
 import useMyLocationButton from "./useMyLocationButton";
 
 jest.mock("@/store", () => ({
@@ -120,6 +122,40 @@ describe("useMyLocationButton", () => {
     expect(slice.setLatLng).toHaveBeenCalledWith({ lat: 37.5, lng: 127.0 });
   });
 
+  it("시트 높이와 헤더 하단을 받으면 (시트 높이 - 헤더 하단) / 2만큼 중심을 내려 이동한다", async () => {
+    slice.userGpsLatLng = { lat: 37.5, lng: 127.0 };
+    const header = document.createElement("header");
+    header.id = MAIN_SEARCH_HEADER_ID;
+    header.getBoundingClientRect = () => ({ bottom: 128 }) as DOMRect;
+    document.body.appendChild(header);
+
+    Object.defineProperty(navigator, "geolocation", {
+      configurable: true,
+      writable: true,
+      value: { getCurrentPosition: jest.fn() },
+    });
+
+    Object.defineProperty(navigator, "permissions", {
+      configurable: true,
+      writable: true,
+      value: {
+        query: jest.fn().mockResolvedValue({ state: "granted" }),
+      },
+    });
+
+    const { result } = renderHook(() => useMyLocationButton(() => 300));
+
+    await act(async () => {
+      await result.current.handleMyLocationClick();
+    });
+
+    header.remove();
+    expect(slice.setLatLng).toHaveBeenCalledWith(
+      offsetLatLngByPixels({ lat: 37.5, lng: 127.0 }, (300 - 128) / 2, DEFAULT_MAP_ZOOM)
+    );
+    expect(slice.setLatLng.mock.calls[0][0].lat).toBeLessThan(37.5);
+  });
+
   it("getCurrentPosition 실패 시 clearLatLng를 호출하고 세션 초기화는 하지 않는다", async () => {
     const geoError = {
       code: 2,

src/app/[locale]/(home)/_hooks/useMyLocationButton/useMyLocationButton.ts

@@ -1,13 +1,18 @@
 import { DEFAULT_MAP_ZOOM } from "@/constants";
+import { MAIN_SEARCH_HEADER_ID } from "../../_components/HOME_CONST";
 import { useMainNaverMapStore } from "@/store";
 import {
   clearMainGeoSessionConfirmed,
   hasMainGeoSessionConfirmed,
   markMainGeoSessionConfirmed,
 } from "@/utils/mainGeoSession";
 import { useCallback, useEffect, useState } from "react";
+import { offsetLatLngByPixels } from "../../_utils/mapOffsetUtils";
 
-const useMyLocationButton = () => {
+/**
+ * @param getSheetHeight - 바텀시트의 현재 높이를 읽는 함수. 넘기면 내 위치가 헤더와 시트에 가리지 않는 지도 영역 가운데에 오도록 중심을 보정한다.
+ */
+const useMyLocationButton = (getSheetHeight?: () => number) => {
   const {
     userGpsLatLng,
     setLatLng,
@@ -41,9 +46,15 @@ const useMyLocationButton = () => {
   }, [clearLatLng]);
 
   // 지금 줌과 상관없이 기본 줌으로 맞춘다. 축소해 둔 상태여도 내 위치 주변이 같은 배율로 보인다.
+  // 지도는 화면 위 검색 헤더와 아래 바텀시트 뒤까지 깔려 있다. 둘 사이 보이는 영역의 가운데에 내 위치가 오도록
+  // (시트 높이 - 헤더 하단) / 2만큼 중심을 내린다. 시트가 헤더보다 낮으면 값이 음수가 되어 중심을 올린다.
+  // 이동하는 시점에 한 번만 맞추고, 이후 시트 높이가 바뀌어도 다시 옮기지 않는다.
   const moveToMyLocation = (latLng: { lat: number; lng: number }) => {
+    const headerBottom =
+      document.getElementById(MAIN_SEARCH_HEADER_ID)?.getBoundingClientRect().bottom ?? 0;
+    const offsetY = ((getSheetHeight?.() ?? 0) - headerBottom) / 2;
     setMapZoom(DEFAULT_MAP_ZOOM);
-    setLatLng(latLng);
+    setLatLng(offsetLatLngByPixels(latLng, offsetY, DEFAULT_MAP_ZOOM));
   };
 
   const requestDeviceLocation = useCallback(() => {

src/app/[locale]/(home)/_utils/mapOffsetUtils.test.ts

@@ -0,0 +1,33 @@
+import { offsetLatLngByPixels } from "./mapOffsetUtils";
+
+const SEONGSU = { lat: 37.544583, lng: 127.055972 };
+const METERS_PER_LAT_DEGREE = 111_320;
+
+describe("offsetLatLngByPixels", () => {
+  it("오프셋이 0이면 같은 좌표 객체를 그대로 돌려준다", () => {
+    expect(offsetLatLngByPixels(SEONGSU, 0, 15)).toBe(SEONGSU);
+  });
+
+  it("성수동 위도, 줌 15에서 200px 아래로 옮기면 약 758m 남쪽 좌표가 된다", () => {
+    const shifted = offsetLatLngByPixels(SEONGSU, 200, 15);
+    const meters = (SEONGSU.lat - shifted.lat) * METERS_PER_LAT_DEGREE;
+
+    expect(meters).toBeCloseTo(757.6, 0);
+    expect(shifted.lng).toBe(SEONGSU.lng);
+  });
+
+  it("음수 오프셋이면 같은 거리만큼 북쪽으로 옮긴다", () => {
+    const south = offsetLatLngByPixels(SEONGSU, 200, 15);
+    const north = offsetLatLngByPixels(SEONGSU, -200, 15);
+
+    expect(north.lat).toBeGreaterThan(SEONGSU.lat);
+    expect(north.lat - SEONGSU.lat).toBeCloseTo(SEONGSU.lat - south.lat, 5);
+  });
+
+  it("줌이 1 커지면 같은 픽셀의 이동 거리가 절반이 된다", () => {
+    const atZoom15 = SEONGSU.lat - offsetLatLngByPixels(SEONGSU, 200, 15).lat;
+    const atZoom16 = SEONGSU.lat - offsetLatLngByPixels(SEONGSU, 200, 16).lat;
+
+    expect(atZoom16).toBeCloseTo(atZoom15 / 2, 6);
+  });
+});

src/app/[locale]/(home)/_utils/mapOffsetUtils.ts

@@ -0,0 +1,34 @@
+/** 웹 메르카토르에서 줌 0일 때 세계 지도 한 변의 픽셀 수. 네이버 지도 줌도 이 기준을 따른다. */
+const WORLD_SIZE_AT_ZOOM_0 = 256;
+
+/**
+ * 좌표를 화면에서 `offsetY` 픽셀만큼 아래(남쪽)로 옮긴 좌표를 돌려준다.
+ *
+ * @remarks
+ * - 지도 중심을 이 좌표로 맞추면 원래 좌표는 화면 가운데보다 `offsetY` 픽셀 위에 보인다.
+ *   바텀시트가 지도 아래쪽을 가릴 때 대상을 보이는 영역 가운데로 올리는 데 쓴다.
+ * - 같은 픽셀이라도 줌에 따라 거리가 달라지므로 이동을 마칠 목표 줌을 넘긴다.
+ *
+ * @param latLng - 기준 좌표
+ * @param offsetY - 아래로 옮길 CSS 픽셀. 0이면 기준 좌표를 그대로 돌려준다.
+ * @param zoom - 네이버 지도 줌
+ *
+ * @example
+ * ```ts
+ * const center = offsetLatLngByPixels(userLatLng, sheetHeight / 2, DEFAULT_MAP_ZOOM);
+ * ```
+ */
+export const offsetLatLngByPixels = (
+  latLng: { lat: number; lng: number },
+  offsetY: number,
+  zoom: number
+) => {
+  if (offsetY === 0) return latLng;
+
+  const worldSize = WORLD_SIZE_AT_ZOOM_0 * 2 ** zoom;
+  const sinLat = Math.sin((latLng.lat * Math.PI) / 180);
+  const y = (0.5 - Math.log((1 + sinLat) / (1 - sinLat)) / (4 * Math.PI)) * worldSize + offsetY;
+  const lat = (Math.atan(Math.sinh(Math.PI * (1 - (2 * y) / worldSize))) * 180) / Math.PI;
+
+  return { lat, lng: latLng.lng };
+};

src/app/[locale]/(route)/chat/[postId]/_components/CHATROOM_CONST.ts

@@ -13,22 +13,29 @@ export type ChatChipMode = keyof typeof CHAT_CHIP_MODE;
 
 interface InfoOption {
   value: InfoButtonOptionValue;
-  textColor: "text-neutral-normal-default" | "text-system-warning";
-  position: "first" | "last";
+  textColor: "text-system-warning" | "text-brand-strongUseThis-default";
+  icon: IconName;
 }
 
-export const INFO_OPTIONS: InfoOption[] = [
-  {
-    value: "report",
-    textColor: "text-neutral-normal-default",
-    position: "first",
-  },
-  {
-    value: "leave",
+export const getInfoOptions = (canMarkFound: boolean): InfoOption[] => {
+  const options: InfoOption[] = [];
+
+  if (canMarkFound) {
+    options.push({
+      value: "changeToFound",
+      textColor: "text-brand-strongUseThis-default",
+      icon: "CheckBroken",
+    });
+  }
+  options.push({
+    value: "reportBlock",
     textColor: "text-system-warning",
-    position: "last",
-  },
-];
+    icon: "ChatReport",
+  });
+  options.push({ value: "leave", textColor: "text-system-warning", icon: "Logout" });
+
+  return options;
+};
 
 export const CHAT_SENDER_STYLE = {
   me: {

src/app/[locale]/(route)/chat/[postId]/_components/ChatRoomHeader/ChatRoomHeader.tsx

@@ -75,7 +75,7 @@ const ChatRoomHeader = ({ chatRoom, roomId, currentUserId, withdrawn }: ChatRoom
           </Link>
         )}
 
-        <ChatRoomHeaderInfoButton roomId={roomId} />
+        <ChatRoomHeaderInfoButton roomId={roomId} postId={postId} opponentUserId={opponentUserId} />
       </nav>
 
       <LinkWrapper deleted={deleted} href={`/list/${postId}`}>

src/app/[locale]/(route)/chat/[postId]/_components/ChatRoomHeaderInfoButton/ChatRoomHeaderInfoButton.stories.tsx

@@ -43,6 +43,6 @@ type Story = StoryObj<typeof ChatRoomHeaderInfoButton>;
 
 export const Default: Story = {
   render: () => {
-    return <ChatRoomHeaderInfoButton roomId={1} />;
+    return <ChatRoomHeaderInfoButton roomId={1} postId={1} opponentUserId={2} />;
   },
 };