feat-fe: 로그아웃

frontend/src/api/domain/auth.ts

@@ -9,6 +9,8 @@ const authApi = {
       path: '/login',
       body: { email, password },
     }),
+
+  logout: async () => apiClient.post({ path: '/logout' }),
 };
 
 export default authApi;

frontend/src/components/common/Spinner/index.tsx

@@ -1,9 +1,12 @@
 import type { StyleProps } from './style';
 import S from './style';
 
-export default function Spinner({ width }: StyleProps) {
+export default function Spinner({ width, color = 'white' }: StyleProps) {
   return (
-    <S.Spinner width={width}>
+    <S.Spinner
+      width={width}
+      color={color}
+    >
       <S.Bounce className="bounce1" />
       <S.Bounce className="bounce2" />
       <S.Bounce />

frontend/src/components/common/Spinner/style.ts

@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
 
 export interface StyleProps {
   width?: number;
+  color?: 'white' | 'primary';
 }
 
 const bounceDelay = keyframes`
@@ -17,6 +18,8 @@ const bounceDelay = keyframes`
 const Spinner = styled.div<StyleProps>`
   --design-width: ${({ width }) => (width ? `${width}px` : '100%')};
   --design-height: ${({ width }) => (width ? `${width * 0.23}px` : '1.8rem')};
+  --design-color: ${({ theme, color }) =>
+    color === 'primary' ? theme.colors.brand.primary : theme.baseColors.grayscale[50]};
 
   display: flex;
   justify-content: center;
@@ -28,7 +31,7 @@ const Bounce = styled.div`
   width: var(--design-height);
   aspect-ratio: 1/1;
 
-  background-color: ${({ theme }) => theme.baseColors.grayscale[50]};
+  background-color: var(--design-color);
   border-radius: 100%;
   animation: ${bounceDelay} 1.4s infinite ease-in-out both;
 

frontend/src/components/dashboard/DashboardSidebar/DashboardSidebar.stories.tsx

@@ -34,4 +34,12 @@ const meta: Meta<typeof DashboardSidebar> = {
 export default meta;
 type Story = StoryObj<typeof DashboardSidebar>;
 
-export const Default: Story = {};
+export const Default: Story = {
+  args: {
+    options: [
+      { text: '우아한테크코스 6기 프론트엔드', isSelected: true, postId: 1 },
+      { text: '우아한테크코스 6기 백엔드', isSelected: false, postId: 2 },
+      { text: '우아한테크코스 6기 안드로이드', isSelected: false, postId: 3 },
+    ],
+  },
+};

frontend/src/components/dashboard/DashboardSidebar/LogoutButton/index.tsx

@@ -0,0 +1,20 @@
+import useSignOut from '@hooks/useSignOut';
+import Spinner from '@components/common/Spinner';
+import S from './style';
+
+export default function LogoutButton() {
+  const { mutate: logout, isPending } = useSignOut();
+
+  return (
+    <S.LogoutButton onClick={() => logout()}>
+      {isPending ? (
+        <Spinner
+          width={40}
+          color="primary"
+        />
+      ) : (
+        '로그아웃'
+      )}
+    </S.LogoutButton>
+  );
+}

frontend/src/components/dashboard/DashboardSidebar/LogoutButton/style.ts

@@ -0,0 +1,17 @@
+import styled from '@emotion/styled';
+
+const LogoutButton = styled.button`
+  ${({ theme }) => theme.typography.common.default};
+  color: ${({ theme }) => theme.baseColors.grayscale[600]};
+
+  position: absolute;
+  bottom: 2.4rem;
+  left: 50%;
+  transform: translateX(-50%);
+`;
+
+const S = {
+  LogoutButton,
+};
+
+export default S;

frontend/src/components/dashboard/DashboardSidebar/index.tsx

@@ -1,6 +1,7 @@
 import Logo from '@assets/images/logo.svg';
 import Accordion from '@components/common/Accordion';
 import { Link, useParams } from 'react-router-dom';
+import LogoutButton from './LogoutButton';
 import S from './style';
 
 interface Option {
@@ -37,6 +38,8 @@ export default function DashboardSidebar({ options }: DashboardSidebarProps) {
           ))}
         </Accordion>
       </S.Contents>
+
+      <LogoutButton />
     </S.Container>
   );
 }

frontend/src/components/dashboard/DashboardSidebar/style.ts

@@ -1,6 +1,8 @@
 import styled from '@emotion/styled';
 
 const Container = styled.div`
+  position: relative;
+
   width: 20%;
   min-width: 25rem;
   max-width: 30rem;

frontend/src/hooks/useSignOut/index.ts

@@ -0,0 +1,14 @@
+import authApi from '@api/domain/auth';
+import { useMutation } from '@tanstack/react-query';
+import { useNavigate } from 'react-router-dom';
+
+export default function useSignOut() {
+  const navigate = useNavigate();
+
+  return useMutation({
+    mutationFn: () => authApi.logout(),
+    onSuccess: () => {
+      navigate('/sign-in');
+    },
+  });
+}

frontend/src/mocks/handlers/authHandlers.ts

@@ -1,6 +1,7 @@
 /* eslint-disable no-promise-executor-return */
 import { AUTH } from '@api/endPoint';
 import { http } from 'msw';
+import { Success } from './response';
 
 interface LoginFormData {
   email: string;
@@ -32,6 +33,11 @@ const authHandlers = [
       },
     });
   }),
+
+  http.post(`${AUTH}/logout`, async () => {
+    await new Promise((resolve) => setTimeout(resolve, 2000));
+    return Success();
+  }),
 ];
 
 export default authHandlers;