refactor: 카드추가페이지의 개선된 PinInput, BottomSheet 적

bytrustu · Apr 4, 2024 · 6889e87 · 6889e87
1 parent d282552
commit 6889e87
Show file tree

Hide file tree

Showing 9 changed files with 100 additions and 78 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,22 +1,34 @@
-import { CardProvider } from 'src/card/providers';
-import { CardAddPage, CardCompletePage, CardListPage, CardPageIndex } from '@/card';
-import { AppDisplay, Funnel } from '@/shared';
+import { CardAddPage, CardCompletePage, CardListPage, CardProvider, CardPageIndex } from '@/card';
+import { AppDisplay, Box, Button, Funnel, OverlayProvider, useModal } from '@/shared';
 
-const App = () => (
-  <AppDisplay.Root>
-    <CardProvider>
-      <Funnel.Root>
-        <Funnel.Step index={CardPageIndex.CardListPage}>
-          <CardListPage />
-        </Funnel.Step>
-        <Funnel.Step index={CardPageIndex.CardAddPage}>
-          <CardAddPage />
-        </Funnel.Step>
-        <Funnel.Step index={CardPageIndex.CardCompletePage}>
-          <CardCompletePage />
-        </Funnel.Step>
-      </Funnel.Root>
-    </CardProvider>
-  </AppDisplay.Root>
-);
+const App = () => {
+  const showModal = useModal();
+  const openCardApp = () => {
+    showModal(
+      <AppDisplay.Root>
+        <OverlayProvider>
+          <CardProvider>
+            <Funnel.Root>
+              <Funnel.Step index={CardPageIndex.CardListPage}>
+                <CardListPage />
+              </Funnel.Step>
+              <Funnel.Step index={CardPageIndex.CardAddPage}>
+                <CardAddPage />
+              </Funnel.Step>
+              <Funnel.Step index={CardPageIndex.CardCompletePage}>
+                <CardCompletePage />
+              </Funnel.Step>
+            </Funnel.Root>
+          </CardProvider>
+        </OverlayProvider>
+      </AppDisplay.Root>,
+      { closeOverlayClick: true },
+    );
+  };
+  return (
+    <Box width="100%" height="100vh">
+      <Button onClick={openCardApp}>열기</Button>
+    </Box>
+  );
+};
 export default App;
diff --git a/src/card/components/CardDisplay/CardDisplay.tsx b/src/card/components/CardDisplay/CardDisplay.tsx
@@ -26,7 +26,6 @@ export const CardDisplay = ({
       <VStack
         color={styleToken.color.gray600}
         backgroundColor={color}
-        boxShadow={`3px 3px 5px ${styleToken.color.shadow}`}
         borderRadius="5px"
         padding="10px 14px"
         spacing="0"

diff --git a/src/card/components/index.ts b/src/card/components/index.ts
@@ -1,2 +1 @@
 export * from './CardDisplay';
-export * from './CardSelectBottomSheet';
diff --git a/src/card/pages/CardAddPage.tsx b/src/card/pages/CardAddPage.tsx
@@ -1,9 +1,8 @@
-import { FocusEvent } from 'react';
+import { FocusEvent, useEffect } from 'react';
 import { CardBrand } from 'src/card/types';
 import ArrowLeft from '@/assets/arrow-left.svg';
 import {
   CardDisplay,
-  CardSelectBottomSheet,
   useCard,
   useSelectCardBrand,
   CARD_NUMBER_ID,
@@ -30,7 +29,6 @@ import {
   AppDisplay,
   Box,
   Button,
-  Circle,
   FormatInput,
   HStack,
   PinInput,
@@ -40,16 +38,17 @@ import {
   useFunnel,
   useInputRefs,
   useInputValues,
-  useToggle,
   VStack,
+  useModal,
+  CardBrandSelectBottomSheet,
+  Circle,
 } from '@/shared';
 
 export const CardAddPage = () => {
   const { goToPrev, goToNext } = useFunnel();
   const { card, setCard, isCardExist } = useCard();
-
   const selectCardBrand = useSelectCardBrand();
-  const bottomSheetToggle = useToggle(true);
+  const showModal = useModal();
 
   const [cardNumberRef, expirationDateRef, ownerNameRef, securityCodeRef, passwordRef] = useInputRefs(5);
 
@@ -84,9 +83,13 @@ export const CardAddPage = () => {
     password.valid,
   ].every(Boolean);
 
-  const selectCardBrandAndCloseBottomSheet = (newCardBrand: CardBrand) => {
-    selectCardBrand.select(newCardBrand);
-    bottomSheetToggle.close();
+  const showCardSelectBottomSheet = async () => {
+    const cardBrand = await showModal<CardBrand>(<CardBrandSelectBottomSheet values={CARD_BRANDS} />, {
+      closeOverlayClick: true,
+      placement: 'bottom',
+    });
+    selectCardBrand.select(cardBrand as CardBrand);
+    cardNumberRef?.current?.focus();
   };
 
   const handleFormatExpirationMonthBlur = (e: FocusEvent<HTMLInputElement>) => {
@@ -135,20 +138,12 @@ export const CardAddPage = () => {
     goToNext();
   };
 
+  useEffect(() => {
+    showCardSelectBottomSheet();
+  }, []);
+
   return (
     <>
-      <CardSelectBottomSheet opened={bottomSheetToggle.value} onOverlayClick={bottomSheetToggle.close}>
-        {CARD_BRANDS.map(({ label, color }) => (
-          <CardSelectButton
-            key={`card-select-${label}`}
-            color={color}
-            label={label}
-            onClick={() => {
-              selectCardBrandAndCloseBottomSheet?.({ label, color });
-            }}
-          />
-        ))}
-      </CardSelectBottomSheet>
       <AppDisplay.Header>
         <Button
           variant="ghost"
@@ -181,7 +176,7 @@ export const CardAddPage = () => {
               cardNumber={cardNumber.transformedValue}
               expirationDate={expirationDate.transformedValue}
               ownerName={ownerName.transformedValue}
-              onClick={bottomSheetToggle.open}
+              onClick={showCardSelectBottomSheet}
             />
           </Box>
 
@@ -305,11 +300,31 @@ export const CardAddPage = () => {
                   ref={securityCodeRef}
                 />
               </FormatInput.Control>
-              <Tooltip />
+              <Tooltip
+                message="보안코드 3자리"
+                direction="right"
+                icon={
+                  <Circle backgroundColor="unset" border={`1px solid ${styleToken.color.gray400}`} cursor="pointer">
+                    <Typography
+                      color={styleToken.color.gray400}
+                      variant="title"
+                      fontWeight={styleToken.fontWeight.bold}
+                    >
+                      ?
+                    </Typography>
+                  </Circle>
+                }
+              />
             </HStack>
           </FormatInput.Root>
 
-          <PinInput.Root id={CARD_PASSWORD_ID} mask value={password.value} onValueChange={password.update}>
+          <PinInput.Root
+            id={CARD_PASSWORD_ID}
+            mask
+            value={password.value}
+            enableVirtualKeyboard
+            onValueChange={password.update}
+          >
             <PinInput.Label>{PASSWORD_LABEL}</PinInput.Label>
             <PinInput.Control>
               <PinInput.Input index={0} fontSize="20px" ref={passwordRef} />
@@ -332,18 +347,3 @@ export const CardAddPage = () => {
     </>
   );
 };
-
-type CardSelectButtonProps = {
-  onClick: () => void;
-} & CardBrand;
-
-const CardSelectButton = ({ color, label, ...props }: CardSelectButtonProps) => (
-  <Button variant="ghost" backgroundColor={styleToken.color.white} width="100%" padding="0" {...props}>
-    <VStack width="100%" justifyContent="center" alignItems="center" spacing="10px">
-      <Circle backgroundColor={color} width="36px" height="36px" />
-      <Typography variant="caption" color={styleToken.color.black}>
-        {label}
-      </Typography>
-    </VStack>
-  </Button>
-);
diff --git a/src/main.tsx b/src/main.tsx
@@ -1,11 +1,13 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from '@/App';
-import { GlobalStyles } from '@/shared/styles';
+import { GlobalStyles, OverlayProvider } from '@/shared';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <GlobalStyles />
-    <App />
+    <OverlayProvider>
+      <App />
+    </OverlayProvider>
   </React.StrictMode>,
 );
diff --git a/src/shared/components/AppDisplay/AppDisplay.tsx b/src/shared/components/AppDisplay/AppDisplay.tsx
@@ -10,8 +10,8 @@ export const AppDisplay = ({ children }: PropsWithChildren) => (
     width="375px"
     minWidth="375px"
     height="700px"
-    borderRadius="15px"
     border={`1px solid ${styleToken.color.body}`}
+    zIndex={styleToken.zIndex.modal}
   >
     <AppDisplayLayout>{children}</AppDisplayLayout>
   </Box>

diff --git a/src/shared/components/Funnel/Funnel.stories.tsx b/src/shared/components/Funnel/Funnel.stories.tsx
@@ -1,7 +1,8 @@
 import { CardProvider } from 'src/card/providers';
 import { Meta, StoryObj } from '@storybook/react';
 import { Funnel } from './Funnel';
-import { CardCompletePage, CardAddPage, CardListPage } from '@/card';
+import { CardCompletePage, CardAddPage, CardListPage, CardPageIndex } from '@/card';
+import { AppDisplay, OverlayProvider } from '@/shared';
 
 const meta: Meta<typeof Funnel> = {
   title: 'Components/Funnel',
@@ -14,7 +15,9 @@ const meta: Meta<typeof Funnel> = {
   decorators: [
     (Story) => (
       <CardProvider>
-        <Story />
+        <OverlayProvider>
+          <Story />
+        </OverlayProvider>
       </CardProvider>
     ),
   ],
@@ -26,17 +29,23 @@ type Story = StoryObj<typeof Funnel>;
 
 export const Primary: Story = {
   render: () => (
-    <Funnel.Root startIndex={1}>
-      <Funnel.Step index={0}>
-        <CardListPage />
-      </Funnel.Step>
-      <Funnel.Step index={1}>
-        <CardAddPage />
-      </Funnel.Step>
-      <Funnel.Step index={2}>
-        <CardCompletePage />
-      </Funnel.Step>
-    </Funnel.Root>
+    <AppDisplay.Root>
+      <OverlayProvider>
+        <CardProvider>
+          <Funnel.Root>
+            <Funnel.Step index={CardPageIndex.CardListPage}>
+              <CardListPage />
+            </Funnel.Step>
+            <Funnel.Step index={CardPageIndex.CardAddPage}>
+              <CardAddPage />
+            </Funnel.Step>
+            <Funnel.Step index={CardPageIndex.CardCompletePage}>
+              <CardCompletePage />
+            </Funnel.Step>
+          </Funnel.Root>
+        </CardProvider>
+      </OverlayProvider>
+    </AppDisplay.Root>
   ),
 };
 

diff --git a/src/shared/components/index.ts b/src/shared/components/index.ts
@@ -14,3 +14,5 @@ export * from './Backdrop';
 export * from './Funnel';
 export * from './Input';
 export * from './Tooltip';
+export * from './BottomSheet';
+export * from './Overlay';
diff --git a/src/shared/index.ts b/src/shared/index.ts
@@ -2,4 +2,3 @@ export * from './components';
 export * from './styles';
 export * from './utils';
 export * from './types';
-export * from './hooks';