Merge pull request #12 from themoment-team/develop

Release v1.0.0
themoment-team · May 20, 2024 · ff27d0c · ff27d0c
2 parents 64c3154 + 6aea48c
commit ff27d0c
Show file tree

Hide file tree

Showing 88 changed files with 2,532 additions and 18 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -6,11 +6,7 @@
       "jsx": true
     }
   },
-  "plugins": [
-    "@typescript-eslint",
-    "react",
-    "unused-imports"
-  ],
+  "plugins": ["@typescript-eslint", "react", "unused-imports"],
   "extends": [
     "plugin:prettier/recommended",
     "plugin:react/recommended",
@@ -23,7 +19,8 @@
     "no-unused-vars": "off",
     "@typescript-eslint/no-unused-vars": "error",
     "no-console": "error",
-    "no-undef": "off"
+    "no-undef": "off",
+    "react/prop-types": "off"
   },
   "settings": {
     "react": {

diff --git a/.pnp.cjs b/.pnp.cjs
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -1,7 +1,7 @@
 import { ThemeProvider } from '@emotion/react';
 import type { Preview } from '@storybook/react';
 import React from 'react';
-import theme from '../src/styles/theme';
+import { theme, GlobalStyle } from '../src/styles';
 
 const preview: Preview = {
   parameters: {
@@ -15,6 +15,7 @@ const preview: Preview = {
   decorators: [
     (Story) => (
       <ThemeProvider theme={theme}>
+        <GlobalStyle />
         <Story />
       </ThemeProvider>
     ),

diff --git a/.yarn/cache/@hookform-resolvers-npm-3.3.4-948251d894-0845e15f53.zip b/.yarn/cache/@hookform-resolvers-npm-3.3.4-948251d894-0845e15f53.zip
diff --git a/.yarn/cache/clsx-npm-2.1.1-96125b98be-cdfb57fa6c.zip b/.yarn/cache/clsx-npm-2.1.1-96125b98be-cdfb57fa6c.zip
diff --git a/.yarn/cache/emotion-reset-npm-3.0.1-061e1e27b7-788cfbf6f3.zip b/.yarn/cache/emotion-reset-npm-3.0.1-061e1e27b7-788cfbf6f3.zip
diff --git a/.yarn/cache/react-to-print-npm-2.15.1-11873a9fc7-0786fd5dd0.zip b/.yarn/cache/react-to-print-npm-2.15.1-11873a9fc7-0786fd5dd0.zip
diff --git a/.yarn/cache/react-toastify-npm-10.0.5-86b63c99fc-6630f4b6d6.zip b/.yarn/cache/react-toastify-npm-10.0.5-86b63c99fc-6630f4b6d6.zip
diff --git a/.yarn/cache/react-webcam-npm-7.2.0-4404f3658d-fe16756b9b.zip b/.yarn/cache/react-webcam-npm-7.2.0-4404f3658d-fe16756b9b.zip
diff --git a/.yarn/cache/zod-npm-3.23.8-11c49c85b5-846fd73e1a.zip b/.yarn/cache/zod-npm-3.23.8-11c49c85b5-846fd73e1a.zip
diff --git a/README.md b/README.md
@@ -0,0 +1,29 @@
+# Who Are You?
+
+#### WAU는 AI 필터를 이용하여 나만의 특별한 명함을 만들 수 있는 서비스입니다.
+
+실제 다양한 서비스 환경에서 운영되기보다 특정 환경에서 시연을 목적으로 합니다.
+
+<img width="254" alt="image" src="https://github.com/themoment-team/who-are-you-client/assets/106712562/4911088f-b5a3-4054-abb5-2bfff4f49bae">
+
+## Scripts
+```
+yarn
+yarn build
+yarn start
+```
+http://localhost:3000
+
+## Environment Variables
+- VITE_API_URL = karlo API URL
+- VITE_API_KEY = Kakao API KEY
+
+## Tech Stack
+
+- yarn PnP
+- vite
+- react
+- react-hook-form
+- emotion
+- prettier
+- eslint
diff --git a/index.html b/index.html
@@ -1,9 +1,15 @@
-<!DOCTYPE html>
-<html lang="en">
+<!doctype html>
+<html lang="ko" id="html">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <!-- <link rel="icon" type="image/svg+xml" href="/vite.svg" /> -->
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      as="style"
+      crossorigin
+      href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.min.css"
+    />
     <title>Who Are You</title>
   </head>
   <body>

diff --git a/package.json b/package.json
@@ -14,11 +14,17 @@
   "dependencies": {
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
+    "@hookform/resolvers": "^3.3.4",
+    "emotion-reset": "^3.0.1",
     "prettier": "^3.2.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.51.4",
-    "typescript": "^5.4.5"
+    "react-to-print": "^2.15.1",
+    "react-toastify": "^10.0.5",
+    "react-webcam": "^7.2.0",
+    "typescript": "^5.4.5",
+    "zod": "^3.23.8"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.3.5",

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,5 +1,5 @@
-const App = () => {
-  return <div>hello</div>;
-};
+import { MainPage } from '@/pageContainers';
+
+const App = () => <MainPage />;
 
 export default App;
diff --git a/src/assets/CameraGuide.tsx b/src/assets/CameraGuide.tsx
@@ -0,0 +1,102 @@
+const CameraGuide = () => (
+  <svg
+    width='32.75rem'
+    height='24.5625rem'
+    viewBox='0 0 524 393'
+    fill='none'
+    xmlns='http://www.w3.org/2000/svg'
+  >
+    <g clipPath='url(#clip0_62_21)'>
+      <path
+        fillRule='evenodd'
+        clipRule='evenodd'
+        d='M524 0H0V393H524V0ZM262.5 345C344.514 345 411 278.514 411 196.5C411 114.486 344.514 48 262.5 48C180.486 48 114 114.486 114 196.5C114 278.514 180.486 345 262.5 345Z'
+        fill='black'
+        fillOpacity='0.5'
+      />
+      <mask
+        id='mask0_62_21'
+        style={{ maskType: 'luminance' }}
+        maskUnits='userSpaceOnUse'
+        x='20'
+        y='20'
+        width='1.5rem'
+        height='1.5rem'
+      >
+        <path d='M20 20H44V44H20V20Z' fill='white' />
+      </mask>
+      <g mask='url(#mask0_62_21)'>
+        <path
+          d='M20 20V18H18V20H20ZM20 22H44V18H20V22ZM22 44V20H18V44H22Z'
+          fill='white'
+        />
+      </g>
+      <mask
+        id='mask1_62_21'
+        style={{ maskType: 'luminance' }}
+        maskUnits='userSpaceOnUse'
+        x='20'
+        y='349'
+        width='1.5rem'
+        height='1.5rem'
+      >
+        <path d='M20 373V349H44V373H20Z' fill='white' />
+      </mask>
+      <g mask='url(#mask1_62_21)'>
+        <path
+          d='M20 373H18V375H20V373ZM22 373V349H18V373H22ZM44 371H20V375H44V371Z'
+          fill='white'
+        />
+      </g>
+      <mask
+        id='mask2_62_21'
+        style={{ maskType: 'luminance' }}
+        maskUnits='userSpaceOnUse'
+        x='480'
+        y='349'
+        width='1.5rem'
+        height='1.5rem'
+      >
+        <path d='M504 373H480V349H504V373Z' fill='white' />
+      </mask>
+      <g mask='url(#mask2_62_21)'>
+        <path
+          d='M504 373V375H506V373H504ZM504 371H480V375H504V371ZM502 349V373H506V349H502Z'
+          fill='white'
+        />
+      </g>
+      <mask
+        id='mask3_62_21'
+        style={{ maskType: 'luminance' }}
+        maskUnits='userSpaceOnUse'
+        x='480'
+        y='20'
+        width='1.5rem'
+        height='1.5rem'
+      >
+        <path d='M504 20V44H480V20H504Z' fill='white' />
+      </mask>
+      <g mask='url(#mask3_62_21)'>
+        <path
+          d='M504 20H506V18H504V20ZM502 20V44H506V20H502ZM480 22H504V18H480V22Z'
+          fill='white'
+        />
+      </g>
+      <path
+        d='M261.5 346C344.067 346 411 279.067 411 196.5C411 113.933 344.067 47 261.5 47C178.933 47 112 113.933 112 196.5C112 279.067 178.933 346 261.5 346Z'
+        stroke='white'
+        strokeWidth='4'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeDasharray='10 10'
+      />
+    </g>
+    <defs>
+      <clipPath id='clip0_62_21'>
+        <rect width='32.75rem' height='24.5625rem' rx='8' fill='white' />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+export default CameraGuide;
diff --git a/src/assets/LeftIcon.tsx b/src/assets/LeftIcon.tsx
@@ -0,0 +1,19 @@
+const LeftIcon = () => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    width='1.5rem'
+    height='1.5625rem'
+    viewBox='0 0 24 25'
+    fill='none'
+  >
+    <path
+      d='M15.75 5L8.25 12.5L15.75 20'
+      stroke='black'
+      strokeWidth='1.5'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+    />
+  </svg>
+);
+
+export default LeftIcon;
diff --git a/src/assets/OIcon.tsx b/src/assets/OIcon.tsx
diff --git a/src/assets/RightIcon.tsx b/src/assets/RightIcon.tsx
@@ -0,0 +1,19 @@
+const RightIcon = () => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    width='1.5rem'
+    height='1.5625rem'
+    viewBox='0 0 24 25'
+    fill='none'
+  >
+    <path
+      d='M8.25 5L15.75 12.5L8.25 20'
+      stroke='black'
+      strokeWidth='1.5'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+    />
+  </svg>
+);
+
+export default RightIcon;
diff --git a/src/assets/SelectIcon.tsx b/src/assets/SelectIcon.tsx
@@ -0,0 +1,19 @@
+const SelectIcon = () => (
+  <svg
+    width='1.5rem'
+    height='1.5rem'
+    viewBox='0 0 24 24'
+    fill='none'
+    xmlns='http://www.w3.org/2000/svg'
+  >
+    <path
+      d='M19.5 8.25L12 15.75L4.5 8.25'
+      stroke='#888888'
+      strokeWidth='1.5'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+    />
+  </svg>
+);
+
+export default SelectIcon;
diff --git a/src/assets/WhoAreYouLogo.tsx b/src/assets/WhoAreYouLogo.tsx
@@ -0,0 +1,33 @@
+const WhoAreYouLogo = () => (
+  <svg
+    width='5.5rem'
+    height='2.5rem'
+    viewBox='0 0 88 40'
+    fill='none'
+    xmlns='http://www.w3.org/2000/svg'
+  >
+    <path
+      fillRule='evenodd'
+      clipRule='evenodd'
+      d='M58.1097 29.6514C58.4703 30.5414 58.9571 31.3849 59.5964 32.155C61.3092 34.2181 63.6613 35.296 66.3221 35.296C67.7073 35.296 69.1185 35.0214 70.3992 34.3394C71.5765 35.0185 72.8866 35.296 74.1621 35.296C75.9403 35.296 78.1022 34.7496 79.563 32.8094C80.7014 31.3043 81.0741 29.5524 81.0741 27.936V17.44C81.0741 15.6904 80.4849 13.9976 79.2102 12.643C77.7648 11.0559 75.844 10.496 74.0661 10.496C72.3474 10.496 70.6458 11.0346 69.2666 12.2763C67.8279 10.9915 66.0707 10.496 64.3701 10.496C62.6459 10.496 60.8083 10.9821 59.321 12.3568C58.8655 12.7772 58.4946 13.2367 58.198 13.7211C58.244 14.1177 58.2671 14.5361 58.2671 14.976C58.2671 15.9086 58.15 16.7299 57.9157 17.44C57.9142 17.4448 57.9126 17.4495 57.911 17.4542C57.8301 17.6973 57.7355 17.9272 57.6271 18.144C57.4981 18.3954 57.3585 18.6293 57.2081 18.8457L57.2281 23.4539C57.5488 23.8658 57.8084 24.3298 58.007 24.846C58.0095 24.8525 58.012 24.859 58.0145 24.8655C58.3322 25.7001 58.4911 26.6702 58.4911 27.776C58.4911 28.5156 58.364 29.1407 58.1097 29.6514ZM66.6421 15.296C66.0661 14.7627 65.3087 14.496 64.3701 14.496C63.3887 14.496 62.6101 14.7627 62.0341 15.296C61.4794 15.808 61.2021 16.5227 61.2021 17.44L61.2341 24.832C61.2554 26.88 61.7354 28.4693 62.6741 29.6C63.6127 30.7307 64.8287 31.296 66.3221 31.296C66.7808 31.296 67.2043 31.2491 67.5927 31.1553C68.1193 31.028 68.5811 30.8146 68.9783 30.5148C69.0783 30.4394 69.1743 30.3584 69.2661 30.272C69.31 30.2318 69.3527 30.1907 69.3941 30.1485C69.9488 29.5839 70.2709 28.8463 70.3603 27.936C70.3775 27.7611 70.3861 27.5797 70.3861 27.392H70.9621V27.936C70.9621 28.8108 71.1645 29.5376 71.5692 30.1166C71.6383 30.2154 71.7132 30.3098 71.7941 30.4C72.2349 30.8571 72.8006 31.1393 73.4912 31.2466C73.7031 31.2795 73.9267 31.296 74.1621 31.296C75.1861 31.296 75.9221 30.9973 76.3701 30.4C76.8394 29.7813 77.0741 28.96 77.0741 27.936V17.44C77.0741 16.608 76.8074 15.9147 76.2741 15.36C75.7621 14.784 75.0261 14.496 74.0661 14.496C73.1487 14.496 72.4021 14.784 71.8261 15.36C71.6412 15.5381 71.4859 15.7305 71.3604 15.9371C71.0948 16.3742 70.9621 16.8751 70.9621 17.44V24.064C70.9621 24.0854 70.962 24.1068 70.9618 24.128C70.9557 24.8245 70.8491 25.4005 70.6421 25.856C70.5761 25.9945 70.4908 26.1116 70.3861 26.2073C70.1521 26.4211 69.8215 26.528 69.3941 26.528C68.2185 26.528 67.5919 25.8301 67.5143 24.4343C67.513 24.4114 67.5119 24.3883 67.5109 24.365C67.5077 24.288 67.5061 24.209 67.5061 24.128V17.44C67.5061 16.8342 67.3805 16.3168 67.1293 15.8878C67.0001 15.6672 66.8377 15.4699 66.6421 15.296Z'
+      fill='#AFAFAF'
+      fillOpacity='0.8'
+    />
+    <path
+      fillRule='evenodd'
+      clipRule='evenodd'
+      d='M49.5443 33.0925L49.5219 33.0686C49.2946 32.8256 49.088 32.5731 48.9011 32.3126C48.6601 32.6612 48.3786 32.996 48.0516 33.3114C46.5748 34.7354 44.7218 35.296 42.907 35.296C41.1078 35.296 39.1902 34.7807 37.6665 33.3114C36.0507 31.7533 35.547 29.7197 35.547 27.904V23.392C35.547 22.673 35.5752 21.9548 35.642 21.248L35.7283 21.024C35.8989 20.5547 36.0376 20.0427 36.1443 19.488C36.2509 18.9333 36.3043 18.4853 36.3043 18.144C36.3043 18.0904 36.3032 18.0373 36.301 17.9846C36.4674 17.4904 36.6663 17.0131 36.9024 16.5573C35.7473 15.1034 35.2945 13.3829 35.2301 11.7407L35.2286 11.7024L35.2278 11.664C35.1904 9.79228 35.7122 7.87234 37.1226 6.31086C38.56 4.71945 40.4741 4 42.459 4H50.619C53.5505 4 56.3435 4.72013 58.6305 6.52203C61.3165 8.63826 62.267 11.7855 62.267 14.976C62.267 15.0184 62.2668 15.0609 62.2665 15.1033C62.1856 15.1631 62.1082 15.2274 62.034 15.296C61.4794 15.808 61.202 16.5227 61.202 17.44L61.2127 19.9168C61.2101 19.9221 61.2074 19.9275 61.2047 19.9329L61.1956 19.9511L61.1863 19.9693C60.9801 20.3713 60.7483 20.7611 60.4889 21.1337C60.7657 21.5031 61.0096 21.8867 61.223 22.2817L61.234 24.832C61.2457 25.95 61.394 26.9314 61.679 27.776C61.8591 28.3095 62.0937 28.7885 62.3828 29.213C62.1547 30.6792 61.5372 32.1645 60.2603 33.3562L60.2567 33.3596C58.7038 34.8054 56.77 35.296 54.971 35.296C53.0515 35.296 51.0864 34.6878 49.5671 33.1161L49.5443 33.0925ZM57.4951 23.8308C57.397 23.6783 57.2916 23.5321 57.179 23.392C56.5059 22.5338 55.6869 21.9145 54.7218 21.5342C54.4789 21.4385 54.2268 21.3579 53.9654 21.2924C53.9487 21.2882 53.9319 21.2841 53.915 21.28V20.864C53.9497 20.8599 53.9844 20.8554 54.0189 20.8505C54.1833 20.8271 54.3461 20.7944 54.5072 20.7522C54.9874 20.6265 55.4529 20.4173 55.9037 20.1246C55.9342 20.1048 55.9646 20.0846 55.995 20.064C56.5784 19.6688 57.0705 19.1242 57.4712 18.4302C57.5248 18.3375 57.5767 18.2421 57.627 18.144C58.0537 17.2907 58.267 16.2347 58.267 14.976C58.267 12.544 57.563 10.7733 56.155 9.664C54.747 8.55467 52.9017 8 50.619 8H42.459C41.4777 8 40.6884 8.33067 40.091 8.992C39.4937 9.65333 39.2057 10.5173 39.227 11.584C39.2522 12.2249 39.3661 12.7881 39.5689 13.2735C39.7104 13.6122 39.8951 13.913 40.123 14.176C40.611 14.7001 41.2444 15.0022 42.0233 15.0823C42.1638 15.0968 42.309 15.104 42.459 15.104H42.971L43.131 15.712C43.0772 15.7384 43.0239 15.7656 42.971 15.7937C42.795 15.8873 42.6244 15.9906 42.459 16.1037C42.3051 16.2089 42.1557 16.3226 42.011 16.4447C41.4512 16.9171 40.9605 17.5155 40.539 18.24C40.441 18.4138 40.3503 18.5996 40.2669 18.7973C39.787 19.9341 39.547 21.4657 39.547 23.392V27.904C39.547 29.0133 39.8457 29.856 40.443 30.432C41.0404 31.008 41.8617 31.296 42.907 31.296C43.8884 31.296 44.6777 31.008 45.275 30.432C45.8724 29.856 46.171 29.0133 46.171 27.904V22.784H46.811C46.9527 22.784 47.0913 22.7881 47.227 22.7964C47.7078 22.8257 48.1512 22.9069 48.557 23.04C49.0694 23.2081 49.5221 23.4589 49.915 23.7925C49.9695 23.8387 50.0228 23.8866 50.075 23.936C50.1076 23.9652 50.1396 23.9953 50.171 24.0261C50.3417 24.1937 50.4954 24.3854 50.6323 24.6012C51.1143 25.3608 51.3872 26.4191 51.451 27.776C51.4937 28.8213 51.8244 29.6747 52.443 30.336C53.0617 30.976 53.9044 31.296 54.971 31.296C56.059 31.296 56.9124 31.008 57.531 30.432C58.171 29.8347 58.491 28.9493 58.491 27.776C58.491 26.1775 58.159 24.8624 57.4951 23.8308ZM50.235 19.04C51.131 19.04 51.7817 18.8373 52.187 18.432C52.5479 18.0712 52.7481 17.5835 52.7877 16.969C52.7926 16.8933 52.795 16.8156 52.795 16.736C52.795 15.9893 52.5924 15.4133 52.187 15.008C51.7817 14.6027 51.131 14.4 50.235 14.4H47.227C47.1182 14.4 47.0174 14.4034 46.9247 14.4103C46.6173 14.4331 46.3981 14.4937 46.267 14.592C46.1783 14.6585 46.1127 14.7741 46.0701 14.9386C46.0307 15.0906 46.011 15.2844 46.011 15.52V17.888C46.011 18.2459 46.0606 18.5107 46.1599 18.6825C46.1821 18.721 46.2068 18.7548 46.234 18.784C46.2446 18.7954 46.2556 18.806 46.267 18.816C46.3813 18.916 46.5627 18.9826 46.811 19.0156C46.9334 19.0319 47.0721 19.04 47.227 19.04H50.235ZM50.011 15.52C50.011 15.5061 50.0116 15.5085 50.011 15.5252V15.52ZM49.6328 16.6979C49.5015 16.467 49.3201 16.2123 49.0702 15.9635C48.9869 16.0946 48.9231 16.2275 48.8777 16.3542C48.7953 16.584 48.795 16.7313 48.795 16.736C48.795 16.7176 48.7918 16.8501 48.8698 17.0716C48.9124 17.1927 48.9736 17.3236 49.0558 17.4557C49.3 17.2121 49.4795 16.9626 49.611 16.736C49.6184 16.7232 49.6257 16.7105 49.6328 16.6979Z'
+      fill='#AFAFAF'
+      fillOpacity='0.8'
+    />
+    <path
+      fillRule='evenodd'
+      clipRule='evenodd'
+      d='M15.7603 30.08C16.5496 30.8907 17.563 31.296 18.8003 31.296C19.5473 31.296 20.1854 31.1457 20.7145 30.8451C20.8944 30.7429 21.0617 30.6233 21.2164 30.4864C21.3733 30.3475 21.5173 30.1907 21.6483 30.016C21.9168 29.658 22.1534 29.2587 22.3581 28.818C22.3644 28.8045 22.3706 28.791 22.3768 28.7775C22.639 28.2043 22.8478 27.5621 23.0032 26.8507C23.0103 26.818 23.0174 26.7851 23.0243 26.752H23.3443C23.3512 26.7759 23.3582 26.7997 23.3652 26.8235C23.665 27.8397 24.0331 28.6727 24.4693 29.3225C24.713 29.6855 24.978 29.9914 25.2643 30.24C25.4616 30.4069 25.6739 30.5541 25.9012 30.6814C26.6324 31.0911 27.5188 31.296 28.5603 31.296C29.3496 31.296 30.043 31.0933 30.6403 30.688C30.7386 30.6178 30.8348 30.5444 30.9291 30.4679C31.3192 30.151 31.6747 29.7796 31.9955 29.3538C32.0209 29.3202 32.046 29.2862 32.0709 29.2519C32.1175 29.1878 32.1633 29.1225 32.2083 29.056C32.6777 28.3947 33.083 27.6693 33.4243 26.88C33.542 26.6168 33.6553 26.3559 33.764 26.0972C33.7746 26.072 33.7852 26.0468 33.7957 26.0215C34.0096 25.5095 34.2058 25.0063 34.3843 24.512L35.7283 21.024C35.899 20.5547 36.0376 20.0427 36.1443 19.488C36.251 18.9333 36.3043 18.4853 36.3043 18.144C36.3043 17.2053 35.9736 16.3947 35.3123 15.712C34.6723 15.008 33.8296 14.656 32.7843 14.656C32.1017 14.656 31.4723 14.8053 30.8963 15.104C30.6202 15.2527 30.3704 15.4305 30.1472 15.6374C29.922 15.846 29.7237 16.0842 29.5523 16.352C29.2323 16.864 29.0937 17.4613 29.1363 18.144C29.179 18.8053 29.2856 19.328 29.4563 19.712C29.6483 20.096 29.883 20.4587 30.1603 20.8C30.459 21.1413 30.7577 21.5467 31.0563 22.016L31.0583 22.0189C31.1712 22.1848 31.28 22.3719 31.3849 22.5802C31.5222 22.8528 31.6526 23.1617 31.7762 23.507C31.7848 23.531 31.7933 23.5551 31.8018 23.5794C31.8141 23.6146 31.8264 23.6502 31.8386 23.6862C31.8444 23.7034 31.8502 23.7207 31.8561 23.7381C31.8777 23.8029 31.8991 23.8689 31.9203 23.936C31.9319 23.972 31.9428 24.0076 31.9531 24.0431C32.1143 24.596 32.1247 25.083 31.9843 25.504C31.9171 25.7393 31.8057 25.9334 31.6502 26.0863C31.6439 26.0925 31.6376 26.0986 31.6312 26.1046C31.4938 26.2338 31.3235 26.3323 31.1203 26.4C30.5443 26.5707 30.075 26.4533 29.7123 26.048C29.6416 25.9689 29.5745 25.8882 29.511 25.8059C29.2889 25.5176 29.1115 25.2095 28.979 24.8814C28.977 24.8765 28.975 24.8716 28.9731 24.8667C28.9516 24.813 28.9314 24.7588 28.9123 24.704L26.2243 16.512C26.0745 16.0624 25.8623 15.6845 25.5879 15.3782C25.3544 15.1176 25.0759 14.9089 24.7523 14.752C24.0483 14.4107 23.2696 14.3893 22.4163 14.688C21.6548 14.9359 21.1138 15.3676 20.7934 15.983C20.7278 16.109 20.6714 16.2426 20.6243 16.384C20.3683 17.1947 20.379 18.016 20.6563 18.848L21.9683 22.816C22.0413 23.0277 22.1062 23.2288 22.163 23.4193C22.1653 23.4271 22.1676 23.4348 22.1699 23.4425C22.2327 23.6549 22.2854 23.8541 22.3279 24.0399C22.337 24.08 22.3457 24.1195 22.354 24.1584C22.4709 24.7113 22.4917 25.1385 22.4163 25.44C22.3096 25.9307 22.0323 26.2507 21.5843 26.4C21.5509 26.4107 21.5179 26.4205 21.4853 26.4293C20.9979 26.5617 20.6043 26.488 20.3043 26.208C20.2936 26.1973 20.283 26.1863 20.2723 26.175C20.0206 25.907 19.7755 25.4533 19.537 24.8141C19.5244 24.7801 19.5117 24.7457 19.4991 24.7107C19.4712 24.6333 19.4434 24.5534 19.4156 24.4709C19.4025 24.4318 19.3894 24.3922 19.3763 24.352L16.7523 16.512C16.7021 16.3613 16.6449 16.2187 16.5807 16.0842C16.2903 15.4756 15.8568 15.0315 15.2803 14.752C14.5763 14.4107 13.7976 14.3893 12.9443 14.688C12.027 14.9867 11.4403 15.552 11.1843 16.384C10.9283 17.216 10.939 18.0373 11.2163 18.848L13.6483 26.08C14.2883 27.936 14.9923 29.2693 15.7603 30.08ZM7.42772 20.1312L9.86183 27.3695L9.86682 27.384C10.5727 29.4309 11.5038 31.4031 12.8565 32.831L12.8753 32.8508L12.8944 32.8705C14.5112 34.5309 16.5952 35.296 18.8003 35.296C20.4341 35.296 22.0616 34.8624 23.4187 33.8491C24.9837 34.8918 26.7821 35.296 28.5603 35.296C30.0723 35.296 31.5644 34.8949 32.8863 33.9979L32.9261 33.9709L32.9653 33.9429C33.9693 33.2258 34.8086 32.3408 35.4948 31.3365C36.1194 30.4511 36.6477 29.4996 37.0854 28.4915C37.4747 27.62 37.8241 26.76 38.1316 25.9118L39.4745 22.4267L39.4875 22.391C39.5215 22.2975 39.5544 22.2035 39.5862 22.1091C39.6312 21.4083 39.715 20.7713 39.8377 20.1983C39.9515 19.6664 40.0988 19.1895 40.2795 18.7676C40.2954 18.5592 40.3043 18.3505 40.3043 18.144C40.3043 16.1729 39.5749 14.3852 38.2285 12.9738C36.7558 11.3813 34.8124 10.656 32.7843 10.656C31.4952 10.656 30.2298 10.9438 29.055 11.553L29.0274 11.5673L28.9999 11.5821C28.6649 11.7625 28.347 11.9651 28.0471 12.1886C27.597 11.7859 27.0811 11.4358 26.4974 11.1527C24.6997 10.2811 22.8143 10.3208 21.1357 10.8984C20.2273 11.2 19.392 11.6645 18.6854 12.2895C18.2098 11.8442 17.6574 11.4592 17.0254 11.1527C15.2277 10.2811 13.3422 10.3208 11.6636 10.8984C9.68358 11.5558 8.04103 12.9982 7.3612 15.2077C6.86231 16.829 6.87626 18.5115 7.42772 20.1312Z'
+      fill='#AFAFAF'
+      fillOpacity='0.8'
+    />
+  </svg>
+);
+
+export default WhoAreYouLogo;
diff --git a/src/assets/Xicon.tsx b/src/assets/Xicon.tsx
diff --git a/src/assets/index.ts b/src/assets/index.ts
@@ -0,0 +1,7 @@
+export { default as WhoAreYouLogo } from './WhoAreYouLogo';
+export { default as CameraGuide } from './CameraGuide';
+export { default as OIcon } from './OIcon';
+export { default as XIcon } from './XIcon';
+export { default as LeftIcon } from './LeftIcon';
+export { default as RightIcon } from './RightIcon';
+export { default as SelectIcon } from './SelectIcon';
diff --git a/src/components/CardModal/BusinessCardModal/index.stories.tsx b/src/components/CardModal/BusinessCardModal/index.stories.tsx
@@ -0,0 +1,32 @@
+import CardModal from '.';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof CardModal> = {
+  component: CardModal,
+  parameters: {
+    layout: 'padded',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof CardModal>;
+
+export const Theme1: Story = {
+  args: {
+    currentTheme: 1,
+  },
+};
+
+export const Theme2: Story = {
+  args: {
+    currentTheme: 2,
+  },
+};
+
+export const Theme3: Story = {
+  args: {
+    currentTheme: 3,
+  },
+};