Merge pull request #106 from YAPP-Github/feature/PRODUCT-182

feat: 스토리 조회 구현 (#85)

Author: wkdtnqls0506

package.json

@@ -29,9 +29,9 @@
     "@vanilla-extract/recipes": "^0.5.7",
     "clsx": "^2.1.1",
     "es-toolkit": "^1.39.7",
-    "framer-motion": "^12.23.9",
     "iron-session": "^8.0.4",
     "ky": "1.7.5",
+    "motion": "^12.23.11",
     "lottie-react": "^2.4.1",
     "next": "15.3.2",
     "overlay-kit": "^1.8.4",

pnpm-lock.yaml

@@ -1,4 +1,4 @@
-import { authHttp } from "@/lib/api";
+import { http } from "@/lib/api";
 
 import { type StoreSearchResponse } from "./search.types";
 
@@ -10,7 +10,7 @@ import { type StoreSearchResponse } from "./search.types";
 export const getStoreSearch = async (
   query: string
 ): Promise<StoreSearchResponse> => {
-  return await authHttp
+  return await http
     .get("api/shop/search", {
       searchParams: { query },
     })

src/app/(search)/_api/search.api.ts

@@ -1,7 +1,7 @@
 "use client";
 
 import { useQuery } from "@tanstack/react-query";
-import { AnimatePresence, motion } from "framer-motion";
+import { AnimatePresence, motion } from "motion/react";
 import { type ReactNode, useCallback, useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { useDebounce } from "react-simplikit";

src/app/(search)/_components/SearchStoreBottomSheet/SearchStoreBottomSheet.tsx

@@ -0,0 +1,13 @@
+import { style } from "@vanilla-extract/css";
+
+import { radius } from "@/styles";
+
+export const avatar = style({
+  width: "3.4rem",
+  height: "3.4rem",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  padding: "0.6rem",
+  borderRadius: radius.circle,
+});

src/app/member/_components/Avatar/Avatar.css.ts

@@ -0,0 +1,41 @@
+import Bapurit from "@/assets/logo/symbol.svg";
+
+import { PROFILE_COLORS } from "../../_constants";
+import { getProfileColorIndex } from "../../_utils";
+import * as styles from "./Avatar.css";
+
+type AvatarProps = {
+  /** 사용자 고유 ID */
+  memberId: number;
+
+  className?: string;
+};
+
+/**
+ * 사용자별 고유한 색상 배경을 가진 프로필 아바타 컴포넌트
+ *
+ * @description
+ * memberId를 기반으로 3가지 색상(노랑, 분홍, 파랑) 중 하나를 자동으로 할당합니다.
+ * 같은 memberId는 항상 같은 색상을 가집니다.
+ *
+ * @example
+ * ```tsx
+ * <Avatar memberId={123} />
+ * <Avatar memberId={story.memberId} />
+ * ```
+ */
+export const Avatar = ({ memberId, className }: AvatarProps) => {
+  const colorIndex = getProfileColorIndex(memberId);
+  const colorConfig = PROFILE_COLORS[colorIndex];
+
+  return (
+    <div
+      className={`${styles.avatar} ${className || ""}`}
+      style={{
+        backgroundColor: colorConfig.background,
+      }}
+    >
+      <Bapurit width={23} height={23} />
+    </div>
+  );
+};

src/app/member/_components/Avatar/Avatar.tsx

@@ -0,0 +1 @@
+export { Avatar } from "./Avatar";

src/app/member/_components/Avatar/index.ts

@@ -0,0 +1 @@
+export * from "./profileColors.constants";

src/app/member/_constants/index.ts

@@ -0,0 +1,19 @@
+export const PROFILE_COLORS = {
+  0: {
+    background: "#FFF1AF",
+    name: "yellow",
+  },
+  1: {
+    background: "#FFDDDA",
+    name: "pink",
+  },
+  2: {
+    background: "#C9ECFF",
+    name: "blue",
+  },
+} as const;
+
+export type ProfileColorIndex = keyof typeof PROFILE_COLORS;
+
+// 프로필 색상의 개수
+export const PROFILE_COLOR_COUNT = Object.keys(PROFILE_COLORS).length;

src/app/member/_constants/profileColors.constants.ts

@@ -1 +1,2 @@
-export { phoneNumberUtils } from "./phoneNumberUtils";
+export * from "./phoneNumberUtils";
+export * from "./profileUtils";