[나지원] sprint10

components/addboard/AddBoardForm.module.css

@@ -0,0 +1,39 @@
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+
+.header h2 {
+  font-size: 1.25rem;
+  font-weight: 700;
+  line-height: 1.5rem;
+  color: var(--gray800);
+}
+
+.button {
+  line-height: 1.625rem;
+  padding: 8px 23px;
+}
+
+.input {
+  gap: 12px;
+}
+
+@media screen and (min-width: 768px) {
+  .form {
+    gap: 24px;
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .header h2 {
+    line-height: 2rem;
+  }
+}

components/addboard/AddBoardForm.tsx

@@ -0,0 +1,131 @@
+import { ChangeEvent, useState, useEffect, MouseEvent } from "react";
+import { useRouter } from "next/router";
+import FileInput from "../ui/FileInput";
+import Input from "../ui/Input";
+import Textarea from "../ui/Textarea";
+import Button from "../ui/Button";
+import { fetchData } from "@/lib/fetchData";
+import { ARTICLE_URL, IMAGE_URL } from "@/constants/url";
+import { useAuth } from "@/contexts/AuthProvider";
+import styles from "./AddBoardForm.module.css";
+
+interface Board {
+  imgFile: File | null;
+  title: string;
+  content: string;
+}
+
+type BoardField = keyof Board;
+
+const INITIAL_BOARD: Board = {
+  imgFile: null,
+  title: "",
+  content: "",
+};
+
+const AddBoardForm = () => {
+  const [isDisabled, setIsDisabled] = useState(true);
+  const [values, setValues] = useState<Board>(INITIAL_BOARD);
+  const { accessToken } = useAuth();
+  const router = useRouter();
+
+  const handleChange = (name: BoardField, value: Board[BoardField]): void => {
+    setValues((prevValues) => {
+      return {
+        ...prevValues,
+        [name]: value,
+      };
+    });
+  };
+
+  const handleInputChange = (
+    e: ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLTextAreaElement>
+  ) => {
+    const { name, value } = e.target;
+    handleChange(name as BoardField, value);
+  };
+
+  const handleSubmit = async (
+    e: MouseEvent<HTMLButtonElement>
+  ): Promise<void> => {
+    e.preventDefault();
+
+    const { imgFile, ...otherValues } = values;
+    let url = null;
+
+    if (imgFile) {
+      const formData = new FormData();
+      formData.append("image", imgFile);
+
+      const response = await fetchData(IMAGE_URL, {
+        method: "POST",
+        headers: {
+          Authorization: `Bearer ${accessToken}`,
+        },
+        body: formData,
+      });
+      url = response.url;
+    }
+
+    const { id } = await fetchData(ARTICLE_URL, {
+      method: "POST",
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
+      body: url ? { image: url, ...otherValues } : { ...otherValues },
+    });
+    router.push(`/board/${id}`);
+  };
+
+  const checkFormEmpty = (values: Board): boolean => {
+    const { title, content } = values;
+
+    return !title || !content;
+  };
+
+  useEffect(() => {
+    setIsDisabled(checkFormEmpty(values));
+  }, [values]);
+
+  return (
+    <form className={styles.form}>
+      <div className={styles.header}>
+        <h2>게시글 쓰기</h2>
+        <Button
+          type="submit"
+          className={styles.button}
+          disabled={isDisabled}
+          onClick={handleSubmit}
+        >
+          등록
+        </Button>
+      </div>
+      <Input
+        className={styles.input}
+        type="text"
+        name="title"
+        label="*제목"
+        placeholder="제목을 입력해주세요"
+        value={values.title}
+        onChange={handleInputChange}
+      />
+      <Textarea
+        className={styles.input}
+        label="*내용"
+        name="content"
+        placeholder="내용을 입력해주세요"
+        value={values.content}
+        onChange={handleInputChange}
+      />
+      <FileInput
+        className={styles.input}
+        label="이미지"
+        name="imgFile"
+        value={values.imgFile}
+        onChange={handleChange}
+      />
+    </form>
+  );
+};
+
+export default AddBoardForm;

components/board/AddCommentForm.module.css

@@ -0,0 +1,45 @@
+.form {
+  margin-bottom: 24px;
+}
+
+.textarea > textarea {
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+  height: 104px;
+}
+
+.textarea > label {
+  font-size: 1rem;
+  font-weight: 600;
+  line-height: 1.625rem;
+  color: var(--gary800);
+}
+
+.button {
+  display: block;
+  margin-left: auto;
+  padding: 8px 23px;
+  line-height: 1.625rem;
+  margin-top: 16px;
+}
+
+@media screen and (min-width: 768px) {
+  .form {
+    margin-bottom: 32px;
+  }
+
+  .textarea {
+    gap: 9px;
+  }
+
+  .textarea > textarea {
+    font-size: 1rem;
+    line-height: 1.625rem;
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .form {
+    margin-bottom: 40px;
+  }
+}

components/board/AddCommentForm.tsx

@@ -0,0 +1,37 @@
+import { ChangeEvent, FormEvent, useState } from "react";
+import styles from "./AddCommentForm.module.css";
+import Textarea from "../ui/Textarea";
+import Button from "../ui/Button";
+
+interface AddCommentFormProps {
+  value: string;
+  onChange: (value: string) => void;
+  onSubmit: (e: FormEvent<HTMLFormElement>) => void;
+}
+
+const AddCommentForm = ({ value, onChange, onSubmit }: AddCommentFormProps) => {
+  const [isDisabled, setIsDisabled] = useState(true);
+
+  const handleTextareaChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
+    setIsDisabled(!e.target.value);
+    onChange(e.target.value);
+  };
+
+  return (
+    <form className={styles.form} onSubmit={onSubmit}>
+      <Textarea
+        className={styles.textarea}
+        name="addComment"
+        label="댓글달기"
+        placeholder="댓글을 입력해주세요."
+        onChange={handleTextareaChange}
+        value={value}
+      />
+      <Button className={styles.button} type="submit" disabled={isDisabled}>
+        등록
+      </Button>
+    </form>
+  );
+};
+
+export default AddCommentForm;

components/board/BoardDetail.module.css

@@ -0,0 +1,101 @@
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin-bottom: 32px;
+}
+
+.wrapper p {
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.625rem;
+  color: var(--gray800);
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+}
+
+.header h2 {
+  font-size: 1.25rem;
+  font-weight: 700;
+  line-height: 2rem;
+  color: var(--gray800);
+}
+
+.icon {
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+}
+
+.info {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  border-bottom: 1px solid var(--gray200);
+  padding-bottom: 16px;
+}
+
+.authorInfo {
+  gap: 16px;
+}
+
+.authorInfo > div {
+  gap: 2px;
+}
+
+.authorInfo span {
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.5rem;
+}
+
+.authorInfo time {
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.5rem;
+}
+
+.heartButtonContainer {
+  border-left: 1px solid var(--gray200);
+  padding-left: 16px;
+}
+
+@media screen and (min-width: 768px) {
+  .wrapper {
+    margin-bottom: 40px;
+  }
+
+  .info {
+    gap: 32px;
+  }
+
+  .heartButtonContainer {
+    padding-left: 32px;
+  }
+
+  .heartButton img {
+    width: 32px;
+    height: 32px;
+  }
+
+  .authorInfo > div {
+    gap: 8px;
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .wrapper {
+    margin-bottom: 32px;
+  }
+
+  .wrapper p {
+    font-size: 1.125rem;
+  }
+
+  .info {
+    margin-bottom: 8px;
+  }
+}

components/board/BoardDetail.tsx

@@ -0,0 +1,41 @@
+import { ArticleProps } from "@/types/articleTypes";
+import styles from "./BoardDetail.module.css";
+import kebabIcon from "@/public/ic_kebab.svg";
+import Image from "next/image";
+import AuthorInfo from "../ui/AuthorInfo";
+import { formatDate } from "@/lib/formatDate";
+import HeartButton from "../ui/HeartButton";
+import Container from "../layout/Container";
+
+const BoardDetail = ({
+  title,
+  content,
+  createdAt,
+  likeCount,
+  writer,
+}: ArticleProps) => {
+  return (
+    <section className={styles.wrapper}>
+      <div className={styles.header}>
+        <h2>{title}</h2>
+        <Image src={kebabIcon} alt="게시글 메뉴 버튼" className={styles.icon} />
+      </div>
+      <div className={styles.info}>
+        <AuthorInfo
+          nickname={writer.nickname}
+          date={formatDate(createdAt)}
+          className={styles.authorInfo}
+        />
+        <Container className={styles.heartButtonContainer}>
+          <HeartButton
+            favoriteCount={likeCount}
+            className={styles.heartButton}
+          />
+        </Container>
+      </div>
+      <p>{content}</p>
+    </section>
+  );
+};
+
+export default BoardDetail;