From df4bc927e513acfbc8ebf763c3a512b250ae2a5a Mon Sep 17 00:00:00 2001 From: Minchan <98478661+itscold96@users.noreply.github.com> Date: Wed, 14 Aug 2024 17:13:17 +0900 Subject: [PATCH 01/13] =?UTF-8?q?refactor(mentor):=20QueryClient=EB=A5=BC?= =?UTF-8?q?=20Laytout=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=A1=9C=20?= =?UTF-8?q?=EC=9D=B4=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/@shared/Layout.tsx | 5 +++- components/boards/ArticleManagement.tsx | 1 + pages/boards.tsx | 33 +++++++++++-------------- 3 files changed, 19 insertions(+), 20 deletions(-) diff --git a/components/@shared/Layout.tsx b/components/@shared/Layout.tsx index 4cddf0659..47097f243 100644 --- a/components/@shared/Layout.tsx +++ b/components/@shared/Layout.tsx @@ -4,10 +4,13 @@ import styles from './Layout.module.scss'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; function Layout({ children }: { children: React.ReactNode }) { + const queryClient = new QueryClient(); return ( <>
-
{children}
+ +
{children}
+ ); } diff --git a/components/boards/ArticleManagement.tsx b/components/boards/ArticleManagement.tsx index fb41e3ec5..dee23f9e8 100644 --- a/components/boards/ArticleManagement.tsx +++ b/components/boards/ArticleManagement.tsx @@ -28,6 +28,7 @@ function ArticleManagement({ }: ArticleManagementProps) { const { innerWidth } = useWindowSize(); + //TODO: 드롭다운 모듈화 return ( <>
diff --git a/pages/boards.tsx b/pages/boards.tsx index 8e5a5edcc..1c5481c96 100644 --- a/pages/boards.tsx +++ b/pages/boards.tsx @@ -1,7 +1,6 @@ import styles from './boards.module.scss'; import { Suspense } from 'react'; import dynamic from 'next/dynamic'; -import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import getArticles, { IArticle } from '@/apis/getArticles'; import Link from 'next/link'; import Button from '@/components/@shared/Button'; @@ -24,28 +23,24 @@ export async function getServerSideProps() { } export default function Boards({ list }: { list: IArticle[] }) { - const queryClient = new QueryClient(); - // TODO: BestArticle, Article을 Link로 감싸서 prefetch 시켜야함 return (
- -
-

베스트 게시글

- ...loading
}> - - -
-
-
-

게시글

- - - -
- +
+

베스트 게시글

+ ...loading
}> + + +
+
+
+

게시글

+ + +
- + +
); } From 97f6bf7a3c4884a7708b1d14b24a736ac11c97bb Mon Sep 17 00:00:00 2001 From: Minchan <98478661+itscold96@users.noreply.github.com> Date: Wed, 14 Aug 2024 17:52:37 +0900 Subject: [PATCH 02/13] =?UTF-8?q?refactor(borads):=20=EB=82=B4=EB=B6=80=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=AA=A8=EB=93=88?= =?UTF-8?q?=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/boards/ArticleManagement.tsx | 4 +-- components/boards/ArticleSection.module.scss | 11 +++++++ components/boards/ArticleSection.tsx | 25 +++++++++------ components/boards/BestArticleList.tsx | 32 ++++++------------- .../boards/BestArticleSection.module.scss | 14 ++++++++ components/boards/BestArticleSection.tsx | 20 ++++++++++++ pages/boards.module.scss | 15 --------- pages/boards.tsx | 26 ++------------- 8 files changed, 76 insertions(+), 71 deletions(-) create mode 100644 components/boards/BestArticleSection.module.scss create mode 100644 components/boards/BestArticleSection.tsx diff --git a/components/boards/ArticleManagement.tsx b/components/boards/ArticleManagement.tsx index dee23f9e8..b88ae21d8 100644 --- a/components/boards/ArticleManagement.tsx +++ b/components/boards/ArticleManagement.tsx @@ -13,7 +13,7 @@ const orderByObject = { interface ArticleManagementProps { onSearchSubmit: (event: React.FormEvent) => void; - onIsOpenClick: () => void; + onDropdownClick: () => void; onOrderByClick: (event: React.MouseEvent) => void; isDropdownOpen: boolean; orderBy: orderType; @@ -21,7 +21,7 @@ interface ArticleManagementProps { function ArticleManagement({ onSearchSubmit, - onIsOpenClick, + onDropdownClick: onIsOpenClick, onOrderByClick, isDropdownOpen, orderBy, diff --git a/components/boards/ArticleSection.module.scss b/components/boards/ArticleSection.module.scss index 84741e0e4..a56a4e7e6 100644 --- a/components/boards/ArticleSection.module.scss +++ b/components/boards/ArticleSection.module.scss @@ -3,3 +3,14 @@ flex-direction: column; gap: 24px; } + +.titleAndButton { + display: flex; + justify-content: space-between; + margin-bottom: 24px; + + & button { + width: 88px; + height: 42px; + } +} diff --git a/components/boards/ArticleSection.tsx b/components/boards/ArticleSection.tsx index 562357e54..b2c0b326b 100644 --- a/components/boards/ArticleSection.tsx +++ b/components/boards/ArticleSection.tsx @@ -4,6 +4,8 @@ import { useState } from 'react'; import useToggle from '@/hooks/useToggle'; import styles from './ArticleSection.module.scss'; import dynamic from 'next/dynamic'; +import Link from 'next/link'; +import Button from '../@shared/Button'; const ArticleManagement = dynamic(() => import('./ArticleManagement'), { ssr: false, @@ -23,13 +25,11 @@ function ArticleSection({ initialArticleList }: ArticleSectionProps) { ) => { const { value } = (event.target as HTMLDivElement).dataset; - if (value) { - // dataset에 있는 데이터로 재정렬 요청 후 토글 닫기 - const { list } = await getArticles({ order: value as orderType }); - setArticleList(() => list); - setOrderBy(value as orderType); - toggleIsOpen(); - } + // dataset에 있는 쿼리로 재정렬 요청 후 드롭다운 닫기 + const { list } = await getArticles({ order: value as orderType }); + setArticleList(() => list); + setOrderBy(value as orderType); + toggleIsOpen(); }; const handleSearchSubmit = async ( @@ -37,19 +37,26 @@ function ArticleSection({ initialArticleList }: ArticleSectionProps) { ) => { event.preventDefault(); const { value } = (event.target as HTMLFormElement)['search']; + // 작성된 키워드로 검색 요청 const { list } = await getArticles({ keyword: value }); setArticleList(() => list); }; - const handleIsOpenClick = () => { + const handleDropdownClick = () => { toggleIsOpen(); }; return (
+
+

게시글

+ + + +
- {BestArticleList.map((bestArticle) => { - const { - id, - title, - writer: { nickname }, - image, - likeCount, - createdAt, - } = bestArticle; - - const createDate = createdAt.split('T')[0]; - return ( - - ); - })} + {BestArticleList.map((bestArticle) => ( + + ))}
); diff --git a/components/boards/BestArticleSection.module.scss b/components/boards/BestArticleSection.module.scss new file mode 100644 index 000000000..4ed4441fa --- /dev/null +++ b/components/boards/BestArticleSection.module.scss @@ -0,0 +1,14 @@ +.bestArticleSection { + min-height: 257px; +} + +.titleAndButton { + display: flex; + justify-content: space-between; + margin-bottom: 24px; + + & button { + width: 88px; + height: 42px; + } +} diff --git a/components/boards/BestArticleSection.tsx b/components/boards/BestArticleSection.tsx new file mode 100644 index 000000000..ec61a65eb --- /dev/null +++ b/components/boards/BestArticleSection.tsx @@ -0,0 +1,20 @@ +import { Suspense } from 'react'; +import styles from './BestArticleSection.module.scss'; +import dynamic from 'next/dynamic'; + +const BestArticleList = dynamic(() => import('../boards/BestArticleList'), { + ssr: false, +}); + +function BestArticleSection() { + return ( +
+

베스트 게시글

+ ...loading
}> + + + + ); +} + +export default BestArticleSection; diff --git a/pages/boards.module.scss b/pages/boards.module.scss index 4a61b21c3..a65e1e87d 100644 --- a/pages/boards.module.scss +++ b/pages/boards.module.scss @@ -9,19 +9,4 @@ line-height: 23.87px; margin-bottom: 24px; } - - .bestArticleSection { - min-height: 257px; - } - - .titleAndButton { - display: flex; - justify-content: space-between; - margin-bottom: 24px; - - & button { - width: 88px; - height: 42px; - } - } } diff --git a/pages/boards.tsx b/pages/boards.tsx index 1c5481c96..3c6ac0951 100644 --- a/pages/boards.tsx +++ b/pages/boards.tsx @@ -2,14 +2,8 @@ import styles from './boards.module.scss'; import { Suspense } from 'react'; import dynamic from 'next/dynamic'; import getArticles, { IArticle } from '@/apis/getArticles'; -import Link from 'next/link'; -import Button from '@/components/@shared/Button'; import ArticleSection from '@/components/boards/ArticleSection'; - -const BestArticleList = dynamic( - () => import('../components/boards/BestArticleList'), - { ssr: false } -); +import BestArticleSection from '@/components/boards/BestArticleSection'; export async function getServerSideProps() { // 최신순이 기본값 @@ -23,24 +17,10 @@ export async function getServerSideProps() { } export default function Boards({ list }: { list: IArticle[] }) { - // TODO: BestArticle, Article을 Link로 감싸서 prefetch 시켜야함 return (
-
-

베스트 게시글

- ...loading
}> - - -
-
-
-

게시글

- - - -
- -
+ + ); } From 402c7da9ac881c1548d1e9c5931006744a784736 Mon Sep 17 00:00:00 2001 From: Minchan <98478661+itscold96@users.noreply.github.com> Date: Wed, 14 Aug 2024 18:06:28 +0900 Subject: [PATCH 03/13] =?UTF-8?q?remove:=EB=A6=AC=EC=95=A1=ED=8A=B8?= =?UTF-8?q?=EC=97=90=EC=84=9C=20=EC=82=AC=EC=9A=A9=ED=96=88=EB=8D=98=20Cus?= =?UTF-8?q?tomImage=20=EA=B3=B5=EC=9A=A9=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/@shared/CustomImage.tsx | 46 ------------------ components/@shared/HeaderLinkSection.tsx | 4 +- components/boards/Article.module.scss | 58 +++++++++++++---------- components/boards/Article.tsx | 20 ++------ components/boards/ArticleManagement.tsx | 4 +- components/boards/BestArticle.module.scss | 5 ++ components/boards/BestArticle.tsx | 15 ++---- 7 files changed, 50 insertions(+), 102 deletions(-) delete mode 100644 components/@shared/CustomImage.tsx diff --git a/components/@shared/CustomImage.tsx b/components/@shared/CustomImage.tsx deleted file mode 100644 index d947f4fe8..000000000 --- a/components/@shared/CustomImage.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import classNames from 'classnames'; -import Image, { StaticImageData } from 'next/image'; - -interface ImageProps { - src: string | StaticImageData; - alt: string; - width: number; - height: number; - radius?: number; - aspectRatio?: number; - className?: string; - priority?: boolean; - onClick?: () => void; -} - -function CustomImage({ - src, - alt, - width, - height, - radius, - className, - onClick, - aspectRatio, - priority, -}: ImageProps) { - const imageStyle = { - borderRadius: `${radius}px` || '', - aspectRatio: `${aspectRatio}` || '', - }; - - return ( - {alt} - ); -} - -export default CustomImage; diff --git a/components/@shared/HeaderLinkSection.tsx b/components/@shared/HeaderLinkSection.tsx index dde39d4c9..fd9fdaf09 100644 --- a/components/@shared/HeaderLinkSection.tsx +++ b/components/@shared/HeaderLinkSection.tsx @@ -1,7 +1,6 @@ import logoImg from '@/public/images/home/logoAndTypo.png'; import typoImg from '@/public/images/home/typo.png'; import Link from 'next/link'; -import CustomImage from './CustomImage'; import { useRouter } from 'next/router'; import useWindowSize from '@/hooks/useWindowSize'; import { @@ -13,6 +12,7 @@ import { import classNames from 'classnames'; import styles from './HeaderLinkSection.module.scss'; import { DEVICE_MAX_WIDTH } from '@/constants/mediaQuerySize'; +import Image from 'next/image'; function HeaderLinkSection() { const { innerWidth } = useWindowSize(); @@ -23,7 +23,7 @@ function HeaderLinkSection() { return (
-
{title}
- + {'게시글
- {nickname} {createdAt}
- + {'좋아요 {likeCount}
diff --git a/components/boards/ArticleManagement.tsx b/components/boards/ArticleManagement.tsx index b88ae21d8..2ac499f87 100644 --- a/components/boards/ArticleManagement.tsx +++ b/components/boards/ArticleManagement.tsx @@ -1,10 +1,10 @@ import styles from './ArticleManagement.module.scss'; -import CustomImage from '../@shared/CustomImage'; import { DEVICE_MAX_WIDTH } from '@/constants/mediaQuerySize'; import sortIcon from '@/public/images/market/sort-icon.png'; import dropDownIcon from '@/public/images/market/order-dropdown.png'; import { orderType } from '@/apis/getArticles'; import useWindowSize from '@/hooks/useWindowSize'; +import Image from 'next/image'; const orderByObject = { recent: '최신순', @@ -44,7 +44,7 @@ function ArticleManagement({ {innerWidth > DEVICE_MAX_WIDTH.mobile && ( {orderByObject[orderBy]} )} - DEVICE_MAX_WIDTH.mobile ? dropDownIcon : sortIcon } diff --git a/components/boards/BestArticle.module.scss b/components/boards/BestArticle.module.scss index ac23719ff..67cbbfced 100644 --- a/components/boards/BestArticle.module.scss +++ b/components/boards/BestArticle.module.scss @@ -37,6 +37,11 @@ line-height: 32px; color: var(--cool-gray-800); + img { + border-radius: 8px; + border: 1px solid var(--cool-gray-200); + } + @media #{$underTabletSize} { margin-bottom: 40px; } diff --git a/components/boards/BestArticle.tsx b/components/boards/BestArticle.tsx index a245a9b0a..0f9afaf17 100644 --- a/components/boards/BestArticle.tsx +++ b/components/boards/BestArticle.tsx @@ -1,7 +1,7 @@ import styles from './BestArticle.module.scss'; -import CustomImage from '../@shared/CustomImage'; import BestIcon from '@/public/images/boards/best-icon.png'; import likeImg from '@/public/images/market/like-icon.png'; +import Image from 'next/image'; interface BestArticleProps { title: string; @@ -21,7 +21,7 @@ function BestArticle({ return (
-
{title}
-
@@ -46,12 +44,7 @@ function BestArticle({
{nickname}
- + {'좋아요 {likeCount}
From 51d9fbbaed612c3225790da2af4d48d948b9f5c6 Mon Sep 17 00:00:00 2001 From: Minchan <98478661+itscold96@users.noreply.github.com> Date: Wed, 14 Aug 2024 19:46:41 +0900 Subject: [PATCH 04/13] =?UTF-8?q?design(ArticleSection):=20=EB=B6=88?= =?UTF-8?q?=ED=95=84=EC=9A=94=ED=95=9C=20=EB=A7=88=EC=A7=84=20=EC=A0=9C?= =?UTF-8?q?=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/boards/ArticleSection.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/boards/ArticleSection.module.scss b/components/boards/ArticleSection.module.scss index a56a4e7e6..62f117abd 100644 --- a/components/boards/ArticleSection.module.scss +++ b/components/boards/ArticleSection.module.scss @@ -6,8 +6,8 @@ .titleAndButton { display: flex; + align-items: center; justify-content: space-between; - margin-bottom: 24px; & button { width: 88px; From 19e3e99c174c81beb90584e5e9da1fe510c87f01 Mon Sep 17 00:00:00 2001 From: Minchan <98478661+itscold96@users.noreply.github.com> Date: Wed, 14 Aug 2024 19:59:06 +0900 Subject: [PATCH 05/13] =?UTF-8?q?refactor:=20getArticles=20=ED=95=A8?= =?UTF-8?q?=EC=88=98=20=EB=82=B4=EB=B6=80=EC=97=90=20URLSearchParams=20api?= =?UTF-8?q?=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apis/getArticles.ts | 17 ++++++++++++----- components/boards/BestArticleList.tsx | 6 +++--- hooks/queries/useArticlesQuery.ts | 4 ++-- 3 files changed, 17 insertions(+), 10 deletions(-) diff --git a/apis/getArticles.ts b/apis/getArticles.ts index f95f5f993..143c75c89 100644 --- a/apis/getArticles.ts +++ b/apis/getArticles.ts @@ -23,20 +23,27 @@ interface ArticlesResponse { } export interface GetArticlesProps { - page?: string; + page?: number; + size?: number; order?: orderType; keyword?: string; - size?: string; } const getArticles = async ({ - page = '1', + page = 1, order = 'recent', - size = '10', + size = 10, keyword = '', }: GetArticlesProps): Promise => { + const params = new URLSearchParams({ + page: page.toString(), + pageSize: size.toString(), + orderBy: order, + keyword, + }); + console.log('params: ', params.toString()); const { data } = await axiosInstance.get( - `/${ARTICLES_QUERY_KEY}?page=${page}&pageSize=${size}&orderBy=${order}&keyword=${keyword}` + `/${ARTICLES_QUERY_KEY}?${params.toString()}` ); return data; diff --git a/components/boards/BestArticleList.tsx b/components/boards/BestArticleList.tsx index ec5385e5c..12cb21c8e 100644 --- a/components/boards/BestArticleList.tsx +++ b/components/boards/BestArticleList.tsx @@ -9,10 +9,10 @@ function BestArticleList() { const { innerWidth } = useWindowSize(); const querySize = innerWidth > DEVICE_MAX_WIDTH.tablet // 태블릿 사이즈보다 크면 3개 - ? '3' + ? 3 : innerWidth > DEVICE_MAX_WIDTH.mobile // 태블릿 사이즈보다 작고 모바일 사이즈보다 크면 2개 - ? '2' - : '1'; //그보다 작으면 1개 + ? 2 + : 1; //그보다 작으면 1개 const { data: { list: BestArticleList }, diff --git a/hooks/queries/useArticlesQuery.ts b/hooks/queries/useArticlesQuery.ts index 8f1e23366..7adf94691 100644 --- a/hooks/queries/useArticlesQuery.ts +++ b/hooks/queries/useArticlesQuery.ts @@ -2,10 +2,10 @@ import getArticles, { GetArticlesProps } from '@/apis/getArticles'; import { ARTICLES_QUERY_KEY } from '@/constants/queryKeys'; import { useSuspenseQuery } from '@tanstack/react-query'; -const INITIAL_PAGE_SIZE = '10'; +const INITIAL_PAGE_SIZE = 10; const useArticlesQuery = ({ - page = '1', + page = 1, order = 'recent', size = INITIAL_PAGE_SIZE, keyword = '', From 2e1f4f265ffff61c4548a3d7a27be1e3c5848f0d Mon Sep 17 00:00:00 2001 From: Minchan <98478661+itscold96@users.noreply.github.com> Date: Wed, 14 Aug 2024 20:11:27 +0900 Subject: [PATCH 06/13] =?UTF-8?q?refactor(mentor):=20=EB=B0=98=EC=9D=91?= =?UTF-8?q?=ED=98=95=20=EC=BF=BC=EB=A6=AC=20mixin=EC=9C=BC=EB=A1=9C=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/@shared/Button.tsx | 2 +- components/@shared/Header.module.scss | 6 ++--- .../@shared/HeaderLinkSection.module.scss | 13 +++++----- components/@shared/Layout.module.scss | 3 ++- .../boards/ArticleManagement.module.scss | 5 ++-- components/boards/BestArticle.module.scss | 4 ++-- components/boards/BestArticleList.module.scss | 2 +- styles/_variables.scss | 24 +++++++++++++++++++ 8 files changed, 43 insertions(+), 16 deletions(-) diff --git a/components/@shared/Button.tsx b/components/@shared/Button.tsx index 1ff1f5962..08aa4428b 100644 --- a/components/@shared/Button.tsx +++ b/components/@shared/Button.tsx @@ -22,7 +22,7 @@ function Button({ return ( - + + )} diff --git a/components/boards/ArticleSection.tsx b/components/boards/ArticleSection.tsx index b2c0b326b..bd4cf5d36 100644 --- a/components/boards/ArticleSection.tsx +++ b/components/boards/ArticleSection.tsx @@ -16,35 +16,27 @@ interface ArticleSectionProps { } function ArticleSection({ initialArticleList }: ArticleSectionProps) { - const [articleList, setArticleList] = useState(initialArticleList); - const [orderBy, setOrderBy] = useState('recent'); - const [isOpen, toggleIsOpen] = useToggle(); + const [articleList, setArticleList] = useState(initialArticleList); // SSR로 받아온 게시글 리스트 초깃값 + const [orderBy, setOrderBy] = useState('recent'); // 게시글 정렬 기준 + const [isOpen, toggleDropdown] = useToggle(); - const handleOrderByClick = async ( - event: React.MouseEvent - ) => { + const handleOrderByClick = async (event: React.MouseEvent) => { const { value } = (event.target as HTMLDivElement).dataset; - - // dataset에 있는 쿼리로 재정렬 요청 후 드롭다운 닫기 - const { list } = await getArticles({ order: value as orderType }); + const { list } = await getArticles({ order: value as orderType }); // dataset에 있는 쿼리로 재정렬 요청 후 드롭다운 닫기 setArticleList(() => list); setOrderBy(value as orderType); - toggleIsOpen(); + toggleDropdown(); }; - const handleSearchSubmit = async ( - event: React.FormEvent - ) => { + const handleSearchSubmit = async (event: React.FormEvent) => { event.preventDefault(); const { value } = (event.target as HTMLFormElement)['search']; - // 작성된 키워드로 검색 요청 - const { list } = await getArticles({ keyword: value }); - + const { list } = await getArticles({ keyword: value }); // 작성된 키워드로 검색 요청 setArticleList(() => list); }; const handleDropdownClick = () => { - toggleIsOpen(); + toggleDropdown(); }; return ( From 8b6dd2a0ebe8dda930ad235b51409f333587a1d8 Mon Sep 17 00:00:00 2001 From: Minchan <98478661+itscold96@users.noreply.github.com> Date: Wed, 14 Aug 2024 23:33:59 +0900 Subject: [PATCH 09/13] =?UTF-8?q?design:=20reset=20css=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- styles/globals.css | 2 + styles/reset.css | 136 +++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 138 insertions(+) create mode 100644 styles/reset.css diff --git a/styles/globals.css b/styles/globals.css index b017fc3f0..583475e5a 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -1,3 +1,5 @@ +@import './reset.css'; + :root { /* palette */ --cool-gray: #374151; diff --git a/styles/reset.css b/styles/reset.css new file mode 100644 index 000000000..e4fb0e9ed --- /dev/null +++ b/styles/reset.css @@ -0,0 +1,136 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v5.0.2 | 20191019 + License: none (public domain) +*/ + +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +main, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +menu, +nav, +section { + display: block; +} +/* HTML5 hidden-attribute fix for newer browsers */ +*[hidden] { + display: none; +} +body { + line-height: 1; +} +menu, +ol, +ul { + list-style: none; +} +blockquote, +q { + quotes: none; +} +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} From 380954c4379fb57080159bb4490737d3cea802c1 Mon Sep 17 00:00:00 2001 From: Minchan <98478661+itscold96@users.noreply.github.com> Date: Thu, 15 Aug 2024 16:37:07 +0900 Subject: [PATCH 10/13] =?UTF-8?q?refactor:=20=EC=A0=95=EB=A0=AC=20?= =?UTF-8?q?=EB=93=9C=EB=A1=AD=EB=8B=A4=EC=9A=B4=20=EB=AA=A8=EB=93=88?= =?UTF-8?q?=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../@shared/OrderByDropdown.module.scss | 68 ++++++++++++++++++ components/@shared/OrderByDropdown.tsx | 57 +++++++++++++++ .../boards/ArticleManagement.module.scss | 69 ------------------- components/boards/ArticleManagement.tsx | 47 ++----------- components/boards/ArticleSection.tsx | 21 +----- 5 files changed, 132 insertions(+), 130 deletions(-) create mode 100644 components/@shared/OrderByDropdown.module.scss create mode 100644 components/@shared/OrderByDropdown.tsx diff --git a/components/@shared/OrderByDropdown.module.scss b/components/@shared/OrderByDropdown.module.scss new file mode 100644 index 000000000..a4cca490e --- /dev/null +++ b/components/@shared/OrderByDropdown.module.scss @@ -0,0 +1,68 @@ +@import '/styles/variables'; + +.dropdownWrapper { + display: flex; + justify-content: center; + align-items: center; + flex-shrink: 0; + + position: relative; + height: 42px; + width: 130px; + + font-size: 16px; + font-weight: 400; + line-height: 24px; + border-radius: 12px; + + color: var(--cool-gray-800); + background-color: var(--white); + border: 1px solid var(--cool-gray-200); + + cursor: pointer; + + @include underTablet { + width: 120px; + } + + @include mobile { + width: 42px; + border-radius: 12px; + } +} + +.dropdownTrigger { + display: flex; + justify-content: center; + align-items: center; + + & span { + width: 66px; + } +} + +.dropdownMenu { + position: absolute; + display: flex; + flex-direction: column; + + width: 130px; + height: 84px; + top: 46px; + right: 0; + border-radius: 12px; + + background-color: var(--white); + border: 1px solid var(--cool-gray-200); + + & li { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + + &:not(:last-child) { + border-bottom: 1px solid var(--cool-gray-200); + } + } +} diff --git a/components/@shared/OrderByDropdown.tsx b/components/@shared/OrderByDropdown.tsx new file mode 100644 index 000000000..d2893fe2a --- /dev/null +++ b/components/@shared/OrderByDropdown.tsx @@ -0,0 +1,57 @@ +import styles from './OrderByDropdown.module.scss'; +import sortIcon from '@/public/images/market/sort-icon.png'; +import dropDownIcon from '@/public/images/market/order-dropdown.png'; +import { DEVICE_MAX_WIDTH } from '@/constants/mediaQuerySize'; +import Image from 'next/image'; +import useWindowSize from '@/hooks/useWindowSize'; +import useToggle from '@/hooks/useToggle'; +import { useState } from 'react'; + +interface OrderByDropdownProps { + onMenuClick: (orderBy: string) => void; +} + +const orderByList = [ + { name: '최신순', value: 'recent' }, + { name: '좋아요순', value: 'like' }, +]; + +function OrderByDropdown({ onMenuClick }: OrderByDropdownProps) { + const { innerWidth } = useWindowSize(); + const [isDropdownOpen, toggleDropdown] = useToggle(); + const [selectedItem, setSelectedItem] = useState(orderByList[0]); + + const handleMenuClick = (event: React.MouseEvent) => { + const { name, value } = (event.target as HTMLUListElement).dataset; + if (name && value) { + onMenuClick(value); + setSelectedItem({ name, value }); + } + toggleDropdown(); + }; + + return ( +
+
+ {innerWidth > DEVICE_MAX_WIDTH.mobile && {selectedItem.name}} + DEVICE_MAX_WIDTH.mobile ? dropDownIcon : sortIcon} + alt={'드롭다운 열기 아이콘'} + height={24} + width={24} + /> +
+ {isDropdownOpen && ( +
    + {orderByList.map((item) => ( +
  • + {item.name} +
    • + ))} +
+ )} +
+ ); +} + +export default OrderByDropdown; diff --git a/components/boards/ArticleManagement.module.scss b/components/boards/ArticleManagement.module.scss index 7a827acb8..00f680f73 100644 --- a/components/boards/ArticleManagement.module.scss +++ b/components/boards/ArticleManagement.module.scss @@ -25,72 +25,3 @@ } } } - -.dropdownWrapper { - display: flex; - justify-content: center; - align-items: center; - flex-shrink: 0; - - position: relative; - height: 42px; - width: 130px; - - font-size: 16px; - font-weight: 400; - line-height: 24px; - border-radius: 12px; - - color: var(--cool-gray-800); - background-color: var(--white); - border: 1px solid var(--cool-gray-200); - - cursor: pointer; - - @include underTablet { - width: 120px; - } - - @include mobile { - width: 42px; - border-radius: 12px; - } -} - -.dropdownTrigger { - display: flex; - justify-content: center; - align-items: center; - - & span { - width: 66px; - } -} - -.dropdown { - position: absolute; - display: flex; - flex-direction: column; - - width: 130px; - height: 84px; - top: 46px; - right: 0; - border-radius: 12px; - - background-color: var(--white); - border: 1px solid var(--cool-gray-200); - - & button { - width: 100%; - height: 100%; - - font-size: inherit; - font-weight: inherit; - line-height: inherit; - - &:not(:last-child) { - border-bottom: 1px solid var(--cool-gray-200); - } - } -} diff --git a/components/boards/ArticleManagement.tsx b/components/boards/ArticleManagement.tsx index 54c146d85..16177b8f3 100644 --- a/components/boards/ArticleManagement.tsx +++ b/components/boards/ArticleManagement.tsx @@ -1,57 +1,18 @@ import styles from './ArticleManagement.module.scss'; -import { DEVICE_MAX_WIDTH } from '@/constants/mediaQuerySize'; -import sortIcon from '@/public/images/market/sort-icon.png'; -import dropDownIcon from '@/public/images/market/order-dropdown.png'; -import { orderType } from '@/apis/getArticles'; -import useWindowSize from '@/hooks/useWindowSize'; -import Image from 'next/image'; - -const orderByObject = { - recent: '최신순', - like: '좋아요순', -}; - +import OrderByDropdown from '../@shared/OrderByDropdown'; interface ArticleManagementProps { onSearchSubmit: (event: React.FormEvent) => void; - onDropdownClick: () => void; - onOrderByClick: (event: React.MouseEvent) => void; - isDropdownOpen: boolean; - orderBy: orderType; + onOrderByClick: (orderBy: string) => void; } -function ArticleManagement({ - onSearchSubmit, - onDropdownClick: onIsOpenClick, - onOrderByClick, - isDropdownOpen, - orderBy, -}: ArticleManagementProps) { - const { innerWidth } = useWindowSize(); - - //TODO: 드롭다운 모듈화 +function ArticleManagement({ onSearchSubmit, onOrderByClick }: ArticleManagementProps) { return ( <>
-
-
- {innerWidth > DEVICE_MAX_WIDTH.mobile && {orderByObject[orderBy]}} - DEVICE_MAX_WIDTH.mobile ? dropDownIcon : sortIcon} - alt={'드롭다운 열기 아이콘'} - height={24} - width={24} - /> -
- {isDropdownOpen && ( -
- - -
- )} -
+
); diff --git a/components/boards/ArticleSection.tsx b/components/boards/ArticleSection.tsx index bd4cf5d36..5c88ad4b5 100644 --- a/components/boards/ArticleSection.tsx +++ b/components/boards/ArticleSection.tsx @@ -17,15 +17,10 @@ interface ArticleSectionProps { function ArticleSection({ initialArticleList }: ArticleSectionProps) { const [articleList, setArticleList] = useState(initialArticleList); // SSR로 받아온 게시글 리스트 초깃값 - const [orderBy, setOrderBy] = useState('recent'); // 게시글 정렬 기준 - const [isOpen, toggleDropdown] = useToggle(); - const handleOrderByClick = async (event: React.MouseEvent) => { - const { value } = (event.target as HTMLDivElement).dataset; - const { list } = await getArticles({ order: value as orderType }); // dataset에 있는 쿼리로 재정렬 요청 후 드롭다운 닫기 + const handleOrderByClick = async (orderBy: string) => { + const { list } = await getArticles({ order: orderBy as orderType }); // dataset에 있는 쿼리로 재정렬 요청 후 드롭다운 닫기 setArticleList(() => list); - setOrderBy(value as orderType); - toggleDropdown(); }; const handleSearchSubmit = async (event: React.FormEvent) => { @@ -35,10 +30,6 @@ function ArticleSection({ initialArticleList }: ArticleSectionProps) { setArticleList(() => list); }; - const handleDropdownClick = () => { - toggleDropdown(); - }; - return (
@@ -47,13 +38,7 @@ function ArticleSection({ initialArticleList }: ArticleSectionProps) {
- +
); From 0cf87c309c8162ff3298938165d01bda8f909ce7 Mon Sep 17 00:00:00 2001 From: Minchan <98478661+itscold96@users.noreply.github.com> Date: Thu, 15 Aug 2024 16:56:39 +0900 Subject: [PATCH 11/13] =?UTF-8?q?refector:=20useWindowSize=20=ED=9B=85?= =?UTF-8?q?=EC=9D=84=20=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - window 객체를 사용하는 모든 컴포넌트를 SSR로 부르지 못하고 동적 로딩하는 것은 불편하다고 판단하여 window 객체의 유무로 분기하는 것으로 변경 - 사용하지 않는 innerHeight 제거 --- components/@shared/HeaderLinkSection.tsx | 11 +++----- components/@shared/OrderByDropdown.tsx | 7 ++--- components/boards/ArticleSection.tsx | 7 ++--- components/boards/BestArticleList.tsx | 4 +-- components/boards/BestArticleSection.tsx | 6 +---- hooks/customs/useInnerWidth.ts | 24 +++++++++++++++++ hooks/{ => customs}/useToggle.ts | 0 hooks/useWindowSize.ts | 33 ------------------------ 8 files changed, 36 insertions(+), 56 deletions(-) create mode 100644 hooks/customs/useInnerWidth.ts rename hooks/{ => customs}/useToggle.ts (100%) delete mode 100644 hooks/useWindowSize.ts diff --git a/components/@shared/HeaderLinkSection.tsx b/components/@shared/HeaderLinkSection.tsx index fd9fdaf09..80d2f6394 100644 --- a/components/@shared/HeaderLinkSection.tsx +++ b/components/@shared/HeaderLinkSection.tsx @@ -2,20 +2,15 @@ import logoImg from '@/public/images/home/logoAndTypo.png'; import typoImg from '@/public/images/home/typo.png'; import Link from 'next/link'; import { useRouter } from 'next/router'; -import useWindowSize from '@/hooks/useWindowSize'; -import { - PATH_ADD_ITEM, - PATH_BOARDS, - PATH_HOME, - PATH_ITEMS, -} from '@/constants/paths'; +import { PATH_ADD_ITEM, PATH_BOARDS, PATH_HOME, PATH_ITEMS } from '@/constants/paths'; import classNames from 'classnames'; import styles from './HeaderLinkSection.module.scss'; import { DEVICE_MAX_WIDTH } from '@/constants/mediaQuerySize'; import Image from 'next/image'; +import useInnerWidth from '@/hooks/customs/useInnerWidth'; function HeaderLinkSection() { - const { innerWidth } = useWindowSize(); + const innerWidth = useInnerWidth(); const { pathname } = useRouter(); const needLinkHeaderPaths = [PATH_BOARDS, PATH_ITEMS, PATH_ADD_ITEM]; const isWiderMobileSize = innerWidth > DEVICE_MAX_WIDTH.mobile; diff --git a/components/@shared/OrderByDropdown.tsx b/components/@shared/OrderByDropdown.tsx index d2893fe2a..dcdecb973 100644 --- a/components/@shared/OrderByDropdown.tsx +++ b/components/@shared/OrderByDropdown.tsx @@ -3,9 +3,10 @@ import sortIcon from '@/public/images/market/sort-icon.png'; import dropDownIcon from '@/public/images/market/order-dropdown.png'; import { DEVICE_MAX_WIDTH } from '@/constants/mediaQuerySize'; import Image from 'next/image'; -import useWindowSize from '@/hooks/useWindowSize'; -import useToggle from '@/hooks/useToggle'; + +import useToggle from '@/hooks/customs/useToggle'; import { useState } from 'react'; +import useInnerWidth from '@/hooks/customs/useInnerWidth'; interface OrderByDropdownProps { onMenuClick: (orderBy: string) => void; @@ -17,7 +18,7 @@ const orderByList = [ ]; function OrderByDropdown({ onMenuClick }: OrderByDropdownProps) { - const { innerWidth } = useWindowSize(); + const innerWidth = useInnerWidth(); const [isDropdownOpen, toggleDropdown] = useToggle(); const [selectedItem, setSelectedItem] = useState(orderByList[0]); diff --git a/components/boards/ArticleSection.tsx b/components/boards/ArticleSection.tsx index 5c88ad4b5..291710786 100644 --- a/components/boards/ArticleSection.tsx +++ b/components/boards/ArticleSection.tsx @@ -1,15 +1,12 @@ import getArticles, { IArticle, orderType } from '@/apis/getArticles'; import ArticleList from './ArticleList'; import { useState } from 'react'; -import useToggle from '@/hooks/useToggle'; +import useToggle from '@/hooks/customs/useToggle'; import styles from './ArticleSection.module.scss'; import dynamic from 'next/dynamic'; import Link from 'next/link'; import Button from '../@shared/Button'; - -const ArticleManagement = dynamic(() => import('./ArticleManagement'), { - ssr: false, -}); +import ArticleManagement from './ArticleManagement'; interface ArticleSectionProps { initialArticleList: IArticle[]; diff --git a/components/boards/BestArticleList.tsx b/components/boards/BestArticleList.tsx index 12cb21c8e..aa4d70fb8 100644 --- a/components/boards/BestArticleList.tsx +++ b/components/boards/BestArticleList.tsx @@ -1,12 +1,12 @@ import useArticlesQuery from '@/hooks/queries/useArticlesQuery'; import BestArticle from './BestArticle'; import styles from './BestArticleList.module.scss'; -import useWindowSize from '@/hooks/useWindowSize'; import { DEVICE_MAX_WIDTH } from '@/constants/mediaQuerySize'; +import useInnerWidth from '@/hooks/customs/useInnerWidth'; function BestArticleList() { // TODO: 커스텀 훅으로 분리시키기 - const { innerWidth } = useWindowSize(); + const innerWidth = useInnerWidth(); const querySize = innerWidth > DEVICE_MAX_WIDTH.tablet // 태블릿 사이즈보다 크면 3개 ? 3 diff --git a/components/boards/BestArticleSection.tsx b/components/boards/BestArticleSection.tsx index ec61a65eb..d54745afe 100644 --- a/components/boards/BestArticleSection.tsx +++ b/components/boards/BestArticleSection.tsx @@ -1,10 +1,6 @@ import { Suspense } from 'react'; import styles from './BestArticleSection.module.scss'; -import dynamic from 'next/dynamic'; - -const BestArticleList = dynamic(() => import('../boards/BestArticleList'), { - ssr: false, -}); +import BestArticleList from './BestArticleList'; function BestArticleSection() { return ( diff --git a/hooks/customs/useInnerWidth.ts b/hooks/customs/useInnerWidth.ts new file mode 100644 index 000000000..e123c5053 --- /dev/null +++ b/hooks/customs/useInnerWidth.ts @@ -0,0 +1,24 @@ +import { DEVICE_MAX_WIDTH } from '@/constants/mediaQuerySize'; +import { useEffect, useState } from 'react'; + +const useInnerWidth = (): number => { + const [innerWidth, setInnerWidth] = useState(DEVICE_MAX_WIDTH.tablet); + + const handleResize = () => { + setInnerWidth(window.innerWidth); + }; + + useEffect(() => { + if (!window) return; + + window.addEventListener('resize', handleResize); + + return () => { + window.removeEventListener('resize', handleResize); + }; + }, []); + + return innerWidth; +}; + +export default useInnerWidth; diff --git a/hooks/useToggle.ts b/hooks/customs/useToggle.ts similarity index 100% rename from hooks/useToggle.ts rename to hooks/customs/useToggle.ts diff --git a/hooks/useWindowSize.ts b/hooks/useWindowSize.ts deleted file mode 100644 index d5b0a4cdc..000000000 --- a/hooks/useWindowSize.ts +++ /dev/null @@ -1,33 +0,0 @@ -import { useEffect, useState } from 'react'; - -// 반환값들은 나중에 필요하면 추가하면 됨, 가져다 쓸 때는 사용할 것만 가져가면 됨 -interface WindowSizeObject { - innerWidth: number; - innerHeight: number; -} - -const useWindowSize = (): WindowSizeObject => { - const [windowSize, setWindowSize] = useState({ - innerWidth: window.innerWidth, - innerHeight: window.innerHeight, - }); - - const handleResize = () => { - setWindowSize({ - innerWidth: window.innerWidth, - innerHeight: window.innerHeight, - }); - }; - - useEffect(() => { - window.addEventListener('resize', handleResize); - - return () => { - window.removeEventListener('resize', handleResize); - }; - }, []); - - return windowSize; -}; - -export default useWindowSize; From 5c219470bbd190c341c4bba5da507fdffc3a81ba Mon Sep 17 00:00:00 2001 From: Minchan <98478661+itscold96@users.noreply.github.com> Date: Thu, 15 Aug 2024 17:00:16 +0900 Subject: [PATCH 12/13] =?UTF-8?q?rename:=20props=EB=A1=9C=20=EC=9D=B4?= =?UTF-8?q?=EB=A6=84=EC=A7=80=EC=96=B4=EC=A0=B8=EC=9E=88=EB=8D=98=20?= =?UTF-8?q?=ED=95=A8=EC=88=98=EC=9D=98=20interface=EB=A5=BC=20params?= =?UTF-8?q?=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apis/getArticles.ts | 4 ++-- hooks/queries/useArticlesQuery.ts | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/apis/getArticles.ts b/apis/getArticles.ts index fd58f177a..f9f1d11e6 100644 --- a/apis/getArticles.ts +++ b/apis/getArticles.ts @@ -22,7 +22,7 @@ interface ArticlesResponse { totalCount: number; } -export interface GetArticlesProps { +export interface GetArticlesParams { page?: number; size?: number; order?: orderType; @@ -34,7 +34,7 @@ const getArticles = async ({ order = 'recent', size = 10, keyword = '', -}: GetArticlesProps): Promise => { +}: GetArticlesParams): Promise => { const params = new URLSearchParams({ page: page.toString(), pageSize: size.toString(), diff --git a/hooks/queries/useArticlesQuery.ts b/hooks/queries/useArticlesQuery.ts index 7adf94691..5931aba38 100644 --- a/hooks/queries/useArticlesQuery.ts +++ b/hooks/queries/useArticlesQuery.ts @@ -1,4 +1,4 @@ -import getArticles, { GetArticlesProps } from '@/apis/getArticles'; +import getArticles, { GetArticlesParams } from '@/apis/getArticles'; import { ARTICLES_QUERY_KEY } from '@/constants/queryKeys'; import { useSuspenseQuery } from '@tanstack/react-query'; @@ -9,7 +9,7 @@ const useArticlesQuery = ({ order = 'recent', size = INITIAL_PAGE_SIZE, keyword = '', -}: GetArticlesProps) => { +}: GetArticlesParams) => { return useSuspenseQuery({ queryKey: [ARTICLES_QUERY_KEY, page, order, size, keyword], queryFn: () => getArticles({ page, order, size, keyword }), From daa2055869cd55f081f37a0c2ce43d86ff872869 Mon Sep 17 00:00:00 2001 From: Minchan <98478661+itscold96@users.noreply.github.com> Date: Thu, 15 Aug 2024 17:05:43 +0900 Subject: [PATCH 13/13] =?UTF-8?q?refactor:=20=ED=99=94=EB=A9=B4=20?= =?UTF-8?q?=EB=84=88=EB=B9=84=EC=97=90=20=EB=94=B0=EB=A5=B8=20=EB=8F=99?= =?UTF-8?q?=EC=A0=81=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=82=AC=EC=9D=B4?= =?UTF-8?q?=EC=A6=88=EB=A5=BC=20=EB=B0=98=ED=99=98=ED=95=98=EB=8A=94=20?= =?UTF-8?q?=EC=BB=A4=EC=8A=A4=ED=85=80=20=ED=9B=85=20=EC=A0=9C=EC=9E=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/boards/BestArticleList.tsx | 15 +++------------ hooks/customs/useDynamicPageSize.ts | 22 ++++++++++++++++++++++ 2 files changed, 25 insertions(+), 12 deletions(-) create mode 100644 hooks/customs/useDynamicPageSize.ts diff --git a/components/boards/BestArticleList.tsx b/components/boards/BestArticleList.tsx index aa4d70fb8..831f9eab0 100644 --- a/components/boards/BestArticleList.tsx +++ b/components/boards/BestArticleList.tsx @@ -1,22 +1,13 @@ import useArticlesQuery from '@/hooks/queries/useArticlesQuery'; import BestArticle from './BestArticle'; import styles from './BestArticleList.module.scss'; -import { DEVICE_MAX_WIDTH } from '@/constants/mediaQuerySize'; -import useInnerWidth from '@/hooks/customs/useInnerWidth'; +import useDynamicPageSize from '@/hooks/customs/useDynamicPageSize'; function BestArticleList() { - // TODO: 커스텀 훅으로 분리시키기 - const innerWidth = useInnerWidth(); - const querySize = - innerWidth > DEVICE_MAX_WIDTH.tablet // 태블릿 사이즈보다 크면 3개 - ? 3 - : innerWidth > DEVICE_MAX_WIDTH.mobile // 태블릿 사이즈보다 작고 모바일 사이즈보다 크면 2개 - ? 2 - : 1; //그보다 작으면 1개 - + const pageSize = useDynamicPageSize({ desktop: 3, tablet: 2, mobile: 1 }); const { data: { list: BestArticleList }, - } = useArticlesQuery({ order: 'like', size: querySize }); + } = useArticlesQuery({ order: 'like', size: pageSize }); return ( <> diff --git a/hooks/customs/useDynamicPageSize.ts b/hooks/customs/useDynamicPageSize.ts new file mode 100644 index 000000000..482846ac0 --- /dev/null +++ b/hooks/customs/useDynamicPageSize.ts @@ -0,0 +1,22 @@ +import { DEVICE_MAX_WIDTH } from '@/constants/mediaQuerySize'; +import useInnerWidth from './useInnerWidth'; + +interface UseDynamicPageSizeParams { + desktop: number; + tablet: number; + mobile: number; +} + +const useDynamicPageSize = ({ desktop, tablet, mobile }: UseDynamicPageSizeParams) => { + const innerWidth = useInnerWidth(); + const querySize = + innerWidth > DEVICE_MAX_WIDTH.tablet // 태블릿 사이즈보다 크면 불러올 페이지 사이즈 + ? desktop + : innerWidth > DEVICE_MAX_WIDTH.mobile // 태블릿 사이즈보다 작고 모바일 사이즈보다 크면 불러올 페이지 사이즈 + ? tablet + : mobile; //모바일 사이즈에서 불러올 페이지 사이즈 + + return querySize; +}; + +export default useDynamicPageSize;