feat: home ui (#develop)

Author: createhb21

services/ahhachul.com/src/App.tsx

@@ -1,8 +1,6 @@
-import { Global, ThemeProvider } from '@emotion/react';
+import React from 'react';
 
-import { QueryClientProvider, AuthProvider, NativeBridge } from '@/contexts';
 import { StackFlow } from '@/stackflow';
-import { globalStyles, theme } from '@/styles';
 
 if (import.meta.env.MODE === 'mock') {
   const { worker } = await import('@/mocks');
@@ -11,16 +9,9 @@ if (import.meta.env.MODE === 'mock') {
 
 function App() {
   return (
-    <NativeBridge>
-      <QueryClientProvider>
-        <Global styles={globalStyles} />
-        <AuthProvider>
-          <ThemeProvider theme={theme}>
-            <StackFlow.Routes />
-          </ThemeProvider>
-        </AuthProvider>
-      </QueryClientProvider>
-    </NativeBridge>
+    <React.Suspense fallback={null}>
+      <StackFlow.Routes />
+    </React.Suspense>
   );
 }
 

services/ahhachul.com/src/apis/request/user.ts

@@ -54,7 +54,7 @@ export const prefetchUserFavoriteStations = async () => {
 export const createUserFavoriteStations = async (stations: any) => {
   const response = await axiosInstance.post<ApiResponse<UserFavoriteStations>>(
     '/members/bookmarks/stations',
-    { stations },
+    { stations: stations.map((item: any) => ({ ...item, stationName: item.stationName + '역' })) },
   );
 
   return response.data;

services/ahhachul.com/src/assets/graphics/character/index.ts

@@ -1,2 +1,3 @@
 export { default as ErrorGraphic } from './error.svg?react';
+export { default as NoticeGraphic } from './notice.svg?react';
 export { default as EmptyGraphic } from './no-results.svg?react';

services/ahhachul.com/src/assets/graphics/character/notice.svg

@@ -28,7 +28,6 @@ const NewBtn = ({
     const action = replace ? replacePage : push;
     action(
       !checkAuth ? activityName : authService.isAuthenticated ? activityName : 'SignInPage',
-      //@ts-expect-error: todo
       {},
       {
         animate: !replace,

services/ahhachul.com/src/assets/icons/system/ic_retry.svg

@@ -33,7 +33,7 @@ export const GNBList: NavItem[] = [
     label: '유실물',
   },
   {
-    href: ['ComplaintPage', 'ComplaintListPage'],
+    href: ['ComplaintPage', 'ComplaintPanelPage'],
     icon: <ComplaintIcon />,
     activeIcon: <ActivatedComplaintIcon />,
     label: '민원',

services/ahhachul.com/src/components/common/float/molecules/newBtn/newBtn.component.tsx

@@ -35,7 +35,6 @@ export const useNavItem = ({
       return;
     }
 
-    //@ts-expect-error: todo
     replace(item.href[0], {}, { animate: false });
   };
 

services/ahhachul.com/src/components/common/gnb/Gnb.constant.tsx

@@ -1,4 +1,5 @@
 import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 
 export const container = css`
   display: flex;
@@ -15,12 +16,16 @@ export const button = css`
   border-radius: 6px;
   padding: 8px 4px;
 
-  color: #272727;
+  color: #ffffff;
   font-size: 18px;
   font-weight: bold;
 
   & > span {
     height: 17px;
+
+    & > svg > g > path {
+      fill: #ffffff;
+    }
   }
 `;
 
@@ -71,3 +76,18 @@ export const option = css`
     }
   }
 `;
+
+export const Container = styled.nav`
+  display: grid;
+  grid-template-columns: repeat(2, 36px);
+  align-items: center;
+  gap: 2px;
+`;
+
+export const navigationButtonStyle = css`
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;

services/ahhachul.com/src/components/common/gnb/navItem/NavItem.hook.ts

@@ -0,0 +1,60 @@
+import { css } from '@emotion/react';
+
+import { BellIcon, TalkIcon } from '@/assets/icons/system';
+import type { NavigationLink } from '@/components/common/header/HeaderActions.type';
+import { useAuth } from '@/contexts';
+import { StackFlow } from '@/stackflow';
+
+import * as S from './HomeHeaderActions.styled';
+
+export const NAVIGATION_LINKS: NavigationLink[] = [
+  {
+    icon: (
+      <TalkIcon
+        css={css`
+          & > path {
+            stroke: #ffffff;
+          }
+        `}
+      />
+    ),
+    authenticatedRoute: 'TalkPage',
+    unauthenticatedRoute: 'SignInPage',
+  },
+  {
+    icon: (
+      <BellIcon
+        css={css`
+          & > path {
+            stroke: #ffffff;
+          }
+        `}
+      />
+    ),
+    authenticatedRoute: 'NotificationPage',
+    unauthenticatedRoute: 'SignInPage',
+  },
+] as const;
+
+const HomeHeaderRightActions = () => {
+  const {
+    authService: { isAuthenticated },
+  } = useAuth();
+
+  return (
+    <S.Container>
+      {NAVIGATION_LINKS.map(({ authenticatedRoute, unauthenticatedRoute, icon }) => (
+        <StackFlow.Link
+          key={authenticatedRoute}
+          activityName={isAuthenticated ? authenticatedRoute : unauthenticatedRoute}
+          activityParams={{}}
+          css={S.navigationButtonStyle}
+        >
+          {icon}
+        </StackFlow.Link>
+      ))}
+    </S.Container>
+  );
+};
+
+export default HomeHeaderRightActions;