Merge pull request #115 from YAPP-Github/refactor/PRODUCT-219

wkdtnqls0506 · web-flow · commit 29c5b610b376 · 2025-08-01T22:53:01.000+09:00
refactor: 1차 스프린트 전 수정사항 적용 (#114)
diff --git a/package.json b/package.json
@@ -31,8 +31,8 @@
     "es-toolkit": "^1.39.7",
     "iron-session": "^8.0.4",
     "ky": "1.7.5",
-    "motion": "^12.23.11",
     "lottie-react": "^2.4.1",
+    "motion": "^12.23.11",
     "next": "15.3.2",
     "overlay-kit": "^1.8.4",
     "react": "^19.0.0",
@@ -41,6 +41,7 @@
     "react-simplikit": "^0.0.40",
     "react-slick": "^0.30.3",
     "slick-carousel": "^1.8.1",
+    "sonner": "^2.0.6",
     "vaul": "^1.1.2",
     "zod": "^3.25.75"
   },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/(home)/_components/Header/Header.tsx b/src/app/(home)/_components/Header/Header.tsx
@@ -11,7 +11,7 @@ import { Button } from "@/components/ui/Button";
 import { GNB } from "@/components/ui/GNB";
 
 export const Header = () => {
-  const { data: member } = useQuery(memberQueryOptions);
+  const { data: member } = useQuery({ ...memberQueryOptions, retry: false });
 
   return (
     <GNB
diff --git a/src/app/(home)/_components/Story/Story.tsx b/src/app/(home)/_components/Story/Story.tsx
@@ -3,6 +3,7 @@
 import { Suspense } from "@suspensive/react";
 import { useRouter } from "next/navigation";
 import { useRef } from "react";
+import { toast, Toaster } from "sonner";
 
 import { useImageUploadContext } from "@/app/story/register/_contexts";
 import { imageFileSchema } from "@/app/story/register/_schemas";
@@ -30,8 +31,8 @@ export const Story = () => {
 
     if (!validationResult.success) {
       const errorMessage = validationResult.error.errors[0]?.message;
-      // TODO: Toast 변경
-      alert(errorMessage || "올바르지 않은 파일입니다.");
+
+      toast.warning(errorMessage || "올바르지 않은 파일입니다.");
 
       if (fileInputRef.current) {
         fileInputRef.current.value = "";
@@ -64,6 +65,7 @@ export const Story = () => {
           <StoryList />
         </Suspense>
       </HStack>
+      <Toaster position='bottom-center' richColors />
     </div>
   );
 };
diff --git a/src/app/(home)/_components/Story/StoryList/StoryList.tsx b/src/app/(home)/_components/Story/StoryList/StoryList.tsx
@@ -11,7 +11,7 @@ import * as styles from "./StoryList.css";
 
 export const StoryList = () => {
   const router = useRouter();
-  const { data: stories } = useSuspenseQuery(storiesQueryOptions);
+  const { data: stories } = useSuspenseQuery(storiesQueryOptions(20));
 
   const handleStoryClick = (storyId: number) => {
     router.push(`/story/${storyId}`);
diff --git a/src/app/(store)/stores/[storeId]/_components/StoreStories/StoreStories.css.ts b/src/app/(store)/stores/[storeId]/_components/StoreStories/StoreStories.css.ts
@@ -1,7 +1,43 @@
 import { style } from "@vanilla-extract/css";
 
+import { radius } from "@/styles";
+
 // StoreStories 컴포넌트 스타일
 export const storeStoriesContainer = style({
   paddingTop: "2.8rem",
   paddingBottom: "4rem",
 });
+
+export const storyWrapper = style({
+  position: "relative",
+  width: "12.4rem",
+  height: "22rem",
+});
+
+export const overlay = style({
+  position: "absolute",
+  bottom: 0,
+  left: 0,
+  width: "100%",
+  height: "100%",
+  background:
+    "linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.7) 100%)",
+  borderRadius: radius[160],
+});
+
+export const image = style({
+  objectFit: "cover",
+  borderRadius: radius[160],
+});
+
+export const memberWrapper = style({
+  position: "absolute",
+  bottom: "0.8rem",
+  left: "0.8rem",
+});
+
+export const nickname = style({
+  whiteSpace: "nowrap",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+});
diff --git a/src/app/(store)/stores/[storeId]/_components/StoreStories/StoreStories.tsx b/src/app/(store)/stores/[storeId]/_components/StoreStories/StoreStories.tsx
@@ -1,5 +1,13 @@
 "use client";
 
+import { useQuery } from "@tanstack/react-query";
+import Image from "next/image";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+
+import { storeDetailQueryOptions } from "@/app/(store)/_api/shop";
+import { Avatar } from "@/app/member/_components/Avatar";
+import { storiesByKakaoIdQueryOptions } from "@/app/story/_api";
 import CameraIcon from "@/assets/camera.svg";
 import { Button } from "@/components/ui/Button";
 import { Spacer } from "@/components/ui/Spacer";
@@ -10,35 +18,77 @@ import { colors } from "@/styles";
 import * as styles from "./StoreStories.css";
 
 export const StoreStories = ({ storeId }: { storeId: number }) => {
-  void storeId;
+  const router = useRouter();
+  const { data: store } = useQuery(storeDetailQueryOptions(Number(storeId)));
+
+  if (!store) {
+    return (
+      <VStack className={styles.storeStoriesContainer}>
+        <Text>가게 정보를 불러오는 중...</Text>
+      </VStack>
+    );
+  }
 
-  const isEmpty = true;
+  const handleClick = () => {
+    router.push("/");
+  };
 
   return (
     <VStack className={styles.storeStoriesContainer}>
-      {isEmpty ? <EmptyStoreStories /> : <StoreStoriesContent />}
+      <StoreStoriesContent kakaoId={store.kakaoId} />
 
       <Spacer size={20} />
 
       <Button variant='assistive' size='large' fullWidth>
-        <HStack gap={6} align='center'>
-          방문 스토리 남기기 <CameraIcon color={colors.neutral[10]} />
+        <HStack gap={6} align='center' onClick={handleClick}>
+          <Text typo='body1Sb'>방문 스토리 남기기</Text>
+          <CameraIcon color={colors.neutral[10]} />
         </HStack>
       </Button>
     </VStack>
   );
 };
 
-const StoreStoriesContent = () => {
+const StoreStoriesContent = ({ kakaoId }: { kakaoId: string }) => {
+  const { data: stories } = useQuery(storiesByKakaoIdQueryOptions(kakaoId, 20));
+
+  if (!stories || stories.stories.length === 0) {
+    return <EmptyStoreStories />;
+  }
+
   return (
     <VStack>
       <Text as='h3' typo='title2Sb' color='text.normal'>
         가게에 담긴 스토리
       </Text>
 
       <Spacer size={16} />
-
-      <div>스토리들</div>
+      <HStack gap={4}>
+        {stories.stories.map(data => (
+          <Link href={`/story/${data.storyId}`} key={data.storyId}>
+            <div className={styles.storyWrapper}>
+              <Image
+                src={data.imageUrl}
+                alt='스토리 이미지'
+                className={styles.image}
+                width={124}
+                height={220}
+              />
+              <div className={styles.overlay} />
+              <HStack align='center' gap={4} className={styles.memberWrapper}>
+                <Avatar memberId={data.memberId} />
+                <Text
+                  typo='label1Sb'
+                  color='text.white'
+                  className={styles.nickname}
+                >
+                  {data.memberNickname}
+                </Text>
+              </HStack>
+            </div>
+          </Link>
+        ))}
+      </HStack>
     </VStack>
   );
 };
diff --git a/src/app/member/profile/_components/Banner/Banner.tsx b/src/app/member/profile/_components/Banner/Banner.tsx
@@ -1,3 +1,4 @@
+
 "use client";
 
 import Image from "next/image";
diff --git a/src/app/member/profile/_components/MenuList/MenuList.tsx b/src/app/member/profile/_components/MenuList/MenuList.tsx
@@ -3,6 +3,7 @@
 import * as AlertDialog from "@radix-ui/react-alert-dialog";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
+import { toast, Toaster } from "sonner";
 
 import { useDeleteSessionMutation } from "@/app/(auth)/_api/auth/auth.queries";
 import { AlertModal } from "@/components/ui/AlertModal";
@@ -20,17 +21,20 @@ export const MenuList = () => {
     logout(undefined, {
       onSuccess: () => {
         // TODO: Toast 띄우기
+        toast.success("로그아웃이 완료되었어요.");
         router.replace("/");
       },
       onError: error => {
         // TODO: Toast 띄우기
+        toast.error("로그아웃에 실패했어요. 다시 시도해주세요.");
         console.error("로그아웃 실패", error);
       },
     });
   };
 
   return (
     <>
+      <Toaster position='bottom-center' richColors />
       <VStack as='ul' gap={8} className={styles.wrapper}>
         {MENU_LIST.map(menu => (
           <li key={menu.id} className={styles.list}>
@@ -54,6 +58,11 @@ export const MenuList = () => {
                         size='large'
                         className={styles.modalButton}
                         style={{ borderRadius: "0 0 0 1.2rem" }}
+                        onClick={() =>
+                          toast.error(
+                            "로그아웃에 실패했어요. 다시 시도해주세요."
+                          )
+                        }
                       >
                         취소
                       </Button>
diff --git a/src/app/story/[id]/_api/detail.types.ts b/src/app/story/[id]/_api/detail.types.ts
@@ -8,4 +8,5 @@ export type StoryDetailResponse = {
   imageUrl: string;
   memberId: number;
   memberNickname: string;
+  storeId: number | null;
 };
diff --git a/src/app/story/[id]/_components/StoryDetailContent/StoryDetailContent.tsx b/src/app/story/[id]/_components/StoryDetailContent/StoryDetailContent.tsx
@@ -3,6 +3,7 @@
 import { useSuspenseQuery } from "@tanstack/react-query";
 import { AnimatePresence, motion } from "motion/react";
 import Image from "next/image";
+import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 
@@ -99,10 +100,17 @@ export const StoryDetailContent = ({ storyId }: StoryDetailContentProps) => {
           <div className={styles.tagContainer}>
             <div className={styles.tag}>
               <MarketFillIcon className={styles.tagIcon} />
-              {/* TODO: 가게가 등록되어 있을 경우, 가게 상세페이지로 이동 */}
-              <Text typo='label1Sb' color='common.100'>
-                {story.storeName}
-              </Text>
+              {story.storeId ? (
+                <Link href={`/stores/${story.storeId}`}>
+                  <Text typo='label1Sb' color='common.100'>
+                    {story.storeName}
+                  </Text>
+                </Link>
+              ) : (
+                <Text typo='label1Sb' color='common.100'>
+                  {story.storeName}
+                </Text>
+              )}
             </div>
             <a
               href={`${KAKAO_PLACE_URL}/${story.storeKakaoId}`}
diff --git a/src/app/story/_api/stories.api.ts b/src/app/story/_api/stories.api.ts
@@ -1,12 +1,37 @@
 import { http } from "@/lib/api";
 
-import type { StoriesResponse } from "./stories.types";
+import type {
+  StoriesByKakaoIdResponse,
+  StoriesResponse,
+} from "./stories.types";
 
 /**
  * 스토리 목록 조회 API
  *
  * @returns {Promise<StoriesResponse>} 스토리 목록 리스트 반환
  */
-export const getStories = async (): Promise<StoriesResponse> => {
-  return await http.get("api/stories").json<StoriesResponse>();
+export const getStories = async (size: number): Promise<StoriesResponse> => {
+  return await http
+    .get("api/stories", { searchParams: { size } })
+    .json<StoriesResponse>();
+};
+
+/**
+ * 카카오 ID로 스토리 목록 조회 API
+ *
+ * @param kakaoId - 가게의 카카오 ID (path parameter)
+ * @param size - 스토리 개수 (기본값: 5, 최소: 1, 최대: 50)
+ * @returns {Promise<StoriesByKakaoIdResponse>} 해당 카카오 ID의 스토리 목록 반환
+ */
+export const getStoriesByKakaoId = async (
+  kakaoId: string,
+  size: number = 5
+): Promise<StoriesByKakaoIdResponse> => {
+  return await http
+    .get(`api/stories/kakao/${kakaoId}`, {
+      searchParams: {
+        size,
+      },
+    })
+    .json<StoriesByKakaoIdResponse>();
 };
diff --git a/src/app/story/_api/stories.queries.ts b/src/app/story/_api/stories.queries.ts
@@ -1,13 +1,29 @@
 import { queryOptions } from "@tanstack/react-query";
 
-import { getStories } from "./stories.api";
+import { getStories, getStoriesByKakaoId } from "./stories.api";
 
 export const storiesQueryKeys = {
   all: ["story"] as const,
+
   lists: () => [...storiesQueryKeys.all, "list"] as const,
+
+  kakaoLists: () => [...storiesQueryKeys.all, "kakao"] as const,
+  kakaoList: (kakaoId: string, size: number) =>
+    [...storiesQueryKeys.kakaoLists(), kakaoId, { size }] as const,
 } as const;
 
-export const storiesQueryOptions = queryOptions({
-  queryKey: storiesQueryKeys.lists(),
-  queryFn: getStories,
-});
+export const storiesQueryOptions = (size: number) =>
+  queryOptions({
+    queryKey: storiesQueryKeys.lists(),
+    queryFn: () => getStories(size),
+  });
+
+export const storiesByKakaoIdQueryOptions = (
+  kakaoId: string,
+  size: number = 5
+) =>
+  queryOptions({
+    queryKey: storiesQueryKeys.kakaoList(kakaoId, size),
+    queryFn: () => getStoriesByKakaoId(kakaoId, size),
+    enabled: !!kakaoId,
+  });
diff --git a/src/app/story/_api/stories.types.ts b/src/app/story/_api/stories.types.ts
diff --git a/src/app/story/register/_components/StoryImagePreview/StoryImagePreview.tsx b/src/app/story/register/_components/StoryImagePreview/StoryImagePreview.tsx

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+`
`1`	`2`	`"use client";`
`2`	`3`
`3`	`4`	`import Image from "next/image";`