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

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(),
+      });
+    },
+  });
+};

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

@@ -0,0 +1,9 @@
+export type StoryRegisterRequest = {
+  storeKakaoId: string;
+  storeName: string;
+  description?: string;
+};
+
+export type StoryRegisterResponse = {
+  storyId: number;
+};

src/app/story/register/_components/StoryDescription/StoryDescription.css.ts

@@ -0,0 +1,9 @@
+import { style } from "@vanilla-extract/css";
+
+export const wrapper = style({
+  margin: "2rem 0",
+});
+
+export const textField = style({
+  height: "9.6rem",
+});

src/app/story/register/_components/StoryDescription/StoryDescription.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { useFormContext } from "react-hook-form";
+
+import { TextField } from "@/components/ui/TextField";
+
+import { type StoryRegisterFormData } from "../../_schemas";
+import * as styles from "./StoryDescription.css";
+
+export const StoryDescription = () => {
+  const {
+    register,
+    formState: { errors },
+  } = useFormContext<StoryRegisterFormData>();
+
+  return (
+    <div className={styles.wrapper}>
+      <TextField
+        {...register("description")}
+        as='textarea'
+        placeholder='가게에 대해 설명해주세요'
+        status={errors.description ? "negative" : "inactive"}
+        helperText={errors.description?.message}
+        className={styles.textField}
+      />
+    </div>
+  );
+};

src/app/story/register/_components/StoryDescription/index.ts

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

src/app/story/register/_components/StoryImagePreview/StoryImagePreview.css.ts

@@ -0,0 +1,35 @@
+import { style } from "@vanilla-extract/css";
+
+import { colors, radius, semantic, typography } from "@/styles";
+
+export const imageWrapper = style({
+  position: "relative",
+  width: "12.1rem",
+  height: "21.3rem",
+  borderRadius: radius[160],
+  overflow: "hidden",
+  margin: "0 auto",
+  backgroundColor: colors.neutral[10],
+});
+
+export const image = style({
+  objectFit: "contain",
+});
+
+export const overlayButtonWrapper = style({
+  position: "absolute",
+  bottom: "0",
+  width: "100%",
+  display: "flex",
+  justifyContent: "center",
+  padding: "0 1.2rem 1.2rem",
+});
+
+export const overlayButton = style({
+  padding: "0.5rem 1.2rem",
+  ...typography.label1Sb,
+  color: semantic.text.white,
+  background: "rgba(23, 23, 23, 0.60)",
+  borderRadius: radius.circle,
+  cursor: "pointer",
+});

src/app/story/register/_components/StoryImagePreview/StoryImagePreview.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import Image from "next/image";
+import { useFormContext } from "react-hook-form";
+
+import { imageFileSchema, type StoryRegisterFormData } from "../../_schemas";
+import * as styles from "./StoryImagePreview.css";
+
+export const StoryImagePreview = () => {
+  const { watch, setValue } = useFormContext<StoryRegisterFormData>();
+  const imageFile = watch("image");
+
+  const previewUrl = URL.createObjectURL(imageFile);
+
+  const validateImage = (file: File) => {
+    const result = imageFileSchema.safeParse(file);
+
+    if (!result.success) {
+      const errorMessage = result.error.errors[0]?.message;
+      // TODO: Toast 변경
+      alert(errorMessage);
+      return;
+    }
+
+    setValue("image", file, { shouldValidate: true });
+  };
+
+  const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newFile = e.target.files?.[0];
+
+    if (newFile) {
+      validateImage(newFile);
+    }
+
+    e.target.value = "";
+  };
+
+  return (
+    <div className={styles.imageWrapper}>
+      <Image
+        src={previewUrl}
+        alt='스토리 등록 사진 프리뷰'
+        width={121}
+        height={213}
+        className={styles.image}
+      />
+      <div className={styles.overlayButtonWrapper}>
+        <label className={styles.overlayButton}>
+          사진 변경
+          <input
+            type='file'
+            onChange={handleImageChange}
+            accept='image/jpeg,image/jpg,image/png'
+            hidden
+          />
+        </label>
+      </div>
+    </div>
+  );
+};

src/app/story/register/_components/StoryImagePreview/index.ts

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

src/app/story/register/_components/StorySearchStore/StorySearchStore.css.ts

@@ -0,0 +1,12 @@
+import { style } from "@vanilla-extract/css";
+
+import { colors } from "@/styles";
+
+export const star = style({
+  marginLeft: "0.4rem",
+  color: colors.redOrange[50],
+});
+
+export const field = style({
+  cursor: "pointer",
+});