feat: 로그인 상태에 따른 UI 상호작용 추가

frontend/reply-module/src/App.tsx

@@ -1,4 +1,4 @@
-import CommentPage from "./components/page/CommentPage";
+import CommentPage from "./components/pages/CommentPage";
 
 const App = () => {
   return <CommentPage />;

frontend/reply-module/src/components/molecules/UserAvatarOption/index.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, useState } from "react";
+import { ReactNode, useEffect, useState } from "react";
 import { User } from "../../../types/user";
 import Avatar from "../../atoms/Avatar";
 import UserOption from "../../atoms/UserOption";
@@ -10,11 +10,16 @@ export interface Props {
 }
 
 const UserAvatarOption = ({ user, children }: Props) => {
-  const [isShowOptionBox, setShowOptionBox] = useState(false);
+  const [isShowOptionBox, setShowOptionBox] = useState(true);
+
   const onShowOptionBox = () => {
     setShowOptionBox(state => !state);
   };
 
+  useEffect(() => {
+    setShowOptionBox(state => !state);
+  }, [user]);
+
   return (
     <Container>
       <Avatar

frontend/reply-module/src/components/molecules/UserAvatarOption/styles.ts

@@ -3,6 +3,10 @@ import styled from "styled-components";
 const Container = styled.div`
   position: relative;
   width: fit-content;
+
+  & > img {
+    cursor: pointer;
+  }
 `;
 
 const UserOptionWrapper = styled.div`

frontend/reply-module/src/components/organisms/CommentInput/index.tsx

@@ -1,23 +1,23 @@
+import { User } from "../../../types/user";
 import SubmitButton from "../../atoms/SubmitButton";
 import { Container, TextArea, Wrapper, GuestInfo } from "./styles";
 
-export interface Props {}
-
-const CommentInput = () => {
-  const isGuest = true;
+export interface Props {
+  user: User | null;
+}
 
+const CommentInput = ({ user }: Props) => {
   return (
     <Container>
       <TextArea placeholder="댓글을 입력해주세요." />
 
       <Wrapper>
-        {isGuest && (
+        {!user && (
           <div>
             <GuestInfo type="text" placeholder="이름" />
             <GuestInfo type="password" placeholder="비밀번호" />
           </div>
         )}
-
         <SubmitButton onClick={() => {}}>등록</SubmitButton>
       </Wrapper>
     </Container>

frontend/reply-module/src/components/organisms/CommentInput/styles.ts

@@ -18,6 +18,10 @@ const Wrapper = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
+
+  & > button {
+    margin-left: auto;
+  }
 `;
 
 const GuestInfo = styled.input`

frontend/reply-module/src/components/pages/CommentPage/index.tsx

@@ -0,0 +1,10 @@
+import { useLogin } from "../../../hooks";
+import CommentArea from "../../templates/CommentArea";
+
+const CommentPage = () => {
+  const { user, login, logout } = useLogin();
+
+  return <CommentArea user={user} onLogin={login} onLogout={logout} />;
+};
+
+export default CommentPage;

frontend/reply-module/src/components/templates/CommentArea/index.tsx

@@ -33,7 +33,7 @@ const CommentArea = ({ user, onLogin, onLogout }: Props) => {
           )}
         </UserAvatarOption>
       </Header>
-      <CommentInput />
+      <CommentInput user={user} />
       <CommentListWrapper>
         <CommentList comments={comments} />
       </CommentListWrapper>

frontend/reply-module/src/hooks/index.ts

@@ -1,4 +1,3 @@
 import useLogin from "./useLogin";
-import useLogout from "./useLogout";
 
-export { useLogin, useLogout };
+export { useLogin };

frontend/reply-module/src/hooks/useLogin.ts

@@ -1,23 +1,44 @@
 import { QUERY } from "../constants/api";
 import { COOKIE_KEY } from "../constants/cookie";
 import { request } from "../utils/request";
-import { setCookie } from "../utils/cookie";
+import { deleteCookie, setCookie } from "../utils/cookie";
 import { getKakaoAccessToken } from "../utils/kakaoAPI";
+import { useState } from "react";
+import { User } from "../types/user";
+
+const dummyUser: User = {
+  id: 1,
+  nickName: "도비",
+  imageURL:
+    "https://static.independent.co.uk/s3fs-public/thumbnails/image/2015/06/06/15/Chris-Pratt.jpg?width=982&height=726&auto=webp&quality=75",
+  type: "Signed"
+};
 
-// TODO: react-query 적용
 const useLogin = () => {
+  const [user, setUser] = useState<User | null>(null);
+
   const login = async () => {
     try {
       const kakaoAccessToken = await getKakaoAccessToken();
-      const { data: serverAccessToken } = await request.GET(`${QUERY.LOGIN}${kakaoAccessToken}`);
+      const { data: serverAccessToken } = await request.get(`${QUERY.LOGIN}${kakaoAccessToken}`);
 
       setCookie(COOKIE_KEY.ATK, serverAccessToken);
+      setUser(dummyUser);
+    } catch (error) {
+      console.error(error.message);
+    }
+  };
+
+  const logout = async () => {
+    try {
+      deleteCookie(COOKIE_KEY.ATK);
+      setUser(null);
     } catch (error) {
       console.error(error.message);
     }
   };
 
-  return { login };
+  return { user, login, logout };
 };
 
 export default useLogin;

frontend/reply-module/src/utils/cookie.ts

@@ -1,6 +1,6 @@
 const setCookie = (key: string, value: string, keepAliveMinutes = 60) => {
   const expiryDate = new Date();
-  expiryDate.setDate(expiryDate.getDate() + keepAliveMinutes);
+  expiryDate.setMinutes(expiryDate.getMinutes() + keepAliveMinutes);
 
   const cookieValue = escape(value) + "; expires=" + expiryDate.toUTCString();
   document.cookie = key + "=" + cookieValue;
@@ -22,4 +22,8 @@ const getCookie = (key: string) => {
   return null;
 };
 
-export { setCookie, getCookie };
+const deleteCookie = (name: string) => {
+  document.cookie = name + "=; Max-Age=-99999999;";
+};
+
+export { setCookie, getCookie, deleteCookie };

frontend/reply-module/src/utils/kakaoAPI.ts

@@ -1,7 +1,9 @@
 const getKakaoAccessToken = async () => {
   const { Kakao } = window;
 
-  Kakao.init(process.env.KAKAO_JAVASCRIPT_API_KEY);
+  if (!Kakao.isInitialized()) {
+    Kakao.init(process.env.KAKAO_JAVASCRIPT_API_KEY);
+  }
 
   return new Promise((resolve, reject) =>
     Kakao.Auth.login({