From 041dd613d16adca81857dbc06b0b43fd61410547 Mon Sep 17 00:00:00 2001
From: geunu <olo90632951@gmail.com>
Date: Mon, 25 May 2026 21:26:05 +0900
Subject: [PATCH 01/41] [WEB-USER][UPDATE]: Enhance error and loading handling
 in web user app documentation

- Updated the documentation to clarify the current implementation of error and loading handling in the Picake web user app.
- Added detailed sections on loading processing, including the use of Skeleton components and React Query for managing loading states.
- Improved structure and readability of the document by consolidating related information and providing clear examples for various loading scenarios.
- Highlighted differences in error handling compared to other apps, ensuring a focused discussion on the web user app's unique approach.
---
 ...- \352\260\200\354\235\264\353\223\234.md" | 335 +++++++++++-------
 1 file changed, 200 insertions(+), 135 deletions(-)

diff --git "a/docs/web-user/\354\227\220\353\237\254\354\231\200 \353\241\234\353\224\251 \354\262\230\353\246\254 - \352\260\200\354\235\264\353\223\234.md" "b/docs/web-user/\354\227\220\353\237\254\354\231\200 \353\241\234\353\224\251 \354\262\230\353\246\254 - \352\260\200\354\235\264\353\223\234.md"
index c92f7c13..866291a6 100644
--- "a/docs/web-user/\354\227\220\353\237\254\354\231\200 \353\241\234\353\224\251 \354\262\230\353\246\254 - \352\260\200\354\235\264\353\223\234.md"	
+++ "b/docs/web-user/\354\227\220\353\237\254\354\231\200 \353\241\234\353\224\251 \354\262\230\353\246\254 - \352\260\200\354\235\264\353\223\234.md"	
@@ -2,201 +2,266 @@
 
 ## 개요
 
-이 문서는 Picake 웹 사용자 앱에서 에러와 로딩을 처리하는 방식에 대해 설명합니다.
+이 문서는 Picake **웹 사용자 앱**(`apps/web-user`)에서 에러와 로딩을 처리하는 **현재 구현**을 설명합니다.
 
-## 에러 처리
+> **다른 앱과의 차이**: `web-seller` / `web-admin`은 `ContentLoading`, `AuthInitializerProvider` 등 별도 패턴을 사용합니다. 사용자 앱은 **Skeleton + `isLoading`** 중심이며, 이 문서는 web-user만 다룹니다.
 
-### 1. ErrorBoundary (UI 에러 처리)
+---
 
-**용도**: React 컴포넌트에서 발생하는 UI 에러를 잡아서 처리
+## 로딩 처리 (요약)
 
-**구현 위치**: `apps/web-user/src/common/components/providers/ErrorBoundaryProvider.tsx`
+| 계층 | 수단 | 용도 |
+|------|------|------|
+| 1 | 루트 `Suspense` + `LoadingFallback` | `useSearchParams` 등으로 suspend 되는 구간 |
+| 2 | React Query `isLoading` + **Skeleton** | 페이지·섹션·목록 **첫 로딩** (주력) |
+| 3 | `isFetchingNextPage` + 인라인 스피너 | 무한 스크롤 **추가 로딩** |
+| 4 | Mutation `isPending` | 버튼·폼 제출·좋아요 등 **액션 로딩** |
+| 5 | `Toast` `showSpinner` | 지역 변경 등 짧은 **피드백** |
 
-```typescript
-export function ErrorBoundaryProvider({ children }: ErrorBoundaryProviderProps) {
-  const handleError = (error: Error, errorInfo: ErrorInfo) => {
-    // 에러 로깅 (추후 에러 모니터링 서비스 연동 가능)
-    console.error("ErrorBoundary caught an error:", error, errorInfo);
-  };
+**사용하지 않는 것**: `useSuspenseQuery`, Query `suspense: true`, `throwOnError: true`(주석 처리됨).
 
-  return (
-    <ErrorBoundary
-      onError={handleError}
-      fallbackRender={({ error, resetErrorBoundary }) => (
-        <ErrorFallback error={error} resetErrorBoundary={resetErrorBoundary} />
-      )}
+---
+
+## 로딩 처리 (상세)
+
+### 1. 전역 Suspense + LoadingFallback
+
+**구현 위치**: `apps/web-user/src/app/layout.tsx`
+
+```typescript
+<ErrorBoundaryProvider>
+  <QueryProvider>
+    <Suspense
+      fallback={<LoadingFallback variant="overlay" message="페이지를 불러오는 중" />}
     >
-      {children}
-    </ErrorBoundary>
-  );
-}
+      <RootWrapperLayout>{children}</RootWrapperLayout>
+    </Suspense>
+  </QueryProvider>
+</ErrorBoundaryProvider>
 ```
 
 **특징**:
 
-- `react-error-boundary` 라이브러리 사용
-- 에러 발생 시 `ErrorFallback` 컴포넌트로 대체
-- 에러 로깅 기능 포함
-- 재시도 기능 제공
-- 리액트 쿼리 throwOnError true설정 시, 비동기 에러 발생 시 예외(throw error)를 던지며 상위의 ErrorBoundary 컴포넌트에서 인식됩니다.
+- `RootWrapperLayout` 안에서 `AuthProvider`, `Header`, `Alert`, `LoginBottomSheet` 등이 함께 마운트됩니다.
+- API 데이터 로딩의 **주된 UI는 Suspense가 아니라** 아래 2번(Skeleton + `isLoading`)입니다.
+- 루트 Suspense는 주로 Next.js 클라이언트 컴포넌트가 suspend 할 때(예: `useSearchParams` 사용 페이지) fallback을 보여줍니다.
+
+**LoadingFallback** (`common/components/fallbacks/LoadingFallback.tsx`):
+
+| variant | 설명 |
+|---------|------|
+| `overlay` (기본) | 전체 화면 오버레이 + `loading-spinner-large` |
+| `corner` | 우측 하단 작은 스피너 (정의만 있음, **현재 미사용**) |
 
-### 2. React Query onError (비동기 에러 처리)
+스피너 스타일: `common/styles/globals.css`의 `.loading-spinner-large`, `.loading-spinner-small`
 
-**용도**: API 호출에서 발생하는 비동기 에러를 처리
+### 2. React Query `isLoading` + Skeleton (주력)
 
-**구현 위치**: `apps/web-user/src/features/auth/hooks/queries/useAuth.ts`
+**용도**: `useQuery` / `useInfiniteQuery`의 **첫 fetch** 동안 레이아웃을 유지한 채 로딩 표시
+
+**기본 컴포넌트** (`common/components/skeleton/`):
+
+- `Skeleton`, `SkeletonCircle`, `SkeletonText` — 블록 단위
+- `HomeSkeleton`, `ProductDetailSkeleton`, `StoreDetailSkeleton`, `AlarmSkeleton`, `ChatListSkeleton`, `MyReviewsSkeleton`, `RecentProductsSkeleton` — 화면별 조합
+
+**페이지 예시** — 상품 상세:
 
 ```typescript
-export function useLogin() {
-  const { showAlert } = useAlertStore();
-
-  return useMutation({
-    mutationFn: authApi.login,
-    onSuccess: (data) => {
-      // 성공 처리
-    },
-    onError: (error) => {
-      showAlert({
-        type: "error",
-        title: "오류",
-        message: getApiMessage.error(error),
-      });
-    },
-  });
+const { data, isLoading } = useProductDetail(productId);
+
+if (isLoading) {
+  return <ProductDetailSkeleton />;
 }
 ```
 
-**특징**:
+**섹션 예시** — 홈 슬라이더 (`CakeListSlider`):
+
+- 부모에서 `isLoading`을 계산해 prop으로 전달
+- 로딩 중에는 카드 형태의 `Skeleton` 블록을 여러 개 렌더
+
+**목록 예시** — 검색·좋아요·채팅 등:
+
+- `isLoading`일 때 섹션/페이지 스켈레톤 또는 빈 목록 대신 placeholder
+- 데이터 없음·에러는 별도 분기
+
+**선택 가이드**:
+
+| 상황 | 권장 |
+|------|------|
+| 전체 페이지 첫 진입 | 전용 `*Skeleton` early return |
+| 목록·카드 일부 | `Skeleton` 또는 슬라이더 내 placeholder |
+| 버튼 한 번 누름 | `isPending` (아래 4번) |
 
-- 대부분의 API 에러는 `onError`에서 Alert으로 표시
+### 3. 무한 스크롤 추가 로딩 (`isFetchingNextPage`)
 
-### 3. 비즈니스 로직이 있는 경우의 에러 처리
+**훅**: `common/hooks/useInfiniteScroll.ts` — `IntersectionObserver`로 `fetchNextPage` 호출
 
-**구현 위치**: `apps/web-user/src/app/auth/login/google/page.tsx`
+**UI**: 전용 컴포넌트 없이, 목록 하단에 인라인 스피너
 
 ```typescript
-const handleGoogleCallback = async (code: string) => {
-  // 특별한 비즈니스 로직(휴대폰 인증 필요)이 있으므로 try-catch 유지
-  try {
-    await googleLoginMutation.mutateAsync(code);
-  } catch (error: any) {
-    const { googleId, googleEmail, message } = error?.response?.data?.data || {};
-
-    if (message === "휴대폰 인증이 필요합니다.") {
-      setGoogleLoginData({ googleId, googleEmail });
-      setShowPhoneVerification(true);
-    } else {
-      // 다른 오류의 경우 로그인 페이지로 이동
-      router.push(PATHS.HOME);
-    }
-  }
-};
+{isFetchingNextPage && (
+  <div className="flex flex-col items-center gap-3 text-sm text-gray-400">
+    <div className="loading-spinner-small" />
+    <span>더 많은 상품을 불러오는 중...</span>
+  </div>
+)}
 ```
 
-**특징**:
+**사용 예**: `SearchProductListSection`, `SearchStoreListSection`, `chat/page`, `mypage/recent`, 좋아요 목록, 주문 목록, 스토어 상품/리뷰 탭 등
 
-- 비즈니스 로직이 필요한 경우 컴포넌트 내부에서 `try-catch`로 처리
-- `mutateAsync`를 사용하여 에러를 직접 catch
-- React Query의 `onError`에서 `throw error`로 에러를 다시 전파
+### 4. Mutation `isPending` (액션 로딩)
 
-### 5. Axios 인터셉터를 통한 에러 처리
+**용도**: 로그인·회원가입·좋아요·결제·업로드·주문 변경 등 **사용자 액션** 중복 방지 및 버튼 상태 표시
 
-**구현 위치**: `apps/web-user/src/common/config/axios.config.ts`
+**구현 위치**: `features/*/hooks/mutations/*`, 각 폼·카드·바텀시트
 
 ```typescript
-apiClient.interceptors.response.use(
-  (response: AxiosResponse) => {
-    return response;
-  },
-  async (error: AxiosError<any>) => {
-    const status = error.response?.status;
-    const message = error.response?.data?.data?.message;
-
-    // 401 에러 처리 (토큰 갱신)
-    if (status === 401 && message?.includes("ACCESS_TOKEN_INVALID")) {
-      // 토큰 갱신 로직
-    }
+const { mutate, isPending } = useSomeMutation();
 
-    // 그 외 에러는 그대로 전파
-    return Promise.reject(error);
-  },
-);
+<Button disabled={isPending}>
+  {isPending ? "처리 중..." : "확인"}
+</Button>
 ```
 
-**특징**:
+**패턴**:
 
-- 401 에러 시 자동 토큰 갱신 시도
-- 다른 에러는 그대로 전파
-- 자세한 내용은 [통합 인증 - 가이드](../common/통합 인증 - 가이드.md) 참고
+- `disabled={isPending}` 또는 `if (isPending) return` (낙관적 업데이트 시 `onError` 롤백)
+- 여러 mutation 조합: `isAddingLike || isRemovingLike` 등
 
-## 로딩 처리
+### 5. 페이지 단위 Suspense (OAuth 콜백 등)
 
-### 1. Suspense (UI 로딩 처리)
+`useSearchParams`를 쓰는 페이지는 **페이지 내부**에 별도 `Suspense`를 둡니다. 루트 `LoadingFallback`과 별개로, 단순 텍스트 fallback을 쓰는 경우가 많습니다.
 
-**용도**: React 컴포넌트의 로딩 상태를 처리
+**구현 위치**:
 
-**구현 위치**: `apps/web-user/src/app/layout.tsx`
+- `app/auth/login/google/page.tsx`
+- `app/auth/login/kakao/page.tsx`
+- `app/auth/register/google/page.tsx`
+- `app/auth/register/kakao/page.tsx`
 
 ```typescript
-<ErrorBoundaryProvider>
-  <QueryProvider>
+export default function GoogleAuthCallbackPage() {
+  return (
     <Suspense
-      fallback={<LoadingFallback variant="overlay" message="페이지를 불러오는 중" />}
+      fallback={
+        <div className="flex min-h-screen ...">
+          <p>로딩 중...</p>
+        </div>
+      }
     >
-      {children}
+      <GoogleAuthCallbackContent />
     </Suspense>
-    <AuthInitializerProvider />
-    <Alert />
-  </QueryProvider>
-</ErrorBoundaryProvider>
+  );
+}
 ```
 
-**특징**:
+콜백 본문에서는 `authApi.googleLogin` 등을 `try/catch`로 호출하며, 화면에는 "구글 로그인 처리 중..." 문구를 표시합니다.
+
+### 6. Toast 스피너 (부가 피드백)
+
+**구현 위치**: `common/components/headers/Header.tsx`
+
+지역 선택 후 상품 목록 refetch가 끝날 때까지 `Toast` + `showSpinner` ("위치 설정 중..")를 표시합니다. `useIsFetching({ queryKey: ["product", "list"] })`로 refetch 완료를 감지합니다.
 
-- 전역 Suspense로 페이지 로딩 처리
-- `LoadingFallback` 컴포넌트로 로딩 UI 표시
-- `overlay` 방식으로 전체 화면 로딩 표시
+---
 
-### 2. React Query isPending (비동기 로딩 처리)
+## QueryClient 기본값
 
-**용도**: API 호출 중 로딩 상태를 처리
+**구현 위치**: `apps/web-user/src/common/config/query-client.ts`
 
-**구현 위치**: 각 폼 컴포넌트들
+- `retry: 0` (queries / mutations)
+- `throwOnError: true` — **주석 처리**, ErrorBoundary와 Query 에러를 **연동하지 않음**
+- API 로딩 UI는 훅의 `isLoading` / `isPending` / `isFetchingNextPage`로만 처리
+
+---
+
+## 에러 처리
+
+### 1. ErrorBoundary (렌더링/UI 에러)
+
+**구현 위치**: `apps/web-user/src/common/components/providers/ErrorBoundaryProvider.tsx`
+
+- `react-error-boundary` + `ErrorFallback`
+- `console.error` 로깅 (추후 모니터링 연동 가능)
+- **React Query fetch 에러는 기본적으로 여기로 오지 않음** (`throwOnError` 미사용)
+
+### 2. React Query `onError` (API 에러 — Alert)
+
+**구현 위치**: `apps/web-user/src/features/auth/hooks/mutations/useAuthMutation.ts` 등
 
 ```typescript
-// 로그인 폼 예시
-export default function LoginForm() {
-  const loginMutation = useLogin();
+return useMutation({
+  mutationFn: authApi.someAction,
+  onError: (error) => {
+    showAlert({
+      type: "error",
+      title: "오류",
+      message: getApiMessage.error(error),
+    });
+  },
+});
+```
 
-  return (
-    <Button
-      type="submit"
-      disabled={
-        !userId || !password || !!userIdError || !!passwordError || loginMutation.isPending
-      }
-    >
-      {loginMutation.isPending ? "로그인 중..." : "로그인"}
-    </Button>
-  );
+대부분의 mutation API 에러는 Alert으로 표시합니다.
+
+### 3. 비즈니스 분기 — `try/catch` + `authApi`
+
+**구현 위치**: `apps/web-user/src/app/auth/login/google/page.tsx` (카카오 동일 패턴)
+
+OAuth 콜백에서는 mutation 대신 **`authApi` 직접 호출 + `try/catch`** 로 분기합니다.
+
+```typescript
+try {
+  const data = await authApi.googleLogin(code);
+  login(data.accessToken);
+  router.replace(PATHS.HOME);
+} catch (error: unknown) {
+  const { googleId, googleEmail, message } = /* response 파싱 */;
+
+  if (message === AUTH_ERROR_MESSAGES.PHONE_VERIFICATION_REQUIRED && googleId && googleEmail) {
+    router.replace(`${PATHS.AUTH.GOOGLE_REGISTER}?...`);
+  } else {
+    router.replace(PATHS.HOME);
+    showAlert({ type: "error", ... });
+  }
 }
 ```
 
-**특징**:
+휴대폰 미인증 등 **응답 메시지에 따른 라우팅**이 필요할 때 이 패턴을 사용합니다.
 
-- 지역 컴포넌트에서 `isPending` 사용
-- 버튼 비활성화 및 텍스트 변경
-- 낙관적 업데이트를 위한 로딩 UI 제공
+### 4. Axios 인터셉터
 
-### 3. LoadingFallback 컴포넌트
+**구현 위치**: `apps/web-user/src/common/config/axios.config.ts`
 
-**구현 위치**: `apps/web-user/src/common/components/fallbacks/LoadingFallback.tsx`
+- `401` + `ACCESS_TOKEN_INVALID` → 토큰 갱신 시도
+- 그 외 → `Promise.reject`로 호출부(React Query / try-catch)에 전달
 
-**특징**:
+자세한 내용: [통합 인증 - 가이드](../common/통합%20인증%20-%20가이드.md)
+
+### 5. Query `isError` / 빈 데이터 UI
+
+페이지·섹션에서 `!data` 또는 query `isError` 시 "불러오지 못했습니다" 등 **인라인 메시지**를 표시하는 경우가 있습니다. 전역 ErrorBoundary 대신 **지역 처리**가 일반적입니다.
+
+---
+
+## 새 기능 추가 시 체크리스트
+
+1. **첫 목록/상세 로딩** → `isLoading` + 기존 Skeleton 패턴 또는 새 `*Skeleton` 추가
+2. **무한 스크롤** → `useInfiniteScroll` + `isFetchingNextPage` 하단 스피너
+3. **버튼·제출** → mutation `isPending`
+4. **`useSearchParams` 페이지** → 페이지 내부 `Suspense` boundary
+5. **전체 화면 블로킹** → 꼭 필요할 때만 `LoadingFallback` (남용 지양)
+6. **에러** → mutation `onError` + Alert, 분기 필요 시 `try/catch`
+
+---
 
-- `overlay` 방식: 전체 화면 로딩
-- `corner` 방식: 우측 하단 로딩
+## 참고: seller/admin과의 차이
 
-## 참고사항
+| 항목 | web-user | web-seller / web-admin |
+|------|----------|-------------------------|
+| 본문 로딩 | Skeleton | `ContentLoading` + `LoadingSpinner` |
+| 앱 초기화 | `AuthProvider` (persist) | `AuthInitializerProvider` + `LoadingFallback` |
+| 무한 스크롤 하단 | 인라인 스피너 | seller: `InfiniteScrollLoading` |
+| 백그라운드 refetch | Header 등 지역 로직 | seller: `FetchStatusInline` |
 
-1. **useQuerySuspense**: 리액트 쿼리(TanStack Query v5)의 기본 기능으로, 비동기 데이터를 불러오는 동안 로딩 표시를 해줍니다. 상위의 Suspense 컴포넌트에서 인식됩니다.
-2. **throwOnError**: 리액트 쿼리(TanStack Query v5)의 기본 기능으로, 비동기 데이터를 불러오는 동안 에러 발생 시 예외(throw error)를 던집니다. 상위의 ErrorBoundary 컴포넌트에서 인식됩니다.
+통일이 필요하면 팀 합의 후 공통 패키지 또는 컴포넌트 추출을 검토합니다.

From 5035f979e43cbc35ed64b893717afbdb1bbfadef Mon Sep 17 00:00:00 2001
From: geunu <olo90632951@gmail.com>
Date: Tue, 26 May 2026 22:37:39 +0900
Subject: [PATCH 02/41] [WEB-ADMIN][UPDATE]: Revise Vercel deployment workflow
 and documentation

- Updated the GitHub Actions workflow for staging deployments to utilize Vercel CLI for building and deploying applications.
- Enhanced error handling and validation for project names and environments.
- Removed the previous webhook URL setup in favor of using project IDs stored in GitHub secrets.
- Added Discord notification functionality for deployment status updates.
- Revised documentation to reflect changes in deployment strategy, emphasizing tag-based deployments and the new setup for Vercel tokens and project IDs.
---
 .github/workflows/deploy-staging-web.yml      | 189 ++++++++++++++----
 ...- \352\260\200\354\235\264\353\223\234.md" |  45 +++--
 2 files changed, 178 insertions(+), 56 deletions(-)

diff --git a/.github/workflows/deploy-staging-web.yml b/.github/workflows/deploy-staging-web.yml
index a1b42116..ed817b6f 100644
--- a/.github/workflows/deploy-staging-web.yml
+++ b/.github/workflows/deploy-staging-web.yml
@@ -8,28 +8,32 @@ on:
       - "web-seller/staging-*"
       - "web-admin/staging-*"
 
-permissions: {}
+permissions:
+  contents: read
+
+env:
+  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+  VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
 
 jobs:
   deploy-vercel:
     runs-on: ubuntu-latest
 
     steps:
-      # 태그에서 프로젝트명과 환경 추출 (예: web-user/staging-v1.0.0)
       - name: Extract project name and environment from tag
         id: extract-project
         run: |
           TAG_NAME=${GITHUB_REF#refs/tags/}
-          PROJECT_NAME=$(echo $TAG_NAME | cut -d'/' -f1)
-          ENV_NAME=$(echo $TAG_NAME | cut -d'/' -f2 | cut -d'-' -f1)
-          echo "project=$PROJECT_NAME" >> $GITHUB_OUTPUT
-          echo "environment=$ENV_NAME" >> $GITHUB_OUTPUT
-          echo "tag=$TAG_NAME" >> $GITHUB_OUTPUT
+          PROJECT_NAME=$(echo "$TAG_NAME" | cut -d'/' -f1)
+          ENV_NAME=$(echo "$TAG_NAME" | cut -d'/' -f2 | cut -d'-' -f1)
+          echo "project=$PROJECT_NAME" >> "$GITHUB_OUTPUT"
+          echo "environment=$ENV_NAME" >> "$GITHUB_OUTPUT"
+          echo "tag=$TAG_NAME" >> "$GITHUB_OUTPUT"
+          echo "app_dir=apps/$PROJECT_NAME" >> "$GITHUB_OUTPUT"
           echo "📦 Tag: $TAG_NAME"
           echo "📁 Project: $PROJECT_NAME"
           echo "🌍 Environment: $ENV_NAME"
 
-      # 프로젝트명과 환경 유효성 검증
       - name: Validate project name and environment
         run: |
           PROJECT=${{ steps.extract-project.outputs.project }}
@@ -37,66 +41,177 @@ jobs:
 
           if [[ "$PROJECT" != "web-user" && "$PROJECT" != "web-seller" && "$PROJECT" != "web-admin" ]]; then
             echo "❌ Invalid project name: $PROJECT"
-            echo "Valid project names: web-user, web-seller, web-admin"
             exit 1
           fi
 
           if [[ "$ENV" != "staging" ]]; then
             echo "❌ Invalid environment: $ENV"
-            echo "Valid environment: staging"
             exit 1
           fi
 
           echo "✅ Valid project: $PROJECT"
           echo "✅ Valid environment: $ENV"
 
-      # 프로젝트별 Vercel 웹훅 URL 설정
-      - name: Set project-specific webhook URL
-        id: set-webhook
+      - name: Set Vercel project id
+        id: vercel-project
         run: |
           PROJECT=${{ steps.extract-project.outputs.project }}
 
-          case $PROJECT in
+          case "$PROJECT" in
             web-user)
-              echo "webhook_url=${{ secrets.VERCEL_WEBHOOK_URL_WEB_USER_STAGING }}" >> $GITHUB_OUTPUT
+              PROJECT_ID="${{ secrets.VERCEL_PROJECT_ID_WEB_USER_STAGING }}"
               ;;
             web-seller)
-              echo "webhook_url=${{ secrets.VERCEL_WEBHOOK_URL_WEB_SELLER_STAGING }}" >> $GITHUB_OUTPUT
+              PROJECT_ID="${{ secrets.VERCEL_PROJECT_ID_WEB_SELLER_STAGING }}"
               ;;
             web-admin)
-              echo "webhook_url=${{ secrets.VERCEL_WEBHOOK_URL_WEB_ADMIN_STAGING }}" >> $GITHUB_OUTPUT
+              PROJECT_ID="${{ secrets.VERCEL_PROJECT_ID_WEB_ADMIN_STAGING }}"
               ;;
           esac
 
-      # Vercel 웹훅을 통한 배포 트리거
-      - name: Trigger Vercel deployment via webhook
+          if [ -z "$PROJECT_ID" ]; then
+            echo "❌ VERCEL_PROJECT_ID is not set for $PROJECT"
+            echo "Add VERCEL_PROJECT_ID_*_STAGING to GitHub repository secrets"
+            exit 1
+          fi
+
+          echo "id=$PROJECT_ID" >> "$GITHUB_OUTPUT"
+
+      - uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: yarn
+
+      - name: Enable Corepack
+        run: corepack enable
+
+      - name: Install dependencies
+        run: yarn install --immutable
+
+      - name: Install Vercel CLI
+        run: npm install -g vercel@latest
+
+      - name: Pull Vercel environment
+        working-directory: ${{ steps.extract-project.outputs.app_dir }}
+        env:
+          VERCEL_PROJECT_ID: ${{ steps.vercel-project.outputs.id }}
         run: |
-          PROJECT=${{ steps.extract-project.outputs.project }}
-          TAG_NAME=${{ steps.extract-project.outputs.tag }}
-          WEBHOOK_URL=${{ steps.set-webhook.outputs.webhook_url }}
+          if [ -z "$VERCEL_TOKEN" ] || [ -z "$VERCEL_ORG_ID" ]; then
+            echo "❌ VERCEL_TOKEN and VERCEL_ORG_ID secrets are required"
+            exit 1
+          fi
+
+          vercel pull --yes --environment=production --token="$VERCEL_TOKEN" \
+            2>&1 | tee /tmp/vercel-pull.log
+
+      - name: Build with Vercel
+        id: vercel-build
+        working-directory: ${{ steps.extract-project.outputs.app_dir }}
+        env:
+          VERCEL_PROJECT_ID: ${{ steps.vercel-project.outputs.id }}
+        run: |
+          set -o pipefail
+          vercel build --prod --token="$VERCEL_TOKEN" \
+            2>&1 | tee /tmp/vercel-build.log
+          echo "result=success" >> "$GITHUB_OUTPUT"
 
-          echo "🚀 Triggering deployment for $PROJECT (staging) via Vercel webhook..."
-          echo "📋 Tag: $TAG_NAME"
-          echo "🔗 Webhook URL: ${WEBHOOK_URL:0:50}..." # URL 일부만 표시 (보안)
+      - name: Deploy to Vercel
+        id: vercel-deploy
+        working-directory: ${{ steps.extract-project.outputs.app_dir }}
+        env:
+          VERCEL_PROJECT_ID: ${{ steps.vercel-project.outputs.id }}
+        run: |
+          set -o pipefail
+          vercel deploy --prebuilt --prod --yes --token="$VERCEL_TOKEN" \
+            2>&1 | tee /tmp/vercel-deploy.log
 
-          if [ -z "$WEBHOOK_URL" ]; then
-            echo "❌ Error: Webhook URL is not set for $PROJECT"
-            echo "Please set VERCEL_WEBHOOK_URL_${PROJECT^^}_STAGING secret in GitHub repository settings"
+          DEPLOY_URL=$(grep -Eo 'https://[a-zA-Z0-9./_-]+' /tmp/vercel-deploy.log | tail -n 1)
+          if [ -z "$DEPLOY_URL" ]; then
+            echo "❌ Could not parse deployment URL from Vercel CLI output"
             exit 1
           fi
 
-          # Vercel 웹훅 호출
-          echo "📤 Calling Vercel webhook..."
-          HTTP_STATUS=$(curl -s -o /tmp/vercel_response.txt -w "%{http_code}" \
+          echo "url=$DEPLOY_URL" >> "$GITHUB_OUTPUT"
+          echo "✅ Deployed: $DEPLOY_URL"
+
+      - name: Notify Discord
+        if: always()
+        env:
+          DISCORD_WEBHOOK_URL: ${{ secrets.DISCORD_WEBHOOK_URL }}
+          PROJECT: ${{ steps.extract-project.outputs.project }}
+          TAG: ${{ steps.extract-project.outputs.tag }}
+          ENVIRONMENT: ${{ steps.extract-project.outputs.environment }}
+          DEPLOY_URL: ${{ steps.vercel-deploy.outputs.url }}
+          JOB_STATUS: ${{ job.status }}
+          RUN_URL: ${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}
+        run: |
+          if [ -z "$DISCORD_WEBHOOK_URL" ]; then
+            echo "⚠️ DISCORD_WEBHOOK_URL is not set — skipping notification"
+            exit 0
+          fi
+
+          case "$JOB_STATUS" in
+            success) STATUS_LABEL="✅ 배포 성공"; COLOR=5763719 ;;
+            failure) STATUS_LABEL="❌ 배포 실패"; COLOR=15548997 ;;
+            cancelled) STATUS_LABEL="⚠️ 배포 취소"; COLOR=9807270 ;;
+            *) STATUS_LABEL="ℹ️ 배포 종료 ($JOB_STATUS)"; COLOR=3447003 ;;
+          esac
+
+          LOG_SOURCE="/tmp/vercel-build.log"
+          if [ ! -s "$LOG_SOURCE" ]; then
+            LOG_SOURCE="/tmp/vercel-pull.log"
+          fi
+          if [ ! -s "$LOG_SOURCE" ]; then
+            LOG_SOURCE="/tmp/vercel-deploy.log"
+          fi
+
+          LOG_SNIPPET="로그 파일 없음"
+          if [ -s "$LOG_SOURCE" ]; then
+            LOG_SNIPPET=$(tail -c 900 "$LOG_SOURCE" | sed 's/```/``\`/g')
+          fi
+
+          DEPLOY_FIELD="${DEPLOY_URL:-배포 URL 없음 (빌드/배포 단계 실패)}"
+          if [ -n "$DEPLOY_URL" ]; then
+            DEPLOY_FIELD="[$DEPLOY_URL]($DEPLOY_URL)"
+          fi
+
+          PAYLOAD=$(jq -n \
+            --arg title "$STATUS_LABEL — $PROJECT (staging)" \
+            --argjson color "$COLOR" \
+            --arg project "$PROJECT" \
+            --arg tag "$TAG" \
+            --arg environment "$ENVIRONMENT" \
+            --arg deploy "$DEPLOY_FIELD" \
+            --arg run_url "$RUN_URL" \
+            --arg log "$LOG_SNIPPET" \
+            '{
+              embeds: [{
+                title: $title,
+                color: $color,
+                fields: [
+                  { name: "프로젝트", value: $project, inline: true },
+                  { name: "환경", value: $environment, inline: true },
+                  { name: "태그", value: ("`" + $tag + "`"), inline: false },
+                  { name: "배포 URL", value: $deploy, inline: false },
+                  { name: "GitHub Actions", value: ("[워크플로우 로그](" + $run_url + ")"), inline: false },
+                  { name: "Vercel 로그 (마지막 900자)", value: ("```\n" + $log + "\n```"), inline: false }
+                ],
+                timestamp: (now | strftime("%Y-%m-%dT%H:%M:%SZ"))
+              }]
+            }')
+
+          HTTP_STATUS=$(curl -s -o /tmp/discord_response.txt -w "%{http_code}" \
             -X POST \
             -H "Content-Type: application/json" \
-            "$WEBHOOK_URL")
+            -d "$PAYLOAD" \
+            "$DISCORD_WEBHOOK_URL")
 
           if [ "$HTTP_STATUS" -ge 200 ] && [ "$HTTP_STATUS" -lt 300 ]; then
-            echo "✅ Webhook triggered successfully (HTTP $HTTP_STATUS)"
-            cat /tmp/vercel_response.txt 2>/dev/null || echo "No response body"
+            echo "✅ Discord notification sent (HTTP $HTTP_STATUS)"
           else
-            echo "❌ Webhook call failed (HTTP $HTTP_STATUS)"
-            cat /tmp/vercel_response.txt
-            exit 1
+            echo "⚠️ Discord notification failed (HTTP $HTTP_STATUS) — deploy result is unchanged"
+            cat /tmp/discord_response.txt
           fi
diff --git "a/docs/infra/vercel/Vercel \353\260\260\355\217\254 - \352\260\200\354\235\264\353\223\234.md" "b/docs/infra/vercel/Vercel \353\260\260\355\217\254 - \352\260\200\354\235\264\353\223\234.md"
index b336c5cd..a748f292 100644
--- "a/docs/infra/vercel/Vercel \353\260\260\355\217\254 - \352\260\200\354\235\264\353\223\234.md"	
+++ "b/docs/infra/vercel/Vercel \353\260\260\355\217\254 - \352\260\200\354\235\264\353\223\234.md"	
@@ -37,7 +37,7 @@ Picake 프로젝트의 web-user, web-seller, web-admin 애플리케이션을 Ver
 }
 ```
 
-이 설정은 웹훅을 통한 수동 배포만 사용한다는 의미입니다.
+이 설정은 브랜치 push 시 Vercel 자동 배포를 막고, **태그 + GitHub Actions**로만 배포한다는 의미입니다.
 
 ### 2. Vercel 콘솔 설정
 
@@ -88,24 +88,31 @@ Picake 프로젝트의 web-user, web-seller, web-admin 애플리케이션을 Ver
 | web-seller | `VITE_PUBLIC_API_DOMAIN` | `https://api-staging.picakes.com` |
 | web-admin  | `VITE_PUBLIC_API_DOMAIN` | `https://api-staging.picakes.com` |
 
-#### 2.4 Deploy Hook 생성 (웹훅)
+#### 2.4 Vercel 토큰 및 프로젝트 ID 확인
 
-1. Vercel 대시보드 → 프로젝트 설정 → Git → Deploy Hooks
-2. Deploy Hook 생성
-3. 생성된 웹훅 URL 복사 (다음 단계에서 사용)
+1. https://vercel.com/account/settings/tokens url직접 입력 -> 토큰 생성 및 깃허브 VERCEL_TOKEN secrets 설정
+2. Vercel → 팀 선택 → Settings → General → Team ID 복사 및 깃허브 VERCEL_ORG_ID secrets 설정
+3. Vercel → 팀 선택 → 각 프로젝트 -> Settings -> General -> Project ID 복사 및 깃허브 VERCEL_PROJECT_ID secrets 설정
 
-### 3. GitHub 환경변수 설정
+#### 2.5 Discord 웹훅 (배포 알림)
 
-1. GitHub 저장소 → Settings → Secrets and variables → Actions
-2. New repository secret 클릭
-3. 다음 Secrets 추가:
-   - `VERCEL_WEBHOOK_URL_WEB_USER_STAGING`: web-user 스테이징 환경 Vercel 웹훅 URL
-   - `VERCEL_WEBHOOK_URL_WEB_SELLER_STAGING`: web-seller 스테이징 환경 Vercel 웹훅 URL
-   - `VERCEL_WEBHOOK_URL_WEB_ADMIN_STAGING`: web-admin 스테이징 환경 Vercel 웹훅 URL
+1. Discord 서버 → 채널 설정 → 연동 → 웹후크 만들기
+2. 웹훅 URL을 GitHub Secret `DISCORD_WEBHOOK_URL_WEB_FE`에 등록
 
-### 4. GitHub 워크플로 생성 (태그 기반)
+| Secret                                 | 설명                           |
+| -------------------------------------- | ------------------------------ |
+| `VERCEL_TOKEN`                         | Vercel API 토큰                |
+| `VERCEL_ORG_ID`                        | Vercel 팀/개인 Org ID          |
+| `VERCEL_PROJECT_ID_WEB_USER_STAGING`   | web-user-staging 프로젝트 ID   |
+| `VERCEL_PROJECT_ID_WEB_SELLER_STAGING` | web-seller-staging 프로젝트 ID |
+| `VERCEL_PROJECT_ID_WEB_ADMIN_STAGING`  | web-admin-staging 프로젝트 ID  |
+| `DISCORD_WEBHOOK_URL_WEB_FE`           | 배포 결과 Discord 알림 웹훅    |
 
-`.github/workflows/deploy-staging-web.yml` 파일을 생성하여 태그 기반 배포 워크플로를 설정합니다.
+> 이전 Deploy Hook용 `VERCEL_WEBHOOK_URL_*` 시크릿은 더 이상 사용하지 않습니다.
+
+### 4. GitHub 워크플로 (태그 기반 + Discord 알림)
+
+`.github/workflows/deploy-staging-web.yml`에서 태그 푸시 시 Vercel CLI로 빌드·배포하고, 성공/실패 시 Discord로 알립니다.
 
 **워크플로 트리거:**
 
@@ -115,14 +122,14 @@ Picake 프로젝트의 web-user, web-seller, web-admin 애플리케이션을 Ver
 
 **워크플로 동작:**
 
-1. 태그에서 프로젝트명과 환경 추출
-2. 프로젝트명과 환경 유효성 검증
-3. 프로젝트별 Vercel 웹훅 URL 가져오기
-4. Vercel 웹훅 호출하여 배포 트리거
+1. 태그에서 프로젝트명·환경 추출 및 검증
+2. 모노레포 의존성 설치 (`yarn install`)
+3. `vercel pull` → `vercel build` → `vercel deploy` (배포 완료까지 대기)
+4. Discord에 성공/실패, 배포 URL, GitHub Actions 로그 링크, Vercel 빌드 로그 일부 전송
 
 자세한 워크플로 내용은 `.github/workflows/deploy-staging-web.yml` 파일을 참고하세요.
 
-### 5. 도메인 구성 (선택사항)
+### 4. 도메인 구성 (선택사항)
 
 커스텀 도메인 설정은 [AWS Route53(도메인) - 가이드](<../aws/AWS%20Route53(도메인)%20-%20가이드.md>)를 참고하세요.
 

From 82ec08cb379a6a8aaa103f817cdad16c625efefb Mon Sep 17 00:00:00 2001
From: geunu <olo90632951@gmail.com>
Date: Tue, 26 May 2026 22:40:42 +0900
Subject: [PATCH 03/41] [WEB-ADMIN][UPDATE]: Enhance staging deployment
 workflow with Yarn caching

- Updated the GitHub Actions workflow for staging deployments to enable Corepack and cache Yarn dependencies.
- Added steps to retrieve the Yarn cache directory and configure caching for improved build performance.
- Removed the outdated cache configuration to prevent issues with Corepack and Yarn 1.x.
---
 .github/workflows/deploy-staging-web.yml | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/deploy-staging-web.yml b/.github/workflows/deploy-staging-web.yml
index ed817b6f..fdf56516 100644
--- a/.github/workflows/deploy-staging-web.yml
+++ b/.github/workflows/deploy-staging-web.yml
@@ -83,11 +83,23 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: "20"
-          cache: yarn
 
+      # packageManager: yarn@4.x — setup-node의 cache: yarn은 Corepack 전 Yarn 1.x를 호출해 실패함
       - name: Enable Corepack
         run: corepack enable
 
+      - name: Get Yarn cache directory
+        id: yarn-cache-dir
+        run: echo "dir=$(yarn config get cacheFolder)" >> "$GITHUB_OUTPUT"
+
+      - name: Cache Yarn dependencies
+        uses: actions/cache@v4
+        with:
+          path: ${{ steps.yarn-cache-dir.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
       - name: Install dependencies
         run: yarn install --immutable
 

From 98333fab8673ebab229b32b2489a99c49d56d876 Mon Sep 17 00:00:00 2001
From: geunu <olo90632951@gmail.com>
Date: Tue, 26 May 2026 22:43:41 +0900
Subject: [PATCH 04/41] [WEB-ADMIN][UPDATE]: Add react-quill dependency to
 yarn.lock

- Updated yarn.lock to include react-quill version 2.0.0 for enhanced text editing capabilities in the application.
---
 yarn.lock | 1 +
 1 file changed, 1 insertion(+)

diff --git a/yarn.lock b/yarn.lock
index 2322f60a..9ef87956 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4054,6 +4054,7 @@ __metadata:
     react: "npm:^18.2.0"
     react-dom: "npm:^18.2.0"
     react-error-boundary: "npm:^6.0.0"
+    react-quill: "npm:^2.0.0"
     react-router-dom: "npm:^7.9.4"
     tailwind-merge: "npm:^2.6.0"
     tailwindcss: "npm:^3.4.18"

From 1cd1b53dcda71e39e542f65239bdef7e2e2a02b9 Mon Sep 17 00:00:00 2001
From: geunu <olo90632951@gmail.com>
Date: Tue, 26 May 2026 22:46:28 +0900
Subject: [PATCH 05/41] [WEB-ADMIN][UPDATE]: Refine Vercel deployment workflow
 for staging

- Adjusted the GitHub Actions workflow to execute Vercel CLI from the repository root to avoid path issues.
- Cleaned up previous Vercel environment files before pulling the latest configuration.
- Updated project.json to skip the install step during the build process, enhancing deployment efficiency.
---
 .github/workflows/deploy-staging-web.yml | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/deploy-staging-web.yml b/.github/workflows/deploy-staging-web.yml
index fdf56516..3a988f89 100644
--- a/.github/workflows/deploy-staging-web.yml
+++ b/.github/workflows/deploy-staging-web.yml
@@ -106,8 +106,9 @@ jobs:
       - name: Install Vercel CLI
         run: npm install -g vercel@latest
 
+      # 모노레포: apps/<app>에서 vercel CLI를 실행하면 rootDirectory가 중복되어
+      # apps/web-user/apps/web-user 경로가 되며 "spawn sh ENOENT"가 발생함 → 저장소 루트에서 실행
       - name: Pull Vercel environment
-        working-directory: ${{ steps.extract-project.outputs.app_dir }}
         env:
           VERCEL_PROJECT_ID: ${{ steps.vercel-project.outputs.id }}
         run: |
@@ -116,12 +117,17 @@ jobs:
             exit 1
           fi
 
+          rm -rf apps/*/.vercel .vercel
+
           vercel pull --yes --environment=production --token="$VERCEL_TOKEN" \
             2>&1 | tee /tmp/vercel-pull.log
 
+          # 의존성은 위에서 루트 yarn install 완료 — vercel build의 install 단계 스킵
+          jq '.installCommand = "true"' .vercel/project.json > .vercel/project.json.tmp
+          mv .vercel/project.json.tmp .vercel/project.json
+
       - name: Build with Vercel
         id: vercel-build
-        working-directory: ${{ steps.extract-project.outputs.app_dir }}
         env:
           VERCEL_PROJECT_ID: ${{ steps.vercel-project.outputs.id }}
         run: |
@@ -132,7 +138,6 @@ jobs:
 
       - name: Deploy to Vercel
         id: vercel-deploy
-        working-directory: ${{ steps.extract-project.outputs.app_dir }}
         env:
           VERCEL_PROJECT_ID: ${{ steps.vercel-project.outputs.id }}
         run: |

From 07897cc45174f081a9f20eaab3dcd9198c89782a Mon Sep 17 00:00:00 2001
From: geunu <olo90632951@gmail.com>
Date: Tue, 26 May 2026 22:52:44 +0900
Subject: [PATCH 06/41] [WEB-ADMIN][UPDATE]: Update Discord webhook URL in
 staging deployment workflow

- Changed the Discord webhook URL reference in the GitHub Actions workflow from DISCORD_WEBHOOK_URL to DISCORD_WEBHOOK_URL_WEB_FE for improved clarity and consistency.
- Updated notification message to reflect the new environment variable name, ensuring accurate logging during deployment notifications.
---
 .github/workflows/deploy-staging-web.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/deploy-staging-web.yml b/.github/workflows/deploy-staging-web.yml
index 3a988f89..fae4260f 100644
--- a/.github/workflows/deploy-staging-web.yml
+++ b/.github/workflows/deploy-staging-web.yml
@@ -157,7 +157,7 @@ jobs:
       - name: Notify Discord
         if: always()
         env:
-          DISCORD_WEBHOOK_URL: ${{ secrets.DISCORD_WEBHOOK_URL }}
+          DISCORD_WEBHOOK_URL: ${{ secrets.DISCORD_WEBHOOK_URL_WEB_FE }}
           PROJECT: ${{ steps.extract-project.outputs.project }}
           TAG: ${{ steps.extract-project.outputs.tag }}
           ENVIRONMENT: ${{ steps.extract-project.outputs.environment }}
@@ -166,7 +166,7 @@ jobs:
           RUN_URL: ${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}
         run: |
           if [ -z "$DISCORD_WEBHOOK_URL" ]; then
-            echo "⚠️ DISCORD_WEBHOOK_URL is not set — skipping notification"
+            echo "⚠️ DISCORD_WEBHOOK_URL_WEB_FE is not set — skipping notification"
             exit 0
           fi
 

From 3697bd06c9c4495a67b50236235943bd8632b093 Mon Sep 17 00:00:00 2001
From: geunu <olo90632951@gmail.com>
Date: Tue, 26 May 2026 23:04:19 +0900
Subject: [PATCH 07/41] [WEB-ADMIN][UPDATE]: Revise Vercel project setup
 documentation

- Removed outdated sections regarding project creation and environment variable setup for Vercel deployments.
- Streamlined the documentation to focus on essential steps for configuring Vercel projects and environment variables.
- Updated the GitHub workflow section to reflect the new structure and clarify the deployment process, including Discord webhook integration.
---
 ...- \352\260\200\354\235\264\353\223\234.md" | 44 +++----------------
 1 file changed, 5 insertions(+), 39 deletions(-)

diff --git "a/docs/infra/vercel/Vercel \353\260\260\355\217\254 - \352\260\200\354\235\264\353\223\234.md" "b/docs/infra/vercel/Vercel \353\260\260\355\217\254 - \352\260\200\354\235\264\353\223\234.md"
index a748f292..3b33654a 100644
--- "a/docs/infra/vercel/Vercel \353\260\260\355\217\254 - \352\260\200\354\235\264\353\223\234.md"	
+++ "b/docs/infra/vercel/Vercel \353\260\260\355\217\254 - \352\260\200\354\235\264\353\223\234.md"	
@@ -54,50 +54,18 @@ Picake 프로젝트의 web-user, web-seller, web-admin 애플리케이션을 Ver
 | web-admin-staging     | staging    | `staging` | Production |
 | web-admin-production  | production | `main`    | Production |
 
-**중요 사항:**
-
-- staging과 production 환경 모두 별도의 Vercel 프로젝트로 구성됩니다
-- 각 프로젝트는 바라보는 브랜치만 다릅니다 (staging 브랜치 또는 main 브랜치)
-- 모든 프로젝트는 Production 타입으로 배포됩니다
-
 #### 2.2 프로젝트 생성
 
-1. Vercel 대시보드에서 새 프로젝트 생성 (총 6개)
-2. GitHub 저장소 연결
-   - web-user-staging: `staging` 브랜치 연결
-   - web-user-production: `main` 브랜치 연결
-   - web-seller-staging: `staging` 브랜치 연결
-   - web-seller-production: `main` 브랜치 연결
-   - web-admin-staging: `staging` 브랜치 연결
-   - web-admin-production: `main` 브랜치 연결
-3. 빌드 설정:
-   - Framework: Next.js (web-user) / Vite (web-seller, web-admin)
-   - Build Command: `next build` (web-user) / `yarn build` (web-seller, web-admin)
-   - Install Command: `yarn install`
-   - Root Directory: `apps/web-user` 또는 `apps/web-seller` 또는 `apps/web-admin`
-   - Output Directory: `.next` (web-user) / `dist` (web-seller) / `dist` (web-admin)
+1. 이전에 만들었던 프로젝트 설정 확인
 
 #### 2.3 환경변수 설정
 
 1. Vercel 대시보드 → 프로젝트 설정 → Environment Variables
 2. 필요한 환경변수 추가
 
-| 프로젝트   | 환경변수                 | staging 예시                      |
-| ---------- | ------------------------ | --------------------------------- |
-| web-user   | (프로젝트별 설정)        | —                                 |
-| web-seller | `VITE_PUBLIC_API_DOMAIN` | `https://api-staging.picakes.com` |
-| web-admin  | `VITE_PUBLIC_API_DOMAIN` | `https://api-staging.picakes.com` |
-
-#### 2.4 Vercel 토큰 및 프로젝트 ID 확인
-
-1. https://vercel.com/account/settings/tokens url직접 입력 -> 토큰 생성 및 깃허브 VERCEL_TOKEN secrets 설정
-2. Vercel → 팀 선택 → Settings → General → Team ID 복사 및 깃허브 VERCEL_ORG_ID secrets 설정
-3. Vercel → 팀 선택 → 각 프로젝트 -> Settings -> General -> Project ID 복사 및 깃허브 VERCEL_PROJECT_ID secrets 설정
-
-#### 2.5 Discord 웹훅 (배포 알림)
-
-1. Discord 서버 → 채널 설정 → 연동 → 웹후크 만들기
-2. 웹훅 URL을 GitHub Secret `DISCORD_WEBHOOK_URL_WEB_FE`에 등록
+- https://vercel.com/account/settings/tokens url직접 입력 -> 토큰 생성 및 깃허브 VERCEL_TOKEN secrets 설정
+- Vercel → 팀 선택 → Settings → General → Team ID 복사 및 깃허브 VERCEL_ORG_ID secrets 설정
+- Vercel → 팀 선택 → 각 프로젝트 -> Settings -> General -> Project ID 복사 및 깃허브 VERCEL_PROJECT_ID secrets 설정
 
 | Secret                                 | 설명                           |
 | -------------------------------------- | ------------------------------ |
@@ -108,9 +76,7 @@ Picake 프로젝트의 web-user, web-seller, web-admin 애플리케이션을 Ver
 | `VERCEL_PROJECT_ID_WEB_ADMIN_STAGING`  | web-admin-staging 프로젝트 ID  |
 | `DISCORD_WEBHOOK_URL_WEB_FE`           | 배포 결과 Discord 알림 웹훅    |
 
-> 이전 Deploy Hook용 `VERCEL_WEBHOOK_URL_*` 시크릿은 더 이상 사용하지 않습니다.
-
-### 4. GitHub 워크플로 (태그 기반 + Discord 알림)
+### 3. GitHub 워크플로 (태그 기반 + Discord 알림)
 
 `.github/workflows/deploy-staging-web.yml`에서 태그 푸시 시 Vercel CLI로 빌드·배포하고, 성공/실패 시 Discord로 알립니다.
 

From fda7f91af55c598cb75c40a2022beecfa53d7439 Mon Sep 17 00:00:00 2001
From: jangchanwoo <wkdcksdn1996@gmail.com>
Date: Tue, 9 Jun 2026 13:51:45 +0900
Subject: [PATCH 08/41] [WEB-USER][UPDATE]: Add category images to CategoryList

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../public/images/contents/category1.png         | Bin 0 -> 2358 bytes
 .../public/images/contents/category2.png         | Bin 0 -> 6846 bytes
 .../public/images/contents/category3.png         | Bin 0 -> 2758 bytes
 .../public/images/contents/category4.png         | Bin 0 -> 4624 bytes
 .../public/images/contents/category5.png         | Bin 0 -> 2523 bytes
 .../components/categories/CategoryList.tsx       |  13 +++++--------
 6 files changed, 5 insertions(+), 8 deletions(-)
 create mode 100644 apps/web-user/public/images/contents/category1.png
 create mode 100644 apps/web-user/public/images/contents/category2.png
 create mode 100644 apps/web-user/public/images/contents/category3.png
 create mode 100644 apps/web-user/public/images/contents/category4.png
 create mode 100644 apps/web-user/public/images/contents/category5.png

diff --git a/apps/web-user/public/images/contents/category1.png b/apps/web-user/public/images/contents/category1.png
new file mode 100644
index 0000000000000000000000000000000000000000..5b83aa8160950b64b9e17ede032bc2165d94e9ab
GIT binary patch
literal 2358
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

literal 0
HcmV?d00001

diff --git a/apps/web-user/public/images/contents/category2.png b/apps/web-user/public/images/contents/category2.png
new file mode 100644
index 0000000000000000000000000000000000000000..ea6604afc52573d0b72a570f511eb7ab9c6312ec
GIT binary patch
literal 6846
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

literal 0
HcmV?d00001

diff --git a/apps/web-user/public/images/contents/category3.png b/apps/web-user/public/images/contents/category3.png
new file mode 100644
index 0000000000000000000000000000000000000000..f4e692afd36b61b63ac35defe83cd60b3bfe15d3
GIT binary patch
literal 2758
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
M07*qoM6N<$f}A-;)&Kwi

literal 0
HcmV?d00001

diff --git a/apps/web-user/public/images/contents/category4.png b/apps/web-user/public/images/contents/category4.png
new file mode 100644
index 0000000000000000000000000000000000000000..5081b75eb2a33ec883ac3651eb15ceb4385878b6
GIT binary patch
literal 4624
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
GLSTYZUeQ|s

literal 0
HcmV?d00001

diff --git a/apps/web-user/public/images/contents/category5.png b/apps/web-user/public/images/contents/category5.png
new file mode 100644
index 0000000000000000000000000000000000000000..d9f4aa45b5301442f1a9e81987f416b1827f6666
GIT binary patch
literal 2523
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

literal 0
HcmV?d00001

diff --git a/apps/web-user/src/common/components/categories/CategoryList.tsx b/apps/web-user/src/common/components/categories/CategoryList.tsx
index 64d2b038..5f250f89 100644
--- a/apps/web-user/src/common/components/categories/CategoryList.tsx
+++ b/apps/web-user/src/common/components/categories/CategoryList.tsx
@@ -10,14 +10,11 @@ interface Category {
 }
 
 const MOCK_CATEGORIES: Category[] = [
-  { id: "1", name: "생일", image: null },
-  { id: "2", name: "연인", image: null },
-  { id: "3", name: "친구", image: null },
-  { id: "4", name: "직장", image: null },
-  { id: "5", name: "당일픽업", image: null },
-  { id: "6", name: "기념일", image: null },
-  { id: "7", name: "감사", image: null },
-  { id: "8", name: "축하", image: null },
+  { id: "1", name: "생일", image: "/images/contents/category1.png" },
+  { id: "2", name: "연인", image: "/images/contents/category2.png" },
+  { id: "3", name: "직장", image: "/images/contents/category3.png" },
+  { id: "4", name: "친구", image: "/images/contents/category4.png" },
+  { id: "5", name: "당일픽업", image: "/images/contents/category5.png" },
 ];
 
 export default function CategoryList() {

From 7e89679b792e7bf66db83a7be571f19566b2fb21 Mon Sep 17 00:00:00 2001
From: jangchanwoo <wkdcksdn1996@gmail.com>
Date: Fri, 19 Jun 2026 14:19:12 +0900
Subject: [PATCH 09/41] =?UTF-8?q?[WEB-USER][QA]=20=ED=83=AD=20=EC=8A=A4?=
 =?UTF-8?q?=ED=81=AC=EB=A1=A4=EB=A7=81,=20=ED=9B=84=EA=B8=B0=20=EC=97=86?=
 =?UTF-8?q?=EC=9D=84=EB=95=8C=20=ED=85=8D=EC=8A=A4=ED=8A=B8=20=EC=A4=91?=
 =?UTF-8?q?=EC=95=99=EC=A0=95=EB=A0=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/app/product/[productId]/page.tsx      |  1 +
 .../common/components/reviews/ReviewList.tsx  |  2 +-
 .../src/common/components/tabs/Tabs.tsx       | 34 +++++++++++++++++--
 3 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/apps/web-user/src/app/product/[productId]/page.tsx b/apps/web-user/src/app/product/[productId]/page.tsx
index 295ccffc..94671032 100644
--- a/apps/web-user/src/app/product/[productId]/page.tsx
+++ b/apps/web-user/src/app/product/[productId]/page.tsx
@@ -99,6 +99,7 @@ export default function ProductDetailPage({ params }: ProductDetailPageProps) {
       {/* 탭 영역 */}
       <Tabs
         defaultTab="detail"
+        scrollOnSelect
         tabs={[
           {
             id: "detail",
diff --git a/apps/web-user/src/common/components/reviews/ReviewList.tsx b/apps/web-user/src/common/components/reviews/ReviewList.tsx
index f0620936..3ac81b8d 100644
--- a/apps/web-user/src/common/components/reviews/ReviewList.tsx
+++ b/apps/web-user/src/common/components/reviews/ReviewList.tsx
@@ -66,7 +66,7 @@ export function ReviewList({
             <ReviewItem key={review.id} review={review} onImageClick={handleReviewImageClick} />
           ))
         ) : (
-          <p className="text-sm text-gray-500 py-4">{emptyMessage}</p>
+          <p className="text-sm text-gray-500 py-4 text-center">{emptyMessage}</p>
         )}
       </div>
 
diff --git a/apps/web-user/src/common/components/tabs/Tabs.tsx b/apps/web-user/src/common/components/tabs/Tabs.tsx
index 55573183..5b7de181 100644
--- a/apps/web-user/src/common/components/tabs/Tabs.tsx
+++ b/apps/web-user/src/common/components/tabs/Tabs.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useRef, useState } from "react";
 
 export interface Tab {
   id: string;
@@ -11,18 +11,46 @@ export interface Tab {
 export interface TabsProps {
   tabs: Tab[];
   defaultTab?: string;
+  /** 탭 클릭 시 탭 바가 상단 헤더 바로 아래로 오도록 스크롤할지 여부 (기본 false) */
+  scrollOnSelect?: boolean;
+  /** 스크롤 시 제외할 상단 고정 헤더 높이 (px, 기본 52 = 탭 바 sticky 기준) */
+  scrollOffset?: number;
 }
 
-export function Tabs({ tabs, defaultTab }: TabsProps) {
+export function Tabs({
+  tabs,
+  defaultTab,
+  scrollOnSelect = false,
+  scrollOffset = 52,
+}: TabsProps) {
   const [activeTab, setActiveTab] = useState<string>(defaultTab || tabs[0]?.id || "");
+  // sticky 탭 바는 붙어있을 때 위치가 52px로 고정돼 위치 계산이 불가하므로,
+  // 바로 앞에 둔 비-sticky 앵커로 스크롤한다(scrollIntoView가 스크롤 컨테이너를 자동 탐색).
+  const anchorRef = useRef<HTMLDivElement>(null);
+
+  const handleTabClick = (tabId: string) => {
+    setActiveTab(tabId);
+
+    if (!scrollOnSelect) return;
+
+    // 콘텐츠 스왑 후 레이아웃이 반영된 다음 프레임에 스크롤
+    requestAnimationFrame(() => {
+      // scroll-margin-top(scrollOffset) 덕분에 헤더 높이만큼 띄워서 멈춘다
+      anchorRef.current?.scrollIntoView({ behavior: "smooth", block: "start" });
+    });
+  };
+
   return (
     <div className="bg-white rounded-xl">
+      {/* 스크롤 기준 앵커 (sticky 아님: 탭 바의 실제 위치를 가리킴)
+          scrollMarginTop = 헤더 높이만큼 띄워서 멈추도록 */}
+      <div ref={anchorRef} aria-hidden className="h-0" style={{ scrollMarginTop: scrollOffset }} />
       {/* 탭 헤더 */}
       <div className="flex justify-center border-b border-gray-100 p-0 sticky top-[52px] bg-white z-30">
         {tabs.map((tab) => (
           <button
             key={tab.id}
-            onClick={() => setActiveTab(tab.id)}
+            onClick={() => handleTabClick(tab.id)}
             className="flex-1 h-[44px] flex items-center justify-center text-sm border-0 bg-transparent cursor-pointer transition-all duration-200"
           >
             <span

From 0a7c34b0525aec7d7f58e1d860e633963699ad98 Mon Sep 17 00:00:00 2001
From: jangchanwoo <wkdcksdn1996@gmail.com>
Date: Fri, 19 Jun 2026 14:53:52 +0900
Subject: [PATCH 10/41] =?UTF-8?q?[WEB-USER][QA]=20=EC=83=81=ED=92=88?=
 =?UTF-8?q?=EC=83=81=EC=84=B8=20QA=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/app/product/[productId]/page.tsx      |  2 +-
 .../components/calendars/Calendar/index.tsx   | 31 +++++++++++++++++--
 .../ProductDetailImageGallerySection.tsx      |  4 +--
 .../sections/ProductDetailInfoSection.tsx     | 14 ++++++++-
 4 files changed, 45 insertions(+), 6 deletions(-)

diff --git a/apps/web-user/src/app/product/[productId]/page.tsx b/apps/web-user/src/app/product/[productId]/page.tsx
index 94671032..09aaae83 100644
--- a/apps/web-user/src/app/product/[productId]/page.tsx
+++ b/apps/web-user/src/app/product/[productId]/page.tsx
@@ -135,7 +135,7 @@ export default function ProductDetailPage({ params }: ProductDetailPageProps) {
       />
 
       {/* 예약하기, 좋아요 - 하단 고정 */}
-      <div className="fixed bottom-0 left-0 right-0 mx-auto max-w-[638px] bg-white border-gray-200 flex flex-col shadow-[0_-4px_12px_-4px_rgba(0,0,0,0.16)]">
+      <div className="fixed bottom-0 left-0 right-0 z-40 mx-auto max-w-[638px] bg-white border-gray-200 flex flex-col shadow-[0_-4px_12px_-4px_rgba(0,0,0,0.16)]">
         <div className="flex items-center gap-[16px] px-[20px] py-[10px]">
           <button
             type="button"
diff --git a/apps/web-user/src/common/components/calendars/Calendar/index.tsx b/apps/web-user/src/common/components/calendars/Calendar/index.tsx
index a6485c58..9b779925 100644
--- a/apps/web-user/src/common/components/calendars/Calendar/index.tsx
+++ b/apps/web-user/src/common/components/calendars/Calendar/index.tsx
@@ -140,13 +140,28 @@ export const Calendar: React.FC<CalendarProps> = ({
     }
   }, [selectedDate, onDateSelect, minDate, maxDate, today]);
 
+  // minDate/maxDate가 속한 "월"의 시작일 (월 이동 제한 기준)
+  const minMonthStart = minDate ? new Date(minDate.getFullYear(), minDate.getMonth(), 1) : null;
+  const maxMonthStart = maxDate ? new Date(maxDate.getFullYear(), maxDate.getMonth(), 1) : null;
+
+  // 현재 표시 월이 minDate 월 이하면 이전 달 이동 불가
+  const isPrevMonthDisabled = minMonthStart
+    ? currentMonth.getTime() <= minMonthStart.getTime()
+    : false;
+  // 현재 표시 월이 maxDate 월 이상이면 다음 달 이동 불가
+  const isNextMonthDisabled = maxMonthStart
+    ? currentMonth.getTime() >= maxMonthStart.getTime()
+    : false;
+
   // 이전 달로 이동
   const goToPreviousMonth = () => {
+    if (isPrevMonthDisabled) return;
     setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1, 1));
   };
 
   // 다음 달로 이동
   const goToNextMonth = () => {
+    if (isNextMonthDisabled) return;
     setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1, 1));
   };
 
@@ -172,7 +187,13 @@ export const Calendar: React.FC<CalendarProps> = ({
         <button
           type="button"
           onClick={goToPreviousMonth}
-          className="p-2 hover:bg-gray-100 rounded-full transition-colors"
+          disabled={isPrevMonthDisabled}
+          className={cn(
+            "p-2 rounded-full transition-colors",
+            isPrevMonthDisabled
+              ? "cursor-not-allowed opacity-30"
+              : "hover:bg-gray-100",
+          )}
           aria-label="이전 달"
         >
           <ChevronLeft className="w-5 h-5 text-gray-600" />
@@ -181,7 +202,13 @@ export const Calendar: React.FC<CalendarProps> = ({
         <button
           type="button"
           onClick={goToNextMonth}
-          className="p-2 hover:bg-gray-100 rounded-full transition-colors"
+          disabled={isNextMonthDisabled}
+          className={cn(
+            "p-2 rounded-full transition-colors",
+            isNextMonthDisabled
+              ? "cursor-not-allowed opacity-30"
+              : "hover:bg-gray-100",
+          )}
           aria-label="다음 달"
         >
           <ChevronRight className="w-5 h-5 text-gray-600" />
diff --git a/apps/web-user/src/features/product/components/sections/ProductDetailImageGallerySection.tsx b/apps/web-user/src/features/product/components/sections/ProductDetailImageGallerySection.tsx
index ba895074..00d15052 100644
--- a/apps/web-user/src/features/product/components/sections/ProductDetailImageGallerySection.tsx
+++ b/apps/web-user/src/features/product/components/sections/ProductDetailImageGallerySection.tsx
@@ -22,7 +22,7 @@ export function ProductDetailImageGallerySection({
 
   if (!images || images.length === 0) {
     return (
-      <div className="w-full h-[280px] sm:h-[400px] aspect-square bg-gray-100 flex items-center justify-center text-gray-500 text-sm font-medium">
+      <div className="w-full aspect-square bg-gray-100 flex items-center justify-center text-gray-500 text-sm font-medium">
         이미지가 없습니다.
       </div>
     );
@@ -36,7 +36,7 @@ export function ProductDetailImageGallerySection({
         pagination={{ type: "fraction" }}
         thumbs={{ swiper: thumbsSwiper && !thumbsSwiper.destroyed ? thumbsSwiper : null }}
         loop={images.length > 1}
-        className="w-full h-[280px] sm:h-[400px]"
+        className="w-full aspect-square"
       >
         {images.map((image, index) => (
           <SwiperSlide key={index}>
diff --git a/apps/web-user/src/features/product/components/sections/ProductDetailInfoSection.tsx b/apps/web-user/src/features/product/components/sections/ProductDetailInfoSection.tsx
index b86e5fa8..4f5d48f7 100644
--- a/apps/web-user/src/features/product/components/sections/ProductDetailInfoSection.tsx
+++ b/apps/web-user/src/features/product/components/sections/ProductDetailInfoSection.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import Image from "next/image";
 import { useRouter } from "next/navigation";
 import { Product } from "@/apps/web-user/features/product/types/product.type";
 import { PATHS } from "@/apps/web-user/common/constants/paths.constant";
@@ -23,7 +24,18 @@ export function ProductDetailInfoSection({ product }: ProductDetailInfoSectionPr
           onClick={handleStoreClick}
           className="inline-flex items-center gap-[4px] mb-[8px] px-[6px] py-[6px] rounded-full bg-[#F6F5F5] text-xs text-gray-900 font-bold hover:bg-[#E8E6E6] transition-colors cursor-pointer"
         >
-          <span className="w-[14px] h-[14px] rounded-full bg-primary"></span>
+          {product.storeLogoImageUrl ? (
+            <Image
+              src={product.storeLogoImageUrl}
+              alt={product.storeName}
+              width={14}
+              height={14}
+              unoptimized
+              className="w-[14px] h-[14px] rounded-full object-cover"
+            />
+          ) : (
+            <span className="w-[14px] h-[14px] rounded-full bg-primary" />
+          )}
           {product.storeName}
         </button>
         <h1 className="text-xl font-bold text-gray-900">{product.name}</h1>

From 2d43986f399cb2c7cc3d45d1b2ddd4fe83c3d155 Mon Sep 17 00:00:00 2001
From: jangchanwoo <wkdcksdn1996@gmail.com>
Date: Fri, 19 Jun 2026 16:51:15 +0900
Subject: [PATCH 11/41] =?UTF-8?q?[WEB-USER][QA]=20=EC=8A=A4=ED=86=A0?=
 =?UTF-8?q?=EC=96=B4=20=EC=84=A4=EB=AA=85=20=EC=A4=84=EB=B0=94=EA=BF=88(\n?=
 =?UTF-8?q?)=20=EB=A0=8C=EB=8D=94=EB=A7=81=20=EC=B2=98=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

whitespace-pre-line 추가로 description의 개행 문자가 줄바꿈으로 표시되도록 수정

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../store/components/sections/StoreDetailIntroSection.tsx       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web-user/src/features/store/components/sections/StoreDetailIntroSection.tsx b/apps/web-user/src/features/store/components/sections/StoreDetailIntroSection.tsx
index 287cc74f..0c0855f0 100644
--- a/apps/web-user/src/features/store/components/sections/StoreDetailIntroSection.tsx
+++ b/apps/web-user/src/features/store/components/sections/StoreDetailIntroSection.tsx
@@ -164,7 +164,7 @@ export function StoreDetailIntroSection({ store }: StoreDetailIntroSectionProps)
       {/* 설명 */}
       {store.description && (
         <div className="px-[16px] py-[12px] bg-gray-50 rounded-lg">
-          <p className="text-2sm text-gray-900 leading-relaxed">
+          <p className="text-2sm text-gray-900 leading-relaxed whitespace-pre-line">
             {displayDescription}
             {shouldTruncate && !isExpanded && (
               <button

From edd20c4c43eb35aae5855111da1ca6d8f76da546 Mon Sep 17 00:00:00 2001
From: geunu <olo90632951@gmail.com>
Date: Sun, 21 Jun 2026 10:04:40 +0900
Subject: [PATCH 12/41] =?UTF-8?q?[WEB-USER,=20WEB-SELLER,=20BACKEND][UPDAT?=
 =?UTF-8?q?E]:=20=EC=83=81=ED=92=88=20=EC=A0=95=EB=B3=B4=EC=97=90=20?=
 =?UTF-8?q?=EC=A0=95=EA=B0=80=20=ED=95=84=EB=93=9C=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../migration.sql                             |  8 +++++++
 .../migration.sql                             | 13 ++++++++++++
 .../src/infra/database/prisma/schema.prisma   |  1 +
 .../backend/src/infra/database/prisma/seed.ts |  2 ++
 .../product/constants/product.constants.ts    |  3 +++
 .../modules/product/dto/product-create.dto.ts |  9 ++++++++
 .../modules/product/dto/product-detail.dto.ts |  6 ++++++
 .../modules/product/dto/product-update.dto.ts |  9 ++++++++
 .../services/product-create.service.ts        |  4 ++++
 .../services/product-update.service.ts        | 11 ++++++++++
 .../product/utils/product-price.util.ts       | 21 +++++++++++++++++++
 .../components/forms/ProductCreationForm.tsx  |  9 ++++++++
 .../product/components/list/ProductList.tsx   | 12 ++++++++++-
 .../ProductCreationBasicInfoSection.tsx       | 18 ++++++++++++++++
 .../src/features/product/types/product.dto.ts |  3 +++
 .../product/utils/product-price.util.ts       | 13 ++++++++++++
 .../product/utils/validateProductForm.ts      | 12 +++++++++++
 .../pages/store/detail/products/Detail.tsx    |  2 ++
 .../sections/ProductDetailInfoSection.tsx     | 16 ++++++++++++--
 .../features/product/types/product.type.ts    |  1 +
 .../product/utils/product-price.util.ts       | 13 ++++++++++++
 21 files changed, 183 insertions(+), 3 deletions(-)
 create mode 100644 apps/backend/src/infra/database/prisma/migrations/20260620120000_add_product_discount_price/migration.sql
 create mode 100644 apps/backend/src/infra/database/prisma/migrations/20260620130000_rename_list_price_to_original_price/migration.sql
 create mode 100644 apps/backend/src/modules/product/utils/product-price.util.ts
 create mode 100644 apps/web-seller/src/features/product/utils/product-price.util.ts
 create mode 100644 apps/web-user/src/features/product/utils/product-price.util.ts

diff --git a/apps/backend/src/infra/database/prisma/migrations/20260620120000_add_product_discount_price/migration.sql b/apps/backend/src/infra/database/prisma/migrations/20260620120000_add_product_discount_price/migration.sql
new file mode 100644
index 00000000..23eae207
--- /dev/null
+++ b/apps/backend/src/infra/database/prisma/migrations/20260620120000_add_product_discount_price/migration.sql
@@ -0,0 +1,8 @@
+-- AlterTable: 정가(original_price) 추가, 기존 할인가(discount_price) 컬럼 제거
+ALTER TABLE "products" ADD COLUMN IF NOT EXISTS "original_price" INTEGER;
+
+UPDATE "products" SET "original_price" = "sale_price" WHERE "original_price" IS NULL;
+
+ALTER TABLE "products" ALTER COLUMN "original_price" SET NOT NULL;
+
+ALTER TABLE "products" DROP COLUMN IF EXISTS "discount_price";
diff --git a/apps/backend/src/infra/database/prisma/migrations/20260620130000_rename_list_price_to_original_price/migration.sql b/apps/backend/src/infra/database/prisma/migrations/20260620130000_rename_list_price_to_original_price/migration.sql
new file mode 100644
index 00000000..2bdd457f
--- /dev/null
+++ b/apps/backend/src/infra/database/prisma/migrations/20260620130000_rename_list_price_to_original_price/migration.sql
@@ -0,0 +1,13 @@
+-- list_price → original_price (이전 마이그레이션 적용 환경 호환)
+DO $$
+BEGIN
+  IF EXISTS (
+    SELECT 1 FROM information_schema.columns
+    WHERE table_name = 'products' AND column_name = 'list_price'
+  ) AND NOT EXISTS (
+    SELECT 1 FROM information_schema.columns
+    WHERE table_name = 'products' AND column_name = 'original_price'
+  ) THEN
+    ALTER TABLE "products" RENAME COLUMN "list_price" TO "original_price";
+  END IF;
+END $$;
diff --git a/apps/backend/src/infra/database/prisma/schema.prisma b/apps/backend/src/infra/database/prisma/schema.prisma
index fb87f773..0841dce2 100644
--- a/apps/backend/src/infra/database/prisma/schema.prisma
+++ b/apps/backend/src/infra/database/prisma/schema.prisma
@@ -202,6 +202,7 @@ model Product {
   // 비즈니스 필드 - 기본 정보
   name              String // 상품명 (필수)
   images            String[] @default([]) // 상품 이미지 목록 (첫 번째 요소가 대표 이미지)
+  originalPrice     Int @map("original_price") // 정가
   salePrice         Int @map("sale_price") // 판매 가격
   salesStatus       EnableStatus @map("sales_status") // 판매 상태
   visibilityStatus  EnableStatus @map("visibility_status") // 노출 상태
diff --git a/apps/backend/src/infra/database/prisma/seed.ts b/apps/backend/src/infra/database/prisma/seed.ts
index 330635aa..17e31587 100644
--- a/apps/backend/src/infra/database/prisma/seed.ts
+++ b/apps/backend/src/infra/database/prisma/seed.ts
@@ -116,6 +116,7 @@ const SEED_PRODUCT_BASE = {
     "https://static-staging.picakes.com/uploads/1779605200087_f0d30173.jpeg",
   ],
   SALE_PRICE: 45000,
+  ORIGINAL_PRICE: 50000,
   SIZE_OPTIONS: [
     {
       id: "size_seed_dosirak",
@@ -585,6 +586,7 @@ async function upsertProducts(stores: Awaited<ReturnType<typeof upsertStores>>)
         storeId: targetStore.id,
         name: SEED_PRODUCT_BASE.NAME,
         images: SEED_PRODUCT_BASE.IMAGES,
+        originalPrice: SEED_PRODUCT_BASE.ORIGINAL_PRICE,
         salePrice: SEED_PRODUCT_BASE.SALE_PRICE,
         salesStatus: "ENABLE",
         visibilityStatus: "ENABLE",
diff --git a/apps/backend/src/modules/product/constants/product.constants.ts b/apps/backend/src/modules/product/constants/product.constants.ts
index 6781f217..0b6eb28a 100644
--- a/apps/backend/src/modules/product/constants/product.constants.ts
+++ b/apps/backend/src/modules/product/constants/product.constants.ts
@@ -11,6 +11,8 @@ export const PRODUCT_ERROR_MESSAGES = {
   PRODUCT_INACTIVE: "판매중지된 상품입니다.",
   PRODUCT_OUT_OF_STOCK: "품절된 상품입니다.",
   PRODUCT_NOT_AVAILABLE: "구매할 수 없는 상품입니다.",
+  PRODUCT_PRICE_INVALID: "정가와 판매가는 0보다 큰 숫자여야 합니다.",
+  SALE_PRICE_EXCEEDS_ORIGINAL_PRICE: "판매가는 정가보다 클 수 없습니다.",
   REVIEW_NOT_FOUND: "후기를 찾을 수 없습니다.",
   /** 거리순 정렬 시 클라이언트 기준 위도·경도 미전달 */
   DISTANCE_SORT_REQUIRES_COORDINATES:
@@ -93,6 +95,7 @@ export const SWAGGER_EXAMPLES = {
     id: "prod_123456789",
     // 상품 정보
     name: "초콜릿 케이크",
+    originalPrice: 50000,
     salePrice: 45000,
     likeCount: 25,
     createdAt: new Date("2024-01-01T00:00:00.000Z"),
diff --git a/apps/backend/src/modules/product/dto/product-create.dto.ts b/apps/backend/src/modules/product/dto/product-create.dto.ts
index 284df41c..c6a59d1e 100644
--- a/apps/backend/src/modules/product/dto/product-create.dto.ts
+++ b/apps/backend/src/modules/product/dto/product-create.dto.ts
@@ -145,6 +145,15 @@ export class CreateProductRequestDto {
   @IsString({ each: true })
   images: string[];
 
+  @ApiProperty({
+    description: "정가",
+    example: PRODUCT_SWAGGER_EXAMPLES.PRODUCT_DATA.originalPrice,
+  })
+  @IsNotEmpty()
+  @IsNumber()
+  @Min(0)
+  originalPrice: number;
+
   @ApiProperty({
     description: "판매가",
     example: PRODUCT_SWAGGER_EXAMPLES.PRODUCT_DATA.salePrice,
diff --git a/apps/backend/src/modules/product/dto/product-detail.dto.ts b/apps/backend/src/modules/product/dto/product-detail.dto.ts
index f40f8f5e..97091bd4 100644
--- a/apps/backend/src/modules/product/dto/product-detail.dto.ts
+++ b/apps/backend/src/modules/product/dto/product-detail.dto.ts
@@ -66,6 +66,12 @@ export class ProductResponseDto extends PickupAddressDto {
   })
   images: string[];
 
+  @ApiProperty({
+    description: "정가",
+    example: SWAGGER_EXAMPLES.PRODUCT_DATA.originalPrice,
+  })
+  originalPrice: number;
+
   @ApiProperty({
     description: "판매가",
     example: SWAGGER_EXAMPLES.PRODUCT_DATA.salePrice,
diff --git a/apps/backend/src/modules/product/dto/product-update.dto.ts b/apps/backend/src/modules/product/dto/product-update.dto.ts
index a49b28c6..eaf1da5f 100644
--- a/apps/backend/src/modules/product/dto/product-update.dto.ts
+++ b/apps/backend/src/modules/product/dto/product-update.dto.ts
@@ -69,6 +69,15 @@ export class UpdateProductRequestDto {
   @IsString({ each: true })
   images?: string[];
 
+  @ApiPropertyOptional({
+    description: "정가",
+    example: PRODUCT_SWAGGER_EXAMPLES.PRODUCT_DATA.originalPrice,
+  })
+  @IsOptional()
+  @IsNumber()
+  @Min(0)
+  originalPrice?: number;
+
   @ApiPropertyOptional({
     description: "판매가",
     example: PRODUCT_SWAGGER_EXAMPLES.PRODUCT_DATA.salePrice,
diff --git a/apps/backend/src/modules/product/services/product-create.service.ts b/apps/backend/src/modules/product/services/product-create.service.ts
index 8ae5cc69..17bfb273 100644
--- a/apps/backend/src/modules/product/services/product-create.service.ts
+++ b/apps/backend/src/modules/product/services/product-create.service.ts
@@ -8,6 +8,7 @@ import {
 import { JwtVerifiedPayload } from "@apps/backend/modules/auth/types/auth.types";
 import { Prisma } from "@apps/backend/infra/database/prisma/generated/client";
 import { ProductOwnershipUtil } from "@apps/backend/modules/product/utils/product-ownership.util";
+import { validateProductPrices } from "@apps/backend/modules/product/utils/product-price.util";
 import { LoggerUtil } from "@apps/backend/common/utils/logger.util";
 
 @Injectable()
@@ -37,6 +38,8 @@ export class ProductCreateService {
       user.sub,
     );
 
+    validateProductPrices(createProductDto.originalPrice, createProductDto.salePrice);
+
     try {
       return await this.prisma.$transaction(
         async (tx) => {
@@ -80,6 +83,7 @@ export class ProductCreateService {
             },
             name: createProductDto.name,
             images: createProductDto.images || [],
+            originalPrice: createProductDto.originalPrice,
             salePrice: createProductDto.salePrice,
             salesStatus: createProductDto.salesStatus,
             visibilityStatus: createProductDto.visibilityStatus,
diff --git a/apps/backend/src/modules/product/services/product-update.service.ts b/apps/backend/src/modules/product/services/product-update.service.ts
index 22f306c9..f72e69e2 100644
--- a/apps/backend/src/modules/product/services/product-update.service.ts
+++ b/apps/backend/src/modules/product/services/product-update.service.ts
@@ -8,6 +8,7 @@ import {
 import { JwtVerifiedPayload } from "@apps/backend/modules/auth/types/auth.types";
 import { Prisma } from "@apps/backend/infra/database/prisma/generated/client";
 import { ProductOwnershipUtil } from "@apps/backend/modules/product/utils/product-ownership.util";
+import { validateProductPrices } from "@apps/backend/modules/product/utils/product-price.util";
 import { LoggerUtil } from "@apps/backend/common/utils/logger.util";
 
 @Injectable()
@@ -81,11 +82,18 @@ export class ProductUpdateService {
     const product = await this.prisma.product.findUnique({
       where: { id },
       select: {
+        originalPrice: true,
+        salePrice: true,
         cakeSizeOptions: true,
         cakeFlavorOptions: true,
       },
     });
 
+    const nextOriginalPrice = updateProductDto.originalPrice ?? product!.originalPrice;
+    const nextSalePrice = updateProductDto.salePrice ?? product!.salePrice;
+
+    validateProductPrices(nextOriginalPrice, nextSalePrice);
+
     const updateData: Prisma.ProductUpdateInput = {};
 
     if (updateProductDto.name !== undefined) {
@@ -94,6 +102,9 @@ export class ProductUpdateService {
     if (updateProductDto.images !== undefined) {
       updateData.images = updateProductDto.images;
     }
+    if (updateProductDto.originalPrice !== undefined) {
+      updateData.originalPrice = updateProductDto.originalPrice;
+    }
     if (updateProductDto.salePrice !== undefined) {
       updateData.salePrice = updateProductDto.salePrice;
     }
diff --git a/apps/backend/src/modules/product/utils/product-price.util.ts b/apps/backend/src/modules/product/utils/product-price.util.ts
new file mode 100644
index 00000000..117e6d95
--- /dev/null
+++ b/apps/backend/src/modules/product/utils/product-price.util.ts
@@ -0,0 +1,21 @@
+import { BadRequestException } from "@nestjs/common";
+import { PRODUCT_ERROR_MESSAGES } from "@apps/backend/modules/product/constants/product.constants";
+
+export function validateProductPrices(originalPrice: number, salePrice: number): void {
+  if (originalPrice <= 0 || salePrice <= 0) {
+    throw new BadRequestException(PRODUCT_ERROR_MESSAGES.PRODUCT_PRICE_INVALID);
+  }
+
+  if (salePrice > originalPrice) {
+    throw new BadRequestException(PRODUCT_ERROR_MESSAGES.SALE_PRICE_EXCEEDS_ORIGINAL_PRICE);
+  }
+}
+
+/** 할인율(0~100). salePrice >= originalPrice 이면 null */
+export function getProductDiscountRate(originalPrice: number, salePrice: number): number | null {
+  if (salePrice >= originalPrice) {
+    return null;
+  }
+
+  return Math.round((1 - salePrice / originalPrice) * 100);
+}
diff --git a/apps/web-seller/src/features/product/components/forms/ProductCreationForm.tsx b/apps/web-seller/src/features/product/components/forms/ProductCreationForm.tsx
index 15a41c0b..6deb36f6 100644
--- a/apps/web-seller/src/features/product/components/forms/ProductCreationForm.tsx
+++ b/apps/web-seller/src/features/product/components/forms/ProductCreationForm.tsx
@@ -34,6 +34,7 @@ interface Props {
 export const defaultForm: ProductForm = {
   images: [],
   name: "",
+  originalPrice: 0,
   salePrice: 0,
   salesStatus: EnableStatus.ENABLE,
   visibilityStatus: EnableStatus.ENABLE,
@@ -99,6 +100,13 @@ export const ProductCreationForm: React.FC<Props> = ({
       onChange?.(next);
     };
 
+  const handleOriginalPriceChange = (value: number) => {
+    if (disabled) return;
+    const next = { ...form, originalPrice: value };
+    setForm(next);
+    onChange?.(next);
+  };
+
   const handleSalePriceChange = (value: number) => {
     if (disabled) return;
     const next = { ...form, salePrice: value };
@@ -255,6 +263,7 @@ export const ProductCreationForm: React.FC<Props> = ({
                 onMainImageChange={handleMainImageChange}
                 onAdditionalImagesChange={handleAdditionalImagesChange}
                 onChange={handleChange}
+                onOriginalPriceChange={handleOriginalPriceChange}
                 onSalePriceChange={handleSalePriceChange}
                 disabled={disabled}
               />
diff --git a/apps/web-seller/src/features/product/components/list/ProductList.tsx b/apps/web-seller/src/features/product/components/list/ProductList.tsx
index 8be0b4cc..fcb2c0b3 100644
--- a/apps/web-seller/src/features/product/components/list/ProductList.tsx
+++ b/apps/web-seller/src/features/product/components/list/ProductList.tsx
@@ -1,6 +1,7 @@
 import { useNavigate, useParams } from "react-router-dom";
 import type { ProductResponseDto } from "@/apps/web-seller/features/product/types/product.dto";
 import { ROUTES } from "@/apps/web-seller/common/constants/paths.constant";
+import { isProductOnSale } from "@/apps/web-seller/features/product/utils/product-price.util";
 import { EmptyState } from "@/apps/web-seller/common/components/fallbacks/EmptyState";
 import { StatusBadge } from "@/apps/web-seller/common/components/badges/StatusBadge";
 
@@ -63,7 +64,16 @@ export function ProductList({ products }: ProductListProps) {
                   </StatusBadge>
                 </div>
                 <div className="text-base font-bold tabular-nums sm:text-lg">
-                  {product.salePrice.toLocaleString()}원
+                  {isProductOnSale(product.originalPrice, product.salePrice) ? (
+                    <div className="flex flex-col items-end gap-0.5 sm:flex-row sm:items-center sm:gap-2">
+                      <span className="text-sm font-normal text-muted-foreground line-through">
+                        {product.originalPrice.toLocaleString()}원
+                      </span>
+                      <span>{product.salePrice.toLocaleString()}원</span>
+                    </div>
+                  ) : (
+                    <span>{product.salePrice.toLocaleString()}원</span>
+                  )}
                 </div>
               </div>
             </div>
diff --git a/apps/web-seller/src/features/product/components/sections/ProductCreationBasicInfoSection.tsx b/apps/web-seller/src/features/product/components/sections/ProductCreationBasicInfoSection.tsx
index 5b23f6e3..8f977f45 100644
--- a/apps/web-seller/src/features/product/components/sections/ProductCreationBasicInfoSection.tsx
+++ b/apps/web-seller/src/features/product/components/sections/ProductCreationBasicInfoSection.tsx
@@ -29,6 +29,7 @@ export interface ProductCreationBasicInfoSectionProps {
   onChange: (
     key: keyof ProductForm,
   ) => (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+  onOriginalPriceChange: (value: number) => void;
   onSalePriceChange: (value: number) => void;
   disabled?: boolean;
 }
@@ -44,6 +45,7 @@ export const ProductCreationBasicInfoSection: React.FC<ProductCreationBasicInfoS
   onMainImageChange,
   onAdditionalImagesChange,
   onChange,
+  onOriginalPriceChange,
   onSalePriceChange,
   disabled = false,
 }) => {
@@ -92,6 +94,22 @@ export const ProductCreationBasicInfoSection: React.FC<ProductCreationBasicInfoS
                 required
               />
             </div>
+            <div>
+              <Label className="after:content-['*'] after:ml-0.5 after:text-destructive">
+                정가
+              </Label>
+              <NumberInput
+                value={form.originalPrice}
+                onChange={(v) => onOriginalPriceChange(v ?? 0)}
+                placeholder=""
+                min={0}
+                className={errors.originalPrice ? "border-destructive" : ""}
+                disabled={disabled}
+              />
+              {errors.originalPrice && (
+                <p className="text-sm text-destructive mt-1">{errors.originalPrice}</p>
+              )}
+            </div>
             <div>
               <Label className="after:content-['*'] after:ml-0.5 after:text-destructive">
                 판매가
diff --git a/apps/web-seller/src/features/product/types/product.dto.ts b/apps/web-seller/src/features/product/types/product.dto.ts
index 2c4e6e77..5a710962 100644
--- a/apps/web-seller/src/features/product/types/product.dto.ts
+++ b/apps/web-seller/src/features/product/types/product.dto.ts
@@ -76,6 +76,7 @@ export interface CreateProductRequestDto {
   storeId: string;
   name: string;
   images: string[];
+  originalPrice: number;
   salePrice: number;
   salesStatus: EnableStatus;
   visibilityStatus: EnableStatus;
@@ -115,6 +116,7 @@ export interface ProductResponseDto {
   storeId: string;
   name: string;
   images: string[];
+  originalPrice: number;
   salePrice: number;
   salesStatus: EnableStatus;
   visibilityStatus: EnableStatus;
@@ -184,6 +186,7 @@ export type ProductListResponseDto = ListResponseDto<ProductResponseDto>;
 export interface UpdateProductRequestDto {
   name?: string;
   images?: string[];
+  originalPrice?: number;
   salePrice?: number;
   salesStatus?: EnableStatus;
   visibilityStatus?: EnableStatus;
diff --git a/apps/web-seller/src/features/product/utils/product-price.util.ts b/apps/web-seller/src/features/product/utils/product-price.util.ts
new file mode 100644
index 00000000..2e9f5add
--- /dev/null
+++ b/apps/web-seller/src/features/product/utils/product-price.util.ts
@@ -0,0 +1,13 @@
+/** salePrice < originalPrice 이면 할인 중 */
+export function isProductOnSale(originalPrice: number, salePrice: number): boolean {
+  return salePrice < originalPrice;
+}
+
+/** 할인율(0~100). 할인 없으면 null */
+export function getProductDiscountRate(originalPrice: number, salePrice: number): number | null {
+  if (!isProductOnSale(originalPrice, salePrice)) {
+    return null;
+  }
+
+  return Math.round((1 - salePrice / originalPrice) * 100);
+}
diff --git a/apps/web-seller/src/features/product/utils/validateProductForm.ts b/apps/web-seller/src/features/product/utils/validateProductForm.ts
index c02a3738..6d88cafe 100644
--- a/apps/web-seller/src/features/product/utils/validateProductForm.ts
+++ b/apps/web-seller/src/features/product/utils/validateProductForm.ts
@@ -22,10 +22,22 @@ export const validateProductForm = (
     newErrors.visibilityStatus = "노출 여부를 선택해주세요.";
   }
 
+  if (form.originalPrice === null || form.originalPrice === undefined) {
+    newErrors.originalPrice = "정가를 입력해주세요.";
+  } else if (form.originalPrice <= 0) {
+    newErrors.originalPrice = "정가는 0보다 큰 숫자여야 합니다.";
+  }
+
   if (form.salePrice === null || form.salePrice === undefined) {
     newErrors.salePrice = "판매가를 입력해주세요.";
   } else if (form.salePrice <= 0) {
     newErrors.salePrice = "판매가는 0보다 큰 숫자여야 합니다.";
+  } else if (
+    form.originalPrice !== null &&
+    form.originalPrice !== undefined &&
+    form.salePrice > form.originalPrice
+  ) {
+    newErrors.salePrice = "판매가는 정가보다 클 수 없습니다.";
   }
 
   // 상품정보제공고시 검증
diff --git a/apps/web-seller/src/pages/store/detail/products/Detail.tsx b/apps/web-seller/src/pages/store/detail/products/Detail.tsx
index c2186936..1f67b718 100644
--- a/apps/web-seller/src/pages/store/detail/products/Detail.tsx
+++ b/apps/web-seller/src/pages/store/detail/products/Detail.tsx
@@ -51,6 +51,7 @@ export const StoreDetailProductDetailPage: React.FC = () => {
   const productForm: ProductForm = {
     images: product.images || [],
     name: product.name,
+    originalPrice: product.originalPrice,
     salePrice: product.salePrice,
     salesStatus: product.salesStatus,
     visibilityStatus: product.visibilityStatus,
@@ -83,6 +84,7 @@ export const StoreDetailProductDetailPage: React.FC = () => {
     const request: UpdateProductRequestDto = {
       name: data.name,
       images: data.images,
+      originalPrice: data.originalPrice,
       salePrice: data.salePrice,
       salesStatus: data.salesStatus,
       visibilityStatus: data.visibilityStatus,
diff --git a/apps/web-user/src/features/product/components/sections/ProductDetailInfoSection.tsx b/apps/web-user/src/features/product/components/sections/ProductDetailInfoSection.tsx
index 4f5d48f7..2559a0fc 100644
--- a/apps/web-user/src/features/product/components/sections/ProductDetailInfoSection.tsx
+++ b/apps/web-user/src/features/product/components/sections/ProductDetailInfoSection.tsx
@@ -4,6 +4,10 @@ import Image from "next/image";
 import { useRouter } from "next/navigation";
 import { Product } from "@/apps/web-user/features/product/types/product.type";
 import { PATHS } from "@/apps/web-user/common/constants/paths.constant";
+import {
+  getProductDiscountRate,
+  isProductOnSale,
+} from "@/apps/web-user/features/product/utils/product-price.util";
 
 interface ProductDetailInfoSectionProps {
   product: Product;
@@ -11,6 +15,8 @@ interface ProductDetailInfoSectionProps {
 
 export function ProductDetailInfoSection({ product }: ProductDetailInfoSectionProps) {
   const router = useRouter();
+  const onSale = isProductOnSale(product.originalPrice, product.salePrice);
+  const discountRate = getProductDiscountRate(product.originalPrice, product.salePrice);
 
   const handleStoreClick = () => {
     router.push(PATHS.STORE.DETAIL(product.storeId));
@@ -40,9 +46,15 @@ export function ProductDetailInfoSection({ product }: ProductDetailInfoSectionPr
         </button>
         <h1 className="text-xl font-bold text-gray-900">{product.name}</h1>
         <div className="flex flex-col">
-          <span className="text-xs text-gray-500 line-through">40,000원</span>
+          {onSale && (
+            <span className="text-xs text-gray-500 line-through">
+              {product.originalPrice.toLocaleString()}원
+            </span>
+          )}
           <p className="flex items-center gap-[4px] text-xl font-bold text-gray-900">
-            <span className="text-[#FF653E]">50%</span>
+            {discountRate != null && (
+              <span className="text-[#FF653E]">{discountRate}%</span>
+            )}
             {product.salePrice.toLocaleString()}원~
           </p>
         </div>
diff --git a/apps/web-user/src/features/product/types/product.type.ts b/apps/web-user/src/features/product/types/product.type.ts
index ca34abae..7ea01d86 100644
--- a/apps/web-user/src/features/product/types/product.type.ts
+++ b/apps/web-user/src/features/product/types/product.type.ts
@@ -83,6 +83,7 @@ export interface Product {
   storeId: string;
   name: string;
   images: string[];
+  originalPrice: number;
   salePrice: number;
   likeCount: number;
   isLiked: boolean | null;
diff --git a/apps/web-user/src/features/product/utils/product-price.util.ts b/apps/web-user/src/features/product/utils/product-price.util.ts
new file mode 100644
index 00000000..2e9f5add
--- /dev/null
+++ b/apps/web-user/src/features/product/utils/product-price.util.ts
@@ -0,0 +1,13 @@
+/** salePrice < originalPrice 이면 할인 중 */
+export function isProductOnSale(originalPrice: number, salePrice: number): boolean {
+  return salePrice < originalPrice;
+}
+
+/** 할인율(0~100). 할인 없으면 null */
+export function getProductDiscountRate(originalPrice: number, salePrice: number): number | null {
+  if (!isProductOnSale(originalPrice, salePrice)) {
+    return null;
+  }
+
+  return Math.round((1 - salePrice / originalPrice) * 100);
+}

From 4406d3af128be15c5cd7dbb0fba50270724d8ef1 Mon Sep 17 00:00:00 2001
From: geunu <olo90632951@gmail.com>
Date: Sun, 21 Jun 2026 10:26:17 +0900
Subject: [PATCH 13/41] =?UTF-8?q?[WEB-USER][UPDATE]:=20=EB=8B=AC=EB=A0=A5?=
 =?UTF-8?q?=EB=AA=A8=EB=8B=AC=EC=97=90=EC=84=9C=20=EC=84=A0=ED=83=9D?=
 =?UTF-8?q?=EB=90=98=EC=96=B4=20=EC=9E=88=EB=8A=94=20=EB=82=A0=EC=A7=9C?=
 =?UTF-8?q?=EA=B0=80=20=EC=9E=88=EC=9D=84=20=EA=B2=BD=EC=9A=B0,=20?=
 =?UTF-8?q?=EB=AA=A8=EB=8B=AC=20=EC=98=A4=ED=94=88=EC=8B=9C=20=ED=95=B4?=
 =?UTF-8?q?=EB=8B=B9=20=EB=8B=AC=EC=9D=B4=20=ED=91=9C=EC=8B=9C=EB=90=98?=
 =?UTF-8?q?=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/calendars/Calendar/index.tsx   | 30 +++++++++++++------
 .../map/MapPickupDateBottomSheet.tsx          |  6 ++--
 2 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/apps/web-user/src/common/components/calendars/Calendar/index.tsx b/apps/web-user/src/common/components/calendars/Calendar/index.tsx
index 9b779925..de6725f8 100644
--- a/apps/web-user/src/common/components/calendars/Calendar/index.tsx
+++ b/apps/web-user/src/common/components/calendars/Calendar/index.tsx
@@ -39,19 +39,35 @@ export interface CalendarProps {
 
 const DAYS_OF_WEEK = ["일", "월", "화", "수", "목", "금", "토"];
 
+function getMonthStart(date: Date): Date {
+  return new Date(date.getFullYear(), date.getMonth(), 1);
+}
+
 export const Calendar: React.FC<CalendarProps> = ({
   selectedDate,
   onDateSelect,
   minDate,
   maxDate,
   className,
-  initialMonth = new Date(),
+  initialMonth,
   businessCalendar,
 }) => {
-  const [currentMonth, setCurrentMonth] = useState(
-    new Date(initialMonth.getFullYear(), initialMonth.getMonth(), 1),
+  const displayMonthSource = initialMonth ?? selectedDate ?? null;
+
+  const [currentMonth, setCurrentMonth] = useState(() =>
+    displayMonthSource ? getMonthStart(displayMonthSource) : getMonthStart(new Date()),
   );
 
+  const displayMonthKey = displayMonthSource
+    ? `${displayMonthSource.getFullYear()}-${displayMonthSource.getMonth()}`
+    : null;
+
+  useEffect(() => {
+    if (displayMonthSource) {
+      setCurrentMonth(getMonthStart(displayMonthSource));
+    }
+  }, [displayMonthKey]);
+
   const today = new Date();
   today.setHours(0, 0, 0, 0);
 
@@ -190,9 +206,7 @@ export const Calendar: React.FC<CalendarProps> = ({
           disabled={isPrevMonthDisabled}
           className={cn(
             "p-2 rounded-full transition-colors",
-            isPrevMonthDisabled
-              ? "cursor-not-allowed opacity-30"
-              : "hover:bg-gray-100",
+            isPrevMonthDisabled ? "cursor-not-allowed opacity-30" : "hover:bg-gray-100",
           )}
           aria-label="이전 달"
         >
@@ -205,9 +219,7 @@ export const Calendar: React.FC<CalendarProps> = ({
           disabled={isNextMonthDisabled}
           className={cn(
             "p-2 rounded-full transition-colors",
-            isNextMonthDisabled
-              ? "cursor-not-allowed opacity-30"
-              : "hover:bg-gray-100",
+            isNextMonthDisabled ? "cursor-not-allowed opacity-30" : "hover:bg-gray-100",
           )}
           aria-label="다음 달"
         >
diff --git a/apps/web-user/src/features/store/components/map/MapPickupDateBottomSheet.tsx b/apps/web-user/src/features/store/components/map/MapPickupDateBottomSheet.tsx
index c9ad502c..4670736c 100644
--- a/apps/web-user/src/features/store/components/map/MapPickupDateBottomSheet.tsx
+++ b/apps/web-user/src/features/store/components/map/MapPickupDateBottomSheet.tsx
@@ -24,8 +24,10 @@ export function MapPickupDateBottomSheet({
   onConfirm,
   onClearFilter,
 }: MapPickupDateBottomSheetProps) {
-  const [tempDate, setTempDate] = useState<Date | null>(null);
-  const [tempPeriod, setTempPeriod] = useState<MapPickupPeriodKind | null>(null);
+  const [tempDate, setTempDate] = useState<Date | null>(() => selectedFilter?.date ?? null);
+  const [tempPeriod, setTempPeriod] = useState<MapPickupPeriodKind | null>(
+    () => selectedFilter?.kind ?? null,
+  );
 
   useEffect(() => {
     if (!isOpen) return;

From bc631c013fa9bc81a93a3abaee3844c108ac116b Mon Sep 17 00:00:00 2001
From: geunu <olo90632951@gmail.com>
Date: Sun, 21 Jun 2026 10:41:40 +0900
Subject: [PATCH 14/41] =?UTF-8?q?[BACKEND][UPDATE]:=20=EB=8B=89=EB=84=A4?=
 =?UTF-8?q?=EC=9E=84=20=EB=9E=9C=EB=8D=A4=20=EC=83=9D=EC=84=B1=20=EA=B7=9C?=
 =?UTF-8?q?=EC=B9=99=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../backend/src/infra/database/prisma/seed.ts |   4 +-
 .../modules/auth/constants/auth.constants.ts  |   4 +-
 .../register-nickname-adjectives.constants.ts | 253 ++++++
 .../register-nickname-nouns.constants.ts      | 725 ++++++++++++++++++
 .../services/auth-google-oauth.service.ts     |   6 +-
 .../auth/services/auth-kakao-oauth.service.ts |   6 +-
 .../utils/google-register-nickname.util.ts    |  12 -
 .../auth/utils/register-nickname.util.ts      |  15 +
 8 files changed, 1003 insertions(+), 22 deletions(-)
 create mode 100644 apps/backend/src/modules/auth/constants/register-nickname-adjectives.constants.ts
 create mode 100644 apps/backend/src/modules/auth/constants/register-nickname-nouns.constants.ts
 delete mode 100644 apps/backend/src/modules/auth/utils/google-register-nickname.util.ts
 create mode 100644 apps/backend/src/modules/auth/utils/register-nickname.util.ts

diff --git a/apps/backend/src/infra/database/prisma/seed.ts b/apps/backend/src/infra/database/prisma/seed.ts
index 17e31587..d743446e 100644
--- a/apps/backend/src/infra/database/prisma/seed.ts
+++ b/apps/backend/src/infra/database/prisma/seed.ts
@@ -22,7 +22,7 @@ const SEED_ACCOUNTS = {
   SELLER: {
     PHONE: "01012345678",
     NAME: "김철수",
-    NICKNAME: "김철수_739",
+    NICKNAME: "달콤한_마카롱_0739",
     PROFILE_IMAGE_URL: "https://static-staging.picakes.com/uploads/1779605116236_722257b7.jpeg",
     GOOGLE_ID: "115107911178776387683",
     GOOGLE_EMAIL: "olo90632951@gmail.com",
@@ -34,7 +34,7 @@ const SEED_ACCOUNTS = {
   CONSUMER: {
     PHONE: "01023456789",
     NAME: "홍길동",
-    NICKNAME: "홍길동_4821",
+    NICKNAME: "귀여운_강아지_4821",
     PROFILE_IMAGE_URL: "https://static-staging.picakes.com/uploads/1779605131078_b337595b.jpeg",
     GOOGLE_ID: "115107911178776387683",
     GOOGLE_EMAIL: "olo90632951@gmail.com",
diff --git a/apps/backend/src/modules/auth/constants/auth.constants.ts b/apps/backend/src/modules/auth/constants/auth.constants.ts
index ef13dfa1..0a349f62 100644
--- a/apps/backend/src/modules/auth/constants/auth.constants.ts
+++ b/apps/backend/src/modules/auth/constants/auth.constants.ts
@@ -132,7 +132,7 @@ export const SWAGGER_EXAMPLES = {
     id: "clxxxxconsumer",
     phone: "010-1234-5678",
     name: "홍길동",
-    nickname: "홍길동_4821",
+    nickname: "귀여운_강아지_4821",
     profileImageUrl: "https://lh3.googleusercontent.com/a/example",
     isPhoneVerified: true,
     isActive: true,
@@ -147,7 +147,7 @@ export const SWAGGER_EXAMPLES = {
     id: "clxxxxseller",
     phone: "010-9876-5432",
     name: "김판매",
-    nickname: "김판매_3159",
+    nickname: "달콤한_마카롱_3159",
     profileImageUrl: "https://lh3.googleusercontent.com/a/example",
     isPhoneVerified: true,
     isActive: true,
diff --git a/apps/backend/src/modules/auth/constants/register-nickname-adjectives.constants.ts b/apps/backend/src/modules/auth/constants/register-nickname-adjectives.constants.ts
new file mode 100644
index 00000000..617b2b80
--- /dev/null
+++ b/apps/backend/src/modules/auth/constants/register-nickname-adjectives.constants.ts
@@ -0,0 +1,253 @@
+/** 회원가입 초기 닉네임 생성용 형용사 풀 */
+export const REGISTER_NICKNAME_ADJECTIVES = [
+  // ㄱ
+  "가벼운",
+  "가뿐한",
+  "간지러운",
+  "감성적인",
+  "감칠맛 나는",
+  "강렬한",
+  "갸름한",
+  "거대한",
+  "건강한",
+  "검은",
+  "고소한",
+  "고운",
+  "곧은",
+  "골똘한",
+  "곰살맞은",
+  "공손한",
+  "과분한",
+  "구수한",
+  "굳센",
+  "귀여운",
+  "그윽한",
+  "근사한",
+  "글썽이는",
+  "기가 막힌",
+  "기쁜",
+  "기특한",
+  "긴",
+  "길쭉한",
+  "깊은",
+  // ㄴ
+  "나긋나긋한",
+  "나른한",
+  "나이 어린",
+  "날렵한",
+  "날씬한",
+  "낯선",
+  "널널한",
+  "넙적한",
+  "늠름한",
+  "늦은",
+  "능글맞은",
+  "낭만적인",
+  // ㄷ
+  "다정한",
+  "다채로운",
+  "단단한",
+  "달달한",
+  "달콤한",
+  "당찬",
+  "덤덤한",
+  "둥글둥글한",
+  "둥근",
+  "뒤늦은",
+  "따끈따끈한",
+  "따뜻한",
+  "따스한",
+  "똘똘한",
+  "뚱뚱한",
+  // ㅁ
+  "마법 같은",
+  "맑은",
+  "맛있는",
+  "매끄러운",
+  "매력적인",
+  "매운",
+  "멋진",
+  "멍한",
+  "메마른",
+  "명랑한",
+  "명확한",
+  "모난",
+  "몽환적인",
+  "묘한",
+  "무거운",
+  "무서운",
+  "무지개 빛의",
+  "미끄러운",
+  "미더운",
+  "미지의",
+  "믿음직한",
+  "민첩한",
+  "밀도 높은",
+  // ㅂ
+  "반가운",
+  "반짝이는",
+  "발랄한",
+  "밝은",
+  "밥맛 나는",
+  "방긋 웃는",
+  "배부른",
+  "벅찬",
+  "번쩍이는",
+  "부드러운",
+  "부유한",
+  "북적이는",
+  "붉은",
+  "복슬복슬한",
+  "푹신푹신한",
+  "비밀스러운",
+  "빛나는",
+  "빠른",
+  "빵빵한",
+  "뾰족한",
+  // ㅅ
+  "사랑스러운",
+  "사르르 녹는",
+  "산뜻한",
+  "상냥한",
+  "상큼한",
+  "새콤달콤한",
+  "새하얀",
+  "서늘한",
+  "서운한",
+  "설레는",
+  "섬세한",
+  "소박한",
+  "소중한",
+  "속삭이는",
+  "순수한",
+  "슬기로운",
+  "슬픈",
+  "싱그러운",
+  "싱싱한",
+  "씩씩한",
+  "쑥스러운",
+  // ㅇ
+  "아름다운",
+  "아늑한",
+  "아련한",
+  "아찔한",
+  "안타까운",
+  "알록달록한",
+  "앙증맞은",
+  "얄궂은",
+  "얌전한",
+  "어여쁜",
+  "어엿한",
+  "엉뚱한",
+  "여유로운",
+  "영롱한",
+  "오래된",
+  "올곧은",
+  "옹기종기 모인",
+  "왈가닥의",
+  "외로운",
+  "우아한",
+  "유쾌한",
+  "은은한",
+  "의젓한",
+  "아기자기한",
+  // ㅈ
+  "자그마한",
+  "자랑스러운",
+  "자상한",
+  "자애로운",
+  "작고 귀여운",
+  "잠자는",
+  "장난꾸러기 같은",
+  "저렴한",
+  "정감 있는",
+  "정겨운",
+  "조그마한",
+  "조용한",
+  "졸린",
+  "종이 같은",
+  "주황빛의",
+  "즐거운",
+  "지혜로운",
+  "진솔한",
+  "진한",
+  "짙은",
+  "짜릿한",
+  "짤막한",
+  "쫀득쫀득한",
+  "쫄깃한",
+  // ㅊ
+  "차가운",
+  "참신한",
+  "창의적인",
+  "처연한",
+  "천사 같은",
+  "철없는",
+  "첫",
+  "초록빛의",
+  "촉촉한",
+  "총명한",
+  "최선의",
+  "추억 어린",
+  "축축한",
+  "칠칠맞은",
+  "칭찬할 만한",
+  // ㅋ
+  "칼칼한",
+  "캄캄한",
+  "쾌활한",
+  "큼직한",
+  "쿨한",
+  "키 큰",
+  // ㅌ
+  "타오르는",
+  "탄탄한",
+  "털털한",
+  "톡톡 튀는",
+  "통통한",
+  "투명한",
+  "튼튼한",
+  "특별한",
+  "특유의",
+  // ㅍ
+  "파란",
+  "팍팍한",
+  "판타지 같은",
+  "팥고물 같은",
+  "평온한",
+  "포근한",
+  "푸근한",
+  "푸른",
+  "풍성한",
+  "풋풋한",
+  "프랑스풍의",
+  "피곤한",
+  "핏빛의",
+  "핑쿠핑쿠한",
+  // ㅎ
+  "하얀",
+  "한가로운",
+  "한결같은",
+  "해맑은",
+  "핼쑥한",
+  "험난한",
+  "헛된",
+  "헐렁한",
+  "헬시한",
+  "호기심 많은",
+  "화려한",
+  "화창한",
+  "환한",
+  "활기찬",
+  "황홀한",
+  "회색빛의",
+  "흐뭇한",
+  "흐린",
+  "흑백의",
+  "흔한",
+  "흥미로운",
+  "희망찬",
+  "희미한",
+  "흰",
+  "힘찬",
+] as const;
diff --git a/apps/backend/src/modules/auth/constants/register-nickname-nouns.constants.ts b/apps/backend/src/modules/auth/constants/register-nickname-nouns.constants.ts
new file mode 100644
index 00000000..259a8832
--- /dev/null
+++ b/apps/backend/src/modules/auth/constants/register-nickname-nouns.constants.ts
@@ -0,0 +1,725 @@
+/** 회원가입 초기 닉네임 생성용 명사 풀 (동물·자연·음식·생활용품 등) */
+export const REGISTER_NICKNAME_NOUNS = [
+  // 동물
+  "강아지",
+  "고양이",
+  "햄스터",
+  "다람쥐",
+  "토끼",
+  "병아리",
+  "펭귄",
+  "사막여우",
+  "코알라",
+  "판다",
+  "아기곰",
+  "아기호랑이",
+  "아기사자",
+  "수달",
+  "라쿤",
+  "페럿",
+  "친칠라",
+  "고슴도치",
+  "오리",
+  "백조",
+  "부엉이",
+  "올빼미",
+  "참새",
+  "제비",
+  "나비",
+  "무당벌레",
+  "꿀벌",
+  "개구리",
+  "도롱뇽",
+  "물고기",
+  "돌고래",
+  "바다거북",
+  "아기물범",
+  "북극곰",
+  "알파카",
+  "양",
+  "염소",
+  "송아지",
+  "망아지",
+  "아기돼지",
+  "기니피그",
+  "프레리독",
+  "미어캣",
+  "나무늘보",
+  "카피바라",
+  "여우",
+  "늑대",
+  "사슴",
+  "기린",
+  "코끼리",
+  "원숭이",
+  "카멜레온",
+  "거북이",
+  "두더지",
+  "너구리",
+  "두루미",
+  "앵무새",
+  "카나리아",
+  "문어",
+  "오징어",
+  "해파리",
+  "불가사리",
+  "가재",
+  "게",
+  "새우",
+  "고래",
+  "상어",
+  "금붕어",
+  "베타",
+  "구피",
+  "펠리칸",
+  "플라밍고",
+  "코뿔소",
+  "하마",
+  "얼룩말",
+  "캥거루",
+  "오소리",
+  "족제비",
+  "청설모",
+  "매",
+  "독수리",
+  "까치",
+  "까마귀",
+  "비둘기",
+  "거위",
+  "닭",
+  "메추라기",
+  "공작",
+  "타조",
+  "바다표범",
+  "바다사자",
+  "고래상어",
+  "가오리",
+  "낙지",
+  "전갈",
+  "거미",
+  "지네",
+  "달팽이",
+  "개미",
+  "메뚜기",
+  "귀뚜라미",
+  "잠자리",
+  "매미",
+  "딱정벌레",
+  "사슴벌레",
+  "장수풍뎅이",
+  "반딧불이",
+  "박쥐",
+  "수리",
+  "청개구리",
+  "물범",
+  // 식물·자연
+  "꽃",
+  "새싹",
+  "풀잎",
+  "나뭇잎",
+  "도토리",
+  "솔방울",
+  "밤송이",
+  "사과",
+  "딸기",
+  "복숭아",
+  "귤",
+  "포도",
+  "체리",
+  "블루베리",
+  "수박",
+  "바나나",
+  "망고",
+  "레몬",
+  "무지개",
+  "구름",
+  "별",
+  "달",
+  "햇살",
+  "이슬",
+  "바람",
+  "파도",
+  "눈꽃",
+  "눈사람",
+  "언덕",
+  "숲",
+  "산호",
+  "진주",
+  "장미",
+  "튤립",
+  "해바라기",
+  "민들레",
+  "벚꽃",
+  "은행나무",
+  "소나무",
+  "단풍",
+  "이끼",
+  "선인장",
+  "난초",
+  "수국",
+  "라벤더",
+  "모래",
+  "조약돌",
+  "바위",
+  "폭포",
+  "계곡",
+  "호수",
+  "강",
+  "바다",
+  "섬",
+  "초원",
+  "들판",
+  "들꽃",
+  "버섯",
+  "밤하늘",
+  "은하수",
+  "오로라",
+  "번개",
+  "해",
+  "안개",
+  "서리",
+  "눈",
+  "비",
+  "소나기",
+  "태풍",
+  "돌",
+  "모래사장",
+  "해변",
+  "절벽",
+  "동굴",
+  "샘물",
+  "연못",
+  "개울",
+  "나무",
+  "대나무",
+  "버드나무",
+  "단풍나무",
+  "벚나무",
+  "사과나무",
+  "배나무",
+  "감나무",
+  "포도나무",
+  "올리브",
+  "허브",
+  "바질",
+  "로즈마리",
+  "민트",
+  "카모마일",
+  "국화",
+  "백합",
+  "카네이션",
+  "안개꽃",
+  "제비꽃",
+  "나팔꽃",
+  "동백꽃",
+  "매화",
+  "수선화",
+  "프리지아",
+  "칼라",
+  "히아신스",
+  "아이리스",
+  "데이지",
+  "코스모스",
+  "맨드라미",
+  "수정",
+  "크리스탈",
+  "산",
+  "봉우리",
+  "정원",
+  "화단",
+  "잔디",
+  "씨앗",
+  "열매",
+  "꽃잎",
+  "꽃봉오리",
+  "햇볕",
+  "그늘",
+  "달빛",
+  "별빛",
+  "은하",
+  "우주",
+  "행성",
+  "혜성",
+  "유성",
+  "별자리",
+  "얼음",
+  "빙하",
+  "빙산",
+  "오솔길",
+  "숲길",
+  "다리",
+  "터널",
+  // 음식
+  "솜사탕",
+  "마카롱",
+  "젤리",
+  "초콜릿",
+  "쿠키",
+  "사탕",
+  "캔디",
+  "머핀",
+  "케이크",
+  "푸딩",
+  "팝콘",
+  "도넛",
+  "아이스크림",
+  "호빵",
+  "붕어빵",
+  "꿀떡",
+  "바람떡",
+  "송편",
+  "식빵",
+  "우유",
+  "커피",
+  "주스",
+  "코코아",
+  "차",
+  "핫초코",
+  "크로와상",
+  "와플",
+  "프레첼",
+  "브라우니",
+  "티라미수",
+  "치즈케이크",
+  "샐러드",
+  "파스타",
+  "피자",
+  "햄버거",
+  "샌드위치",
+  "김밥",
+  "떡볶이",
+  "라면",
+  "카레",
+  "스테이크",
+  "스무디",
+  "버블티",
+  "아메리카노",
+  "라떼",
+  "에스프레소",
+  "젤라토",
+  "슈크림",
+  "크레페",
+  "팬케이크",
+  "초밥",
+  "회",
+  "김치",
+  "된장찌개",
+  "비빔밥",
+  "떡",
+  "과자",
+  "초코파이",
+  "빵",
+  "크림빵",
+  "단팥빵",
+  "소금빵",
+  "베이글",
+  "토스트",
+  "잼",
+  "꿀",
+  "버터",
+  "치즈",
+  "요거트",
+  "그라놀라",
+  "시리얼",
+  "오믈렛",
+  "스콘",
+  "마들렌",
+  "타르트",
+  "파이",
+  "롤케이크",
+  "바게트",
+  "식혜",
+  "수정과",
+  "단호박",
+  "고구마",
+  "감자",
+  "옥수수",
+  "토마토",
+  "오이",
+  "당근",
+  "양파",
+  "마늘",
+  "파",
+  "상추",
+  "배추",
+  "시금치",
+  "브로콜리",
+  "양배추",
+  "피망",
+  "고추",
+  "두부",
+  "계란",
+  "베이컨",
+  "소시지",
+  "햄",
+  "치킨",
+  "닭갈비",
+  "불고기",
+  "갈비",
+  "삼겹살",
+  "목살",
+  "등심",
+  "안심",
+  "연어",
+  "참치",
+  "고등어",
+  "갈치",
+  "굴",
+  "전복",
+  "홍합",
+  "바지락",
+  "멸치",
+  "김",
+  "미역",
+  "다시마",
+  "무",
+  "배",
+  "감",
+  "키위",
+  "파인애플",
+  "멜론",
+  "참외",
+  "자두",
+  "살구",
+  "석류",
+  "블랙베리",
+  "라즈베리",
+  "크랜베리",
+  "무화과",
+  "대추",
+  "밤",
+  "호두",
+  "아몬드",
+  "땅콩",
+  "캐슈넛",
+  "피스타치오",
+  "마카다미아",
+  "피칸",
+  "잣",
+  "은행",
+  "머그잔",
+  "유리컵",
+  "접시",
+  "포크",
+  "스푼",
+  // 문구·팬시
+  "연필",
+  "지우개",
+  "공책",
+  "일기장",
+  "스티커",
+  "다이어리",
+  "편지",
+  "책",
+  "만화책",
+  "색연필",
+  "물감",
+  "팔레트",
+  "붓",
+  "엽서",
+  "메모지",
+  "달력",
+  "시계",
+  "자",
+  "가위",
+  "풀",
+  "테이프",
+  "노트",
+  "클립",
+  "핀",
+  "마커",
+  "형광펜",
+  "볼펜",
+  "샤프",
+  "연필깎이",
+  "파일",
+  "바인더",
+  "포스트잇",
+  "스탬프",
+  "스탬프패드",
+  "스케치북",
+  "크래프트지",
+  "리본테이프",
+  "마스킹테이프",
+  "스티커북",
+  "펜케이스",
+  "필통",
+  "책갈피",
+  "독서등",
+  "램프",
+  "캔들",
+  "필기장",
+  "원고지",
+  "삼각자",
+  "컴퍼스",
+  "각도기",
+  "자석",
+  "클립보드",
+  "명함",
+  "봉투",
+  "우표",
+  "잉크",
+  "잉크패드",
+  "펜",
+  "만년필",
+  "서명펜",
+  "브러시펜",
+  "캘리그라피펜",
+  "스케치펜",
+  "오일파스텔",
+  "파스텔",
+  "크레파스",
+  "수채화",
+  "유화",
+  "아크릴",
+  "캔버스",
+  "이젤",
+  "물통",
+  "스펀지",
+  "거치대",
+  "액자",
+  "포스터",
+  "플래너",
+  "체크리스트",
+  "인덱스",
+  "분류함",
+  "서류함",
+  "파일함",
+  "책꽂이",
+  "책장",
+  "책상",
+  "의자",
+  "스탠드",
+  "독서대",
+  "북마크",
+  "책받침",
+  "독서조명",
+  // 가구·소품
+  "베개",
+  "이불",
+  "쿠션",
+  "인형",
+  "테디베어",
+  "오르골",
+  "오리인형",
+  "토끼인형",
+  "담요",
+  "커튼",
+  "카펫",
+  "화분",
+  "거울",
+  "빗",
+  "가방",
+  "파우치",
+  "동전지갑",
+  "우산",
+  "리본",
+  "단추",
+  "실타래",
+  "열쇠",
+  "자물쇠",
+  "안경",
+  "반지",
+  "목걸이",
+  "캔들홀더",
+  "선반",
+  "소파",
+  "테이블",
+  "화병",
+  "머그컵",
+  "그릇",
+  "냄비",
+  "프라이팬",
+  "주전자",
+  "티포트",
+  "컵",
+  "병",
+  "바구니",
+  "상자",
+  "서랍",
+  "옷걸이",
+  "행거",
+  "알람시계",
+  "선풍기",
+  "히터",
+  "가습기",
+  "공기청정기",
+  "러그",
+  "발매트",
+  "수납함",
+  "빨래건조대",
+  "다리미판",
+  "세탁바구니",
+  "욕실매트",
+  "샤워기",
+  "수도꼭지",
+  "비누통",
+  "칫솔걸이",
+  "화장대",
+  "향수",
+  "로션",
+  "크림",
+  "립밤",
+  "선크림",
+  "마스크팩",
+  "손톱깎이",
+  "면봉",
+  "화장솜",
+  "브러시",
+  "고데기",
+  "뷰러",
+  "속눈썹",
+  "마스카라",
+  "아이섀도",
+  "블러셔",
+  "파우더",
+  "립스틱",
+  "매니큐어",
+  "큐티클",
+  "손톱",
+  "발톱",
+  "발톱깎이",
+  "디퓨저",
+  "방향제",
+  "섬유탈취제",
+  "세탁세제",
+  "섬유유연제",
+  "주방세제",
+  "수세미",
+  "행주",
+  "걸레",
+  "빗자루",
+  "쓰레받기",
+  "휴지통",
+  "쓰레기봉투",
+  "건전지",
+  "전구",
+  "멀티탭",
+  "충전기",
+  "이어폰",
+  "헤드폰",
+  "스피커",
+  "마이크",
+  "카메라",
+  "삼각대",
+  "태블릿",
+  "스마트폰",
+  "리모컨",
+  "손전등",
+  "매트리스",
+  "침대",
+  "옷장",
+  "서랍장",
+  "수건",
+  "비누",
+  "샴푸",
+  "치약",
+  "칫솔",
+  "면도기",
+  "헤어드라이어",
+  "다리미",
+  "세탁기",
+  "청소기",
+  "휴지",
+  "물티슈",
+  "노트북",
+  "나이프",
+  // 의류·패션
+  "모자",
+  "스카프",
+  "장갑",
+  "양말",
+  "운동화",
+  "구두",
+  "슬리퍼",
+  "부츠",
+  "샌들",
+  "원피스",
+  "셔츠",
+  "티셔츠",
+  "후드",
+  "재킷",
+  "코트",
+  "가디건",
+  "니트",
+  "바지",
+  "치마",
+  "반바지",
+  "레깅스",
+  "벨트",
+  "넥타이",
+  "브로치",
+  "귀걸이",
+  "팔찌",
+  "선글라스",
+  "지갑",
+  "백팩",
+  "토트백",
+  "크로스백",
+  "에코백",
+  "슬링백",
+  "머플러",
+  "비니",
+  "캡",
+  "헤어밴드",
+  "헤어핀",
+  "헤어클립",
+  "헤어타이",
+  "헤어롤",
+  "우비",
+  "레인코트",
+  "패딩",
+  "조끼",
+  "베스트",
+  "블라우스",
+  "스커트",
+  "청바지",
+  "슬랙스",
+  "트레이닝복",
+  "운동복",
+  "수영복",
+  "잠옷",
+  "파자마",
+  "가운",
+  "실내화",
+  // 악기
+  "피아노",
+  "기타",
+  "바이올린",
+  "첼로",
+  "플루트",
+  "클라리넷",
+  "색소폰",
+  "트럼펫",
+  "트롬본",
+  "하프",
+  "드럼",
+  "탬버린",
+  "실로폰",
+  "마림바",
+  "우쿨렐레",
+  "하모니카",
+  "아코디언",
+  "오르간",
+  "신디사이저",
+  "베이스",
+  "일렉기타",
+  "어쿠스틱기타",
+  "만돌린",
+  "밴조",
+  "칼림바",
+  "카우벨",
+  "심벌",
+  "캐스터네츠",
+  "트라이앵글",
+  "리코더",
+  "오카리나",
+  "비올라",
+  "콘트라베이스",
+  "오보에",
+  "바순",
+  "호른",
+  "튜바",
+  "피콜로",
+  "프렌치호른",
+] as const;
diff --git a/apps/backend/src/modules/auth/services/auth-google-oauth.service.ts b/apps/backend/src/modules/auth/services/auth-google-oauth.service.ts
index 8f1a9fcf..0f5e8bc9 100644
--- a/apps/backend/src/modules/auth/services/auth-google-oauth.service.ts
+++ b/apps/backend/src/modules/auth/services/auth-google-oauth.service.ts
@@ -18,7 +18,7 @@ import {
   GoogleRegisterRequestDto,
 } from "@apps/backend/modules/auth/dto/auth-google-oauth.dto";
 import { LoggerUtil } from "@apps/backend/common/utils/logger.util";
-import { buildInitialNicknameFromName } from "@apps/backend/modules/auth/utils/google-register-nickname.util";
+import { buildInitialNickname } from "@apps/backend/modules/auth/utils/register-nickname.util";
 import { SentryUtil } from "@apps/backend/common/utils/sentry.util";
 import { TermsService } from "@apps/backend/modules/terms/terms.service";
 
@@ -352,7 +352,7 @@ export class AuthGoogleOauthService {
           googleEmail,
           phone: normalizedPhone,
           name: trimmedName,
-          nickname: buildInitialNicknameFromName(trimmedName),
+          nickname: buildInitialNickname(),
           isPhoneVerified: true,
           lastLoginAt: now,
         },
@@ -438,7 +438,7 @@ export class AuthGoogleOauthService {
           googleEmail,
           phone: normalizedPhone,
           name: trimmedName,
-          nickname: buildInitialNicknameFromName(trimmedName),
+          nickname: buildInitialNickname(),
           isPhoneVerified: true,
           lastLoginAt: now,
           sellerVerificationStatus: "REGISTERED",
diff --git a/apps/backend/src/modules/auth/services/auth-kakao-oauth.service.ts b/apps/backend/src/modules/auth/services/auth-kakao-oauth.service.ts
index 51398a34..ddc26c22 100644
--- a/apps/backend/src/modules/auth/services/auth-kakao-oauth.service.ts
+++ b/apps/backend/src/modules/auth/services/auth-kakao-oauth.service.ts
@@ -18,7 +18,7 @@ import {
   KakaoRegisterRequestDto,
 } from "@apps/backend/modules/auth/dto/auth-kakao-oauth.dto";
 import { LoggerUtil } from "@apps/backend/common/utils/logger.util";
-import { buildInitialNicknameFromName } from "@apps/backend/modules/auth/utils/google-register-nickname.util";
+import { buildInitialNickname } from "@apps/backend/modules/auth/utils/register-nickname.util";
 import { SentryUtil } from "@apps/backend/common/utils/sentry.util";
 import { TermsService } from "@apps/backend/modules/terms/terms.service";
 
@@ -306,7 +306,7 @@ export class AuthKakaoOauthService {
           kakaoEmail,
           phone: normalizedPhone,
           name: trimmedName,
-          nickname: buildInitialNicknameFromName(trimmedName),
+          nickname: buildInitialNickname(),
           isPhoneVerified: true,
           lastLoginAt: now,
         },
@@ -382,7 +382,7 @@ export class AuthKakaoOauthService {
           kakaoEmail,
           phone: normalizedPhone,
           name: trimmedName,
-          nickname: buildInitialNicknameFromName(trimmedName),
+          nickname: buildInitialNickname(),
           isPhoneVerified: true,
           lastLoginAt: now,
           sellerVerificationStatus: "REGISTERED",
diff --git a/apps/backend/src/modules/auth/utils/google-register-nickname.util.ts b/apps/backend/src/modules/auth/utils/google-register-nickname.util.ts
deleted file mode 100644
index 34dd7752..00000000
--- a/apps/backend/src/modules/auth/utils/google-register-nickname.util.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { randomInt } from "node:crypto";
-
-/**
- * 구글 회원가입 시 초기 닉네임: `{실명}_{3 또는 4자리 난수}`
- * 전화번호 전체를 붙이면 10·11자리 등 길이 편차가 커서, 짧은 난수 접미사로 구분합니다.
- */
-export function buildInitialNicknameFromName(displayName: string): string {
-  const base = displayName.trim();
-  const useFourDigits = randomInt(2) === 1;
-  const suffix = useFourDigits ? String(randomInt(1000, 10000)) : String(randomInt(100, 1000));
-  return `${base}_${suffix}`;
-}
diff --git a/apps/backend/src/modules/auth/utils/register-nickname.util.ts b/apps/backend/src/modules/auth/utils/register-nickname.util.ts
new file mode 100644
index 00000000..e8ac8aa5
--- /dev/null
+++ b/apps/backend/src/modules/auth/utils/register-nickname.util.ts
@@ -0,0 +1,15 @@
+import { randomInt } from "node:crypto";
+
+import { REGISTER_NICKNAME_ADJECTIVES } from "@apps/backend/modules/auth/constants/register-nickname-adjectives.constants";
+import { REGISTER_NICKNAME_NOUNS } from "@apps/backend/modules/auth/constants/register-nickname-nouns.constants";
+
+/**
+ * OAuth 회원가입 시 초기 닉네임: `{형용사}_{명사}_{4자리 난수}`
+ */
+export function buildInitialNickname(): string {
+  const adjective =
+    REGISTER_NICKNAME_ADJECTIVES[randomInt(REGISTER_NICKNAME_ADJECTIVES.length)];
+  const noun = REGISTER_NICKNAME_NOUNS[randomInt(REGISTER_NICKNAME_NOUNS.length)];
+  const suffix = String(randomInt(1000, 10000));
+  return `${adjective}_${noun}_${suffix}`;
+}

From 39fa70f37de0a06ca0b2ff43ced34cde2dd703db Mon Sep 17 00:00:00 2001
From: geunu <olo90632951@gmail.com>
Date: Sun, 21 Jun 2026 10:45:05 +0900
Subject: [PATCH 15/41] =?UTF-8?q?[WEB-USER][UPDATE]:=20(=EB=A7=88=EC=9D=B4?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80-=EC=B5=9C=EA=B7=BC=EB=B3=B8=20)Remo?=
 =?UTF-8?q?ve=20sortBy=20parameter=20from=20getRecentProducts=20API=20call?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-user/src/features/recent/apis/recent.api.ts            | 1 -
 .../src/features/recent/hooks/queries/useRecentProducts.ts      | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/apps/web-user/src/features/recent/apis/recent.api.ts b/apps/web-user/src/features/recent/apis/recent.api.ts
index 8a6604dd..f8005dad 100644
--- a/apps/web-user/src/features/recent/apis/recent.api.ts
+++ b/apps/web-user/src/features/recent/apis/recent.api.ts
@@ -11,7 +11,6 @@ export const recentApi = {
   getRecentProducts: async (params: {
     page: number;
     limit: number;
-    sortBy: string;
   }): Promise<RecentProductsResponse> => {
     const response = await consumerClient.get("/mypage/recent/products", { params });
     return response.data.data;
diff --git a/apps/web-user/src/features/recent/hooks/queries/useRecentProducts.ts b/apps/web-user/src/features/recent/hooks/queries/useRecentProducts.ts
index 980c25c1..6274e204 100644
--- a/apps/web-user/src/features/recent/hooks/queries/useRecentProducts.ts
+++ b/apps/web-user/src/features/recent/hooks/queries/useRecentProducts.ts
@@ -7,7 +7,7 @@ export function useRecentProducts({ limit = 20 }: { limit?: number } = {}) {
   const query = useInfiniteQuery<RecentProductsResponse>({
     queryKey: recentQueryKeys.recentProducts(),
     queryFn: ({ pageParam = 1 }) =>
-      recentApi.getRecentProducts({ page: pageParam as number, limit, sortBy: "latest" }),
+      recentApi.getRecentProducts({ page: pageParam as number, limit }),
     getNextPageParam: (lastPage) =>
       lastPage.meta.hasNext ? lastPage.meta.currentPage + 1 : undefined,
     initialPageParam: 1,

From f55f60e3078f904b43cf71c487ebdad126d5bf47 Mon Sep 17 00:00:00 2001
From: geunu <olo90632951@gmail.com>
Date: Sun, 21 Jun 2026 10:45:50 +0900
Subject: [PATCH 16/41] =?UTF-8?q?[WEB-USER][UPDATE]:=20Tabs=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=EC=9D=98=20props=20=EA=B5=AC?=
 =?UTF-8?q?=EC=A1=B0=EB=A5=BC=20=EA=B0=84=EC=86=8C=ED=99=94=ED=95=98?=
 =?UTF-8?q?=EA=B3=A0,=20ProductDetailInfoSection=EC=97=90=EC=84=9C=20?=
 =?UTF-8?q?=ED=95=A0=EC=9D=B8=EC=9C=A8=20=ED=91=9C=EC=8B=9C=20=EB=B0=A9?=
 =?UTF-8?q?=EC=8B=9D=EC=9D=84=20=EA=B0=9C=EC=84=A0=ED=96=88=EC=8A=B5?=
 =?UTF-8?q?=EB=8B=88=EB=8B=A4.=20=EB=98=90=ED=95=9C,=20=EB=AC=B8=EC=84=9C?=
 =?UTF-8?q?=EC=97=90=EC=84=9C=20=EB=A1=9C=EB=94=A9=20=EC=B2=98=EB=A6=AC=20?=
 =?UTF-8?q?=EA=B4=80=EB=A0=A8=20=ED=91=9C=EC=9D=98=20=ED=98=95=EC=8B=9D?=
 =?UTF-8?q?=EC=9D=84=20=EC=A0=95=EB=A6=AC=ED=96=88=EC=8A=B5=EB=8B=88?=
 =?UTF-8?q?=EB=8B=A4.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../auth/utils/register-nickname.util.ts      |  3 +-
 .../src/common/components/tabs/Tabs.tsx       |  7 +--
 .../sections/ProductDetailInfoSection.tsx     |  4 +-
 ...- \352\260\200\354\235\264\353\223\234.md" | 44 +++++++++----------
 4 files changed, 25 insertions(+), 33 deletions(-)

diff --git a/apps/backend/src/modules/auth/utils/register-nickname.util.ts b/apps/backend/src/modules/auth/utils/register-nickname.util.ts
index e8ac8aa5..00c0b169 100644
--- a/apps/backend/src/modules/auth/utils/register-nickname.util.ts
+++ b/apps/backend/src/modules/auth/utils/register-nickname.util.ts
@@ -7,8 +7,7 @@ import { REGISTER_NICKNAME_NOUNS } from "@apps/backend/modules/auth/constants/re
  * OAuth 회원가입 시 초기 닉네임: `{형용사}_{명사}_{4자리 난수}`
  */
 export function buildInitialNickname(): string {
-  const adjective =
-    REGISTER_NICKNAME_ADJECTIVES[randomInt(REGISTER_NICKNAME_ADJECTIVES.length)];
+  const adjective = REGISTER_NICKNAME_ADJECTIVES[randomInt(REGISTER_NICKNAME_ADJECTIVES.length)];
   const noun = REGISTER_NICKNAME_NOUNS[randomInt(REGISTER_NICKNAME_NOUNS.length)];
   const suffix = String(randomInt(1000, 10000));
   return `${adjective}_${noun}_${suffix}`;
diff --git a/apps/web-user/src/common/components/tabs/Tabs.tsx b/apps/web-user/src/common/components/tabs/Tabs.tsx
index 5b7de181..7d970186 100644
--- a/apps/web-user/src/common/components/tabs/Tabs.tsx
+++ b/apps/web-user/src/common/components/tabs/Tabs.tsx
@@ -17,12 +17,7 @@ export interface TabsProps {
   scrollOffset?: number;
 }
 
-export function Tabs({
-  tabs,
-  defaultTab,
-  scrollOnSelect = false,
-  scrollOffset = 52,
-}: TabsProps) {
+export function Tabs({ tabs, defaultTab, scrollOnSelect = false, scrollOffset = 52 }: TabsProps) {
   const [activeTab, setActiveTab] = useState<string>(defaultTab || tabs[0]?.id || "");
   // sticky 탭 바는 붙어있을 때 위치가 52px로 고정돼 위치 계산이 불가하므로,
   // 바로 앞에 둔 비-sticky 앵커로 스크롤한다(scrollIntoView가 스크롤 컨테이너를 자동 탐색).
diff --git a/apps/web-user/src/features/product/components/sections/ProductDetailInfoSection.tsx b/apps/web-user/src/features/product/components/sections/ProductDetailInfoSection.tsx
index 2559a0fc..4488966d 100644
--- a/apps/web-user/src/features/product/components/sections/ProductDetailInfoSection.tsx
+++ b/apps/web-user/src/features/product/components/sections/ProductDetailInfoSection.tsx
@@ -52,9 +52,7 @@ export function ProductDetailInfoSection({ product }: ProductDetailInfoSectionPr
             </span>
           )}
           <p className="flex items-center gap-[4px] text-xl font-bold text-gray-900">
-            {discountRate != null && (
-              <span className="text-[#FF653E]">{discountRate}%</span>
-            )}
+            {discountRate != null && <span className="text-[#FF653E]">{discountRate}%</span>}
             {product.salePrice.toLocaleString()}원~
           </p>
         </div>
diff --git "a/docs/web-user/\354\227\220\353\237\254\354\231\200 \353\241\234\353\224\251 \354\262\230\353\246\254 - \352\260\200\354\235\264\353\223\234.md" "b/docs/web-user/\354\227\220\353\237\254\354\231\200 \353\241\234\353\224\251 \354\262\230\353\246\254 - \352\260\200\354\235\264\353\223\234.md"
index 866291a6..682ae036 100644
--- "a/docs/web-user/\354\227\220\353\237\254\354\231\200 \353\241\234\353\224\251 \354\262\230\353\246\254 - \352\260\200\354\235\264\353\223\234.md"	
+++ "b/docs/web-user/\354\227\220\353\237\254\354\231\200 \353\241\234\353\224\251 \354\262\230\353\246\254 - \352\260\200\354\235\264\353\223\234.md"	
@@ -10,13 +10,13 @@
 
 ## 로딩 처리 (요약)
 
-| 계층 | 수단 | 용도 |
-|------|------|------|
-| 1 | 루트 `Suspense` + `LoadingFallback` | `useSearchParams` 등으로 suspend 되는 구간 |
-| 2 | React Query `isLoading` + **Skeleton** | 페이지·섹션·목록 **첫 로딩** (주력) |
-| 3 | `isFetchingNextPage` + 인라인 스피너 | 무한 스크롤 **추가 로딩** |
-| 4 | Mutation `isPending` | 버튼·폼 제출·좋아요 등 **액션 로딩** |
-| 5 | `Toast` `showSpinner` | 지역 변경 등 짧은 **피드백** |
+| 계층 | 수단                                   | 용도                                       |
+| ---- | -------------------------------------- | ------------------------------------------ |
+| 1    | 루트 `Suspense` + `LoadingFallback`    | `useSearchParams` 등으로 suspend 되는 구간 |
+| 2    | React Query `isLoading` + **Skeleton** | 페이지·섹션·목록 **첫 로딩** (주력)        |
+| 3    | `isFetchingNextPage` + 인라인 스피너   | 무한 스크롤 **추가 로딩**                  |
+| 4    | Mutation `isPending`                   | 버튼·폼 제출·좋아요 등 **액션 로딩**       |
+| 5    | `Toast` `showSpinner`                  | 지역 변경 등 짧은 **피드백**               |
 
 **사용하지 않는 것**: `useSuspenseQuery`, Query `suspense: true`, `throwOnError: true`(주석 처리됨).
 
@@ -48,10 +48,10 @@
 
 **LoadingFallback** (`common/components/fallbacks/LoadingFallback.tsx`):
 
-| variant | 설명 |
-|---------|------|
-| `overlay` (기본) | 전체 화면 오버레이 + `loading-spinner-large` |
-| `corner` | 우측 하단 작은 스피너 (정의만 있음, **현재 미사용**) |
+| variant          | 설명                                                 |
+| ---------------- | ---------------------------------------------------- |
+| `overlay` (기본) | 전체 화면 오버레이 + `loading-spinner-large`         |
+| `corner`         | 우측 하단 작은 스피너 (정의만 있음, **현재 미사용**) |
 
 스피너 스타일: `common/styles/globals.css`의 `.loading-spinner-large`, `.loading-spinner-small`
 
@@ -86,11 +86,11 @@ if (isLoading) {
 
 **선택 가이드**:
 
-| 상황 | 권장 |
-|------|------|
-| 전체 페이지 첫 진입 | 전용 `*Skeleton` early return |
-| 목록·카드 일부 | `Skeleton` 또는 슬라이더 내 placeholder |
-| 버튼 한 번 누름 | `isPending` (아래 4번) |
+| 상황                | 권장                                    |
+| ------------------- | --------------------------------------- |
+| 전체 페이지 첫 진입 | 전용 `*Skeleton` early return           |
+| 목록·카드 일부      | `Skeleton` 또는 슬라이더 내 placeholder |
+| 버튼 한 번 누름     | `isPending` (아래 4번)                  |
 
 ### 3. 무한 스크롤 추가 로딩 (`isFetchingNextPage`)
 
@@ -257,11 +257,11 @@ try {
 
 ## 참고: seller/admin과의 차이
 
-| 항목 | web-user | web-seller / web-admin |
-|------|----------|-------------------------|
-| 본문 로딩 | Skeleton | `ContentLoading` + `LoadingSpinner` |
-| 앱 초기화 | `AuthProvider` (persist) | `AuthInitializerProvider` + `LoadingFallback` |
-| 무한 스크롤 하단 | 인라인 스피너 | seller: `InfiniteScrollLoading` |
-| 백그라운드 refetch | Header 등 지역 로직 | seller: `FetchStatusInline` |
+| 항목               | web-user                 | web-seller / web-admin                        |
+| ------------------ | ------------------------ | --------------------------------------------- |
+| 본문 로딩          | Skeleton                 | `ContentLoading` + `LoadingSpinner`           |
+| 앱 초기화          | `AuthProvider` (persist) | `AuthInitializerProvider` + `LoadingFallback` |
+| 무한 스크롤 하단   | 인라인 스피너            | seller: `InfiniteScrollLoading`               |
+| 백그라운드 refetch | Header 등 지역 로직      | seller: `FetchStatusInline`                   |
 
 통일이 필요하면 팀 합의 후 공통 패키지 또는 컴포넌트 추출을 검토합니다.

From 9a88252481949f60ee8b4abfed4c0bffc8462b3a Mon Sep 17 00:00:00 2001
From: geunu <olo90632951@gmail.com>
Date: Sun, 21 Jun 2026 11:18:06 +0900
Subject: [PATCH 17/41] =?UTF-8?q?[WEB-USER][UPDATE]:=20=EC=A7=80=EB=8F=84?=
 =?UTF-8?q?=20=EB=A1=9C=EB=94=A9=20=EC=83=81=ED=83=9C=20=EA=B4=80=EB=A6=AC?=
 =?UTF-8?q?=20=EC=B6=94=EA=B0=80=20=EB=B0=8F=20=ED=98=84=EC=9E=AC=EC=9C=84?=
 =?UTF-8?q?=EC=B9=98=20=EB=A7=88=EC=BB=A4=20=EA=B0=B1=EC=8B=A0=20=EB=A1=9C?=
 =?UTF-8?q?=EC=A7=81=20=EA=B0=9C=EC=84=A0.=20=EC=82=AC=EC=9A=A9=EC=9E=90?=
 =?UTF-8?q?=20=EC=9C=84=EC=B9=98=20=EB=B3=80=EA=B2=BD=20=EC=8B=9C=20?=
 =?UTF-8?q?=EB=A7=88=EC=BB=A4=20=EC=97=85=EB=8D=B0=EC=9D=B4=ED=8A=B8=20?=
 =?UTF-8?q?=EC=A1=B0=EA=B1=B4=EC=97=90=20=EC=A7=80=EB=8F=84=20=EC=A4=80?=
 =?UTF-8?q?=EB=B9=84=20=EC=83=81=ED=83=9C=20=EC=B6=94=EA=B0=80.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-user/src/app/map/page.tsx              | 17 ++++++++++++++---
 .../src/common/hooks/useUserLocation.ts         |  9 ++++++++-
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/apps/web-user/src/app/map/page.tsx b/apps/web-user/src/app/map/page.tsx
index a85ad19d..ce9e86a9 100644
--- a/apps/web-user/src/app/map/page.tsx
+++ b/apps/web-user/src/app/map/page.tsx
@@ -66,6 +66,7 @@ export default function MapPage() {
   const { location: userLocation, refresh: refreshUserLocation } = useUserLocation();
 
   const [kakaoLoaded, setKakaoLoaded] = useState(false);
+  const [mapReady, setMapReady] = useState(false);
   const [selectedStore, setSelectedStore] = useState<StoreInfo | null>(null);
   const [listSortBy, setListSortBy] = useState<MapListSortBy>("distance");
   const [listFilter, setListFilter] = useState<StoreListFilter>({});
@@ -435,11 +436,19 @@ export default function MapPage() {
     (center: { lat: number; lng: number }, suppressKakaoUnopenedMarkers: boolean) => {
       if (!window.kakao?.maps || !mapContainerRef.current || mapInstanceRef.current) return;
       window.kakao.maps.load(() => {
+        // userLocation 도착 전·후로 initializeMap이 중복 호출되면 load 콜백이 2번 실행될 수 있음
+        if (mapInstanceRef.current) return;
+
         const map = new window.kakao.maps.Map(mapContainerRef.current, {
           center: new window.kakao.maps.LatLng(center.lat, center.lng),
           level: 5,
         });
         mapInstanceRef.current = map;
+        setMapReady(true);
+
+        if (typeof map.relayout === "function") {
+          map.relayout();
+        }
 
         if (suppressKakaoUnopenedMarkers) clearKakaoMarkers();
         drawPlatformStoreMarkersRef.current();
@@ -453,6 +462,8 @@ export default function MapPage() {
         window.kakao.maps.event.addListener(map, "idle", () => {
           if (isCenteringFromClickRef.current) {
             isCenteringFromClickRef.current = false;
+            // panTo 직후 CustomOverlay가 보이지 않는 경우가 있어 이동 완료 시 현재위치 마커 재적용
+            updateUserLocationMarker(userLocationRef.current ?? null);
             return;
           }
           drawPlatformStoreMarkersRef.current();
@@ -548,11 +559,11 @@ export default function MapPage() {
     usedUserLocationForCenterRef.current = true;
   }, [userLocation, searchQuery, pickupFilter, searchPlaces]);
 
-  // 현재위치 변경 시 지도 위 현재위치 마커(점) 갱신
+  // 현재위치 변경 또는 지도 준비 완료 시 현재위치 마커(점) 갱신
   useEffect(() => {
-    if (!mapInstanceRef.current) return;
+    if (!mapReady || !mapInstanceRef.current) return;
     updateUserLocationMarker(userLocation ?? null);
-  }, [userLocation, updateUserLocationMarker]);
+  }, [userLocation, updateUserLocationMarker, mapReady]);
 
   // 플랫폼 스토어 전체 조회 후 캐시. 지도 있으면 마커 그리기, 검색 모드가 아니면 미입점 검색
   useEffect(() => {
diff --git a/apps/web-user/src/common/hooks/useUserLocation.ts b/apps/web-user/src/common/hooks/useUserLocation.ts
index c7f9785c..dfceaf53 100644
--- a/apps/web-user/src/common/hooks/useUserLocation.ts
+++ b/apps/web-user/src/common/hooks/useUserLocation.ts
@@ -1,6 +1,7 @@
 "use client";
 
 import { useState, useEffect, useCallback } from "react";
+import { useUserCurrentLocationStore } from "@/apps/web-user/common/store/user-current-location.store";
 import { isWebViewEnvironment } from "@/apps/web-user/common/utils/webview.bridge";
 
 interface UserLocation {
@@ -8,12 +9,18 @@ interface UserLocation {
   longitude: number;
 }
 
+function readStoredLocation(): UserLocation | null {
+  const { latitude, longitude } = useUserCurrentLocationStore.getState();
+  if (latitude == null || longitude == null) return null;
+  return { latitude, longitude };
+}
+
 /**
  * 사용자의 현재 위치를 가져오는 훅
  * 웹뷰 환경에서는 브릿지, 브라우저 환경에서는 Geolocation API 사용
  */
 export function useUserLocation() {
-  const [location, setLocation] = useState<UserLocation | null>(null);
+  const [location, setLocation] = useState<UserLocation | null>(() => readStoredLocation());
 
   const handleLocation = useCallback((latitude: number, longitude: number) => {
     setLocation({ latitude, longitude });

From c70fbd48c7d255247b26c5bd6437848ab78b91b4 Mon Sep 17 00:00:00 2001
From: geunu <olo90632951@gmail.com>
Date: Sun, 21 Jun 2026 11:38:10 +0900
Subject: [PATCH 18/41] =?UTF-8?q?[WEB-USER][UPDATE]:=20=ED=98=84=EC=9E=AC?=
 =?UTF-8?q?=EC=9C=84=EC=B9=98=20=EB=A7=88=EC=BB=A4=20=EB=A1=9C=EC=A7=81=20?=
 =?UTF-8?q?=EA=B0=9C=EC=84=A0.=20CustomOverlay=20=EB=8C=80=EC=8B=A0=20Mark?=
 =?UTF-8?q?er=EC=99=80=20MarkerImage=EB=A5=BC=20=EC=82=AC=EC=9A=A9?=
 =?UTF-8?q?=ED=95=98=EC=97=AC=20=EB=A7=88=EC=BB=A4=20=ED=91=9C=EC=8B=9C=20?=
 =?UTF-8?q?=EB=B0=A9=EC=8B=9D=EC=9D=84=20=EC=B5=9C=EC=A0=81=ED=99=94?=
 =?UTF-8?q?=ED=95=98=EA=B3=A0,=20=EB=A7=88=EC=BB=A4=20=EC=83=81=ED=83=9C?=
 =?UTF-8?q?=20=EA=B4=80=EB=A6=AC=20=EB=A1=9C=EC=A7=81=EC=9D=84=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95=ED=96=88=EC=8A=B5=EB=8B=88=EB=8B=A4.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-user/src/app/map/page.tsx | 48 ++++++++++++++++++++----------
 1 file changed, 32 insertions(+), 16 deletions(-)

diff --git a/apps/web-user/src/app/map/page.tsx b/apps/web-user/src/app/map/page.tsx
index ce9e86a9..34736cdc 100644
--- a/apps/web-user/src/app/map/page.tsx
+++ b/apps/web-user/src/app/map/page.tsx
@@ -125,7 +125,8 @@ export default function MapPage() {
   const selectedMarkerRef = useRef<any | null>(null);
   const isCenteringFromClickRef = useRef(false); // 마커 클릭으로 panTo 한 직후 idle에서 재처리 방지
   const usedUserLocationForCenterRef = useRef(false); // 이미 현재위치로 중심 잡았는지
-  const userLocationOverlayRef = useRef<any | null>(null);
+  const userLocationMarkerRef = useRef<any | null>(null); // 현재위치(파란 점) 마커
+  const userLocationMarkerImageRef = useRef<any | null>(null); // 현재위치 마커 이미지(1회 생성 후 재사용)
   const userLocationRef = useRef<{ latitude: number; longitude: number } | null>(null); // load 콜백에서 최신 위치 참조용
   const searchQueryRef = useRef<string | null>(searchQuery);
   const pickupFilterRef = useRef<MapPickupFilter | null>(pickupFilter);
@@ -302,25 +303,42 @@ export default function MapPage() {
     return () => window.clearInterval(id);
   }, []);
 
-  /** 현재위치 오버레이(점) 표시/제거 */
+  /**
+   * 현재위치(파란 점) 마커 표시/제거.
+   * CustomOverlay(HTML img)는 지도 생성 직후·panTo 도중 렌더되지 않는 카카오 타이밍 이슈가 있어
+   * 스토어 마커와 동일하게 Marker + MarkerImage로 그린다.
+   */
   const updateUserLocationMarker = useCallback(
     (location: { latitude: number; longitude: number } | null) => {
       const map = mapInstanceRef.current;
       if (!window.kakao?.maps || !map) return;
-      if (userLocationOverlayRef.current) {
-        userLocationOverlayRef.current.setMap(null);
-        userLocationOverlayRef.current = null;
+      if (!location) {
+        if (userLocationMarkerRef.current) {
+          userLocationMarkerRef.current.setMap(null);
+          userLocationMarkerRef.current = null;
+        }
+        return;
       }
-      if (!location) return;
       const position = new window.kakao.maps.LatLng(location.latitude, location.longitude);
-      userLocationOverlayRef.current = new window.kakao.maps.CustomOverlay({
-        map,
-        position,
-        content:
-          '<img src="/images/contents/map-current-position.png" alt="현재 위치" style="width:34px;height:34px;pointer-events:none;display:block" />',
-        yAnchor: 0.5,
-        xAnchor: 0.5,
-      });
+      if (!userLocationMarkerImageRef.current) {
+        userLocationMarkerImageRef.current = new window.kakao.maps.MarkerImage(
+          "/images/contents/map-current-position.png",
+          new window.kakao.maps.Size(34, 34),
+          { offset: new window.kakao.maps.Point(17, 17) }, // 좌표가 점 중앙에 오도록
+        );
+      }
+      if (userLocationMarkerRef.current) {
+        userLocationMarkerRef.current.setPosition(position);
+        userLocationMarkerRef.current.setMap(map);
+      } else {
+        userLocationMarkerRef.current = new window.kakao.maps.Marker({
+          map,
+          position,
+          image: userLocationMarkerImageRef.current,
+          clickable: false,
+          zIndex: 1, // 스토어 마커 위에 항상 보이도록
+        });
+      }
     },
     [],
   );
@@ -462,8 +480,6 @@ export default function MapPage() {
         window.kakao.maps.event.addListener(map, "idle", () => {
           if (isCenteringFromClickRef.current) {
             isCenteringFromClickRef.current = false;
-            // panTo 직후 CustomOverlay가 보이지 않는 경우가 있어 이동 완료 시 현재위치 마커 재적용
-            updateUserLocationMarker(userLocationRef.current ?? null);
             return;
           }
           drawPlatformStoreMarkersRef.current();

From 51627eed44322b7e86a37c2dcad78d11f7b8fb9c Mon Sep 17 00:00:00 2001
From: geunu <olo90632951@gmail.com>
Date: Sun, 21 Jun 2026 11:56:28 +0900
Subject: [PATCH 19/41] =?UTF-8?q?[WEB-SELLER][UPDATE]:=20=EC=83=81?=
 =?UTF-8?q?=ED=92=88=20=EB=AA=A9=EB=A1=9D=20=ED=8E=98=EC=9D=B4=EC=A7=80?=
 =?UTF-8?q?=EC=97=90=20=ED=95=84=ED=84=B0=20=EC=B4=88=EA=B8=B0=ED=99=94=20?=
 =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=EC=B6=94=EA=B0=80.=20=EC=82=AC=EC=9D=B4?=
 =?UTF-8?q?=EC=A6=88=20=EB=B0=8F=20=EC=B9=B4=ED=85=8C=EA=B3=A0=EB=A6=AC=20?=
 =?UTF-8?q?=EC=B4=88=EA=B8=B0=ED=99=94=20=EA=B8=B0=EB=8A=A5=EC=9D=84=20?=
 =?UTF-8?q?=EA=B5=AC=ED=98=84=ED=95=98=EC=97=AC=20=EC=82=AC=EC=9A=A9?=
 =?UTF-8?q?=EC=9E=90=20=EA=B2=BD=ED=97=98=EC=9D=84=20=EA=B0=9C=EC=84=A0?=
 =?UTF-8?q?=ED=96=88=EC=8A=B5=EB=8B=88=EB=8B=A4.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/pages/store/detail/products/List.tsx  | 22 +++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/apps/web-seller/src/pages/store/detail/products/List.tsx b/apps/web-seller/src/pages/store/detail/products/List.tsx
index 01dd7d3a..7b2994b1 100644
--- a/apps/web-seller/src/pages/store/detail/products/List.tsx
+++ b/apps/web-seller/src/pages/store/detail/products/List.tsx
@@ -62,6 +62,14 @@ export const StoreDetailProductListPage: React.FC = () => {
     setSizes([]);
   }, []);
 
+  const handleResetSizes = useCallback(() => {
+    setSizes([]);
+  }, []);
+
+  const handleResetCategories = useCallback(() => {
+    setProductCategoryTypes([]);
+  }, []);
+
   const hasActiveFilters =
     search.trim() !== "" ||
     salesStatus !== undefined ||
@@ -117,13 +125,23 @@ export const StoreDetailProductListPage: React.FC = () => {
       <div className="space-y-4 rounded-lg border bg-card p-4">
         {/* 통계 및 정렬 */}
         <div className="flex flex-wrap items-center justify-between gap-4">
-          <div className="flex items-center gap-4">
+          <div className="flex flex-wrap items-center gap-2">
             <div className="text-sm text-muted-foreground">
               총 <span className="font-semibold text-foreground">{totalItems}</span>개의 상품
             </div>
             {hasActiveFilters && (
               <Button variant="outline" size="sm" onClick={handleResetFilters}>
-                필터 초기화
+                전체 초기화
+              </Button>
+            )}
+            {sizes.length > 0 && (
+              <Button variant="outline" size="sm" onClick={handleResetSizes}>
+                사이즈 초기화
+              </Button>
+            )}
+            {productCategoryTypes.length > 0 && (
+              <Button variant="outline" size="sm" onClick={handleResetCategories}>
+                카테고리 초기화
               </Button>
             )}
           </div>

From e721227f33b24773c049393d50bda838b1bad8a0 Mon Sep 17 00:00:00 2001
From: geunu <olo90632951@gmail.com>
Date: Sun, 21 Jun 2026 12:04:56 +0900
Subject: [PATCH 20/41] =?UTF-8?q?[WEB-SELLER][UPDATE]:=20=EC=83=81?=
 =?UTF-8?q?=ED=92=88=20=EC=83=9D=EC=84=B1=20=ED=8F=BC=EC=97=90=20=EA=B8=B0?=
 =?UTF-8?q?=EB=B3=B8=20=EC=BC=80=EC=9D=B4=ED=81=AC=20=EC=82=AC=EC=9D=B4?=
 =?UTF-8?q?=EC=A6=88=20=EB=B0=8F=20=EB=A7=9B=20=EC=98=B5=EC=85=98=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80.=20=EC=82=AC=EC=9A=A9=EC=9E=90=EC=97=90?=
 =?UTF-8?q?=EA=B2=8C=20=EC=84=A0=ED=83=9D=20=EA=B0=80=EB=8A=A5=ED=95=9C=20?=
 =?UTF-8?q?=EC=98=B5=EC=85=98=EC=9D=84=20=EC=A0=9C=EA=B3=B5=ED=95=98?=
 =?UTF-8?q?=EC=97=AC=20=EC=A0=9C=ED=92=88=20=EB=93=B1=EB=A1=9D=20=ED=94=84?=
 =?UTF-8?q?=EB=A1=9C=EC=84=B8=EC=8A=A4=EB=A5=BC=20=EA=B0=9C=EC=84=A0?=
 =?UTF-8?q?=ED=96=88=EC=8A=B5=EB=8B=88=EB=8B=A4.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/forms/ProductCreationForm.tsx  | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/apps/web-seller/src/features/product/components/forms/ProductCreationForm.tsx b/apps/web-seller/src/features/product/components/forms/ProductCreationForm.tsx
index 6deb36f6..20aa0e37 100644
--- a/apps/web-seller/src/features/product/components/forms/ProductCreationForm.tsx
+++ b/apps/web-seller/src/features/product/components/forms/ProductCreationForm.tsx
@@ -13,6 +13,7 @@ import {
   CakeSizeOptionDto,
   CakeFlavorOptionDto,
   ProductCategoryType,
+  CakeSizeDisplayName,
 } from "@/apps/web-seller/features/product/types/product.dto";
 import type { ProductForm } from "@/apps/web-seller/features/product/types/product.ui";
 import { ProductCreationBasicInfoSection } from "@/apps/web-seller/features/product/components/sections/ProductCreationBasicInfoSection";
@@ -38,8 +39,22 @@ export const defaultForm: ProductForm = {
   salePrice: 0,
   salesStatus: EnableStatus.ENABLE,
   visibilityStatus: EnableStatus.ENABLE,
-  cakeSizeOptions: [],
-  cakeFlavorOptions: [],
+  cakeSizeOptions: [
+    {
+      visible: EnableStatus.ENABLE,
+      displayName: CakeSizeDisplayName.DOSIRAK,
+      lengthCm: 0,
+      price: 0,
+      description: "1~2인용",
+    },
+  ],
+  cakeFlavorOptions: [
+    {
+      visible: EnableStatus.ENABLE,
+      displayName: "초콜릿",
+      price: 0,
+    },
+  ],
   letteringVisible: EnableStatus.ENABLE,
   letteringRequired: OptionRequired.OPTIONAL,
   letteringMaxLength: 0,

From 24a52daf37ebe33c94ece52c2267ce5975b5d1a0 Mon Sep 17 00:00:00 2001
From: geunu <olo90632951@gmail.com>
Date: Sun, 21 Jun 2026 13:01:19 +0900
Subject: [PATCH 21/41] =?UTF-8?q?[WEB-SELLER][UPDATE]:=20=EC=83=81?=
 =?UTF-8?q?=ED=92=88=20=EC=83=9D=EC=84=B1=20=ED=8F=BC=EC=9D=98=20=EB=A0=88?=
 =?UTF-8?q?=ED=84=B0=EB=A7=81=20=EC=B5=9C=EB=8C=80=20=EA=B8=80=EC=9E=90=20?=
 =?UTF-8?q?=EC=88=98=EB=A5=BC=200=EC=97=90=EC=84=9C=201=EB=A1=9C=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD=ED=95=98=EA=B3=A0,=20=EB=A0=88=ED=84=B0?=
 =?UTF-8?q?=EB=A7=81=20=ED=91=9C=EC=8B=9C=20=EC=97=AC=EB=B6=80=EC=97=90=20?=
 =?UTF-8?q?=EB=94=B0=EB=9D=BC=20=ED=95=84=EC=88=98=20=EC=97=AC=EB=B6=80=20?=
 =?UTF-8?q?=EB=B0=8F=20=EC=B5=9C=EB=8C=80=20=EA=B8=80=EC=9E=90=20=EC=88=98?=
 =?UTF-8?q?=20=EC=9E=85=EB=A0=A5=20=ED=95=84=EB=93=9C=EB=A5=BC=20=EC=A1=B0?=
 =?UTF-8?q?=EA=B1=B4=EB=B6=80=EB=A1=9C=20=ED=91=9C=EC=8B=9C=ED=95=98?=
 =?UTF-8?q?=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95=ED=96=88=EC=8A=B5?=
 =?UTF-8?q?=EB=8B=88=EB=8B=A4.=20=EC=9C=A0=ED=9A=A8=EC=84=B1=20=EA=B2=80?=
 =?UTF-8?q?=EC=82=AC=20=EB=A1=9C=EC=A7=81=EB=8F=84=20=EC=97=85=EB=8D=B0?=
 =?UTF-8?q?=EC=9D=B4=ED=8A=B8=ED=95=98=EC=97=AC=20=EC=B5=9C=EB=8C=80=20?=
 =?UTF-8?q?=EA=B8=80=EC=9E=90=20=EC=88=98=EA=B0=80=201=20=EB=AF=B8?=
 =?UTF-8?q?=EB=A7=8C=EC=9D=BC=20=EA=B2=BD=EC=9A=B0=20=EC=98=A4=EB=A5=98=20?=
 =?UTF-8?q?=EB=A9=94=EC=8B=9C=EC=A7=80=EB=A5=BC=20=EC=B6=94=EA=B0=80?=
 =?UTF-8?q?=ED=96=88=EC=8A=B5=EB=8B=88=EB=8B=A4.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/forms/ProductCreationForm.tsx  | 10 +++-
 .../ProductCreationLetteringPolicySection.tsx | 56 ++++++++++---------
 .../product/utils/validateProductForm.ts      |  5 ++
 3 files changed, 43 insertions(+), 28 deletions(-)

diff --git a/apps/web-seller/src/features/product/components/forms/ProductCreationForm.tsx b/apps/web-seller/src/features/product/components/forms/ProductCreationForm.tsx
index 20aa0e37..0281af15 100644
--- a/apps/web-seller/src/features/product/components/forms/ProductCreationForm.tsx
+++ b/apps/web-seller/src/features/product/components/forms/ProductCreationForm.tsx
@@ -57,7 +57,7 @@ export const defaultForm: ProductForm = {
   ],
   letteringVisible: EnableStatus.ENABLE,
   letteringRequired: OptionRequired.OPTIONAL,
-  letteringMaxLength: 0,
+  letteringMaxLength: 1,
   imageUploadEnabled: EnableStatus.ENABLE,
   productCategoryTypes: [],
   searchTags: [],
@@ -174,7 +174,13 @@ export const ProductCreationForm: React.FC<Props> = ({
   };
 
   const handleLetteringVisibleChange = (value: EnableStatus) => {
-    const next = { ...form, letteringVisible: value };
+    const next = {
+      ...form,
+      letteringVisible: value,
+      ...(value === EnableStatus.ENABLE && form.letteringMaxLength < 1
+        ? { letteringMaxLength: 1 }
+        : {}),
+    };
     setForm(next);
     onChange?.(next);
   };
diff --git a/apps/web-seller/src/features/product/components/sections/ProductCreationLetteringPolicySection.tsx b/apps/web-seller/src/features/product/components/sections/ProductCreationLetteringPolicySection.tsx
index 5717e183..757d3d25 100644
--- a/apps/web-seller/src/features/product/components/sections/ProductCreationLetteringPolicySection.tsx
+++ b/apps/web-seller/src/features/product/components/sections/ProductCreationLetteringPolicySection.tsx
@@ -50,33 +50,37 @@ export const ProductCreationLetteringPolicySection: React.FC<
             />
           </div>
 
-          <div>
-            <SelectBox
-              label="레터링 문구 필수 여부"
-              value={form.letteringRequired}
-              onChange={(value) => onLetteringRequiredChange(value as OptionRequired)}
-              options={OPTION_REQUIRED_OPTIONS}
-              error={errors.letteringRequired}
-              required
-            />
-          </div>
+          {form.letteringVisible === EnableStatus.ENABLE && (
+            <>
+              <div>
+                <SelectBox
+                  label="레터링 문구 필수 여부"
+                  value={form.letteringRequired}
+                  onChange={(value) => onLetteringRequiredChange(value as OptionRequired)}
+                  options={OPTION_REQUIRED_OPTIONS}
+                  error={errors.letteringRequired}
+                  required
+                />
+              </div>
 
-          <div>
-            <Label className="after:content-['*'] after:ml-0.5 after:text-destructive">
-              최대 글자 수
-            </Label>
-            <NumberInput
-              value={form.letteringMaxLength}
-              onChange={(v) => onLetteringMaxLengthChange(v ?? 0)}
-              placeholder=""
-              min={0}
-              className={errors.letteringMaxLength ? "border-destructive" : ""}
-              disabled={disabled}
-            />
-            {errors.letteringMaxLength && (
-              <p className="text-sm text-destructive mt-1">{errors.letteringMaxLength}</p>
-            )}
-          </div>
+              <div>
+                <Label className="after:content-['*'] after:ml-0.5 after:text-destructive">
+                  최대 글자 수
+                </Label>
+                <NumberInput
+                  value={form.letteringMaxLength}
+                  onChange={(v) => onLetteringMaxLengthChange(v ?? 0)}
+                  placeholder=""
+                  min={1}
+                  className={errors.letteringMaxLength ? "border-destructive" : ""}
+                  disabled={disabled}
+                />
+                {errors.letteringMaxLength && (
+                  <p className="text-sm text-destructive mt-1">{errors.letteringMaxLength}</p>
+                )}
+              </div>
+            </>
+          )}
 
           <div>
             <SelectBox
diff --git a/apps/web-seller/src/features/product/utils/validateProductForm.ts b/apps/web-seller/src/features/product/utils/validateProductForm.ts
index 6d88cafe..87f3d611 100644
--- a/apps/web-seller/src/features/product/utils/validateProductForm.ts
+++ b/apps/web-seller/src/features/product/utils/validateProductForm.ts
@@ -1,3 +1,4 @@
+import { EnableStatus } from "@/apps/web-seller/features/product/types/product.dto";
 import type { ProductForm } from "@/apps/web-seller/features/product/types/product.ui";
 
 export const validateProductForm = (
@@ -40,6 +41,10 @@ export const validateProductForm = (
     newErrors.salePrice = "판매가는 정가보다 클 수 없습니다.";
   }
 
+  if (form.letteringVisible === EnableStatus.ENABLE && form.letteringMaxLength < 1) {
+    newErrors.letteringMaxLength = "최대 글자 수는 1 이상 입력해주세요.";
+  }
+
   // 상품정보제공고시 검증
   if (!form.productNoticeFoodType?.trim()) {
     newErrors.productNoticeFoodType = "식품의 유형을 입력해주세요.";

From aacc8b22e8bf17992557d566d130169aa6918684 Mon Sep 17 00:00:00 2001
From: geunu <olo90632951@gmail.com>
Date: Sun, 21 Jun 2026 13:12:04 +0900
Subject: [PATCH 22/41] =?UTF-8?q?[WEB-SELLER][ADD]:=20=EC=A3=BC=EB=AC=B8?=
 =?UTF-8?q?=20=EC=83=81=ED=83=9C=20=EC=95=88=EB=82=B4=20=EB=B2=84=ED=8A=BC?=
 =?UTF-8?q?=20=EB=B0=8F=20=EB=AA=A8=EB=8B=AC=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20=EC=B6=94=EA=B0=80.=20=EC=A3=BC=EB=AC=B8=20?=
 =?UTF-8?q?=EC=83=81=EC=84=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80=EC=99=80=20?=
 =?UTF-8?q?=EB=AA=A9=EB=A1=9D=20=ED=8E=98=EC=9D=B4=EC=A7=80=EC=97=90=20?=
 =?UTF-8?q?=EC=83=81=ED=83=9C=20=EC=95=88=EB=82=B4=20=EA=B8=B0=EB=8A=A5?=
 =?UTF-8?q?=EC=9D=84=20=ED=86=B5=ED=95=A9=ED=95=98=EC=97=AC=20=EC=82=AC?=
 =?UTF-8?q?=EC=9A=A9=EC=9E=90=20=EA=B2=BD=ED=97=98=EC=9D=84=20=EA=B0=9C?=
 =?UTF-8?q?=EC=84=A0=ED=96=88=EC=8A=B5=EB=8B=88=EB=8B=A4.=20=EC=83=81?=
 =?UTF-8?q?=ED=83=9C=EB=B3=84=20=EC=95=88=EB=82=B4=20=EB=AC=B8=EA=B5=AC?=
 =?UTF-8?q?=EB=A5=BC=20=ED=8F=AC=ED=95=A8=ED=95=9C=20=EC=83=88=EB=A1=9C?=
 =?UTF-8?q?=EC=9A=B4=20=EC=9C=A0=ED=8B=B8=EB=A6=AC=ED=8B=B0=20=ED=95=A8?=
 =?UTF-8?q?=EC=88=98=EB=8F=84=20=EC=B6=94=EA=B0=80=ED=96=88=EC=8A=B5?=
 =?UTF-8?q?=EB=8B=88=EB=8B=A4.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/OrderStatusGuideHelpButton.tsx | 32 +++++++
 .../components/OrderStatusGuideModal.tsx      | 87 +++++++++++++++++++
 .../utils/order-status-seller-guide.util.ts   | 51 +++++++++++
 .../src/pages/store/detail/orders/Detail.tsx  | 85 +++---------------
 .../src/pages/store/detail/orders/List.tsx    | 15 +++-
 5 files changed, 197 insertions(+), 73 deletions(-)
 create mode 100644 apps/web-seller/src/features/order/components/OrderStatusGuideHelpButton.tsx
 create mode 100644 apps/web-seller/src/features/order/components/OrderStatusGuideModal.tsx

diff --git a/apps/web-seller/src/features/order/components/OrderStatusGuideHelpButton.tsx b/apps/web-seller/src/features/order/components/OrderStatusGuideHelpButton.tsx
new file mode 100644
index 00000000..5ca72d2b
--- /dev/null
+++ b/apps/web-seller/src/features/order/components/OrderStatusGuideHelpButton.tsx
@@ -0,0 +1,32 @@
+import React from "react";
+import { CircleHelp } from "lucide-react";
+import { cn } from "@/apps/web-seller/common/utils/classname.util";
+
+interface OrderStatusGuideHelpButtonProps {
+  onClick: () => void;
+  className?: string;
+  ariaLabel?: string;
+  title?: string;
+}
+
+export const OrderStatusGuideHelpButton: React.FC<OrderStatusGuideHelpButtonProps> = ({
+  onClick,
+  className,
+  ariaLabel = "주문 상태 안내 보기",
+  title = "주문 상태 안내",
+}) => {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={cn(
+        "inline-flex shrink-0 items-center justify-center rounded-full p-0.5 text-slate-400 transition-colors hover:bg-slate-200/80 hover:text-slate-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35",
+        className,
+      )}
+      aria-label={ariaLabel}
+      title={title}
+    >
+      <CircleHelp className="h-4 w-4" strokeWidth={2} aria-hidden />
+    </button>
+  );
+};
diff --git a/apps/web-seller/src/features/order/components/OrderStatusGuideModal.tsx b/apps/web-seller/src/features/order/components/OrderStatusGuideModal.tsx
new file mode 100644
index 00000000..62897da6
--- /dev/null
+++ b/apps/web-seller/src/features/order/components/OrderStatusGuideModal.tsx
@@ -0,0 +1,87 @@
+import React, { useEffect } from "react";
+import { BaseButton as Button } from "@/apps/web-seller/common/components/buttons/BaseButton";
+import { X } from "lucide-react";
+import type { OrderStatusGuideItem } from "@/apps/web-seller/features/order/utils/order-status-seller-guide.util";
+
+interface OrderStatusGuideModalProps {
+  open: boolean;
+  onClose: () => void;
+  /** 스크린 리더용 (화면에는 표시하지 않음) */
+  ariaLabel?: string;
+  items?: readonly OrderStatusGuideItem[];
+  numberedLines?: readonly string[];
+}
+
+export const OrderStatusGuideModal: React.FC<OrderStatusGuideModalProps> = ({
+  open,
+  onClose,
+  ariaLabel = "주문 상태 안내",
+  items,
+  numberedLines,
+}) => {
+  useEffect(() => {
+    if (!open) return;
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [open, onClose]);
+
+  if (!open) return null;
+
+  return (
+    <div
+      className="fixed inset-0 z-[100] flex items-center justify-center p-4"
+      role="dialog"
+      aria-modal="true"
+      aria-label={ariaLabel}
+    >
+      <button
+        type="button"
+        className="absolute inset-0 bg-slate-900/45 backdrop-blur-[1px]"
+        onClick={onClose}
+        aria-label="안내 닫기"
+      />
+      <div
+        className="relative z-10 flex max-h-[min(88vh,720px)] w-full max-w-lg flex-col overflow-hidden rounded-lg border border-slate-300/90 bg-white shadow-2xl"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          className="absolute right-2 top-2 z-10 h-8 w-8 shrink-0 text-slate-500 hover:text-slate-900"
+          onClick={onClose}
+          aria-label="닫기"
+        >
+          <X className="h-4 w-4" />
+        </Button>
+        <div className="min-h-0 flex-1 overflow-y-auto px-4 pb-4 pt-10 sm:px-4">
+          {items && items.length > 0 && (
+            <ul className="space-y-3 text-[13px] leading-relaxed text-slate-700">
+              {items.map((item) => (
+                <li key={item.label}>
+                  <p className="font-semibold text-slate-800">{item.label}</p>
+                  <p className="mt-0.5">{item.description}</p>
+                </li>
+              ))}
+            </ul>
+          )}
+          {numberedLines && numberedLines.length > 0 && (
+            <ul className="space-y-2.5 text-[13px] leading-relaxed text-slate-700">
+              {numberedLines.map((line, i) => (
+                <li key={i} className="flex gap-3">
+                  <span className="mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full border border-slate-200 bg-slate-100 text-[11px] font-semibold text-slate-600">
+                    {i + 1}
+                  </span>
+                  <span>{line}</span>
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/apps/web-seller/src/features/order/utils/order-status-seller-guide.util.ts b/apps/web-seller/src/features/order/utils/order-status-seller-guide.util.ts
index ed4a3d0d..615c2a18 100644
--- a/apps/web-seller/src/features/order/utils/order-status-seller-guide.util.ts
+++ b/apps/web-seller/src/features/order/utils/order-status-seller-guide.util.ts
@@ -3,6 +3,12 @@
  * 입금 마감(픽업까지 남은 시간에 따라 최대 12h·6h·1h)·픽업 시각 도달 자동 전환 등은 백엔드 `order-automation`·`order-datetime.util` 규칙과 맞춥니다.
  */
 import { OrderStatus } from "@/apps/web-seller/features/order/types/order.dto";
+import { getOrderStatusLabel } from "@/apps/web-seller/features/order/utils/order-status-ui.util";
+
+export type OrderStatusGuideItem = {
+  label: string;
+  description: string;
+};
 
 /** 상태별 안내 문장 (상세 힌트·흐름 목록 공통) */
 export const ORDER_STATUS_SELLER_FLOW_LINE_BY_STATUS: Record<OrderStatus, string> = {
@@ -60,3 +66,48 @@ export function getOrderStatusSellerHintBody(status: OrderStatus): string {
   if (idx === -1) return full.trim();
   return full.slice(idx + 2).trim();
 }
+
+/** 주문 목록 등에서 노출하는 간단 상태 안내 */
+export const ORDER_STATUS_LIST_GUIDE_ITEMS: readonly OrderStatusGuideItem[] = [
+  {
+    label: getOrderStatusLabel(OrderStatus.RESERVATION_REQUESTED),
+    description:
+      "고객이 주문 예약 신청을 완료한 상태예요. 판매자의 확인 전 단계입니다.",
+  },
+  {
+    label: getOrderStatusLabel(OrderStatus.PAYMENT_PENDING),
+    description: "주문은 접수되었지만, 고객의 입금이 확인되지 않은 상태예요.",
+  },
+  {
+    label: getOrderStatusLabel(OrderStatus.PAYMENT_COMPLETED),
+    description: "고객의 입금이 정상적으로 확인된 상태예요.",
+  },
+  {
+    label: getOrderStatusLabel(OrderStatus.CONFIRMED),
+    description: "판매자가 주문 내용을 확인하고 제작/예약을 확정한 상태예요.",
+  },
+  {
+    label: getOrderStatusLabel(OrderStatus.PICKUP_PENDING),
+    description: "케이크 제작이 완료되었거나 픽업 준비 중인 상태예요.",
+  },
+  {
+    label: getOrderStatusLabel(OrderStatus.PICKUP_COMPLETED),
+    description: "고객이 케이크를 정상적으로 수령한 상태예요.",
+  },
+  {
+    label: getOrderStatusLabel(OrderStatus.CANCEL_REFUND_PENDING),
+    description: "고객의 취소 요청이 접수되어 환불 진행을 기다리는 상태예요.",
+  },
+  {
+    label: getOrderStatusLabel(OrderStatus.CANCEL_REFUND_COMPLETED),
+    description: "주문 취소 및 환불이 완료된 상태예요.",
+  },
+  {
+    label: getOrderStatusLabel(OrderStatus.CANCEL_COMPLETED),
+    description: "주문이 최종 취소 처리된 상태예요.",
+  },
+  {
+    label: getOrderStatusLabel(OrderStatus.NO_SHOW),
+    description: "픽업 예정 시간까지 고객이 방문하지 않은 상태예요.",
+  },
+];
diff --git a/apps/web-seller/src/pages/store/detail/orders/Detail.tsx b/apps/web-seller/src/pages/store/detail/orders/Detail.tsx
index 3ab8f1de..f310a734 100644
--- a/apps/web-seller/src/pages/store/detail/orders/Detail.tsx
+++ b/apps/web-seller/src/pages/store/detail/orders/Detail.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import { useParams } from "react-router-dom";
 import { useOrderDetail } from "@/apps/web-seller/features/order/hooks/queries/useOrderQuery";
 import { useUpdateOrderStatus } from "@/apps/web-seller/features/order/hooks/mutations/useOrderMutation";
@@ -19,6 +19,8 @@ import {
   getOrderStatusSellerHintBody,
   ORDER_STATUS_FLOW_LINES_FOR_SELLER,
 } from "@/apps/web-seller/features/order/utils/order-status-seller-guide.util";
+import { OrderStatusGuideHelpButton } from "@/apps/web-seller/features/order/components/OrderStatusGuideHelpButton";
+import { OrderStatusGuideModal } from "@/apps/web-seller/features/order/components/OrderStatusGuideModal";
 import { PaymentPendingCountdown } from "@/apps/web-seller/features/order/components/detail/PaymentPendingCountdown";
 import { OrderStatusFlowStepper } from "@/apps/web-seller/features/order/components/detail/OrderStatusFlowStepper";
 import { OrderDetailSpreadsheetView } from "@/apps/web-seller/features/order/components/detail/OrderDetailSpreadsheetView";
@@ -28,15 +30,12 @@ import {
   ORDER_DETAIL_PAGE_META,
   ORDER_DETAIL_PAGE_TITLE,
   ORDER_DETAIL_SHEET,
-  ORDER_DETAIL_SHEET_HEADER,
-  ORDER_DETAIL_SHEET_TITLE,
   ORDER_DETAIL_TD_BLOCK,
 } from "@/apps/web-seller/features/order/constants/order-detail-page.constant";
 import {
   SheetSectionRow,
   SheetTable,
 } from "@/apps/web-seller/features/order/components/detail/OrderDetailSheetTable";
-import { CircleHelp, X } from "lucide-react";
 import { cn } from "@/apps/web-seller/common/utils/classname.util";
 import { ContentLoading } from "@/apps/web-seller/common/components/loading/ContentLoading";
 
@@ -63,15 +62,6 @@ export const StoreDetailOrderDetailPage: React.FC = () => {
   const [reasonText, setReasonText] = useState("");
   const [flowGuideOpen, setFlowGuideOpen] = useState(false);
 
-  useEffect(() => {
-    if (!flowGuideOpen) return;
-    const onKeyDown = (e: KeyboardEvent) => {
-      if (e.key === "Escape") setFlowGuideOpen(false);
-    };
-    window.addEventListener("keydown", onKeyDown);
-    return () => window.removeEventListener("keydown", onKeyDown);
-  }, [flowGuideOpen]);
-
   if (!storeId || !orderId) {
     return (
       <div className="flex items-center justify-center py-12">
@@ -193,15 +183,12 @@ export const StoreDetailOrderDetailPage: React.FC = () => {
                       <StatusBadge variant={variant} className="text-xs font-semibold">
                         {getOrderStatusLabel(status)}
                       </StatusBadge>
-                      <button
-                        type="button"
+                      <OrderStatusGuideHelpButton
                         onClick={() => setFlowGuideOpen(true)}
-                        className="-m-0.5 inline-flex shrink-0 items-center justify-center rounded-full p-1 text-slate-400 transition-colors hover:bg-slate-200/80 hover:text-slate-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35"
-                        aria-label="상태별 상세 안내 전체 흐름 보기"
+                        className="p-1"
+                        ariaLabel="상태별 상세 안내 전체 흐름 보기"
                         title="상태별 상세 안내 · 전체 흐름"
-                      >
-                        <CircleHelp className="h-[17px] w-[17px]" strokeWidth={2} aria-hidden />
-                      </button>
+                      />
                     </div>
                     <p className={cn(ORDER_DETAIL_BODY, "min-w-0 flex-1")}>
                       {getOrderStatusSellerHintBody(status)}
@@ -373,58 +360,12 @@ export const StoreDetailOrderDetailPage: React.FC = () => {
         onReferenceImageClick={(url) => setLightboxImage(url)}
       />
 
-      {flowGuideOpen && (
-        <div
-          className="fixed inset-0 z-[100] flex items-center justify-center p-4"
-          role="dialog"
-          aria-modal="true"
-          aria-labelledby="order-flow-guide-title"
-        >
-          <button
-            type="button"
-            className="absolute inset-0 bg-slate-900/45 backdrop-blur-[1px]"
-            onClick={() => setFlowGuideOpen(false)}
-            aria-label="안내 닫기"
-          />
-          <div
-            className="relative z-10 flex max-h-[min(88vh,720px)] w-full max-w-lg flex-col overflow-hidden rounded-lg border border-slate-300/90 bg-white shadow-2xl"
-            onClick={(e) => e.stopPropagation()}
-          >
-            <div
-              className={cn(
-                ORDER_DETAIL_SHEET_HEADER,
-                "flex shrink-0 items-center justify-between gap-3",
-              )}
-            >
-              <h2 id="order-flow-guide-title" className={ORDER_DETAIL_SHEET_TITLE}>
-                상태별 상세 안내 · 전체 흐름
-              </h2>
-              <Button
-                type="button"
-                variant="ghost"
-                size="icon"
-                className="h-9 w-9 shrink-0 text-slate-500 hover:text-slate-900"
-                onClick={() => setFlowGuideOpen(false)}
-                aria-label="닫기"
-              >
-                <X className="h-4 w-4" />
-              </Button>
-            </div>
-            <div className="min-h-0 flex-1 overflow-y-auto px-4 py-3 sm:px-4">
-              <ul className="space-y-2.5 text-[13px] leading-relaxed text-slate-700">
-                {ORDER_STATUS_FLOW_LINES_FOR_SELLER.map((line, i) => (
-                  <li key={i} className="flex gap-3">
-                    <span className="mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full border border-slate-200 bg-slate-100 text-[11px] font-semibold text-slate-600">
-                      {i + 1}
-                    </span>
-                    <span>{line}</span>
-                  </li>
-                ))}
-              </ul>
-            </div>
-          </div>
-        </div>
-      )}
+      <OrderStatusGuideModal
+        open={flowGuideOpen}
+        onClose={() => setFlowGuideOpen(false)}
+        ariaLabel="상태별 상세 안내 · 전체 흐름"
+        numberedLines={ORDER_STATUS_FLOW_LINES_FOR_SELLER}
+      />
 
       {lightboxImage && (
         <ImageLightbox
diff --git a/apps/web-seller/src/pages/store/detail/orders/List.tsx b/apps/web-seller/src/pages/store/detail/orders/List.tsx
index 83917fd2..79d9a288 100644
--- a/apps/web-seller/src/pages/store/detail/orders/List.tsx
+++ b/apps/web-seller/src/pages/store/detail/orders/List.tsx
@@ -18,6 +18,9 @@ import {
   OrderType,
 } from "@/apps/web-seller/features/order/types/order.dto";
 import { ORDER_STATUS_FILTER_OPTIONS } from "@/apps/web-seller/features/order/utils/order-status-ui.util";
+import { ORDER_STATUS_LIST_GUIDE_ITEMS } from "@/apps/web-seller/features/order/utils/order-status-seller-guide.util";
+import { OrderStatusGuideHelpButton } from "@/apps/web-seller/features/order/components/OrderStatusGuideHelpButton";
+import { OrderStatusGuideModal } from "@/apps/web-seller/features/order/components/OrderStatusGuideModal";
 import { useDebouncedValue } from "@/apps/web-seller/common/hooks/useDebouncedValue";
 import { ContentLoading } from "@/apps/web-seller/common/components/loading/ContentLoading";
 
@@ -35,6 +38,7 @@ export const StoreDetailOrderListPage: React.FC = () => {
   const [endDate, setEndDate] = useState<string>("");
   const [pickupStartDate, setPickupStartDate] = useState<string>("");
   const [pickupEndDate, setPickupEndDate] = useState<string>("");
+  const [statusGuideOpen, setStatusGuideOpen] = useState(false);
 
   // 주문 번호 검색 debounce (과도한 API 호출 방지)
   const debouncedOrderNumber = useDebouncedValue(orderNumber, DEBOUNCE_DELAY_MS);
@@ -147,7 +151,10 @@ export const StoreDetailOrderListPage: React.FC = () => {
 
           {/* 주문 상태 필터 */}
           <div className="min-w-0 space-y-1">
-            <Label>주문 상태</Label>
+            <Label className="inline-flex items-center gap-1">
+              주문 상태
+              <OrderStatusGuideHelpButton onClick={() => setStatusGuideOpen(true)} />
+            </Label>
             <Select
               value={orderStatus || "ALL"}
               onValueChange={(value) =>
@@ -253,6 +260,12 @@ export const StoreDetailOrderListPage: React.FC = () => {
           )}
         </>
       )}
+
+      <OrderStatusGuideModal
+        open={statusGuideOpen}
+        onClose={() => setStatusGuideOpen(false)}
+        items={ORDER_STATUS_LIST_GUIDE_ITEMS}
+      />
     </div>
   );
 };

From 2df0598fb30f3b9cd544d992da866aa853797496 Mon Sep 17 00:00:00 2001
From: geunu <olo90632951@gmail.com>
Date: Sun, 21 Jun 2026 13:14:17 +0900
Subject: [PATCH 23/41] =?UTF-8?q?[WEB-SELLER][UPDATE]:=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95=EB=90=9C=20=EC=8A=A4=ED=86=A0=EC=96=B4=20=EC=83=81?=
 =?UTF-8?q?=EC=84=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=84=A4=EB=B9=84?=
 =?UTF-8?q?=EA=B2=8C=EC=9D=B4=EC=85=98=20=EA=B2=BD=EB=A1=9C=EB=A5=BC=20?=
 =?UTF-8?q?=ED=99=88=EC=97=90=EC=84=9C=20=EC=BA=98=EB=A6=B0=EB=8D=94?=
 =?UTF-8?q?=EB=A1=9C=20=EB=B3=80=EA=B2=BD=ED=95=98=EC=97=AC=20=EC=82=AC?=
 =?UTF-8?q?=EC=9A=A9=EC=9E=90=20=EA=B2=BD=ED=97=98=EC=9D=84=20=EA=B0=9C?=
 =?UTF-8?q?=EC=84=A0=ED=96=88=EC=8A=B5=EB=8B=88=EB=8B=A4.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/features/store/hooks/mutations/useStoreMutation.ts      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web-seller/src/features/store/hooks/mutations/useStoreMutation.ts b/apps/web-seller/src/features/store/hooks/mutations/useStoreMutation.ts
index fa72c885..3d221f4d 100644
--- a/apps/web-seller/src/features/store/hooks/mutations/useStoreMutation.ts
+++ b/apps/web-seller/src/features/store/hooks/mutations/useStoreMutation.ts
@@ -26,7 +26,7 @@ export function useCreateStore() {
       });
       // 스토어 쿼리 무효화
       queryClient.invalidateQueries({ queryKey: storeQueryKeys.all });
-      navigate(ROUTES.STORE_DETAIL_HOME(response.id));
+      navigate(ROUTES.STORE_DETAIL_CALENDAR(response.id));
     },
     onError: (error) => {
       addAlert({

From 1ac5974666522a209a79102fef155b4f01e55983 Mon Sep 17 00:00:00 2001
From: jangchanwoo <wkdcksdn1996@gmail.com>
Date: Sun, 21 Jun 2026 13:32:06 +0900
Subject: [PATCH 24/41] =?UTF-8?q?[WEB-USER][QA]=20=EC=A7=80=EC=97=AD=20?=
 =?UTF-8?q?=EC=8B=9C=ED=8A=B8=C2=B7=ED=97=A4=EB=8D=94=20=EC=9C=84=EC=B9=98?=
 =?UTF-8?q?=20=ED=86=A0=EC=8A=A4=ED=8A=B8=20=EB=8F=99=EC=9E=91=20=EA=B0=9C?=
 =?UTF-8?q?=EC=84=A0=20=EB=B0=8F=20=EC=BC=80=EC=9D=B4=ED=81=AC=20=EC=B9=B4?=
 =?UTF-8?q?=EB=93=9C=20=EC=B9=A9=20=EC=8A=A4=ED=86=A0=EC=96=B4=20=EC=9D=B4?=
 =?UTF-8?q?=EB=8F=99=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- CakeListItem: 픽업주소·생산자 칩 클릭 시 해당 스토어 페이지로 이동
- Header:
  - 같은 지역으로 재선택 시 "위치 설정 중" 토스트가 10초간 멈춰 있던 버그 수정
  - GPS 비활성 지역 모달 표시 경로를 Header 단일 지점으로 일원화 (RegionSelectSheet에서 onGpsInactive 콜백으로 위임)
  - 로딩 토스트 onClose에서 state 정리 추가
- RegionSelectSheet:
  - 비활성 모달 로직 제거 (Header로 위임)
  - "현재 위치로 설정" 클릭 시 stale address로 잘못 매칭되던 버그 가드
  - 동일 위치 재클릭 시 setAddress no-op으로 useEffect가 미발화되던 케이스를 GPS 콜백 안에서 직접 처리하도록 변경
  - depth1 탭 전환 시 다른 탭 체크 상태가 유지되도록 Map 구조로 변경
  - 다른 depth1에서 새 체크가 발생하면 이전 depth1의 체크를 비우는 단일 depth1 invariant 적용
  - 좌측 depth1 배지를 활성 구 갯수 → 선택된 갯수로 변경 (0이면 비표시, 전부 체크 시 ALL)
  - "전지역" 버튼 표시 조건 활성 구 3개 → 2개 이상으로 완화

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../src/common/components/headers/Header.tsx  |  41 +-
 .../components/headers/RegionSelectSheet.tsx  | 419 +++++++++---------
 .../product/components/cards/CakeListItem.tsx |  16 +-
 3 files changed, 251 insertions(+), 225 deletions(-)

diff --git a/apps/web-user/src/common/components/headers/Header.tsx b/apps/web-user/src/common/components/headers/Header.tsx
index 47211ca7..9bd5a050 100644
--- a/apps/web-user/src/common/components/headers/Header.tsx
+++ b/apps/web-user/src/common/components/headers/Header.tsx
@@ -137,11 +137,41 @@ export default function Header({ variant = "main", title, onBackClick }: HeaderP
   // 근처매장보기: 가장 가까운 활성 지역으로 override
   const handleInactiveConfirm = () => {
     if (inactiveModal.nearest) {
+      const effectiveRegion =
+        overrideResult ?? ((matchResult?.storeCount ?? 0) > 0 ? matchResult : null);
+      if (effectiveRegion?.label !== inactiveModal.nearest.label) {
+        isRegionChanging.current = true;
+        setRegionToast("loading");
+      }
       setOverrideResult(inactiveModal.nearest);
     }
     setInactiveModal((prev) => ({ ...prev, visible: false }));
   };
 
+  // RegionSelectSheet에서 "현재 위치로 설정" 클릭 → GPS가 비활성 지역을 잡았을 때 호출.
+  // 저장된 override 때문에 Header.tsx의 자동 effect가 모달을 띄우지 못하는 경우를 보완하기 위해
+  // 모달을 강제로 띄움.
+  const handleGpsInactive = (result: RegionMatchResult) => {
+    if (!regionsData?.regions) return;
+    const isSeoul = result.depth1Label === "서울";
+    if (isSeoul) {
+      const nearest = findNearestActiveRegion(
+        regionsData.regions,
+        result.depth1Label,
+        latitude,
+        longitude,
+      );
+      setInactiveModal({ visible: true, type: "seoul", currentLabel: result.label, nearest });
+    } else {
+      setInactiveModal({
+        visible: true,
+        type: "outside",
+        currentLabel: result.depth1Label,
+        nearest: null,
+      });
+    }
+  };
+
   // 취소: 강남구(디폴트)로 리셋
   const handleInactiveCancel = () => {
     setAddress("서울특별시 강남구");
@@ -317,10 +347,15 @@ export default function Header({ variant = "main", title, onBackClick }: HeaderP
           regions={regionsData.regions}
           currentResult={overrideResult ?? matchResult}
           onSelect={(result) => {
-            isRegionChanging.current = true;
-            setRegionToast("loading");
+            const effectiveRegion =
+              overrideResult ?? ((matchResult?.storeCount ?? 0) > 0 ? matchResult : null);
+            if (effectiveRegion?.label !== result.label) {
+              isRegionChanging.current = true;
+              setRegionToast("loading");
+            }
             setOverrideResult(result);
           }}
+          onGpsInactive={handleGpsInactive}
         />
       )}
 
@@ -332,7 +367,7 @@ export default function Header({ variant = "main", title, onBackClick }: HeaderP
           variant="column"
           position="center"
           duration={10000}
-          onClose={() => {}}
+          onClose={() => setRegionToast(null)}
         />
       )}
 
diff --git a/apps/web-user/src/common/components/headers/RegionSelectSheet.tsx b/apps/web-user/src/common/components/headers/RegionSelectSheet.tsx
index c44d6218..e9f5ba97 100644
--- a/apps/web-user/src/common/components/headers/RegionSelectSheet.tsx
+++ b/apps/web-user/src/common/components/headers/RegionSelectSheet.tsx
@@ -1,13 +1,10 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import clsx from "clsx";
 import { Button } from "@/apps/web-user/common/components/buttons/Button";
-import { Modal } from "@/apps/web-user/common/components/modals/Modal";
-import { Toast } from "@/apps/web-user/common/components/toast/Toast";
 import {
   matchAddressToRegion,
-  findNearestActiveRegion,
   RegionMatchResult,
 } from "@/apps/web-user/common/utils/region-match.util";
 import { RegionData } from "@/apps/web-user/features/store/types/region.type";
@@ -25,6 +22,8 @@ interface RegionSelectSheetProps {
   regions: RegionData[];
   currentResult: RegionMatchResult | null;
   onSelect: (result: RegionMatchResult) => void;
+  /** GPS 결과가 비활성 지역일 때 호출 — 상위(Header)에서 inactiveModal 띄움 */
+  onGpsInactive?: (result: RegionMatchResult) => void;
 }
 
 export function RegionSelectSheet({
@@ -33,16 +32,13 @@ export function RegionSelectSheet({
   regions,
   currentResult,
   onSelect,
+  onGpsInactive,
 }: RegionSelectSheetProps) {
-  const { address, latitude, longitude, setLocation, setAddress } = useUserCurrentLocationStore();
+  const { address, setLocation, setAddress } = useUserCurrentLocationStore();
   const [isWaitingForLocation, setIsWaitingForLocation] = useState(false);
-  const [showOpenAlarmToast, setShowOpenAlarmToast] = useState(false);
-  const [inactiveModal, setInactiveModal] = useState<{
-    visible: boolean;
-    type: "seoul" | "outside";
-    currentLabel: string;
-    nearest: RegionMatchResult | null;
-  }>({ visible: false, type: "seoul", currentLabel: "", nearest: null });
+  // "현재 위치로 설정" 클릭 시점의 address. GPS 응답이 도착해서 address가 실제로 바뀌었는지 비교용.
+  // 이걸 안 두면 setIsWaitingForLocation(true)가 즉시 useEffect를 발화시켜 stale address로 매칭 처리해버림.
+  const addressBeforeGpsRef = useRef<string | null>(null);
 
   const listableRegions = regions.filter((r) => {
     if (r.depth1.label === "전국") return false;
@@ -52,11 +48,12 @@ export function RegionSelectSheet({
   const [selectedDepth1, setSelectedDepth1] = useState(
     currentResult?.depth1Label ?? listableRegions[0]?.depth1.label ?? "",
   );
-  const [checkedLabels, setCheckedLabels] = useState<Set<string>>(new Set());
-  const [initialState, setInitialState] = useState<{ depth1: string; labels: Set<string> }>({
-    depth1: "",
-    labels: new Set(),
-  });
+  // depth1별 체크 상태를 따로 보관. depth1 탭 전환 시 다른 탭의 체크가 유지되도록.
+  const [checkedByDepth1, setCheckedByDepth1] = useState<Map<string, Set<string>>>(new Map());
+  const [initialState, setInitialState] = useState<{
+    depth1: string;
+    checkedByDepth1: Map<string, Set<string>>;
+  }>({ depth1: "", checkedByDepth1: new Map() });
 
   // 시트가 열릴 때 초기 상태 세팅
   useEffect(() => {
@@ -82,8 +79,17 @@ export function RegionSelectSheet({
       initialLabels = new Set();
     }
 
-    setCheckedLabels(initialLabels);
-    setInitialState({ depth1: initialDepth1, labels: new Set(initialLabels) });
+    const initialMap = new Map<string, Set<string>>();
+    if (initialLabels.size > 0) {
+      initialMap.set(initialDepth1, initialLabels);
+    }
+    setCheckedByDepth1(initialMap);
+    setInitialState({
+      depth1: initialDepth1,
+      checkedByDepth1: new Map(
+        Array.from(initialMap.entries()).map(([k, v]) => [k, new Set(v)]),
+      ),
+    });
   }, [isOpen]);
 
   // 스크롤 방지
@@ -95,38 +101,26 @@ export function RegionSelectSheet({
   }, [isOpen]);
 
   // 위치 대기 중 address가 업데이트되면 자동으로 매칭 처리
+  // address가 클릭 직전 값과 동일하면 GPS 응답이 아직 도착 안 한 stale 상태이므로 무시.
   useEffect(() => {
     if (!isWaitingForLocation || !address) return;
+    if (address === addressBeforeGpsRef.current) return;
     setIsWaitingForLocation(false);
     processMatchResult(matchAddressToRegion(address, regions));
   }, [address, isWaitingForLocation]);
 
-  // 매칭 결과 처리
+  // 매칭 결과 처리 — 비활성 모달은 Header가 일원화해서 띄움
   // - 활성 지역: onSelect 후 시트 닫기
-  // - 비활성 지역: 시트를 먼저 닫고 모달 표시 (z-index 충돌 방지)
+  // - 비활성 지역: onGpsInactive 콜백으로 상위에 위임 후 시트 닫기
   const processMatchResult = (result: RegionMatchResult | null) => {
-    if (!result) {
-      onClose();
-      return;
-    }
-    if (result.storeCount > 0) {
-      onSelect(result);
-      onClose();
-      return;
-    }
-    onClose(); // 시트 먼저 닫기
-    const isSeoul = result.depth1Label === "서울";
-    if (isSeoul) {
-      const nearest = findNearestActiveRegion(regions, result.depth1Label, latitude, longitude);
-      setInactiveModal({ visible: true, type: "seoul", currentLabel: result.label, nearest });
-    } else {
-      setInactiveModal({
-        visible: true,
-        type: "outside",
-        currentLabel: result.depth1Label,
-        nearest: null,
-      });
+    if (result) {
+      if (result.storeCount > 0) {
+        onSelect(result);
+      } else {
+        onGpsInactive?.(result);
+      }
     }
+    onClose();
   };
 
   const getActiveItems = (depth1Label: string) => {
@@ -134,40 +128,74 @@ export function RegionSelectSheet({
     return region?.depth2.filter((d) => d.label !== "전지역" && d.storeCount > 0) ?? [];
   };
 
+  const getCheckedLabels = (depth1Label: string): Set<string> =>
+    checkedByDepth1.get(depth1Label) ?? new Set<string>();
+
+  const isAllCheckedForDepth1 = (depth1Label: string): boolean => {
+    const items = getActiveItems(depth1Label);
+    const checks = getCheckedLabels(depth1Label);
+    return items.length > 0 && checks.size === items.length;
+  };
+
   const currentActiveItems = getActiveItems(selectedDepth1);
-  const showAllRegion = currentActiveItems.length >= 3;
-  const isAllChecked =
-    currentActiveItems.length > 0 && checkedLabels.size === currentActiveItems.length;
+  const currentCheckedLabels = getCheckedLabels(selectedDepth1);
+  const showAllRegion = currentActiveItems.length >= 2;
+  const isAllChecked = isAllCheckedForDepth1(selectedDepth1);
 
   const handleDepth1Change = (depth1Label: string) => {
+    // 같은 depth1을 다시 눌렀을 때 체크 상태(ALL 배지 포함)가 리셋되지 않도록 가드.
+    if (depth1Label === selectedDepth1) return;
+    // 탭만 전환 — 다른 depth1의 체크는 그대로 유지.
     setSelectedDepth1(depth1Label);
-    setCheckedLabels(new Set());
   };
 
+  // 새로 체크가 발생한 depth1만 남기고 다른 depth1의 체크를 모두 비움.
+  // (단일 depth1만 동시에 체크 유지하는 규칙. 탭 전환만으론 안 비움, 다른 depth1에서 새 체크가 발생할 때 비움.)
   const handleAllRegionToggle = () => {
     if (isAllChecked) {
-      setCheckedLabels(new Set());
+      setCheckedByDepth1((prev) => {
+        const next = new Map(prev);
+        next.delete(selectedDepth1);
+        return next;
+      });
     } else {
-      setCheckedLabels(new Set(currentActiveItems.map((d) => d.label)));
+      const onlyCurrent = new Map<string, Set<string>>();
+      onlyCurrent.set(selectedDepth1, new Set(currentActiveItems.map((d) => d.label)));
+      setCheckedByDepth1(onlyCurrent);
     }
   };
 
   const handleDepth2Toggle = (label: string) => {
-    setCheckedLabels((prev) => {
-      const next = new Set(prev);
-      if (next.has(label)) {
-        next.delete(label);
-      } else {
-        next.add(label);
+    setCheckedByDepth1((prev) => {
+      const currentSet = prev.get(selectedDepth1) ?? new Set<string>();
+      const isUnchecking = currentSet.has(label);
+      if (isUnchecking) {
+        // 같은 depth1에서 해제 — 다른 depth1엔 영향 없음
+        const next = new Map(prev);
+        const newSet = new Set(currentSet);
+        newSet.delete(label);
+        if (newSet.size === 0) {
+          next.delete(selectedDepth1);
+        } else {
+          next.set(selectedDepth1, newSet);
+        }
+        return next;
       }
+      // 새로 체크 — 다른 depth1의 체크 전부 비우고 현재 depth1에만 set
+      const newSet = new Set(currentSet);
+      newSet.add(label);
+      const next = new Map<string, Set<string>>();
+      next.set(selectedDepth1, newSet);
       return next;
     });
   };
 
   const handleSetCurrentLocation = () => {
     // 캐시된 address 무시 - 항상 신선한 GPS 요청
+    addressBeforeGpsRef.current = address;
     setIsWaitingForLocation(true);
     if (isWebViewEnvironment()) {
+      // 웹뷰: window.receiveLocation → setAddress가 외부에서 호출됨. address 변경 시 useEffect가 처리.
       requestLocationFromWebView();
     } else if (navigator.geolocation) {
       navigator.geolocation.getCurrentPosition(
@@ -175,10 +203,11 @@ export function RegionSelectSheet({
           const { latitude, longitude } = position.coords;
           setLocation(latitude, longitude);
           const addr = await reverseGeocode(latitude, longitude);
+          setIsWaitingForLocation(false);
           if (addr) {
             setAddress(addr);
-          } else {
-            setIsWaitingForLocation(false);
+            // 동일 위치 재클릭 시 setAddress가 no-op이 되어 useEffect 미발화 케이스를 피하기 위해 직접 처리.
+            processMatchResult(matchAddressToRegion(addr, regions));
           }
         },
         () => setIsWaitingForLocation(false),
@@ -189,7 +218,7 @@ export function RegionSelectSheet({
   };
 
   const handleConfirm = () => {
-    if (checkedLabels.size === 0) {
+    if (currentCheckedLabels.size === 0) {
       onClose();
       return;
     }
@@ -200,12 +229,12 @@ export function RegionSelectSheet({
         storeCount: totalStoreCount,
         depth1Label: selectedDepth1,
       });
-    } else if (checkedLabels.size === 1) {
-      const label = Array.from(checkedLabels)[0];
+    } else if (currentCheckedLabels.size === 1) {
+      const label = Array.from(currentCheckedLabels)[0];
       const item = currentActiveItems.find((d) => d.label === label)!;
       onSelect({ label: item.label, storeCount: item.storeCount, depth1Label: selectedDepth1 });
     } else {
-      const selectedItems = currentActiveItems.filter((d) => checkedLabels.has(d.label));
+      const selectedItems = currentActiveItems.filter((d) => currentCheckedLabels.has(d.label));
       const totalStoreCount = selectedItems.reduce((sum, d) => sum + d.storeCount, 0);
       onSelect({
         label: `${selectedItems[0].label} 외 ${selectedItems.length - 1}곳`,
@@ -216,178 +245,128 @@ export function RegionSelectSheet({
     onClose();
   };
 
-  const handleInactiveClose = () => {};
-
-  const handleInactiveConfirm = () => {
-    if (inactiveModal.nearest) {
-      onSelect(inactiveModal.nearest);
-    }
-    setInactiveModal((prev) => ({ ...prev, visible: false }));
-  };
-
-  const handleInactiveCancel = () => {
-    setInactiveModal((prev) => ({ ...prev, visible: false }));
-  };
-
-  const handleOutsideConfirm = () => {
-    setInactiveModal((prev) => ({ ...prev, visible: false }));
-    setTimeout(() => setShowOpenAlarmToast(true), 500);
-  };
-
-  // 시트도 닫혀있고 모달/토스트도 없으면 아무것도 렌더링 안 함
-  if (!isOpen && !inactiveModal.visible && !showOpenAlarmToast) return null;
+  if (!isOpen) return null;
 
   return (
-    <>
-      {/* 지역 선택 시트 */}
-      {isOpen && (
-        <div className="fixed inset-0 z-[200] flex flex-col bg-white max-w-[638px] mx-auto">
-          {/* 헤더 */}
-          <div className="h-[52px] shrink-0 flex items-center justify-between px-5">
-            <div className="flex items-center gap-4">
+    <div className="fixed inset-0 z-[200] flex flex-col bg-white max-w-[638px] mx-auto">
+      {/* 헤더 */}
+      <div className="h-[52px] shrink-0 flex items-center justify-between px-5">
+        <div className="flex items-center gap-4">
+          <button
+            type="button"
+            onClick={onClose}
+            className="flex items-center justify-center border-none bg-transparent text-gray-900 cursor-pointer p-0"
+            aria-label="뒤로가기"
+          >
+            <Icon name="chevronLeft" width={24} height={24} className="text-gray-900" />
+          </button>
+          <h2 className="font-bold text-gray-900">지역 설정</h2>
+        </div>
+        <button
+          type="button"
+          onClick={handleSetCurrentLocation}
+          disabled={isWaitingForLocation}
+          className="flex items-center gap-1"
+        >
+          <Icon name="currentLocation" width={16} height={16} className="text-blue-400" />
+          <span className="text-xs font-bold text-blue-400">현재 위치로 설정</span>
+        </button>
+      </div>
+
+      {/* 본문 */}
+      <div className="flex flex-1 overflow-hidden">
+        {/* 좌측: depth1 목록 */}
+        <div className="w-[120px] shrink-0 overflow-y-auto bg-gray-50">
+          {listableRegions.map((region) => {
+            const isSelected = region.depth1.label === selectedDepth1;
+            const checkedCount = getCheckedLabels(region.depth1.label).size;
+            const isAll = isAllCheckedForDepth1(region.depth1.label);
+
+            return (
               <button
+                key={region.depth1.label}
                 type="button"
-                onClick={onClose}
-                className="flex items-center justify-center border-none bg-transparent text-gray-900 cursor-pointer p-0"
-                aria-label="뒤로가기"
+                onClick={() => handleDepth1Change(region.depth1.label)}
+                className={clsx(
+                  "w-full px-6 h-[52px] text-sm text-left text-gray-900 transition-colors flex items-center justify-between gap-1 border-b border-gray-100",
+                  isSelected ? "bg-white font-bold" : "font-medium",
+                )}
               >
-                <Icon name="chevronLeft" width={24} height={24} className="text-gray-900" />
+                <span className="truncate">{region.depth1.label}</span>
+                {checkedCount > 0 && (
+                  <span className="text-sm shrink-0 text-primary">
+                    {isAll ? "ALL" : checkedCount}
+                  </span>
+                )}
               </button>
-              <h2 className="font-bold text-gray-900">지역 설정</h2>
-            </div>
+            );
+          })}
+        </div>
+
+        {/* 우측: depth2 목록 */}
+        <div className="flex-1 overflow-y-auto">
+          {showAllRegion && (
             <button
               type="button"
-              onClick={handleSetCurrentLocation}
-              disabled={isWaitingForLocation}
-              className="flex items-center gap-1"
+              onClick={handleAllRegionToggle}
+              className="w-full flex items-center justify-between px-6 h-[52px] text-sm text-gray-900 font-bold transition-colors"
             >
-              <Icon name="currentLocation" width={16} height={16} className="text-blue-400" />
-              <span className="text-xs font-bold text-blue-400">현재 위치로 설정</span>
-            </button>
-          </div>
-
-          {/* 본문 */}
-          <div className="flex flex-1 overflow-hidden">
-            {/* 좌측: depth1 목록 */}
-            <div className="w-[120px] shrink-0 overflow-y-auto bg-gray-50">
-              {listableRegions.map((region) => {
-                const isSelected = region.depth1.label === selectedDepth1;
-                const activeCount = getActiveItems(region.depth1.label).length;
-                const showAll = isSelected && isAllChecked;
-
-                return (
-                  <button
-                    key={region.depth1.label}
-                    type="button"
-                    onClick={() => handleDepth1Change(region.depth1.label)}
-                    className={clsx(
-                      "w-full px-6 h-[52px] text-sm text-left text-gray-900 transition-colors flex items-center justify-between gap-1 border-b border-gray-100",
-                      isSelected ? "bg-white font-bold" : "font-medium",
-                    )}
-                  >
-                    <span className="truncate">{region.depth1.label}</span>
-                    <span className="text-sm shrink-0 text-primary">
-                      {showAll ? "ALL" : activeCount}
-                    </span>
-                  </button>
-                );
-              })}
-            </div>
-
-            {/* 우측: depth2 목록 */}
-            <div className="flex-1 overflow-y-auto">
-              {showAllRegion && (
-                <button
-                  type="button"
-                  onClick={handleAllRegionToggle}
-                  className="w-full flex items-center justify-between px-6 h-[52px] text-sm text-gray-900 font-bold transition-colors"
-                >
-                  <span>전지역</span>
-                  {isAllChecked && (
-                    <Icon name="check" width={16} height={16} className="text-red-400" />
-                  )}
-                </button>
+              <span>전지역</span>
+              {isAllChecked && (
+                <Icon name="check" width={16} height={16} className="text-red-400" />
               )}
+            </button>
+          )}
 
-              {currentActiveItems.map((item) => {
-                const isChecked = checkedLabels.has(item.label);
-                return (
-                  <button
-                    key={item.label}
-                    type="button"
-                    onClick={() => handleDepth2Toggle(item.label)}
-                    className="w-full flex items-center justify-between px-6 h-[52px] text-sm text-gray-900 font-bold transition-colors"
-                  >
-                    <span>{item.label}</span>
-                    {isChecked && (
-                      <Icon name="check" width={16} height={16} className="text-red-400" />
-                    )}
-                  </button>
-                );
-              })}
-            </div>
-          </div>
-
-          {/* 푸터 */}
-          <div className="shrink-0 px-5 py-4 border-t border-gray-100 flex gap-2">
-            <span style={{ flex: 3 }}>
-              <Button
-                variant="outline"
-                onClick={() => {
-                  setSelectedDepth1(initialState.depth1);
-                  setCheckedLabels(new Set(initialState.labels));
-                }}
-                className="flex items-center justify-center gap-[6px]"
+          {currentActiveItems.map((item) => {
+            const isChecked = currentCheckedLabels.has(item.label);
+            return (
+              <button
+                key={item.label}
+                type="button"
+                onClick={() => handleDepth2Toggle(item.label)}
+                className="w-full flex items-center justify-between px-6 h-[52px] text-sm text-gray-900 font-bold transition-colors"
               >
-                <Icon name="reset" width={20} height={20} className="text-gray-900" />
-                초기화
-              </Button>
-            </span>
-            <span style={{ flex: 7 }}>
-              <Button variant="primary" onClick={handleConfirm} disabled={checkedLabels.size === 0}>
-                선택완료
-              </Button>
-            </span>
-          </div>
+                <span>{item.label}</span>
+                {isChecked && <Icon name="check" width={16} height={16} className="text-red-400" />}
+              </button>
+            );
+          })}
         </div>
-      )}
-
-      {/* 비활성 지역 모달 (서울 내) - 시트가 닫힌 뒤 렌더링되어 z-index 충돌 없음 */}
-      <Modal
-        isOpen={inactiveModal.visible && inactiveModal.type === "seoul"}
-        onClose={handleInactiveClose}
-        title={`아직 ${inactiveModal.currentLabel} 매장은 준비중입니다. 가까운 동네에서 픽업해보시겠어요?`}
-        confirmText="근처매장보기"
-        confirmVariant="primary"
-        cancelText="취소"
-        cancelVariant="outline"
-        onConfirm={handleInactiveConfirm}
-        onCancel={handleInactiveCancel}
-      />
-
-      {/* 비활성 지역 모달 (서울 외) */}
-      <Modal
-        isOpen={inactiveModal.visible && inactiveModal.type === "outside"}
-        onClose={handleInactiveClose}
-        title={`아직 ${inactiveModal.currentLabel}까지는 달려가는중이에요! 오픈 알람할때 가장 먼저 알려드릴까요?`}
-        confirmText="우리 동네 오픈알림"
-        confirmVariant="primary"
-        cancelText="취소"
-        cancelVariant="outline"
-        onConfirm={handleOutsideConfirm}
-        onCancel={handleInactiveCancel}
-        confirmFlex={7}
-        cancelFlex={3}
-      />
-
-      {showOpenAlarmToast && (
-        <Toast
-          message="오픈시 알람을 보내드릴게요!"
-          iconName="checkCircle"
-          iconClassName="text-green-400"
-          onClose={() => setShowOpenAlarmToast(false)}
-        />
-      )}
-    </>
+      </div>
+
+      {/* 푸터 */}
+      <div className="shrink-0 px-5 py-4 border-t border-gray-100 flex gap-2">
+        <span style={{ flex: 3 }}>
+          <Button
+            variant="outline"
+            onClick={() => {
+              setSelectedDepth1(initialState.depth1);
+              setCheckedByDepth1(
+                new Map(
+                  Array.from(initialState.checkedByDepth1.entries()).map(([k, v]) => [
+                    k,
+                    new Set(v),
+                  ]),
+                ),
+              );
+            }}
+            className="flex items-center justify-center gap-[6px]"
+          >
+            <Icon name="reset" width={20} height={20} className="text-gray-900" />
+            초기화
+          </Button>
+        </span>
+        <span style={{ flex: 7 }}>
+          <Button
+            variant="primary"
+            onClick={handleConfirm}
+            disabled={currentCheckedLabels.size === 0}
+          >
+            선택완료
+          </Button>
+        </span>
+      </div>
+    </div>
   );
 }
diff --git a/apps/web-user/src/features/product/components/cards/CakeListItem.tsx b/apps/web-user/src/features/product/components/cards/CakeListItem.tsx
index 3493952f..a659b21d 100644
--- a/apps/web-user/src/features/product/components/cards/CakeListItem.tsx
+++ b/apps/web-user/src/features/product/components/cards/CakeListItem.tsx
@@ -2,6 +2,7 @@
 
 import { useState } from "react";
 import Image from "next/image";
+import { useRouter } from "next/navigation";
 import { Product } from "@/apps/web-user/features/product/types/product.type";
 import { Icon } from "@/apps/web-user/common/components/icons";
 import { useAddProductLike } from "@/apps/web-user/features/like/hooks/mutations/useAddProductLike";
@@ -9,6 +10,7 @@ import { useRemoveProductLike } from "@/apps/web-user/features/like/hooks/mutati
 import { formatAddress } from "@/apps/web-user/common/utils/address.util";
 import { useAuthStore } from "@/apps/web-user/common/store/auth.store";
 import { useLoginSheetStore } from "@/apps/web-user/common/store/login-sheet.store";
+import { PATHS } from "@/apps/web-user/common/constants/paths.constant";
 
 interface CakeListItemProps {
   product: Product;
@@ -18,6 +20,7 @@ interface CakeListItemProps {
 export function CakeListItem({ product, onCardClick }: CakeListItemProps) {
   const [isLiked, setIsLiked] = useState(product.isLiked ?? false);
 
+  const router = useRouter();
   const { mutate: addLike, isPending: isAddingLike } = useAddProductLike();
   const { mutate: removeLike, isPending: isRemovingLike } = useRemoveProductLike();
   const isLikeLoading = isAddingLike || isRemovingLike;
@@ -39,6 +42,11 @@ export function CakeListItem({ product, onCardClick }: CakeListItemProps) {
     }
   };
 
+  const handleStoreClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    router.push(PATHS.STORE.DETAIL(product.storeId));
+  };
+
   return (
     <div onClick={() => onCardClick(product.id)} className="min-w-[164px] bg-white cursor-pointer">
       <div className="w-full aspect-square relative overflow-hidden rounded-xl">
@@ -85,7 +93,11 @@ export function CakeListItem({ product, onCardClick }: CakeListItemProps) {
           </span>
         </div>
       </div>
-      <div className="inline-flex items-center gap-1 py-1 px-2 text-2xs font-bold text-gray-700 bg-gray-50 rounded-full max-w-full">
+      <button
+        type="button"
+        onClick={handleStoreClick}
+        className="inline-flex items-center gap-1 py-1 px-2 text-2xs font-bold text-gray-700 bg-gray-50 rounded-full max-w-full"
+      >
         <span>
           {formatAddress(product.pickupAddress)} ·{" "}
           {product.productNoticeProducer.length > 10
@@ -93,7 +105,7 @@ export function CakeListItem({ product, onCardClick }: CakeListItemProps) {
             : product.productNoticeProducer}
         </span>
         <Icon name="arrow" width={16} height={16} className="text-gray-700 rotate-90" />
-      </div>
+      </button>
     </div>
   );
 }

From e01670d6520e1b0b814b73f269eb2191abae52db Mon Sep 17 00:00:00 2001
From: geunu <olo90632951@gmail.com>
Date: Sun, 21 Jun 2026 13:33:06 +0900
Subject: [PATCH 25/41] =?UTF-8?q?[WEB-SELLER][ADD]:=20=EC=83=88=EB=A1=9C?=
 =?UTF-8?q?=EC=9A=B4=20ConfirmAlert=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8?=
 =?UTF-8?q?=20=EB=B0=8F=20confirm.store=20=EC=B6=94=EA=B0=80.=20=EC=A3=BC?=
 =?UTF-8?q?=EB=AC=B8=20=EC=83=81=EC=84=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80?=
 =?UTF-8?q?=EC=97=90=EC=84=9C=20=EB=B9=84=EA=B0=80=EC=97=AD=EC=A0=81=20?=
 =?UTF-8?q?=EC=9E=91=EC=97=85=EC=97=90=20=EB=8C=80=ED=95=9C=20=ED=99=95?=
 =?UTF-8?q?=EC=9D=B8=20=EB=AA=A8=EB=8B=AC=EC=9D=84=20=EA=B5=AC=ED=98=84?=
 =?UTF-8?q?=ED=95=98=EC=97=AC=20=EC=82=AC=EC=9A=A9=EC=9E=90=20=EA=B2=BD?=
 =?UTF-8?q?=ED=97=98=EC=9D=84=20=EA=B0=9C=EC=84=A0=ED=96=88=EC=8A=B5?=
 =?UTF-8?q?=EB=8B=88=EB=8B=A4.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-seller/src/App.tsx                   |  2 +
 .../common/components/alerts/ConfirmAlert.tsx | 76 ++++++++++++++++++
 .../src/common/store/confirm.store.ts         | 50 ++++++++++++
 .../src/pages/store/detail/orders/Detail.tsx  | 77 +++++++++++--------
 4 files changed, 171 insertions(+), 34 deletions(-)
 create mode 100644 apps/web-seller/src/common/components/alerts/ConfirmAlert.tsx
 create mode 100644 apps/web-seller/src/common/store/confirm.store.ts

diff --git a/apps/web-seller/src/App.tsx b/apps/web-seller/src/App.tsx
index 1853a1cd..c8775bb7 100644
--- a/apps/web-seller/src/App.tsx
+++ b/apps/web-seller/src/App.tsx
@@ -11,6 +11,7 @@ import { ErrorBoundaryProvider } from "./common/components/providers/ErrorBounda
 import { QueryProvider } from "./common/components/providers/QueryProvider";
 import { LoadingFallback } from "./common/components/fallbacks/LoadingFallback";
 import { Alert } from "./common/components/alerts/Alert";
+import { ConfirmAlert } from "./common/components/alerts/ConfirmAlert";
 import BuildInfoLogger from "./common/components/debug/BuildInfoLogger";
 
 const App: React.FC = () => {
@@ -20,6 +21,7 @@ const App: React.FC = () => {
         <BuildInfoLogger />
         <Router>
           <Alert />
+          <ConfirmAlert />
           <Suspense fallback={<LoadingFallback />}>
             <Routes>
               {/* 인증 관련 경로 (AdminLayout 밖) */}
diff --git a/apps/web-seller/src/common/components/alerts/ConfirmAlert.tsx b/apps/web-seller/src/common/components/alerts/ConfirmAlert.tsx
new file mode 100644
index 00000000..01849568
--- /dev/null
+++ b/apps/web-seller/src/common/components/alerts/ConfirmAlert.tsx
@@ -0,0 +1,76 @@
+import { useEffect } from "react";
+import { BaseButton as Button } from "@/apps/web-seller/common/components/buttons/BaseButton";
+import { useConfirmStore } from "@/apps/web-seller/common/store/confirm.store";
+
+export function ConfirmAlert() {
+  const { confirm, hideConfirm } = useConfirmStore();
+
+  const handleCancel = () => {
+    confirm.onCancel?.();
+    hideConfirm();
+  };
+
+  const handleConfirm = () => {
+    confirm.onConfirm?.();
+    hideConfirm();
+  };
+
+  useEffect(() => {
+    if (!confirm.isOpen) return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") handleCancel();
+    };
+
+    document.addEventListener("keydown", handleKeyDown);
+    document.body.style.overflow = "hidden";
+
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      document.body.style.overflow = "";
+    };
+  }, [confirm.isOpen, confirm.onCancel]);
+
+  if (!confirm.isOpen) return null;
+
+  return (
+    <div
+      className="fixed inset-0 z-[10000] flex items-center justify-center bg-black/40 p-4"
+      role="presentation"
+      onClick={handleCancel}
+    >
+      <div
+        role="alertdialog"
+        aria-modal="true"
+        aria-label={confirm.title}
+        aria-describedby="confirm-alert-message"
+        className="w-full max-w-[360px] overflow-hidden rounded-xl border border-slate-200 bg-white shadow-lg animate-in fade-in zoom-in-95 duration-150"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="flex min-h-[96px] items-center justify-center bg-white px-6 pt-6 pb-2">
+          <p
+            id="confirm-alert-message"
+            className="text-center text-[13px] leading-[1.6] text-slate-700"
+          >
+            {confirm.message}
+          </p>
+        </div>
+
+        <div className="flex min-h-[60px] items-center justify-center gap-2.5 bg-white px-5 pb-5 pt-0">
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            className="min-w-[72px]"
+            onClick={handleCancel}
+          >
+            {confirm.cancelLabel}
+          </Button>
+          <Button type="button" size="sm" className="min-w-[72px]" onClick={handleConfirm}>
+            {confirm.confirmLabel}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web-seller/src/common/store/confirm.store.ts b/apps/web-seller/src/common/store/confirm.store.ts
new file mode 100644
index 00000000..23b2a083
--- /dev/null
+++ b/apps/web-seller/src/common/store/confirm.store.ts
@@ -0,0 +1,50 @@
+import { create } from "zustand";
+
+export const CONFIRM_DEFAULT_TITLE = "안내 메시지";
+
+export interface ConfirmState {
+  isOpen: boolean;
+  title: string;
+  message: string;
+  confirmLabel: string;
+  cancelLabel: string;
+  onConfirm?: () => void;
+  onCancel?: () => void;
+}
+
+interface ConfirmStore {
+  confirm: ConfirmState;
+  showConfirm: (
+    confirm: Partial<Omit<ConfirmState, "isOpen">> & Pick<ConfirmState, "message">,
+  ) => void;
+  hideConfirm: () => void;
+}
+
+const initialConfirm: ConfirmState = {
+  isOpen: false,
+  title: CONFIRM_DEFAULT_TITLE,
+  message: "",
+  confirmLabel: "확인",
+  cancelLabel: "취소",
+};
+
+export const useConfirmStore = create<ConfirmStore>((set) => ({
+  confirm: initialConfirm,
+
+  showConfirm: (confirm) => {
+    set({
+      confirm: {
+        ...initialConfirm,
+        ...confirm,
+        title: confirm.title ?? CONFIRM_DEFAULT_TITLE,
+        confirmLabel: confirm.confirmLabel ?? "확인",
+        cancelLabel: confirm.cancelLabel ?? "취소",
+        isOpen: true,
+      },
+    });
+  },
+
+  hideConfirm: () => {
+    set({ confirm: initialConfirm });
+  },
+}));
diff --git a/apps/web-seller/src/pages/store/detail/orders/Detail.tsx b/apps/web-seller/src/pages/store/detail/orders/Detail.tsx
index f310a734..4facf584 100644
--- a/apps/web-seller/src/pages/store/detail/orders/Detail.tsx
+++ b/apps/web-seller/src/pages/store/detail/orders/Detail.tsx
@@ -30,6 +30,8 @@ import {
   ORDER_DETAIL_PAGE_META,
   ORDER_DETAIL_PAGE_TITLE,
   ORDER_DETAIL_SHEET,
+  ORDER_DETAIL_SHEET_HEADER,
+  ORDER_DETAIL_SHEET_TITLE,
   ORDER_DETAIL_TD_BLOCK,
 } from "@/apps/web-seller/features/order/constants/order-detail-page.constant";
 import {
@@ -38,6 +40,7 @@ import {
 } from "@/apps/web-seller/features/order/components/detail/OrderDetailSheetTable";
 import { cn } from "@/apps/web-seller/common/utils/classname.util";
 import { ContentLoading } from "@/apps/web-seller/common/components/loading/ContentLoading";
+import { useConfirmStore } from "@/apps/web-seller/common/store/confirm.store";
 
 type ReasonTarget =
   | OrderStatus.CANCEL_COMPLETED
@@ -48,15 +51,11 @@ type ReasonTarget =
 const IRREVERSIBLE_ACTION_CONFIRM_MESSAGE =
   "이 작업은 처리 후 되돌릴 수 없습니다. 계속하시겠습니까?";
 
-function confirmIrreversibleAction(run: () => void): void {
-  if (!window.confirm(IRREVERSIBLE_ACTION_CONFIRM_MESSAGE)) return;
-  run();
-}
-
 export const StoreDetailOrderDetailPage: React.FC = () => {
   const { storeId, orderId } = useParams<{ storeId: string; orderId: string }>();
   const { data: order, isLoading } = useOrderDetail(orderId || "");
   const updateOrderStatusMutation = useUpdateOrderStatus();
+  const openConfirmModal = useConfirmStore((state) => state.showConfirm);
   const [lightboxImage, setLightboxImage] = useState<string | null>(null);
   const [reasonTarget, setReasonTarget] = useState<ReasonTarget>(null);
   const [reasonText, setReasonText] = useState("");
@@ -91,30 +90,38 @@ export const StoreDetailOrderDetailPage: React.FC = () => {
   const status = order.orderStatus;
   const variant = getOrderStatusBadgeVariant(status);
 
+  const requestActionConfirm = (
+    onConfirm: () => void,
+    message: string = IRREVERSIBLE_ACTION_CONFIRM_MESSAGE,
+  ) => {
+    openConfirmModal({ message, onConfirm });
+  };
+
   const submitReason = () => {
     if (!reasonTarget || !orderId) return;
     const trimmed = reasonText.trim();
     if (!trimmed) return;
-    if (!window.confirm(IRREVERSIBLE_ACTION_CONFIRM_MESSAGE)) return;
-    const request: UpdateOrderStatusRequestDto = {
-      orderStatus: reasonTarget,
-    };
-    if (reasonTarget === OrderStatus.CANCEL_COMPLETED) {
-      request.sellerCancelReason = trimmed;
-    } else if (reasonTarget === OrderStatus.NO_SHOW) {
-      request.sellerNoShowReason = trimmed;
-    } else if (reasonTarget === OrderStatus.CANCEL_REFUND_PENDING) {
-      request.sellerCancelRefundPendingReason = trimmed;
-    }
-    updateOrderStatusMutation.mutate(
-      { orderId, request },
-      {
-        onSuccess: () => {
-          setReasonTarget(null);
-          setReasonText("");
+    requestActionConfirm(() => {
+      const request: UpdateOrderStatusRequestDto = {
+        orderStatus: reasonTarget,
+      };
+      if (reasonTarget === OrderStatus.CANCEL_COMPLETED) {
+        request.sellerCancelReason = trimmed;
+      } else if (reasonTarget === OrderStatus.NO_SHOW) {
+        request.sellerNoShowReason = trimmed;
+      } else if (reasonTarget === OrderStatus.CANCEL_REFUND_PENDING) {
+        request.sellerCancelRefundPendingReason = trimmed;
+      }
+      updateOrderStatusMutation.mutate(
+        { orderId, request },
+        {
+          onSuccess: () => {
+            setReasonTarget(null);
+            setReasonText("");
+          },
         },
-      },
-    );
+      );
+    });
   };
 
   const cancelReasonFlow = () => {
@@ -128,7 +135,7 @@ export const StoreDetailOrderDetailPage: React.FC = () => {
   };
 
   const showAcceptReservation = isSellerTransitionAllowed(status, OrderStatus.PAYMENT_PENDING);
-  const showConfirm = isSellerTransitionAllowed(status, OrderStatus.CONFIRMED);
+  const showConfirmReservation = isSellerTransitionAllowed(status, OrderStatus.CONFIRMED);
   const showPickupDone = isSellerTransitionAllowed(status, OrderStatus.PICKUP_COMPLETED);
   const showRefundDone = isSellerTransitionAllowed(status, OrderStatus.CANCEL_REFUND_COMPLETED);
   const showCancelOrder = isSellerTransitionAllowed(status, OrderStatus.CANCEL_COMPLETED);
@@ -140,7 +147,7 @@ export const StoreDetailOrderDetailPage: React.FC = () => {
   const hasAnyActions =
     !reasonTarget &&
     (showAcceptReservation ||
-      showConfirm ||
+      showConfirmReservation ||
       showPickupDone ||
       showRefundDone ||
       showCancelOrder ||
@@ -261,21 +268,23 @@ export const StoreDetailOrderDetailPage: React.FC = () => {
                         <Button
                           className={ORDER_DETAIL_ACTION_BTN}
                           onClick={() =>
-                            updateOrderStatusMutation.mutate({
-                              orderId: order.id,
-                              request: { orderStatus: OrderStatus.PAYMENT_PENDING },
-                            })
+                            requestActionConfirm(() =>
+                              updateOrderStatusMutation.mutate({
+                                orderId: order.id,
+                                request: { orderStatus: OrderStatus.PAYMENT_PENDING },
+                              }),
+                            )
                           }
                           disabled={updateOrderStatusMutation.isPending}
                         >
                           {updateOrderStatusMutation.isPending ? "처리 중..." : "예약 확인"}
                         </Button>
                       )}
-                      {showConfirm && (
+                      {showConfirmReservation && (
                         <Button
                           className={ORDER_DETAIL_ACTION_BTN}
                           onClick={() =>
-                            confirmIrreversibleAction(() =>
+                            requestActionConfirm(() =>
                               updateOrderStatusMutation.mutate({
                                 orderId: order.id,
                                 request: { orderStatus: OrderStatus.CONFIRMED },
@@ -291,7 +300,7 @@ export const StoreDetailOrderDetailPage: React.FC = () => {
                         <Button
                           className={ORDER_DETAIL_ACTION_BTN}
                           onClick={() =>
-                            confirmIrreversibleAction(() =>
+                            requestActionConfirm(() =>
                               updateOrderStatusMutation.mutate({
                                 orderId: order.id,
                                 request: { orderStatus: OrderStatus.PICKUP_COMPLETED },
@@ -307,7 +316,7 @@ export const StoreDetailOrderDetailPage: React.FC = () => {
                         <Button
                           className={ORDER_DETAIL_ACTION_BTN}
                           onClick={() =>
-                            confirmIrreversibleAction(() =>
+                            requestActionConfirm(() =>
                               updateOrderStatusMutation.mutate({
                                 orderId: order.id,
                                 request: { orderStatus: OrderStatus.CANCEL_REFUND_COMPLETED },

From fc904b45207d5e0469b9b8751f5ea06bedddddb6 Mon Sep 17 00:00:00 2001
From: geunu <olo90632951@gmail.com>
Date: Sun, 21 Jun 2026 13:35:29 +0900
Subject: [PATCH 26/41] =?UTF-8?q?[WEB-SELLER][UPDATE]:=20=EC=82=AC?=
 =?UTF-8?q?=EC=97=85=EC=9E=90=20=EB=93=B1=EB=A1=9D=20=ED=8F=BC=EC=97=90?=
 =?UTF-8?q?=EC=84=9C=20=EC=82=AC=EC=97=85=EC=9E=90=20=EB=B2=88=ED=98=B8=20?=
 =?UTF-8?q?=EC=9E=85=EB=A0=A5=20=EC=8B=9C=20=EC=B5=9C=EB=8C=80=20=EA=B8=B8?=
 =?UTF-8?q?=EC=9D=B4=EB=A5=BC=2010=EC=9E=90=EB=A6=AC=EB=A1=9C=20=EC=A0=9C?=
 =?UTF-8?q?=ED=95=9C=ED=95=98=EA=B3=A0,=20=EC=9C=A0=ED=9A=A8=EC=84=B1=20?=
 =?UTF-8?q?=EA=B2=80=EC=82=AC=EB=A5=BC=20=EC=9C=84=ED=95=9C=20=EC=B5=9C?=
 =?UTF-8?q?=EB=8C=80=EA=B0=92=EC=9D=84=20=EC=B6=94=EA=B0=80=ED=95=98?=
 =?UTF-8?q?=EC=97=AC=20=EC=82=AC=EC=9A=A9=EC=9E=90=20=EC=9E=85=EB=A0=A5?=
 =?UTF-8?q?=EC=9D=84=20=EA=B0=9C=EC=84=A0=ED=96=88=EC=8A=B5=EB=8B=88?=
 =?UTF-8?q?=EB=8B=A4.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../business/components/forms/BusinessRegistrationForm.tsx   | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/apps/web-seller/src/features/business/components/forms/BusinessRegistrationForm.tsx b/apps/web-seller/src/features/business/components/forms/BusinessRegistrationForm.tsx
index 60867cd9..38c1dbed 100644
--- a/apps/web-seller/src/features/business/components/forms/BusinessRegistrationForm.tsx
+++ b/apps/web-seller/src/features/business/components/forms/BusinessRegistrationForm.tsx
@@ -34,6 +34,8 @@ const numericStringToValue = (s: string): number | undefined => {
   return Number.isNaN(n) ? undefined : n;
 };
 
+const BUSINESS_NO_MAX_LENGTH = 10;
+
 export const BusinessRegistrationForm: React.FC<Props> = ({ onSubmit, initialValue, onChange }) => {
   const [form, setForm] = useState<BusinessRegistrationFormValues>(initialValue || defaultForm);
   const [errors, setErrors] = useState<
@@ -88,7 +90,7 @@ export const BusinessRegistrationForm: React.FC<Props> = ({ onSubmit, initialVal
     };
 
   const handleBNoChange = (v: number | undefined) => {
-    const value = v === undefined ? "" : String(v);
+    const value = v === undefined ? "" : String(v).slice(0, BUSINESS_NO_MAX_LENGTH);
     const next = { ...form, b_no: value };
     setForm(next);
     onChange?.(next);
@@ -120,6 +122,7 @@ export const BusinessRegistrationForm: React.FC<Props> = ({ onSubmit, initialVal
             onChange={handleBNoChange}
             placeholder="하이픈(-) 없이 10자리 숫자로 입력해주세요."
             min={0}
+            max={9999999999}
             className={errors.b_no ? "border-destructive" : ""}
           />
           {errors.b_no && <p className="text-sm text-destructive mt-1">{errors.b_no}</p>}

From 2e61f8a6eca9b33aa91af63b11618fe0541a305a Mon Sep 17 00:00:00 2001
From: geunu <olo90632951@gmail.com>
Date: Sun, 21 Jun 2026 14:27:27 +0900
Subject: [PATCH 27/41] =?UTF-8?q?[WEB-SELLER][UPDATE]:=20=EC=83=81?=
 =?UTF-8?q?=ED=92=88=20=EC=83=9D=EC=84=B1=20=ED=8F=BC=EC=9D=98=20=EC=BC=80?=
 =?UTF-8?q?=EC=9D=B4=ED=81=AC=20=EC=98=B5=EC=85=98=20=EC=84=B9=EC=85=98?=
 =?UTF-8?q?=EC=97=90=20=EC=9C=A0=ED=9A=A8=EC=84=B1=20=EA=B2=80=EC=82=AC=20?=
 =?UTF-8?q?=EB=A1=9C=EC=A7=81=EC=9D=84=20=EC=B6=94=EA=B0=80=ED=95=98?=
 =?UTF-8?q?=EA=B3=A0,=20=EC=9E=85=EB=A0=A5=20=EC=98=A4=EB=A5=98=20?=
 =?UTF-8?q?=EC=8B=9C=20=EC=82=AC=EC=9A=A9=EC=9E=90=EC=97=90=EA=B2=8C=20?=
 =?UTF-8?q?=ED=94=BC=EB=93=9C=EB=B0=B1=EC=9D=84=20=EC=A0=9C=EA=B3=B5?=
 =?UTF-8?q?=ED=95=98=EB=8A=94=20=EB=A9=94=EC=8B=9C=EC=A7=80=EB=A5=BC=20?=
 =?UTF-8?q?=ED=91=9C=EC=8B=9C=ED=95=98=EB=8F=84=EB=A1=9D=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95=ED=96=88=EC=8A=B5=EB=8B=88=EB=8B=A4.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../sections/ProductCreationCakeOptionsSection.tsx       | 9 +++++++--
 .../src/features/product/utils/validateProductForm.ts    | 9 +++++++++
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/apps/web-seller/src/features/product/components/sections/ProductCreationCakeOptionsSection.tsx b/apps/web-seller/src/features/product/components/sections/ProductCreationCakeOptionsSection.tsx
index 4b4c2e53..7909fc82 100644
--- a/apps/web-seller/src/features/product/components/sections/ProductCreationCakeOptionsSection.tsx
+++ b/apps/web-seller/src/features/product/components/sections/ProductCreationCakeOptionsSection.tsx
@@ -34,7 +34,7 @@ export interface ProductCreationCakeOptionsSectionProps {
 // 상품 등록 폼 - 케이크 옵션 섹션
 export const ProductCreationCakeOptionsSection: React.FC<
   ProductCreationCakeOptionsSectionProps
-> = ({ form, onCakeSizeOptionsChange, onCakeFlavorOptionsChange }) => {
+> = ({ form, errors, onCakeSizeOptionsChange, onCakeFlavorOptionsChange }) => {
   const [sizeOptions, setSizeOptions] = useState<CakeSizeOptionDto[]>(form.cakeSizeOptions || []);
   const [flavorOptions, setFlavorOptions] = useState<CakeFlavorOptionDto[]>(
     form.cakeFlavorOptions || [],
@@ -301,8 +301,13 @@ export const ProductCreationCakeOptionsSection: React.FC<
                             onChange={(e) =>
                               handleFlavorOptionChange(index, "displayName", e.target.value)
                             }
-                            className="w-full"
+                            className={`w-full ${errors.cakeFlavorOptions && !option.displayName?.trim() ? "border-destructive" : ""}`}
                           />
+                          {errors.cakeFlavorOptions && !option.displayName?.trim() && (
+                            <p className="text-sm text-destructive mt-1">
+                              {errors.cakeFlavorOptions}
+                            </p>
+                          )}
                         </td>
                         <td className="px-4 py-3">
                           <NumberInput
diff --git a/apps/web-seller/src/features/product/utils/validateProductForm.ts b/apps/web-seller/src/features/product/utils/validateProductForm.ts
index 87f3d611..2524a683 100644
--- a/apps/web-seller/src/features/product/utils/validateProductForm.ts
+++ b/apps/web-seller/src/features/product/utils/validateProductForm.ts
@@ -45,6 +45,15 @@ export const validateProductForm = (
     newErrors.letteringMaxLength = "최대 글자 수는 1 이상 입력해주세요.";
   }
 
+  if (
+    form.cakeFlavorOptions &&
+    form.cakeFlavorOptions.length > 0 &&
+    form.cakeFlavorOptions.some((option) => !option.displayName?.trim())
+  ) {
+    newErrors.cakeFlavorOptions =
+      "입력되지 않은 케이크 옵션명이 있습니다. 확인 후 다시 시도해 주세요.";
+  }
+
   // 상품정보제공고시 검증
   if (!form.productNoticeFoodType?.trim()) {
     newErrors.productNoticeFoodType = "식품의 유형을 입력해주세요.";

From bfcedca40d50bbf9ccd23267341d3c67c061ff4e Mon Sep 17 00:00:00 2001
From: geunu <olo90632951@gmail.com>
Date: Sun, 21 Jun 2026 14:28:56 +0900
Subject: [PATCH 28/41] =?UTF-8?q?[WEB-SELLER][UPDATE]:=20'=EA=B7=9C?=
 =?UTF-8?q?=EC=B9=99=20=EC=B6=94=EA=B0=80'=20=ED=85=8D=EC=8A=A4=ED=8A=B8?=
 =?UTF-8?q?=EB=A5=BC=20'=EC=B6=94=EA=B0=80'=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
 =?UTF-8?q?=ED=95=98=EC=97=AC=20=EC=82=AC=EC=9A=A9=EC=9E=90=20=EC=9D=B8?=
 =?UTF-8?q?=ED=84=B0=ED=8E=98=EC=9D=B4=EC=8A=A4=EC=9D=98=20=EC=96=B8?=
 =?UTF-8?q?=EC=96=B4=EB=A5=BC=20=EA=B0=84=EC=86=8C=ED=99=94=ED=96=88?=
 =?UTF-8?q?=EC=8A=B5=EB=8B=88=EB=8B=A4.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../store/components/StoreRefundCancellationPolicyFields.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web-seller/src/features/store/components/StoreRefundCancellationPolicyFields.tsx b/apps/web-seller/src/features/store/components/StoreRefundCancellationPolicyFields.tsx
index 0fabbbe1..7578c242 100644
--- a/apps/web-seller/src/features/store/components/StoreRefundCancellationPolicyFields.tsx
+++ b/apps/web-seller/src/features/store/components/StoreRefundCancellationPolicyFields.tsx
@@ -42,7 +42,7 @@ export const StoreRefundCancellationPolicyFields: React.FC<Props> = ({
             onClick={() => onChange(appendRefundRule(policy))}
           >
             <Plus className="h-3.5 w-3.5" />
-            규칙 추가
+            추가
           </Button>
         </div>
         <div className="space-y-2 p-3">

From d6ac994a42ffd2833444edf6eff122e6cf671542 Mon Sep 17 00:00:00 2001
From: geunu <olo90632951@gmail.com>
Date: Sun, 21 Jun 2026 14:32:52 +0900
Subject: [PATCH 29/41] =?UTF-8?q?[WEB-USER,WEB-SELLER,BE][UPDATE]:=20'lett?=
 =?UTF-8?q?eringRequired'=20field=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../migration.sql                             |  5 ++
 .../src/infra/database/prisma/schema.prisma   |  6 ---
 .../backend/src/infra/database/prisma/seed.ts |  2 -
 .../product/constants/product.constants.ts    |  8 +--
 .../modules/product/dto/product-create.dto.ts | 10 ----
 .../modules/product/dto/product-detail.dto.ts |  8 ---
 .../modules/product/dto/product-update.dto.ts | 10 ----
 .../services/product-create.service.ts        |  1 -
 .../services/product-update.service.ts        |  3 --
 .../components/forms/ProductCreationForm.tsx  |  9 ----
 .../ProductCreationLetteringPolicySection.tsx | 54 +++++++------------
 .../product/constants/product.constant.ts     |  6 ---
 .../src/features/product/types/product.dto.ts |  8 ---
 .../pages/store/detail/products/Detail.tsx    |  2 -
 .../features/product/types/product.type.ts    |  7 ---
 15 files changed, 24 insertions(+), 115 deletions(-)
 create mode 100644 apps/backend/src/infra/database/prisma/migrations/20260621120000_remove_product_lettering_required/migration.sql

diff --git a/apps/backend/src/infra/database/prisma/migrations/20260621120000_remove_product_lettering_required/migration.sql b/apps/backend/src/infra/database/prisma/migrations/20260621120000_remove_product_lettering_required/migration.sql
new file mode 100644
index 00000000..828e1f6e
--- /dev/null
+++ b/apps/backend/src/infra/database/prisma/migrations/20260621120000_remove_product_lettering_required/migration.sql
@@ -0,0 +1,5 @@
+-- AlterTable
+ALTER TABLE "products" DROP COLUMN "lettering_required";
+
+-- DropEnum
+DROP TYPE "OptionRequired";
diff --git a/apps/backend/src/infra/database/prisma/schema.prisma b/apps/backend/src/infra/database/prisma/schema.prisma
index 0841dce2..e2bd124a 100644
--- a/apps/backend/src/infra/database/prisma/schema.prisma
+++ b/apps/backend/src/infra/database/prisma/schema.prisma
@@ -215,7 +215,6 @@ model Product {
   cakeSizeOptions   Json? @map("cake_size_options") // 케이크 사이즈 옵션
   cakeFlavorOptions  Json? @map("cake_flavor_options") // 케이크 맛 옵션
   letteringVisible   EnableStatus @map("lettering_visible") // 레터링 표시 여부
-  letteringRequired OptionRequired @map("lettering_required") // 레터링 필수 여부
   letteringMaxLength Int @map("lettering_max_length") // 레터링 최대 길이
   imageUploadEnabled EnableStatus @map("image_upload_enabled") // 이미지 업로드 가능 여부
 
@@ -802,11 +801,6 @@ enum AdminApprovalStatus {
   REJECTED // 거절
 }
 
-enum OptionRequired {
-  REQUIRED // 필수
-  OPTIONAL // 선택
-}
-
 enum EnableStatus {
   ENABLE  // 사용
   DISABLE // 미사용
diff --git a/apps/backend/src/infra/database/prisma/seed.ts b/apps/backend/src/infra/database/prisma/seed.ts
index d743446e..27e20473 100644
--- a/apps/backend/src/infra/database/prisma/seed.ts
+++ b/apps/backend/src/infra/database/prisma/seed.ts
@@ -175,7 +175,6 @@ const SEED_PRODUCT_BASE = {
   ],
   LETTERING: {
     VISIBLE: "ENABLE",
-    REQUIRED: "OPTIONAL",
     MAX_LENGTH: 20,
   },
   SEARCH_TAGS: ["생일케이크", "초콜릿", "당일배송"],
@@ -594,7 +593,6 @@ async function upsertProducts(stores: Awaited<ReturnType<typeof upsertStores>>)
         cakeSizeOptions: SEED_PRODUCT_BASE.SIZE_OPTIONS,
         cakeFlavorOptions: SEED_PRODUCT_BASE.FLAVOR_OPTIONS,
         letteringVisible: SEED_PRODUCT_BASE.LETTERING.VISIBLE as "ENABLE" | "DISABLE",
-        letteringRequired: SEED_PRODUCT_BASE.LETTERING.REQUIRED as "REQUIRED" | "OPTIONAL",
         letteringMaxLength: SEED_PRODUCT_BASE.LETTERING.MAX_LENGTH,
         imageUploadEnabled,
         productType,
diff --git a/apps/backend/src/modules/product/constants/product.constants.ts b/apps/backend/src/modules/product/constants/product.constants.ts
index 0b6eb28a..0d94358d 100644
--- a/apps/backend/src/modules/product/constants/product.constants.ts
+++ b/apps/backend/src/modules/product/constants/product.constants.ts
@@ -44,13 +44,8 @@ export enum SortBy {
 }
 
 /**
- * 옵션 필수/선택 enum
+ * 사용/미사용 enum
  */
-export enum OptionRequired {
-  REQUIRED = "REQUIRED", // 필수
-  OPTIONAL = "OPTIONAL", // 선택
-}
-
 export enum EnableStatus {
   ENABLE = "ENABLE", // 사용
   DISABLE = "DISABLE", // 미사용
@@ -141,7 +136,6 @@ export const SWAGGER_EXAMPLES = {
       },
     ],
     letteringVisible: EnableStatus.ENABLE,
-    letteringRequired: OptionRequired.OPTIONAL,
     letteringMaxLength: 20,
     imageUploadEnabled: EnableStatus.ENABLE,
     productType: "CUSTOM_CAKE",
diff --git a/apps/backend/src/modules/product/dto/product-create.dto.ts b/apps/backend/src/modules/product/dto/product-create.dto.ts
index c6a59d1e..4b37a5f4 100644
--- a/apps/backend/src/modules/product/dto/product-create.dto.ts
+++ b/apps/backend/src/modules/product/dto/product-create.dto.ts
@@ -11,7 +11,6 @@ import {
 } from "class-validator";
 import { Type } from "class-transformer";
 import {
-  OptionRequired,
   EnableStatus,
   ProductCategoryType,
   CakeSizeDisplayName,
@@ -212,15 +211,6 @@ export class CreateProductRequestDto {
   @IsEnum(EnableStatus)
   letteringVisible: EnableStatus;
 
-  @ApiPropertyOptional({
-    description: "레터링 문구 사용 (필수/선택)",
-    enum: OptionRequired,
-    example: OptionRequired.REQUIRED,
-  })
-  @IsNotEmpty()
-  @IsEnum(OptionRequired)
-  letteringRequired: OptionRequired;
-
   @ApiPropertyOptional({
     description: "레터링 최대 글자 수",
     example: PRODUCT_SWAGGER_EXAMPLES.PRODUCT_DATA.letteringMaxLength,
diff --git a/apps/backend/src/modules/product/dto/product-detail.dto.ts b/apps/backend/src/modules/product/dto/product-detail.dto.ts
index 97091bd4..7e9888e3 100644
--- a/apps/backend/src/modules/product/dto/product-detail.dto.ts
+++ b/apps/backend/src/modules/product/dto/product-detail.dto.ts
@@ -1,6 +1,5 @@
 import { ApiProperty, ApiPropertyOptional } from "@nestjs/swagger";
 import {
-  OptionRequired,
   EnableStatus,
   ProductType,
   ProductCategoryType,
@@ -113,13 +112,6 @@ export class ProductResponseDto extends PickupAddressDto {
   })
   letteringVisible: EnableStatus;
 
-  @ApiProperty({
-    description: "레터링 문구 사용 (필수/선택)",
-    enum: OptionRequired,
-    example: OptionRequired.OPTIONAL,
-  })
-  letteringRequired: OptionRequired;
-
   @ApiProperty({
     description: "레터링 최대 글자 수",
     example: SWAGGER_EXAMPLES.PRODUCT_DATA.letteringMaxLength,
diff --git a/apps/backend/src/modules/product/dto/product-update.dto.ts b/apps/backend/src/modules/product/dto/product-update.dto.ts
index eaf1da5f..fb19d449 100644
--- a/apps/backend/src/modules/product/dto/product-update.dto.ts
+++ b/apps/backend/src/modules/product/dto/product-update.dto.ts
@@ -11,7 +11,6 @@ import {
 } from "class-validator";
 import { Type } from "class-transformer";
 import {
-  OptionRequired,
   EnableStatus,
   ProductCategoryType,
 } from "@apps/backend/modules/product/constants/product.constants";
@@ -136,15 +135,6 @@ export class UpdateProductRequestDto {
   @IsEnum(EnableStatus)
   letteringVisible?: EnableStatus;
 
-  @ApiPropertyOptional({
-    description: "레터링 문구 사용 (필수/선택)",
-    enum: OptionRequired,
-    example: OptionRequired.REQUIRED,
-  })
-  @IsOptional()
-  @IsEnum(OptionRequired)
-  letteringRequired?: OptionRequired;
-
   @ApiPropertyOptional({
     description: "레터링 최대 글자 수",
     example: PRODUCT_SWAGGER_EXAMPLES.PRODUCT_DATA.letteringMaxLength,
diff --git a/apps/backend/src/modules/product/services/product-create.service.ts b/apps/backend/src/modules/product/services/product-create.service.ts
index 17bfb273..413f1a0f 100644
--- a/apps/backend/src/modules/product/services/product-create.service.ts
+++ b/apps/backend/src/modules/product/services/product-create.service.ts
@@ -90,7 +90,6 @@ export class ProductCreateService {
             cakeSizeOptions: cakeSizeOptionsWithId as unknown as Prisma.InputJsonValue,
             cakeFlavorOptions: cakeFlavorOptionsWithId as unknown as Prisma.InputJsonValue,
             letteringVisible: createProductDto.letteringVisible,
-            letteringRequired: createProductDto.letteringRequired,
             letteringMaxLength: createProductDto.letteringMaxLength,
             imageUploadEnabled: createProductDto.imageUploadEnabled,
             productType,
diff --git a/apps/backend/src/modules/product/services/product-update.service.ts b/apps/backend/src/modules/product/services/product-update.service.ts
index f72e69e2..5af81c87 100644
--- a/apps/backend/src/modules/product/services/product-update.service.ts
+++ b/apps/backend/src/modules/product/services/product-update.service.ts
@@ -142,9 +142,6 @@ export class ProductUpdateService {
     if (updateProductDto.letteringVisible !== undefined) {
       updateData.letteringVisible = updateProductDto.letteringVisible;
     }
-    if (updateProductDto.letteringRequired !== undefined) {
-      updateData.letteringRequired = updateProductDto.letteringRequired;
-    }
     if (updateProductDto.letteringMaxLength !== undefined) {
       updateData.letteringMaxLength = updateProductDto.letteringMaxLength;
     }
diff --git a/apps/web-seller/src/features/product/components/forms/ProductCreationForm.tsx b/apps/web-seller/src/features/product/components/forms/ProductCreationForm.tsx
index 0281af15..4fa0d1f7 100644
--- a/apps/web-seller/src/features/product/components/forms/ProductCreationForm.tsx
+++ b/apps/web-seller/src/features/product/components/forms/ProductCreationForm.tsx
@@ -9,7 +9,6 @@ import {
 } from "@/apps/web-seller/common/components/tabs/Tabs";
 import {
   EnableStatus,
-  OptionRequired,
   CakeSizeOptionDto,
   CakeFlavorOptionDto,
   ProductCategoryType,
@@ -56,7 +55,6 @@ export const defaultForm: ProductForm = {
     },
   ],
   letteringVisible: EnableStatus.ENABLE,
-  letteringRequired: OptionRequired.OPTIONAL,
   letteringMaxLength: 1,
   imageUploadEnabled: EnableStatus.ENABLE,
   productCategoryTypes: [],
@@ -185,12 +183,6 @@ export const ProductCreationForm: React.FC<Props> = ({
     onChange?.(next);
   };
 
-  const handleLetteringRequiredChange = (value: OptionRequired) => {
-    const next = { ...form, letteringRequired: value };
-    setForm(next);
-    onChange?.(next);
-  };
-
   const handleLetteringMaxLengthChange = (value: number) => {
     if (disabled) return;
     const next = { ...form, letteringMaxLength: value };
@@ -302,7 +294,6 @@ export const ProductCreationForm: React.FC<Props> = ({
                 form={form}
                 errors={errors}
                 onLetteringVisibleChange={handleLetteringVisibleChange}
-                onLetteringRequiredChange={handleLetteringRequiredChange}
                 onLetteringMaxLengthChange={handleLetteringMaxLengthChange}
                 onImageUploadEnabledChange={handleImageUploadEnabledChange}
                 disabled={disabled}
diff --git a/apps/web-seller/src/features/product/components/sections/ProductCreationLetteringPolicySection.tsx b/apps/web-seller/src/features/product/components/sections/ProductCreationLetteringPolicySection.tsx
index 757d3d25..9fa005e3 100644
--- a/apps/web-seller/src/features/product/components/sections/ProductCreationLetteringPolicySection.tsx
+++ b/apps/web-seller/src/features/product/components/sections/ProductCreationLetteringPolicySection.tsx
@@ -1,10 +1,7 @@
 import React from "react";
-import { EnableStatus, OptionRequired } from "@/apps/web-seller/features/product/types/product.dto";
+import { EnableStatus } from "@/apps/web-seller/features/product/types/product.dto";
 import type { ProductForm } from "@/apps/web-seller/features/product/types/product.ui";
-import {
-  OPTION_REQUIRED_OPTIONS,
-  ENABLE_DISABLE_OPTIONS,
-} from "@/apps/web-seller/features/product/constants/product.constant";
+import { ENABLE_DISABLE_OPTIONS } from "@/apps/web-seller/features/product/constants/product.constant";
 import { SelectBox } from "@/apps/web-seller/common/components/selects/SelectBox";
 import { NumberInput } from "@/apps/web-seller/common/components/inputs/NumberInput";
 import { Label } from "@/apps/web-seller/common/components/labels/Label";
@@ -14,7 +11,6 @@ export interface ProductCreationLetteringPolicySectionProps {
   form: ProductForm;
   errors: Partial<Record<keyof ProductForm, string>>;
   onLetteringVisibleChange: (value: EnableStatus) => void;
-  onLetteringRequiredChange: (value: OptionRequired) => void;
   onLetteringMaxLengthChange: (value: number) => void;
   onImageUploadEnabledChange: (value: EnableStatus) => void;
   disabled?: boolean;
@@ -27,7 +23,6 @@ export const ProductCreationLetteringPolicySection: React.FC<
   form,
   errors,
   onLetteringVisibleChange,
-  onLetteringRequiredChange,
   onLetteringMaxLengthChange,
   onImageUploadEnabledChange,
   disabled = false,
@@ -51,35 +46,22 @@ export const ProductCreationLetteringPolicySection: React.FC<
           </div>
 
           {form.letteringVisible === EnableStatus.ENABLE && (
-            <>
-              <div>
-                <SelectBox
-                  label="레터링 문구 필수 여부"
-                  value={form.letteringRequired}
-                  onChange={(value) => onLetteringRequiredChange(value as OptionRequired)}
-                  options={OPTION_REQUIRED_OPTIONS}
-                  error={errors.letteringRequired}
-                  required
-                />
-              </div>
-
-              <div>
-                <Label className="after:content-['*'] after:ml-0.5 after:text-destructive">
-                  최대 글자 수
-                </Label>
-                <NumberInput
-                  value={form.letteringMaxLength}
-                  onChange={(v) => onLetteringMaxLengthChange(v ?? 0)}
-                  placeholder=""
-                  min={1}
-                  className={errors.letteringMaxLength ? "border-destructive" : ""}
-                  disabled={disabled}
-                />
-                {errors.letteringMaxLength && (
-                  <p className="text-sm text-destructive mt-1">{errors.letteringMaxLength}</p>
-                )}
-              </div>
-            </>
+            <div>
+              <Label className="after:content-['*'] after:ml-0.5 after:text-destructive">
+                최대 글자 수
+              </Label>
+              <NumberInput
+                value={form.letteringMaxLength}
+                onChange={(v) => onLetteringMaxLengthChange(v ?? 0)}
+                placeholder=""
+                min={1}
+                className={errors.letteringMaxLength ? "border-destructive" : ""}
+                disabled={disabled}
+              />
+              {errors.letteringMaxLength && (
+                <p className="text-sm text-destructive mt-1">{errors.letteringMaxLength}</p>
+              )}
+            </div>
           )}
 
           <div>
diff --git a/apps/web-seller/src/features/product/constants/product.constant.ts b/apps/web-seller/src/features/product/constants/product.constant.ts
index a2d3545b..499451fa 100644
--- a/apps/web-seller/src/features/product/constants/product.constant.ts
+++ b/apps/web-seller/src/features/product/constants/product.constant.ts
@@ -1,6 +1,5 @@
 import {
   EnableStatus,
-  OptionRequired,
   CakeSizeDisplayName,
   ProductCategoryType,
 } from "@/apps/web-seller/features/product/types/product.dto";
@@ -15,11 +14,6 @@ export const VISIBILITY_STATUS_OPTIONS = [
   { value: EnableStatus.DISABLE, label: "숨김" },
 ] as const;
 
-export const OPTION_REQUIRED_OPTIONS = [
-  { value: OptionRequired.REQUIRED, label: "필수" },
-  { value: OptionRequired.OPTIONAL, label: "선택" },
-] as const;
-
 export const ENABLE_DISABLE_OPTIONS = [
   { value: EnableStatus.ENABLE, label: "사용" },
   { value: EnableStatus.DISABLE, label: "미사용" },
diff --git a/apps/web-seller/src/features/product/types/product.dto.ts b/apps/web-seller/src/features/product/types/product.dto.ts
index 5a710962..a1a5c14b 100644
--- a/apps/web-seller/src/features/product/types/product.dto.ts
+++ b/apps/web-seller/src/features/product/types/product.dto.ts
@@ -12,11 +12,6 @@ export enum EnableStatus {
   DISABLE = "DISABLE",
 }
 
-export enum OptionRequired {
-  REQUIRED = "REQUIRED",
-  OPTIONAL = "OPTIONAL",
-}
-
 export enum ProductType {
   BASIC_CAKE = "BASIC_CAKE",
   CUSTOM_CAKE = "CUSTOM_CAKE",
@@ -83,7 +78,6 @@ export interface CreateProductRequestDto {
   cakeSizeOptions?: CakeSizeOptionDto[];
   cakeFlavorOptions?: CakeFlavorOptionDto[];
   letteringVisible: EnableStatus;
-  letteringRequired: OptionRequired;
   letteringMaxLength: number;
   imageUploadEnabled: EnableStatus;
   productType?: ProductType;
@@ -123,7 +117,6 @@ export interface ProductResponseDto {
   cakeSizeOptions?: CakeSizeOptionDto[] | null;
   cakeFlavorOptions?: CakeFlavorOptionDto[] | null;
   letteringVisible: EnableStatus;
-  letteringRequired: OptionRequired;
   letteringMaxLength: number;
   imageUploadEnabled: EnableStatus;
   productType: ProductType;
@@ -193,7 +186,6 @@ export interface UpdateProductRequestDto {
   cakeSizeOptions?: CakeSizeOptionDto[];
   cakeFlavorOptions?: CakeFlavorOptionDto[];
   letteringVisible?: EnableStatus;
-  letteringRequired?: OptionRequired;
   letteringMaxLength?: number;
   imageUploadEnabled?: EnableStatus;
   productType?: ProductType;
diff --git a/apps/web-seller/src/pages/store/detail/products/Detail.tsx b/apps/web-seller/src/pages/store/detail/products/Detail.tsx
index 1f67b718..27ebd7d1 100644
--- a/apps/web-seller/src/pages/store/detail/products/Detail.tsx
+++ b/apps/web-seller/src/pages/store/detail/products/Detail.tsx
@@ -58,7 +58,6 @@ export const StoreDetailProductDetailPage: React.FC = () => {
     cakeSizeOptions: (product.cakeSizeOptions as any) || [],
     cakeFlavorOptions: (product.cakeFlavorOptions as any) || [],
     letteringVisible: product.letteringVisible || EnableStatus.ENABLE,
-    letteringRequired: product.letteringRequired as any,
     letteringMaxLength: product.letteringMaxLength,
     imageUploadEnabled: product.imageUploadEnabled as any,
     productCategoryTypes: product.productCategoryTypes ?? [],
@@ -91,7 +90,6 @@ export const StoreDetailProductDetailPage: React.FC = () => {
       cakeSizeOptions: data.cakeSizeOptions,
       cakeFlavorOptions: data.cakeFlavorOptions,
       letteringVisible: data.letteringVisible,
-      letteringRequired: data.letteringRequired,
       letteringMaxLength: data.letteringMaxLength,
       imageUploadEnabled: data.imageUploadEnabled,
       productCategoryTypes: data.productCategoryTypes,
diff --git a/apps/web-user/src/features/product/types/product.type.ts b/apps/web-user/src/features/product/types/product.type.ts
index 7ea01d86..78d4f277 100644
--- a/apps/web-user/src/features/product/types/product.type.ts
+++ b/apps/web-user/src/features/product/types/product.type.ts
@@ -23,12 +23,6 @@ export enum VisibilityStatus {
   DISABLE = "DISABLE",
 }
 
-export enum LetteringRequired {
-  REQUIRED = "REQUIRED",
-  OPTIONAL = "OPTIONAL",
-  DISABLED = "DISABLED",
-}
-
 export enum ImageUploadEnabled {
   ENABLE = "ENABLE",
   DISABLE = "DISABLE",
@@ -94,7 +88,6 @@ export interface Product {
   cakeSizeOptions: CakeSizeOption[];
   cakeFlavorOptions: CakeFlavorOption[];
   letteringVisible: VisibleStatus;
-  letteringRequired: LetteringRequired;
   letteringMaxLength: number;
   imageUploadEnabled: ImageUploadEnabled;
   productType: ProductType;

From 995490e6ae6cae231d77ea2abbf679bf94fa9f0e Mon Sep 17 00:00:00 2001
From: geunu <olo90632951@gmail.com>
Date: Sun, 21 Jun 2026 14:37:34 +0900
Subject: [PATCH 30/41] =?UTF-8?q?[WEB-SELLER][UPDATE]:=20=EB=A0=88?=
 =?UTF-8?q?=ED=84=B0=EB=A7=81=20=EC=A0=95=EC=B1=85=20->=20=EC=98=B5?=
 =?UTF-8?q?=EC=85=98=EC=9C=BC=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../product/components/forms/ProductCreationForm.tsx   |  6 +++---
 ...cySection.tsx => ProductCreationOptionsSection.tsx} | 10 ++++------
 2 files changed, 7 insertions(+), 9 deletions(-)
 rename apps/web-seller/src/features/product/components/sections/{ProductCreationLetteringPolicySection.tsx => ProductCreationOptionsSection.tsx} (90%)

diff --git a/apps/web-seller/src/features/product/components/forms/ProductCreationForm.tsx b/apps/web-seller/src/features/product/components/forms/ProductCreationForm.tsx
index 4fa0d1f7..240ef4ee 100644
--- a/apps/web-seller/src/features/product/components/forms/ProductCreationForm.tsx
+++ b/apps/web-seller/src/features/product/components/forms/ProductCreationForm.tsx
@@ -17,7 +17,7 @@ import {
 import type { ProductForm } from "@/apps/web-seller/features/product/types/product.ui";
 import { ProductCreationBasicInfoSection } from "@/apps/web-seller/features/product/components/sections/ProductCreationBasicInfoSection";
 import { ProductCreationCakeOptionsSection } from "@/apps/web-seller/features/product/components/sections/ProductCreationCakeOptionsSection";
-import { ProductCreationLetteringPolicySection } from "@/apps/web-seller/features/product/components/sections/ProductCreationLetteringPolicySection";
+import { ProductCreationOptionsSection } from "@/apps/web-seller/features/product/components/sections/ProductCreationOptionsSection";
 import { ProductCreationDetailDescriptionSection } from "@/apps/web-seller/features/product/components/sections/ProductCreationDetailDescriptionSection";
 import { ProductCreationProductNoticeSection } from "@/apps/web-seller/features/product/components/sections/ProductCreationProductNoticeSection";
 import { validateProductForm } from "@/apps/web-seller/features/product/utils/validateProductForm";
@@ -289,8 +289,8 @@ export const ProductCreationForm: React.FC<Props> = ({
                 onCakeFlavorOptionsChange={handleCakeFlavorOptionsChange}
               />
 
-              {/* 레터링 정책 섹션 */}
-              <ProductCreationLetteringPolicySection
+              {/* 옵션 섹션 */}
+              <ProductCreationOptionsSection
                 form={form}
                 errors={errors}
                 onLetteringVisibleChange={handleLetteringVisibleChange}
diff --git a/apps/web-seller/src/features/product/components/sections/ProductCreationLetteringPolicySection.tsx b/apps/web-seller/src/features/product/components/sections/ProductCreationOptionsSection.tsx
similarity index 90%
rename from apps/web-seller/src/features/product/components/sections/ProductCreationLetteringPolicySection.tsx
rename to apps/web-seller/src/features/product/components/sections/ProductCreationOptionsSection.tsx
index 9fa005e3..029cf01c 100644
--- a/apps/web-seller/src/features/product/components/sections/ProductCreationLetteringPolicySection.tsx
+++ b/apps/web-seller/src/features/product/components/sections/ProductCreationOptionsSection.tsx
@@ -7,7 +7,7 @@ import { NumberInput } from "@/apps/web-seller/common/components/inputs/NumberIn
 import { Label } from "@/apps/web-seller/common/components/labels/Label";
 import { Card, CardContent } from "@/apps/web-seller/common/components/cards/Card";
 
-export interface ProductCreationLetteringPolicySectionProps {
+export interface ProductCreationOptionsSectionProps {
   form: ProductForm;
   errors: Partial<Record<keyof ProductForm, string>>;
   onLetteringVisibleChange: (value: EnableStatus) => void;
@@ -16,10 +16,8 @@ export interface ProductCreationLetteringPolicySectionProps {
   disabled?: boolean;
 }
 
-// 상품 등록 폼 - 레터링 정책 섹션
-export const ProductCreationLetteringPolicySection: React.FC<
-  ProductCreationLetteringPolicySectionProps
-> = ({
+// 상품 등록 폼 - 옵션 섹션
+export const ProductCreationOptionsSection: React.FC<ProductCreationOptionsSectionProps> = ({
   form,
   errors,
   onLetteringVisibleChange,
@@ -30,7 +28,7 @@ export const ProductCreationLetteringPolicySection: React.FC<
   return (
     <Card>
       <CardContent className="p-6">
-        <h2 className="text-xl font-semibold mb-2">레터링 정책</h2>
+        <h2 className="text-xl font-semibold mb-2">옵션</h2>
         <div className="border-t mb-6" />
 
         <div className="grid grid-cols-1 gap-6">

From 11575e4a78f4a861c6d86f11a00d658aea637100 Mon Sep 17 00:00:00 2001
From: geunu <olo90632951@gmail.com>
Date: Sun, 21 Jun 2026 14:43:37 +0900
Subject: [PATCH 31/41] =?UTF-8?q?[WEB-SELLER][UPDATE]:=20Alert=20title=20h?=
 =?UTF-8?q?andling=20improved=20by=20removing=20hardcoded=20"=EC=98=A4?=
 =?UTF-8?q?=EB=A5=98"=20and=20introducing=20dynamic=20title=20assignment?=
 =?UTF-8?q?=20based=20on=20alert=20severity.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-seller/src/common/store/alert.store.ts            | 7 +++++++
 .../src/features/auth/hooks/mutations/useAuthMutation.ts   | 5 -----
 .../features/mypage/hooks/mutations/useMypageMutation.ts   | 3 ---
 apps/web-seller/src/pages/auth/GoogleAuthCallback.tsx      | 1 -
 apps/web-seller/src/pages/auth/KakaoAuthCallback.tsx       | 1 -
 5 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/apps/web-seller/src/common/store/alert.store.ts b/apps/web-seller/src/common/store/alert.store.ts
index d4a530e8..f65bd551 100644
--- a/apps/web-seller/src/common/store/alert.store.ts
+++ b/apps/web-seller/src/common/store/alert.store.ts
@@ -1,5 +1,7 @@
 import { create } from "zustand";
 
+export const ALERT_ERROR_TITLE = "알림";
+
 export interface AlertItem {
   id: string;
   message: string;
@@ -21,8 +23,13 @@ export const useAlertStore = create<AlertStore>((set) => ({
 
   addAlert: (alert) => {
     const id = `alert-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+    const title =
+      alert.title === "오류"
+        ? ALERT_ERROR_TITLE
+        : alert.title ?? (alert.severity === "error" ? ALERT_ERROR_TITLE : undefined);
     const newAlert: AlertItem = {
       ...alert,
+      title,
       id,
       autoHideDuration: alert.autoHideDuration ?? 6000, // 기본 6초
     };
diff --git a/apps/web-seller/src/features/auth/hooks/mutations/useAuthMutation.ts b/apps/web-seller/src/features/auth/hooks/mutations/useAuthMutation.ts
index 4f8938f1..0e33f1fd 100644
--- a/apps/web-seller/src/features/auth/hooks/mutations/useAuthMutation.ts
+++ b/apps/web-seller/src/features/auth/hooks/mutations/useAuthMutation.ts
@@ -38,7 +38,6 @@ export function useSendPhoneVerification() {
     onError: (error) => {
       addAlert({
         message: getApiMessage.error(error),
-        title: "오류",
         severity: "error",
       });
     },
@@ -54,7 +53,6 @@ export function useVerifyPhoneCode() {
     onError: (error) => {
       addAlert({
         message: getApiMessage.error(error),
-        title: "오류",
         severity: "error",
       });
     },
@@ -75,7 +73,6 @@ export function useGoogleRegister() {
     onError: (error) => {
       addAlert({
         message: getApiMessage.error(error),
-        title: "오류",
         severity: "error",
       });
     },
@@ -96,7 +93,6 @@ export function useKakaoRegister() {
     onError: (error) => {
       addAlert({
         message: getApiMessage.error(error),
-        title: "오류",
         severity: "error",
       });
     },
@@ -112,7 +108,6 @@ export function useFindAccount() {
     onError: (error) => {
       addAlert({
         message: getApiMessage.error(error),
-        title: "오류",
         severity: "error",
       });
     },
diff --git a/apps/web-seller/src/features/mypage/hooks/mutations/useMypageMutation.ts b/apps/web-seller/src/features/mypage/hooks/mutations/useMypageMutation.ts
index 5743ccef..6ed4a473 100644
--- a/apps/web-seller/src/features/mypage/hooks/mutations/useMypageMutation.ts
+++ b/apps/web-seller/src/features/mypage/hooks/mutations/useMypageMutation.ts
@@ -26,7 +26,6 @@ export function useUpdateMypageProfile() {
     onError: (error) => {
       addAlert({
         message: getApiMessage.error(error),
-        title: "오류",
         severity: "error",
       });
     },
@@ -51,7 +50,6 @@ export function useMypageChangePhone() {
     onError: (error) => {
       addAlert({
         message: getApiMessage.error(error),
-        title: "오류",
         severity: "error",
       });
     },
@@ -74,7 +72,6 @@ export function useMypageWithdraw() {
     onError: (error) => {
       addAlert({
         message: getApiMessage.error(error),
-        title: "오류",
         severity: "error",
       });
     },
diff --git a/apps/web-seller/src/pages/auth/GoogleAuthCallback.tsx b/apps/web-seller/src/pages/auth/GoogleAuthCallback.tsx
index 87ffc808..aa9e6a30 100644
--- a/apps/web-seller/src/pages/auth/GoogleAuthCallback.tsx
+++ b/apps/web-seller/src/pages/auth/GoogleAuthCallback.tsx
@@ -130,7 +130,6 @@ export function GoogleAuthCallbackPage() {
         navigate(ROUTES.AUTH.LOGIN, { replace: true });
         addAlert({
           message: getApiMessage.error(error),
-          title: "오류",
           severity: "error",
         });
       }
diff --git a/apps/web-seller/src/pages/auth/KakaoAuthCallback.tsx b/apps/web-seller/src/pages/auth/KakaoAuthCallback.tsx
index fa9d167d..f906dcca 100644
--- a/apps/web-seller/src/pages/auth/KakaoAuthCallback.tsx
+++ b/apps/web-seller/src/pages/auth/KakaoAuthCallback.tsx
@@ -126,7 +126,6 @@ export function KakaoAuthCallbackPage() {
         navigate(ROUTES.AUTH.LOGIN, { replace: true });
         addAlert({
           message: getApiMessage.error(error),
-          title: "오류",
           severity: "error",
         });
       }

From eeb1cb8897b9d43944ccb3ac031d026f23a8c24a Mon Sep 17 00:00:00 2001
From: geunu <olo90632951@gmail.com>
Date: Sun, 21 Jun 2026 14:46:11 +0900
Subject: [PATCH 32/41] [WEB-SELLER][UPDATE]: Adjusted layout of
 StoreCalendarPage by centering button group and adding gap for improved
 visual alignment.

---
 .../features/store/components/calendar/StoreCalendarPage.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web-seller/src/features/store/components/calendar/StoreCalendarPage.tsx b/apps/web-seller/src/features/store/components/calendar/StoreCalendarPage.tsx
index f78051f5..0f619da7 100644
--- a/apps/web-seller/src/features/store/components/calendar/StoreCalendarPage.tsx
+++ b/apps/web-seller/src/features/store/components/calendar/StoreCalendarPage.tsx
@@ -415,7 +415,7 @@ export const StoreCalendarPage: React.FC = () => {
           <div className="grid gap-6 lg:grid-cols-[1fr_minmax(280px,360px)]">
             <Card>
               <CardContent className="p-4 sm:p-5">
-                <div className="mb-4 flex items-center justify-between">
+                <div className="mb-4 flex items-center justify-center gap-1">
                   <Button type="button" variant="ghost" size="icon" onClick={goPrevMonth}>
                     <ChevronLeft className="h-5 w-5" />
                   </Button>

From be44e9ab3788786d236d314ae5241f5cddd635f4 Mon Sep 17 00:00:00 2001
From: geunu <olo90632951@gmail.com>
Date: Sun, 21 Jun 2026 14:55:41 +0900
Subject: [PATCH 33/41] [WEB-SELLER][UPDATE]: Replaced
 AdminHeaderNotificationButton with AdminHeaderNotificationDropdown for
 enhanced notification handling and user experience in AdminLayout.

---
 .../common/components/layouts/AdminLayout.tsx |  54 +----
 .../AdminHeaderNotificationDropdown.tsx       | 212 ++++++++++++++++++
 2 files changed, 218 insertions(+), 48 deletions(-)
 create mode 100644 apps/web-seller/src/features/notification/components/AdminHeaderNotificationDropdown.tsx

diff --git a/apps/web-seller/src/common/components/layouts/AdminLayout.tsx b/apps/web-seller/src/common/components/layouts/AdminLayout.tsx
index 8e119ce5..51e333bf 100644
--- a/apps/web-seller/src/common/components/layouts/AdminLayout.tsx
+++ b/apps/web-seller/src/common/components/layouts/AdminLayout.tsx
@@ -1,55 +1,13 @@
-import React, { useState, useEffect, useMemo, useRef } from "react";
-import { useNavigate, useLocation } from "react-router-dom";
+import React, { useState, useEffect, useRef } from "react";
+import { useNavigate } from "react-router-dom";
 import { BaseButton as Button } from "@/apps/web-seller/common/components/buttons/BaseButton";
-import { Menu, User, LogOut, Bell, UserCircle } from "lucide-react";
+import { Menu, User, LogOut, UserCircle } from "lucide-react";
 import { AdminSidebar } from "@/apps/web-seller/common/components/sidebar/AdminSidebar";
 import { ROUTES } from "@/apps/web-seller/common/constants/paths.constant";
 import { useAuthStore } from "@/apps/web-seller/features/auth/store/auth.store";
 import { useLogout } from "@/apps/web-seller/features/auth/hooks/mutations/useAuthMutation";
-import {
-  SellerNotificationScope,
-  useSellerNotifications,
-} from "@/apps/web-seller/features/notification/components/providers/SellerNotificationProvider";
-import { cn } from "@/apps/web-seller/common/utils/classname.util";
-
-function AdminHeaderNotificationButton() {
-  const navigate = useNavigate();
-  const location = useLocation();
-  const notif = useSellerNotifications();
-
-  const storeId = useMemo(() => {
-    const m = location.pathname.match(/^\/stores\/([^/]+)/);
-    return m ? m[1] : null;
-  }, [location.pathname]);
-
-  if (!storeId || !notif) {
-    return null;
-  }
-
-  const unread = notif.unreadCount;
-
-  return (
-    <Button
-      variant="ghost"
-      size="icon"
-      type="button"
-      onClick={() => navigate(ROUTES.STORE_DETAIL_NOTIFICATIONS_LIST(storeId))}
-      className="relative mr-1 shrink-0 text-zinc-700 hover:bg-zinc-100"
-      aria-label={unread > 0 ? `알림 ${unread}건 읽지 않음` : "알림"}
-    >
-      <Bell className="h-6 w-6" />
-      {unread > 0 ? (
-        <span
-          className={cn(
-            "absolute -right-0.5 -top-0.5 flex min-h-[1.125rem] min-w-[1.125rem] items-center justify-center rounded-full bg-rose-600 px-1 text-[10px] font-bold leading-none text-white",
-          )}
-        >
-          {unread > 99 ? "99+" : unread}
-        </span>
-      ) : null}
-    </Button>
-  );
-}
+import { SellerNotificationScope } from "@/apps/web-seller/features/notification/components/providers/SellerNotificationProvider";
+import { AdminHeaderNotificationDropdown } from "@/apps/web-seller/features/notification/components/AdminHeaderNotificationDropdown";
 
 const drawerWidth = 300;
 
@@ -137,7 +95,7 @@ export const AdminLayout: React.FC<AdminLayoutProps> = ({ children }) => {
             </Button>
             {isAuthenticated && (
               <div className="flex items-center">
-                <AdminHeaderNotificationButton />
+                <AdminHeaderNotificationDropdown />
                 <div ref={profileMenuRef} className="relative flex shrink-0 items-center">
                   <Button
                     variant="ghost"
diff --git a/apps/web-seller/src/features/notification/components/AdminHeaderNotificationDropdown.tsx b/apps/web-seller/src/features/notification/components/AdminHeaderNotificationDropdown.tsx
new file mode 100644
index 00000000..4f08ff5c
--- /dev/null
+++ b/apps/web-seller/src/features/notification/components/AdminHeaderNotificationDropdown.tsx
@@ -0,0 +1,212 @@
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+import { Bell, ChevronRight } from "lucide-react";
+import { BaseButton as Button } from "@/apps/web-seller/common/components/buttons/BaseButton";
+import { ROUTES } from "@/apps/web-seller/common/constants/paths.constant";
+import { cn } from "@/apps/web-seller/common/utils/classname.util";
+import { LoadingSpinner } from "@/apps/web-seller/common/components/loading/LoadingSpinner";
+import { useSellerNotifications } from "@/apps/web-seller/features/notification/components/providers/SellerNotificationProvider";
+import type { SellerNotificationItem } from "@/apps/web-seller/features/notification/types/notification.dto";
+
+const PREVIEW_LIMIT = 8;
+
+function formatNotificationTime(iso: string): string {
+  return new Date(iso).toLocaleString("ko-KR", {
+    month: "short",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+}
+
+function NotificationDropdownItem(props: {
+  item: SellerNotificationItem;
+  onClick: () => void;
+}) {
+  const { item, onClick } = props;
+
+  return (
+    <li>
+      <button
+        type="button"
+        onClick={onClick}
+        className={cn(
+          "flex w-full items-center gap-3 px-4 py-3 text-left transition-colors hover:bg-zinc-50",
+          !item.read && "bg-primary/5",
+        )}
+      >
+        <div
+          className={cn(
+            "flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border",
+            item.read
+              ? "border-zinc-200 bg-zinc-50 text-zinc-500"
+              : "border-primary/25 bg-primary/[0.07] text-primary",
+          )}
+          aria-hidden
+        >
+          <Bell className="h-4 w-4" strokeWidth={2} aria-hidden />
+        </div>
+        <div className="min-w-0 flex-1 space-y-0.5">
+          <span className="block truncate text-sm font-medium leading-snug text-zinc-900">
+            {item.title}
+          </span>
+          <p className="truncate text-xs text-zinc-500">{item.body}</p>
+          <p className="text-[11px] text-zinc-400">{formatNotificationTime(item.createdAt)}</p>
+        </div>
+        <ChevronRight className="h-4 w-4 shrink-0 text-zinc-400" strokeWidth={2} aria-hidden />
+      </button>
+    </li>
+  );
+}
+
+/** 헤더 알림 아이콘 — 클릭 시 아이콘 아래 드롭다운으로 최근 알림 미리보기 */
+export function AdminHeaderNotificationDropdown() {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const notif = useSellerNotifications();
+  const [isOpen, setIsOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const storeId = useMemo(() => {
+    const m = location.pathname.match(/^\/stores\/([^/]+)/);
+    return m ? m[1] : null;
+  }, [location.pathname]);
+
+  const previewItems = useMemo(
+    () => (notif?.items ?? []).slice(0, PREVIEW_LIMIT),
+    [notif?.items],
+  );
+
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const handlePointerDown = (e: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handlePointerDown);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("mousedown", handlePointerDown);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [isOpen]);
+
+  useEffect(() => {
+    setIsOpen(false);
+  }, [location.pathname]);
+
+  if (!storeId || !notif) {
+    return null;
+  }
+
+  const unread = notif.unreadCount;
+  const hasUnread = notif.items.some((n) => !n.read);
+
+  const onRowClick = (orderId: string, id: string) => {
+    notif.markRead(id);
+    setIsOpen(false);
+    navigate(ROUTES.STORE_DETAIL_ORDERS_DETAIL(storeId, orderId));
+  };
+
+  const onViewAll = () => {
+    setIsOpen(false);
+    navigate(ROUTES.STORE_DETAIL_NOTIFICATIONS_LIST(storeId));
+  };
+
+  return (
+    <div ref={containerRef} className="relative mr-1 shrink-0">
+      <Button
+        variant="ghost"
+        size="icon"
+        type="button"
+        onClick={() => setIsOpen((prev) => !prev)}
+        aria-expanded={isOpen}
+        aria-haspopup="dialog"
+        className="relative text-zinc-700 hover:bg-zinc-100"
+        aria-label={unread > 0 ? `알림 ${unread}건 읽지 않음` : "알림"}
+      >
+        <Bell className="h-6 w-6" />
+        {unread > 0 ? (
+          <span
+            className={cn(
+              "absolute -right-0.5 -top-0.5 flex min-h-[1.125rem] min-w-[1.125rem] items-center justify-center rounded-full bg-rose-600 px-1 text-[10px] font-bold leading-none text-white",
+            )}
+          >
+            {unread > 99 ? "99+" : unread}
+          </span>
+        ) : null}
+      </Button>
+
+      {isOpen ? (
+        <div
+          role="dialog"
+          aria-label="알림"
+          className="absolute right-0 top-full z-50 mt-2 w-[min(24rem,calc(100vw-2rem))] overflow-hidden rounded-md border border-zinc-200 bg-white shadow-lg"
+        >
+          <div className="flex items-center justify-between gap-2 border-b border-zinc-200 px-4 py-3">
+            <div className="flex min-w-0 items-center gap-2">
+              <h2 className="text-sm font-semibold text-zinc-900">알림</h2>
+              {unread > 0 ? (
+                <span className="rounded-full bg-rose-600 px-1.5 py-0.5 text-[10px] font-semibold text-white tabular-nums">
+                  {unread > 99 ? "99+" : unread}
+                </span>
+              ) : null}
+            </div>
+            <button
+              type="button"
+              onClick={notif.markAllRead}
+              disabled={!hasUnread}
+              className="shrink-0 text-xs font-medium text-zinc-600 transition-colors hover:text-zinc-900 disabled:cursor-not-allowed disabled:opacity-40"
+            >
+              모두 읽음
+            </button>
+          </div>
+
+          <div className="max-h-[min(28rem,calc(100vh-8rem))] overflow-y-auto">
+            {notif.isListLoading && previewItems.length === 0 ? (
+              <div className="flex items-center justify-center gap-2 py-12 text-sm text-zinc-500">
+                <LoadingSpinner size="sm" aria-hidden />
+                알림을 불러오는 중…
+              </div>
+            ) : previewItems.length === 0 ? (
+              <div className="flex flex-col items-center justify-center gap-2 py-12 text-center text-zinc-500">
+                <Bell className="h-8 w-8 opacity-40" />
+                <p className="text-sm">알림이 없습니다.</p>
+              </div>
+            ) : (
+              <ul className="divide-y divide-zinc-100">
+                {previewItems.map((item) => (
+                  <NotificationDropdownItem
+                    key={item.id}
+                    item={item}
+                    onClick={() => onRowClick(item.orderId, item.id)}
+                  />
+                ))}
+              </ul>
+            )}
+          </div>
+
+          <div className="border-t border-zinc-200 bg-zinc-50/80 px-4 py-2.5">
+            <button
+              type="button"
+              onClick={onViewAll}
+              className="flex w-full items-center justify-center gap-1 text-sm font-medium text-zinc-700 transition-colors hover:text-zinc-900"
+            >
+              알림 전체 보기
+              <ChevronRight className="h-4 w-4" strokeWidth={2} aria-hidden />
+            </button>
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+}

From b65bce9ab1aa7ea9095beca38415170479a258f5 Mon Sep 17 00:00:00 2001
From: geunu <olo90632951@gmail.com>
Date: Sun, 21 Jun 2026 15:02:02 +0900
Subject: [PATCH 34/41] [WEB-SELLER][UPDATE]: Added support for monthly order
 queries in StoreCalendarPage, including new hooks and constants for improved
 order management by month.

---
 .../constants/orderQueryKeys.constant.ts      |   3 +
 .../order/hooks/queries/useOrderQuery.ts      |  25 +++++
 .../components/calendar/StoreCalendarPage.tsx | 103 +++++++++++++++---
 3 files changed, 115 insertions(+), 16 deletions(-)

diff --git a/apps/web-seller/src/features/order/constants/orderQueryKeys.constant.ts b/apps/web-seller/src/features/order/constants/orderQueryKeys.constant.ts
index 4e3078d6..a1d4e2e1 100644
--- a/apps/web-seller/src/features/order/constants/orderQueryKeys.constant.ts
+++ b/apps/web-seller/src/features/order/constants/orderQueryKeys.constant.ts
@@ -13,4 +13,7 @@ export const orderQueryKeys = {
   /** 스토어 캘린더용: 스토어 + 선택한 픽업일(YYYY-MM-DD)별 주문 */
   calendarByStore: (storeId: string, pickupDayKey: string | null) =>
     ["order", "calendar-by-store", storeId, pickupDayKey] as const,
+  /** 스토어 캘린더용: 스토어 + 픽업 월(YYYY-MM-DD ~ YYYY-MM-DD)별 주문 */
+  calendarMonthByStore: (storeId: string, pickupStartKey: string, pickupEndKey: string) =>
+    ["order", "calendar-month-by-store", storeId, pickupStartKey, pickupEndKey] as const,
 } as const;
diff --git a/apps/web-seller/src/features/order/hooks/queries/useOrderQuery.ts b/apps/web-seller/src/features/order/hooks/queries/useOrderQuery.ts
index c2b955e5..e0f76662 100644
--- a/apps/web-seller/src/features/order/hooks/queries/useOrderQuery.ts
+++ b/apps/web-seller/src/features/order/hooks/queries/useOrderQuery.ts
@@ -108,3 +108,28 @@ export function useCalendarDayOrders(storeId: string, pickupDayKey: string | nul
 
   return query;
 }
+
+/** 스토어 캘린더: 픽업 월(YYYY-MM-DD ~ YYYY-MM-DD) 주문 목록 */
+export function useCalendarMonthOrders(
+  storeId: string,
+  pickupStartKey: string,
+  pickupEndKey: string,
+) {
+  const query = useQuery<OrderListResponseDto>({
+    queryKey: orderQueryKeys.calendarMonthByStore(storeId, pickupStartKey, pickupEndKey),
+    queryFn: () =>
+      orderApi.getOrders({
+        page: 1,
+        limit: 200,
+        sortBy: OrderSortBy.LATEST,
+        storeId,
+        pickupStartDate: pickupStartKey,
+        pickupEndDate: pickupEndKey,
+      }),
+    enabled: !!storeId && !!pickupStartKey && !!pickupEndKey,
+  });
+
+  useQueryErrorAlert(query);
+
+  return query;
+}
diff --git a/apps/web-seller/src/features/store/components/calendar/StoreCalendarPage.tsx b/apps/web-seller/src/features/store/components/calendar/StoreCalendarPage.tsx
index 0f619da7..a77cf0aa 100644
--- a/apps/web-seller/src/features/store/components/calendar/StoreCalendarPage.tsx
+++ b/apps/web-seller/src/features/store/components/calendar/StoreCalendarPage.tsx
@@ -27,7 +27,8 @@ import {
 import { ROUTES } from "@/apps/web-seller/common/constants/paths.constant";
 import { useStoreDetail } from "@/apps/web-seller/features/store/hooks/queries/useStoreQuery";
 import { useUpdateStoreBusinessCalendar } from "@/apps/web-seller/features/store/hooks/mutations/useStoreMutation";
-import { useCalendarDayOrders } from "@/apps/web-seller/features/order/hooks/queries/useOrderQuery";
+import { useCalendarMonthOrders } from "@/apps/web-seller/features/order/hooks/queries/useOrderQuery";
+import type { OrderResponseDto } from "@/apps/web-seller/features/order/types/order.dto";
 import {
   getOrderStatusBadgeVariant,
   getOrderStatusLabel,
@@ -40,6 +41,7 @@ import {
   overridesRecordFromApi,
   parseDateKey,
   toDateKey,
+  toSeoulDateKeyFromUtc,
   toStoreBusinessCalendarDto,
   type DayOverride,
   WEEKDAY_LABELS_KO,
@@ -109,6 +111,20 @@ function computeNextOverridesMap(
   return next;
 }
 
+function sortOrdersByPickupTime(orders: OrderResponseDto[]): OrderResponseDto[] {
+  return [...orders].sort(
+    (a, b) => new Date(a.pickupDate).getTime() - new Date(b.pickupDate).getTime(),
+  );
+}
+
+function reservationDisplayName(order: OrderResponseDto): string {
+  return order.reservationContactName?.trim() || "예약자 미입력";
+}
+
+function reservationDisplayPhone(order: OrderResponseDto): string {
+  return order.reservationPhone?.trim() || "—";
+}
+
 export const StoreCalendarPage: React.FC = () => {
   const { storeId } = useParams<{ storeId: string }>();
   const {
@@ -130,11 +146,30 @@ export const StoreCalendarPage: React.FC = () => {
   const [overrides, setOverrides] = React.useState<Record<string, DayOverride>>({});
   const [selectedKey, setSelectedKey] = React.useState<string | null>(null);
 
+  const year = monthCursor.getFullYear();
+  const month = monthCursor.getMonth();
+  const monthStartKey = toDateKey(new Date(year, month, 1));
+  const monthEndKey = toDateKey(new Date(year, month + 1, 0));
+
   const {
-    data: ordersList,
-    isLoading: ordersLoading,
-    isError: ordersError,
-  } = useCalendarDayOrders(storeId ?? "", selectedKey);
+    data: monthOrdersList,
+    isLoading: monthOrdersLoading,
+    isError: monthOrdersError,
+  } = useCalendarMonthOrders(storeId ?? "", monthStartKey, monthEndKey);
+
+  const ordersByDateKey = React.useMemo(() => {
+    const map = new Map<string, OrderResponseDto[]>();
+    for (const order of monthOrdersList?.data ?? []) {
+      const key = toSeoulDateKeyFromUtc(order.pickupDate);
+      const list = map.get(key) ?? [];
+      list.push(order);
+      map.set(key, list);
+    }
+    for (const [key, list] of map) {
+      map.set(key, sortOrdersByPickupTime(list));
+    }
+    return map;
+  }, [monthOrdersList]);
 
   const [draftOpen, setDraftOpen] = React.useState(true);
   const [draftStart, setDraftStart] = React.useState("00:00");
@@ -223,11 +258,17 @@ export const StoreCalendarPage: React.FC = () => {
     }
   };
 
-  const year = monthCursor.getFullYear();
-  const month = monthCursor.getMonth();
   const firstWeekday = new Date(year, month, 1).getDay();
   const dim = daysInMonth(monthCursor);
 
+  const ordersForSelectedDay = React.useMemo(() => {
+    if (!selectedKey) return [];
+    return ordersByDateKey.get(selectedKey) ?? [];
+  }, [selectedKey, ordersByDateKey]);
+
+  const ordersLoading = monthOrdersLoading;
+  const ordersError = monthOrdersError;
+
   const cells: ({ key: string; day: number } | null)[] = [];
   for (let i = 0; i < firstWeekday; i += 1) cells.push(null);
   for (let day = 1; day <= dim; day += 1) {
@@ -279,13 +320,6 @@ export const StoreCalendarPage: React.FC = () => {
 
   const selectedUsesOverride = selectedKey ? Boolean(overrides[selectedKey]) : false;
 
-  const ordersForSelectedDay = React.useMemo(() => {
-    if (!selectedKey || !ordersList?.data?.length) return [];
-    return [...ordersList.data].sort(
-      (a, b) => new Date(a.pickupDate).getTime() - new Date(b.pickupDate).getTime(),
-    );
-  }, [selectedKey, ordersList]);
-
   const saving = updateCalendar.isPending;
 
   if (!storeId) {
@@ -437,7 +471,7 @@ export const StoreCalendarPage: React.FC = () => {
                   {cells.map((cell, i) => {
                     if (!cell) {
                       return (
-                        <div key={`empty-${i}`} className="min-h-[5.25rem] sm:min-h-[5.75rem]" />
+                        <div key={`empty-${i}`} className="min-h-[6.5rem] sm:min-h-[7rem]" />
                       );
                     }
                     const eff = effectiveForDate(
@@ -449,17 +483,21 @@ export const StoreCalendarPage: React.FC = () => {
                     );
                     const hasOverride = Boolean(overrides[cell.key]);
                     const isSelected = selectedKey === cell.key;
+                    const dayOrders = ordersByDateKey.get(cell.key) ?? [];
+                    const previewOrders = dayOrders.slice(0, 2);
+                    const hiddenOrderCount = dayOrders.length - previewOrders.length;
                     return (
                       <button
                         key={cell.key}
                         type="button"
                         onClick={() => setSelectedKey(cell.key)}
                         className={[
-                          "flex min-h-[5.25rem] flex-col rounded-md border p-2 text-left transition-colors sm:min-h-[5.75rem] sm:p-2.5",
+                          "flex min-h-[6.5rem] flex-col rounded-md border p-2 text-left transition-colors sm:min-h-[7rem] sm:p-2.5",
                           isSelected
                             ? "border-primary bg-primary/10 ring-2 ring-primary/30"
                             : "border-border hover:bg-accent/50",
                           !eff.isOpen ? "bg-zinc-100" : "",
+                          dayOrders.length > 0 ? "border-blue-200/80" : "",
                         ].join(" ")}
                       >
                         <span className="text-lg font-semibold leading-none tabular-nums sm:text-xl">
@@ -482,6 +520,27 @@ export const StoreCalendarPage: React.FC = () => {
                           >
                             {formatBusinessHoursShortLabel(eff.isOpen, eff.start, eff.end)}
                           </span>
+                          {dayOrders.length > 0 ? (
+                            <div className="mt-0.5 flex flex-col gap-0.5 border-t border-border/60 pt-1">
+                              <span className="text-[10px] font-semibold leading-tight text-blue-700 sm:text-xs">
+                                예약 {dayOrders.length}건
+                              </span>
+                              {previewOrders.map((order) => (
+                                <span
+                                  key={order.id}
+                                  className="truncate text-[10px] leading-tight text-foreground/85 sm:text-xs"
+                                  title={`${formatSeoulPickupHm(order.pickupDate)} ${reservationDisplayName(order)} ${reservationDisplayPhone(order)}`}
+                                >
+                                  {formatSeoulPickupHm(order.pickupDate)} {reservationDisplayName(order)}
+                                </span>
+                              ))}
+                              {hiddenOrderCount > 0 ? (
+                                <span className="text-[10px] leading-tight text-muted-foreground sm:text-xs">
+                                  +{hiddenOrderCount}건 더
+                                </span>
+                              ) : null}
+                            </div>
+                          ) : null}
                         </div>
                       </button>
                     );
@@ -547,6 +606,18 @@ export const StoreCalendarPage: React.FC = () => {
                                   </StatusBadge>
                                 </div>
                                 <dl className="mt-3 grid grid-cols-2 gap-x-4 gap-y-2 border-t border-border/60 pt-3 text-xs sm:grid-cols-3">
+                                  <div className="min-w-0 sm:col-span-1">
+                                    <dt className="text-muted-foreground">예약자명</dt>
+                                    <dd className="mt-0.5 truncate font-medium text-foreground">
+                                      {reservationDisplayName(o)}
+                                    </dd>
+                                  </div>
+                                  <div className="min-w-0 sm:col-span-1">
+                                    <dt className="text-muted-foreground">휴대폰</dt>
+                                    <dd className="mt-0.5 truncate font-medium tabular-nums text-foreground">
+                                      {reservationDisplayPhone(o)}
+                                    </dd>
+                                  </div>
                                   <div className="min-w-0 sm:col-span-1">
                                     <dt className="text-muted-foreground">주문번호</dt>
                                     <dd className="mt-0.5 truncate font-medium text-foreground">

From 17e168a3fba50254a63d0a65f49cde62f14bdaa3 Mon Sep 17 00:00:00 2001
From: geunu <olo90632951@gmail.com>
Date: Sun, 21 Jun 2026 15:20:57 +0900
Subject: [PATCH 35/41] [WEB-SELLER][UPDATE]: Introduced
 StoreProductRepresentativeImageDto for structured product image handling in
 store responses, updated related DTOs and components to utilize the new
 structure.

---
 .../src/modules/store/dto/store-detail.dto.ts | 36 ++++++++++++++++---
 .../modules/store/utils/store-mapper.util.ts  |  9 ++---
 .../src/features/store/types/store.dto.ts     | 10 ++++--
 .../common/components/sliders/ImageSlider.tsx |  6 +++-
 .../sections/LikedStoreListSection.tsx        | 11 +++---
 .../store/components/map/MapStoreCard.tsx     | 27 +++++++-------
 .../src/features/store/types/store.type.ts    |  7 +++-
 7 files changed, 77 insertions(+), 29 deletions(-)

diff --git a/apps/backend/src/modules/store/dto/store-detail.dto.ts b/apps/backend/src/modules/store/dto/store-detail.dto.ts
index fcdb5ae7..6c05b309 100644
--- a/apps/backend/src/modules/store/dto/store-detail.dto.ts
+++ b/apps/backend/src/modules/store/dto/store-detail.dto.ts
@@ -9,6 +9,24 @@ import { SWAGGER_EXAMPLES as UPLOAD_SWAGGER_EXAMPLES } from "@apps/backend/modul
 import { StoreAddressDto } from "@apps/backend/modules/store/dto/store-common.dto";
 import { StoreBusinessCalendarDto } from "@apps/backend/modules/store/dto/store-business-calendar.dto";
 import { RefundCancellationPolicyDto } from "@apps/backend/modules/store/dto/store-refund-cancellation-policy.dto";
+import { SWAGGER_EXAMPLES as PRODUCT_SWAGGER_EXAMPLES } from "@apps/backend/modules/product/constants/product.constants";
+
+/**
+ * 스토어 상품 대표이미지 (상품당 1장)
+ */
+export class StoreProductRepresentativeImageDto {
+  @ApiProperty({
+    description: "상품 ID",
+    example: PRODUCT_SWAGGER_EXAMPLES.PRODUCT_DATA.id,
+  })
+  productId: string;
+
+  @ApiProperty({
+    description: "상품 대표이미지 URL",
+    example: UPLOAD_SWAGGER_EXAMPLES.FILE_URL,
+  })
+  imageUrl: string;
+}
 
 /**
  * 스토어 응답 DTO
@@ -150,14 +168,22 @@ export class StoreResponseDto extends StoreAddressDto {
   totalReviewCount: number;
 
   @ApiProperty({
-    description: "해당 스토어의 모든 상품 대표이미지 URL 배열 (상품당 1장)",
-    type: [String],
+    description: "해당 스토어의 모든 상품 대표이미지 (상품당 1장)",
+    type: [StoreProductRepresentativeImageDto],
     example: [
-      "https://s3.ap-northeast-1.amazonaws.com/picake-uploads/uploads/product1.png",
-      "https://s3.ap-northeast-1.amazonaws.com/picake-uploads/uploads/product2.png",
+      {
+        productId: "prod_123456789",
+        imageUrl:
+          "https://s3.ap-northeast-1.amazonaws.com/picake-uploads/uploads/product1.png",
+      },
+      {
+        productId: "prod_987654321",
+        imageUrl:
+          "https://s3.ap-northeast-1.amazonaws.com/picake-uploads/uploads/product2.png",
+      },
     ],
   })
-  productRepresentativeImageUrls: string[];
+  productRepresentativeImages: StoreProductRepresentativeImageDto[];
 
   @ApiPropertyOptional({
     description: "해당 스토어 상품 중 최소 금액 (노출·판매중인 상품만, 없으면 null)",
diff --git a/apps/backend/src/modules/store/utils/store-mapper.util.ts b/apps/backend/src/modules/store/utils/store-mapper.util.ts
index df3cb47d..208003bb 100644
--- a/apps/backend/src/modules/store/utils/store-mapper.util.ts
+++ b/apps/backend/src/modules/store/utils/store-mapper.util.ts
@@ -138,9 +138,10 @@ export class StoreMapperUtil {
         averageRating = Math.round((totalRating / totalReviewCount) * 10) / 10; // 소수점 첫째자리까지
       }
 
-      const productRepresentativeImageUrls = productIds
-        .map((id) => productRepresentativeImage.get(id))
-        .filter((url): url is string => !!url);
+      const productRepresentativeImages = productIds.flatMap((id) => {
+        const imageUrl = productRepresentativeImage.get(id);
+        return imageUrl ? [{ productId: id, imageUrl }] : [];
+      });
 
       const saleablePrices = storeSaleablePrices.get(store.id) ?? [];
       const minProductPrice = saleablePrices.length > 0 ? Math.min(...saleablePrices) : null;
@@ -187,7 +188,7 @@ export class StoreMapperUtil {
         likeCount: store.likeCount,
         averageRating,
         totalReviewCount,
-        productRepresentativeImageUrls,
+        productRepresentativeImages,
         minProductPrice,
         businessCalendar,
         refundCancellationPolicy,
diff --git a/apps/web-seller/src/features/store/types/store.dto.ts b/apps/web-seller/src/features/store/types/store.dto.ts
index cb1f9ed2..a3931155 100644
--- a/apps/web-seller/src/features/store/types/store.dto.ts
+++ b/apps/web-seller/src/features/store/types/store.dto.ts
@@ -70,6 +70,12 @@ export interface RefundCancellationPolicyDto {
   rules: RefundRuleItemDto[];
 }
 
+/** 스토어 상품 대표이미지 (상품당 1장) */
+export interface StoreProductRepresentativeImageDto {
+  productId: string;
+  imageUrl: string;
+}
+
 export interface StoreResponseDto extends StoreAddressDto {
   id: string;
   userId: string;
@@ -96,8 +102,8 @@ export interface StoreResponseDto extends StoreAddressDto {
   isLiked?: boolean | null;
   averageRating: number;
   totalReviewCount: number;
-  /** 해당 스토어의 모든 상품 대표이미지 URL 배열 (상품당 1장) */
-  productRepresentativeImageUrls: string[];
+  /** 해당 스토어의 모든 상품 대표이미지 (상품당 1장) */
+  productRepresentativeImages: StoreProductRepresentativeImageDto[];
   /** 상품 중 최소 금액 (노출·판매중인 상품만, 없으면 null) */
   minProductPrice: number | null;
   /** 영업 캘린더 (백엔드 StoreResponseDto.businessCalendar, 구버전 API는 생략될 수 있음) */
diff --git a/apps/web-user/src/common/components/sliders/ImageSlider.tsx b/apps/web-user/src/common/components/sliders/ImageSlider.tsx
index 7e62bf1a..d19877c8 100644
--- a/apps/web-user/src/common/components/sliders/ImageSlider.tsx
+++ b/apps/web-user/src/common/components/sliders/ImageSlider.tsx
@@ -67,7 +67,11 @@ export const ImageSlider: React.FC<ImageSliderProps> = ({
         <button
           key={image.id}
           type="button"
-          onClick={() => onImageClick?.(image, index)}
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            onImageClick?.(image, index);
+          }}
           className="flex-shrink-0 rounded-xl overflow-hidden"
           style={{ width: imageWidth, height: imageHeight }}
         >
diff --git a/apps/web-user/src/features/like/components/sections/LikedStoreListSection.tsx b/apps/web-user/src/features/like/components/sections/LikedStoreListSection.tsx
index 72be0f25..1dfa0a1e 100644
--- a/apps/web-user/src/features/like/components/sections/LikedStoreListSection.tsx
+++ b/apps/web-user/src/features/like/components/sections/LikedStoreListSection.tsx
@@ -3,6 +3,7 @@
 import { useRef } from "react";
 import Image from "next/image";
 import Link from "next/link";
+import { useRouter } from "next/navigation";
 import { ImageSlider } from "@/apps/web-user/common/components/sliders/ImageSlider";
 import { useLikedStores } from "@/apps/web-user/features/like/hooks/queries/useLikedStores";
 import { StoreInfo } from "@/apps/web-user/features/store/types/store.type";
@@ -19,6 +20,7 @@ import { useAuthStore } from "@/apps/web-user/common/store/auth.store";
 import { useLoginSheetStore } from "@/apps/web-user/common/store/login-sheet.store";
 
 export function LikedStoreListSection() {
+  const router = useRouter();
   const loadMoreRef = useRef<HTMLDivElement>(null);
   const { mutate: addLike } = useAddStoreLike();
   const { mutate: removeLike } = useRemoveStoreLike();
@@ -124,15 +126,16 @@ export function LikedStoreListSection() {
                   {shortenAddress(store.roadAddress)}
                 </span>
               </div>
-              {store.productRepresentativeImageUrls.length > 0 && (
+              {store.productRepresentativeImages.length > 0 && (
                 <ImageSlider
-                  images={store.productRepresentativeImageUrls.map((url, i) => ({
-                    id: `${store.id}-${i}`,
-                    url,
+                  images={store.productRepresentativeImages.map((item) => ({
+                    id: item.productId,
+                    url: item.imageUrl,
                   }))}
                   imageWidth={160}
                   imageHeight={120}
                   edgeToEdge={20}
+                  onImageClick={(image) => router.push(PATHS.PRODUCT.DETAIL(image.id))}
                 />
               )}
             </Link>
diff --git a/apps/web-user/src/features/store/components/map/MapStoreCard.tsx b/apps/web-user/src/features/store/components/map/MapStoreCard.tsx
index 0af8aad3..5a324972 100644
--- a/apps/web-user/src/features/store/components/map/MapStoreCard.tsx
+++ b/apps/web-user/src/features/store/components/map/MapStoreCard.tsx
@@ -3,6 +3,7 @@
 import Image from "next/image";
 import Link from "next/link";
 import { useState, useEffect } from "react";
+import { useRouter } from "next/navigation";
 import { Icon } from "@/apps/web-user/common/components/icons";
 import type {
   StoreBusinessCalendar,
@@ -82,6 +83,7 @@ export function MapStoreCardContent({
   imageGap = DEFAULT_IMAGE_GAP,
   variant = "card",
 }: MapStoreCardContentProps) {
+  const router = useRouter();
   const [isLiked, setIsLiked] = useState(store.isLiked ?? false);
   const [likeCount, setLikeCount] = useState(store.likeCount);
   const { mutate: addLike, isPending: isAddingLike } = useAddStoreLike();
@@ -127,12 +129,11 @@ export function MapStoreCardContent({
     }
   };
 
-  const productImages = store.productRepresentativeImageUrls ?? [];
+  const productImages = store.productRepresentativeImages ?? [];
   const isList = variant === "list";
 
   return (
-    <Link
-      href={PATHS.STORE.DETAIL(store.id)}
+    <div
       className="block overflow-hidden"
       style={{
         ...(isList
@@ -154,9 +155,11 @@ export function MapStoreCardContent({
             marginBottom: 14,
           }}
         >
-          {productImages.map((url, index) => (
-            <div
-              key={`${store.id}-img-${index}`}
+          {productImages.map((item) => (
+            <button
+              key={item.productId}
+              type="button"
+              onClick={() => router.push(PATHS.PRODUCT.DETAIL(item.productId))}
               className="flex-shrink-0 overflow-hidden bg-gray-100"
               style={{
                 scrollSnapAlign: "start",
@@ -166,19 +169,19 @@ export function MapStoreCardContent({
               }}
             >
               <Image
-                src={url}
-                alt={`${store.name} 상품 ${index + 1}`}
+                src={item.imageUrl}
+                alt={`${store.name} 상품`}
                 width={imageWidth}
                 height={imageHeight}
                 className="w-full h-full object-cover"
                 unoptimized
               />
-            </div>
+            </button>
           ))}
         </div>
       )}
 
-      <div>
+      <Link href={PATHS.STORE.DETAIL(store.id)} className="block">
         {productImages.length === 0 && <div className="pt-2" />}
         <div className="flex items-center justify-between gap-2" style={{ marginBottom: 6 }}>
           <div className="flex min-w-0 flex-1 items-center" style={{ gap: 4 }}>
@@ -252,8 +255,8 @@ export function MapStoreCardContent({
             )}
           </div>
         )}
-      </div>
-    </Link>
+      </Link>
+    </div>
   );
 }
 
diff --git a/apps/web-user/src/features/store/types/store.type.ts b/apps/web-user/src/features/store/types/store.type.ts
index 1ef3fc9b..63739c6a 100644
--- a/apps/web-user/src/features/store/types/store.type.ts
+++ b/apps/web-user/src/features/store/types/store.type.ts
@@ -65,6 +65,11 @@ export interface StoreListParams extends StoreListFilter {
   pickupFilterPeriod?: StoreListPickupFilterPeriod;
 }
 
+export interface StoreProductRepresentativeImage {
+  productId: string;
+  imageUrl: string;
+}
+
 export interface StoreInfo {
   id: string;
   userId: string;
@@ -95,7 +100,7 @@ export interface StoreInfo {
   averageRating: number; // 해당 스토어의 모든 상품 후기들의 평균 별점
   totalReviewCount: number; // 해당 스토어의 모든 상품 후기 개수
   // 상품 대표이미지 (상품당 1장)
-  productRepresentativeImageUrls: string[];
+  productRepresentativeImages: StoreProductRepresentativeImage[];
   // 상품 중 최소 금액 (노출·판매중인 상품만, 없으면 null)
   minProductPrice: number | null;
   /** 영업 캘린더 (스토어 목록·상세 API) */

From 742bbda5f283445636fe7540715aa5db4a7991f6 Mon Sep 17 00:00:00 2001
From: geunu <olo90632951@gmail.com>
Date: Sun, 21 Jun 2026 15:59:26 +0900
Subject: [PATCH 36/41] [WEB-SELLER][UPDATE]: Updated NumberInput and related
 components to use type="text" for numeric inputs, implementing input
 sanitization to ensure only valid numbers are processed. This change enhances
 user experience by allowing better control over input formatting.

---
 .../common/components/inputs/NumberInput.tsx  | 23 ++++++++++++++-----
 .../StoreRefundCancellationPolicyFields.tsx   |  9 ++++----
 .../components/modals/ProductFilterModal.tsx  | 10 ++++----
 3 files changed, 28 insertions(+), 14 deletions(-)

diff --git a/apps/web-seller/src/common/components/inputs/NumberInput.tsx b/apps/web-seller/src/common/components/inputs/NumberInput.tsx
index 93a5b5f4..330b2555 100644
--- a/apps/web-seller/src/common/components/inputs/NumberInput.tsx
+++ b/apps/web-seller/src/common/components/inputs/NumberInput.tsx
@@ -16,15 +16,25 @@ export interface NumberInputProps extends Omit<
 }
 
 const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(
-  ({ value, onChange, className, integer = true, ...props }, ref) => {
+  ({ value, onChange, className, integer = true, inputMode, ...props }, ref) => {
     const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-      const raw = e.target.valueAsNumber;
-      if (Number.isNaN(raw) || e.target.value.trim() === "") {
+      const rawValue = e.target.value;
+      if (rawValue.trim() === "") {
         onChange(undefined); // 비어 있는 값은 undefined로 전달, 상위에서 변환
         return;
       }
-      const next = integer ? Math.floor(raw) : raw;
-      onChange(next); // 숫자 값은 그대로 전달
+
+      // type="text"에서도 숫자 검증이 동작하도록 숫자 이외 문자를 제거한 뒤 파싱한다.
+      const sanitized = integer
+        ? rawValue.replace(/[^\d-]/g, "")
+        : rawValue.replace(/[^\d.-]/g, "");
+      const parsed = integer ? parseInt(sanitized, 10) : parseFloat(sanitized);
+
+      if (Number.isNaN(parsed)) {
+        onChange(undefined);
+        return;
+      }
+      onChange(parsed); // 숫자 값은 그대로 전달
     };
 
     const displayValue = value === undefined ? "" : String(value);
@@ -32,7 +42,8 @@ const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(
     return (
       <BaseInput
         ref={ref}
-        type="number"
+        type="text"
+        inputMode={inputMode ?? (integer ? "numeric" : "decimal")}
         className={cn(className)}
         value={displayValue}
         onChange={handleChange}
diff --git a/apps/web-seller/src/features/store/components/StoreRefundCancellationPolicyFields.tsx b/apps/web-seller/src/features/store/components/StoreRefundCancellationPolicyFields.tsx
index 7578c242..1c264ea4 100644
--- a/apps/web-seller/src/features/store/components/StoreRefundCancellationPolicyFields.tsx
+++ b/apps/web-seller/src/features/store/components/StoreRefundCancellationPolicyFields.tsx
@@ -54,14 +54,15 @@ export const StoreRefundCancellationPolicyFields: React.FC<Props> = ({
               <span className="text-sm text-muted-foreground shrink-0">픽업</span>
               <div className="w-[72px] shrink-0 sm:w-[100px]">
                 <Input
-                  type="number"
-                  min={0}
-                  max={999}
+                  type="text"
+                  inputMode="numeric"
+                  maxLength={3}
                   required
                   aria-label={`픽업 며칠 전 (${index + 1}번째)`}
                   value={row.daysBeforePickup ?? ""}
                   onChange={(e) => {
-                    const raw = e.target.value;
+                    // type="text"에서도 숫자 검증이 동작하도록 숫자만 추출해 파싱한다.
+                    const raw = e.target.value.replace(/[^\d]/g, "");
                     const n = raw === "" ? undefined : Number.parseInt(raw, 10);
                     onChange(
                       updateRefundRuleAt(policy, index, {
diff --git a/apps/web-user/src/features/product/components/modals/ProductFilterModal.tsx b/apps/web-user/src/features/product/components/modals/ProductFilterModal.tsx
index 04689540..1f1fcc08 100644
--- a/apps/web-user/src/features/product/components/modals/ProductFilterModal.tsx
+++ b/apps/web-user/src/features/product/components/modals/ProductFilterModal.tsx
@@ -119,9 +119,10 @@ export function ProductFilterModal({
             }}
           >
             <input
-              type="number"
+              type="text"
+              inputMode="numeric"
               value={minPriceInput}
-              onChange={(e) => setMinPriceInput(e.target.value)}
+              onChange={(e) => setMinPriceInput(e.target.value.replace(/[^\d]/g, ""))}
               placeholder="최소 가격"
               style={{
                 flex: 1,
@@ -143,9 +144,10 @@ export function ProductFilterModal({
             />
             <span style={{ color: "#6b7280", fontSize: "14px" }}>~</span>
             <input
-              type="number"
+              type="text"
+              inputMode="numeric"
               value={maxPriceInput}
-              onChange={(e) => setMaxPriceInput(e.target.value)}
+              onChange={(e) => setMaxPriceInput(e.target.value.replace(/[^\d]/g, ""))}
               placeholder="최대 가격"
               style={{
                 flex: 1,

From ef5a49268fd0340d0713c22dba7764145fa27687 Mon Sep 17 00:00:00 2001
From: jangchanwoo <wkdcksdn1996@gmail.com>
Date: Mon, 22 Jun 2026 16:45:21 +0900
Subject: [PATCH 37/41] =?UTF-8?q?[WEB-USER][QA]:=20=EB=A7=88=EC=9D=B4?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20?=
 =?UTF-8?q?=EC=9C=84=EC=B9=98=20=EB=B3=B5=EC=9B=90=20=EA=B8=B0=EB=8A=A5=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

메뉴 클릭 후 뒤로가기 시 클릭했던 스크롤 위치로 복원되도록 useScrollRestoration 훅을 추가했습니다. window가 아닌 RootWrapperLayout의 스크롤 컨테이너(scrollTop)를 sessionStorage에 저장/복원합니다.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 apps/web-user/src/app/mypage/page.tsx         |  9 +++-
 .../components/layouts/RootWrapperLayout.tsx  |  5 +-
 .../src/common/hooks/useScrollRestoration.ts  | 54 +++++++++++++++++++
 3 files changed, 66 insertions(+), 2 deletions(-)
 create mode 100644 apps/web-user/src/common/hooks/useScrollRestoration.ts

diff --git a/apps/web-user/src/app/mypage/page.tsx b/apps/web-user/src/app/mypage/page.tsx
index fca3f116..3847d184 100644
--- a/apps/web-user/src/app/mypage/page.tsx
+++ b/apps/web-user/src/app/mypage/page.tsx
@@ -15,6 +15,7 @@ import { ProfileEditBottomSheet } from "@/apps/web-user/features/mypage/componen
 import { useUpdateMypageProfile } from "@/apps/web-user/features/mypage/hooks/mutations/useUpdateMypageProfile";
 import { Toast } from "@/apps/web-user/common/components/toast/Toast";
 import { useLoginSheetStore } from "@/apps/web-user/common/store/login-sheet.store";
+import { useScrollRestoration } from "@/apps/web-user/common/hooks/useScrollRestoration";
 
 function getLoginInfo(user: {
   googleId: string;
@@ -59,6 +60,8 @@ const TERMS_MENU = [
 export default function MypagePage() {
   const { isAuthenticated } = useAuthStore();
   const hasHydrated = useAuthHasHydrated();
+  // 메뉴 클릭 후 뒤로가기 시 클릭했던 스크롤 위치로 복원 (레이아웃이 정해지는 hydration 이후 활성화)
+  useScrollRestoration("/mypage", hasHydrated);
   const { data: user } = useMypageProfile();
   const openLoginSheet = useLoginSheetStore((s) => s.openLoginSheet);
   const [isProfileEditOpen, setIsProfileEditOpen] = useState(false);
@@ -70,7 +73,11 @@ export default function MypagePage() {
       .flatMap((p) => p.data)
       .filter(
         (o) =>
-          o.orderStatus === OrderStatus.CONFIRMED || o.orderStatus === OrderStatus.PICKUP_PENDING,
+          o.orderStatus === OrderStatus.RESERVATION_REQUESTED ||
+          o.orderStatus === OrderStatus.PAYMENT_PENDING ||
+          o.orderStatus === OrderStatus.PAYMENT_COMPLETED ||
+          o.orderStatus === OrderStatus.CONFIRMED ||
+          o.orderStatus === OrderStatus.PICKUP_PENDING,
       ).length ?? 0;
 
   return (
diff --git a/apps/web-user/src/common/components/layouts/RootWrapperLayout.tsx b/apps/web-user/src/common/components/layouts/RootWrapperLayout.tsx
index 615cc1f3..5d092a74 100644
--- a/apps/web-user/src/common/components/layouts/RootWrapperLayout.tsx
+++ b/apps/web-user/src/common/components/layouts/RootWrapperLayout.tsx
@@ -58,7 +58,10 @@ export default function RootWrapperLayout({ children }: RootWrapperLayoutProps)
     <AuthProvider>
       <BuildInfoLogger />
       <AlarmRealtimeListener />
-      <div className="w-full sm:w-[640px] h-screen mx-auto sm:border-x border-gray-200 overflow-y-auto overflow-x-hidden scrollbar-hide">
+      <div
+        id="root-scroll-container"
+        className="w-full sm:w-[640px] h-screen mx-auto sm:border-x border-gray-200 overflow-y-auto overflow-x-hidden scrollbar-hide"
+      >
         <Header variant={headerVariant} title={headerTitle} />
         <div>{children}</div>
         <Alert />
diff --git a/apps/web-user/src/common/hooks/useScrollRestoration.ts b/apps/web-user/src/common/hooks/useScrollRestoration.ts
new file mode 100644
index 00000000..0400521a
--- /dev/null
+++ b/apps/web-user/src/common/hooks/useScrollRestoration.ts
@@ -0,0 +1,54 @@
+import { useEffect, useLayoutEffect } from "react";
+
+/** RootWrapperLayout의 실제 스크롤 영역 id (window가 아닌 내부 컨테이너가 스크롤됨) */
+const SCROLL_CONTAINER_ID = "root-scroll-container";
+
+/** SSR 환경에서 useLayoutEffect 경고를 피하기 위한 분기 */
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+
+/**
+ * 스크롤 위치를 sessionStorage에 저장하고 복원하는 훅.
+ *
+ * 이 앱은 window가 아니라 RootWrapperLayout의 overflow-y-auto 컨테이너가 스크롤되기 때문에
+ * 브라우저/Next.js 기본 스크롤 복원이 동작하지 않는다. 그래서 직접 컨테이너의 scrollTop을 관리한다.
+ *
+ * @param key 페이지를 구분하는 저장 키 (보통 pathname)
+ * @param enabled 데이터 로딩 등으로 복원 시점을 늦추고 싶을 때 사용. false면 복원/저장하지 않음.
+ */
+export function useScrollRestoration(key: string, enabled = true) {
+  useIsomorphicLayoutEffect(() => {
+    if (!enabled) return;
+
+    const container = document.getElementById(SCROLL_CONTAINER_ID);
+    if (!container) return;
+
+    const storageKey = `scroll-position:${key}`;
+    const saved = Number(sessionStorage.getItem(storageKey));
+
+    // 복원: 데이터가 늦게 들어와 높이가 늘어날 수 있으므로 몇 프레임에 걸쳐 목표 위치를 맞춘다.
+    let rafId = 0;
+    if (saved > 0) {
+      let attempts = 0;
+      const restore = () => {
+        container.scrollTop = saved;
+        // 아직 콘텐츠 높이가 부족해 목표에 못 미치면 다음 프레임에 재시도 (최대 ~10프레임)
+        if (container.scrollTop < saved && attempts < 10) {
+          attempts += 1;
+          rafId = requestAnimationFrame(restore);
+        }
+      };
+      rafId = requestAnimationFrame(restore);
+    }
+
+    // 저장: 스크롤할 때마다 최신 위치를 기록
+    const handleScroll = () => {
+      sessionStorage.setItem(storageKey, String(container.scrollTop));
+    };
+    container.addEventListener("scroll", handleScroll, { passive: true });
+
+    return () => {
+      cancelAnimationFrame(rafId);
+      container.removeEventListener("scroll", handleScroll);
+    };
+  }, [key, enabled]);
+}

From 9322fbfc66c2b83a939140fa1fd27214d40b4cca Mon Sep 17 00:00:00 2001
From: jangchanwoo <wkdcksdn1996@gmail.com>
Date: Mon, 22 Jun 2026 16:49:42 +0900
Subject: [PATCH 38/41] =?UTF-8?q?[WEB-USER][QA]:=20=EB=A7=A4=EC=9E=A5=20?=
 =?UTF-8?q?=EB=AC=B8=EC=9D=98=20=EB=B0=94=ED=85=80=EC=8B=9C=ED=8A=B8=20?=
 =?UTF-8?q?=EC=A0=84=ED=99=94=EB=B2=88=ED=98=B8=20=EC=A0=84=EB=8B=AC=20?=
 =?UTF-8?q?=EB=B0=8F=20=EC=A3=BC=EB=AC=B8=20=EC=B7=A8=EC=86=8C=20=ED=99=94?=
 =?UTF-8?q?=EB=A9=B4=20=EC=A4=91=EB=B3=B5=20=EB=A0=8C=EB=8D=94=20=EC=A0=9C?=
 =?UTF-8?q?=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- StoreInquiryBottomSheet에 order.storePhoneNumber를 phoneNumber로 전달 (예정/지난 주문, 확정 주문 카드)
- OrderCancelView의 중복된 주문 상품 렌더링 블록 제거

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../mypage/order/components/PastOrderList.tsx |  1 +
 .../order/components/UpcomingOrderList.tsx    |  1 +
 .../order/components/ConfirmedOrderCard.tsx   |  1 +
 .../components/cancel/OrderCancelView.tsx     | 33 -------------------
 4 files changed, 3 insertions(+), 33 deletions(-)

diff --git a/apps/web-user/src/features/mypage/order/components/PastOrderList.tsx b/apps/web-user/src/features/mypage/order/components/PastOrderList.tsx
index 8c51f609..49bb4aff 100644
--- a/apps/web-user/src/features/mypage/order/components/PastOrderList.tsx
+++ b/apps/web-user/src/features/mypage/order/components/PastOrderList.tsx
@@ -176,6 +176,7 @@ function PastOrderItem({ order, isLast }: { order: OrderResponse; isLast: boolea
         onClose={() => setIsInquirySheetOpen(false)}
         kakaoChannelUrl={null}
         instagramUrl={null}
+        phoneNumber={order.storePhoneNumber}
       />
     </div>
   );
diff --git a/apps/web-user/src/features/mypage/order/components/UpcomingOrderList.tsx b/apps/web-user/src/features/mypage/order/components/UpcomingOrderList.tsx
index ece6ee21..655660b3 100644
--- a/apps/web-user/src/features/mypage/order/components/UpcomingOrderList.tsx
+++ b/apps/web-user/src/features/mypage/order/components/UpcomingOrderList.tsx
@@ -168,6 +168,7 @@ function UpcomingOrderItem({ order, isLast }: { order: OrderResponse; isLast: bo
         onClose={() => setIsInquirySheetOpen(false)}
         kakaoChannelUrl={null}
         instagramUrl={null}
+        phoneNumber={order.storePhoneNumber}
       />
     </div>
   );
diff --git a/apps/web-user/src/features/order/components/ConfirmedOrderCard.tsx b/apps/web-user/src/features/order/components/ConfirmedOrderCard.tsx
index 7ddc7481..b03d2deb 100644
--- a/apps/web-user/src/features/order/components/ConfirmedOrderCard.tsx
+++ b/apps/web-user/src/features/order/components/ConfirmedOrderCard.tsx
@@ -60,6 +60,7 @@ export function ConfirmedOrderCard({ order }: { order: OrderResponse }) {
           onClose={() => setIsInquirySheetOpen(false)}
           kakaoChannelUrl={null}
           instagramUrl={null}
+          phoneNumber={order.storePhoneNumber}
         />,
         document.body,
       )}
diff --git a/apps/web-user/src/features/order/components/cancel/OrderCancelView.tsx b/apps/web-user/src/features/order/components/cancel/OrderCancelView.tsx
index bb4d4efa..d4829aba 100644
--- a/apps/web-user/src/features/order/components/cancel/OrderCancelView.tsx
+++ b/apps/web-user/src/features/order/components/cancel/OrderCancelView.tsx
@@ -149,39 +149,6 @@ export function OrderCancelView({ order }: OrderCancelViewProps) {
                 </div>
               </div>
             ))}
-            {order.orderItems.map((item) => (
-              <div
-                key={item.id}
-                className="flex items-center gap-3 border border-gray-100 rounded-2lg p-3 bg-white flex-shrink-0 w-[278px]"
-              >
-                <div className="relative w-[72px] h-[72px] flex-shrink-0 rounded overflow-hidden">
-                  {productImage ? (
-                    <Image
-                      src={productImage}
-                      alt={order.productName}
-                      fill
-                      className="object-cover"
-                    />
-                  ) : (
-                    <div className="w-full h-full bg-gray-200" />
-                  )}
-                </div>
-                <div className="flex-1 min-w-0">
-                  <p className="mb-0.5 text-xs text-gray-500">{order.storeName}</p>
-                  <p className="mb-2 text-sm text-gray-900 truncate">{order.productName}</p>
-                  <p className="text-2xs text-gray-400 truncate">
-                    {[
-                      item.sizeDisplayName &&
-                        `${item.sizeDisplayName}(+${item.sizePrice?.toLocaleString() ?? 0}원)`,
-                      item.flavorDisplayName &&
-                        `${item.flavorDisplayName}(+${item.flavorPrice?.toLocaleString() ?? 0}원)`,
-                    ]
-                      .filter(Boolean)
-                      .join(" / ")}
-                  </p>
-                </div>
-              </div>
-            ))}
           </div>
         </section>
 

From 9c65753d4724b9fe4d30d5e2aa2c7d4e05bf0e94 Mon Sep 17 00:00:00 2001
From: jangchanwoo <wkdcksdn1996@gmail.com>
Date: Mon, 22 Jun 2026 17:00:14 +0900
Subject: [PATCH 39/41] =?UTF-8?q?[WEB-USER][QA]:=20=EC=B9=B4=ED=85=8C?=
 =?UTF-8?q?=EA=B3=A0=EB=A6=AC=20=EC=BD=98=ED=85=90=EC=B8=A0=20=EC=9D=B4?=
 =?UTF-8?q?=EB=AF=B8=EC=A7=80=205=EC=A2=85=20=EA=B5=90=EC=B2=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

category1~5.png 이미지를 교체했습니다.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../public/images/contents/category1.png      | Bin 2358 -> 2151 bytes
 .../public/images/contents/category2.png      | Bin 6846 -> 2618 bytes
 .../public/images/contents/category3.png      | Bin 2758 -> 2547 bytes
 .../public/images/contents/category4.png      | Bin 4624 -> 3838 bytes
 .../public/images/contents/category5.png      | Bin 2523 -> 2314 bytes
 5 files changed, 0 insertions(+), 0 deletions(-)

diff --git a/apps/web-user/public/images/contents/category1.png b/apps/web-user/public/images/contents/category1.png
index 5b83aa8160950b64b9e17ede032bc2165d94e9ab..8f1786eff385364a563f8baf39fffefd4624a9ac 100644
GIT binary patch
delta 2063
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

delta 2271
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

diff --git a/apps/web-user/public/images/contents/category2.png b/apps/web-user/public/images/contents/category2.png
index ea6604afc52573d0b72a570f511eb7ab9c6312ec..62252fd1ea1ffe6a17d23b2e07f61df2e4c044f0 100644
GIT binary patch
delta 2533
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

delta 6795
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

diff --git a/apps/web-user/public/images/contents/category3.png b/apps/web-user/public/images/contents/category3.png
index f4e692afd36b61b63ac35defe83cd60b3bfe15d3..0deda113bc0736c2d8e3e15a7ccaefbbe7b336f3 100644
GIT binary patch
delta 2462
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

delta 2674
zcmV-&3XS#i6UG&gZ+{9wNkl<ZcmeI5+ix6K9ml_CcJ25UdsnoD3QE`Iq6iRictA*8
z;tF`-fjW;!NOj;9sp(5z8~+7qB%X=O3rIZR@W2b8Y*Z+Shs2S%go=_ap-|GaUfb(S
zY|otjerI;=wLP<!*_k<W#^)oAJv%!yJ2T(;{m$>)1q?^Zm46a;hbq|dW*}q*5YIxO
zLSIz;9Z;grrGP_gwA3L)UHzBxE~KcTK+DM9vJmAu3`W2(<W6G-JMJtAa+W^L(xwWM
zVVQoT22b9?aG@%OCzfFlnHN@B<VInRuJk;8m<zGKG^o+zs*(q|g>iQ&>lU3!VU?KM
z#Ti<8g)C-9qkov;2(bhYH^ju`A~Hy(gl!7?5?t?6CdCY<rYzZU7sP0}hK!I2Vdd8P
ztg=q2(oBO9i&+s^tFZYI^eFlT)*`IjTB*P*T&1-+<Qjbfrz)(WY3SfM&J{6wdI2et
zny||4dfs&;m+#CvH8|cyvfe6Ez(K;WmCDWat0d}8oPS(V8A^VfoAiRef)q&9V*Rw#
zIq8B1!PfhHl4);Z7Av<JFT!>1z=|3KzwmeD=ISLRL?Xh<4RSZ0yLh4kr2Z*U@#NK{
zTyw0hSVg^?DjPEoOYd;;<YV`uD92a+9GkGs^z@gsIs;1-mMPu65Ldbzi?B9GijCNU
zs)2>IqJPFtEaDC%tQ9pe1{ODRRICCeKTWN`5;rPdkt-{aa~09EJDUYA9<+f{a?D_u
za~RQxB&^D(=Dubo3&{DX`P{zKSh?AF3DSKPmh^DMycnH)t)D~s5>^FETuf+7l+vb7
z!PL2af~o#oF-O2wR2`I5%}^h~RL{ct>8g!@HGfjUsbbIRZBMSaSxJ5q7XA47+iJJn
zdJ}eI^**e%W`!DdD821cVbIkTTNj);Dj0UU*5h`x*k+O8eOR(a*C@HO#d?KQ+UKOk
z+9Q84AF8D9Tq+f6vBq2L<4xfHZQws|0{^{tT+k;z2~0i#Ja-N_^Hms0hd?S^*p0R8
zMt`=1U_tNx#$R~77g%5x_scK9D1@krvB~EHzY5xDthGM+H}LBpM|Za@@Z4qpzbS-R
zZLqK=TI;<(0I&b7cPs70w|;1jdk(SMW5OC~t^d01TWXwq=SP(OehEgf<CTx*YmZ08
zrbWW+c7OMi-u7h|dupt=efgZGM9=~G+JEB~Yg#GOPcL^C;Nxc~DEh7+1-C?Hcl{1U
z%6EV3|L=6{h08F2I$7;>yVVxkzm<)(dHP#{Dct*gxTq}RH-8Z9PWe0D&I_O8^`8f)
z%`7@EEO53dVMMiNskSy8cEt|NiueEiM)-GZX}zS8XTIj|8|I?_{3{rNJe-8?3xBKX
z`lLb4UD#5?-00W8=eyos;eEsMu<zV6BdwKkroF!Qz+#6AX0>6ue<yf52S{hXjlSVy
z!mKvzx3Wd4UBd%mc^oB^2(#AdbBIjX3-R6q7(wAc!?rZmumL_EZv}6EZUAA!-1oX6
z*&a_GwpiI%;fSh&lg_D87*0v<D1R+m7VFHyk`MNrS^nqeV;#Zc6e1IBH>ikgo7{@q
zdB3MW4U7jg+VechuKypA;A21gmE+qvAnSHcr$8k@Bf!W6w4w$NZI(PyX%mNidb?|E
zt^q6mqc?5`MpGOHrk(;O%Fskjj89DqmG>ETR-hBMhSi726(tgP>Z8yCReuUNC>Hfv
zY92*p>JRl5Y>cDg_@i=bg57Q&MQy?N)-6^@f}O&QUSYR4kZV}fhK5v*G<8~0lolF#
zllD~5@$x$2SqGl&WR)mVgDaMP8f%5k8<Jfyti|RL7PbOQ-Y6wLtgS^0R@l5^h0Q5e
z*qp+`8a+9mB^WDgKB-w(oPSU1j+!&ok}rfHVIkj!E_9Tmo&=;^EkdZ7kM*$o7?Igp
z^Se)SlbVlx3V7!8h?NI_1>SuN7@PFFii}Po65M_(eU^*L6$?!b*;tg((}=_yzwnP|
zSO9)W;_A=(=AVFn{PEy3pZ^=*2Zm0eZ#Fc<rlcvkVprc3)qA^i<9`wAWZ(Vgfv7E5
zjJSB~_TkU`Tl|~-!u8F3k7-kIN!VSDu9)F=LH)Yqp#2AN>qps(;at1h`kMW0W7%nT
zmaRb-+?MxY4Oo94xq&V9p|+TGnKktrjPr!@LUZ*UTkgiH-{XzDS`>!D_uUO?dmP8W
zB4N0DozL&?`d(vm)qj6k^`YLVR*!a0XJ3SF_~Gz_;iVIe4}!NpO0ZWPzj#9<$UMUD
z)!r<5@~W`pgQBmc5>`x<*<x*(vFT8mgcw#@wpH6n+<++z2XuFw_y}Sn=v=2`JbzM1
zQEjcZRRSDr%sl*%pZ*L9+#Fhfg{XWHvBBqRotuNWPkb);Wq-;V(!JGM-5=+v**S~H
zcuKF;;$P@G*51QF>}(#05H}nN7m65&$tQs?q%;ad+X!v@7OOT$p|2DwDoKgT3@U26
z+-M)b>u`OnbQfST6X`9re>^Pg9&B`MA{-4*lo#7K9THZVvWIK1n1wtZ_#ST>v*+1)
z>rBHro`fC~wtpE!Rgnh8Ay@`QEC$Wy5!{$9tsrXr1oQ_>`W~HNtpbG=r_0q;toEr2
zat{}zBu22cGU3fn)392uqD%C~HN*Edl3+gD3D+o8SY@>kOGuh$sJLz{hc21#X*$VK
zAi}LxecR#4*2E7yxL5K|{=wh;B@eKrPA5FHhvQ907JrtJ>#JADuG5(Sf?Fu8HpfRY
zZA6)oaSD{CfF~;{MEl-?7%yMxv`2SgxpLqXS*^4^-!lQ1GL215ciXLN-yM~&b-jzQ
zWP={H=&4hd3Z!gNV+J4>e7gH=&rDA<J~P%OYo<pR+@j}hl*%OwkLOUcwLj_8diFij
zSN~WQUVlsPWmwWhk_+yTwF#o{j?b#z&+}}Bd}@%W6Xm{Z+<H!9k0KkZi*&U9M&`Lj
zEQ#^S3y47Up$c|Ao&nLkHd3Y_=-H0Bk+YeREtXM5j?%elBjuRk&geqT<Xl5U1`?LB
z;>Ju2qWY(a0V{4y#3U*c%Wy#ILi~J|O>?8dX@6==qB60K^Q10lhs8~y4mWQ|?=_6Z
zCn^(*D?W-`U!kf#$E>;Dwb8u_E((bV%gDycB?u+19l<=9I+x-dZRi~ri3!WtpelqI
zgQPGL9ZQifT-8X}BFF=zca751b4iNIBx<qkP`W#df^+@ES}$8ERg(8wpE~%@rOXKo
ztbgj{v94hPuL@C4t;#cXVHuV7y3UpSS0Yf>&v9Q)+U*AZGBlD~frY5Tbr;fdyMdR0
z43HavGa%^xr65D>3+&*$K|z+5G_)I;61E*G;FyOfyg+Mn$R2gF&Skbv5_CCBg0{%4
zuq~uqDPaR7t~0CIlItoM;vsj&v6MwI+iS_Zuty<F=BdYL$(qm8rwXknH5GYHjeRBE
zyR=?yj$UUB#tC~AWzh{1mq%|EPK9piELnA_IejWGm4L(QXf>l%BdoKC@@*;=qW@HV
gHjY}>EwURQ0ub=*Ob`KaqW}N^07*qoM6N<$f;Kieh5!Hn

diff --git a/apps/web-user/public/images/contents/category4.png b/apps/web-user/public/images/contents/category4.png
index 5081b75eb2a33ec883ac3651eb15ceb4385878b6..3577981041c78cd12fcbdce8967b90bece9ad64e 100644
GIT binary patch
delta 3763
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

delta 4555
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%0ACu6eTRE
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

diff --git a/apps/web-user/public/images/contents/category5.png b/apps/web-user/public/images/contents/category5.png
index d9f4aa45b5301442f1a9e81987f416b1827f6666..66ded500701593f0370d741fa3e81e5436e91c85 100644
GIT binary patch
delta 2227
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
BMO**?

delta 2437
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
D_7}K(


From 31771f25b16911514b7f4568935c29cd9527c7f7 Mon Sep 17 00:00:00 2001
From: geunu <olo90632951@gmail.com>
Date: Tue, 23 Jun 2026 09:30:40 +0900
Subject: [PATCH 40/41] =?UTF-8?q?[WEB-USER,=20BE][FEATURE]:=20=EC=9E=85?=
 =?UTF-8?q?=EC=A0=90=20=EC=9A=94=EC=B2=AD=ED=95=98=EA=B8=B0=20=EA=B8=B0?=
 =?UTF-8?q?=EB=8A=A5=20=EC=B6=94=EA=B0=80(DB=EC=97=90=EB=A7=8C=20=EC=A0=80?=
 =?UTF-8?q?=EC=9E=A5)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/apis/consumer/consumer-api.module.ts  |   4 +
 .../store-entry-request.controller.ts         |  71 +++++++++
 .../migration.sql                             |  34 +++++
 .../src/infra/database/prisma/schema.prisma   |  44 ++++++
 .../store-entry-request.constants.ts          |  32 +++++
 .../dto/store-entry-request.dto.ts            | 136 ++++++++++++++++++
 .../store-entry-request-read.service.ts       |  28 ++++
 .../store-entry-request-write.service.ts      |  50 +++++++
 .../store-entry-request.module.ts             |  20 +++
 .../store-entry-request.service.ts            |  36 +++++
 apps/web-user/src/app/map/page.tsx            |  38 ++++-
 .../src/features/store/apis/store.api.ts      |  19 +++
 .../components/map/MapUnenteredStoreCard.tsx  | 127 ++++++++++++++++
 .../constants/storeQueryKeys.constant.ts      |   2 +
 .../hooks/mutations/useRequestStoreEntry.ts   |  28 ++++
 .../queries/useStoreEntryRequestExists.ts     |  15 ++
 .../store/types/store-entry-request.type.ts   |  17 +++
 17 files changed, 699 insertions(+), 2 deletions(-)
 create mode 100644 apps/backend/src/apis/consumer/controllers/store-entry-request.controller.ts
 create mode 100644 apps/backend/src/infra/database/prisma/migrations/20260623002342_add_store_entry_request/migration.sql
 create mode 100644 apps/backend/src/modules/store-entry-request/constants/store-entry-request.constants.ts
 create mode 100644 apps/backend/src/modules/store-entry-request/dto/store-entry-request.dto.ts
 create mode 100644 apps/backend/src/modules/store-entry-request/services/store-entry-request-read.service.ts
 create mode 100644 apps/backend/src/modules/store-entry-request/services/store-entry-request-write.service.ts
 create mode 100644 apps/backend/src/modules/store-entry-request/store-entry-request.module.ts
 create mode 100644 apps/backend/src/modules/store-entry-request/store-entry-request.service.ts
 create mode 100644 apps/web-user/src/features/store/components/map/MapUnenteredStoreCard.tsx
 create mode 100644 apps/web-user/src/features/store/hooks/mutations/useRequestStoreEntry.ts
 create mode 100644 apps/web-user/src/features/store/hooks/queries/useStoreEntryRequestExists.ts
 create mode 100644 apps/web-user/src/features/store/types/store-entry-request.type.ts

diff --git a/apps/backend/src/apis/consumer/consumer-api.module.ts b/apps/backend/src/apis/consumer/consumer-api.module.ts
index 3edc57a6..58a33117 100644
--- a/apps/backend/src/apis/consumer/consumer-api.module.ts
+++ b/apps/backend/src/apis/consumer/consumer-api.module.ts
@@ -29,6 +29,8 @@ import { NoticeModule } from "@apps/backend/modules/notice/notice.module";
 import { ConsumerNoticeController } from "@apps/backend/apis/consumer/controllers/notice.controller";
 import { QnaModule } from "@apps/backend/modules/qna/qna.module";
 import { ConsumerQnaController } from "@apps/backend/apis/consumer/controllers/qna.controller";
+import { StoreEntryRequestModule } from "@apps/backend/modules/store-entry-request/store-entry-request.module";
+import { ConsumerStoreEntryRequestController } from "@apps/backend/apis/consumer/controllers/store-entry-request.controller";
 
 /**
  * Consumer(구매자) API 모듈 — 경로 prefix `consumer`, JWT aud `consumer`
@@ -51,6 +53,7 @@ import { ConsumerQnaController } from "@apps/backend/apis/consumer/controllers/q
     TermsModule,
     NoticeModule,
     QnaModule,
+    StoreEntryRequestModule,
     // ChatModule,
   ],
   controllers: [
@@ -69,6 +72,7 @@ import { ConsumerQnaController } from "@apps/backend/apis/consumer/controllers/q
     ConsumerTermsController,
     ConsumerNoticeController,
     ConsumerQnaController,
+    ConsumerStoreEntryRequestController,
     // ConsumerChatController,
   ],
 })
diff --git a/apps/backend/src/apis/consumer/controllers/store-entry-request.controller.ts b/apps/backend/src/apis/consumer/controllers/store-entry-request.controller.ts
new file mode 100644
index 00000000..a69cff6f
--- /dev/null
+++ b/apps/backend/src/apis/consumer/controllers/store-entry-request.controller.ts
@@ -0,0 +1,71 @@
+import { Body, Controller, Get, HttpCode, HttpStatus, Post, Query, Request } from "@nestjs/common";
+import { ApiTags, ApiOperation, ApiExtraModels } from "@nestjs/swagger";
+import { StoreEntryRequestService } from "@apps/backend/modules/store-entry-request/store-entry-request.service";
+import { Auth } from "@apps/backend/modules/auth/decorators/auth.decorator";
+import { SwaggerResponse } from "@apps/backend/common/decorators/swagger-response.decorator";
+import { SwaggerAuthResponses } from "@apps/backend/common/decorators/swagger-auth-responses.decorator";
+import { createMessageObject } from "@apps/backend/common/utils/message.util";
+import { JwtVerifiedPayload } from "@apps/backend/modules/auth/types/auth.types";
+import { AUDIENCE } from "@apps/backend/modules/auth/constants/auth.constants";
+import {
+  STORE_ENTRY_REQUEST_ERROR_MESSAGES,
+  STORE_ENTRY_REQUEST_SUCCESS_MESSAGES,
+} from "@apps/backend/modules/store-entry-request/constants/store-entry-request.constants";
+import {
+  CreateStoreEntryRequestDto,
+  CreateStoreEntryRequestResponseDto,
+  StoreEntryRequestExistsQueryDto,
+  StoreEntryRequestExistsResponseDto,
+} from "@apps/backend/modules/store-entry-request/dto/store-entry-request.dto";
+
+/**
+ * 입점 요청 컨트롤러 (사용자용)
+ * 지도에서 미입점 스토어(카카오 장소)에 대한 입점 요청을 처리합니다.
+ */
+@ApiTags("입점 요청")
+@ApiExtraModels(CreateStoreEntryRequestResponseDto, StoreEntryRequestExistsResponseDto)
+@Controller(`${AUDIENCE.CONSUMER}/store-entry-requests`)
+@Auth({ isPublic: false, audiences: ["consumer"] })
+export class ConsumerStoreEntryRequestController {
+  constructor(private readonly storeEntryRequestService: StoreEntryRequestService) {}
+
+  /**
+   * 입점 요청 추가 API
+   */
+  @Post()
+  @HttpCode(HttpStatus.CREATED)
+  @ApiOperation({
+    summary: "(로그인 필요) 입점 요청 추가",
+    description: "미입점 스토어(카카오 장소)에 대한 입점 요청을 등록합니다. 동일 장소 중복 요청은 불가합니다.",
+  })
+  @SwaggerResponse(201, { dataDto: CreateStoreEntryRequestResponseDto })
+  @SwaggerAuthResponses()
+  @SwaggerResponse(409, {
+    dataExample: createMessageObject(STORE_ENTRY_REQUEST_ERROR_MESSAGES.ALREADY_EXISTS),
+  })
+  async create(
+    @Body() dto: CreateStoreEntryRequestDto,
+    @Request() req: { user: JwtVerifiedPayload },
+  ) {
+    await this.storeEntryRequestService.createForUser(req.user.sub, dto);
+    return { message: STORE_ENTRY_REQUEST_SUCCESS_MESSAGES.CREATED };
+  }
+
+  /**
+   * 입점 요청 존재 여부 조회 API (버튼 상태 표시용)
+   */
+  @Get("exists")
+  @HttpCode(HttpStatus.OK)
+  @ApiOperation({
+    summary: "(로그인 필요) 입점 요청 존재 여부 조회",
+    description: "현재 로그인 사용자가 해당 카카오 장소에 이미 입점 요청했는지 여부를 반환합니다.",
+  })
+  @SwaggerResponse(200, { dataDto: StoreEntryRequestExistsResponseDto })
+  @SwaggerAuthResponses()
+  async exists(
+    @Query() query: StoreEntryRequestExistsQueryDto,
+    @Request() req: { user: JwtVerifiedPayload },
+  ): Promise<StoreEntryRequestExistsResponseDto> {
+    return await this.storeEntryRequestService.existsForUser(req.user.sub, query.kakaoPlaceId);
+  }
+}
diff --git a/apps/backend/src/infra/database/prisma/migrations/20260623002342_add_store_entry_request/migration.sql b/apps/backend/src/infra/database/prisma/migrations/20260623002342_add_store_entry_request/migration.sql
new file mode 100644
index 00000000..a2dfcd3f
--- /dev/null
+++ b/apps/backend/src/infra/database/prisma/migrations/20260623002342_add_store_entry_request/migration.sql
@@ -0,0 +1,34 @@
+-- CreateEnum
+CREATE TYPE "StoreEntryRequestStatus" AS ENUM ('REQUESTED', 'REVIEWING', 'APPROVED', 'REJECTED', 'COMPLETED');
+
+-- CreateTable
+CREATE TABLE "store_entry_requests" (
+    "id" TEXT NOT NULL,
+    "consumer_id" TEXT NOT NULL,
+    "kakao_place_id" TEXT NOT NULL,
+    "place_name" TEXT NOT NULL,
+    "address" TEXT,
+    "road_address" TEXT,
+    "phone" TEXT,
+    "category_name" TEXT,
+    "place_url" TEXT,
+    "latitude" DOUBLE PRECISION,
+    "longitude" DOUBLE PRECISION,
+    "status" "StoreEntryRequestStatus" NOT NULL DEFAULT 'REQUESTED',
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "store_entry_requests_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE INDEX "store_entry_requests_kakao_place_id_idx" ON "store_entry_requests"("kakao_place_id");
+
+-- CreateIndex
+CREATE INDEX "store_entry_requests_status_idx" ON "store_entry_requests"("status");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "store_entry_requests_consumer_id_kakao_place_id_key" ON "store_entry_requests"("consumer_id", "kakao_place_id");
+
+-- AddForeignKey
+ALTER TABLE "store_entry_requests" ADD CONSTRAINT "store_entry_requests_consumer_id_fkey" FOREIGN KEY ("consumer_id") REFERENCES "consumers"("id") ON DELETE CASCADE ON UPDATE CASCADE;
diff --git a/apps/backend/src/infra/database/prisma/schema.prisma b/apps/backend/src/infra/database/prisma/schema.prisma
index e2bd124a..032a9441 100644
--- a/apps/backend/src/infra/database/prisma/schema.prisma
+++ b/apps/backend/src/infra/database/prisma/schema.prisma
@@ -130,6 +130,7 @@ model Consumer {
   fcmTokens          ConsumerFcmToken[]
   notificationPreferences ConsumerNotificationPreference[]
   termsAgreements    ConsumerTermsAgreement[]
+  storeEntryRequests StoreEntryRequest[]
 
   @@index([phone])
   @@index([googleId])
@@ -137,6 +138,40 @@ model Consumer {
   @@map("consumers")
 }
 
+/// 미입점 스토어(카카오 장소) 입점 요청 — 구매자가 지도에서 "이 가게도 입점했으면" 하고 요청
+/// 동일 장소를 여러 구매자가 요청할 수 있으나, 한 구매자는 같은 장소를 한 번만 요청 가능
+model StoreEntryRequest {
+  id String @id @default(cuid())
+
+  consumerId String @map("consumer_id")
+
+  /// 카카오 로컬 장소 ID — 중복 요청 방지·동일 장소 수요 집계 기준
+  kakaoPlaceId String @map("kakao_place_id")
+
+  /// 요청 시점의 장소 스냅샷 (추후 어드민 검토·연락·실제 스토어 매칭용)
+  placeName    String  @map("place_name")
+  address      String?
+  roadAddress  String? @map("road_address")
+  phone        String?
+  categoryName String? @map("category_name")
+  placeUrl     String? @map("place_url")
+  latitude     Float?
+  longitude    Float?
+
+  /// 처리 상태 — 어드민 워크플로우 확장 대비
+  status StoreEntryRequestStatus @default(REQUESTED)
+
+  createdAt DateTime @default(now()) @map("created_at")
+  updatedAt DateTime @updatedAt @map("updated_at")
+
+  consumer Consumer @relation(fields: [consumerId], references: [id], onDelete: Cascade)
+
+  @@unique([consumerId, kakaoPlaceId])
+  @@index([kakaoPlaceId])
+  @@index([status])
+  @@map("store_entry_requests")
+}
+
 /// 판매자 앱(web-seller) 전용 계정
 model Seller {
   id String @id @default(cuid())
@@ -826,6 +861,15 @@ enum ProductCategoryType {
   PHOTO          // 사진
 }
 
+/// 미입점 스토어 입점 요청 처리 상태
+enum StoreEntryRequestStatus {
+  REQUESTED // 요청됨
+  REVIEWING // 검토중
+  APPROVED // 승인됨
+  REJECTED // 반려됨
+  COMPLETED // 입점 완료
+}
+
 /// 판매자 검증·온보딩
 enum SellerVerificationStatus {
   REGISTERED // 가입만 완료
diff --git a/apps/backend/src/modules/store-entry-request/constants/store-entry-request.constants.ts b/apps/backend/src/modules/store-entry-request/constants/store-entry-request.constants.ts
new file mode 100644
index 00000000..c14752e6
--- /dev/null
+++ b/apps/backend/src/modules/store-entry-request/constants/store-entry-request.constants.ts
@@ -0,0 +1,32 @@
+/**
+ * 입점 요청 관련 에러 메시지
+ */
+export const STORE_ENTRY_REQUEST_ERROR_MESSAGES = {
+  ALREADY_EXISTS: "이미 입점 요청한 가게입니다.",
+} as const;
+
+/**
+ * 입점 요청 관련 성공 메시지
+ */
+export const STORE_ENTRY_REQUEST_SUCCESS_MESSAGES = {
+  CREATED: "입점 요청이 접수되었습니다.",
+} as const;
+
+/**
+ * 입점 요청 조회 시 공통으로 노출하는 필드
+ */
+export const STORE_ENTRY_REQUEST_SELECT = {
+  id: true,
+  kakaoPlaceId: true,
+  placeName: true,
+  address: true,
+  roadAddress: true,
+  phone: true,
+  categoryName: true,
+  placeUrl: true,
+  latitude: true,
+  longitude: true,
+  status: true,
+  createdAt: true,
+  updatedAt: true,
+} as const;
diff --git a/apps/backend/src/modules/store-entry-request/dto/store-entry-request.dto.ts b/apps/backend/src/modules/store-entry-request/dto/store-entry-request.dto.ts
new file mode 100644
index 00000000..f3fc7b30
--- /dev/null
+++ b/apps/backend/src/modules/store-entry-request/dto/store-entry-request.dto.ts
@@ -0,0 +1,136 @@
+import { ApiProperty, ApiPropertyOptional } from "@nestjs/swagger";
+import { IsLatitude, IsLongitude, IsNotEmpty, IsOptional, IsString, MaxLength } from "class-validator";
+import { StoreEntryRequestStatus } from "@apps/backend/infra/database/prisma/generated/client";
+import { STORE_ENTRY_REQUEST_SUCCESS_MESSAGES } from "@apps/backend/modules/store-entry-request/constants/store-entry-request.constants";
+
+/**
+ * 입점 요청 생성 요청 DTO
+ * 카카오 로컬(키워드 검색) 장소 정보를 스냅샷으로 저장한다.
+ */
+export class CreateStoreEntryRequestDto {
+  @ApiProperty({ description: "카카오 로컬 장소 ID", example: "26338954" })
+  @IsString()
+  @IsNotEmpty()
+  @MaxLength(64)
+  kakaoPlaceId: string;
+
+  @ApiProperty({ description: "장소명", example: "산세바스티안 미입점" })
+  @IsString()
+  @IsNotEmpty()
+  @MaxLength(255)
+  placeName: string;
+
+  @ApiPropertyOptional({ description: "지번 주소", example: "서울 강남구 역삼동 123-45" })
+  @IsOptional()
+  @IsString()
+  @MaxLength(500)
+  address?: string;
+
+  @ApiPropertyOptional({ description: "도로명 주소", example: "서울 강남구 테헤란로 123" })
+  @IsOptional()
+  @IsString()
+  @MaxLength(500)
+  roadAddress?: string;
+
+  @ApiPropertyOptional({ description: "전화번호", example: "02-123-4567" })
+  @IsOptional()
+  @IsString()
+  @MaxLength(50)
+  phone?: string;
+
+  @ApiPropertyOptional({ description: "카카오 카테고리명", example: "음식점 > 카페 > 제과,베이커리" })
+  @IsOptional()
+  @IsString()
+  @MaxLength(255)
+  categoryName?: string;
+
+  @ApiPropertyOptional({ description: "카카오 장소 상세 URL", example: "http://place.map.kakao.com/26338954" })
+  @IsOptional()
+  @IsString()
+  @MaxLength(2048)
+  placeUrl?: string;
+
+  @ApiPropertyOptional({ description: "위도", example: 37.5012 })
+  @IsOptional()
+  @IsLatitude()
+  latitude?: number;
+
+  @ApiPropertyOptional({ description: "경도", example: 127.0396 })
+  @IsOptional()
+  @IsLongitude()
+  longitude?: number;
+}
+
+/**
+ * 입점 요청 존재 여부 조회 쿼리 DTO
+ */
+export class StoreEntryRequestExistsQueryDto {
+  @ApiProperty({ description: "카카오 로컬 장소 ID", example: "26338954" })
+  @IsString()
+  @IsNotEmpty()
+  @MaxLength(64)
+  kakaoPlaceId: string;
+}
+
+/**
+ * 입점 요청 생성 응답 DTO
+ */
+export class CreateStoreEntryRequestResponseDto {
+  @ApiProperty({
+    description: "응답 메시지",
+    example: STORE_ENTRY_REQUEST_SUCCESS_MESSAGES.CREATED,
+  })
+  message: string;
+}
+
+/**
+ * 입점 요청 존재 여부 응답 DTO (현재 로그인 사용자 기준)
+ */
+export class StoreEntryRequestExistsResponseDto {
+  @ApiProperty({ description: "현재 사용자의 입점 요청 존재 여부", example: true })
+  requested: boolean;
+}
+
+/**
+ * 입점 요청 단건 응답 DTO
+ */
+export class StoreEntryRequestResponseDto {
+  @ApiProperty({ example: "clxxxxxxxxxxxxxxxx" })
+  id: string;
+
+  @ApiProperty({ example: "26338954" })
+  kakaoPlaceId: string;
+
+  @ApiProperty({ example: "산세바스티안 미입점" })
+  placeName: string;
+
+  @ApiPropertyOptional({ example: "서울 강남구 역삼동 123-45" })
+  address: string | null;
+
+  @ApiPropertyOptional({ example: "서울 강남구 테헤란로 123" })
+  roadAddress: string | null;
+
+  @ApiPropertyOptional({ example: "02-123-4567" })
+  phone: string | null;
+
+  @ApiPropertyOptional({ example: "음식점 > 카페 > 제과,베이커리" })
+  categoryName: string | null;
+
+  @ApiPropertyOptional({ example: "http://place.map.kakao.com/26338954" })
+  placeUrl: string | null;
+
+  @ApiPropertyOptional({ example: 37.5012 })
+  latitude: number | null;
+
+  @ApiPropertyOptional({ example: 127.0396 })
+  longitude: number | null;
+
+  @ApiProperty({ enum: StoreEntryRequestStatus, example: StoreEntryRequestStatus.REQUESTED })
+  status: StoreEntryRequestStatus;
+
+  @ApiProperty()
+  createdAt: Date;
+
+  @ApiProperty()
+  updatedAt: Date;
+}
diff --git a/apps/backend/src/modules/store-entry-request/services/store-entry-request-read.service.ts b/apps/backend/src/modules/store-entry-request/services/store-entry-request-read.service.ts
new file mode 100644
index 00000000..bc1d6ef8
--- /dev/null
+++ b/apps/backend/src/modules/store-entry-request/services/store-entry-request-read.service.ts
@@ -0,0 +1,28 @@
+import { Injectable } from "@nestjs/common";
+import { PrismaService } from "@apps/backend/infra/database/prisma.service";
+import { StoreEntryRequestExistsResponseDto } from "@apps/backend/modules/store-entry-request/dto/store-entry-request.dto";
+
+/**
+ * 입점 요청 조회 서비스
+ */
+@Injectable()
+export class StoreEntryRequestReadService {
+  constructor(private readonly prisma: PrismaService) {}
+
+  /**
+   * 현재 사용자가 해당 장소에 이미 입점 요청했는지 여부 (버튼 상태 표시용)
+   * @param consumerId 구매자 ID
+   * @param kakaoPlaceId 카카오 로컬 장소 ID
+   */
+  async existsForUser(
+    consumerId: string,
+    kakaoPlaceId: string,
+  ): Promise<StoreEntryRequestExistsResponseDto> {
+    const existing = await this.prisma.storeEntryRequest.findUnique({
+      where: { consumerId_kakaoPlaceId: { consumerId, kakaoPlaceId } },
+      select: { id: true },
+    });
+
+    return { requested: existing !== null };
+  }
+}
diff --git a/apps/backend/src/modules/store-entry-request/services/store-entry-request-write.service.ts b/apps/backend/src/modules/store-entry-request/services/store-entry-request-write.service.ts
new file mode 100644
index 00000000..2f04d674
--- /dev/null
+++ b/apps/backend/src/modules/store-entry-request/services/store-entry-request-write.service.ts
@@ -0,0 +1,50 @@
+import { Injectable, ConflictException } from "@nestjs/common";
+import { PrismaService } from "@apps/backend/infra/database/prisma.service";
+import { LoggerUtil } from "@apps/backend/common/utils/logger.util";
+import { CreateStoreEntryRequestDto } from "@apps/backend/modules/store-entry-request/dto/store-entry-request.dto";
+import { STORE_ENTRY_REQUEST_ERROR_MESSAGES } from "@apps/backend/modules/store-entry-request/constants/store-entry-request.constants";
+
+/**
+ * 입점 요청 생성 서비스
+ * 미입점(카카오 장소) 스토어에 대한 입점 요청을 저장합니다.
+ */
+@Injectable()
+export class StoreEntryRequestWriteService {
+  constructor(private readonly prisma: PrismaService) {}
+
+  /**
+   * 입점 요청 추가 (사용자용)
+   * 동일 사용자가 같은 장소를 중복 요청하는 것은 DB unique 제약으로 방지합니다.
+   * @param consumerId 구매자 ID
+   * @param dto 카카오 장소 정보
+   */
+  async createForUser(consumerId: string, dto: CreateStoreEntryRequestDto) {
+    try {
+      await this.prisma.storeEntryRequest.create({
+        data: {
+          consumerId,
+          kakaoPlaceId: dto.kakaoPlaceId,
+          placeName: dto.placeName,
+          address: dto.address,
+          roadAddress: dto.roadAddress,
+          phone: dto.phone,
+          categoryName: dto.categoryName,
+          placeUrl: dto.placeUrl,
+          latitude: dto.latitude,
+          longitude: dto.longitude,
+        },
+      });
+    } catch (error: any) {
+      if (error?.code === "P2002") {
+        LoggerUtil.log(
+          `입점 요청 실패: 이미 요청 존재 - consumerId: ${consumerId}, kakaoPlaceId: ${dto.kakaoPlaceId}`,
+        );
+        throw new ConflictException(STORE_ENTRY_REQUEST_ERROR_MESSAGES.ALREADY_EXISTS);
+      }
+      LoggerUtil.log(
+        `입점 요청 실패: 알 수 없는 에러 - consumerId: ${consumerId}, kakaoPlaceId: ${dto.kakaoPlaceId}, error: ${error?.message || String(error)}`,
+      );
+      throw error;
+    }
+  }
+}
diff --git a/apps/backend/src/modules/store-entry-request/store-entry-request.module.ts b/apps/backend/src/modules/store-entry-request/store-entry-request.module.ts
new file mode 100644
index 00000000..3fc3976f
--- /dev/null
+++ b/apps/backend/src/modules/store-entry-request/store-entry-request.module.ts
@@ -0,0 +1,20 @@
+import { Module } from "@nestjs/common";
+import { DatabaseModule } from "@apps/backend/infra/database/database.module";
+import { StoreEntryRequestService } from "@apps/backend/modules/store-entry-request/store-entry-request.service";
+import { StoreEntryRequestReadService } from "@apps/backend/modules/store-entry-request/services/store-entry-request-read.service";
+import { StoreEntryRequestWriteService } from "@apps/backend/modules/store-entry-request/services/store-entry-request-write.service";
+
+/**
+ * 입점 요청 모듈
+ * 미입점(카카오 장소) 스토어 입점 요청 기능을 제공합니다.
+ */
+@Module({
+  imports: [DatabaseModule],
+  providers: [
+    StoreEntryRequestService,
+    StoreEntryRequestReadService,
+    StoreEntryRequestWriteService,
+  ],
+  exports: [StoreEntryRequestService],
+})
+export class StoreEntryRequestModule {}
diff --git a/apps/backend/src/modules/store-entry-request/store-entry-request.service.ts b/apps/backend/src/modules/store-entry-request/store-entry-request.service.ts
new file mode 100644
index 00000000..6e92de95
--- /dev/null
+++ b/apps/backend/src/modules/store-entry-request/store-entry-request.service.ts
@@ -0,0 +1,36 @@
+import { Injectable } from "@nestjs/common";
+import { StoreEntryRequestReadService } from "@apps/backend/modules/store-entry-request/services/store-entry-request-read.service";
+import { StoreEntryRequestWriteService } from "@apps/backend/modules/store-entry-request/services/store-entry-request-write.service";
+import {
+  CreateStoreEntryRequestDto,
+  StoreEntryRequestExistsResponseDto,
+} from "@apps/backend/modules/store-entry-request/dto/store-entry-request.dto";
+
+/**
+ * 입점 요청 서비스
+ * 미입점(카카오 장소) 스토어 입점 요청 관련 기능을 통합 제공합니다.
+ */
+@Injectable()
+export class StoreEntryRequestService {
+  constructor(
+    private readonly readService: StoreEntryRequestReadService,
+    private readonly writeService: StoreEntryRequestWriteService,
+  ) {}
+
+  /**
+   * 입점 요청 추가 (사용자용)
+   */
+  createForUser(consumerId: string, dto: CreateStoreEntryRequestDto) {
+    return this.writeService.createForUser(consumerId, dto);
+  }
+
+  /**
+   * 현재 사용자의 입점 요청 존재 여부 (사용자용)
+   */
+  existsForUser(
+    consumerId: string,
+    kakaoPlaceId: string,
+  ): Promise<StoreEntryRequestExistsResponseDto> {
+    return this.readService.existsForUser(consumerId, kakaoPlaceId);
+  }
+}
diff --git a/apps/web-user/src/app/map/page.tsx b/apps/web-user/src/app/map/page.tsx
index 34736cdc..155a0868 100644
--- a/apps/web-user/src/app/map/page.tsx
+++ b/apps/web-user/src/app/map/page.tsx
@@ -17,6 +17,10 @@ import { Icon } from "@/apps/web-user/common/components/icons";
 import { storeApi } from "@/apps/web-user/features/store/apis/store.api";
 import type { StoreInfo, StoreListFilter } from "@/apps/web-user/features/store/types/store.type";
 import { MapStoreCard } from "@/apps/web-user/features/store/components/map/MapStoreCard";
+import {
+  MapUnenteredStoreCard,
+  type MapUnenteredStore,
+} from "@/apps/web-user/features/store/components/map/MapUnenteredStoreCard";
 import { MapStoreListSection } from "@/apps/web-user/features/store/components/map/MapStoreListSection";
 import { MapTopSearchBar } from "@/apps/web-user/features/store/components/map/MapTopSearchBar";
 import { MapPickupDateBottomSheet } from "@/apps/web-user/features/store/components/map/MapPickupDateBottomSheet";
@@ -68,6 +72,9 @@ export default function MapPage() {
   const [kakaoLoaded, setKakaoLoaded] = useState(false);
   const [mapReady, setMapReady] = useState(false);
   const [selectedStore, setSelectedStore] = useState<StoreInfo | null>(null);
+  const [selectedUnenteredStore, setSelectedUnenteredStore] = useState<MapUnenteredStore | null>(
+    null,
+  );
   const [listSortBy, setListSortBy] = useState<MapListSortBy>("distance");
   const [listFilter, setListFilter] = useState<StoreListFilter>({});
   const [pickupFilter, setPickupFilter] = useState<MapPickupFilter | null>(null);
@@ -273,6 +280,7 @@ export default function MapPage() {
           map.panTo(position);
         }
         if (listSheetPanelOffsetRef.current > 0) closeListSheet();
+        setSelectedUnenteredStore(null);
         setSelectedStore(store);
       });
 
@@ -391,6 +399,18 @@ export default function MapPage() {
             markersRef.current.push(marker);
             window.kakao.maps.event.addListener(marker, "click", () => {
               setSelectedStore(null);
+              setSelectedUnenteredStore({
+                kakaoPlaceId: String(place.id ?? ""),
+                name: place.place_name ?? "",
+                address: place.address_name || undefined,
+                roadAddress: place.road_address_name || undefined,
+                phone: place.phone || undefined,
+                categoryName: place.category_name || undefined,
+                placeUrl: place.place_url || undefined,
+                latitude: lat,
+                longitude: lng,
+              });
+              if (listSheetPanelOffsetRef.current > 0) closeListSheet();
               if (markerImageRef.current)
                 markersRef.current.forEach((m) => m.setImage(markerImageRef.current));
               platformMarkersRef.current.forEach((m, i) => {
@@ -422,7 +442,7 @@ export default function MapPage() {
         { location: centerLatLng, useMapBounds: true },
       );
     },
-    [clearKakaoMarkers, isPlatformStoreDuplicate],
+    [clearKakaoMarkers, isPlatformStoreDuplicate, closeListSheet],
   );
 
   /** URL 검색 또는 픽업 필터 시 미입점 마커 제거, 해제 시에만 키워드 검색 재실행 */
@@ -432,6 +452,7 @@ export default function MapPage() {
     const suppress = Boolean(searchQuery || pickupFilter);
     if (suppress) {
       clearKakaoMarkers();
+      setSelectedUnenteredStore(null);
     } else if (searchStoresRef.current === null) {
       searchPlaces(mapInstanceRef.current.getCenter());
     }
@@ -503,6 +524,7 @@ export default function MapPage() {
 
         window.kakao.maps.event.addListener(map, "click", () => {
           setSelectedStore(null);
+          setSelectedUnenteredStore(null);
           if (listSheetPanelOffsetRef.current > 0) closeListSheet();
         });
 
@@ -862,7 +884,19 @@ export default function MapPage() {
         </div>
       )}
 
-      {!selectedStore && (
+      {!selectedStore && selectedUnenteredStore && (
+        <div
+          className="absolute z-30"
+          style={{ left: 16, right: 16, bottom: MAP_SELECTED_STORE_CARD_BOTTOM }}
+        >
+          <MapUnenteredStoreCard
+            key={selectedUnenteredStore.kakaoPlaceId}
+            store={selectedUnenteredStore}
+          />
+        </div>
+      )}
+
+      {!selectedStore && !selectedUnenteredStore && (
         <MapListSheetPanel
           offset={listSheetPanelOffset}
           expandedToTop={
diff --git a/apps/web-user/src/features/store/apis/store.api.ts b/apps/web-user/src/features/store/apis/store.api.ts
index de723c80..83f31ff9 100644
--- a/apps/web-user/src/features/store/apis/store.api.ts
+++ b/apps/web-user/src/features/store/apis/store.api.ts
@@ -5,6 +5,11 @@ import {
   type StoreListParams,
 } from "@/apps/web-user/features/store/types/store.type";
 import { StoreRegionsResponse } from "@/apps/web-user/features/store/types/region.type";
+import type {
+  CreateStoreEntryRequest,
+  StoreEntryRequestExistsResponse,
+} from "@/apps/web-user/features/store/types/store-entry-request.type";
+import { MessageResponse } from "@/apps/web-user/common/types/api.type";
 
 export const storeApi = {
   // 스토어 목록 조회
@@ -22,4 +27,18 @@ export const storeApi = {
     const response = await consumerClient.get("/store/regions");
     return response.data.data;
   },
+  // 미입점 스토어 입점 요청
+  createEntryRequest: async (data: CreateStoreEntryRequest): Promise<MessageResponse> => {
+    const response = await consumerClient.post("/store-entry-requests", data);
+    return response.data.data;
+  },
+  // 미입점 스토어 입점 요청 존재 여부 조회
+  getEntryRequestExists: async (
+    kakaoPlaceId: string,
+  ): Promise<StoreEntryRequestExistsResponse> => {
+    const response = await consumerClient.get("/store-entry-requests/exists", {
+      params: { kakaoPlaceId },
+    });
+    return response.data.data;
+  },
 };
diff --git a/apps/web-user/src/features/store/components/map/MapUnenteredStoreCard.tsx b/apps/web-user/src/features/store/components/map/MapUnenteredStoreCard.tsx
new file mode 100644
index 00000000..39dc71f4
--- /dev/null
+++ b/apps/web-user/src/features/store/components/map/MapUnenteredStoreCard.tsx
@@ -0,0 +1,127 @@
+"use client";
+
+import { useState } from "react";
+import { Toast } from "@/apps/web-user/common/components/toast/Toast";
+import { useAuthStore } from "@/apps/web-user/common/store/auth.store";
+import { useLoginSheetStore } from "@/apps/web-user/common/store/login-sheet.store";
+import { useRequestStoreEntry } from "@/apps/web-user/features/store/hooks/mutations/useRequestStoreEntry";
+import { useStoreEntryRequestExists } from "@/apps/web-user/features/store/hooks/queries/useStoreEntryRequestExists";
+
+/** 지도에서 클릭한 미입점 스토어(카카오 장소) */
+export interface MapUnenteredStore {
+  kakaoPlaceId: string;
+  name: string;
+  address?: string;
+  roadAddress?: string;
+  phone?: string;
+  categoryName?: string;
+  placeUrl?: string;
+  latitude: number;
+  longitude: number;
+}
+
+interface MapUnenteredStoreCardProps {
+  store: MapUnenteredStore;
+}
+
+/** 미입점 스토어 마커 클릭 시 하단에 표시되는 입점 요청 카드 */
+export function MapUnenteredStoreCard({ store }: MapUnenteredStoreCardProps) {
+  const { isAuthenticated } = useAuthStore();
+  const openLoginSheet = useLoginSheetStore((s) => s.openLoginSheet);
+  const { mutate: requestEntry, isPending } = useRequestStoreEntry();
+  const { data: existsData } = useStoreEntryRequestExists(store.kakaoPlaceId, isAuthenticated);
+
+  const [showToast, setShowToast] = useState(false);
+  const [requestedLocally, setRequestedLocally] = useState(false);
+
+  const alreadyRequested = requestedLocally || (existsData?.requested ?? false);
+  const disabled = isPending || alreadyRequested;
+
+  const handleRequestEntry = () => {
+    if (!isAuthenticated) {
+      openLoginSheet();
+      return;
+    }
+    if (disabled) return;
+    requestEntry(
+      {
+        kakaoPlaceId: store.kakaoPlaceId,
+        placeName: store.name,
+        address: store.address,
+        roadAddress: store.roadAddress,
+        phone: store.phone,
+        categoryName: store.categoryName,
+        placeUrl: store.placeUrl,
+        latitude: store.latitude,
+        longitude: store.longitude,
+      },
+      {
+        onSuccess: () => {
+          setRequestedLocally(true);
+          setShowToast(true);
+        },
+      },
+    );
+  };
+
+  const buttonLabel = alreadyRequested ? "입점 요청 완료" : "입점 요청하기";
+
+  return (
+    <>
+      <div
+        className="overflow-hidden"
+        style={{
+          boxShadow: "0px 4px 16px 0px #00000029",
+          background: "#FFFFFF",
+          borderRadius: 16,
+          padding: 16,
+        }}
+      >
+        <div className="flex items-center" style={{ gap: 6, marginBottom: 14 }}>
+          <h3
+            className="min-w-0 truncate font-bold text-gray-900"
+            style={{ fontSize: 16, lineHeight: "140%" }}
+          >
+            {store.name}
+          </h3>
+          <span
+            className="shrink-0 whitespace-nowrap"
+            style={{
+              fontWeight: 700,
+              fontSize: 11,
+              lineHeight: "140%",
+              padding: "2px 4px",
+              borderRadius: 4,
+              background: "#F5F5F5",
+              color: "#82817D",
+            }}
+          >
+            미입점
+          </span>
+        </div>
+
+        <button
+          type="button"
+          onClick={handleRequestEntry}
+          disabled={disabled}
+          className={`w-full font-bold text-white ${
+            alreadyRequested ? "bg-gray-300" : "bg-primary"
+          } ${isPending ? "opacity-60" : ""}`}
+          style={{ height: 52, borderRadius: 12, fontSize: 16, lineHeight: "140%" }}
+        >
+          {buttonLabel}
+        </button>
+      </div>
+
+      {showToast && (
+        <Toast
+          message="입점 요청이 접수됐어요!"
+          iconName="checkCircle"
+          iconClassName="text-green-400"
+          variant="row"
+          onClose={() => setShowToast(false)}
+        />
+      )}
+    </>
+  );
+}
diff --git a/apps/web-user/src/features/store/constants/storeQueryKeys.constant.ts b/apps/web-user/src/features/store/constants/storeQueryKeys.constant.ts
index 27c93c3e..aedeabf9 100644
--- a/apps/web-user/src/features/store/constants/storeQueryKeys.constant.ts
+++ b/apps/web-user/src/features/store/constants/storeQueryKeys.constant.ts
@@ -5,4 +5,6 @@ export const storeQueryKeys = {
   detail: (storeId: string) => ["store", "detail", storeId] as const,
   list: (params: { search?: string; sortBy?: string } & StoreListFilter) =>
     ["store", "list", params] as const,
+  entryRequestExists: (kakaoPlaceId: string) =>
+    ["store", "entry-request", "exists", kakaoPlaceId] as const,
 } as const;
diff --git a/apps/web-user/src/features/store/hooks/mutations/useRequestStoreEntry.ts b/apps/web-user/src/features/store/hooks/mutations/useRequestStoreEntry.ts
new file mode 100644
index 00000000..bd58a97f
--- /dev/null
+++ b/apps/web-user/src/features/store/hooks/mutations/useRequestStoreEntry.ts
@@ -0,0 +1,28 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { storeApi } from "@/apps/web-user/features/store/apis/store.api";
+import { storeQueryKeys } from "@/apps/web-user/features/store/constants/storeQueryKeys.constant";
+import { useAlertStore } from "@/apps/web-user/common/store/alert.store";
+import getApiMessage from "@/apps/web-user/common/utils/getApiMessage";
+import type { CreateStoreEntryRequest } from "@/apps/web-user/features/store/types/store-entry-request.type";
+
+/** 미입점 스토어 입점 요청 */
+export function useRequestStoreEntry() {
+  const queryClient = useQueryClient();
+  const { showAlert } = useAlertStore();
+
+  return useMutation({
+    mutationFn: (data: CreateStoreEntryRequest) => storeApi.createEntryRequest(data),
+    onSuccess: (_data, variables) => {
+      queryClient.invalidateQueries({
+        queryKey: storeQueryKeys.entryRequestExists(variables.kakaoPlaceId),
+      });
+    },
+    onError: (error) => {
+      showAlert({
+        type: "error",
+        title: "오류",
+        message: getApiMessage.error(error),
+      });
+    },
+  });
+}
diff --git a/apps/web-user/src/features/store/hooks/queries/useStoreEntryRequestExists.ts b/apps/web-user/src/features/store/hooks/queries/useStoreEntryRequestExists.ts
new file mode 100644
index 00000000..2472e085
--- /dev/null
+++ b/apps/web-user/src/features/store/hooks/queries/useStoreEntryRequestExists.ts
@@ -0,0 +1,15 @@
+import { useQuery } from "@tanstack/react-query";
+import { storeApi } from "@/apps/web-user/features/store/apis/store.api";
+import { storeQueryKeys } from "@/apps/web-user/features/store/constants/storeQueryKeys.constant";
+
+/**
+ * 현재 사용자의 특정 카카오 장소 입점 요청 존재 여부 조회.
+ * 로그인 상태이고 kakaoPlaceId가 있을 때만 조회한다.
+ */
+export function useStoreEntryRequestExists(kakaoPlaceId: string | null, enabled: boolean) {
+  return useQuery({
+    queryKey: storeQueryKeys.entryRequestExists(kakaoPlaceId ?? ""),
+    queryFn: () => storeApi.getEntryRequestExists(kakaoPlaceId as string),
+    enabled: enabled && !!kakaoPlaceId,
+  });
+}
diff --git a/apps/web-user/src/features/store/types/store-entry-request.type.ts b/apps/web-user/src/features/store/types/store-entry-request.type.ts
new file mode 100644
index 00000000..4cddf475
--- /dev/null
+++ b/apps/web-user/src/features/store/types/store-entry-request.type.ts
@@ -0,0 +1,17 @@
+/** 미입점 스토어(카카오 장소) 입점 요청 생성 요청 (백엔드 CreateStoreEntryRequestDto와 동일) */
+export interface CreateStoreEntryRequest {
+  kakaoPlaceId: string;
+  placeName: string;
+  address?: string;
+  roadAddress?: string;
+  phone?: string;
+  categoryName?: string;
+  placeUrl?: string;
+  latitude?: number;
+  longitude?: number;
+}
+
+/** 입점 요청 존재 여부 응답 (백엔드 StoreEntryRequestExistsResponseDto와 동일) */
+export interface StoreEntryRequestExistsResponse {
+  requested: boolean;
+}

From ffe90e206adf2b425bec17fc220c1dd6a1bb2498 Mon Sep 17 00:00:00 2001
From: jangchanwoo <wkdcksdn1996@gmail.com>
Date: Tue, 23 Jun 2026 09:52:35 +0900
Subject: [PATCH 41/41] =?UTF-8?q?[WEB-USER][QA]:=20=EC=98=88=EC=95=BD=20?=
 =?UTF-8?q?=EC=83=81=EC=84=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=92=A4?=
 =?UTF-8?q?=EB=A1=9C=EA=B0=80=EA=B8=B0=20=EB=8F=99=EC=9E=91=EC=9D=84=20?=
 =?UTF-8?q?=EC=9D=B4=EC=A0=84=20=ED=8E=98=EC=9D=B4=EC=A7=80=EB=A1=9C=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

기존에는 항상 내 예약 목록(/mypage/order)으로 이동했으나, router.back()으로 변경하여 진입했던 이전 페이지로 돌아가도록 했습니다.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 apps/web-user/src/app/order/[orderId]/page.tsx | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/apps/web-user/src/app/order/[orderId]/page.tsx b/apps/web-user/src/app/order/[orderId]/page.tsx
index cbf886f7..b96c2580 100644
--- a/apps/web-user/src/app/order/[orderId]/page.tsx
+++ b/apps/web-user/src/app/order/[orderId]/page.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import { useParams, useRouter } from "next/navigation";
+import { useParams } from "next/navigation";
 import Header from "@/apps/web-user/common/components/headers/Header";
 import { Toast } from "@/apps/web-user/common/components/toast/Toast";
 import { useOrderDetail } from "@/apps/web-user/features/order/hooks/queries/useOrderDetail";
@@ -10,10 +10,8 @@ import {
   PendingToast,
   usePendingToastStore,
 } from "@/apps/web-user/common/store/pending-toast.store";
-import { PATHS } from "@/apps/web-user/common/constants/paths.constant";
 
 export default function OrderDetailPage() {
-  const router = useRouter();
   const params = useParams<{ orderId: string }>();
   const orderId = params?.orderId ?? "";
   const { data: order, isLoading } = useOrderDetail(orderId);
@@ -28,11 +26,7 @@ export default function OrderDetailPage() {
 
   return (
     <div>
-      <Header
-        variant="back-title"
-        title="예약 상세"
-        onBackClick={() => router.push(PATHS.MY_ORDERS)}
-      />
+      <Header variant="back-title" title="예약 상세" />
       {isLoading ? (
         <div className="px-5 py-8 space-y-4 animate-pulse">
           <div className="h-5 w-40 bg-gray-100 rounded" />