[전준기] sprint10

components/Footer.module.css

@@ -1,9 +1,8 @@
 .footerBanner {
   background-color: #111827;
-  width: 100%;
+  margin-top: 100px;
   height: 160px;
   padding: 32px 200px 32px 200px;
-  width: auto;
 }
 
 .footerBannerContent {

components/Header.js

@@ -2,13 +2,17 @@ import styles from "./Header.module.css";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import Image from "next/image";
+import { useState, useEffect } from "react";
+import { useAuth } from "@/contexts/AuthProvider";
 
 function Header() {
   const router = useRouter();
-  const pathname = router;
+  const pathname = router.pathname;
   const isItemPage = pathname === "/items";
   const isFreePage = pathname === "/free";
 
+  const { user, logout } = useAuth();
+
   return (
     <section className={styles.topNav}>
       <div className={styles.navCon}>
@@ -38,10 +42,13 @@ function Header() {
           </Link>
         </div>
 
-        {/* 글씨 만이 아닌 여백을 클릭해도 링크 이동하기 위함 */}
-        <Link href="/login" className={styles.topNavLoginBt}>
-          로그인
-        </Link>
+        {user ? (
+          <div onClick={logout}>{user?.nickname}</div>
+        ) : (
+          <Link href="/login" className={styles.topNavLoginBt}>
+            로그인
+          </Link>
+        )}
       </div>
     </section>
   );

components/Header.module.css

@@ -51,6 +51,6 @@
   font-weight: bold;
   text-decoration: none;
 }
-.navLinkBt.active {
+.active {
   color: #3692ff;
 }

components/LikeButton.js

@@ -0,0 +1,15 @@
+import styles from "./LikeButton.module.css";
+import Image from "next/image";
+
+export default function LikeButton({ favoriteCount }) {
+  return (
+    <button className={styles.likeBt}>
+      <div className={styles.btContents}>
+        <div className={styles.likeImgBox}>
+          <Image fill alt="heart" src="/imgs/ic_heart.png" />
+        </div>
+        <div className={styles.likeCount}>{favoriteCount}</div>
+      </div>
+    </button>
+  );
+}

components/LikeButton.module.css

@@ -0,0 +1,25 @@
+.likeBt {
+  height: 40px;
+  background-color: #ffffff;
+  border: 1px solid #e5e7eb;
+  border-radius: 35px;
+  padding: 4px 12px 4px 12px;
+}
+
+.btContents {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+}
+
+.likeImgBox {
+  position: relative;
+  width: 32px;
+  height: 32px;
+}
+.likeCount {
+  font-size: 16px;
+  line-height: 26px;
+  font-weight: 500;
+  color: #6b7280;
+}

components/OrderDropDown.js

@@ -1,7 +1,7 @@
 import { useState, useRef, useEffect } from "react";
 import styles from "./OrderDropDown.module.css";
 
-function Dropdown({ options, order, orderChange }) {
+function OrderDropdown({ options, order, orderChange }) {
   // 드롭다운 열려있는지 상태
   const [isOpen, setIsOpen] = useState(false);
   // 외부 클릭 감지를 위한 ref 사용(기본값 null 랜더링 되면 해당 요소 할당)
@@ -39,7 +39,7 @@ function Dropdown({ options, order, orderChange }) {
   return (
     <div className={styles.dropdown} ref={dropdownRef}>
       <button className={styles.dropdownButton} onClick={toggleDropdown}>
-        {order}
+        {order.label}
         <span className="arrow">▼</span>
       </button>
       {/* 열린 상태(isOpen = true)이면 보이게 */}
@@ -52,7 +52,7 @@ function Dropdown({ options, order, orderChange }) {
               className={styles.dropdownItem}
               onClick={() => handleSelect(option)}
             >
-              {option}
+              {option.label}
             </div>
           ))}
         </div>
@@ -61,4 +61,4 @@ function Dropdown({ options, order, orderChange }) {
   );
 }
 
-export default Dropdown;
+export default OrderDropdown;

components/UpdateDropDown.js

@@ -19,6 +19,7 @@ export default function UpdateDropDown() {
 
   // 드롭다운 옵션 삭제하기 눌렀을 때 이벤트
   const handleSelectDelete = () => {
+
     // 드롭다운 닫기
     setIsOpen(false);
   };
@@ -40,7 +41,6 @@ export default function UpdateDropDown() {
     };
   }, [isOpen]);
 
-  const handleClick = () => {};
   return (
     <div className={styles.dropdown} ref={dropdownRef}>
       <button className={styles.articleChangeBt} onClick={toggleDropdown}>

components/UpdateDropDown.module.css

@@ -9,7 +9,7 @@
   border: 1px solid #e5e7eb;
   border-radius: 12px;
   background-color: white;
-  right: 220px;
+
   width: 139px;
   z-index: 1;
 }

components/ArticleDetail.js → components/articleDetail/ArticleDetail.js

@@ -1,6 +1,6 @@
 import styles from "./ArticleDetail.module.css";
 import Image from "next/image";
-import UpdateDropDown from "./UpdateDropDown";
+import UpdateDropDown from "../UpdateDropDown";
 
 export default function ArticleDetail({ article }) {
   return (
@@ -28,7 +28,7 @@ export default function ArticleDetail({ article }) {
                 <div className={styles.likeImgBox}>
                   <Image fill alt="heart" src="/imgs/ic_heart.png" />
                 </div>
-                <div>123</div>
+                <div className={styles.likeCount}>123</div>
               </div>
             </button>
           </div>

components/ArticleDetail.module.css → components/articleDetail/ArticleDetail.module.css

@@ -77,3 +77,10 @@
   width: 32px;
   height: 32px;
 }
+
+.likeCount {
+  font-size: 16px;
+  line-height: 26px;
+  font-weight: 500;
+  color: #6b7280;
+}

components/Comment.js → components/comment/Comment.js

@@ -3,16 +3,21 @@ import InputComment from "./InputComment";
 import CommentList from "./CommentList";
 import NoComment from "./NoComment";
 import { useState, useEffect } from "react";
-import axios from "@/lib/axios";
+// import axios from "@/lib/axios";
+import codeitAxios from "@/lib/codeitAxios";
 
-export default function Comment({ id }) {
+export default function Comment({ id, isArticle }) {
   const [value, setValue] = useState("");
   const [comments, setComments] = useState([]);
   const [isSubmitting, setIsSubmitting] = useState(false);
 
   async function getComments() {
-    const response = await axios.get(`/article/${id}/comments`);
-    const comments = response.data ?? [];
+    const response = await codeitAxios.get(
+      isArticle
+        ? `/articles/${id}/comments?limit=5`
+        : `/products/${id}/comments?limit=5`
+    );
+    const comments = response.data.list ?? [];
     setComments(comments);
     return response.data;
   }
@@ -27,9 +32,12 @@ export default function Comment({ id }) {
   async function createComment() {
     try {
       setIsSubmitting(true);
-      const response = await axios.post(`/article/${id}/comment`, {
-        content: value,
-      });
+      const response = await codeitAxios.post(
+        isArticle ? `/articles/${id}/comments` : `/products/${id}/comments`,
+        {
+          content: value,
+        }
+      );
       return response.data;
     } catch (err) {
       console.log(err);
@@ -53,11 +61,12 @@ export default function Comment({ id }) {
         setValue={setValue}
         getComments={getComments}
         isSubmitting={isSubmitting}
+        isArticle={isArticle}
       />
       {comments.length > 0 ? (
         <CommentList comments={comments} />
       ) : (
-        <NoComment />
+        <NoComment isArticle />
       )}
     </div>
   );

components/CommentLayout.js → components/comment/CommentLayout.js

@@ -1,8 +1,14 @@
 import styles from "./CommentLayout.module.css";
 import Image from "next/image";
-import UpdateDropDown from "./UpdateDropDown";
+import UpdateDropDown from "../UpdateDropDown";
+import formatUpdatedTime from "@/lib/formatDate";
 
 export default function Comment({ comment }) {
+  const username = comment.writer.nickname;
+  const updatedAt = comment.updatedAt;
+
+  const updatedTime = formatUpdatedTime(updatedAt); // 하루 지나면 날짜 안지나면 ?시간 전 리턴
+
   return (
     <div className={styles.commentBox}>
       <div className={styles.contents}>
@@ -12,8 +18,8 @@ export default function Comment({ comment }) {
             <Image fill alt="userProfileImg" src="/imgs/userProfileImg.png" />
           </div>
           <div className={styles.nameAndDate}>
-            <div>똑똑한 판다</div>
-            <div>1시간 전</div>
+            <div>{username}</div>
+            <div>{updatedTime}</div>
           </div>
         </div>
       </div>

components/InputComment.js → components/comment/InputComment.js

@@ -1,20 +1,28 @@
+import { useRouter } from "next/router";
 import styles from "./InputComment.module.css";
 
 export default function InputComment({
   handleClick,
   value,
   setValue,
   isSubmitting,
+  isArticle,
 }) {
   const isBtDisabled = !value.trim();
 
   return (
     <div className={styles.container}>
       <div className={styles.inputBox}>
-        <div className={styles.mediumText}>댓글달기</div>
+        <div className={styles.mediumText}>
+          {isArticle ? "댓글달기" : "문의하기"}
+        </div>
         <textarea
           className={styles.textArea}
-          placeholder="댓글 입력해주세요"
+          placeholder={
+            isArticle
+              ? "댓글 입력해주세요"
+              : "개인정보를 공유 및 요청하거나, 명예 훼손, 무단 광고, 불법 정보 유포시 모니터링 후 삭제될 수 있으며, 이에 대한 민형사상 책임은 게시자에게 있습니다."
+          }
           value={value}
           onChange={(e) => setValue(e.target.value)}
         />

components/comment/NoComment.js

@@ -0,0 +1,30 @@
+import Image from "next/image";
+import styles from "./NoComment.module.css";
+
+export default function NoComment({ isArticle }) {
+  return (
+    <div className={styles.noComment}>
+      <div className={styles.imgBox}>
+        <Image
+          fill
+          src={
+            isArticle
+              ? "/imgs/img_reply_empty.png"
+              : "/imgs/img_inquiry_empty.png"
+          }
+          alt="emptyImg"
+        />
+      </div>
+      <div className={styles.textCenter}>
+        {isArticle ? (
+          <>
+            <span> 아직 댓글이 없어요,</span>
+            <span> 지금 댓글을 달아보세요!</span>
+          </>
+        ) : (
+          <span>아직 문의가 없어요</span>
+        )}
+      </div>
+    </div>
+  );
+}

components/ArticleList.js → components/free/ArticleList.js

@@ -8,7 +8,7 @@ export default function ArticleList({ articles }) {
       {articles.map((article) => (
         <Link
           key={article.id}
-          href={`/article/${article.id}`}
+          href={`/articles/${article.id}`}
           style={{ textDecoration: "none" }}
         >
           <Article article={article} />

components/BestArticleList.js → components/free/BestArticleList.js

@@ -7,7 +7,7 @@ function BestArticleList({ bestArticles }) {
     <div className={styles.bestArticleList}>
       {bestArticles.map((article) => (
         <Link
-          href={`/article/${article.id}`}
+          href={`/articles/${article.id}`}
           style={{ textDecoration: "none" }}
           key={article.id}
         >