[이율] Sprint11

.eslintrc.js

@@ -22,7 +22,6 @@ module.exports = {
   ],
   plugins: ["react", "react-hooks", "@typescript-eslint", "jsx-a11y", "import", "prettier"],
   rules: {
-    "prettier/prettier": "error",
     "react/react-in-jsx-scope": "off", // Next.js doesn't require React to be in scope
     // 'import/prefer-default-export': 'off',
     // '@typescript-eslint/explicit-module-boundary-types': 'off',

.prettierrc.js

@@ -1,4 +1,4 @@
 module.exports = {
-  printWidth: 200,
+  printWidth: 100,
   tabWidth: 2,
 };

components/BoardList.tsx

@@ -7,6 +7,7 @@ import { Article } from "@/src/types/article";
 import Link from "next/link";
 import WriterInfo from "./WriterInfo";
 import Styles from "./BoardList.module.scss";
+import ImgProductEmpty from "@/src/img/Img_product_empty-sm.png";
 
 interface articleListProps {
   order: string;
@@ -58,7 +59,7 @@ export function BoardList({ order = "", pageSize = 0, keyword = "", page = undef
                 </h3>
                 {article.image && (
                   <figure className={Styles.image}>
-                    <Image width="72" height="72" src={article.image} alt="이미지" />
+                    <Image width="72" height="72" src={article?.image ?? ImgProductEmpty} alt="이미지" />
                   </figure>
                 )}
               </div>

components/Header.tsx

@@ -1,8 +1,13 @@
 import Link from "next/link";
 import Logo from "./Logo";
 import GNB from "./GNB";
+import { useAuth } from "@/src/contexts/AuthProvider";
+import Image from "next/image";
+import ImgUser from "@/src/img/ic_profile.svg";
 
 export default function Header() {
+  const { user, isAuth } = useAuth(true);
+
   return (
     <header className="header">
       <div className="header-wrap">
@@ -13,9 +18,13 @@ export default function Header() {
           <GNB />
         </div>
         <div>
-          <Link href="/signin" className="btn-login">
-            로그인
-          </Link>
+          {isAuth ? (
+            <Image src={ImgUser} width={40} height={40} alt="유저 이미지" />
+          ) : (
+            <Link href="/signin" className="btn-login">
+              로그인
+            </Link>
+          )}
         </div>
       </div>
     </header>

components/Input/EmailInput.tsx

@@ -1,18 +1,19 @@
-import { ChangeEvent, useState } from "react";
+import { ChangeEvent, ChangeEventHandler, useState } from "react";
 import Styles from "./Input.module.scss";
 
 interface EmailInputProps {
   name: string;
   value: string;
-  onChange: () => void;
+  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
   id: string;
   className: string;
   required: boolean;
   setIsInvalid: (value: boolean) => void;
 }
 
-export default function EmailInput({ name, value, id, className, required, setIsInvalid }: EmailInputProps) {
+export default function EmailInput({ name, value, id, className, required, setIsInvalid, onChange }: EmailInputProps) {
   const [isEmpty, setIsEmpty] = useState(false);
+
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
     if (e.target.checkValidity()) {
       setIsInvalid(false);
@@ -24,6 +25,7 @@ export default function EmailInput({ name, value, id, className, required, setIs
     } else {
       setIsEmpty(false);
     }
+    onChange(e);
   };
   return (
     <>

components/Input/FileInput.tsx

@@ -49,7 +49,7 @@ export default function FileInput({ name, value, onChange }: FileInputProps) {
 
       {preview && (
         <div className={Styles["file-view__preview"]}>
-          <img src={preview} alt="이미지 미리보기" className={Styles.img} />
+          <Image src={preview} width={282} height={282} alt="이미지 미리보기" className={Styles.img} />
           <button type="button" onClick={handleClearClick} className={Styles["btn-close"]}>
             <Image width="8" height="8" src={icoX} alt="아이콘" aria-hidden="true" />
           </button>

components/Input/PasswordInput.tsx

@@ -1,15 +1,18 @@
-import { ChangeEvent, useState } from "react";
+import { ChangeEvent, ChangeEventHandler, useState } from "react";
 import Styles from "./Input.module.scss";
 
 interface PasswordInputProps {
   id: string;
+  name: string;
+  value: string;
   className?: string;
   required?: boolean;
   inputRef: React.RefObject<HTMLInputElement>;
   setIsInvalid: (value: boolean) => void;
+  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
 }
 
-export default function PasswordInput({ id, className, required, inputRef, setIsInvalid }: PasswordInputProps) {
+export default function PasswordInput({ id, name, value, className, required, inputRef, setIsInvalid, onChange }: PasswordInputProps) {
   const [isEmpty, setIsEmpty] = useState(false);
 
   const handleCheck = (e: ChangeEvent<HTMLInputElement>) => {
@@ -34,7 +37,7 @@ export default function PasswordInput({ id, className, required, inputRef, setIs
   return (
     <>
       <span className="section-form__pw-box">
-        <input type="password" className={`${Styles.input} ${className}`} placeholder="비밀번호를 입력해주세요" minLength={8} required={required} ref={inputRef} onChange={handleChange} />
+        <input type="password" name={name} value={value} className={`${Styles.input} ${className}`} placeholder="비밀번호를 입력해주세요" minLength={8} required={required} ref={inputRef} onChange={handleChange} />
         <input type="checkbox" id={id} className="blind chk-visibility" onChange={handleCheck} />
         <label htmlFor={id} className="spr visibility-off">
           <span className="blind">비밀번호 보기/숨기기</span>

components/Input/TextInput.tsx

@@ -12,6 +12,7 @@ interface TextInputProps {
 }
 
 export default function TextInput({ name, value, onChange, id, className, required, placeholder }: TextInputProps) {
+  const [content, setContent] = useState("");
   const [isEmpty, setIsEmpty] = useState(false);
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (e.target.value.length === 0) {

components/ItemCard.tsx

@@ -3,6 +3,7 @@ import Image from "next/image";
 import icoHeart from "@/src/img/ic_heart.svg";
 import { Item } from "@/src/types/item";
 import Styles from "./ItemCard.module.scss";
+import ImgProductEmpty from "@/src/img/Img_product_empty-sm.png";
 
 interface ItemCardProps {
   item: Item;
@@ -13,7 +14,7 @@ export default function ItemCard({ item }: ItemCardProps) {
     <>
       <div className={Styles["img-wrap"]}>
         <Link href={`/items/${item.id}`} className="link">
-          <img width="221" height="221" src={item?.images[0]} alt={item.name + " 이미지"} className={Styles.img} />
+          <Image width="221" height="221" src={item?.images[0] ?? ImgProductEmpty} alt={item.name + " 이미지"} className={Styles.img} />
         </Link>
       </div>
       <div className={Styles.content}>

eslint.config.mjs

@@ -2,9 +2,4 @@ import globals from "globals";
 import pluginJs from "@eslint/js";
 import pluginReactConfig from "eslint-plugin-react/configs/recommended.js";
 
-
-export default [
-  {languageOptions: { globals: globals.browser }},
-  pluginJs.configs.recommended,
-  pluginReactConfig
-];
+export default [{ languageOptions: { globals: globals.browser } }, pluginJs.configs.recommended, pluginReactConfig];

next.config.js

@@ -8,7 +8,7 @@ module.exports = {
         protocol: "https",
         hostname: "example.com",
         port: "",
-        pathname: "/**",
+        pathname: "/...",
       },
       {
         protocol: "https",

pages/_app.tsx

@@ -1,10 +1,11 @@
+import { AuthProvider } from "@/src/contexts/AuthProvider";
 import type { AppProps } from "next/app";
 import "src/styles/style.scss";
 
 export default function MyApp({ Component, pageProps }: AppProps) {
   return (
-    <div>
+    <AuthProvider>
       <Component {...pageProps} />
-    </div>
+    </AuthProvider>
   );
 }

pages/addboard.tsx

@@ -3,24 +3,23 @@
 import { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
 import useAsync from "@/src/hooks/useAsync";
-import { createItems } from "@/src/api/api";
+import { createItems, postArticle, uploadImg } from "@/src/api/api";
 import Input from "@/components/Input";
 import Button from "@/components/Button/Button";
 import Header from "@/components/Header";
+import { useAuth } from "@/src/contexts/AuthProvider";
 
-const INITIAL_VALUES = {
-  name: null,
-  description: null,
-  images: null,
-};
-
-export default function AddBoardPage({ initialValues = INITIAL_VALUES }) {
+export default function AddBoardPage() {
+  const { user } = useAuth(true);
   const [isLoading, loadingError, onSubmitAsync] = useAsync(createItems);
-  const [isDisableSubmit, setIsDisableSubmit] = useState(true);
-  const [values, setValues] = useState(initialValues);
+  const [values, setValues] = useState({
+    title: "",
+    content: "",
+    image: "",
+  });
   const router = useRouter();
 
-  const handleChange = (name: keyof typeof INITIAL_VALUES, value: string) => {
+  const handleChange = (name: string, value: string) => {
     setValues((prevValues) => ({
       ...prevValues,
       [name]: value,
@@ -29,31 +28,37 @@ export default function AddBoardPage({ initialValues = INITIAL_VALUES }) {
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { name, value } = e.target;
-    handleChange(name as keyof typeof INITIAL_VALUES, value);
+    handleChange(name, value);
   };
 
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     const formData = new FormData();
-    formData.append("name", values.name || "");
-    formData.append("description", values.description || "");
-    formData.append("images", values.images || "");
+    formData.append("title", values.title);
+    formData.append("content", values.content);
+    if (values.image) {
+      const imgForm = new FormData();
+      imgForm.append("image", values.image);
 
-    if (typeof onSubmitAsync !== "function") {
-      console.error("onSubmitAsync is not a function");
-      return;
+      const response = await uploadImg(imgForm);
+      if (!response) return;
+      formData.append("image", response);
     }
 
-    const result = await onSubmitAsync(formData);
-    if (!result) return;
+    const jsonObject: { [key: string]: any } = {};
+    formData.forEach((value, key) => {
+      jsonObject[key] = value;
+    });
 
-    router.push("/items");
-  };
+    const response = await postArticle(jsonObject);
+    if (!response) return;
 
-  useEffect(() => {
-    setIsDisableSubmit(Object.values(values).every((el: any) => el !== "" && el !== null && el.length !== 0));
-  }, [values]);
+    router.push(`/boards/${response.id}`);
+  };
 
+  if (!user) {
+    return null;
+  }
   return (
     <>
       <Header />
@@ -62,7 +67,7 @@ export default function AddBoardPage({ initialValues = INITIAL_VALUES }) {
           <div className="section-wrap">
             <header className="section-header">
               <h2 className="section-tit">게시글 쓰기</h2>
-              <Button type="submit" id="submit-article" size="small" disabled={!isDisableSubmit} className="btn-small btn-submit">
+              <Button type="submit" id="submit-article" size="small" disabled={values.title === "" || values.content === ""} className="btn-small btn-submit">
                 등록
               </Button>
             </header>
@@ -73,7 +78,7 @@ export default function AddBoardPage({ initialValues = INITIAL_VALUES }) {
                 </sup>
                 제목
               </h3>
-              <Input.Text name="name" value={values.name} onChange={handleInputChange} placeholder="제목을 입력해주세요" />
+              <Input.Text name="title" value={values.title} onChange={handleInputChange} placeholder="제목을 입력해주세요" />
             </section>
             <section className="section-addItem-content">
               <h3 className="section-tit">
@@ -82,11 +87,11 @@ export default function AddBoardPage({ initialValues = INITIAL_VALUES }) {
                 </sup>
                 내용
               </h3>
-              <Input.Textarea name="description" value={values.description} onChange={handleInputChange} size="large" placeholder="내용을 입력해주세요" />
+              <Input.Textarea name="content" value={values.content} onChange={handleInputChange} size="large" placeholder="내용을 입력해주세요" />
             </section>
             <section className="section-addItem-content">
               <h3 className="section-tit">상품 이미지</h3>
-              <Input.File name="images" value={values.images} onChange={handleChange} />
+              <Input.File name="image" value={values.image} onChange={handleChange} />
             </section>
           </div>
         </form>