feat: 계좌 번호, 예금주 입력 폼 기초 작업 추가

Nexters · Feb 3, 2024 · 5a75b9a · 5a75b9a
1 parent 9705a98
commit 5a75b9a
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 6 deletions.
diff --git a/apps/admin/src/components/SettlementDialogContent/SettlementDialogContent.styles.ts b/apps/admin/src/components/SettlementDialogContent/SettlementDialogContent.styles.ts
@@ -75,6 +75,16 @@ const ButtonContainer = styled.div`
   }
 `;
 
+const InputLabel = styled.p`
+  margin-bottom: 8px;
+  ${({ theme }) => theme.typo.b3};
+  color: ${({ theme }) => theme.palette.grey.g90};
+`;
+
+const InputContainer = styled.div`
+  margin-bottom: 28px;
+`;
+
 export default {
   Container,
   ButtonContainer,
@@ -84,4 +94,6 @@ export default {
   BankName,
   BankIcon,
   BankItemButton,
+  InputLabel,
+  InputContainer,
 };
diff --git a/apps/admin/src/components/SettlementDialogContent/index.tsx b/apps/admin/src/components/SettlementDialogContent/index.tsx
@@ -1,9 +1,9 @@
-import { Button } from '@boolti/ui';
+import { Button, TextField } from '@boolti/ui';
 
 import { bankItems } from '~/constants/bankItems';
 
 import Styled from './SettlementDialogContent.styles';
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 
 const titles = [
   '은행을 선택해 주세요.',
@@ -13,7 +13,12 @@ const titles = [
 
 const SettlementDialogContent = () => {
   const [currentStepIndex, setCurrentStepIndex] = useState(0);
+  const formValue = useRef<{ orgName?: string; accountNumber?: string; accountHolder?: string }>(
+    {},
+  );
   const [selectedBank, setSelectedBank] = useState<string | null>(null);
+  const [accountNumber, setAccountNumber] = useState<string>('');
+  const [accountHolder, setAccountHolder] = useState<string>('');
   return (
     <Styled.Container>
       <Styled.Title>{titles[currentStepIndex]}</Styled.Title>
@@ -35,18 +40,59 @@ const SettlementDialogContent = () => {
           ))}
         </Styled.BankList>
       )}
+      {currentStepIndex === 1 && (
+        <>
+          <Styled.InputContainer>
+            <Styled.InputLabel>계좌번호</Styled.InputLabel>
+            <TextField
+              placeholder="계좌번호를 입력해 주세요"
+              size="small"
+              inputType="text"
+              value={accountNumber}
+              onChange={(event) => {
+                setAccountNumber(event.target.value);
+              }}
+            />
+          </Styled.InputContainer>
+          <Styled.InputContainer>
+            <Styled.InputLabel>계좌주</Styled.InputLabel>
+            <TextField
+              placeholder="계좌주 이름을 입력해 주세요"
+              size="small"
+              inputType="text"
+              value={accountHolder}
+              onChange={(event) => {
+                setAccountHolder(event.target.value);
+              }}
+            />
+          </Styled.InputContainer>
+        </>
+      )}
       <Styled.ButtonContainer>
         {currentStepIndex !== 0 && (
-          <Button type="button" colorTheme="line" size="bold">
+          <Button
+            type="button"
+            colorTheme="line"
+            size="bold"
+            onClick={() => {
+              setCurrentStepIndex((prev) => prev - 1);
+            }}
+          >
             이전으로
           </Button>
         )}
         <Button
           type="button"
           colorTheme="primary"
           size="bold"
-          disabled={!selectedBank}
+          disabled={
+            (currentStepIndex === 0 && !selectedBank) ||
+            (currentStepIndex === 1 && (accountNumber === '' || accountHolder === ''))
+          }
           onClick={() => {
+            if (currentStepIndex === 0 && selectedBank) {
+              formValue.current = { ...formValue.current, orgName: selectedBank };
+            }
             setCurrentStepIndex((prev) => prev + 1);
           }}
         >

diff --git a/apps/storybook/.storybook/preview.tsx b/apps/storybook/.storybook/preview.tsx
@@ -11,7 +11,7 @@ const preview: Preview = {
       dark: undefined,
       light: themes.normal,
       stylePreview: true,
-      current: 'light'
+      current: 'light',
     },
     actions: { argTypesRegex: '^on[A-Z].*' },
     controls: {
@@ -23,7 +23,6 @@ const preview: Preview = {
   },
 };
 
-
 export const decorators: Decorator[] = [
   (Story, context) => (
     <BooltiUIProvider>