Merge branch 'develop'

.storybook/main.ts

@@ -1,4 +1,6 @@
 import type { StorybookConfig } from '@storybook/react-vite';
+/** @type { import('@storybook/react-webpack5').StorybookConfig } */
+import path from 'path';
 
 const config: StorybookConfig = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
@@ -12,5 +14,16 @@ const config: StorybookConfig = {
     name: '@storybook/react-vite',
     options: {},
   },
+  async viteFinal(config) {
+    if (config.resolve) {
+      config.resolve.alias = {
+        ...config.resolve.alias,
+        '@assets': path.resolve(__dirname, '../src/assets'),
+        '@constants': path.resolve(__dirname, '../src/constants'),
+      };
+    }
+
+    return config;
+  },
 };
 export default config;

.storybook/preview.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { ThemeProvider, Global } from '@emotion/react';
 import GlobalStyle from '../src/styles/global';
 import theme from '../src/styles/theme';
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 
 const preview: Preview = {
   parameters: {
@@ -12,6 +13,10 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
+    viewport: {
+      viewports: INITIAL_VIEWPORTS,
+      defaultViewport: 'iphone6',
+    },
   },
   decorators: [
     (Story) => (

src/assets/svgs/IcNext.tsx

@@ -0,0 +1,13 @@
+import type { SVGProps } from 'react';
+const SvgIcNext = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 41 45"
+    {...props}
+  >
+    <path fill="#B2B2B2" d="M.5 8a8 8 0 0 1 8-8h32v45h-32a8 8 0 0 1-8-8z" />
+    <path stroke="#fff" d="m20.5 16 6 6-6 6" />
+  </svg>
+);
+export default SvgIcNext;

src/assets/svgs/IcPrev.tsx

@@ -0,0 +1,13 @@
+import type { SVGProps } from 'react';
+const SvgIcPrev = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 41 45"
+    {...props}
+  >
+    <path fill="#B2B2B2" d="M40.5 8a8 8 0 0 0-8-8H.5v45h32a8 8 0 0 0 8-8z" />
+    <path stroke="#fff" d="m20.5 16-6 6 6 6" />
+  </svg>
+);
+export default SvgIcPrev;

src/assets/svgs/IcSeemore.tsx

@@ -0,0 +1,13 @@
+import type { SVGProps } from 'react';
+const SvgIcSeemore = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 71 70"
+    {...props}
+  >
+    <rect width={70} height={70} x={0.5} fill="#F5BD44" rx={35} />
+    <path stroke="#292929" strokeWidth={0.5} d="M35.5 26v18m-9-8.743h18" />
+  </svg>
+);
+export default SvgIcSeemore;

src/assets/svgs/bottomNav/IcDeliver.tsx

@@ -0,0 +1,20 @@
+import type { SVGProps } from 'react';
+const SvgIcDeliver = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 25 24"
+    {...props}
+  >
+    <g stroke="#fff" strokeWidth={2} clipPath="url(#ic_deliver_svg__a)">
+      <circle cx={12.999} cy={5.14} r={3.14} />
+      <path d="M16.833 4.68H24.5m-14.854 0H1.5m6.708 16.492V12.69C8.368 11.277 9.55 8.45 13 8.45s4.632 2.827 4.792 4.24v8.482M13 18.816V24" />
+    </g>
+    <defs>
+      <clipPath id="ic_deliver_svg__a">
+        <path fill="#fff" d="M.5 0h24v24H.5z" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+export default SvgIcDeliver;

src/assets/svgs/bottomNav/IcLocation.tsx

@@ -0,0 +1,24 @@
+import type { SVGProps } from 'react';
+const SvgIcLocation = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 25 24"
+    {...props}
+  >
+    <g clipPath="url(#ic_location_svg__a)">
+      <path
+        stroke="#fff"
+        strokeWidth={2}
+        d="M17.82 12.46 12.52 22l-5.138-8.67c-1.427-2.408-2.576-5.22-1.547-7.822C6.776 3.13 8.82 1 12.52 1c4.426.492 6.203 3.08 6.753 5.508.466 2.058-.428 4.108-1.453 5.952Z"
+      />
+      <circle cx={12.521} cy={8.305} r={0.913} fill="#fff" />
+    </g>
+    <defs>
+      <clipPath id="ic_location_svg__a">
+        <path fill="#fff" d="M.5 0h24v24H.5z" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+export default SvgIcLocation;

src/assets/svgs/bottomNav/index.ts

@@ -0,0 +1,2 @@
+export { default as IcDeliver } from './IcDeliver';
+export { default as IcLocation } from './IcLocation';

src/assets/svgs/buger/ImgMenu1.tsx → src/assets/svgs/burger/ImgMenu1.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import type { SVGProps } from 'react';
 const SvgImgMenu1 = (props: SVGProps<SVGSVGElement>) => (
   <svg

src/assets/svgs/buger/ImgMenu10.tsx → src/assets/svgs/burger/ImgMenu10.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import type { SVGProps } from 'react';
 const SvgImgMenu10 = (props: SVGProps<SVGSVGElement>) => (
   <svg

src/assets/svgs/buger/ImgMenu2.tsx → src/assets/svgs/burger/ImgMenu2.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import type { SVGProps } from 'react';
 const SvgImgMenu2 = (props: SVGProps<SVGSVGElement>) => (
   <svg

src/assets/svgs/buger/ImgMenu3.tsx → src/assets/svgs/burger/ImgMenu3.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import type { SVGProps } from 'react';
 const SvgImgMenu3 = (props: SVGProps<SVGSVGElement>) => (
   <svg

src/assets/svgs/buger/ImgMenu4.tsx → src/assets/svgs/burger/ImgMenu4.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import type { SVGProps } from 'react';
 const SvgImgMenu4 = (props: SVGProps<SVGSVGElement>) => (
   <svg

src/assets/svgs/buger/ImgMenu5.tsx → src/assets/svgs/burger/ImgMenu5.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import type { SVGProps } from 'react';
 const SvgImgMenu5 = (props: SVGProps<SVGSVGElement>) => (
   <svg

src/assets/svgs/buger/ImgMenu6.tsx → src/assets/svgs/burger/ImgMenu6.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import type { SVGProps } from 'react';
 const SvgImgMenu6 = (props: SVGProps<SVGSVGElement>) => (
   <svg

src/assets/svgs/buger/ImgMenu7.tsx → src/assets/svgs/burger/ImgMenu7.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import type { SVGProps } from 'react';
 const SvgImgMenu7 = (props: SVGProps<SVGSVGElement>) => (
   <svg

src/assets/svgs/buger/ImgMenu8.tsx → src/assets/svgs/burger/ImgMenu8.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import type { SVGProps } from 'react';
 const SvgImgMenu8 = (props: SVGProps<SVGSVGElement>) => (
   <svg

src/assets/svgs/buger/ImgMenu9.tsx → src/assets/svgs/burger/ImgMenu9.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import type { SVGProps } from 'react';
 const SvgImgMenu9 = (props: SVGProps<SVGSVGElement>) => (
   <svg

src/assets/svgs/burgerList/ListStyle.tsx

@@ -0,0 +1,12 @@
+import type { SVGProps } from 'react';
+const SvgListStyle = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 4 4"
+    {...props}
+  >
+    <circle cx={2} cy={2} r={2} fill="#F5BD44" />
+  </svg>
+);
+export default SvgListStyle;

src/assets/svgs/burgerList/index.ts

@@ -0,0 +1,2 @@
+export { default as Cimg12 } from './Cimg12';
+export { default as ListStyle } from './ListStyle';

src/assets/svgs/carousel/IcPlay.tsx

@@ -0,0 +1,16 @@
+import type { SVGProps } from 'react';
+const SvgIcPlay = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 29 29"
+    {...props}
+  >
+    <circle cx={14.5} cy={14.582} r={12.438} fill="#F5BD44" />
+    <path
+      fill="#fff"
+      d="M17.681 14.236a.4.4 0 0 1 0 .692L13.21 17.51a.4.4 0 0 1-.6-.346V12a.4.4 0 0 1 .6-.346z"
+    />
+  </svg>
+);
+export default SvgIcPlay;

src/assets/svgs/carousel/IcStop.tsx

@@ -0,0 +1,17 @@
+import type { SVGProps } from 'react';
+const SvgIcStop = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 29 29"
+    {...props}
+  >
+    <circle cx={14.5} cy={14.582} r={12.438} fill="#F5BD44" />
+    <path
+      stroke="#fff"
+      strokeLinecap="round"
+      d="M12.5 11.645v5.25M16.5 11.645v5.25"
+    />
+  </svg>
+);
+export default SvgIcStop;

src/assets/svgs/carousel/index.ts

@@ -0,0 +1,12 @@
+export { default as Cimg1 } from './Cimg1';
+export { default as Cimg10 } from './Cimg10';
+export { default as Cimg2 } from './Cimg2';
+export { default as Cimg3 } from './Cimg3';
+export { default as Cimg4 } from './Cimg4';
+export { default as Cimg5 } from './Cimg5';
+export { default as Cimg6 } from './Cimg6';
+export { default as Cimg7 } from './Cimg7';
+export { default as Cimg8 } from './Cimg8';
+export { default as Cimg9 } from './Cimg9';
+export { default as IcPlay } from './IcPlay';
+export { default as IcStop } from './IcStop';

src/assets/svgs/header/BtnMenu.tsx

@@ -0,0 +1,29 @@
+import type { SVGProps } from 'react';
+const SvgBtnMenu = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    fill="none"
+    viewBox="0 0 65 63"
+    {...props}
+  >
+    <path fill="url(#btn_menu_svg__a)" d="M0 .582h65v62H0z" />
+    <defs>
+      <pattern
+        id="btn_menu_svg__a"
+        width={1}
+        height={1}
+        patternContentUnits="objectBoundingBox"
+      >
+        <use xlinkHref="#btn_menu_svg__b" transform="scale(.0077 .00806)" />
+      </pattern>
+      <image
+        xlinkHref="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIIAAAB8CAYAAAClm2iUAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA4ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo1MDE2NjU3OS1iOGQzLTRiNGItYTYzMC1hYjIxYzBmNjk2YmEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RUEyOEE2RkE3ODQ4MTFFOUExNjg5NjYwMDkzQkNBRkYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RUEyOEE2Rjk3ODQ4MTFFOUExNjg5NjYwMDkzQkNBRkYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDphMjljODE3MS1lYTdkLTRhOGYtYTBmOC1mNTQ5MDk2OTY4MGQiIHN0UmVmOmRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDo3OThiMzZhYy1iNmYyLTExN2MtYjBjMy05ODlmNDMxZDc4ZmMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5MWdsGAAABFklEQVR42uzc0QmAMAxAQSNOk/1nyTrRAfpfS+4WEMoz9CM0uvuC2xEgBISAEBACQkAICAEhIASEgBAQAkJACAgBISAEhIAQEAJCQAgIASEgBISAEBACQkAICAEhIASEgBAQAkLgaM+uD2emd/0WqipMBOZNhE84fncEhIAQEAJCQAgIASEgBISAEBACQkAICAEhIASEgBAYY+fOoi3mNVvMzJwItpjdERACQkAICAEhIASEgBAQAkJACAgBISAEhIAQEAJCYA5bzP9ji5mN9XX7MTEREAJCQAgIASEgBISAEBACQkAICAEhIASEgBAQAkJACAgBISAEhIAQEAJCQAgIASEgBISAEBACQkAICAEhcLpXgAEACb8M/SlpkYIAAAAASUVORK5CYII="
+        id="btn_menu_svg__b"
+        width={130}
+        height={124}
+      />
+    </defs>
+  </svg>
+);
+export default SvgBtnMenu;

src/assets/svgs/header/CmpBtnBack.tsx

@@ -0,0 +1,12 @@
+import type { SVGProps } from 'react';
+const SvgCmpBtnBack = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 13 24"
+    {...props}
+  >
+    <path stroke="#000" d="M12 .92 1.5 12.42 12 22.92" />
+  </svg>
+);
+export default SvgCmpBtnBack;