로그아웃 모달 추가

apps/company/src/components/modal/editModal/editModal.tsx

@@ -1,26 +1,38 @@
+// EditModal.tsx
 "use client";
 
-import React from "react";
+import React, { useState, useEffect } from "react";
 import * as S from "./style";
 import { Text } from "@jobis/ui";
 import { themes } from "@jobis/design-token";
 import Link from "next/link";
 import { useMyCompanyInfo } from "@/hooks/apis/useCompanyApi";
-import { useEffect } from "react";
+import Modal from "..";
+import LogoutModal from "../logout/logoutModal";
 
 interface PropsType {
   closeModal: () => void;
 }
 
 const EditModal: React.FC<PropsType> = () => {
   const { data: myCompanyInfo } = useMyCompanyInfo();
+  const [isLogoutModalOpen, setIsLogoutModalOpen] = useState(false);
+
   useEffect(() => {
     document.body.style.overflow = "auto";
     return () => {
       document.body.style.overflow = "auto";
     };
   }, []);
 
+  const handleLogoutClick = () => {
+    setIsLogoutModalOpen(true);
+  };
+
+  const handleCloseModal = () => {
+    setIsLogoutModalOpen(false);
+  };
+
   return (
     <S.Container>
       <Link
@@ -33,9 +45,16 @@ const EditModal: React.FC<PropsType> = () => {
           </Text>
         </S.Box>
       </Link>
-      <Text fontSize="caption" color={themes.Color.grayScale[60]}>
-        로그아웃
-      </Text>
+      <S.Box onClick={handleLogoutClick}>
+        <Text fontSize="caption" color={themes.Color.grayScale[60]}>
+          로그아웃
+        </Text>
+      </S.Box>
+      {isLogoutModalOpen && (
+        <Modal width={379} onClose={handleCloseModal}>
+          <LogoutModal />
+        </Modal>
+      )}
     </S.Container>
   );
 };

apps/company/src/components/modal/editModal/style.ts

@@ -20,6 +20,11 @@ export const Container = styled.div`
   box-shadow: 0 4px 20px 0 rgb(112 144 176 / 12%);
 `;
 
+export const Wrapper = styled.div`
+  width: 100%;
+  height: 100%;
+`;
+
 export const Box = styled.div`
   display: flex;
   justify-content: center;

apps/company/src/components/modal/logout/logoutModal.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import React from "react";
+import * as S from "./style";
+import { Text, Button } from "@jobis/ui";
+import { themes } from "@jobis/design-token";
+import { useModal } from "@/hooks/useModal";
+import { Cookies } from "react-cookie";
+
+const LogoutModal = () => {
+  const { closeModal } = useModal();
+  const cookies = new Cookies();
+
+  const handleLogout = () => {
+    cookies.remove("access_token");
+    cookies.remove("refresh_token");
+
+    window.location.href = "/";
+
+    closeModal();
+  };
+  return (
+    <S.Container>
+      <S.TextWrapper>
+        <Text fontSize="body1" fontWeight="bold">
+          로그아웃
+        </Text>
+        <Text
+          fontSize="body2"
+          fontWeight="regular"
+          color={themes.Color.grayScale[60]}
+        >
+          로그아웃 시 다음 접속 때 로그인 해야합니다.
+        </Text>
+      </S.TextWrapper>
+      <S.ButtonWrapper>
+        <Button
+          onClick={closeModal}
+          style={{ width: "112px", height: "48px" }}
+          variant="outline"
+        >
+          취소
+        </Button>
+        <Button
+          onClick={handleLogout}
+          style={{ width: "112px", height: "48px" }}
+        >
+          확인
+        </Button>
+      </S.ButtonWrapper>
+    </S.Container>
+  );
+};
+
+export default LogoutModal;

apps/company/src/components/modal/logout/style.ts

@@ -0,0 +1,26 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 203px;
+  padding: 24px;
+  border-radius: 8px;
+
+  background-color: white;
+`;
+
+export const TextWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`;
+
+export const ButtonWrapper = styled.div`
+  display: flex;
+  margin-top: 32px;
+  gap: 8px;
+`;

apps/company/src/store/modalStore.ts

@@ -11,6 +11,7 @@ export type ModalType =
   | "EDIT_RECRUIT_AREA"
   | "ADD_RECRUIT_AREA"
   | "EDIT_COMPANY_INFO"
+  | "LOGOUT_AREA"
   | "";
 
 export interface IModalState {