From e90df9a83789e467cb9cc5e2fab790f46615185c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EC=9D=98=EC=A7=84?= Date: Wed, 6 Nov 2024 22:43:08 +0900 Subject: [PATCH 1/3] =?UTF-8?q?feat=20::=20=EB=AA=A8=EB=8B=AC=20=ED=8D=BC?= =?UTF-8?q?=EB=B8=94=EB=A6=AC=EC=8B=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/modal/editModal/editModal.tsx | 29 +++++++++++--- .../src/components/modal/editModal/style.ts | 5 +++ .../components/modal/logout/logoutModal.tsx | 40 +++++++++++++++++++ .../src/components/modal/logout/style.ts | 26 ++++++++++++ apps/company/src/store/modalStore.ts | 1 + 5 files changed, 96 insertions(+), 5 deletions(-) create mode 100644 apps/company/src/components/modal/logout/logoutModal.tsx create mode 100644 apps/company/src/components/modal/logout/style.ts diff --git a/apps/company/src/components/modal/editModal/editModal.tsx b/apps/company/src/components/modal/editModal/editModal.tsx index 6d24f60..82c9ed7 100644 --- a/apps/company/src/components/modal/editModal/editModal.tsx +++ b/apps/company/src/components/modal/editModal/editModal.tsx @@ -1,12 +1,14 @@ +// 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; @@ -14,6 +16,8 @@ interface PropsType { const EditModal: React.FC = () => { const { data: myCompanyInfo } = useMyCompanyInfo(); + const [isLogoutModalOpen, setIsLogoutModalOpen] = useState(false); + useEffect(() => { document.body.style.overflow = "auto"; return () => { @@ -21,6 +25,14 @@ const EditModal: React.FC = () => { }; }, []); + const handleLogoutClick = () => { + setIsLogoutModalOpen(true); + }; + + const handleCloseModal = () => { + setIsLogoutModalOpen(false); + }; + return ( = () => { - - 로그아웃 - + + + 로그아웃 + + + {isLogoutModalOpen && ( + + + + )} ); }; diff --git a/apps/company/src/components/modal/editModal/style.ts b/apps/company/src/components/modal/editModal/style.ts index 7715a26..9e3f62d 100644 --- a/apps/company/src/components/modal/editModal/style.ts +++ b/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; diff --git a/apps/company/src/components/modal/logout/logoutModal.tsx b/apps/company/src/components/modal/logout/logoutModal.tsx new file mode 100644 index 0000000..c7548cb --- /dev/null +++ b/apps/company/src/components/modal/logout/logoutModal.tsx @@ -0,0 +1,40 @@ +"use client"; + +import React from "react"; +import * as S from "./style"; +import { Text, Button } from "@jobis/ui"; +import { themes } from "@jobis/design-token"; +import Link from "next/link"; +import { useModal } from "@/hooks/useModal"; + +const LogoutModal = () => { + const { closeModal } = useModal(); + return ( + + + + 로그아웃 + + + 로그아웃 시 다음 접속 때 로그인 해야합니다. + + + + + + + + ); +}; + +export default LogoutModal; diff --git a/apps/company/src/components/modal/logout/style.ts b/apps/company/src/components/modal/logout/style.ts new file mode 100644 index 0000000..ccfedb2 --- /dev/null +++ b/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; +`; diff --git a/apps/company/src/store/modalStore.ts b/apps/company/src/store/modalStore.ts index 5d8d4d0..0cb4d9e 100644 --- a/apps/company/src/store/modalStore.ts +++ b/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 { From 7493cb89cd5e1bc1c792584d64d2c25dd9fc9935 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EC=9D=98=EC=A7=84?= Date: Wed, 6 Nov 2024 22:50:37 +0900 Subject: [PATCH 2/3] =?UTF-8?q?feat=20::=20=EB=A1=9C=EA=B7=B8=EC=95=84?= =?UTF-8?q?=EC=9B=83=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/modal/logout/logoutModal.tsx | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) diff --git a/apps/company/src/components/modal/logout/logoutModal.tsx b/apps/company/src/components/modal/logout/logoutModal.tsx index c7548cb..95b49a5 100644 --- a/apps/company/src/components/modal/logout/logoutModal.tsx +++ b/apps/company/src/components/modal/logout/logoutModal.tsx @@ -4,11 +4,21 @@ import React from "react"; import * as S from "./style"; import { Text, Button } from "@jobis/ui"; import { themes } from "@jobis/design-token"; -import Link from "next/link"; 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 ( @@ -31,7 +41,12 @@ const LogoutModal = () => { > 취소 - + ); From 8b03c8d95d715f5fe38e554d4063b5bd6d631733 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EC=9D=98=EC=A7=84?= Date: Wed, 6 Nov 2024 22:56:57 +0900 Subject: [PATCH 3/3] =?UTF-8?q?fix=20::=20style=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/company/src/components/modal/editModal/editModal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/company/src/components/modal/editModal/editModal.tsx b/apps/company/src/components/modal/editModal/editModal.tsx index 82c9ed7..d401f89 100644 --- a/apps/company/src/components/modal/editModal/editModal.tsx +++ b/apps/company/src/components/modal/editModal/editModal.tsx @@ -51,7 +51,7 @@ const EditModal: React.FC = () => { {isLogoutModalOpen && ( - + )}