Merge pull request #34 from IT-Cotato/hotfix/TK-2_apply_login_state_m…

…obile_header Hotfix/TK-2 apply login state mobile header
IT-Cotato · Jun 28, 2024 · 6e9c7eb · 6e9c7eb
2 parents 51017d4 + ceaf3b5
commit 6e9c7eb
Showing 1 changed file with 49 additions and 12 deletions.
diff --git a/src/components/MobileSideMenuDrawer.tsx b/src/components/MobileSideMenuDrawer.tsx
@@ -15,6 +15,8 @@ import CotatoToggleSwitch from './CotatoToggleSwitch';
 import LoginIconSvgComponent from './LoginIconSvgComponent';
 import { ThemeContext } from '@theme/context/CotatoThemeProvider';
 import { COTATO_LIGHT_THEME, THEME_CHANGE_TRANSITION } from '@theme/constants/constants';
+import fetchUserData from '@utils/fetchUserData';
+import { getMemberRoleIcon } from '@utils/getMemberRoleIcon';
 
 //
 //
@@ -44,6 +46,7 @@ const MENU_ICON_MAP = {
 //
 
 const MobileSideMenuDrawer: React.FC<MobileSideMenuDrawerProps> = ({ navList, open, onClose }) => {
+  const { data: user } = fetchUserData();
   const [isAnimating, setIsAnimating] = React.useState<boolean>(false);
   const drawerRef = React.useRef<HTMLDivElement>(null);
   const { DefaultTheme, onChangeTheme } = React.useContext(ThemeContext);
@@ -69,6 +72,46 @@ const MobileSideMenuDrawer: React.FC<MobileSideMenuDrawerProps> = ({ navList, op
     return <StyledTitle>MENU</StyledTitle>;
   };
 
+  /**
+   * render member component if user is logged in
+   */
+  const renderMember = () => {
+    if (!user) {
+      return null;
+    }
+
+    return (
+      <Link component={Link} href="/mypage" underline="none">
+        <ListItem
+          sx={{
+            gap: '0.5rem',
+          }}
+        >
+          <MemberRoleIcon src={getMemberRoleIcon(user.role)} />
+          <StyledLinkTypography>{user.memberName}</StyledLinkTypography>
+        </ListItem>
+      </Link>
+    );
+  };
+
+  /**
+   * render login component if user is not logged in
+   */
+  const renderLogin = () => {
+    return (
+      <Link component={Link} href="/signin" underline="none">
+        <ListItem
+          sx={{
+            gap: '0.5rem',
+          }}
+        >
+          <LoginIconSvgComponent />
+          <StyledLinkTypography>로그인</StyledLinkTypography>
+        </ListItem>
+      </Link>
+    );
+  };
+
   /**
    *
    */
@@ -96,18 +139,7 @@ const MobileSideMenuDrawer: React.FC<MobileSideMenuDrawerProps> = ({ navList, op
             margin: 'auto',
           }}
         />
-        <StyledListItemButton>
-          <Link component={Link} href="/signin" underline="none">
-            <ListItem
-              sx={{
-                gap: '0.5rem',
-              }}
-            >
-              <LoginIconSvgComponent />
-              <StyledLinkTypography>로그인</StyledLinkTypography>
-            </ListItem>
-          </Link>
-        </StyledListItemButton>
+        <StyledListItemButton>{user ? renderMember() : renderLogin()}</StyledListItemButton>
         <StyledSwitchDiv>
           <Tooltip arrow title="실험적 기능으로 아직 완벽하지 않을 수 있습니다." placement="top">
             {DefaultTheme === COTATO_LIGHT_THEME ? (
@@ -254,3 +286,8 @@ const StyledSwitchDiv = styled.div`
     margin-bottom: 0.5rem;
   }
 `;
+
+const MemberRoleIcon = styled.img`
+  width: 1.5rem;
+  height: 1.5rem;
+`;