[김찬기] Sprint 11

src/app/(auth)/_components/LoginForm.tsx

@@ -1,22 +1,20 @@
 "use client";
 
-import { FieldItem, Input } from "@components/Field";
+import { useRouter } from "next/navigation";
+import { FieldItem, Form, Input } from "@components/Field";
 import { Button } from "@components/ui";
 import useFormWithError from "@hooks/useFormWithError";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { signinFormSchmea, SigninFormType } from "@schemas/auth";
 import { FieldAdapter } from "@components/adaptor/rhf";
-import { ServerForm } from "@/components/Field/ServerForm";
-import { useActionState } from "react";
 import action from "../login/action";
 
 export default function LoginForm() {
-  const [formStatus, formAction, isPending] = useActionState(action, {
-    message: "",
-  });
   const {
     control,
-    formState: { isValid },
+    formError,
+    handleSubmit,
+    formState: { isSubmitting, isValid },
   } = useFormWithError<SigninFormType>({
     mode: "onBlur",
     resolver: zodResolver(signinFormSchmea),
@@ -25,12 +23,22 @@ export default function LoginForm() {
       password: "",
     },
   });
+  const router = useRouter();
+
+  async function onSubmit(data: SigninFormType) {
+    const response = await action(data);
+    if (response.success) {
+      router.replace("/items");
+    } else {
+      throw new Error(response.message);
+    }
+  }
 
   return (
-    <ServerForm
-      action={formAction}
-      isLoading={isPending}
-      error={formStatus?.message}
+    <Form
+      isLoading={isSubmitting}
+      error={formError}
+      onSubmit={handleSubmit(onSubmit)}
     >
       <FieldItem>
         <FieldItem.Label htmlFor="email">이메일</FieldItem.Label>
@@ -63,6 +71,6 @@ export default function LoginForm() {
       <Button type="submit" size="xl" disabled={!isValid}>
         로그인
       </Button>
-    </ServerForm>
+    </Form>
   );
 }

src/app/(auth)/_components/SignupForm.tsx

@@ -1,23 +1,20 @@
 "use client";
 
-import { FieldItem, Input } from "@components/Field";
+import { useRouter } from "next/navigation";
+import { FieldItem, Form, Input } from "@components/Field";
 import { Button } from "@components/ui";
 import useFormWithError from "@hooks/useFormWithError";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { signupFormSchema, SignupFormType } from "@schemas/auth";
 import { FieldAdapter } from "@components/adaptor/rhf";
 import action from "../signup/action";
-import { useActionState } from "react";
-import { ServerForm } from "@/components/Field/ServerForm";
 
 export default function SignupForm() {
-  const [formStatus, formAction, isPending] = useActionState(action, {
-    message: "",
-  });
-
   const {
     control,
-    formState: { isValid },
+    formError,
+    handleSubmit,
+    formState: { isSubmitting, isValid },
   } = useFormWithError<SignupFormType>({
     mode: "onBlur",
     resolver: zodResolver(signupFormSchema),
@@ -28,12 +25,22 @@ export default function SignupForm() {
       passwordConfirmation: "",
     },
   });
+  const router = useRouter();
+
+  async function onSubmit(data: SignupFormType) {
+    const response = await action(data);
+    if (response.success) {
+      router.replace("/login");
+    } else {
+      throw new Error(response.message);
+    }
+  }
 
   return (
-    <ServerForm
-      action={formAction}
-      isLoading={isPending}
-      error={formStatus?.message}
+    <Form
+      isLoading={isSubmitting}
+      error={formError}
+      onSubmit={handleSubmit(onSubmit)}
     >
       <FieldItem>
         <FieldItem.Label htmlFor="email">이메일</FieldItem.Label>
@@ -92,6 +99,6 @@ export default function SignupForm() {
       <Button type="submit" size="xl" disabled={!isValid}>
         회원가입
       </Button>
-    </ServerForm>
+    </Form>
   );
 }

src/app/(auth)/login/action.ts

@@ -1,19 +1,16 @@
 "use server";
 
 import { signIn } from "@/auth";
-import { signinFormSchmea } from "@/schemas/auth";
+import { signinFormSchmea, SigninFormType } from "@/schemas/auth";
 import { CredentialsSignin } from "next-auth";
-import { isRedirectError } from "next/dist/client/components/redirect-error";
-import { redirect } from "next/navigation";
-export default async function action(
-  prevState: { message: string },
-  formData: FormData
-) {
-  const parsed = signinFormSchmea.safeParse(Object.fromEntries(formData));
+
+export default async function action(data: SigninFormType) {
+  const parsed = signinFormSchmea.safeParse(data);
 
   if (!parsed.success) {
     return {
       message: "제출양식에 문제가 있습니다. 확인해주세요",
+      success: false,
     };
   }
 
@@ -23,20 +20,22 @@ export default async function action(
       password: parsed.data.password,
       redirect: false,
     });
-    redirect("/");
-  } catch (error) {
-    if (isRedirectError(error)) {
-      throw error;
-    }
 
+    return {
+      message: "로그인 성공",
+      success: true,
+    };
+  } catch (error) {
     if (error instanceof CredentialsSignin) {
       return {
         message: `로그인 실패 : ${error.code}`,
+        success: false,
       };
     }
-  }
 
-  return {
-    message: "로그인 성공",
-  };
+    return {
+      message: `로그인 실패`,
+      success: false,
+    };
+  }
 }

src/app/(auth)/signup/action.ts

@@ -1,20 +1,16 @@
 "use server";
 
-import { signupFormSchema } from "@/schemas/auth";
+import { signupFormSchema, SignupFormType } from "@/schemas/auth";
 import { signUp } from "@/service/auth";
 import { isAxiosError } from "axios";
-import { isRedirectError } from "next/dist/client/components/redirect-error";
-import { redirect } from "next/navigation";
 
-export default async function action(
-  prevState: { message: string },
-  formData: FormData
-) {
-  const parsed = signupFormSchema.safeParse(Object.fromEntries(formData));
+export default async function action(data: SignupFormType) {
+  const parsed = signupFormSchema.safeParse(data);
 
   if (!parsed.success) {
     return {
       message: "제출양식에 문제가 있습니다. 확인해주세요",
+      success: false,
     };
   }
 
@@ -26,22 +22,23 @@ export default async function action(
       passwordConfirmation: parsed.data.passwordConfirmation,
     });
 
-    redirect("/login");
+    return {
+      message: "회원가입 성공",
+      success: true,
+    };
   } catch (error) {
-    if (isRedirectError(error)) {
-      throw error;
-    }
-
     if (isAxiosError(error)) {
       const message =
         error.response?.data.message || "알 수 없는 에러가 발생했어요.";
       return {
         message: `회원가입 실패 : ${message}`,
+        success: false,
       };
     }
-  }
 
-  return {
-    message: "회원가입 성공",
-  };
+    return {
+      message: "회원가입 실패",
+      success: false,
+    };
+  }
 }

src/app/(common)/(board)/_components/ArticleAddForm.tsx

@@ -0,0 +1,10 @@
+"use client";
+
+import ArticleForm from "./ArticleForm";
+import useArticleActions from "./useArticleActions";
+
+export default function ArticleAddForm() {
+  const { handleArticleAdd } = useArticleActions();
+
+  return <ArticleForm mode="add" onFormSubmit={handleArticleAdd} />;
+}

src/app/(common)/(board)/_components/ArticleForm.tsx

@@ -14,24 +14,24 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { Article } from "@/types/article";
 import { FieldAdapter } from "@components/adaptor/rhf";
 import { useRouter } from "next/navigation";
-import useArticleActions from "./useArticleActions";
 import { ArticleFormSchema, ArticleFormType } from "@/schemas/article";
 
-interface ArticleFormProps {
-  initialData?: Article;
-  mode?: "add" | "edit";
-  articleId?: number;
+interface ArticleAddFormProps {
+  mode: "add";
+  onFormSubmit: (data: ArticleFormType) => Promise<Article | undefined>;
 }
+interface ArticleModifyFormProps {
+  initialData: Article;
+  mode: "edit";
+  onFormSubmit: (data: ArticleFormType) => Promise<Article | undefined>;
+}
+
+type ArticleFormProps = ArticleAddFormProps | ArticleModifyFormProps;
 
-export default function ArticleForm({
-  initialData,
-  mode = "add",
-  articleId,
-}: ArticleFormProps) {
+export default function ArticleForm(props: ArticleFormProps) {
+  const { mode, onFormSubmit } = props;
+  const initialData = mode === "edit" ? props.initialData : undefined;
   const router = useRouter();
-  const { handleArticleAdd, handleArticleModify } =
-    useArticleActions(articleId);
-  const onFormSubmit = mode === "add" ? handleArticleAdd : handleArticleModify;
 
   const {
     control,
@@ -103,7 +103,16 @@ export default function ArticleForm({
             <FieldAdapter
               name="image"
               control={control}
-              render={(props) => <ImageUpload {...props} />}
+              render={(props) => (
+                <ImageUpload
+                  {...props}
+                  value={props.value}
+                  onChange={(file) => {
+                    props.onChange(file);
+                    props.onBlur();
+                  }}
+                />
+              )}
             />
           </FieldItem>
         </Section.Content>

src/app/(common)/(board)/_components/ArticleModifyForm.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { Article } from "@/types/article";
+import ArticleForm from "./ArticleForm";
+import useArticleActions from "./useArticleActions";
+
+export default function ArticleModifyForm({
+  initialData,
+}: {
+  initialData: Article;
+}) {
+  const { handleArticleModify } = useArticleActions(initialData.id);
+
+  return (
+    <ArticleForm
+      mode="edit"
+      onFormSubmit={handleArticleModify}
+      initialData={initialData}
+    />
+  );
+}

src/app/(common)/(board)/addBoard/page.tsx

@@ -1,10 +1,10 @@
 import { PageWrapper } from "@/components/Page";
-import ArticleForm from "../_components/ArticleForm";
+import ArticleAddForm from "../_components/ArticleAddForm";
 
 export default function AddBoardPage() {
   return (
     <PageWrapper>
-      <ArticleForm mode="add" />
+      <ArticleAddForm />
     </PageWrapper>
   );
 }

src/app/(common)/(board)/boards/(lists)/layout.tsx

@@ -1,7 +1,7 @@
 import { PageWrapper } from "@/components/Page";
 import { ReactNode } from "react";
 
-export default function dss({
+export default function ListLayout({
   all,
   best,
   children,

src/app/(common)/(board)/modifyBoard/[id]/page.tsx

@@ -4,9 +4,9 @@ import { notFound, redirect } from "next/navigation";
 import { Suspense } from "react";
 import { Message } from "@/components/ui";
 import { getArticle } from "@/service/article";
-import ArticleForm from "../../_components/ArticleForm";
 import { isAxiosError } from "axios";
 import { isRedirectError } from "next/dist/client/components/redirect-error";
+import ArticleModifyForm from "../../_components/ArticleModifyForm";
 
 export default async function ModifyBoardPage({
   params,
@@ -32,11 +32,7 @@ export default async function ModifyBoardPage({
         <Suspense
           fallback={<Message>게시물정보를 가져오는 중입니다...</Message>}
         >
-          <ArticleForm
-            mode="edit"
-            initialData={filteredDetail}
-            articleId={Number(id)}
-          />
+          <ArticleModifyForm initialData={filteredDetail} />
         </Suspense>
       </PageWrapper>
     );

src/app/(common)/(market)/_components/ProductAddForm.tsx

@@ -0,0 +1,10 @@
+"use client";
+
+import ProductForm from "./ProductForm";
+import useProductActions from "./useProductActions";
+
+export default function ProductAddForm() {
+  const { handleProductAdd } = useProductActions();
+
+  return <ProductForm mode="add" onFormSubmit={handleProductAdd} />;
+}