woowacourse · 365kim · Apr 29, 2024 · Apr 25, 2024 · Apr 25, 2024 · Apr 25, 2024
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -1,20 +1,21 @@
-import type { StorybookConfig } from "@storybook/react-vite";
+import type { StorybookConfig } from '@storybook/react-vite';
 
 const config: StorybookConfig = {
-  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
-    "@storybook/addon-onboarding",
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@chromatic-com/storybook",
-    "@storybook/addon-interactions",
+    '@storybook/addon-onboarding',
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@chromatic-com/storybook',
+    '@storybook/addon-interactions',
+    'storybook-addon-remix-react-router',
   ],
   framework: {
-    name: "@storybook/react-vite",
+    name: '@storybook/react-vite',
     options: {},
   },
   docs: {
-    autodocs: "tag",
+    autodocs: 'tag',
   },
 };
 export default config;
diff --git a/README-STEP2.md b/README-STEP2.md
@@ -0,0 +1,25 @@
+# 동적 입력 UI 구현
+
+사용자는 카드 번호를 입력할 때 동적으로 제공되는 입력 UI를 통해 집중적으로 하나의 입력 필드에만 집중할 수 있다.
+
+# 카드사 선택
+
+사용자는 카드사를 선택할 수 있고, 카드사에 따라 미리보기 카드의 색상을 변경한다.
+
+# CVC 번호
+
+CVC 번호를 입력할 때는 미리보기 카드의 뒷면을 시각적으로 보여준다.
+
+입력은 숫자만 가능하며, 유효하지 않은 값을 입력 시 피드백을 제공한다.
+
+# 폼 제출 및 상태 관리
+
+모든 카드 정보가 정확하게 입력되고 검증되었을 때 확인 버튼이 활성화된다.
+
+사용자가 입력한 정보 중 하나라도 지우거나 수정하여 유효하지 않게 되면, 확인 버튼은 보이지 않는다.
+
+# 카드 등록 완료 및 네비게이션
+
+확인 버튼을 클릭하면 사용자는 카드 등록 완료 페이지로 이동한다.
+
+카드 등록 완료 페이지에서는 카드 등록이 성공적으로 완료되었다는 메시지와 함께, 다시 카드 등록 페이지로 돌아갈 수 있는 확인 버튼을 제공한다.
diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
-<!DOCTYPE html>
-<html lang="en">
+<!doctype html>
+<html lang="ko">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />

diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
   "dependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.23.0",
     "styled-components": "^6.1.8",
     "styled-reset": "^4.5.2"
   },
@@ -44,6 +45,7 @@
     "eslint-plugin-storybook": "^0.8.0",
     "prettier": "^3.2.5",
     "storybook": "^8.0.8",
+    "storybook-addon-remix-react-router": "^3.0.0",
     "typescript": "^5.2.2",
     "vite": "^5.2.0"
   }

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,161 +1,11 @@
 import GlobalStyles from './GlobalStyles';
-import InputInfo from './components/InputSection';
-import Input from './components/composables/Input';
-import CreditCard from './components/CreditCard';
-import useInput from './hooks/useInput';
-import Label from './components/composables/Label';
-import validate from './utils/validate';
-import { CARD_NUMBER, EXPIRATION_PERIOD, OWNER_NAME } from './constants/cardSection';
-import * as React from 'react';
-import useCardNumber, { InitialCardNumberState } from './hooks/useCardNumber';
-import * as S from './app.style';
-
-const initialCardNumberState: InitialCardNumberState = {
-  value: '',
-  isError: false,
-};
-
-const CARD_NUMBER_LENGTH = 4;
-
-const MONTH = Object.freeze({
-  MIN: 1,
-  MAX: 12,
-});
-
-const MAX_LENGTH = Object.freeze({
-  CARD_NUMBERS: 4,
-  MONTH: 2,
-  YEAR: 2,
-  NAME: 30,
-});
-
-function App() {
-  const { cardNumbers, cardNumbersChangeHandler, cardBrand } = useCardNumber(
-    Array.from({ length: CARD_NUMBER_LENGTH }, () => initialCardNumberState),
-  );
-
-  const {
-    inputValue: month,
-    onChange: monthChangeHandler,
-    error: monthError,
-  } = useInput([
-    {
-      fn: (value) =>
-        validate.isNumberInRange({ min: MONTH.MIN, max: MONTH.MAX, compareNumber: Number(value) }),
-    },
-    { fn: (value) => validate.isValidDigit(value) },
-  ]);
-
-  const {
-    inputValue: year,
-    onChange: yearChangeHandler,
-    error: yearError,
-  } = useInput([{ fn: (value) => validate.isValidDigit(value) }]);
-
-  const {
-    inputValue: name,
-    onChange: nameChangeHandler,
-    error: nameError,
-  } = useInput([{ fn: (value) => validate.isEnglish(value) }]);
+import { PropsWithChildren } from 'react';
 
+function App({ children }: PropsWithChildren) {
   return (
     <>
       <GlobalStyles />
-      <S.Container>
-        <CreditCard
-          cardNumbers={cardNumbers}
-          month={month}
-          year={year}
-          name={name}
-          cardBrand={cardBrand}
-        />
-        <S.CardInfoContainer>
-          <S.Wrapper>
-            <InputInfo
-              title={CARD_NUMBER.title}
-              description={CARD_NUMBER.description}
-              inputTitle={CARD_NUMBER.inputTitle}
-            >
-              {cardNumbers.map((cardNumber, index) => {
-                const uniqueId = 'cardNumbers' + index;
-                return (
-                  <React.Fragment key={uniqueId}>
-                    <Label htmlFor={uniqueId} />
-                    <Input
-                      id={uniqueId}
-                      placeholder="1234"
-                      type="text"
-                      maxLength={MAX_LENGTH.CARD_NUMBERS}
-                      value={cardNumber.value}
-                      onChange={(e) => cardNumbersChangeHandler(e, index)}
-                      isError={cardNumber.isError}
-                    />
-                  </React.Fragment>
-                );
-              })}
-            </InputInfo>
-            <S.ErrorContainer>
-              <S.ErrorMessageSpan>
-                {cardNumbers.some((cardNumber) => cardNumber.isError) && CARD_NUMBER.errorMessage}
-              </S.ErrorMessageSpan>
-            </S.ErrorContainer>
-          </S.Wrapper>
-
-          <S.Wrapper>
-            <InputInfo
-              title={EXPIRATION_PERIOD.title}
-              description={EXPIRATION_PERIOD.description}
-              inputTitle={EXPIRATION_PERIOD.inputTitle}
-            >
-              <Label htmlFor={'month'} />
-              <Input
-                id={'month'}
-                placeholder={'MM'}
-                type="text"
-                value={month}
-                maxLength={MAX_LENGTH.MONTH}
-                onChange={monthChangeHandler}
-                isError={monthError}
-              />
-              <Label htmlFor={'year'} />
-              <Input
-                id={'year'}
-                placeholder={'YY'}
-                type="text"
-                maxLength={MAX_LENGTH.YEAR}
-                value={year}
-                onChange={yearChangeHandler}
-                isError={yearError}
-              />
-            </InputInfo>
-            <S.ErrorContainer>
-              <S.ErrorMessageSpan>
-                {monthError && yearError ? EXPIRATION_PERIOD.monthErrorMessage : ''}
-                {!monthError && yearError ? EXPIRATION_PERIOD.yearErrorMessage : ''}
-                {monthError && !yearError ? EXPIRATION_PERIOD.monthErrorMessage : ''}
-              </S.ErrorMessageSpan>
-            </S.ErrorContainer>
-          </S.Wrapper>
-
-          <S.Wrapper>
-            <InputInfo title={OWNER_NAME.title} inputTitle={OWNER_NAME.inputTitle}>
-              <Label htmlFor={'name'} />
-              <Input
-                id="name"
-                maxLength={MAX_LENGTH.NAME}
-                onChange={nameChangeHandler}
-                isError={nameError}
-                placeholder="JOHN DOE"
-                type="text"
-                value={name}
-              />
-            </InputInfo>
-            <S.ErrorContainer>
-              <S.ErrorMessageSpan>{nameError && OWNER_NAME.errorMessage}</S.ErrorMessageSpan>
-            </S.ErrorContainer>
-          </S.Wrapper>
-        </S.CardInfoContainer>
-      </S.Container>
+      {children}
     </>
   );
 }

diff --git a/src/GlobalStyles.tsx b/src/GlobalStyles.tsx
@@ -4,6 +4,10 @@ import reset from 'styled-reset';
 const GlobalStyles = createGlobalStyle`
   ${reset}
 
+  select option[value=""][disabled] {
+	display: none;
+}
+
   a{
     text-decoration: none;
     color: inherit;
@@ -14,10 +18,6 @@ const GlobalStyles = createGlobalStyle`
   }
 
   #root {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
     width: 100vw;
     height: auto;
     min-height: 100vh;

diff --git a/src/app.style.ts b/src/app.style.ts
@@ -4,7 +4,17 @@ export const Container = styled.div`
   padding: 20px 30px;
   width: 376px;
   height: 680px;
-  background-color: beige;
+  overflow: scroll;
+  position: relative;
+`;
+
+export const ContentCard = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  min-height: 100vh;
 `;
 
 export const CardInfoContainer = styled.div`
@@ -30,3 +40,13 @@ export const Wrapper = styled.div`
   flex-direction: column;
   gap: 8px;
 `;
+
+export const ButtonContainer = styled.div`
+  position: fixed;
+  bottom: 0px;
+  right: 0;
+  left: 0;
+  width: 376px;
+  margin: 0px auto;
+  height: 52px;
+`;
diff --git a/src/assets/images/complete.png b/src/assets/images/complete.png
diff --git a/src/components/CreditCard.tsx → src/components/cards/CreditCard.tsx b/src/components/CreditCard.tsx → src/components/cards/CreditCard.tsx
@@ -1,6 +1,7 @@
-import { InitialCardNumberState } from '../hooks/useCardNumber';
-import MasterCardImage from '../assets/images/mastercard.png';
-import VisaCardImage from '../assets/images/visa.png';
+import { InitialCardNumberState } from '@/types';
+import MasterCardImage from '../../assets/images/mastercard.png';
+import VisaCardImage from '../../assets/images/visa.png';
+import * as C from './index.style';
 import * as S from './creditCard.style';
 
 type CreditCardProps = {
@@ -9,24 +10,32 @@ type CreditCardProps = {
   year: string;
   name: string;
   cardBrand: 'none' | 'Visa' | 'MasterCard';
+  backgroundColor: string;
 };
 
 const DATE_SEPARATOR = '/';
 
-export default function CreditCard({ cardNumbers, month, year, name, cardBrand }: CreditCardProps) {
+export default function CreditCard({
+  cardNumbers,
+  month,
+  year,
+  name,
+  cardBrand,
+  backgroundColor,
+}: CreditCardProps) {
   const cardBrandImageSrc =
     cardBrand === 'MasterCard' ? MasterCardImage : cardBrand === 'Visa' ? VisaCardImage : '';
 
   return (
-    <S.Container>
-      <S.CardContainer>
+    <C.Container>
+      <C.CardContainer $backgroundColor={backgroundColor} $padding={'8px 12px'}>
         <S.CardHeader>
           <S.CardHeaderContentWrapper>
             <S.IcChip />
           </S.CardHeaderContentWrapper>
           <S.CardHeaderContentWrapper>
             {cardBrandImageSrc ? (
-              <S.CardBrand src={cardBrandImageSrc} alt={'cardBrandImage'} />
+              <S.CardBrand src={cardBrandImageSrc} alt={`${cardBrand} 카드`} />
             ) : null}
           </S.CardHeaderContentWrapper>
         </S.CardHeader>
@@ -52,7 +61,7 @@ export default function CreditCard({ cardNumbers, month, year, name, cardBrand }
           <S.Text>{month + `${month || year ? DATE_SEPARATOR : ''}` + year}</S.Text>
           <S.Text>{name}</S.Text>
         </S.CardInfoWrapper>
-      </S.CardContainer>
-    </S.Container>
+      </C.CardContainer>
+    </C.Container>
   );
 }
diff --git a/src/components/cards/CvcCard.tsx b/src/components/cards/CvcCard.tsx
@@ -0,0 +1,18 @@
+import * as S from './cvcCard.style';
+import * as C from './index.style';
+
+type CvcCardProps = {
+  cvc: string;
+};
+
+export default function CvcCard({ cvc }: CvcCardProps) {
+  return (
+    <C.Container>
+      <C.CardContainer $backgroundColor={'rgba(213, 213, 213, 1)'}>
+        <S.CvcNumberWrapper $backgroundColor={'rgba(203, 186, 100, 1)'}>
+          <S.CvcNumberText>{cvc}</S.CvcNumberText>
+        </S.CvcNumberWrapper>
+      </C.CardContainer>
+    </C.Container>
+  );
+}