[김찬기] Sprint 10

README.md

@@ -78,3 +78,8 @@ state 관리하고 있는 params과 usePageSize로 관리하는 pageSize의 변
 - 직접 값을 업데이트해줄때는 (특수한 필드의 경우), useForm의 반환값중 setValue를 이용하면 값 업데이트와 벨리데이션이 작동한다.
 - react hook form에 컴포넌트를 연결할때에는 한겹의 어뎁터 레이어를 설정하여 컴포넌트 내부에서 react hook form의 의존성이 없도록 작성하는 방법을 사용하자.
 - watch를 통해 각 필드에 value값을 전달하면 하나의 필드가 업데이트 될때마다 전체가 리랜더링이 되어버린다. (Controller, useController 등을 통해서 전달해야함)
+
+### nextjs server component에서 try/catch문 안에서 redirect 사용하기
+
+- 서버컴포넌트에서 try,catch문안에서 redirect사용시 문제가 됬던점에 대해서 정리했습니다.
+- https://heavy-bear.tistory.com/16

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

@@ -1,12 +1,11 @@
-import { ReactNode } from "react";
+import { PropsWithChildren } from "react";
 import Link from "next/link";
 import Image from "next/image";
 import logo from "@assets/img/common/logo_full.svg";
 import Oauth from "./Oauth";
 import styles from "./AuthContainer.module.scss";
 
-interface AuthContainerProps {
-  children: ReactNode;
+interface AuthContainerProps extends PropsWithChildren {
   mode?: "login" | "signup";
 }
 

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

@@ -0,0 +1,113 @@
+"use client";
+
+import { Section } from "@components/Section";
+import {
+  FieldItem,
+  Form,
+  ImageUpload,
+  Input,
+  Textarea,
+} from "@components/Field";
+import { Button } from "@components/ui";
+import useFormWithError from "@hooks/useFormWithError";
+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;
+}
+
+export default function ArticleForm({
+  initialData,
+  mode = "add",
+  articleId,
+}: ArticleFormProps) {
+  const router = useRouter();
+  const { handleArticleAdd, handleArticleModify } =
+    useArticleActions(articleId);
+  const onFormSubmit = mode === "add" ? handleArticleAdd : handleArticleModify;
+
+  const {
+    control,
+    formError,
+    handleSubmit,
+    formState: { isSubmitting, isValid },
+  } = useFormWithError<ArticleFormType>({
+    mode: "onBlur",
+    resolver: zodResolver(ArticleFormSchema),
+    defaultValues: initialData || {
+      title: "",
+      content: "",
+    },
+  });
+
+  async function onSubmit(data: ArticleFormType) {
+    try {
+      const result = await onFormSubmit(data);
+      const id = result?.id;
+
+      alert(
+        mode === "add" ? "성공적으로 작성했습니다." : "성공적으로 수정했습니다."
+      );
+      router.replace(id ? `/boards/${id}` : "boards");
+    } catch (err) {
+      throw err;
+    }
+  }
+
+  return (
+    <Section>
+      <Form
+        isLoading={isSubmitting}
+        error={formError}
+        onSubmit={handleSubmit(onSubmit)}
+      >
+        <Section.Header title="게시글 쓰기">
+          <Button type="submit" size="sm" disabled={!isValid}>
+            {mode === "add" ? "등록" : "수정"}
+          </Button>
+        </Section.Header>
+        <Section.Content>
+          <FieldItem>
+            <FieldItem.Label htmlFor="title">제목</FieldItem.Label>
+            <FieldAdapter
+              name="title"
+              control={control}
+              render={(props) => (
+                <Input
+                  type="text"
+                  placeholder="제목을 입력해주세요"
+                  {...props}
+                />
+              )}
+            />
+          </FieldItem>
+          <FieldItem>
+            <FieldItem.Label htmlFor="content">내용</FieldItem.Label>
+            <FieldAdapter
+              name="content"
+              control={control}
+              render={(props) => (
+                <Textarea placeholder="내용을 입력해주세요" {...props} />
+              )}
+            />
+          </FieldItem>
+          <FieldItem>
+            <FieldItem.Label htmlFor="image">이미지</FieldItem.Label>
+            <FieldAdapter
+              name="image"
+              control={control}
+              render={(props) => <ImageUpload {...props} />}
+            />
+          </FieldItem>
+        </Section.Content>
+      </Form>
+    </Section>
+  );
+}

src/app/(common)/(board)/_components/BoardDetail.module.scss

@@ -0,0 +1,38 @@
+.detail {
+  margin-bottom: 3.2rem;
+}
+
+.header {
+  margin-bottom: 1.6rem;
+  display: flex;
+  justify-content: space-between;
+
+  .title {
+    font-size: 2rem;
+    font-weight: 700;
+    word-break: break-all;
+  }
+}
+
+.meta {
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--color-secondary-200);
+  padding-bottom: 1.6rem;
+  margin-bottom: 2.4rem;
+
+  .controls {
+    margin-left: 3.2rem;
+    padding-left: 3.2rem;
+    border-left: 1px solid var(--color-secondary-200);
+  }
+}
+
+.image {
+  max-width: 24rem;
+  margin-bottom: 2.4rem;
+}
+
+.content {
+  font-size: 1.8rem;
+}

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

@@ -0,0 +1,99 @@
+"use client";
+
+import { Article } from "@/types/article";
+import { useSession } from "next-auth/react";
+import { useRouter } from "next/navigation";
+import useArticleActions from "./useArticleActions";
+import { More } from "@/components/Button";
+import { Author, Fullscreen, LikeButton, Thumbnail } from "@/components/ui";
+import styles from "./BoardDetail.module.scss";
+
+interface BoardDetailProps {
+  detail: Article;
+}
+
+export default function BoardDetail({ detail }: BoardDetailProps) {
+  const {
+    id,
+    image,
+    title,
+    content,
+    writer: { nickname, id: ownerId },
+    updatedAt,
+    likeCount,
+    isLiked,
+  } = detail;
+
+  const { data: session } = useSession();
+  const router = useRouter();
+  const { handleLike, handleArticleDelete } = useArticleActions(id);
+  const isOwner = ownerId === Number(session?.user?.id);
+
+  async function handleToggleLike() {
+    if (!session?.user) {
+      return alert("로그인이 필요합니다.");
+    }
+    await handleLike(!isLiked);
+    router.refresh();
+  }
+
+  function handleModify() {
+    if (!isOwner) {
+      return alert("작성자만 수정이 가능합니다.");
+    }
+
+    router.push(`/modifyBoard/${id}`);
+  }
+
+  async function handleDelete() {
+    if (!isOwner) {
+      return alert("작성자만 삭제가 가능합니다.");
+    }
+
+    if (confirm("정말 삭제할까요?")) {
+      try {
+        await handleArticleDelete();
+        alert("상품을 삭제했습니다.");
+        router.replace("/boards");
+      } catch (err) {
+        console.log(err);
+      }
+    }
+  }
+
+  return (
+    <div className={styles.detail}>
+      <header className={styles.header}>
+        <h2 className={styles.title}>{title}</h2>
+        <div className={styles.controls}>
+          <More
+            options={[
+              { label: "수정하기", action: handleModify },
+              { label: "삭제하기", action: handleDelete },
+            ]}
+          />
+        </div>
+      </header>
+      <div className={styles.meta}>
+        <Author nickname={nickname} updatedAt={updatedAt} />
+        <div className={styles.controls}>
+          <LikeButton
+            count={likeCount}
+            isLiked={isLiked}
+            onClick={handleToggleLike}
+          />
+        </div>
+      </div>
+      <div>
+        {image && (
+          <div className={styles.image}>
+            <Fullscreen>
+              <Thumbnail src={image} alt={title} />
+            </Fullscreen>
+          </div>
+        )}
+        <div className={styles.content}>{content}</div>
+      </div>
+    </div>
+  );
+}

src/app/(common)/(board)/_components/useArticleActions.ts

@@ -0,0 +1,57 @@
+import { ArticleFormType } from "@/schemas/article";
+import {
+  addArticle,
+  deleteArticle,
+  modifyArticle,
+  toggleLike,
+  uploadArticleImage,
+} from "@service/article";
+
+export default function useArticleActions(articleId?: number) {
+  async function handleLike(flag: boolean) {
+    if (!articleId) return;
+
+    return toggleLike(articleId, flag);
+  }
+
+  async function handleArticleAdd(formData: ArticleFormType) {
+    try {
+      if (formData.image instanceof File) {
+        const { url } = await uploadArticleImage(formData.image);
+        formData.image = url;
+      }
+
+      return await addArticle(formData);
+    } catch (err) {
+      throw err;
+    }
+  }
+
+  async function handleArticleModify(formData: ArticleFormType) {
+    if (!articleId) return;
+
+    try {
+      if (formData.image instanceof File) {
+        const { url } = await uploadArticleImage(formData.image);
+        formData.image = url;
+      }
+
+      return await modifyArticle(articleId, formData);
+    } catch (err) {
+      throw err;
+    }
+  }
+
+  async function handleArticleDelete() {
+    if (!articleId) return;
+
+    return deleteArticle(articleId);
+  }
+
+  return {
+    handleLike,
+    handleArticleAdd,
+    handleArticleModify,
+    handleArticleDelete,
+  };
+}

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

@@ -1,5 +1,10 @@
-import { Temporary } from "@/components/ui";
+import { PageWrapper } from "@/components/Page";
+import ArticleForm from "../_components/ArticleForm";
 
 export default function AddBoardPage() {
-  return <Temporary title="게시글 작성 페이지" />;
+  return (
+    <PageWrapper>
+      <ArticleForm mode="add" />
+    </PageWrapper>
+  );
 }

src/app/(common)/(board)/boards/(lists)/@all/page.tsx

@@ -2,6 +2,7 @@ import { getArticles } from "@/service/article";
 import { Section } from "@/components/Section";
 import BoardList from "../_components/BoardList";
 import BoardFilter from "../_components/BoardFilter";
+import { Button } from "@/components/ui";
 
 type ItemsPageQueryParams = {
   page?: string;
@@ -22,7 +23,11 @@ export default async function AllListPage({
 
   return (
     <Section>
-      <Section.Header title="게시글" />
+      <Section.Header title="게시글">
+        <Button href="/addBoard" size="sm">
+          글쓰기
+        </Button>
+      </Section.Header>
       <Section.Content>
         <BoardFilter />
         <BoardList data={data} />

src/app/(common)/(board)/boards/[id]/@comments/loading.tsx

@@ -0,0 +1,5 @@
+import { Message } from "@/components/ui";
+
+export default function Loading() {
+  return <Message>코멘트를 가져오는중입니다...</Message>;
+}

src/app/(common)/(board)/boards/[id]/@comments/page.tsx

@@ -0,0 +1,16 @@
+import Comments from "@/components/Comment/Comments";
+import { getComments } from "@/service/comments";
+
+export default async function ArticleCommentsPage({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const id = (await params).id;
+  const comments = await getComments("articles", {
+    id: Number(id),
+    limit: 5,
+  });
+
+  return <Comments name="articles" data={comments} />;
+}

src/app/(common)/(board)/boards/[id]/@detail/loading.tsx

@@ -0,0 +1,5 @@
+import { Message } from "@/components/ui";
+
+export default function Loading() {
+  return <Message>게시물 정보를 불러오는중입니다...</Message>;
+}