FEAT :: Add PhotoCard API Needs Login.

Author: Daybreak312

src/component/body/modal/CheckModal.tsx

@@ -0,0 +1,36 @@
+import {BlurModal} from "./BlurModal";
+import {DivButton} from "../../button/DivButton";
+
+export interface CheckModalProps {
+    setModal: (value: JSX.Element | undefined) => void
+    checkMessage: string
+    cancelMessage: string
+    onCheck: () => void
+    children: JSX.Element[]
+}
+
+export const CheckModal = (props: CheckModalProps) => {
+    return (
+        <BlurModal
+            className={"w-[650px]"}
+            setModel={props.setModal}>
+            <div className={"flex flex-col items-center justify-center gap-[30px] py-[20px]"}>
+                {props.children}
+            </div>
+            <div className={"flex flex-row gap-[30px]"}>
+                <DivButton
+                    className={"flex items-center justify-center rounded-[10px] w-[250px] py-[20px] bg-photocard-stroke"}
+                    onClick={() => {
+                        props.setModal(undefined)
+                    }}>
+                    <p className={"text-text-black text-[26px] font-p-extra-bold"}>{props.cancelMessage}</p>
+                </DivButton>
+                <DivButton
+                    className={"flex items-center justify-center rounded-[10px] w-[250px] py-[20px] bg-highlight-orange"}
+                    onClick={props.onCheck}>
+                    <p className={"text-text-black text-[26px] font-p-extra-bold"}>{props.checkMessage}</p>
+                </DivButton>
+            </div>
+        </BlurModal>
+    )
+}

src/component/body/modal/LogoutModal.tsx

@@ -1,36 +1,22 @@
-import {BlurModal} from "./BlurModal";
-import {DivButton} from "../../button/DivButton";
 import {deleteSessionId} from "../../../module/cookie/SessionManager";
+import {CheckModal} from "./CheckModal";
 
 export interface LogoutModalProps {
     setModal: (value: JSX.Element | undefined) => void
-    onCancel: () => void
 }
 
 export const LogoutModal = (props: LogoutModalProps) => {
     return (
-        <BlurModal
-            className={"w-[650px]"}
-            setModel={props.setModal}>
-            <div className={"flex flex-col items-center justify-center gap-[30px] py-[20px]"}>
-                <p className={"text-text-white text-[32px] font-p-semi-bold"}>이미 로그인중입니다.</p>
-                <p className={"text-text-white text-[24px] font-p-semi-bold"}>로그아웃하시겠습니까?</p>
-            </div>
-            <div className={"flex flex-row gap-[30px]"}>
-                <DivButton
-                    className={"flex items-center justify-center rounded-[10px] w-[250px] py-[20px] bg-photocard-stroke"}
-                    onClick={props.onCancel}>
-                    <p className={"text-text-black text-[26px] font-p-extra-bold"}>Back</p>
-                </DivButton>
-                <DivButton
-                    className={"flex items-center justify-center rounded-[10px] w-[250px] py-[20px] bg-highlight-orange"}
-                    onClick={() => {
-                        deleteSessionId()
-                        location.pathname = "/"
-                    }}>
-                    <p className={"text-text-black text-[26px] font-p-extra-bold"}>Logout</p>
-                </DivButton>
-            </div>
-        </BlurModal>
+        <CheckModal
+            setModal={props.setModal}
+            checkMessage={"Logout"}
+            cancelMessage={"Back"}
+            onCheck={() => {
+                deleteSessionId()
+                location.pathname = "/"
+            }}>
+            <p className={"text-text-white text-[32px] font-p-semi-bold"}>이미 로그인중입니다.</p>
+            <p className={"text-text-white text-[24px] font-p-semi-bold"}>로그아웃하시겠습니까?</p>
+        </CheckModal>
     )
 }

src/component/body/modal/NeedLoginModal.tsx

@@ -0,0 +1,20 @@
+import {CheckModal} from "./CheckModal";
+
+export interface NeedLoginModalProps {
+    setModal: (value: JSX.Element | undefined) => void
+}
+
+export const NeedLoginModal = (props: NeedLoginModalProps) => {
+    return (
+        <CheckModal
+            setModal={props.setModal}
+            checkMessage={"Login Page"}
+            cancelMessage={"Back"}
+            onCheck={() => {
+                location.pathname = "/auth/login"
+            }}>
+            <p className={"text-text-white text-[32px] font-p-semi-bold"}>로그인이 필요한 서비스입니다.</p>
+            <p className={"text-text-white text-[24px] font-p-semi-bold"}>로그인 페이지로 이동하시겠습니까?</p>
+        </CheckModal>
+    )
+}

src/component/header/HeaderButtons.tsx

@@ -7,6 +7,8 @@ import {DivIconButton} from "../button/DivIconButton";
 import {LogoutModal} from "../body/modal/LogoutModal";
 import {CurrentPage, PageName} from "../../initializer/CurrentPage";
 import {IconTextToast} from "../body/toast/IconTextToast";
+import {isLoggedIn, setIsLoggedIn} from "../../module/status/StatusManager";
+import {NeedLoginModal} from "../body/modal/NeedLoginModal";
 
 export const HeaderButtons = () => {
 
@@ -29,6 +31,7 @@ export const HeaderButtons = () => {
                     method: HttpMethod.GET,
                     url: "/user"
                 }).then((response) => {
+                    setIsLoggedIn(true);
                     if (CurrentPage.getCurrentPage() == PageName.LOGIN ||
                         CurrentPage.getCurrentPage() == PageName.SIGNUP) {
                         setToast(
@@ -54,9 +57,7 @@ export const HeaderButtons = () => {
                                 className: "rounded-[10px] h-[50px] p-[10px] hover:bg-header-hover animated",
                                 onClick: () => {
                                     setModal(
-                                        <LogoutModal setModal={setModal} onCancel={() => {
-                                            setModal(undefined)
-                                        }}/>
+                                        <LogoutModal setModal={setModal}/>
                                     )
                                 }
                             }
@@ -83,11 +84,29 @@ export const HeaderButtons = () => {
                 }}
                 text={"내 포토카드"}
             />*/}
-            <HeaderButton
-                iconUri={"/Plus.svg"}
-                text={"포토카드 추가"}
-                gotoPath={"/add"}
-            />
+            <div
+                onClick={(event) => {
+                    if (!isLoggedIn) {
+                        event.stopPropagation()
+                        setModal(
+                            <NeedLoginModal setModal={setModal}/>
+                        )
+                    } else {
+                        location.pathname = "/add"
+                    }
+                }}>
+                <DivIconButton
+                    iconProps={{
+                        iconUri: "/Plus.svg",
+                        iconWidth: "20px",
+                        iconHeight: "20px"
+                    }}
+                    gap={"10px"}
+                    text={"포토카드 추가"}
+                    textSize={"16px"}
+                    className={"rounded-[10px] h-[50px] p-[10px] hover:bg-header-hover animated"}
+                />
+            </div>
             {authButton}
             {modal && modal}
             {toast && toast}

src/module/status/StatusManager.tsx

@@ -0,0 +1,5 @@
+export let isLoggedIn = false;
+
+export let setIsLoggedIn = (bool: boolean) => {
+    isLoggedIn = bool
+}