Merge pull request #224 from Team-TIFY/dev

[Deploy] : 3차 QA 1/3 반영 배포
Team-TIFY · Dec 28, 2023 · de4b8ee · de4b8ee
2 parents 242eed2 + 0e9c6d4
commit de4b8ee
Show file tree

Hide file tree

Showing 99 changed files with 2,008 additions and 1,053 deletions.
diff --git a/index.html b/index.html
@@ -1,11 +1,11 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <base href="https://tify-client.vercel.app/">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
-    <title>Vite + React + TS</title>
+    <!-- <base href="https://tify-client.vercel.app/"> -->
+    <title>TIFY</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/assets/icons/BagIcon.tsx b/src/assets/icons/BagIcon.tsx
@@ -1,4 +1,6 @@
-const BagIcon = () => {
+import { KeyOfPalette, theme } from '@styles/theme'
+
+const BagIcon = ({ fill = 'aqua_500' }: { fill?: KeyOfPalette }) => {
   return (
     <svg
       width="16"
@@ -11,15 +13,15 @@ const BagIcon = () => {
         <path
           id="Vector"
           d="M4.22021 5.3335H11.7795C11.9718 5.33347 12.1618 5.37502 12.3365 5.4553C12.5111 5.53557 12.6664 5.65267 12.7916 5.79856C12.9168 5.94446 13.0089 6.1157 13.0617 6.30055C13.1146 6.4854 13.1268 6.67948 13.0975 6.8695L12.2609 12.3042C12.1882 12.7765 11.9489 13.2071 11.5862 13.5182C11.2235 13.8293 10.7614 14.0003 10.2835 14.0002H5.71555C5.23781 14.0001 4.77586 13.8291 4.4133 13.518C4.05073 13.2069 3.81149 12.7763 3.73888 12.3042L2.90221 6.8695C2.87299 6.67948 2.8852 6.4854 2.93801 6.30055C2.99083 6.1157 3.08299 5.94446 3.20818 5.79856C3.33336 5.65267 3.48862 5.53557 3.66331 5.4553C3.83799 5.37502 4.02797 5.33347 4.22021 5.3335Z"
-          stroke="#7D40FF"
+          stroke={theme.palette[fill]}
           strokeWidth="1.2"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
           id="Vector_2"
           d="M6 7.33333V4C6 3.46957 6.21071 2.96086 6.58579 2.58579C6.96086 2.21071 7.46957 2 8 2C8.53043 2 9.03914 2.21071 9.41421 2.58579C9.78929 2.96086 10 3.46957 10 4V7.33333"
-          stroke="#7D40FF"
+          stroke={theme.palette[fill]}
           strokeWidth="1.2"
           strokeLinecap="round"
           strokeLinejoin="round"

diff --git a/src/assets/icons/BowlIcon.tsx b/src/assets/icons/BowlIcon.tsx
@@ -1,4 +1,6 @@
-const BowlIcon = () => {
+import { KeyOfPalette, theme } from '@styles/theme'
+
+const BowlIcon = ({ fill = 'aqua_500' }: { fill?: KeyOfPalette }) => {
   return (
     <svg
       width="16"
@@ -10,7 +12,7 @@ const BowlIcon = () => {
       <g clipPath="url(#clip0_4856_14632)">
         <path
           d="M2.66667 5.33301H13.3333C13.5101 5.33301 13.6797 5.40325 13.8047 5.52827C13.9298 5.65329 14 5.82286 14 5.99967V6.33301C14 7.33301 12.322 10.0483 11.3333 10.6663V11.333C11.3333 11.5098 11.2631 11.6794 11.1381 11.8044C11.013 11.9294 10.8435 11.9997 10.6667 11.9997H5.33333C5.15652 11.9997 4.98695 11.9294 4.86193 11.8044C4.7369 11.6794 4.66667 11.5098 4.66667 11.333V10.6663C3.542 9.96367 2 7.33301 2 6.33301V5.99967C2 5.82286 2.07024 5.65329 2.19526 5.52827C2.32029 5.40325 2.48986 5.33301 2.66667 5.33301Z"
-          stroke="#7EAAFF"
+          stroke={theme.palette[fill]}
           strokeWidth="1.2"
           strokeLinecap="round"
           strokeLinejoin="round"

diff --git a/src/assets/icons/CookIcon.tsx b/src/assets/icons/CookIcon.tsx
@@ -1,4 +1,6 @@
-const CookIcon = () => {
+import { KeyOfPalette, theme } from '@styles/theme'
+
+const CookIcon = ({ fill = 'aqua_500' }: { fill?: KeyOfPalette }) => {
   return (
     <svg
       width="16"
@@ -10,14 +12,14 @@ const CookIcon = () => {
       <g clipPath="url(#clip0_4856_14626)">
         <path
           d="M7.99907 2C9.27774 2 10.3457 2.9 10.6057 4.10067C11.2885 3.9159 12.0167 4.00992 12.6301 4.36205C13.2435 4.71418 13.692 5.29558 13.8767 5.97833C14.0615 6.66109 13.9675 7.38928 13.6154 8.00271C13.2632 8.61614 12.6818 9.06457 11.9991 9.24933V14H3.99907V9.24933C3.66101 9.15776 3.34429 9.00049 3.067 8.78652C2.78971 8.57254 2.55728 8.30604 2.38299 8.00224C2.20869 7.69844 2.09594 7.36328 2.05117 7.0159C2.00641 6.66853 2.0305 6.31573 2.12207 5.97767C2.21365 5.6396 2.37091 5.32288 2.58489 5.04559C2.79887 4.76831 3.06536 4.53588 3.36917 4.36158C3.67297 4.18729 4.00813 4.07454 4.3555 4.02977C4.70288 3.985 5.05567 4.00909 5.39374 4.10067C5.52296 3.50571 5.85188 2.97289 6.32584 2.59074C6.79979 2.20859 7.39024 2.00013 7.99907 2Z"
-          stroke="#F74AA6"
+          stroke={theme.palette[fill]}
           strokeWidth="1.2"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
           d="M4.10742 11.339L12.0001 11.333"
-          stroke="#F74AA6"
+          stroke={theme.palette[fill]}
           strokeWidth="1.2"
           strokeLinecap="round"
           strokeLinejoin="round"

diff --git a/src/assets/icons/CookieManIcon.tsx b/src/assets/icons/CookieManIcon.tsx
@@ -1,4 +1,6 @@
-const CookieManIcon = () => {
+import { KeyOfPalette, theme } from '@styles/theme'
+
+const CookieManIcon = ({ fill = 'aqua_500' }: { fill?: KeyOfPalette }) => {
   return (
     <svg
       width="16"
@@ -10,42 +12,42 @@ const CookieManIcon = () => {
       <g clipPath="url(#clip0_4856_12143)">
         <path
           d="M8.00083 1.33331C8.71138 1.33325 9.40335 1.56024 9.9758 1.98117C10.5482 2.4021 10.9712 2.99494 11.183 3.67319C11.3947 4.35145 11.3842 5.07963 11.153 5.75149C10.9217 6.42335 10.4818 7.00374 9.8975 7.40798L9.9955 7.65398L11.1655 7.11865C11.8115 6.82331 12.5788 7.09731 12.8795 7.73065C13.0155 8.01836 13.0369 8.34703 12.9395 8.64999C12.8421 8.95294 12.633 9.20748 12.3548 9.36198L12.2562 9.41265L10.6675 10.1386V11.4853L11.6182 12.4353L11.6942 12.5186C11.9054 12.7689 12.015 13.0894 12.0011 13.4166C11.9873 13.7438 11.8512 14.0538 11.6196 14.2854C11.388 14.517 11.0779 14.6531 10.7507 14.667C10.4235 14.6808 10.1031 14.5712 9.85283 14.36L9.7695 14.284L8.3835 12.8973L8.3075 12.8146C8.26835 12.7683 8.23249 12.7193 8.20016 12.668H7.80083C7.7695 12.718 7.7335 12.768 7.69416 12.8146L7.6175 12.898L6.23083 14.284C5.99283 14.523 5.6716 14.6608 5.33435 14.6684C4.9971 14.676 4.66997 14.553 4.42142 14.3249C4.17286 14.0968 4.02213 13.7815 4.00077 13.4448C3.97941 13.1082 4.08908 12.7763 4.30683 12.5186L4.38283 12.4353L5.33416 11.4846V10.1386L3.7455 9.41198L3.64683 9.36198C3.36861 9.20748 3.15958 8.95294 3.06214 8.64999C2.96471 8.34703 2.98617 8.01836 3.12216 7.73065C3.40816 7.12931 4.11483 6.85198 4.73816 7.07865L4.83616 7.11865L6.00616 7.65398L6.10416 7.40798C5.68103 7.11516 5.33144 6.72835 5.08277 6.27785C4.8341 5.82735 4.69311 5.3254 4.67083 4.81131V4.66665C4.67083 3.78259 5.02202 2.93474 5.64714 2.30962C6.27226 1.6845 7.12011 1.33331 8.00416 1.33331H8.00083Z"
-          stroke="#7EAAFF"
+          stroke={theme.palette[fill]}
           strokeWidth="1.2"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
           d="M8 10.6667H8.00667"
-          stroke="#7EAAFF"
+          stroke={theme.palette[fill]}
           strokeWidth="1.2"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
           d="M8 8.66669H8.00667"
-          stroke="#7EAAFF"
+          stroke={theme.palette[fill]}
           strokeWidth="1.2"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
           d="M6.66602 4.66669H6.67268"
-          stroke="#7EAAFF"
+          stroke={theme.palette[fill]}
           strokeWidth="1.2"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
           d="M9.33398 4.66669H9.34065"
-          stroke="#7EAAFF"
+          stroke={theme.palette[fill]}
           strokeWidth="1.2"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
           d="M8 6H8.00667"
-          stroke="#7EAAFF"
+          stroke={theme.palette[fill]}
           strokeWidth="1.2"
           strokeLinecap="round"
           strokeLinejoin="round"

diff --git a/src/assets/icons/CupIcon.tsx b/src/assets/icons/CupIcon.tsx
@@ -1,4 +1,6 @@
-const CupIcon = () => {
+import { KeyOfPalette, theme } from '@styles/theme'
+
+const CupIcon = ({ fill = 'aqua_500' }: { fill?: KeyOfPalette }) => {
   return (
     <svg
       width="16"
@@ -11,31 +13,31 @@ const CupIcon = () => {
         <path
           id="Vector"
           d="M3.33398 7.33301H12.6673V5.33301H3.33398V7.33301Z"
-          stroke="#7D40FF"
+          stroke={theme.palette[fill]}
           strokeWidth="1.2"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
           id="Vector_2"
           d="M11.6673 7.33301L10.6673 13.9997H5.33398L4.33398 7.33301"
-          stroke="#7D40FF"
+          stroke={theme.palette[fill]}
           strokeWidth="1.2"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
           id="Vector_3"
           d="M4 5.33301V4.66634C4 4.31272 4.14048 3.97358 4.39052 3.72353C4.64057 3.47348 4.97971 3.33301 5.33333 3.33301H10.6667C11.0203 3.33301 11.3594 3.47348 11.6095 3.72353C11.8595 3.97358 12 4.31272 12 4.66634V5.33301"
-          stroke="#7D40FF"
+          stroke={theme.palette[fill]}
           strokeWidth="1.2"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
           id="Vector_4"
           d="M10 3.33333V2"
-          stroke="#7D40FF"
+          stroke={theme.palette[fill]}
           strokeWidth="1.2"
           strokeLinecap="round"
           strokeLinejoin="round"

diff --git a/src/assets/icons/DiamondIcon.tsx b/src/assets/icons/DiamondIcon.tsx
@@ -1,4 +1,6 @@
-const DiamondIcon = () => {
+import { KeyOfPalette, theme } from '@styles/theme'
+
+const DiamondIcon = ({ fill = 'aqua_500' }: { fill?: KeyOfPalette }) => {
   return (
     <svg
       width="16"
@@ -11,15 +13,15 @@ const DiamondIcon = () => {
         <path
           id="Vector"
           d="M4 3.3335H12L14 6.66683L8.33333 13.0002C8.28988 13.0445 8.23802 13.0797 8.18078 13.1038C8.12355 13.1278 8.06209 13.1402 8 13.1402C7.93792 13.1402 7.87645 13.1278 7.81922 13.1038C7.76198 13.0797 7.71012 13.0445 7.66667 13.0002L2 6.66683L4 3.3335Z"
-          stroke="#7D40FF"
+          stroke={theme.palette[fill]}
           strokeWidth="1.2"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
           id="Vector_2"
           d="M6.66536 8.00003L5.33203 6.53337L5.73203 5.8667"
-          stroke="#7D40FF"
+          stroke={theme.palette[fill]}
           strokeWidth="1.2"
           strokeLinecap="round"
           strokeLinejoin="round"

diff --git a/src/assets/icons/DrinkIcon.tsx b/src/assets/icons/DrinkIcon.tsx
@@ -1,4 +1,6 @@
-const DrinkIcon = () => {
+import { KeyOfPalette, theme } from '@styles/theme'
+
+const DrinkIcon = ({ fill = 'aqua_500' }: { fill?: KeyOfPalette }) => {
   return (
     <svg
       width="16"
@@ -11,31 +13,31 @@ const DrinkIcon = () => {
         <path
           id="Vector"
           d="M5.33303 2C5.12204 2.15145 4.95108 2.35198 4.83493 2.58428C4.71878 2.81658 4.66093 3.07367 4.66637 3.33333C4.66093 3.593 4.71878 3.85008 4.83493 4.08238C4.95108 4.31469 5.12204 4.51522 5.33303 4.66667"
-          stroke="#F74AA6"
+          stroke={theme.palette[fill]}
           strokeWidth="1.2"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
           id="Vector_2"
           d="M7.99905 2C7.78805 2.15145 7.6171 2.35198 7.50095 2.58428C7.3848 2.81658 7.32694 3.07367 7.33238 3.33333C7.32694 3.593 7.3848 3.85008 7.50095 4.08238C7.6171 4.31469 7.78805 4.51522 7.99905 4.66667"
-          stroke="#F74AA6"
+          stroke={theme.palette[fill]}
           strokeWidth="1.2"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
           id="Vector_3"
           d="M2 6.66699H11.3333V10.0003C11.3333 11.0612 10.9119 12.0786 10.1618 12.8288C9.41162 13.5789 8.3942 14.0003 7.33333 14.0003H6C4.93913 14.0003 3.92172 13.5789 3.17157 12.8288C2.42143 12.0786 2 11.0612 2 10.0003V6.66699Z"
-          stroke="#F74AA6"
+          stroke={theme.palette[fill]}
           strokeWidth="1.2"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
           id="Vector_4"
           d="M11.1641 11.1506C11.4618 11.2873 11.7885 11.3488 12.1156 11.3296C12.4426 11.3104 12.76 11.2112 13.0397 11.0406C13.3194 10.8701 13.5529 10.6334 13.7197 10.3515C13.8866 10.0695 13.9816 9.75091 13.9964 9.42364C14.0113 9.09638 13.9455 8.77047 13.8049 8.47458C13.6643 8.17868 13.4531 7.92186 13.19 7.72669C12.9269 7.53151 12.6198 7.40396 12.2959 7.35524C11.9719 7.30653 11.6409 7.33814 11.3321 7.4473"
-          stroke="#F74AA6"
+          stroke={theme.palette[fill]}
           strokeWidth="1.2"
           strokeLinecap="round"
           strokeLinejoin="round"

diff --git a/src/assets/icons/DropIcon.tsx b/src/assets/icons/DropIcon.tsx
@@ -1,4 +1,6 @@
-const DropIcon = () => {
+import { KeyOfPalette, theme } from '@styles/theme'
+
+const DropIcon = ({ fill = 'aqua_500' }: { fill?: KeyOfPalette }) => {
   return (
     <svg
       width="16"
@@ -11,7 +13,7 @@ const DropIcon = () => {
         <path
           id="Vector"
           d="M5.00212 12.9487C6.73678 14.352 9.26545 14.352 10.9994 12.9487C12.7341 11.5454 13.1741 9.14335 12.0434 7.25135L8.78345 2.41135C8.50345 1.99468 7.92545 1.87602 7.49278 2.14668C7.38418 2.21483 7.29106 2.305 7.21945 2.41135L3.95745 7.25135C2.82745 9.14335 3.26745 11.5454 5.00212 12.9487Z"
-          stroke="#F74AA6"
+          stroke={theme.palette[fill]}
           strokeWidth="1.2"
           strokeLinecap="round"
           strokeLinejoin="round"

diff --git a/src/assets/icons/EarphoneIcon.tsx b/src/assets/icons/EarphoneIcon.tsx
@@ -0,0 +1,39 @@
+import { KeyOfPalette, theme } from '@styles/theme'
+
+const EarphoneIcon = ({ fill = 'aqua_500' }: { fill?: KeyOfPalette }) => {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g id="icon-tag-16" clipPath="url(#clip0_5012_7064)">
+        <path
+          id="Vector"
+          d="M4.00065 2.66651C4.68539 2.66565 5.34422 2.92823 5.84065 3.39984C6.33709 3.87145 6.63308 4.51596 6.66732 5.19984V5.33317V12.3332C6.66732 12.5984 6.56196 12.8527 6.37442 13.0403C6.18689 13.2278 5.93253 13.3332 5.66732 13.3332C5.4021 13.3332 5.14775 13.2278 4.96021 13.0403C4.77267 12.8527 4.66732 12.5984 4.66732 12.3332V7.99984H4.00065C3.31591 8.0007 2.65709 7.73812 2.16065 7.26651C1.66422 6.79489 1.36822 6.15039 1.33398 5.46651V5.33317C1.33398 4.62593 1.61494 3.94765 2.11503 3.44755C2.61513 2.94746 3.29341 2.66651 4.00065 2.66651Z"
+          stroke={theme.palette[fill]}
+          strokeWidth="1.2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          id="Vector_2"
+          d="M12.0007 2.66651C11.3159 2.66565 10.6571 2.92823 10.1607 3.39984C9.66422 3.87145 9.36822 4.51596 9.33398 5.19984V5.33317V12.3332C9.33398 12.5984 9.43934 12.8527 9.62688 13.0403C9.81441 13.2278 10.0688 13.3332 10.334 13.3332C10.5992 13.3332 10.8536 13.2278 11.0411 13.0403C11.2286 12.8527 11.334 12.5984 11.334 12.3332V7.99984H12.0007C12.6854 8.0007 13.3442 7.73812 13.8407 7.26651C14.3371 6.79489 14.6331 6.15039 14.6673 5.46651V5.33317C14.6673 4.62593 14.3864 3.94765 13.8863 3.44755C13.3862 2.94746 12.7079 2.66651 12.0007 2.66651Z"
+          stroke={theme.palette[fill]}
+          strokeWidth="1.2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_5012_7064">
+          <rect width="16" height="16" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+}
+
+export default EarphoneIcon
diff --git a/src/assets/icons/FlareIcon.tsx b/src/assets/icons/FlareIcon.tsx
@@ -1,4 +1,6 @@
-const FlareIcon = () => {
+import { KeyOfPalette, theme } from '@styles/theme'
+
+const FlareIcon = ({ fill = 'aqua_500' }: { fill?: KeyOfPalette }) => {
   return (
     <svg
       width="16"
@@ -11,7 +13,7 @@ const FlareIcon = () => {
         <path
           id="Vector"
           d="M8 2L10 6L14 8L10 10L8 14L6 10L2 8L6 6L8 2Z"
-          stroke="#7EAAFF"
+          stroke={theme.palette[fill]}
           strokeWidth="1.2"
           strokeLinecap="round"
           strokeLinejoin="round"

diff --git a/src/assets/icons/HangerIcon.tsx b/src/assets/icons/HangerIcon.tsx
@@ -1,4 +1,6 @@
-const HangerIcon = () => {
+import { KeyOfPalette, theme } from '@styles/theme'
+
+const HangerIcon = ({ fill = 'aqua_500' }: { fill?: KeyOfPalette }) => {
   return (
     <svg
       width="16"
@@ -11,7 +13,7 @@ const HangerIcon = () => {
         <path
           id="Vector"
           d="M9.33281 3.99984C9.33281 3.64622 9.19233 3.30708 8.94228 3.05703C8.69223 2.80698 8.3531 2.6665 7.99947 2.6665C7.64585 2.6665 7.30671 2.80698 7.05667 3.05703C6.80662 3.30708 6.66614 3.64622 6.66614 3.99984C6.66614 5.11117 7.11281 5.99984 7.99947 6.6665H7.99414M7.99414 6.6665L13.3081 9.6185C13.5161 9.73399 13.6894 9.90302 13.81 10.108C13.9306 10.3131 13.9942 10.5466 13.9941 10.7845V11.3332C13.9941 11.6868 13.8537 12.0259 13.6036 12.276C13.3536 12.526 13.0144 12.6665 12.6608 12.6665H3.32747C2.97385 12.6665 2.63471 12.526 2.38466 12.276C2.13462 12.0259 1.99414 11.6868 1.99414 11.3332V10.7845C1.99408 10.5466 2.05766 10.3131 2.17828 10.108C2.2989 9.90302 2.47218 9.73399 2.68014 9.6185L7.99414 6.6665Z"
-          stroke="#7D40FF"
+          stroke={theme.palette[fill]}
           strokeWidth="1.2"
           strokeLinecap="round"
           strokeLinejoin="round"