Merge pull request #100 from YAPP-Github/feature/PRODUCT-181

feat: 스토리 등록 구현 (#84)

Author: wkdtnqls0506

src/app/(home)/_components/Story/Story.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useRef } from "react";
+
+import { useImageUploadContext } from "@/app/story/register/_contexts";
+import { imageFileSchema } from "@/app/story/register/_schemas";
+
+export const Story = () => {
+  const router = useRouter();
+  const { setUpload } = useImageUploadContext();
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
+
+  const handleOpenPhotoGallery = () => {
+    fileInputRef.current?.click();
+  };
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    const validationResult = imageFileSchema.safeParse(file);
+
+    if (!validationResult.success) {
+      const errorMessage = validationResult.error.errors[0]?.message;
+      // TODO: Toast 변경
+      alert(errorMessage || "올바르지 않은 파일입니다.");
+
+      if (fileInputRef.current) {
+        fileInputRef.current.value = "";
+      }
+      return;
+    }
+
+    const previewUrl = URL.createObjectURL(file);
+    setUpload(file, previewUrl);
+
+    router.push("/story/register");
+  };
+  return (
+    <>
+      <button onClick={handleOpenPhotoGallery}>스토리 사진 선택</button>
+      <input
+        ref={fileInputRef}
+        type='file'
+        accept='image/jpeg,image/jpg,image/png'
+        onChange={handleFileChange}
+        hidden
+      />
+    </>
+  );
+};

src/app/(home)/_components/Story/index.ts

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

src/app/(home)/_components/index.ts

@@ -1,3 +1,4 @@
 export { RecentCheers } from "./RecentCheers";
 export { RecentlySupportedStores } from "./RecentlySupportStories";
 export { StoreStory } from "./StoreStory";
+export { Story } from "./Story";

src/app/(home)/layout.tsx

@@ -1,9 +1,32 @@
+"use client";
+
+import Link from "next/link";
+
+import LogoWordmarkIcon from "@/assets/logo-wordmark.svg";
+import { Button } from "@/components/ui/Button";
+import { GNB } from "@/components/ui/GNB";
+
 import * as styles from "./layout.css";
 
 export default function MainLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
-  return <main className={styles.mainContainer}>{children}</main>;
+  return (
+    <>
+      <GNB
+        leftAddon={<LogoWordmarkIcon width={46} height={24} />}
+        align='left'
+        rightAddon={
+          <Link href='/login'>
+            <Button variant='primary' size='small' style={{ width: "6.3rem" }}>
+              로그인
+            </Button>
+          </Link>
+        }
+      />
+      <main className={styles.mainContainer}>{children}</main>
+    </>
+  );
 }

src/app/(home)/page.tsx

@@ -1,17 +1,23 @@
+"use client";
+
+import { Bleed } from "@/components/ui/Bleed";
 import { Spacer } from "@/components/ui/Spacer";
 import { VStack } from "@/components/ui/Stack";
 
 import {
   RecentCheers,
   RecentlySupportedStores,
   StoreStory,
+  Story,
 } from "./_components";
 
 export default function HomePage() {
   return (
     <>
+      <Bleed inline={20}>
+        <Story />
+      </Bleed>
       <Spacer size={12} />
-      <div>대충 스토리</div>
       <Spacer size={32} />
       <VStack gap={40}>
         <RecentCheers />

src/app/layout.tsx

@@ -9,6 +9,7 @@ import { MSWProvider, QueryProvider } from "@/providers";
 import { pretendard } from "@/styles/pretendard";
 
 import * as styles from "./layout.css";
+import { UploadProvider } from "./story/register/_contexts";
 
 export const metadata: Metadata = {
   title: "Eat-da",
@@ -35,7 +36,9 @@ export default function RootLayout({
         <div className={styles.wrapper}>
           <RegisterServiceWorkerClient />
           <QueryProvider>
-            <MSWProvider>{children}</MSWProvider>
+            <MSWProvider>
+              <UploadProvider>{children}</UploadProvider>
+            </MSWProvider>
           </QueryProvider>
         </div>
       </body>

src/app/story/[id]/page.tsx

@@ -0,0 +1,3 @@
+export default function StoryIdPage() {
+  return <div>StoryIdPage</div>;
+}

src/app/story/register/_api/index.ts

@@ -0,0 +1,3 @@
+export * from "./register.api";
+export * from "./register.queries";
+export * from "./register.types";

src/app/story/register/_api/register.api.ts

@@ -0,0 +1,33 @@
+import { authHttp } from "@/lib/api";
+
+import {
+  type StoryRegisterRequest,
+  type StoryRegisterResponse,
+} from "./register.types";
+
+/**
+ * 스토리 등록 API
+ * @param {StoryRegisterRequest} storyRequest - 스토리 등록 요청 데이터
+ * @param {File} imageFile - 업로드할 이미지 파일
+ *
+ * @returns {Promise<StoryRegisterResponse>} 등록된 스토리 ID 반환
+ */
+export const postStory = async (
+  storyRequest: StoryRegisterRequest,
+  imageFile: File
+): Promise<StoryRegisterResponse> => {
+  const formData = new FormData();
+
+  formData.append(
+    "request",
+    new Blob([JSON.stringify(storyRequest)], { type: "application/json" })
+  );
+
+  formData.append("image", imageFile);
+
+  return await authHttp
+    .post("api/stories", {
+      body: formData,
+    })
+    .json<StoryRegisterResponse>();
+};

src/app/story/register/_api/register.queries.ts

@@ -0,0 +1,30 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+
+import { postStory } from "./register.api";
+import type { StoryRegisterRequest } from "./register.types";
+
+export const storyQueryKeys = {
+  all: ["story"] as const,
+  lists: () => [...storyQueryKeys.all, "list"] as const,
+} as const;
+
+export const usePostStoryMutation = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({
+      storyRequest,
+      imageFile,
+    }: {
+      storyRequest: StoryRegisterRequest;
+      imageFile: File;
+    }) => {
+      return postStory(storyRequest, imageFile);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: storyQueryKeys.lists(),
+      });
+    },
+  });
+};