[김예준] Sprint10

next.config.mjs

@@ -3,7 +3,10 @@ const nextConfig = {
   reactStrictMode: true,
 
   images: {
-    domains: ['sprint-fe-project.s3.ap-northeast-2.amazonaws.com'],
+    domains: [
+      'sprint-fe-project.s3.ap-northeast-2.amazonaws.com',
+      'example.com',
+    ],
   },
 }
 

src/components/Button/Button.module.scss

@@ -11,6 +11,6 @@
   transition: background-color 0.3s ease;
 
   &:hover {
-    background-color: #0056b3;
+    background-color: var(--dark-blue);
   }
 }

src/components/DropDown/DropDown.tsx

@@ -46,13 +46,13 @@ const DropDown: React.FC<DropDownProps> = ({ options, setOption }) => {
 
       {isDrop && (
         <div className={styles.dropDownBox}>
-          {Object.keys(options).map((key) => (
+          {Object.entries(options).map(([key, value]) => (
             <div
               key={key}
               className={styles.dropDownItem}
               onClick={() => handleOptionClick(key)}
             >
-              {key}
+              {value}
             </div>
           ))}
         </div>

src/components/SearchBar/SearchBar.module.scss

@@ -19,7 +19,7 @@
   }
 
   &::placeholder {
-    color: var(--gray-200);
+    color: var(--gray-400);
     font-size: 16px;
   }
 }

src/components/SearchBar/SearchBar.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, useCallback, useEffect } from 'react'
 import Image from 'next/image'
 import styles from './SearchBar.module.scss'
 import searchIcon from '@/public/svgs/search.svg'
@@ -9,6 +9,23 @@ interface SearchBarProps {
 
 const SearchBar: React.FC<SearchBarProps> = ({ keyword }) => {
   const [searchTerm, setSearchTerm] = useState('')
+  const [debouncedSearchTerm, setDebouncedSearchTerm] = useState('')
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedSearchTerm(searchTerm)
+    }, 2000)
+
+    return () => {
+      clearTimeout(timer)
+    }
+  }, [searchTerm])
+
+  useEffect(() => {
+    if (debouncedSearchTerm) {
+      keyword(debouncedSearchTerm)
+    }
+  }, [debouncedSearchTerm, keyword])
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setSearchTerm(e.target.value)

src/components/Spinner/Spinner.tsx

@@ -1,8 +1,8 @@
 import Image from 'next/image'
 import spinnerImg from '@/public/images/spinner.png'
-import styles from './Spiner.module.scss'
+import styles from './Spinner.module.scss'
 
-export default function Spiner({ className = '' }) {
+export default function Spinner({ className = '' }) {
   return (
     <div className={styles.container}>
       <Image

src/containers/Article/Article.tsx → src/containers/boards/Article/Article.tsx

@@ -1,4 +1,5 @@
 import Image from 'next/image'
+import Link from 'next/link'
 import styles from './Article.module.scss'
 import formatDate from '@/src/utils/formaDate'
 import { Article } from '@/src/interfaces/Article.interface'
@@ -11,25 +12,27 @@ export default function Article({ article }: { article: Article }) {
 
   return (
     <div className={styles.article}>
-      <div className={styles.contentSection}>
-        <div className={styles.title}>{article.title}</div>
-        <div
-          className={styles.image}
-          style={{
-            border: articleImage === '' ? 'none' : '1px solid var(--gray-200)',
-          }}
-        >
-          {articleImage && (
-            <Image
-              src={articleImage}
-              alt="게시글 이미지"
-              width={50}
-              height={50}
-            />
-          )}
+      <Link href={`/boards/${article.id}`}>
+        <div className={styles.contentSection}>
+          <div className={styles.title}>{article.title}</div>
+          <div
+            className={styles.image}
+            style={{
+              border:
+                articleImage === '' ? 'none' : '1px solid var(--gray-200)',
+            }}
+          >
+            {articleImage && (
+              <Image
+                src={articleImage}
+                alt="게시글 이미지"
+                width={50}
+                height={50}
+              />
+            )}
+          </div>
         </div>
-      </div>
-
+      </Link>
       <div className={styles.subContentSection}>
         <div className={styles.writerSection}>
           <div className={styles.nickname}>

src/containers/Article/ArticleList.tsx → src/containers/boards/Article/ArticleList.tsx

@@ -1,4 +1,5 @@
-import { useState } from 'react'
+import { useState, useMemo } from 'react'
+import Link from 'next/link'
 import useFetechData from '@/src/hooks/useFetechData'
 import { ArticleListResponse } from '@/src/interfaces/Article.interface'
 import Article from './Article'
@@ -9,14 +10,19 @@ import Button from '@/src/components/Button/Button'
 import styles from './Article.module.scss'
 
 export default function ArticleList() {
-  const [orderBy, setOrderBy] = useState('recent')
+  type OrderOption = 'recent' | 'like'
+  const [orderBy, setOrderBy] = useState<OrderOption>('recent')
   const [searchTitle, setSearchTitle] = useState('')
-  const fetechArticles = useFetechData<ArticleListResponse>(
-    `articles?page=1`,
-    10,
-    orderBy,
-    searchTitle
-  )
+
+  const url = useMemo(() => {
+    let baseUrl = `articles?page=1&pageSize=10&orderBy=${orderBy}`
+    if (searchTitle) {
+      baseUrl += `&keyword=${searchTitle}`
+    }
+    return baseUrl
+  }, [orderBy, searchTitle])
+
+  const fetechArticles = useFetechData<ArticleListResponse>(url)
   const { data: ArticleList, isLoading } = fetechArticles
   const orderOptions = {
     최신순: 'recent',
@@ -34,15 +40,23 @@ export default function ArticleList() {
     return <Spiner />
   }
   if (ArticleList?.totalCount === 0) {
-    return <>게시글이 없습니다.</>
+    return (
+      <>
+        <SearchBar keyword={handleSearchTitle} />
+        <br />
+        게시글이 없습니다.
+      </>
+    )
   }
 
   return (
     <div className={styles.container}>
       <div className={styles.containerTitleSection}>
         <div className={styles.containerTitle}>게시글</div>
 
-        <Button>글쓰기</Button>
+        <Link href="/boards/create">
+          <Button>글쓰기</Button>
+        </Link>
       </div>
 
       <div className={styles.controlSection}>

src/containers/BestArticle/BestArticle.tsx → src/containers/boards/BestArticle/BestArticle.tsx

@@ -1,4 +1,5 @@
 import Image from 'next/image'
+import Link from 'next/link'
 import styles from './BestArticle.module.scss'
 import formatDate from '@/src/utils/formaDate'
 import { Article } from '@/src/interfaces/Article.interface'
@@ -12,28 +13,29 @@ export default function BestArticle({ article }: { article: Article }) {
   return (
     <div className={styles.article}>
       <Image src={badgeIcon} alt="베스트 게시글 배지" width={102} height={30} />
-
-      <div className={styles.contentSection}>
-        <div className={article.title}>{article.title}</div>
-        <div
-          className={styles.image}
-          style={{
-            border: articleImage === '' ? 'none' : '1px solid var(--gray-200)',
-            backgroundColor:
-              articleImage === '' ? 'var(--gray-50)' : 'var(--white)',
-          }}
-        >
-          {articleImage && (
-            <Image
-              src={articleImage}
-              alt="게시글 이미지"
-              width={50}
-              height={50}
-            />
-          )}
+      <Link href={`/boards/${article.id}`}>
+        <div className={styles.contentSection}>
+          <div className={article.title}>{article.title}</div>
+          <div
+            className={styles.image}
+            style={{
+              border:
+                articleImage === '' ? 'none' : '1px solid var(--gray-200)',
+              backgroundColor:
+                articleImage === '' ? 'var(--gray-50)' : 'var(--white)',
+            }}
+          >
+            {articleImage && (
+              <Image
+                src={articleImage}
+                alt="게시글 이미지"
+                width={50}
+                height={50}
+              />
+            )}
+          </div>
         </div>
-      </div>
-
+      </Link>
       <div className={styles.subContentSection}>
         <div className={styles.writerSection}>
           <div className={styles.nickname}>{article.writer.nickname}</div>

src/containers/BestArticle/BestArticleList.tsx → src/containers/boards/BestArticle/BestArticleList.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useMemo } from 'react'
 import useFetechData from '@/src/hooks/useFetechData'
 import { ArticleListResponse } from '@/src/interfaces/Article.interface'
 import BestArticle from './BestArticle'
@@ -19,11 +19,11 @@ const getPageSize = () => {
 export default function BestArticleList() {
   const [pageSize, setPageSize] = useState<number>(getPageSize())
 
-  const fetechArticles = useFetechData<ArticleListResponse>(
-    `articles?page=1`,
-    pageSize,
-    'like'
+  const url = useMemo(
+    () => `articles?page=1&pageSize=${pageSize}&orderBy=like`,
+    [pageSize]
   )
+  const fetechArticles = useFetechData<ArticleListResponse>(url)
   const { data: ArticleList, isLoading } = fetechArticles
 
   useEffect(() => {