boxSizing:border-box 일괄 적용 작업 (#389)

boxSizing:border-box 일괄 적용 작업
sopt-makers · Sep 12, 2023 · 08fddf6 · 08fddf6
2 parents 210337b + 32a78e4
commit 08fddf6
Show file tree

Hide file tree

Showing 10 changed files with 35 additions and 19 deletions.
diff --git 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
@@ -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/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<BottomSheetDialogProps>) {
   return (
     <Dialog open={isOpen} onClose={handleClose}>
+      <SModalBackground onClick={handleClose} />
       <SelectBottomSheet
         label={label}
         isVisible={isOpen}
@@ -36,3 +39,14 @@ function BottomSheetDialog({
 
 export default BottomSheetDialog;
 BottomSheetDialog.Button = BottomSheetButton;
+
+const SModalBackground = styled(Box, {
+  position: 'fixed',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  zIndex: '$2',
+  width: '100%',
+  height: '100%',
+  backgroundColor: '$black80_trans',
+});
diff --git 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/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 <div>{isMobile ? <BottomSheetSelect {...props} /> : <BaseSelect {...props} />}</div>;
+  return <div>{isTablet ? <BottomSheetSelect {...props} /> : <BaseSelect {...props} />}</div>;
 }
 
 export default Select;
diff --git 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
@@ -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/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"
       >
         <SLabel>필터</SLabel>
-        <EqualizerIcon width={isMobile ? 16 : 24} height={isMobile ? 16 : 24} />
+        <EqualizerIcon width={isTablet ? 16 : 24} height={isTablet ? 16 : 24} />
       </SSelectModalOpenButton>
 
       <FilterSelectModal isModalOpened={isModalOpen} handleModalClose={() => setIsModalOpened(false)} />

diff --git 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',

diff --git a/styles/globals.css b/styles/globals.css
@@ -274,3 +274,7 @@ input[type='number'] {
     display: block;
   }
 }
+
+* {
+  box-sizing: border-box;
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -274,3 +274,7 @@ input[type='number'] { @@
         display: block;
       }
     }
+    * {
+      box-sizing: border-box;
+    }