[FE][Feature] #113, #114 : 손녀 기준 화면 우측 하단에 가이드 추가 및 드랍다운 버튼 상태 반영

frontend/package.json

@@ -57,6 +57,7 @@
     "typescript": "~5.6.2",
     "typescript-eslint": "^8.11.0",
     "vite": "^5.4.10",
+    "vite-plugin-svgr": "^4.3.0",
     "vite-tsconfig-paths": "^5.1.1"
   },
   "eslintConfig": {

frontend/src/api/channel.api.ts

@@ -2,6 +2,7 @@ import { ResponseDto } from '@/api/dto/response.dto.ts';
 import {
   createChannelReqEntity,
   createChannelResEntity,
+  getChannelResEntity,
   getUserChannelsResEntity,
 } from '@/api/dto/channel.dto.ts';
 import { getApiClient } from '@/api/client.api.ts';
@@ -56,9 +57,9 @@ export const getUserChannels = (userId: string): Promise<ResponseDto<getUserChan
   return new Promise(promiseFn);
 };
 
-export const getChannelInfo = (userId: string): Promise<ResponseDto<createChannelReqEntity>> => {
+export const getChannelInfo = (userId: string): Promise<ResponseDto<getChannelResEntity>> => {
   const promiseFn = (
-    fnResolve: (value: ResponseDto<createChannelReqEntity>) => void,
+    fnResolve: (value: ResponseDto<getChannelResEntity>) => void,
     fnReject: (reason?: any) => void,
   ) => {
     const apiClient = getApiClient();
@@ -69,7 +70,7 @@ export const getChannelInfo = (userId: string): Promise<ResponseDto<createChanne
           console.error(res);
           fnReject(`msg.${res}`);
         } else {
-          fnResolve(new ResponseDto<createChannelReqEntity>(res.data));
+          fnResolve(new ResponseDto<getChannelResEntity>(res.data));
         }
       })
       .catch(err => {

frontend/src/api/dto/channel.dto.ts

@@ -9,6 +9,8 @@ export class guestMarkerStyleEntity {
 }
 
 export class guestEntity {
+  id: string | undefined;
+
   name: string | undefined;
 
   start_location: locationEntity | undefined;
@@ -57,3 +59,13 @@ export class channelListEntity {
 export class getUserChannelsResEntity {
   channels: channelListEntity[] | undefined;
 }
+
+export class getChannelResEntity {
+  id: string | undefined;
+
+  name: string | undefined;
+
+  host_id: string | undefined;
+
+  guests: guestEntity[] | undefined;
+}

frontend/src/component/canvasWithMap/canvasWithMapForView/MapCanvasForView.tsx

@@ -36,6 +36,7 @@ export const MapCanvasForView = ({
 
     endImageRef.current = new Image();
     endImageRef.current.src = endmarker;
+    console.log(guests);
   }, []);
 
   useEffect(() => {

frontend/src/component/common/dropdown/DropdownItem.tsx

@@ -1,40 +1,27 @@
 import { ReactNode } from 'react';
 import classNames from 'classnames';
+import { useLocation, useNavigate } from 'react-router-dom';
 
 interface IDropdownItemProps {
-  /** 드롭다운 아이템 내용 */
   children: ReactNode;
-  /** 버튼 클릭 시 실행할 함수 */
-  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  path?: string;
   className?: string;
 }
 
-/**
- * 드롭다운 메뉴의 아이템 컴포넌트입니다.
- *
- * @param {ReactNode} children - 드롭다운 아이템 내용
- * @param {React.MouseEventHandler<HTMLButtonElement>} onClick - 버튼 클릭 시 실행할 함수
- * @return {JSX.Element} 드롭다운 아이템 컴포넌트
- *
- * @remarks
- * - 드롭다운 아이템 컴포넌트는 드롭다운 메뉴 내부에서 사용되어야 합니다.
- * - 드롭다운 아이템 컴포넌트는 드롭다운 메뉴의 아이템 역할을 수행합니다.
- * - 드롭다운 아이템 컴포넌트는 버튼 역할을 수행합니다.
- * - 드롭다운 아이템 컴포넌트는 클릭 시 onClick 함수를 실행합니다.
- *
- * @example
- * ```tsx
- * <Dropdown.Item onClick={handleOnClick}>아이템</Dropdown.Item>
- * ```
- */
-
 export const DropdownItem = (props: IDropdownItemProps) => {
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  const handleClick = () => {
+    navigate(`${location.pathname}/${props.path}`);
+  };
+
   return (
     <li className={classNames('list-none px-3 py-1.5 text-base', props.className)}>
       <button
         type="button"
-        className="flex w-full items-center justify-between whitespace-nowrap bg-transparent"
-        onClick={props.onClick}
+        className="flex w-full items-center justify-between gap-2 whitespace-nowrap bg-transparent"
+        onClick={handleClick}
       >
         {props.children}
       </button>

frontend/src/component/header/Header.tsx

@@ -5,6 +5,7 @@ import { HeaderTitle } from '@/component/header/HeaderTitle.tsx';
 import { HeaderMainLayout } from '@/component/header/HeaderMainLayout.tsx';
 import { HeaderSubtitle } from '@/component/header/HeaderSubtitle.tsx';
 import classNames from 'classnames';
+import { IGuestData } from '@/types/channel.types.ts';
 
 interface IHeaderProps {
   children: ReactNode;
@@ -16,7 +17,7 @@ export interface IHeaderOption {
   rightButton?: string;
   title?: ReactNode;
   subtitle?: string;
-  items?: string[];
+  items?: string[] | IGuestData[];
 }
 
 export const Header = (props: IHeaderProps) => {

frontend/src/component/header/HeaderDropdown.tsx

@@ -1,35 +1,26 @@
 import { Dropdown } from '@/component/common/dropdown/Dropdown.tsx';
 import { MdMenu, MdLocationOn } from 'react-icons/md';
 import { DropdownItem } from '@/component/common/dropdown/DropdownItem.tsx';
-import classNames from 'classnames';
+import { IGuestData } from '@/types/channel.types.ts';
 
 interface IDropdownContainerProps {
-  items: string[];
+  items: IGuestData[];
 }
 
 export const HeaderDropdown = (props: IDropdownContainerProps) => {
-  // TODO: 하드코딩된 자료 말고 마커 색상 가져오기
-  const textMarkerUser = [
-    'text-marker-user1',
-    'text-marker-user2',
-    'text-marker-user3',
-    'text-marker-user4',
-    'text-marker-user5',
-  ];
-
   const DropdownItems = () => {
-    const Items = props.items.map((e, i) => {
+    const Items = props.items.map(guestData => {
       return (
-        <DropdownItem key={e}>
-          {e}
-          <MdLocationOn className={classNames(`h-5 w-5 fill-current ${textMarkerUser[i]}`)} />
+        <DropdownItem key={guestData.id} path={`../guest/${guestData.id}`}>
+          <span>{guestData.name} 위치</span>
+          <MdLocationOn className="h-5 w-5 fill-current" color={guestData.markerStyle.color} />
         </DropdownItem>
       );
     });
 
     if (Items.length > 1) {
       Items.push(
-        <DropdownItem key="showall" className="text-gray-400">
+        <DropdownItem key="showall" path="host">
           모두 보기
         </DropdownItem>,
       );

frontend/src/component/layout/header/LayoutHeaderProvider.tsx

@@ -1,5 +1,6 @@
 import { ReactNode, createContext, useReducer, useMemo, useCallback } from 'react';
 import { IHeaderOption } from '@/component/header/Header.tsx';
+import { IGuestData } from '@/types/channel.types.ts';
 
 interface ILayoutHeaderProviderProps {
   children: ReactNode;
@@ -11,7 +12,7 @@ interface IHeaderOptionContext {
   setSubTitle: (subtitle: string) => void;
   setLeftButton: (leftButton: string) => void;
   setRightButton: (rightButton: string) => void;
-  setItems: (items: string[]) => void;
+  setItems: (items: IGuestData[]) => void;
   resetHeaderContext: () => void;
 }
 
@@ -38,7 +39,7 @@ type Action =
   | { type: 'SET_SUBTITLE'; payload: string }
   | { type: 'SET_LEFT_BUTTON'; payload: string }
   | { type: 'SET_RIGHT_BUTTON'; payload: string }
-  | { type: 'SET_ITEMS'; payload: string[] };
+  | { type: 'SET_ITEMS'; payload: IGuestData[] };
 
 const headerReducer = (state: IHeaderOption, action: Action): IHeaderOption => {
   switch (action.type) {
@@ -76,7 +77,7 @@ export const LayoutHeaderProvider = (props: ILayoutHeaderProviderProps) => {
     dispatch({ type: 'SET_RIGHT_BUTTON', payload: rightButton });
   }, []);
 
-  const setItems = useCallback((items: string[]) => {
+  const setItems = useCallback((items: IGuestData[]) => {
     dispatch({ type: 'SET_ITEMS', payload: items });
   }, []);
 

frontend/src/component/userMarker/UserMarker.tsx

@@ -0,0 +1,21 @@
+import { MdLocationOn } from 'react-icons/md';
+import { IGuestData } from '@/types/channel.types.ts';
+
+interface IUserMarkerProps {
+  userData: IGuestData[];
+}
+
+export const UserMarker = (props: IUserMarkerProps) => {
+  return (
+    <div className="z-4000 absolute bottom-8 right-5 w-fit text-base">
+      <ul className="flex flex-col gap-1">
+        {props.userData.map(data => (
+          <li key={data.name} className="flex items-center">
+            <MdLocationOn color={data.markerStyle.color} className="size-5" />
+            {data.name}
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};

frontend/src/lib/types/canvasInterface.ts

@@ -25,12 +25,17 @@ export interface IOtherLiveLocations {
   token: string;
 }
 
+export interface IMarkerStyle {
+  color: string;
+}
+
 export interface IGuestDataInMapProps {
-  guestName: string;
-  guestUUID: string;
+  id: string;
+  name: string;
   startPoint: IPoint;
   endPoint: IPoint;
   paths: IPoint[];
+  markerStyle: IMarkerStyle;
 }
 
 export interface IMapCanvasViewProps {