임시 로그인 추가 (#50)

* fix: 임시 로그인 계정 코드 삽입

* fix: store link

* feat: logout용  mock추가

* feat: sidemenu에 signout 버튼 추가

* fix: login fixture 리턴값 수정

---------

Co-authored-by: AyoungWon <wayinwayne@gmail.com>

Author: jangwonyoon

src/common/components/layout/index.tsx

@@ -5,12 +5,14 @@ import { Link } from 'react-router-dom';
 import colors from 'styles/color';
 import Menus from 'common/components/layout/menus';
 import { Search, Logo } from 'common/components/icons';
+import useAuth from 'common/hooks/useAuth';
 
 interface Props extends HTMLAttributes<HTMLDivElement> {
   children: ReactNode;
 }
 
 const Layout = ({ children }: Props) => {
+  const { logout } = useAuth([]);
   return (
     <div css={_container}>
       <aside css={_sideMenu}>
@@ -22,6 +24,9 @@ const Layout = ({ children }: Props) => {
         <nav aria-label="Sidebar navigation" css={_menuContainer}>
           <Menus />
         </nav>
+        <button onClick={logout} css={_signout}>
+          Sign out
+        </button>
       </aside>
       <div css={_wrapper}>
         <header css={_header}>
@@ -58,6 +63,10 @@ const _sideMenu = css`
   width: 345px;
   background-color: rgba(255, 255, 255, 1);
   filter: drop-shadow(18px 4px 30px #00000002);
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 24px;
 `;
 
 const _wrapper = css`
@@ -145,3 +154,12 @@ const _main = css`
 
   padding: 32px; // 메인 컴포넌트 기본 패딩
 `;
+
+const _signout = css`
+  margin-top: auto;
+  cursor: pointer;
+  transition: opacity 0.7s;
+  :hover {
+    opacity: 0.5;
+  }
+`;

src/mocks/__fixtures__/auth.ts

@@ -1,18 +1,22 @@
 export const authMockData = {
   login: {
-    "response": {
-    "accessToken": "JWT 토큰 문자열",
-      "refreshToken": "JWT 토큰 문자열"
+    response: {
+      accessToken: 'JWT 토큰 문자열',
+      refreshToken: 'JWT 토큰 문자열',
     },
-    "code": "200",
-    "message": "성공"
+    code: '200',
+    message: '성공',
+  },
+  logout: {
+    code: '200',
+    message: '성공',
   },
   refresh: {
-    "response": {
-      "accessToken": "JWT 토큰 문자열",
-      "refreshToken": "JWT 토큰 문자열"
+    response: {
+      accessToken: 'JWT 토큰 문자열',
+      refreshToken: 'JWT 토큰 문자열',
     },
-    "code": "200",
-    "message": "성공"
-  }
-}
+    code: '200',
+    message: '성공',
+  },
+};

src/mocks/handlers.ts

@@ -18,6 +18,9 @@ export const authHandlers = [
   http.post(`${BASE_URL}/auth/refresh`, async () => {
     return HttpResponse.json(authMockData.refresh);
   }),
+  http.post(`${BASE_URL}/auth/logout`, async () => {
+    return HttpResponse.json(authMockData.logout);
+  }),
 ];
 
 // 계정 관련 API 요청 핸들러 정의

src/pages/Signin/index.tsx

@@ -24,11 +24,23 @@ const SignIn = () => {
     resolver: zodResolver(loginSchema),
   });
 
-  const { login: loginFn } = useAuth(['admin', 'guest', 'owner']);
+  const { login } = useAuth(['admin', 'guest', 'owner']);
+
+  const loginTestData = {
+    accountId: 'test@naver.com',
+    password: '123!@#',
+  };
 
   const onSubmit: SubmitHandler<SignInFormType> = async (data) => {
     try {
-      await loginFn(data);
+      if (
+        data.accountId === loginTestData.accountId &&
+        data.password === loginTestData.password
+      ) {
+        await login(data);
+      } else {
+        alert('로그인 실패');
+      }
       reset();
     } catch {
       alert('로그인 실패');

src/pages/store/index.tsx

@@ -24,7 +24,7 @@ import type { UpdateStorePayload } from 'api/modules/stores/types';
 import useAuth from 'common/hooks/useAuth';
 
 const Store = ({ ...rest }) => {
-  const { AuthGuard } = useAuth(['admin']);
+  const { AuthGuard } = useAuth(['admin', 'owner']);
   const { data } = useGetStoresQueryTest(1);
   const { mutate: updateStoreQuery } = useUpdateStoresQuery();