[FE][Feat] #374 : HostView 정렬 순서 수정 및 Dropdown 동작 안하는 오류 수정

boostcampwm-2024 · Dec 3, 2024 · 97d4144 · 97d4144
1 parent 51d1c20
commit 97d4144
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 19 deletions.
diff --git a/frontend/src/component/layout/Layout.tsx b/frontend/src/component/layout/Layout.tsx
@@ -2,21 +2,24 @@ import { Outlet } from 'react-router-dom';
 import { LayoutHeader } from '@/component/layout/header/LayoutHeader.tsx';
 import { HeaderDropdownProvider } from '@/component/header/HeaderDropdownProvider.tsx';
 import { LayoutFooterProvider } from '@/component/layout/footer/LayoutFooterProvider';
+import { ToggleProvider } from '@/context/DropdownContext.tsx';
 import { LayoutFooter } from './footer/LayoutFooter';
 
 export const Layout = () => {
   return (
-    <HeaderDropdownProvider>
-      <main>
-        {/* LayoutHeader는 HeaderContext를 사용하므로 LayoutHeaderProvider로 감쌈 */}
-        <LayoutHeader />
+    <ToggleProvider>
+      <HeaderDropdownProvider>
+        <main>
+          {/* LayoutHeader는 HeaderContext를 사용하므로 LayoutHeaderProvider로 감쌈 */}
+          <LayoutHeader />
 
-        {/* LayoutFooterProvider로 Outlet을 감싸서 FooterContext도 제공 */}
-        <LayoutFooterProvider>
-          <Outlet />
-          <LayoutFooter />
-        </LayoutFooterProvider>
-      </main>
-    </HeaderDropdownProvider>
+          {/* LayoutFooterProvider로 Outlet을 감싸서 FooterContext도 제공 */}
+          <LayoutFooterProvider>
+            <Outlet />
+            <LayoutFooter />
+          </LayoutFooterProvider>
+        </main>
+      </HeaderDropdownProvider>
+    </ToggleProvider>
   );
 };
diff --git a/frontend/src/pages/HostView.tsx b/frontend/src/pages/HostView.tsx
@@ -118,6 +118,20 @@ export const HostView = () => {
       .then(res => {
         if (!res.data) throw new Error('🚀 Fetch Error: responsed undefined');
         const transfromedData = transformTypeFromResToInfo(res.data);
+
+        const orderedGuest: IGuest[] = [];
+
+        markerDefaultColor.forEach(color => {
+          const guest = transfromedData.guests.find(
+            guestData => guestData.markerStyle.color === color,
+          );
+          if (guest) {
+            orderedGuest.push(guest);
+          }
+        });
+
+        transfromedData.guests = orderedGuest;
+
         setChannelInfo(transfromedData);
       })
       .catch((err: any) => {
@@ -147,14 +161,9 @@ export const HostView = () => {
 
       if (clickedId === '') {
         setMapProps([]);
-        const tmpMapProps: IGuestDataInMapProps[] = [];
-        // TODO : 차후 로직 개선하기
-        channelInfo.guests?.map(guest => tmpMapProps.push(guest as IGuestDataInMapProps));
-        const orderedMapProps: IGuestDataInMapProps[] = [];
-        markerDefaultColor.forEach(color => {
-          orderedMapProps.push(...tmpMapProps.filter(guest => guest.markerStyle.color === color));
-        });
-        setMapProps([...orderedMapProps]);
+        channelInfo.guests?.map(guest =>
+          setMapProps(prev => [...prev, guest as IGuestDataInMapProps]),
+        );
       } else {
         setMapProps(channelInfo.guests?.filter(guest => guest.id === clickedId));
       }