woowacourse · InSeong-So · May 5, 2023 · Apr 25, 2023 · Apr 25, 2023 · Apr 25, 2023
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -1,4 +1,5 @@
 import type { StorybookConfig } from '@storybook/react-webpack5';
+
 const config: StorybookConfig = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [

diff --git a/.storybook/preview.ts b/.storybook/preview.ts
@@ -1,5 +1,6 @@
 import type { Preview } from '@storybook/react';
-import '../src/components/FormCardAdd.css';
+
+import '../src/pages/AddCard/components/AddCardForm.css';
 
 const preview: Preview = {
   parameters: {

diff --git a/docs/REQUIREMENTS.md b/docs/REQUIREMENTS.md
@@ -28,6 +28,10 @@
     - [x] 카드번호 뒷 8자리는 온점으로 표시한다.
     - [x] "?" 버튼에 hover 상태면 cvc에 대한 설명을 보여줌.
     - [x] (예외) 입력값이 잘못 들어오면 오류 메시지를 띄워준다.
+    - [x] 카드를 클릭하면 bottom sheet을 연다.
+    - [x] bottom sheet에서는 8개의 은행을 사용자가 선택할 수 있다. 은행을 선택하면 카드 좌측 상단에 선택된 카드 회사 이름이 뜨고, 카드 회사의 메인 색깔로 변경된다.
+    - [x] 카드 등록이 완료되면 카드에 별칭을 부여할 수 있다.
+      - [x] 별칭은 등록할 수도 있고 안할수도 있다.
 
 ### 카드 컴포넌트
 

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -1,43 +1,16 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="ko">
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
+    <meta name="description" content="react-payments-mission" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>React App</title>
+    <title>💳 Payments</title>
   </head>
   <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <noscript></noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
   </body>
 </html>
diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/public/manifest.json b/public/manifest.json
@@ -1,21 +1,11 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "페이먼츠",
+  "name": "우테코 - 페이먼츠 미션",
   "icons": [
     {
       "src": "favicon.ico",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
     }
   ],
   "start_url": ".",

diff --git a/src/asset/back_button.png b/src/asset/back_button.png
diff --git a/src/asset/bc_card.png b/src/asset/bc_card.png
diff --git a/src/asset/hana_card.png b/src/asset/hana_card.png
diff --git a/src/asset/hyundai_card.png b/src/asset/hyundai_card.png
diff --git a/src/asset/kakao_bank.png b/src/asset/kakao_bank.png
diff --git a/src/asset/kookmin_card.png b/src/asset/kookmin_card.png
diff --git a/src/asset/lotte_card.png b/src/asset/lotte_card.png
diff --git a/src/asset/sinhan_card.png b/src/asset/sinhan_card.png
diff --git a/src/asset/woori_card.png b/src/asset/woori_card.png
diff --git a/src/components/AddCardExpireDateInput.tsx b/src/components/AddCardExpireDateInput.tsx
diff --git a/src/components/AddCardForm.css b/src/components/AddCardForm.css
diff --git a/src/components/AddCardForm.tsx b/src/components/AddCardForm.tsx
diff --git a/src/components/AddCardNumberInput.tsx b/src/components/AddCardNumberInput.tsx
diff --git a/src/components/AddCardOwnerInput.tsx b/src/components/AddCardOwnerInput.tsx