Merge pull request #269 from ddol9/Next-최예원-sprint11

[최예원] Sprint10-2
codeit-bootcamp-frontend · Jul 21, 2024 · 4b5bb66 · 4b5bb66
2 parents 7ad2b1a + 0b8d0c6
commit 4b5bb66
Show file tree

Hide file tree

Showing 12 changed files with 141 additions and 138 deletions.
diff --git a/.env b/.env
@@ -0,0 +1 @@
+NEXT_PUBLIC_API_BASE_URL=https://panda-market-api.vercel.app
diff --git a/.gitignore b/.gitignore
@@ -36,4 +36,4 @@ yarn-error.log*
 next-env.d.ts
 node_modules
 
-.env
+
diff --git a/app/addboard/page.tsx b/app/addboard/page.tsx
@@ -1,11 +1,11 @@
 "use client";
 
-import { ChangeEvent, FormEvent, useEffect, useState } from "react";
+import { ChangeEvent, FormEvent, useEffect, useMemo, useState } from "react";
 import FileInput from "@/components/FileInput";
 import { AddArticleForm } from "@/types/form";
 import Button from "@/components/Button";
 
-const AddBoard: React.FC = () => {
+const AddBoard = () => {
   const [values, setValues] = useState<AddArticleForm>({
     title: "",
     body: "",
@@ -31,12 +31,10 @@ const AddBoard: React.FC = () => {
     console.log(values);
   };
 
-  const [isFormValid, setIsFormValid] = useState(false);
-
-  useEffect(() => {
+  const isFormValid = useMemo(() => {
     const { title, body } = values;
-    const isValid = !!title && !!body;
-    setIsFormValid(isValid);
+
+    return !!title && !!body;
   }, [values]);
 
   return (
@@ -65,7 +63,9 @@ const AddBoard: React.FC = () => {
             value={values.body}
             onChange={handleInputChange}
             placeholder='내용을 입력해주세요'
-            className={`w-full py-4 px-6 rounded-xl bg-gray-100 h-[282px] text-gray-400 text-base font-normal resize-none ${values.body ? 'text-black' : 'text-gray-400'}`}
+            className={`w-full py-4 px-6 rounded-xl bg-gray-100 h-[282px] text-gray-400 text-base font-normal resize-none ${
+              values.body ? "text-black" : "text-gray-400"
+            }`}
           />
         </div>
         <div className='mb-6'>

diff --git a/app/boards/[id]/page.tsx b/app/boards/[id]/page.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import Image from "next/image";
-import { useParams, useRouter } from "next/navigation";
+import { useParams } from "next/navigation";
 import { useEffect, useState } from "react";
 import { fetchArticleById, fetchArticleComments } from "@/api/articles";
 import { Article, Comment } from "@/types/article";
@@ -11,10 +11,10 @@ import BackIcon from "@/assets/images/icons/ic_back.svg";
 import EmptyComments from "@/assets/images/ui/empty-reply.svg";
 import formatTimeDiff from "@/utils/formatTimeDiff";
 import Button from "@/components/Button";
+import Link from "next/link";
 
 export default function ArticleDetail() {
   const { id } = useParams();
-  const router = useRouter();
   const [article, setArticle] = useState<Article | null>(null);
   const [loading, setLoading] = useState(true);
   const [comments, setComments] = useState<Comment[]>([]);
@@ -56,18 +56,14 @@ export default function ArticleDetail() {
     setNewComment("");
   };
 
-  const handleBackClick = () => {
-    router.push("/boards");
-  };
-
   if (loading) {
     return <p>Loading...</p>;
   }
 
   if (!article) return null;
 
   return (
-    <div className='max-w-[1200px] mx-auto py-4 px-6 bg-white'>
+    <div className='max-w-[1200px] mx-auto py-4 px-6'>
       <h1 className='text-xl font-bold my-4 text-gray-800'>{article.title}</h1>
       <div className='flex items-center mb-4 font-normal'>
         <div className='mr-2'>
@@ -124,27 +120,29 @@ export default function ArticleDetail() {
       <div>
         {comments.length > 0 ? (
           comments.map((comment) => (
-            <div key={comment.id} className='border-b border-gray-200 py-4'>
-              <div className='mb-6 text-gray-800 text-sm font-normal'>
-                {comment.content}
-              </div>
-              <div className='flex items-center mb-2'>
-                <div className='mr-2'>
-                  <Image
-                    src={Profile}
-                    alt='profile'
-                    width={32}
-                    height={32}
-                    className='inline-block'
-                  />
+            <div key={comment.id} className='border-b border-gray-200 pt-4'>
+              <div className='bg-[#FCFCFC] pb-4'>
+                <div className='mb-6 text-gray-800 text-sm font-normal'>
+                  {comment.content}
                 </div>
-                <div className='flex flex-col font-normal text-xs'>
-                  <span className='mr-2 text-gray-600'>
-                    {comment.writer.nickname}
-                  </span>
-                  <span className='mr-2 text-gray-400'>
-                    {formatTimeDiff(comment.createdAt)}
-                  </span>
+                <div className='flex items-center mb-2'>
+                  <div className='mr-2'>
+                    <Image
+                      src={Profile}
+                      alt='profile'
+                      width={32}
+                      height={32}
+                      className='inline-block'
+                    />
+                  </div>
+                  <div className='flex flex-col font-normal text-xs'>
+                    <span className='mr-2 text-gray-600'>
+                      {comment.writer.nickname}
+                    </span>
+                    <span className='mr-2 text-gray-400'>
+                      {formatTimeDiff(comment.createdAt)}
+                    </span>
+                  </div>
                 </div>
               </div>
             </div>
@@ -157,31 +155,26 @@ export default function ArticleDetail() {
               width={150}
               height={150}
             />
-            <p className='text-base font-normal text-center mt-4'>
-              아직 댓글이 없어요,
-              <br />
-              지금 댓글을 달아보세요!
-            </p>
+            <div className='text-base font-normal text-center mt-4'>
+              <p>아직 댓글이 없어요,</p>
+              <p>지금 댓글을 달아보세요!</p>
+            </div>
           </div>
         )}
         <div className='flex justify-center my-10'>
-          <Button
-            text='목록으로 돌아가기'
-            color='default'
-            size='small'
-            onClick={handleBackClick}
-            width='240px'
-            style={{
-              borderRadius: "40px",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              fontSize: "18px",
-              fontWeight: "600",
-              padding: "12px 38.5px",
-            }}
-            icon={<Image src={BackIcon} alt='Back' width={24} height={24} />}
-          />
+          <Link href='/boards'>
+            <Button
+              text='목록으로 돌아가기'
+              color='default'
+              size='small'
+              width='240px'
+              borderRadius='40px'
+              fontSize='18px'
+              fontWeight='600'
+              padding='12px 38.5px'
+              icon={<Image src={BackIcon} alt='Back' width={24} height={24} />}
+            />
+          </Link>
         </div>
       </div>
     </div>

diff --git a/components/Board/AllArticleCard.tsx b/components/Board/AllArticleCard.tsx
@@ -16,38 +16,40 @@ const AllArticleCard: React.FC<Article> = ({
   return (
     <Link
       href={`/boards/${id}`}
-      className='flex flex-col border-b border-gray-200 py-6'
+      className='flex flex-col border-b border-gray-200 pt-6 '
     >
-      <div className='flex items-start w-full'>
-        <div className='flex-grow h-12'>
-          <h2 className='text-xl font-semibold text-gray-800'>{title}</h2>
-        </div>
-        <div className='ml-4 flex-shrink-0'>
-          {image && (
-            <div className='w-[72px] h-[72px] bg-white flex items-center justify-center ml-2 p-3 border border-gray-200 rounded-md'>
-              <div className='relative w-12 h-12 p-3'>
-                <Image
-                  src={image}
-                  alt='article-image'
-                  layout='fill'
-                  objectFit='contain'
-                />
+      <div className='bg-[#FCFCFC] pb-6'>
+        <div className='flex items-start w-full'>
+          <div className='flex-grow h-12'>
+            <h2 className='text-xl font-semibold text-gray-800'>{title}</h2>
+          </div>
+          <div className='ml-4 flex-shrink-0'>
+            {image && (
+              <div className='w-[72px] h-[72px] bg-white flex items-center justify-center ml-2 p-3 border border-gray-100 rounded-md'>
+                <div className='relative w-12 h-12 p-3'>
+                  <Image
+                    src={image}
+                    alt='article-image'
+                    layout='fill'
+                    objectFit='contain'
+                  />
+                </div>
               </div>
-            </div>
-          )}
-        </div>
-      </div>
-      <div className='flex justify-between items-center mt-4'>
-        <div className='text-gray-400 text-sm flex items-center'>
-          <Image src={Profile} alt='profile' width={24} />
-          <span className='ml-2 text-gray-600'>{writer.nickname}</span>
-          <span className='ml-2'>
-            {new Date(createdAt).toLocaleDateString()}
-          </span>
+            )}
+          </div>
         </div>
-        <div className='text-gray-500 flex items-center'>
-          <Image src={Heart} alt='heart' width={14} />
-          <span className='ml-1'>{likeCount}</span>
+        <div className='flex justify-between items-center mt-4'>
+          <div className='text-gray-400 text-sm flex items-center'>
+            <Image src={Profile} alt='profile' width={24} />
+            <span className='ml-2 text-gray-600'>{writer.nickname}</span>
+            <span className='ml-2'>
+              {new Date(createdAt).toLocaleDateString()}
+            </span>
+          </div>
+          <div className='text-gray-500 flex items-center'>
+            <Image src={Heart} alt='heart' width={14} />
+            <span className='ml-1'>{likeCount}</span>
+          </div>
         </div>
       </div>
     </Link>

diff --git a/components/Board/AllArticleList.tsx b/components/Board/AllArticleList.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect, useRef, useCallback } from "react";
+import { useState, useEffect, useRef, useCallback, useMemo } from "react";
 import { Article } from "../../types/article";
 import { fetchArticles } from "@/api/articles";
 import searchIcon from "@/assets/images/icons/ic_search.svg";
@@ -17,7 +17,6 @@ const sortOptions = [
 
 export default function AllArticleList() {
   const [articles, setArticles] = useState<Article[]>([]);
-  const [filteredArticles, setFilteredArticles] = useState<Article[]>([]);
   const [sortType, setSortType] = useState("recent");
   const [searchTerm, setSearchTerm] = useState("");
   const [page, setPage] = useState(1);
@@ -45,16 +44,13 @@ export default function AllArticleList() {
     }
   };
 
-  const filterArticlesByTitle = useCallback(() => {
-    const filtered = articles.filter((article) =>
-      article.title.toLowerCase().includes(searchTerm.toLowerCase()),
-    );
-    setFilteredArticles(filtered);
-  }, [articles, searchTerm]);
-
-  useEffect(() => {
-    filterArticlesByTitle();
-  }, [filterArticlesByTitle]);
+  const filteredArticles = useMemo(
+    () =>
+      articles.filter((article) =>
+        article.title.toLowerCase().includes(searchTerm.toLowerCase()),
+      ),
+    [articles, searchTerm],
+  );
 
   const debouncedSearch = useCallback(
     debounce((term: string) => {

diff --git a/components/Board/BestArticleCard.tsx b/components/Board/BestArticleCard.tsx
@@ -18,12 +18,12 @@ const BestArticleCard: React.FC<Article> = ({
       href={`/boards/${id}`}
       className='lg:h-[169px] h-[167px] rounded-lg overflow-hidden bg-gray-50 flex flex-col justify-between px-6 pb-4'
     >
-      <div className=' flex-grow'>
+      <div className='flex-grow'>
         <div className='mb-4'>
           <Image src={BestBadge} alt='best badge' width={102} />
         </div>
-        <div className='flex justify-between  mb-4'>
-          <div className='font-semibold text-xl text-gray-800 leading-6 flex-grow'>
+        <div className='flex justify-between mb-4'>
+          <div className='font-semibold text-xl leading-8 text-gray-800 flex-grow'>
             {title}
           </div>
           {image && (

diff --git a/components/Board/BestArticleList.tsx b/components/Board/BestArticleList.tsx
@@ -1,15 +1,11 @@
 "use client";
-
 import { useState, useEffect } from "react";
 import { Article } from "../../types/article";
 import { fetchArticles } from "@/api/articles";
 import BestArticleCard from "./BestArticleCard";
-import useResize from "@/hooks/useResize";
 
 export default function BestArticleList() {
   const [posts, setPosts] = useState<Article[]>([]);
-  const windowWidth = useResize();
-  const [postNum, setPostNum] = useState(3);
 
   useEffect(() => {
     fetchBestPosts();
@@ -24,22 +20,20 @@ export default function BestArticleList() {
     }
   };
 
-  useEffect(() => {
-    if (windowWidth <= 640) {
-      setPostNum(1);
-    } else if (windowWidth <= 1024) {
-      setPostNum(2);
-    } else {
-      setPostNum(3);
-    }
-  }, [windowWidth]);
-
   return (
     <div className='max-w-[1200px] mx-auto py-6'>
       <h2 className='text-xl font-bold mb-6'>베스트 게시글</h2>
-      <div className='grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 lg:gap-6 sm:gap-4 '>
-        {posts.slice(0, postNum).map((article) => (
-          <BestArticleCard key={article.id} {...article} />
+      <div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 lg:gap-6'>
+        {posts.map((article, index) => (
+          <div
+            key={article.id}
+            className={`
+              ${index === 0 ? "block" : "hidden sm:block"}
+              ${index === 2 ? "hidden sm:hidden lg:block" : ""}
+            `}
+          >
+            <BestArticleCard {...article} />
+          </div>
         ))}
       </div>
     </div>

diff --git a/components/Button.module.css b/components/Button.module.css
@@ -10,7 +10,8 @@
   cursor: pointer;
 }
 
-.button:disabled {
+.button:disabled,
+.button:disabled:hover {
   background-color: #9ca3af;
   cursor: not-allowed;
 }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		NEXT_PUBLIC_API_BASE_URL=https://panda-market-api.vercel.app
Original file line number	Diff line number	Diff line change
Expand Up		@@ -36,4 +36,4 @@ yarn-error.log*
		next-env.d.ts
		node_modules

		.env