From 18119bb9494390d9524544dadcd477f77ae49fe4 Mon Sep 17 00:00:00 2001 From: hvrain Date: Wed, 14 Aug 2024 03:30:11 +0900 Subject: [PATCH 1/8] Add: Accept Feedback --- components/BestBoards.tsx | 46 +++++++++++-------------- components/Header/index.tsx | 8 ++--- components/MainBoards.tsx | 44 +++++++++++------------ components/boards/BestContent.tsx | 2 +- components/boards/BestMedal.tsx | 2 +- components/boards/BoardTitle.tsx | 28 ++++++++------- components/boards/MainInfo.tsx | 2 +- components/elements/HeaderContainer.tsx | 2 +- 8 files changed, 62 insertions(+), 72 deletions(-) diff --git a/components/BestBoards.tsx b/components/BestBoards.tsx index 392aff461..aa6c3408f 100644 --- a/components/BestBoards.tsx +++ b/components/BestBoards.tsx @@ -1,51 +1,45 @@ import getArticles, { Article } from '@/pages/api/client'; -import { useCallback, useContext, useEffect, useState } from 'react'; +import { useContext, useEffect, useState } from 'react'; import { DeviceContext } from '@/contexts/DeviceContext'; import BestMedal from './boards/BestMedal'; import BestContent from './boards/BestContent'; import BestInfo from './boards/BestInfo'; +const pageSizeMap = { + mobile: 1, + tablet: 2, + desktop: 3, +}; + function BestBoards() { const device = useContext(DeviceContext); const [boards, setBoards] = useState([]); - const pageSizeByDevice = useCallback(() => { - if (device === 'mobile') return 1; - if (device === 'tablet') return 2; - return 3; - }, [device]); - useEffect(() => { const handleLoad = async () => { const { list } = await getArticles({ page: 1, - pageSize: pageSizeByDevice(), + pageSize: pageSizeMap[device], orderBy: 'like', }); - setBoards(() => list); + setBoards(list); }; handleLoad(); - }, [pageSizeByDevice]); - - if (!boards) return null; + }, [device]); return ( -
+

베스트 게시글

-
- {boards && - boards.map(board => ( -
-
- - - -
+
+ {boards.map(board => ( +
+
+ + +
- ))} +
+ ))}
); diff --git a/components/Header/index.tsx b/components/Header/index.tsx index fff99f7f6..650f23c75 100644 --- a/components/Header/index.tsx +++ b/components/Header/index.tsx @@ -5,17 +5,15 @@ import VerticalDivider from '@/components/elements/VerticalDivider'; function Header({ children }: PropsWithChildren) { return (
-
-
+
+
logo -
- {children} -
+
{children}
([]); const [keyword, setKeyword] = useState(''); const [orderBy, setOrderBy] = useState('recent'); - const [isLoading, setIsLoading] = useState(true); + const [isLoading, setIsLoading] = useState(false); - const handleLoad = useCallback(async () => { + const fetchArticles = useCallback(async () => { const query = { page: 1, pageSize: 6, orderBy, keyword, }; - const { list } = await getArticles(query); - router.push({ - query, - }); - setBoards(() => list); - }, [keyword, orderBy, router]); - - useEffect(() => { - if (isLoading === true) { - handleLoad(); - setIsLoading(() => false); + if (isLoading === false) { + setIsLoading(true); + const { list } = await getArticles(query); + setIsLoading(false); + setBoards(list); } - }, [isLoading, keyword, orderBy, handleLoad]); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [keyword, orderBy]); - if (!boards) return null; + useEffect(() => { + fetchArticles(); + }, [fetchArticles]); return ( -
+
-
- {boards && - boards.map((board, i) => ( +
+ {boards.map((board, i) => { + const isLastArticle = i !== boards.length - 1; + return ( <>
@@ -55,9 +50,10 @@ function MainBoards() {
- {i !== boards.length - 1 && } + {isLastArticle && } - ))} + ); + })}
); diff --git a/components/boards/BestContent.tsx b/components/boards/BestContent.tsx index 408572893..9ed8d30fa 100644 --- a/components/boards/BestContent.tsx +++ b/components/boards/BestContent.tsx @@ -7,7 +7,7 @@ type Props = { function BestContent({ board }: Props) { return ( -
+

{board.title}

diff --git a/components/boards/BestMedal.tsx b/components/boards/BestMedal.tsx index c162d59b9..2f33bf42e 100644 --- a/components/boards/BestMedal.tsx +++ b/components/boards/BestMedal.tsx @@ -2,7 +2,7 @@ import Image from 'next/image'; function BestMedal() { return ( -
+
best Best
diff --git a/components/boards/BoardTitle.tsx b/components/boards/BoardTitle.tsx index c91fa1d3c..5c0e475d5 100644 --- a/components/boards/BoardTitle.tsx +++ b/components/boards/BoardTitle.tsx @@ -1,7 +1,14 @@ import { DeviceContext } from '@/contexts/DeviceContext'; import { ArticlesQuery } from '@/pages/api/client'; import Image from 'next/image'; -import { ChangeEvent, FormEvent, useContext, useEffect, useState } from 'react'; +import { + ChangeEvent, + FormEvent, + useContext, + useEffect, + useMemo, + useState, +} from 'react'; type Props = { keyword: string; @@ -10,7 +17,6 @@ type Props = { onChangeOrderBy: React.Dispatch< React.SetStateAction >; - setIsLoading: React.Dispatch>; }; function BoardTitle({ @@ -18,15 +24,15 @@ function BoardTitle({ orderBy, onChangeKeyword, onChangeOrderBy, - setIsLoading, }: Props) { const device = useContext(DeviceContext); const [isOpen, setIsOpen] = useState(false); const [mounted, setMounted] = useState(false); - let orderName; - if (orderBy === 'recent') orderName = '최신순'; - else orderName = '좋아요순'; + const orderName = useMemo(() => { + if (orderBy === 'recent') return '최신순'; + return '좋아요순'; + }, [orderBy]); const handleIsOpen = () => { setIsOpen(p => !p); @@ -39,16 +45,12 @@ function BoardTitle({ const handleSubmit = (e: FormEvent) => { e.preventDefault(); - setIsLoading(() => true); }; const handleChangeOrderBy = (e: React.MouseEvent) => { const { currentTarget } = e; const order = currentTarget.dataset.order as ArticlesQuery['orderBy']; - onChangeOrderBy(prev => { - if (prev !== order) setIsLoading(() => true); - return order; - }); + onChangeOrderBy(order); }; useEffect(() => { @@ -66,7 +68,7 @@ function BoardTitle({ 글쓰기
-
+