[Feat/#133] 로그인 로그아웃 라우팅

src/pages/main/Main.tsx

@@ -5,7 +5,7 @@ import FaqDropdown from './components/FaqDropdown';
 import FaqTitle from './components/FaqTitle';
 import GroupCarouselTitle from './components/GroupCarouselTitle';
 import Introduction from './components/Introduction';
-import { MainHeader } from './components/MainHeader';
+import { LogInHeader, UnAuthorizationHeader } from './components/MainHeader';
 import Manual from './components/Manual';
 import OnBoarding from './components/OnBoarding';
 import Ruler from './components/Ruler';
@@ -17,7 +17,7 @@ import Spacing from './../../components/commons/Spacing';
 const Main = () => {
   return (
     <MainPageWrapper>
-      <MainHeader />
+      {localStorage.getItem('accessToken') === null ? <UnAuthorizationHeader /> : <LogInHeader />}
       <OnBoarding />
       <CarouselComponentLayout>
         <GroupCarouselTitle />

src/pages/main/components/CarouselSkeleton.tsx

@@ -0,0 +1,45 @@
+import styled from '@emotion/styled/macro';
+import React from 'react';
+import 'react-loading-skeleton/dist/skeleton.css';
+
+interface skeletonPropTypes {
+  width?: number;
+  height?: number;
+  circle?: boolean;
+  rounded?: boolean;
+  count?: number;
+  unit?: string; // 단위
+  animation?: boolean;
+  color?: string;
+  style?: React.CSSProperties;
+}
+
+const CarouselSkeleton = ({
+  width,
+  height,
+  circle,
+  rounded,
+  count,
+  unit,
+  animation,
+  color,
+  style,
+}: skeletonPropTypes) => {
+  return (
+    <SkeletonWrapper
+      width={width}
+      height={height}
+      circle={circle}
+      rounded={rounded}
+      count={count}
+      unit={unit}
+      animation={animation}
+      color={color}
+      style={style}
+    />
+  );
+};
+
+export default CarouselSkeleton;
+
+const SkeletonWrapper = styled.div``;

src/pages/main/components/MainHeader.tsx

@@ -9,15 +9,21 @@ import MakeGroupBtn from '../../groupFeed/components/MakeGroupBtn';
 import MyGroupBtn from '../../groupFeed/components/MyGroupBtn';
 
 // 메인 페이지 헤더
-export const MainHeader = () => {
+export const LogInHeader = () => {
+  const handleLogOut = () => {
+    logout();
+    alert('로그아웃 되었습니다');
+    location.reload();
+  };
+
   return (
     <HeaderWrapper>
       <HeaderLogoIc />
       <HeaderBtnLayout>
         <MyGroupBtn />
         <CommonBtnLayout>
           <MakeGroupBtn />
-          <LogInOutBtn onClick={logout}>로그아웃</LogInOutBtn>
+          <LogInOutBtn onClick={handleLogOut}>로그아웃</LogInOutBtn>
         </CommonBtnLayout>
       </HeaderBtnLayout>
     </HeaderWrapper>