[염성진] Sprint11

next.config.js

@@ -6,6 +6,8 @@ const nextConfig = {
       "sprint-fe-project.s3.ap-northeast-2.amazonaws.com",
       "images.samsung.com",
       "example.com",
+      "flexible.img.hani.co.kr",
+      "via.placeholder.com",
     ],
   },
 };

package.json

@@ -12,7 +12,8 @@
     "axios": "^1.7.3",
     "next": "14.2.5",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "react-hook-form": "^7.52.2"
   },
   "devDependencies": {
     "@types/node": "^20",

src/components/DetailBoard.tsx

@@ -44,15 +44,15 @@ function Product() {
       const res = await axios.get(`/articles/${id}`);
       const nextProduct = res.data;
       setProduct(nextProduct);
+      setLoading(false);
     } catch (error) {
-      console.error(`유효하지 않은 주소입니다.`);
+      alert(`유효하지 않은 주소입니다.`);
       router.replace(`/board`);
     }
   }
 
   useEffect(() => {
     getProduct(id);
-    setLoading(false);
   }, [id]);
 
   if (loading) {

src/components/DetailBoardComments.tsx

@@ -23,21 +23,24 @@ interface ItemsListType {
 function DetailBoardComments() {
   const [comments, setComments] = useState<ItemsListType[]>([]);
   const [loading, setLoading] = useState(true);
-  const [values, setValues] = useState("");
+  const [commentsValues, setCommentsValues] = useState("");
   const [pass, setPass] = useState(false);
   const router = useRouter();
   const id = Number(router.query["id"]);
 
   // 게시판 댓글 데이터 가져오기
   async function getProduct(id: number) {
-    const res = await axios.get(`/articles/${id}/comments?limit=50`);
-    const nextComments = res.data.list;
-    console.log(nextComments);
-    setComments(nextComments);
+    try {
+      const res = await axios.get(`/articles/${id}/comments?limit=50`);
+      const nextComments = res.data.list;
+      setComments(nextComments);
+      setLoading(false);
+    } catch (error) {
+      alert("댓글 데이터 불러오기 실패");
+    }
   }
   useEffect(() => {
     getProduct(id);
-    setLoading(false);
   }, [id]);
 
   const onClickReturn = () => {
@@ -47,13 +50,14 @@ function DetailBoardComments() {
   // 댓글 인풋의 입력값 파악
   const handleInputChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
     const { value } = e.target;
-    setValues(value);
+    setCommentsValues(value);
   };
 
-  // 테스트를 위해 추가한 동작
+  // TODO: 스프린트 미션에 API POST 관련 기능 요구 시 추가 예정, 현재는 테스트를 위한 코드
   const handleSubmit = (e: FormEvent<HTMLButtonElement>) => {
+    if (commentsValues.length <= 0) return;
     e.preventDefault();
-    console.log(values);
+    console.log(commentsValues);
   };
 
   // 댓글 작성한 시간 변환 함수
@@ -78,16 +82,6 @@ function DetailBoardComments() {
     }
   };
 
-  // 입력값 감지 후 조건 충족 시 등록 버튼 활성화
-  useEffect(() => {
-    function validation() {
-      const valueCheck = values.length > 0;
-      return valueCheck;
-    }
-    const isValid = validation();
-    setPass(isValid);
-  }, [values]);
-
   if (loading) {
     return <div>Loading...</div>;
   }
@@ -104,7 +98,7 @@ function DetailBoardComments() {
           />
           <div className={S.buttonWrapper}>
             <button
-              className={`${S.commentSubmitButton} ${pass ? S.pass : ""}`}
+              className={`${S.commentSubmitButton} ${commentsValues.length > 0 ? S.pass : ""}`}
               onClick={handleSubmit}
             >
               등록

src/components/NavBar.module.css

@@ -61,6 +61,12 @@
   background-color: var(--blue3);
 }
 
+.userProfileIcon {
+  position: relative;
+  width: 40px;
+  height: 40px;
+}
+
 .navLink {
   display: flex;
   width: 109px;
@@ -77,6 +83,23 @@
   color: var(--blue);
 }
 
+.dropDown {
+  position: absolute;
+  top: 48px;
+  left: -100px;
+  border: 2px solid var(--gray300);
+  border-radius: 8px;
+  background-color: #fff;
+  font-size: 16px;
+  font-weight: 400;
+  padding: 16px 0px 16px 0px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 139px;
+  height: 51px;
+}
+
 @media screen and (max-width: 1199px) and (min-width: 768px) {
   .headerNav {
     padding: 0 24px;
@@ -86,6 +109,10 @@
     width: 153px;
     height: 51px;
   }
+  .userProfileIcon {
+    width: 32px;
+    height: 32px;
+  }
 }
 
 @media screen and (max-width: 767px) {
@@ -121,4 +148,8 @@
   .itemPage {
     color: var(--blue);
   }
+  .userProfileIcon {
+    width: 32px;
+    height: 32px;
+  }
 }

src/components/NavBar.tsx

@@ -1,8 +1,24 @@
 import Link from "next/link";
 import Image from "next/image";
 import S from "@/components/NavBar.module.css";
+import { useEffect, useState } from "react";
+import { useRouter } from "next/router";
 
 function NavBar() {
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
+  const router = useRouter();
+  const handleLogout = () => {
+    setIsOpen(!isOpen);
+  };
+  const onClickLogout = () => {
+    window.localStorage.removeItem("accessToken");
+    router.reload();
+  };
+  useEffect(() => {
+    const token = localStorage.getItem("accessToken");
+    setIsLoggedIn(Boolean(token));
+  }, []);
   return (
     <header className={S.header}>
       <div className={S.headerNav}>
@@ -32,9 +48,27 @@ function NavBar() {
             </Link>
           </div>
         </div>
-        <Link href="/login" className={S.loginBtn}>
-          로그인
-        </Link>
+        {isLoggedIn ? (
+          <div className={S.userProfileIcon}>
+            <Image
+              src="/images/icon/ic_null_user_profile_image.png"
+              fill
+              alt="유저 프로필 아이콘"
+              onClick={handleLogout}
+            />
+            {isOpen ? (
+              <div className={S.dropDown} onClick={onClickLogout}>
+                로그아웃
+              </div>
+            ) : (
+              <></>
+            )}
+          </div>
+        ) : (
+          <Link href="/login" className={S.loginBtn}>
+            로그인
+          </Link>
+        )}
       </div>
     </header>
   );

src/components/ProductComments.tsx

@@ -7,10 +7,6 @@ import S from "@/components/ProductComments.module.css";
 const PLACEHOLDERTEXT =
   "개인정보를 공유 및 요청하거나, 명예 훼손, 무단 광고, 불법 정보 유포시 모니터링 후 삭제될 수 있으며, 이에 대한 민형사상 책임은 게시자에게 있습니다.";
 
-interface ButtonProps {
-  $pass?: boolean;
-}
-
 interface ItemsListType<T> {
   list: T[];
 }
@@ -33,10 +29,9 @@ function ProductComments() {
     setValues(value);
   };
 
-  // 테스트를 위해 추가한 동작
+  // TODO: 스프린트 미션에 API POST 관련 기능 요구 시 추가 예정, 현재는 테스트를 위한 코드
   const handleSubmit = (e: FormEvent<HTMLButtonElement>) => {
     e.preventDefault();
-    console.log(values);
   };
 
   // 댓글 작성한 시간 변환 함수

src/pages/_app.tsx

@@ -1,11 +1,14 @@
 import NavBar from "@/components/NavBar";
 import "@/styles/globals.css";
 import type { AppProps } from "next/app";
+import { useRouter } from "next/router";
 
 export default function App({ Component, pageProps }: AppProps) {
+  const router = useRouter();
+  const noNavBarPages = ["/login", "/register"];
   return (
     <>
-      <NavBar />
+      {!noNavBarPages.includes(router.pathname) && <NavBar />}
       <Component {...pageProps} />
     </>
   );

src/pages/addboard.tsx

@@ -52,7 +52,7 @@ function AddBoard() {
     }
   };
 
-  // 등록 버튼 클릭 시 제출
+  // TODO: 스프린트 미션에 API POST 관련 기능 요구 시 추가 예정, 현재는 테스트를 위한 코드
   const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     console.log(values);
@@ -64,7 +64,6 @@ function AddBoard() {
       return;
     }
     const image = values.images;
-    console.log(image);
 
     if (!(image instanceof File)) {
       console.error("Expected a File object but got:", image);

src/pages/additem.tsx

@@ -23,7 +23,7 @@ function AddItem() {
   const [preview, setPreview] = useState("");
   const [tagInput, setTagInput] = useState("");
   const [pass, setPass] = useState(false);
-  console.log(values);
+
   // 이미지 삭제
   const onClickImageDelete = () => {
     setValues((prevValues) => ({
@@ -70,7 +70,7 @@ function AddItem() {
     setTagInput(e.target.value);
   };
 
-  // 등록 버튼 클릭 시 제출
+  // TODO: 스프린트 미션에 API POST 관련 기능 요구 시 추가 예정, 현재는 테스트를 위한 코드
   const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     console.log(values);
@@ -103,7 +103,6 @@ function AddItem() {
       return;
     }
     const image = values.images;
-    console.log(image);
 
     if (!(image instanceof File)) {
       console.error("Expected a File object but got:", image);

src/pages/index.tsx

@@ -10,7 +10,6 @@ export default function Home() {
         <title></title>
       </Head>
       <div className={S.homeContainer}>
-        {/* <NavBar /> */}
         <header>
           <div className={S.headerContentsBackground}>
             <div className={S.headerContent}>