Merge pull request #105 from YAPP-Github/feature/PRODUCT-215

Author: Seojunhwan

package.json

@@ -27,12 +27,14 @@
     "@vanilla-extract/css": "^1.17.2",
     "@vanilla-extract/dynamic": "^2.1.5",
     "@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",
     "lottie-react": "^2.4.1",
     "next": "15.3.2",
+    "overlay-kit": "^1.8.4",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-hook-form": "^7.58.1",

pnpm-lock.yaml

@@ -0,0 +1,35 @@
+import { authHttp } from "@/lib/api";
+
+import {
+  type CheerRegisterRequest,
+  type CheerRegisterResponse,
+} from "./cheer.types";
+
+/**
+ * 응원 등록 API
+ * @param {CheerRegisterRequest} cheerRequest - 응원 등록 요청 데이터
+ * @param {File | null} imageFile - 업로드할 이미지 파일 (선택사항)
+ *
+ * @returns {Promise<CheerRegisterResponse>} 등록된 응원 ID 반환
+ */
+export const postCheer = async (
+  cheerRequest: CheerRegisterRequest,
+  imageFile: File | null
+): Promise<CheerRegisterResponse> => {
+  const formData = new FormData();
+
+  formData.append(
+    "request",
+    new Blob([JSON.stringify(cheerRequest)], { type: "application/json" })
+  );
+
+  if (imageFile) {
+    formData.append("image", imageFile);
+  }
+
+  return await authHttp
+    .post("api/cheer", {
+      body: formData,
+    })
+    .json<CheerRegisterResponse>();
+};

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

@@ -0,0 +1,30 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+
+import { postCheer } from "./cheer.api";
+import type { CheerRegisterRequest } from "./cheer.types";
+
+export const cheerQueryKeys = {
+  all: ["cheer"] as const,
+  lists: () => [...cheerQueryKeys.all, "list"] as const,
+} as const;
+
+export const usePostCheerMutation = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({
+      cheerRequest,
+      imageFile,
+    }: {
+      cheerRequest: CheerRegisterRequest;
+      imageFile: File | null;
+    }) => {
+      return postCheer(cheerRequest, imageFile);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: cheerQueryKeys.lists(),
+      });
+    },
+  });
+};

src/app/(cheer)/_api/cheer.queries.ts

@@ -0,0 +1,12 @@
+export type CheerRegisterRequest = {
+  storeKakaoId: string;
+  storeName: string;
+  description: string;
+};
+
+export type CheerRegisterResponse = {
+  storeId: number;
+  cheerId: number;
+  imageUrl: string;
+  cheerDescription: string;
+};

src/app/(cheer)/_api/cheer.types.ts

@@ -82,11 +82,7 @@ const CheerContent = ({ storeId }: { storeId: string }) => {
 
       <Spacer size={shouldShowToggleButton ? 12 : 20} />
 
-      {/* 
-        TODO: 가게 응원하기 버튼 클릭 시 가게 응원 페이지로 이동
-        추후 가게 응원 등록 작업할 때 연결 예정
-      */}
-      <Link href={""}>
+      <Link href={`/stores/register?storeId=${storeId}`}>
         <Button variant='primary' size='large' fullWidth>
           가게 응원하기
         </Button>

src/app/(cheer)/_api/index.ts

@@ -0,0 +1,32 @@
+import { style } from "@vanilla-extract/css";
+
+import { colors } from "@/styles";
+
+export const progressBar = style({
+  width: "100%",
+  height: "0.4rem",
+  backgroundColor: colors.coolNeutral[98],
+  position: "relative",
+  borderRadius: "0.2rem",
+  overflow: "hidden",
+
+  selectors: {
+    "&::after": {
+      content: "''",
+      position: "absolute",
+      top: 0,
+      left: 0,
+      height: "100%",
+      width: "100%",
+      backgroundColor: colors.redOrange[50],
+      borderRadius: "0.2rem",
+      transformOrigin: "left center",
+      transition: "transform 0.5s ease",
+      transform: "scaleX(0)",
+    },
+
+    "&[data-active='true']::after": {
+      transform: "scaleX(1)",
+    },
+  },
+});

src/app/(store)/stores/[storeId]/_components/StoreCheers/StoreCheers.tsx

@@ -0,0 +1,24 @@
+import { HStack } from "@/components/ui/Stack";
+
+import * as styles from "./ProgressBar.css";
+
+type ProgressBarProps = {
+  currentStep: number;
+  totalSteps: number;
+};
+
+export const ProgressBar = ({ currentStep, totalSteps }: ProgressBarProps) => {
+  const isActive = (index: number) => currentStep >= index + 1;
+
+  return (
+    <HStack gap={4}>
+      {Array.from({ length: totalSteps }).map((_, index) => (
+        <div
+          key={index}
+          className={styles.progressBar}
+          data-active={isActive(index)}
+        />
+      ))}
+    </HStack>
+  );
+};

src/app/(store)/stores/register/_components/ProgressBar/ProgressBar.css.ts

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