Refactor/#31: BottomSheet과 Alert, Confirm z-index 조정

emotion.d.ts

@@ -1,10 +1,11 @@
 import '@emotion/react';
-import { ColorType, FontType } from './src/styles/theme';
+import { ColorType, FontType, ZIndexType } from './src/styles/theme';
 
 declare module '@emotion/react' {
   export interface Theme {
     color: ColorType;
     font: FontType;
+    zIndex: ZIndexType;
   }
 }
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "concept-be-design-system",
   "description": "컨셉비 디자인 시스템",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",

src/App.tsx

@@ -1,200 +1,32 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
-import { Button, Spacer } from '.';
-import Child from './Child';
-import Checkbox from './components/Checkbox/Checkbox';
-import CheckboxContainer from './components/CheckboxContainer/CheckboxContainer';
-import Dropdown from './components/Dropdown/Dropdown';
-import RadioContainer from './components/RadioContainer/RadioContainer';
-import Tag from './components/Tag/Tag';
-import useCheckbox from './hooks/useCheckbox';
-import useDropdown from './hooks/useDropdown';
-import useRadio from './hooks/useRadio';
-
-interface DropdownProps {
-  see: string;
-  do: string;
-}
-
-interface FilterOption {
-  id: number;
-  name: string;
-  checked: boolean;
-}
-
-const regionOptions = [
-  { id: 1, name: '서울특별시' },
-  { id: 2, name: '부산광역시' },
-  { id: 3, name: '대구광역시' },
-  { id: 4, name: '인천광역시' },
-  { id: 5, name: '광주광역시' },
-  { id: 6, name: '울산광역시' },
-];
-
-const filterSubOptions = [
-  { id: 11, name: '사이드프로젝트', checked: false },
-  { id: 22, name: '창업', checked: false },
-  { id: 33, name: '크라우드펀딩', checked: false },
-  { id: 44, name: '공모전', checked: false },
-  { id: 55, name: '스터디', checked: false },
-];
-
-const filterSubOptions2 = [
-  { id: 1, name: '사이드프로젝트', checked: false },
-  { id: 2, name: '창업', checked: false },
-  { id: 3, name: '크라우드펀딩', checked: false },
-  { id: 4, name: '공모전', checked: false },
-  { id: 5, name: '스터디', checked: false },
-];
-
-const filterSubOptions3 = [
-  { id: 111, name: '사이드프로젝트', checked: false },
-  { id: 222, name: '창업', checked: false },
-  { id: 333, name: '크라우드펀딩', checked: false },
-  { id: 444, name: '공모전', checked: false },
-  { id: 555, name: '스터디', checked: false },
-];
-
-const filterOptions = [
-  { name: 'IT', id: 1, checked: false },
-  { name: '게임', id: 2, checked: false },
-  { name: '제품', id: 3, checked: false },
-  { name: '유튜브컨텐츠', id: 4, checked: false },
-  { name: '영화', id: 5, checked: false },
-  { name: '웹툰', id: 6, checked: false },
-];
-
-const filterOptions2 = [
-  { name: 'a', id: 1, checked: false },
-  { name: 'b', id: 2, checked: false },
-  { name: 'c', id: 3, checked: false },
-  { name: 'd', id: 4, checked: false },
-  { name: 'e', id: 5, checked: false },
-  { name: 'f', id: 6, checked: false },
-];
+import { Alert, BottomSheet, Button, Confirm } from '.';
 
 const App = () => {
-  const { checkboxValue, selectedCheckboxId, onChangeCheckbox } = useCheckbox<{
-    goal: FilterOption[];
-    name: FilterOption[];
-    oneMore: FilterOption[];
-  }>({
-    goal: filterSubOptions,
-    name: filterSubOptions2,
-    oneMore: filterSubOptions3,
-  });
-  const { radioValue, selectedRadioName, onChangeRadio } = useRadio<{
-    name: FilterOption[];
-    age: FilterOption[];
-  }>({
-    name: filterOptions,
-    age: filterOptions2,
-  });
-  const { dropdownValue, onResetDropdown, onClickDropdown } =
-    useDropdown<DropdownProps>({
-      see: '',
-      do: '',
-    });
-  const [tags, setTags] = useState<string[]>(['a', 'b', 'c']);
-
-  useEffect(() => {
-    if (dropdownValue.do !== '') {
-      console.log(dropdownValue.see, dropdownValue.do);
-      onResetDropdown('see');
-      onResetDropdown('do');
-    }
-  }, [dropdownValue, onResetDropdown]);
-
-  console.log(selectedCheckboxId, selectedRadioName);
+  const [isBottomSheetOpen, setIsBottomSheetOpen] = useState(false);
+  const [isAlertOpen, setIsAlertOpen] = useState(false);
+  const [isConfirmOpen, setIsConfirmOpen] = useState(false);
 
   return (
     <>
-      {tags.map((tag) => (
-        <Tag
-          key={tag}
-          onDelete={(name) => setTags(tags.filter((tag) => tag !== name))}
-        >
-          {tag}
-        </Tag>
-      ))}
-      <Spacer size={50} />
-      <Child />
-      <Dropdown
-        selectedValue={dropdownValue.see}
-        initialValue="시/도/군"
-        disabled={false}
-      >
-        {regionOptions.map(({ id, name }) => (
-          <Dropdown.Item
-            key={id}
-            value={name}
-            onClick={(value) => {
-              onClickDropdown(value, 'see');
-            }}
-          >
-            {name}
-          </Dropdown.Item>
-        ))}
-      </Dropdown>
+      <Button onClick={() => setIsBottomSheetOpen(true)}>Bottom Sheet</Button>
 
-      <Dropdown
-        selectedValue={dropdownValue.do}
-        initialValue="시/도/군"
-        disabled={false}
+      <BottomSheet
+        isOpen={isBottomSheetOpen}
+        onClose={() => setIsBottomSheetOpen(false)}
       >
-        {regionOptions.map(({ id, name }) => (
-          <Dropdown.Item
-            key={id}
-            value={name}
-            onClick={(value) => {
-              onClickDropdown(value, 'do');
-            }}
-          >
-            {name}
-          </Dropdown.Item>
-        ))}
-      </Dropdown>
-
-      {['A', 'B', 'C'].map((item) => (
-        <Checkbox
-          key={item}
-          width={50}
-          value={item}
-          checked={Math.random() > 0.5}
-          onChange={(e) => {
-            console.log(e);
-          }}
-        />
-      ))}
-
-      <Button>버튼 테스트</Button>
-
-      <CheckboxContainer
-        label="가입 목적"
-        checkboxKey="goal"
-        options={checkboxValue.goal}
-        onChange={onChangeCheckbox}
-      />
-      <CheckboxContainer
-        label="이름 선택"
-        checkboxKey="name"
-        options={checkboxValue.name}
-        onChange={onChangeCheckbox}
-        maxCount={3}
-        required
-      />
-      <RadioContainer
-        label="name"
-        radioKey="name"
-        options={radioValue.name}
-        onChange={onChangeRadio}
-        required
+        <Button onClick={() => setIsAlertOpen(true)}>Alert</Button>
+        <Button onClick={() => setIsConfirmOpen(true)}>Confirm</Button>
+      </BottomSheet>
+      <Alert
+        isOpen={isAlertOpen}
+        onClose={() => setIsAlertOpen(false)}
+        content="alert"
       />
-      <RadioContainer
-        label="age"
-        radioKey="age"
-        options={radioValue.age}
-        onChange={onChangeRadio}
+      <Confirm
+        isOpen={isConfirmOpen}
+        onClose={() => setIsConfirmOpen(false)}
+        content="confirm"
       />
     </>
   );

src/components/Alert/Alert.tsx

@@ -48,7 +48,7 @@ const Wrapper = styled.div`
   height: 100%;
   width: 100%;
   inset: 0;
-  z-index: 10;
+  z-index: ${({ theme }) => theme.zIndex.alertBackdrop};
 `;
 
 const ModalWrapper = styled.div`
@@ -65,7 +65,7 @@ const ModalWrapper = styled.div`
     rgba(0, 0, 0, 0.12) 0px 9px 46px 8px;
   background-color: #fff;
   color: inherit;
-  z-index: 11;
+  z-index: ${({ theme }) => theme.zIndex.alert};
   white-space: pre-wrap;
 `;
 

src/components/BottomSheet/BottomSheet.tsx

@@ -42,7 +42,7 @@ const BottomSheetWrapper = styled.div<{ isOpen: boolean }>`
   box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.2);
   border-radius: 14px 14px 0 0;
   overflow: auto;
-  z-index: 9999;
+  z-index: ${({ theme }) => theme.zIndex.modal};
   transition: bottom 0.3s ease-in-out;
 `;
 
@@ -53,7 +53,7 @@ const Overlay = styled.div`
   display: flex;
   opacity: 1;
   inset: 0;
-  z-index: 9998;
+  z-index: ${({ theme }) => theme.zIndex.modalBackdrop};
 `;
 
 const Content = styled.div`

src/components/Confirm/Confirm.tsx

@@ -69,7 +69,7 @@ const Wrapper = styled.div`
   height: 100%;
   width: 100%;
   inset: 0;
-  z-index: 10;
+  z-index: ${({ theme }) => theme.zIndex.alertBackdrop};
 `;
 
 const ModalWrapper = styled.div`
@@ -86,7 +86,7 @@ const ModalWrapper = styled.div`
     rgba(0, 0, 0, 0.12) 0px 9px 46px 8px;
   background-color: #fff;
   color: inherit;
-  z-index: 11;
+  z-index: ${({ theme }) => theme.zIndex.alert};
   white-space: pre-wrap;
   word-break: keep-all;
 `;

src/components/Navigation/NavigationItem.tsx

@@ -39,7 +39,6 @@ const Wrapper = styled.div<{ position: PositionType }>`
           justify-content: center;
           align-items: center;
           cursor: pointer;
-          z-index: 99;
         `
       : css`
           flex: 1 1 auto;

src/components/Spinner/Spinner.tsx

@@ -20,6 +20,7 @@ const Position = styled.div`
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
+  z-index: ${({ theme }) => theme.zIndex.spinner};
 `;
 
 const SpinnerContainer = styled.div`
@@ -50,5 +51,5 @@ const Backdrop = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: 9;
+  z-index: ${({ theme }) => theme.zIndex.spinnerBackdrop};
 `;

src/styles/theme.ts

@@ -89,14 +89,26 @@ const font = {
   },
 } as const;
 
+const zIndex = {
+  navigation: 1000,
+  modalBackdrop: 1010,
+  modal: 1020,
+  alertBackdrop: 1030,
+  alert: 1040,
+  spinnerBackdrop: 1050,
+  spinner: 1060,
+} as const;
+
 export type ColorType = typeof color;
 export type FontType = typeof font;
+export type ZIndexType = typeof zIndex;
 export type ColorKeyType = keyof typeof color;
 export type FontKeyType = keyof typeof font;
 
 const theme = {
   color,
   font,
+  zIndex,
 } as const;
 
 export default theme;