From 906c095624cb7313fc73b77bfd755a5af4bdd9fa Mon Sep 17 00:00:00 2001 From: bbung Date: Tue, 4 Jun 2024 19:04:12 +0900 Subject: [PATCH 01/14] =?UTF-8?q?STYLE:=20=F0=9F=8E=A8=20=20header=20?= =?UTF-8?q?=EC=98=81=EC=97=AD=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/page.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index 9bb4b25..9f9b2de 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,7 +1,13 @@ 'use client'; const Home = () => { - return
; + return ( +
+
+

내 북마크

+
+
+ ); }; export default Home; From 59f1fa4129c8f536a716ce18f65d1cb004856cd4 Mon Sep 17 00:00:00 2001 From: bbung Date: Tue, 4 Jun 2024 19:45:54 +0900 Subject: [PATCH 02/14] =?UTF-8?q?FEAT:=20=E2=9C=A8=20=20TabList=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80=20&?= =?UTF-8?q?=20useQueryString=20=ED=9B=85=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/page.tsx | 24 ++++++++++++++++++ src/components/TabList/index.tsx | 43 ++++++++++++++++++++++++++++++++ src/hooks/useQueyString.ts | 31 +++++++++++++++++++++++ 3 files changed, 98 insertions(+) create mode 100644 src/components/TabList/index.tsx create mode 100644 src/hooks/useQueyString.ts diff --git a/src/app/page.tsx b/src/app/page.tsx index 9f9b2de..fdd2d69 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,11 +1,35 @@ 'use client'; +import TabList from '@/components/TabList'; + +const TAB_LIST = [ + { + title: '레퍼런스', + value: '레퍼런스', + count: 8, + }, + { + title: '아이데이션', + value: '아이데이션', + count: 22, + }, + { + title: '기타', + value: '기타', + count: 5, + }, +]; + const Home = () => { return (

내 북마크

+ {/* filter area */} +
+ +
); }; diff --git a/src/components/TabList/index.tsx b/src/components/TabList/index.tsx new file mode 100644 index 0000000..bf15323 --- /dev/null +++ b/src/components/TabList/index.tsx @@ -0,0 +1,43 @@ +import useQueryString from '@/hooks/useQueyString'; +import { cn } from '@/lib/utils'; +import Divider from '../common/Divider'; + +interface ITabList { + tabs?: Array<{ title: string; value: string; count: number }>; +} + +const TabList = ({ tabs = [] }: ITabList) => { + const { queryParam, updateQueryString } = useQueryString(); + const queryTab = queryParam.get('tab') ?? '전체'; + + return ( + <> + + + + ); +}; + +export default TabList; diff --git a/src/hooks/useQueyString.ts b/src/hooks/useQueyString.ts new file mode 100644 index 0000000..a3102cb --- /dev/null +++ b/src/hooks/useQueyString.ts @@ -0,0 +1,31 @@ +import { usePathname, useRouter, useSearchParams } from 'next/navigation'; + +const useQueryString = () => { + const router = useRouter(); + const pathname = usePathname(); + const searchParams = useSearchParams(); + const query = new URLSearchParams(searchParams); + + const queryParam = (() => { + const map = new Map(); + + query.forEach((value, key) => { + map.set(key, value); + }); + + return map; + })(); + + const updateQueryString = (type: string, value: string) => { + query.delete(type, query.get(type) || ''); + + if (value) { + query.append(type, value); + } + router.replace(pathname + '?' + query.toString()); + }; + + return { queryParam, updateQueryString }; +}; + +export default useQueryString; From 36570689533f8aeca68b0184e2ba733cd68e2487 Mon Sep 17 00:00:00 2001 From: bbung Date: Tue, 4 Jun 2024 20:00:46 +0900 Subject: [PATCH 03/14] =?UTF-8?q?FEAT:=20=E2=9C=A8=20=20plus=5Fcircle=20?= =?UTF-8?q?=EC=95=84=EC=9D=B4=EC=BD=98=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/Icon/lib/index.ts | 1 + src/components/common/Icon/lib/plus_circle.svg | 6 ++++++ 2 files changed, 7 insertions(+) create mode 100644 src/components/common/Icon/lib/plus_circle.svg diff --git a/src/components/common/Icon/lib/index.ts b/src/components/common/Icon/lib/index.ts index 0628c65..26d5729 100644 --- a/src/components/common/Icon/lib/index.ts +++ b/src/components/common/Icon/lib/index.ts @@ -27,6 +27,7 @@ export { default as packit_logo } from './packit_logo.svg'; export { default as placeholder_s } from './placeholder.svg'; export { default as plus_square } from './plus-square.svg'; export { default as plus_s } from './plus.svg'; +export { default as plus_circle } from './plus_circle.svg'; export { default as searchSm_s } from './search_sm.svg'; export { default as setting } from './setting.svg'; export { default as user_s } from './user.svg'; diff --git a/src/components/common/Icon/lib/plus_circle.svg b/src/components/common/Icon/lib/plus_circle.svg new file mode 100644 index 0000000..5fc5048 --- /dev/null +++ b/src/components/common/Icon/lib/plus_circle.svg @@ -0,0 +1,6 @@ + + + + + + From e6fbd7e08167b664541706c75d3bea481aab34f5 Mon Sep 17 00:00:00 2001 From: bbung Date: Tue, 4 Jun 2024 20:01:17 +0900 Subject: [PATCH 04/14] =?UTF-8?q?STYLE:=20=F0=9F=8E=A8=20=20Button=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20text=20=ED=83=80?= =?UTF-8?q?=EC=9E=85=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/Button/ui/ButtonLabel.tsx | 10 ++++++++-- src/components/common/Button/ui/ButtonMain.tsx | 1 + 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/src/components/common/Button/ui/ButtonLabel.tsx b/src/components/common/Button/ui/ButtonLabel.tsx index ffa1ecf..6940828 100644 --- a/src/components/common/Button/ui/ButtonLabel.tsx +++ b/src/components/common/Button/ui/ButtonLabel.tsx @@ -5,13 +5,18 @@ import { useButtonState } from '../modules/ButtonStateContext'; export interface IButtonLabel extends PropsWithChildren { // TODO: 나중에 필요한 props 있으면 추가! + className?: string; } -const ButtonLabel = ({ children }: IButtonLabel) => { +const ButtonLabel = ({ children, className }: IButtonLabel) => { // TODO(훈석): isLoading 상태에 따라 스타일 변경 필요 const { size, type, isDisabled } = useButtonState(); - return ; + return ( + + ); }; export const buttonLabelVariants = cva(['cursor-pointer'], { @@ -27,6 +32,7 @@ export const buttonLabelVariants = cva(['cursor-pointer'], { outline: 'text-text-secondary', secondary: 'text-text-secondary', critical: 'text-text-on', + text: 'text-text-secondary', }, isDisabled: { true: 'cursor-default text-text-disabled', diff --git a/src/components/common/Button/ui/ButtonMain.tsx b/src/components/common/Button/ui/ButtonMain.tsx index bd243ee..80aa80d 100644 --- a/src/components/common/Button/ui/ButtonMain.tsx +++ b/src/components/common/Button/ui/ButtonMain.tsx @@ -51,6 +51,7 @@ export const buttonMainVariants = cva(['flex justify-center items-center gap-4'] 'bg-surface border-[1px] border-solid border-border hover:bg-action-secondary-hover active:bg-action-secondary-pressed', secondary: 'hover:bg-action-secondary-hover active:bg-action-secondary-pressed', critical: 'bg-critical hover:bg-critical-hover active:bg-critical-pressed', + text: 'bg-transparent', }, isDisabled: { true: '', From 5fd83fbda0dcd0b5357f8fbcdc142f0b0fe15e45 Mon Sep 17 00:00:00 2001 From: bbung Date: Tue, 4 Jun 2024 20:01:45 +0900 Subject: [PATCH 05/14] =?UTF-8?q?FEAT:=20=E2=9C=A8=20=20Tab=20=EC=B9=B4?= =?UTF-8?q?=ED=85=8C=EA=B3=A0=EB=A6=AC=EC=B6=94=EA=B0=80=20=EB=B2=84?= =?UTF-8?q?=ED=8A=BC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/page.tsx | 18 +++++++++++++++++- src/components/TabList/index.tsx | 4 +--- 2 files changed, 18 insertions(+), 4 deletions(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index fdd2d69..6d7588c 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,6 +1,9 @@ 'use client'; import TabList from '@/components/TabList'; +import { Button } from '@/components/common/Button'; +import Divider from '@/components/common/Divider'; +import Icon from '@/components/common/Icon'; const TAB_LIST = [ { @@ -28,7 +31,20 @@ const Home = () => { {/* filter area */}
- +
+ + +
+ +
); diff --git a/src/components/TabList/index.tsx b/src/components/TabList/index.tsx index bf15323..744333a 100644 --- a/src/components/TabList/index.tsx +++ b/src/components/TabList/index.tsx @@ -1,6 +1,5 @@ import useQueryString from '@/hooks/useQueyString'; import { cn } from '@/lib/utils'; -import Divider from '../common/Divider'; interface ITabList { tabs?: Array<{ title: string; value: string; count: number }>; @@ -12,7 +11,7 @@ const TabList = ({ tabs = [] }: ITabList) => { return ( <> -
    +
    • {
      • ))}
    - ); }; From 9a36a743cc00cf63963b359e4995fac18d07f626 Mon Sep 17 00:00:00 2001 From: bbung Date: Tue, 4 Jun 2024 20:11:00 +0900 Subject: [PATCH 06/14] =?UTF-8?q?FEAT:=20=E2=9C=A8=20=20check=5Fcircle=20?= =?UTF-8?q?=EC=95=84=EC=9D=B4=EC=BD=98=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/Icon/lib/check_circle.svg | 6 ++++++ src/components/common/Icon/lib/index.ts | 1 + 2 files changed, 7 insertions(+) create mode 100644 src/components/common/Icon/lib/check_circle.svg diff --git a/src/components/common/Icon/lib/check_circle.svg b/src/components/common/Icon/lib/check_circle.svg new file mode 100644 index 0000000..7394b84 --- /dev/null +++ b/src/components/common/Icon/lib/check_circle.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/components/common/Icon/lib/index.ts b/src/components/common/Icon/lib/index.ts index 26d5729..66c4adb 100644 --- a/src/components/common/Icon/lib/index.ts +++ b/src/components/common/Icon/lib/index.ts @@ -11,6 +11,7 @@ export { default as bell_s } from './bell_s.svg'; export { default as bookmark_add } from './bookmark_add.svg'; +export { default as check_circle } from './check_circle.svg'; export { default as checkIndeterminate_f } from './check_indeterminate.svg'; export { default as checkOff_f } from './check_off.svg'; export { default as checkOn_f } from './check_on.svg'; From a1ffa8b75e33e8cad19ae0848f53cadc19a636b0 Mon Sep 17 00:00:00 2001 From: bbung Date: Tue, 4 Jun 2024 20:45:20 +0900 Subject: [PATCH 07/14] =?UTF-8?q?FEAT:=20=E2=9C=A8=20=20=EC=B9=B4=ED=85=8C?= =?UTF-8?q?=EA=B3=A0=EB=A6=AC=20=EC=B6=94=EA=B0=80=20UI=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 --- src/app/page.tsx | 40 +--------- src/components/FilterBox/index.tsx | 115 +++++++++++++++++++++++++++++ 2 files changed, 117 insertions(+), 38 deletions(-) create mode 100644 src/components/FilterBox/index.tsx diff --git a/src/app/page.tsx b/src/app/page.tsx index 6d7588c..2f4f734 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,27 +1,6 @@ 'use client'; -import TabList from '@/components/TabList'; -import { Button } from '@/components/common/Button'; -import Divider from '@/components/common/Divider'; -import Icon from '@/components/common/Icon'; - -const TAB_LIST = [ - { - title: '레퍼런스', - value: '레퍼런스', - count: 8, - }, - { - title: '아이데이션', - value: '아이데이션', - count: 22, - }, - { - title: '기타', - value: '기타', - count: 5, - }, -]; +import FilterBox from '@/components/FilterBox'; const Home = () => { return ( @@ -30,22 +9,7 @@ const Home = () => {

    내 북마크

    {/* filter area */} -
    -
    - - -
    - -
    -
    + ); }; diff --git a/src/components/FilterBox/index.tsx b/src/components/FilterBox/index.tsx new file mode 100644 index 0000000..0609e72 --- /dev/null +++ b/src/components/FilterBox/index.tsx @@ -0,0 +1,115 @@ +import { cn } from '@/lib/utils'; +import { ChangeEvent, useState } from 'react'; +import TabList from '../TabList'; +import { Button } from '../common/Button'; +import Divider from '../common/Divider'; +import Icon from '../common/Icon'; +import { Textfield } from '../common/Textfield'; +import TextfieldInput from '../common/Textfield/ui/TextfieldInput'; +import TextfieldInputWrapper from '../common/Textfield/ui/TextfieldInputWrapper'; + +const TAB_LIST = [ + { + title: '레퍼런스', + value: '레퍼런스', + count: 8, + }, + { + title: '아이데이션', + value: '아이데이션', + count: 22, + }, + { + title: '기타', + value: '기타', + count: 5, + }, +]; + +const FilterBox = () => { + const [checked, setChecked] = useState(false); + const [isOpenCategory, setIsOpenCategory] = useState(false); + const [category, setCategory] = useState(''); + const [isError, setIsError] = useState(false); + + const handleChangeCategory = (e: ChangeEvent) => { + if (isError) { + setIsError(false); + } + setCategory(e.target.value); + }; + + /** + * TODO : + * - 카테고리 등록 API + * - 유효성 검증 message + */ + const handleAddCategory = () => { + if (!category) { + alert('카테고리를 입력해주세요.'); + } + if (category === '전체') { + setIsError(true); + } + // category API + }; + + return ( +
    +
    + +
    + + {isOpenCategory && ( +
    + + + + {isError && ( + + )} + + + +
    + )} +
    +
    + +
    + +
    + +
    + ); +}; + +export default FilterBox; From 914fe84584ed764497857e05d7e0eb92fa201cd0 Mon Sep 17 00:00:00 2001 From: bbung Date: Tue, 4 Jun 2024 20:50:21 +0900 Subject: [PATCH 08/14] =?UTF-8?q?FEAT:=20=E2=9C=A8=20=20grid,=20list=20?= =?UTF-8?q?=EC=95=84=EC=9D=B4=EC=BD=98=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/Icon/lib/grid.svg | 10 ++++++++++ src/components/common/Icon/lib/index.ts | 2 ++ src/components/common/Icon/lib/list.svg | 10 ++++++++++ 3 files changed, 22 insertions(+) create mode 100644 src/components/common/Icon/lib/grid.svg create mode 100644 src/components/common/Icon/lib/list.svg diff --git a/src/components/common/Icon/lib/grid.svg b/src/components/common/Icon/lib/grid.svg new file mode 100644 index 0000000..c05fae2 --- /dev/null +++ b/src/components/common/Icon/lib/grid.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/components/common/Icon/lib/index.ts b/src/components/common/Icon/lib/index.ts index 66c4adb..5d60c90 100644 --- a/src/components/common/Icon/lib/index.ts +++ b/src/components/common/Icon/lib/index.ts @@ -19,8 +19,10 @@ export { default as chevronLeftDouble } from './chevron-left-double.svg'; export { default as chevronRightDouble } from './chevron-right-double.svg'; export { default as chevronDown_s } from './chevron_down.svg'; export { default as google } from './google.svg'; +export { default as grid } from './grid.svg'; export { default as home04_s } from './home_04.svg'; export { default as link_03 } from './link_03.svg'; +export { default as list } from './list.svg'; export { default as logout } from './logout.svg'; export { default as mail } from './mail.svg'; export { default as packit_full_logo } from './packit_full_logo.svg'; diff --git a/src/components/common/Icon/lib/list.svg b/src/components/common/Icon/lib/list.svg new file mode 100644 index 0000000..4eb78b0 --- /dev/null +++ b/src/components/common/Icon/lib/list.svg @@ -0,0 +1,10 @@ + + + + + + + + + + From df952987b032aa0a00edf6034c6139d6db0f382c Mon Sep 17 00:00:00 2001 From: bbung Date: Tue, 4 Jun 2024 21:17:26 +0900 Subject: [PATCH 09/14] =?UTF-8?q?FEAT:=20=E2=9C=A8=20=20Filter=20=EC=98=81?= =?UTF-8?q?=EC=97=AD=20=EC=B6=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/FilterBox/index.tsx | 48 +++++++++++++++++++++++++----- 1 file changed, 40 insertions(+), 8 deletions(-) diff --git a/src/components/FilterBox/index.tsx b/src/components/FilterBox/index.tsx index 0609e72..f613123 100644 --- a/src/components/FilterBox/index.tsx +++ b/src/components/FilterBox/index.tsx @@ -27,10 +27,12 @@ const TAB_LIST = [ ]; const FilterBox = () => { - const [checked, setChecked] = useState(false); - const [isOpenCategory, setIsOpenCategory] = useState(false); - const [category, setCategory] = useState(''); - const [isError, setIsError] = useState(false); + const [checked, setChecked] = useState(false); // 종아요 항목 표시 + const [isOpenCategory, setIsOpenCategory] = useState(false); // 카테고리 모달 오픈 + const [category, setCategory] = useState(''); // 카테고리 텍스트 + const [isError, setIsError] = useState(false); // 카테고리 에러 + + const [viewType, setViewType] = useState('grid'); // list 타입 grid | list const handleChangeCategory = (e: ChangeEvent) => { if (isError) { @@ -42,7 +44,8 @@ const FilterBox = () => { /** * TODO : * - 카테고리 등록 API - * - 유효성 검증 message + * - 유효성 검증 case 추가 필요 + * - 카테고리 영역 밖 크릭 or esc 닫기 */ const handleAddCategory = () => { if (!category) { @@ -52,6 +55,8 @@ const FilterBox = () => { setIsError(true); } // category API + + alert('카테고리가 추가되었어요.'); }; return ( @@ -63,10 +68,10 @@ const FilterBox = () => { type='text' size='medium' onClick={() => setIsOpenCategory((prev) => !prev)} - className='p-0 pb-16' + className='p-0 pb-16 text-icon hover:text-secondary-hover' > - - 카테고리 추가 + + 카테고리 추가 {isOpenCategory && (
    @@ -106,6 +111,33 @@ const FilterBox = () => { 좋아요 항목만 표시 +
    + + 최신순 + + + + + + 편집 + +
    From 350fa5e251b92b7d65ab91998ceb8165f47658ff Mon Sep 17 00:00:00 2001 From: bbung Date: Tue, 4 Jun 2024 21:37:11 +0900 Subject: [PATCH 10/14] =?UTF-8?q?FEAT:=20=E2=9C=A8=20=20=EB=B6=81=EB=A7=88?= =?UTF-8?q?=ED=81=AC=20Empty=20=EC=BB=A8=ED=85=90=EC=B8=A0=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 --- src/app/page.tsx | 16 ++++++++++++++++ src/components/FilterBox/index.tsx | 1 + src/components/common/Icon/lib/bookmark_add.svg | 9 ++++++--- 3 files changed, 23 insertions(+), 3 deletions(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index 2f4f734..e5acd09 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,6 +1,8 @@ 'use client'; import FilterBox from '@/components/FilterBox'; +import { Button } from '@/components/common/Button'; +import Icon from '@/components/common/Icon'; const Home = () => { return ( @@ -10,6 +12,20 @@ const Home = () => { {/* filter area */} + {/* 컨텐츠 영역 */} +
    + {/* Empty Content */} +
    + +

    북마크를 추가해 볼까요?

    +

    + 북마크 파일을 끌어당기거나 북마크 추가 버튼을 눌러 등록해 보세요 +

    + +
    +
    ); }; diff --git a/src/components/FilterBox/index.tsx b/src/components/FilterBox/index.tsx index f613123..697c463 100644 --- a/src/components/FilterBox/index.tsx +++ b/src/components/FilterBox/index.tsx @@ -53,6 +53,7 @@ const FilterBox = () => { } if (category === '전체') { setIsError(true); + return; } // category API diff --git a/src/components/common/Icon/lib/bookmark_add.svg b/src/components/common/Icon/lib/bookmark_add.svg index aa6786c..bde014b 100644 --- a/src/components/common/Icon/lib/bookmark_add.svg +++ b/src/components/common/Icon/lib/bookmark_add.svg @@ -1,3 +1,6 @@ - - - \ No newline at end of file + + + + + + From f5a5ad5e77accf72df8c14f16722e36766aca859 Mon Sep 17 00:00:00 2001 From: bbung Date: Tue, 4 Jun 2024 21:50:33 +0900 Subject: [PATCH 11/14] =?UTF-8?q?REFACTOR:=20=E2=99=BB=EF=B8=8F=20=20filte?= =?UTF-8?q?r=20=EA=B0=92=20queryString=EC=9C=BC=EB=A1=9C=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/FilterBox/index.tsx | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/src/components/FilterBox/index.tsx b/src/components/FilterBox/index.tsx index 697c463..1f61e4d 100644 --- a/src/components/FilterBox/index.tsx +++ b/src/components/FilterBox/index.tsx @@ -1,3 +1,4 @@ +import useQueryString from '@/hooks/useQueyString'; import { cn } from '@/lib/utils'; import { ChangeEvent, useState } from 'react'; import TabList from '../TabList'; @@ -27,13 +28,15 @@ const TAB_LIST = [ ]; const FilterBox = () => { - const [checked, setChecked] = useState(false); // 종아요 항목 표시 + const { queryParam, updateQueryString } = useQueryString(); + + const isLikeChecked = queryParam.get('like-check') === 'true'; // 종아요 항목 표시 + const viewType = queryParam.get('view') ?? 'grid'; // list 타입 grid | list + const [isOpenCategory, setIsOpenCategory] = useState(false); // 카테고리 모달 오픈 const [category, setCategory] = useState(''); // 카테고리 텍스트 const [isError, setIsError] = useState(false); // 카테고리 에러 - const [viewType, setViewType] = useState('grid'); // list 타입 grid | list - const handleChangeCategory = (e: ChangeEvent) => { if (isError) { setIsError(false); @@ -101,14 +104,14 @@ const FilterBox = () => { @@ -116,7 +119,7 @@ const FilterBox = () => { 최신순 - - - - 편집 + + 편집 From 00a9f8fd717b59f30754ff079936f54643b67970 Mon Sep 17 00:00:00 2001 From: bbung Date: Thu, 6 Jun 2024 14:00:54 +0900 Subject: [PATCH 14/14] =?UTF-8?q?FIX:=20=F0=9F=90=9B=20=20useQueryString?= =?UTF-8?q?=20=EB=8F=99=EC=9E=91=ED=95=98=EC=A7=80=20=EC=95=8A=EB=8A=94=20?= =?UTF-8?q?=EC=9D=B4=EC=8A=88=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/page.tsx | 28 +++++++++------------------- src/components/ContentBox/index.tsx | 24 ++++++++++++++++++++++++ src/components/FilterBox/index.tsx | 2 ++ src/hooks/useQueyString.ts | 27 +++++++-------------------- 4 files changed, 42 insertions(+), 39 deletions(-) create mode 100644 src/components/ContentBox/index.tsx diff --git a/src/app/page.tsx b/src/app/page.tsx index e5acd09..4d88986 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,8 +1,6 @@ -'use client'; - +import ContentBox from '@/components/ContentBox'; import FilterBox from '@/components/FilterBox'; -import { Button } from '@/components/common/Button'; -import Icon from '@/components/common/Icon'; +import { Suspense } from 'react'; const Home = () => { return ( @@ -10,22 +8,14 @@ const Home = () => {

    내 북마크

    - {/* filter area */} - + {/* filter area + TODO : Suspense fallback Component + */} + + + {/* 컨텐츠 영역 */} -
    - {/* Empty Content */} -
    - -

    북마크를 추가해 볼까요?

    -

    - 북마크 파일을 끌어당기거나 북마크 추가 버튼을 눌러 등록해 보세요 -

    - -
    -
    + ); }; diff --git a/src/components/ContentBox/index.tsx b/src/components/ContentBox/index.tsx new file mode 100644 index 0000000..d956592 --- /dev/null +++ b/src/components/ContentBox/index.tsx @@ -0,0 +1,24 @@ +'use client'; + +import { Button } from '../common/Button'; +import Icon from '../common/Icon'; + +const ContentBox = () => { + return ( +
    + {/* Empty Content */} +
    + +

    북마크를 추가해 볼까요?

    +

    + 북마크 파일을 끌어당기거나 북마크 추가 버튼을 눌러 등록해 보세요 +

    + +
    +
    + ); +}; + +export default ContentBox; diff --git a/src/components/FilterBox/index.tsx b/src/components/FilterBox/index.tsx index 525ae58..9bd01a5 100644 --- a/src/components/FilterBox/index.tsx +++ b/src/components/FilterBox/index.tsx @@ -1,3 +1,5 @@ +'use client'; + import useQueryString from '@/hooks/useQueyString'; import { cn } from '@/lib/utils'; import { ChangeEvent, useState } from 'react'; diff --git a/src/hooks/useQueyString.ts b/src/hooks/useQueyString.ts index 4f6465d..27f7d1d 100644 --- a/src/hooks/useQueyString.ts +++ b/src/hooks/useQueyString.ts @@ -1,35 +1,22 @@ -import { usePathname, useRouter } from 'next/navigation'; -import { useEffect, useState } from 'react'; +import { usePathname, useRouter, useSearchParams } from 'next/navigation'; const useQueryString = () => { const router = useRouter(); const pathname = usePathname(); - - const [queryParam, setQueryParam] = useState(new Map()); - - // 쿼리는 객체로 변환 - useEffect(() => { - const searchParams = new URLSearchParams(window.location.search); - const paramMap = new Map( - Array.from(searchParams.entries()).map(([key, value]) => [key, value]), - ); - - setQueryParam(paramMap); - }, []); + const queryParam = useSearchParams(); + const searchParam = new URLSearchParams(queryParam); // 쿼리 업데이트 const updateQueryString = (type: string, value: string) => { - const searchParams = new URLSearchParams(window.location.search); - - if (searchParams.has(type)) { - searchParams.delete(type); + if (searchParam.has(type)) { + searchParam.delete(type); } if (value) { - searchParams.append(type, value); + searchParam.append(type, value); } - router.replace(`${pathname}?${searchParams.toString()}`); + router.replace(`${pathname}?${searchParam.toString()}`); }; return { queryParam, updateQueryString };