[FEAT] 공통 Top bar 컴포넌트 구현

.storybook/preview.ts

@@ -1,3 +1,5 @@
+import '../src/app/globals.css';
+
 import type { Preview } from '@storybook/nextjs-vite';
 
 const preview: Preview = {

postcss.config.js

@@ -0,0 +1,4 @@
+/* eslint-disable @typescript-eslint/no-require-imports */
+module.exports = {
+  plugins: [require('@tailwindcss/postcss')],
+};

src/shared/assets/icons/ArrowDown.tsx

@@ -0,0 +1,37 @@
+import type { HTMLAttributes } from 'react';
+
+export default function ArrowDown(props: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div className='relative h-full w-full' data-name='arrow_down' {...props}>
+      <div className='absolute top-[37.5%] right-1/4 bottom-[37.5%] left-1/4 flex items-center justify-center'>
+        <div className='h-[10px] w-[5px] flex-none rotate-[90deg]'>
+          <div className='relative size-full'>
+            <div
+              className='absolute inset-[-7.5%_-15%]'
+              style={{ '--stroke-0': 'currentColor' } as React.CSSProperties}
+            >
+              <svg
+                preserveAspectRatio='none'
+                width='100%'
+                height='100%'
+                viewBox='0 0 6.5 11.5'
+                fill='none'
+                xmlns='http://www.w3.org/2000/svg'
+                className='block size-full max-w-none'
+              >
+                <path
+                  id='Vector 9'
+                  d='M5.75 0.75L0.75 5.75L5.75 10.75'
+                  stroke='var(--stroke-0, #333D4B)'
+                  strokeWidth='1.5'
+                  strokeLinecap='round'
+                  strokeLinejoin='round'
+                />
+              </svg>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/shared/assets/icons/ArrowNext.tsx

@@ -0,0 +1,37 @@
+import type { HTMLAttributes } from 'react';
+
+export default function ArrowNext(props: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div className='relative h-full w-full' data-name='arrow_next' {...props}>
+      <div className='absolute top-1/4 right-[33.42%] bottom-1/4 left-[41.58%] flex items-center justify-center'>
+        <div className='h-[10px] w-[5px] flex-none rotate-[180deg]'>
+          <div className='relative size-full'>
+            <div
+              className='absolute inset-[-7.5%_-15%]'
+              style={{ '--stroke-0': 'currentColor' } as React.CSSProperties}
+            >
+              <svg
+                preserveAspectRatio='none'
+                width='100%'
+                height='100%'
+                viewBox='0 0 6.5 11.5'
+                fill='none'
+                xmlns='http://www.w3.org/2000/svg'
+                className='block size-full max-w-none'
+              >
+                <path
+                  id='Vector 9'
+                  d='M5.75 0.75L0.75 5.75L5.75 10.75'
+                  stroke='var(--stroke-0, #333D4B)'
+                  strokeWidth='1.5'
+                  strokeLinecap='round'
+                  strokeLinejoin='round'
+                />
+              </svg>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/shared/assets/icons/ArrowPrev.tsx

@@ -0,0 +1,37 @@
+import type { HTMLAttributes } from 'react';
+
+export default function ArrowPrev(props: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div className='relative h-full w-full' data-name='arrow_prev' {...props}>
+      <div className='absolute top-1/4 right-[33.42%] bottom-1/4 left-[41.58%] flex items-center justify-center'>
+        <div className='h-[10px] w-[5px] flex-none'>
+          <div className='relative size-full'>
+            <div
+              className='absolute inset-[-7.5%_-15%]'
+              style={{ '--stroke-0': 'currentColor' } as React.CSSProperties}
+            >
+              <svg
+                preserveAspectRatio='none'
+                width='100%'
+                height='100%'
+                viewBox='0 0 6.5 11.5'
+                fill='none'
+                xmlns='http://www.w3.org/2000/svg'
+                className='block size-full max-w-none'
+              >
+                <path
+                  id='Vector 9'
+                  d='M5.75 0.75L0.75 5.75L5.75 10.75'
+                  stroke='var(--stroke-0, #333D4B)'
+                  strokeWidth='1.5'
+                  strokeLinecap='round'
+                  strokeLinejoin='round'
+                />
+              </svg>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/shared/assets/icons/ArrowUp.tsx

@@ -0,0 +1,37 @@
+import type { HTMLAttributes } from 'react';
+
+export default function ArrowUp(props: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div className='relative h-full w-full' data-name='arrow_up' {...props}>
+      <div className='absolute top-[37.5%] right-1/4 bottom-[37.5%] left-1/4 flex items-center justify-center'>
+        <div className='h-[10px] w-[5px] flex-none scale-y-[-100%] rotate-[270deg]'>
+          <div className='relative size-full'>
+            <div
+              className='absolute inset-[-7.5%_-15%]'
+              style={{ '--stroke-0': 'currentColor' } as React.CSSProperties}
+            >
+              <svg
+                preserveAspectRatio='none'
+                width='100%'
+                height='100%'
+                viewBox='0 0 6.5 11.5'
+                fill='none'
+                xmlns='http://www.w3.org/2000/svg'
+                className='block size-full max-w-none'
+              >
+                <path
+                  id='Vector 9'
+                  d='M5.75 0.75L0.75 5.75L5.75 10.75'
+                  stroke='var(--stroke-0, #333D4B)'
+                  strokeWidth='1.5'
+                  strokeLinecap='round'
+                  strokeLinejoin='round'
+                />
+              </svg>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/shared/assets/icons/IcCircleCheckFilled.tsx

@@ -0,0 +1,38 @@
+import type { HTMLAttributes } from 'react';
+
+export default function IcCircleCheckFilled(
+  props: HTMLAttributes<HTMLDivElement>,
+) {
+  return (
+    <div
+      className='relative h-full w-full'
+      data-name='ic_circle_check_filled'
+      {...props}
+    >
+      <div className='absolute inset-[8.33%]'>
+        <svg
+          preserveAspectRatio='none'
+          width='100%'
+          height='100%'
+          viewBox='0 0 20 20'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className='block size-full max-w-none'
+        >
+          <g id='Group 1'>
+            <path
+              id='Exclude'
+              d='M10 0.811523C14.9363 0.811524 18.9375 4.81369 18.9375 9.75C18.9375 14.6863 14.9363 18.6875 10 18.6875C5.06371 18.6875 1.06156 14.6863 1.06152 9.75C1.06152 4.81369 5.06369 0.811523 10 0.811523ZM13.7295 7.66406C13.4366 7.37139 12.9608 7.3713 12.668 7.66406L8.91406 11.4209L7.20801 9.50195C6.93289 9.19248 6.459 9.16452 6.14941 9.43945C5.83984 9.71464 5.81175 10.1885 6.08691 10.498L8.32227 13.0127C8.45943 13.1669 8.65405 13.2575 8.86035 13.2637C9.06679 13.2696 9.26711 13.1901 9.41309 13.0439L13.7295 8.72461C14.0219 8.43169 14.0221 7.95678 13.7295 7.66406Z'
+              fill='currentColor'
+            />
+            <path
+              id='Vector'
+              d='M10 0C8.02219 0 6.08879 0.58649 4.4443 1.6853C2.79981 2.78412 1.51809 4.3459 0.761209 6.17316C0.00433286 8.00043 -0.1937 10.0111 0.192152 11.9509C0.578004 13.8907 1.53041 15.6725 2.92894 17.0711C4.32746 18.4696 6.10929 19.422 8.0491 19.8078C9.98891 20.1937 11.9996 19.9957 13.8268 19.2388C15.6541 18.4819 17.2159 17.2002 18.3147 15.5557C19.4135 13.9112 20 11.9778 20 10C19.9971 7.34871 18.9426 4.80684 17.0679 2.9321C15.1932 1.05736 12.6513 0.00286757 10 0V0ZM10 18.3333C8.35183 18.3333 6.74066 17.8446 5.37025 16.9289C3.99984 16.0132 2.93174 14.7117 2.30101 13.189C1.67028 11.6663 1.50525 9.99075 1.82679 8.37425C2.14834 6.75774 2.94201 5.27288 4.10745 4.10744C5.27288 2.94201 6.75774 2.14833 8.37425 1.82679C9.99076 1.50525 11.6663 1.67027 13.189 2.301C14.7117 2.93173 16.0132 3.99984 16.9289 5.37025C17.8446 6.74066 18.3333 8.35182 18.3333 10C18.3309 12.2094 17.4522 14.3276 15.8899 15.8899C14.3276 17.4522 12.2094 18.3309 10 18.3333V18.3333Z'
+              fill='currentColor'
+            />
+          </g>
+        </svg>
+      </div>
+    </div>
+  );
+}

src/shared/assets/icons/IcCircleCheckOutline.tsx

@@ -0,0 +1,41 @@
+import type { HTMLAttributes } from 'react';
+
+export default function IcCircleCheckOutline(
+  props: HTMLAttributes<HTMLDivElement>,
+) {
+  return (
+    <div
+      className='relative h-full w-full'
+      data-name='ic_circle_check_outline'
+      {...props}
+    >
+      <div className='absolute inset-[8.33%]'>
+        <svg
+          preserveAspectRatio='none'
+          width='100%'
+          height='100%'
+          viewBox='0 0 20 20'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className='block size-full max-w-none'
+        >
+          <g id='Group 1'>
+            <path
+              id='Vector 11'
+              d='M6.64722 10L8.88241 12.5146L13.1987 8.19459'
+              stroke='currentColor'
+              strokeWidth='1.5'
+              strokeLinecap='round'
+              strokeLinejoin='round'
+            />
+            <path
+              id='Vector'
+              d='M10 0C8.02219 0 6.08879 0.58649 4.4443 1.6853C2.79981 2.78412 1.51809 4.3459 0.761209 6.17316C0.00433286 8.00043 -0.1937 10.0111 0.192152 11.9509C0.578004 13.8907 1.53041 15.6725 2.92894 17.0711C4.32746 18.4696 6.10929 19.422 8.0491 19.8078C9.98891 20.1937 11.9996 19.9957 13.8268 19.2388C15.6541 18.4819 17.2159 17.2002 18.3147 15.5557C19.4135 13.9112 20 11.9778 20 10C19.9971 7.34871 18.9426 4.80684 17.0679 2.9321C15.1932 1.05736 12.6513 0.00286757 10 0V0ZM10 18.3333C8.35183 18.3333 6.74066 17.8446 5.37025 16.9289C3.99984 16.0132 2.93174 14.7117 2.30101 13.189C1.67028 11.6663 1.50525 9.99075 1.82679 8.37425C2.14834 6.75774 2.94201 5.27288 4.10745 4.10744C5.27288 2.94201 6.75774 2.14833 8.37425 1.82679C9.99076 1.50525 11.6663 1.67027 13.189 2.301C14.7117 2.93173 16.0132 3.99984 16.9289 5.37025C17.8446 6.74066 18.3333 8.35182 18.3333 10C18.3309 12.2094 17.4522 14.3276 15.8899 15.8899C14.3276 17.4522 12.2094 18.3309 10 18.3333V18.3333Z'
+              fill='currentColor'
+            />
+          </g>
+        </svg>
+      </div>
+    </div>
+  );
+}

src/shared/assets/icons/IcCircleXFilled.tsx

@@ -0,0 +1,36 @@
+import type { HTMLAttributes } from 'react';
+
+export default function IcCircleXFilled(props: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className='relative h-full w-full'
+      data-name='ic_circle_x_filled'
+      {...props}
+    >
+      <div className='absolute inset-[8.33%]'>
+        <svg
+          preserveAspectRatio='none'
+          width='100%'
+          height='100%'
+          viewBox='0 0 20 20'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className='block size-full max-w-none'
+        >
+          <g id='Group 1'>
+            <path
+              id='Vector'
+              d='M13.3333 6.66679C13.177 6.51056 12.9651 6.4228 12.7441 6.4228C12.5231 6.4228 12.3112 6.51056 12.1549 6.66679L9.99995 8.82179L7.84496 6.66679C7.68779 6.51499 7.47729 6.43099 7.25879 6.43289C7.04029 6.43479 6.83128 6.52243 6.67678 6.67694C6.52227 6.83144 6.43463 7.04045 6.43273 7.25895C6.43083 7.47745 6.51483 7.68795 6.66662 7.84512L8.82162 10.0001L6.66662 12.1551C6.51483 12.3123 6.43083 12.5228 6.43273 12.7413C6.43463 12.9598 6.52227 13.1688 6.67678 13.3233C6.83128 13.4778 7.04029 13.5654 7.25879 13.5673C7.47729 13.5692 7.68779 13.4852 7.84496 13.3335L9.99995 11.1785L12.1549 13.3335C12.3121 13.4852 12.5226 13.5692 12.7411 13.5673C12.9596 13.5654 13.1686 13.4778 13.3231 13.3233C13.4776 13.1688 13.5653 12.9598 13.5672 12.7413C13.5691 12.5228 13.4851 12.3123 13.3333 12.1551L11.1783 10.0001L13.3333 7.84512C13.4895 7.68885 13.5773 7.47692 13.5773 7.25595C13.5773 7.03498 13.4895 6.82306 13.3333 6.66679Z'
+              fill='currentColor'
+            />
+            <path
+              id='Vector_2'
+              d='M10 0C8.02219 0 6.08879 0.58649 4.4443 1.6853C2.79981 2.78412 1.51809 4.3459 0.761209 6.17316C0.00433286 8.00043 -0.1937 10.0111 0.192152 11.9509C0.578004 13.8907 1.53041 15.6725 2.92894 17.0711C4.32746 18.4696 6.10929 19.422 8.0491 19.8078C9.98891 20.1937 11.9996 19.9957 13.8268 19.2388C15.6541 18.4819 17.2159 17.2002 18.3147 15.5557C19.4135 13.9112 20 11.9778 20 10C19.9971 7.34871 18.9426 4.80684 17.0679 2.9321C15.1932 1.05736 12.6513 0.00286757 10 0V0ZM10 18.3333C8.35183 18.3333 6.74066 17.8446 5.37025 16.9289C3.99984 16.0132 2.93174 14.7117 2.30101 13.189C1.67028 11.6663 1.50525 9.99075 1.82679 8.37425C2.14834 6.75774 2.94201 5.27288 4.10745 4.10744C5.27288 2.94201 6.75774 2.14833 8.37425 1.82679C9.99076 1.50525 11.6663 1.67027 13.189 2.301C14.7117 2.93173 16.0132 3.99984 16.9289 5.37025C17.8446 6.74066 18.3333 8.35182 18.3333 10C18.3309 12.2094 17.4522 14.3276 15.8899 15.8899C14.3276 17.4522 12.2094 18.3309 10 18.3333V18.3333Z'
+              fill='currentColor'
+            />
+          </g>
+        </svg>
+      </div>
+    </div>
+  );
+}

src/shared/assets/icons/IcCircleXOutline.tsx

@@ -0,0 +1,34 @@
+import type { HTMLAttributes } from 'react';
+
+export default function IcCircleXOutline(
+  props: HTMLAttributes<HTMLDivElement>,
+) {
+  return (
+    <div
+      className='relative h-full w-full'
+      data-name='ic_circle_x_outline'
+      {...props}
+    >
+      <div className='absolute inset-[8.33%]'>
+        <svg
+          preserveAspectRatio='none'
+          width='100%'
+          height='100%'
+          viewBox='0 0 16.5 17.5'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className='block size-full max-w-none'
+        >
+          <path
+            id='Vector'
+            d='M5.81667 7.59443L10.6833 4.57221M5.81667 9.90555L10.6833 12.9278M0.75 8.75C0.75 9.45724 1.03095 10.1355 1.53105 10.6356C2.03115 11.1357 2.70942 11.4167 3.41667 11.4167C4.12391 11.4167 4.80219 11.1357 5.30229 10.6356C5.80238 10.1355 6.08333 9.45724 6.08333 8.75C6.08333 8.04276 5.80238 7.36448 5.30229 6.86438C4.80219 6.36428 4.12391 6.08333 3.41667 6.08333C2.70942 6.08333 2.03115 6.36428 1.53105 6.86438C1.03095 7.36448 0.75 8.04276 0.75 8.75ZM10.4167 3.41667C10.4167 4.12391 10.6976 4.80219 11.1977 5.30229C11.6978 5.80238 12.3761 6.08333 13.0833 6.08333C13.7906 6.08333 14.4689 5.80238 14.969 5.30229C15.469 4.80219 15.75 4.12391 15.75 3.41667C15.75 2.70942 15.469 2.03115 14.969 1.53105C14.4689 1.03095 13.7906 0.75 13.0833 0.75C12.3761 0.75 11.6978 1.03095 11.1977 1.53105C10.6976 2.03115 10.4167 2.70942 10.4167 3.41667ZM10.4167 14.0833C10.4167 14.7906 10.6976 15.4689 11.1977 15.969C11.6978 16.469 12.3761 16.75 13.0833 16.75C13.7906 16.75 14.4689 16.469 14.969 15.969C15.469 15.4689 15.75 14.7906 15.75 14.0833C15.75 13.3761 15.469 12.6978 14.969 12.1977C14.4689 11.6976 13.7906 11.4167 13.0833 11.4167C12.3761 11.4167 11.6978 11.6976 11.1977 12.1977C10.6976 12.6978 10.4167 13.3761 10.4167 14.0833Z'
+            stroke='var(--stroke-0, #4E5968)'
+            strokeWidth='1.5'
+            strokeLinecap='round'
+            strokeLinejoin='round'
+          />
+        </svg>
+      </div>
+    </div>
+  );
+}

src/shared/assets/icons/IcHamburger.tsx

@@ -0,0 +1,33 @@
+import type { HTMLAttributes } from 'react';
+
+export default function IcHamburger(props: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div className='relative h-full w-full' data-name='ic_hamburger' {...props}>
+      <div className='absolute top-1/4 right-[16.67%] bottom-1/4 left-[16.67%]'>
+        <div
+          className='absolute inset-[-6.25%_-4.69%]'
+          style={{ '--stroke-0': 'currentColor' } as React.CSSProperties}
+        >
+          <svg
+            preserveAspectRatio='none'
+            width='100%'
+            height='100%'
+            viewBox='0 0 17.5 13.5'
+            fill='none'
+            xmlns='http://www.w3.org/2000/svg'
+            className='block size-full max-w-none'
+          >
+            <path
+              id='Vector'
+              d='M0.75 0.75H16.75M0.75 6.75H16.75M0.75 12.75H16.75'
+              stroke='var(--stroke-0, #4E5968)'
+              strokeWidth='1.5'
+              strokeLinecap='round'
+              strokeLinejoin='round'
+            />
+          </svg>
+        </div>
+      </div>
+    </div>
+  );
+}

src/shared/assets/icons/IcInfoFilled.tsx

@@ -0,0 +1,36 @@
+import type { HTMLAttributes } from 'react';
+
+export default function IcInfoFilled(props: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className='relative h-full w-full'
+      data-name='ic_info_filled'
+      {...props}
+    >
+      <div className='absolute inset-[8.33%]'>
+        <svg
+          preserveAspectRatio='none'
+          width='100%'
+          height='100%'
+          viewBox='0 0 20 20'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className='block size-full max-w-none'
+        >
+          <g id='Group 1'>
+            <path
+              id='Exclude'
+              d='M10 0.811523C14.9363 0.811524 18.9375 4.81369 18.9375 9.75C18.9375 14.6863 14.9363 18.6875 10 18.6875C5.06371 18.6875 1.06156 14.6863 1.06152 9.75C1.06152 4.81369 5.06369 0.811523 10 0.811523ZM13.7295 7.66406C13.4366 7.37139 12.9608 7.3713 12.668 7.66406L8.91406 11.4209L7.20801 9.50195C6.93289 9.19248 6.459 9.16452 6.14941 9.43945C5.83984 9.71464 5.81175 10.1885 6.08691 10.498L8.32227 13.0127C8.45943 13.1669 8.65405 13.2575 8.86035 13.2637C9.06679 13.2696 9.26711 13.1901 9.41309 13.0439L13.7295 8.72461C14.0219 8.43169 14.0221 7.95678 13.7295 7.66406Z'
+              fill='currentColor'
+            />
+            <path
+              id='Vector'
+              d='M10 0C8.02219 0 6.08879 0.58649 4.4443 1.6853C2.79981 2.78412 1.51809 4.3459 0.761209 6.17316C0.00433286 8.00043 -0.1937 10.0111 0.192152 11.9509C0.578004 13.8907 1.53041 15.6725 2.92894 17.0711C4.32746 18.4696 6.10929 19.422 8.0491 19.8078C9.98891 20.1937 11.9996 19.9957 13.8268 19.2388C15.6541 18.4819 17.2159 17.2002 18.3147 15.5557C19.4135 13.9112 20 11.9778 20 10C19.9971 7.34871 18.9426 4.80684 17.0679 2.9321C15.1932 1.05736 12.6513 0.00286757 10 0V0ZM10 18.3333C8.35183 18.3333 6.74066 17.8446 5.37025 16.9289C3.99984 16.0132 2.93174 14.7117 2.30101 13.189C1.67028 11.6663 1.50525 9.99075 1.82679 8.37425C2.14834 6.75774 2.94201 5.27288 4.10745 4.10744C5.27288 2.94201 6.75774 2.14833 8.37425 1.82679C9.99076 1.50525 11.6663 1.67027 13.189 2.301C14.7117 2.93173 16.0132 3.99984 16.9289 5.37025C17.8446 6.74066 18.3333 8.35182 18.3333 10C18.3309 12.2094 17.4522 14.3276 15.8899 15.8899C14.3276 17.4522 12.2094 18.3309 10 18.3333V18.3333Z'
+              fill='currentColor'
+            />
+          </g>
+        </svg>
+      </div>
+    </div>
+  );
+}