Merge pull request #200 from boostcampwm-2024/feature/fe/#194-userboard

[FE][Feat] #194 : userboard 구현

frontend/src/component/userboard/UserBoard.tsx

@@ -0,0 +1,52 @@
+import classNames from 'classnames';
+import { HiLocationMarker } from 'react-icons/hi';
+
+const users = [
+  {
+    name: '사용자1',
+    markerColor: 'text-marker-user1',
+  },
+  {
+    name: '사용자2',
+    markerColor: 'text-marker-user2',
+  },
+  {
+    name: '사용자3',
+    markerColor: 'text-marker-user3',
+  },
+  {
+    name: '사용자4',
+    markerColor: 'text-marker-user4',
+  },
+  {
+    name: '사용자5',
+    markerColor: 'text-marker-user5',
+  },
+];
+// mock데이터 작성, 추후 context 를 이용해 dropdown과 연동
+
+/**
+ * UserBoard 컴포넌트는 지도 위 오버레이가 되며, 현재 경로의 사용자 및 선택된 사용자를 색상과 함께 표시합니다.
+ * @remarks
+ * 파라미터 혹은 전역 상태로 받은 유저를 역순으로 아래부터 보여줍니다.
+ * @example
+ * return (
+ *   <UserBoard />
+ * )
+ */
+
+export const UserBoard = () => {
+  return (
+    <div className="absolute bottom-2.5 right-7 z-[4050] flex flex-col gap-1.5">
+      {users
+        .slice()
+        .reverse()
+        .map(user => (
+          <div className="flex flex-row items-center justify-center gap-1">
+            <HiLocationMarker className={classNames(user.markerColor, 'w-5', 'h-5')} />
+            <div className="text-2xs">{user.name}</div>
+          </div>
+        ))}
+    </div>
+  );
+};

frontend/src/stories/userboard/userboard.stories.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import '@/index.css';
+import { Meta, StoryFn } from '@storybook/react';
+import { UserBoard } from '@/component/userboard/UserBoard';
+
+export default {
+  title: 'Components/UserBoard', // Storybook의 사이드바에 표시될 경로
+  component: UserBoard,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen', // Storybook 뷰를 중앙에 정렬
+  },
+  decorators: [
+    Story => (
+      <div style={{ position: 'relative', width: '100%', height: '100vh' }}>
+        <Story />
+      </div>
+    ),
+  ],
+} as Meta;
+
+const Template: StoryFn = args => <UserBoard {...args} />;
+
+export const Default = Template.bind({});