Merge pull request #19 from Findy-org/feat/#13-marker

[FEAT] Marker 컴포넌트, 스토리북

src/assets/icons/index.tsx

@@ -16,6 +16,7 @@ import KakaoLogin from './kakao-login.svg?react';
 import Link from './link.svg?react';
 import Location from './location.svg?react';
 import Map from './map.svg?react';
+import Marker from './marker.svg?react';
 import NaverLogin from './naver-login.svg?react';
 import Other from './other.svg?react';
 import Public from './public.svg?react';
@@ -38,6 +39,7 @@ export const Icons = {
   link: Link,
   map: Map,
   location: Location,
+  marker: Marker,
   kakaoLogin: KakaoLogin,
   naverLogin: NaverLogin,
   findy1: Findy1,

src/components/common/Marker/Marker.stories.tsx

@@ -0,0 +1,39 @@
+/* eslint-disable no-restricted-exports */
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { MARKER_CATEGORIES } from '@/constants/categories';
+
+import { Marker } from '.';
+
+const meta = {
+  title: 'components/common/Marker',
+  component: Marker,
+  tags: ['autodocs'],
+} satisfies Meta<typeof Marker>;
+
+export default meta;
+type Story = StoryObj<typeof Marker>;
+
+export const Basic: Story = {
+  args: {
+    categoryName: 'restaurant',
+  },
+  argTypes: {
+    categoryName: { control: { type: 'select' }, options: MARKER_CATEGORIES },
+  },
+  render: (args) => {
+    return <Marker {...args} />;
+  },
+};
+
+export const ALL: Story = {
+  render: () => {
+    return (
+      <>
+        {MARKER_CATEGORIES.map((item) => (
+          <Marker key={item} categoryName={item} />
+        ))}
+      </>
+    );
+  },
+};

src/components/common/Marker/Marker.types.ts

@@ -0,0 +1,10 @@
+import { ComponentPropsWithoutRef } from 'react';
+
+import { MarkerCategory } from '@/constants/categories';
+
+export type Props = {
+  /**
+   * category name to be displayed.
+   */
+  categoryName: MarkerCategory;
+} & ComponentPropsWithoutRef<'button'>;

src/components/common/Marker/index.tsx

@@ -0,0 +1,30 @@
+import MarkerIcon from '@/assets/icons/marker.svg';
+
+import { Props } from './Marker.types';
+
+import { Icon } from '../Icon';
+
+export const Marker = ({ categoryName, ...props }: Props) => {
+  const ICON_SIZE = 35;
+  const ICON_POSITIONS = {
+    default: { left: '51%', top: '1/2' },
+    restaurant: { left: '51%', top: '[55%]' },
+  };
+
+  const position =
+    categoryName === 'restaurant' ? ICON_POSITIONS.restaurant : ICON_POSITIONS.default;
+  return (
+    <button
+      aria-label={`${categoryName} location marker`}
+      className="relative inline-block"
+      {...props}
+    >
+      <MarkerIcon />
+      <Icon
+        name={categoryName}
+        size={ICON_SIZE}
+        className={`absolute left-[${position.left}] top-${position.top} -translate-x-1/2 -translate-y-1/2`}
+      />
+    </button>
+  );
+};

src/constants/categories.ts

@@ -0,0 +1,11 @@
+export const MARKER_CATEGORIES = [
+  'restaurant',
+  'cafe',
+  'bar',
+  'shopping',
+  'travel',
+  'public',
+  'hospital',
+  'other',
+] as const;
+export type MarkerCategory = (typeof MARKER_CATEGORIES)[number];