From f1b75ccdacb84cbdf20d7bfb9d7ea08f5c971f67 Mon Sep 17 00:00:00 2001 From: na-reum Date: Sun, 10 Sep 2023 23:15:54 +0900 Subject: [PATCH 1/5] =?UTF-8?q?feat:=20boxSizing:borderBox=20=EC=9D=BC?= =?UTF-8?q?=EA=B4=84=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- styles/globals.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/styles/globals.css b/styles/globals.css index dcbe4c15..c93f9285 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -274,3 +274,7 @@ input[type='number'] { display: block; } } + +* { + box-sizing: border-box; +} \ No newline at end of file From c9ee5ecb6e99ba9f1d8103a2903aec3f1e11988c Mon Sep 17 00:00:00 2001 From: na-reum Date: Sun, 10 Sep 2023 23:41:45 +0900 Subject: [PATCH 2/5] =?UTF-8?q?fix:=20bottomSheet=20=EC=95=88=EC=97=B4?= =?UTF-8?q?=EB=A6=AC=EB=8A=94=20=EC=9D=B4=EC=8A=88=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/form/Select/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/form/Select/index.tsx b/src/components/form/Select/index.tsx index 9eefb1af..afd1d0b8 100644 --- a/src/components/form/Select/index.tsx +++ b/src/components/form/Select/index.tsx @@ -4,9 +4,9 @@ import BaseSelect from './BaseSelect/BaseSelect'; import { MultipleSelectProps, SelectProps } from './types/props'; function Select(props: SelectProps | MultipleSelectProps) { - const { isMobile } = useDisplay(); + const { isTablet } = useDisplay(); - return
{isMobile ? : }
; + return
{isTablet ? : }
; } export default Select; From b842b272f39639ed8f55618457a447e34fc67f31 Mon Sep 17 00:00:00 2001 From: na-reum Date: Sun, 10 Sep 2023 23:42:46 +0900 Subject: [PATCH 3/5] =?UTF-8?q?feat:=20bottomSheet=EC=97=90=20overlay?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Select/BottomSheetSelect/BottomSheetDialog.tsx | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/src/components/form/Select/BottomSheetSelect/BottomSheetDialog.tsx b/src/components/form/Select/BottomSheetSelect/BottomSheetDialog.tsx index ff0ac2cf..86c10f8f 100644 --- a/src/components/form/Select/BottomSheetSelect/BottomSheetDialog.tsx +++ b/src/components/form/Select/BottomSheetSelect/BottomSheetDialog.tsx @@ -2,6 +2,8 @@ import SelectBottomSheet from '@components/filter/MultiSelect/BottomSheet'; import { Dialog } from '@headlessui/react'; import { PropsWithChildren, ReactNode } from 'react'; import BottomSheetButton from './BottomSheetButton'; +import { styled } from 'stitches.config'; +import { Box } from '@components/box/Box'; interface BottomSheetDialogProps { isOpen: boolean; @@ -21,6 +23,7 @@ function BottomSheetDialog({ }: PropsWithChildren) { return ( + Date: Mon, 11 Sep 2023 00:20:06 +0900 Subject: [PATCH 4/5] =?UTF-8?q?feat:=20=EB=B3=B4=EC=A0=95=20=EC=9E=91?= =?UTF-8?q?=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/filter/MultiSelect/index.tsx | 13 ++++++------- .../Select/BottomSheetSelect/BottomSheetButton.tsx | 2 +- src/components/form/Select/Button/index.tsx | 2 +- src/components/form/TableOfContents/index.tsx | 2 +- .../page/meetingList/Card/ManagementButton.tsx | 4 ++-- .../page/meetingList/Filter/Search/index.tsx | 1 - 6 files changed, 11 insertions(+), 13 deletions(-) diff --git a/src/components/filter/MultiSelect/index.tsx b/src/components/filter/MultiSelect/index.tsx index f1a74858..dbb6feda 100644 --- a/src/components/filter/MultiSelect/index.tsx +++ b/src/components/filter/MultiSelect/index.tsx @@ -80,7 +80,7 @@ const SSelectWrapper = styled(Box, { }); const SSelectDisplay = styled(Flex, { - width: '111px', + width: '153px', border: '1px solid $black40', borderRadius: '14px', padding: '$18 $20', @@ -93,8 +93,8 @@ const SSelectDisplay = styled(Flex, { }, }, '@tablet': { - width: '74px', - height: '10px', + width: '96px', + height: '36px', padding: '$12 $10', borderRadius: '$8', }, @@ -174,8 +174,7 @@ const SSelectOverlay = styled(Box, { }, }, // TODO: 임시 삭제후, select에도 적용 논의 - // '@tablet': { - // backgroundColor: '$black60', - // opacity: 0.2, - // }, + '@tablet': { + backgroundColor: '$black80_trans', + }, }); diff --git a/src/components/form/Select/BottomSheetSelect/BottomSheetButton.tsx b/src/components/form/Select/BottomSheetSelect/BottomSheetButton.tsx index 9495d7b7..db957820 100644 --- a/src/components/form/Select/BottomSheetSelect/BottomSheetButton.tsx +++ b/src/components/form/Select/BottomSheetSelect/BottomSheetButton.tsx @@ -28,7 +28,7 @@ export default BottomSheetButton; const SButton = styled('button', { minWidth: '147px', - padding: '16px 20px 16px 16px', + padding: '16px 20px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', diff --git a/src/components/form/Select/Button/index.tsx b/src/components/form/Select/Button/index.tsx index 18e1f9d2..a4ab3c0c 100644 --- a/src/components/form/Select/Button/index.tsx +++ b/src/components/form/Select/Button/index.tsx @@ -36,7 +36,7 @@ const SButton = styled('button', { alignItems: 'center', justifyContent: 'space-between', gap: 8, - fontAg: '18_medium_100', + fontAg: '16_medium_100', color: '$white100', background: '$black60', borderRadius: 10, diff --git a/src/components/form/TableOfContents/index.tsx b/src/components/form/TableOfContents/index.tsx index e1f26804..ec4d180d 100644 --- a/src/components/form/TableOfContents/index.tsx +++ b/src/components/form/TableOfContents/index.tsx @@ -84,8 +84,8 @@ function TableOfContents({ label }: TableOfContentsProps) { export default TableOfContents; const SContainer = styled('div', { + width: '341px', padding: '50px 40px 60px', - width: '278px', height: 'fit-content', background: '$black80', border: '1px solid $black60', diff --git a/src/components/page/meetingList/Card/ManagementButton.tsx b/src/components/page/meetingList/Card/ManagementButton.tsx index 4caa1a8a..c84cb1bb 100644 --- a/src/components/page/meetingList/Card/ManagementButton.tsx +++ b/src/components/page/meetingList/Card/ManagementButton.tsx @@ -25,14 +25,14 @@ function ManagementButton({ id }: ManagementButtonProps) { export default ManagementButton; const SButton = styled(Flex, { - width: '102px', + width: '128px', padding: '12px 12px 13px 14px', borderRadius: '71px', fontAg: '16_bold_100', whiteSpace: 'nowrap', background: '$black80', '@tablet': { - width: '73px', + width: '91px', fontStyle: 'T6', padding: '6px 6px 6px 12px', }, diff --git a/src/components/page/meetingList/Filter/Search/index.tsx b/src/components/page/meetingList/Filter/Search/index.tsx index 4867e3be..90694cf0 100644 --- a/src/components/page/meetingList/Filter/Search/index.tsx +++ b/src/components/page/meetingList/Filter/Search/index.tsx @@ -29,7 +29,6 @@ function Search() { export default Search; const SSearchWrapper = styled(Flex, { - width: '198px', py: '$15', px: '$20', border: '1px solid $black40', From 32a78e445d1dc23237c932e0439d6a6059722c5b Mon Sep 17 00:00:00 2001 From: na-reum Date: Mon, 11 Sep 2023 00:26:10 +0900 Subject: [PATCH 5/5] =?UTF-8?q?feat:=20=ED=95=84=ED=84=B0=20tablet=20?= =?UTF-8?q?=EB=B6=80=ED=84=B0=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../page/meetingList/Filter/Modal/OpenButton.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/page/meetingList/Filter/Modal/OpenButton.tsx b/src/components/page/meetingList/Filter/Modal/OpenButton.tsx index dcda200a..7132e16e 100644 --- a/src/components/page/meetingList/Filter/Modal/OpenButton.tsx +++ b/src/components/page/meetingList/Filter/Modal/OpenButton.tsx @@ -15,10 +15,10 @@ import { import { parseBool } from '@utils/parseBool'; function FilterModalOpenButton() { - const { isMobile } = useDisplay(); + const { isTablet } = useDisplay(); const [isModalOpened, setIsModalOpened] = useSessionStorage('filter&sort', false); - const isModalOpen = useMemo(() => (isMobile ? false : isModalOpened), [isModalOpened, isMobile]); - const isBottomSheetOpen = useMemo(() => (!isMobile ? false : isModalOpened), [isModalOpened, isMobile]); + const isModalOpen = useMemo(() => (isTablet ? false : isModalOpened), [isModalOpened, isTablet]); + const isBottomSheetOpen = useMemo(() => (!isTablet ? false : isModalOpened), [isModalOpened, isTablet]); const { value: category } = useCategoryParams(); const { value: status } = useStatusParams(); @@ -40,7 +40,7 @@ function FilterModalOpenButton() { className="filter-button" > 필터 - + setIsModalOpened(false)} />