feat: 온보딩 후, 게시글 작성 시 가이드 모달 및 로직 추가

feat: 온보딩 후, 게시글 작성 시 가이드 모달 및 로직 추가

src/app/post/keyword.tsx

@@ -1,19 +1,60 @@
-import { useState } from "react";
-import { useNavigate } from "react-router-dom";
+import { useContext, useEffect, useState } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
 
 import Close from "@/assets/icons/close.svg?react";
+import PostIcon from "@/assets/icons/post.svg?url";
 import { ArticleWrapper } from "@/components/app/post/common/ArticleWrapper";
 import { Background } from "@/components/app/post/keyword/background";
 import { Selector } from "@/components/app/post/keyword/selector";
 import { Appbar } from "@/components/common/appbar";
+import { ConfirmContext } from "@/components/common/confirm/confirm-context";
 import { Header } from "@/components/common/header";
 import { DefaultLayout } from "@/components/layout/default";
 
+type locationProps = {
+  state: {
+    openPostGuide?: string;
+  };
+};
+
 export const KeyWord = () => {
   const navigate = useNavigate();
+  const location = useLocation() as locationProps;
+  const openPostGuide = location.state as locationProps;
+  const { confirm } = useContext(ConfirmContext);
   const [angle, setAngle] = useState(0);
   const [snap, setSnap] = useState(false);
 
+  /** 게시글 작성 가이드 모달 함수 */
+  const showGuideModal = async () => {
+    const result = await confirm({
+      message: {
+        title: "게시글은 하루에 한개만\n작성할 수 있어요!",
+        description: "하루 한번 칭찬 받고 싶은 일상을 올려주세요!",
+      },
+      cancel: {
+        text: "작성하기",
+      },
+      icon: PostIcon,
+    });
+
+    if (!result) {
+      return;
+    }
+  };
+
+  /** 온보딩에서 openPostGuide가 location state로 넘어오게 되면 가이드 모달이 사용자에게 노출되도록 설정 */
+  useEffect(() => {
+    if (!openPostGuide) return;
+    const timer = setTimeout(() => {
+      void showGuideModal();
+    }, 1000);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, []);
+
   return (
     <DefaultLayout
       className="overflow-x-hidden"

src/components/common/confirm/confirm.tsx

@@ -14,10 +14,10 @@ export const Confirm = ({
   return (
     <div>
       <div className="fixed left-1/2 top-1/2 z-50 mx-auto box-border h-fit w-full max-w-[480px] translate-x-[-50%] translate-y-[-50%]">
-        <div className="mx-5 flex flex-col items-center gap-7 rounded-2xl bg-white px-4 pb-4 pt-6">
+        <div className="mx-5 flex animate-[fadeInWithScale_0.4s] flex-col items-center gap-7 rounded-2xl bg-white px-4 pb-4 pt-6">
           <div className="flex flex-col items-center gap-1">
             {icon && <img src={icon} className="h-30px w-30px" />}
-            <div className="mt-2 text-lg font-semibold text-primary">
+            <div className="mt-2 whitespace-pre-line text-center text-lg font-semibold text-primary">
               {message.title}
             </div>
             <div
@@ -51,7 +51,7 @@ export const Confirm = ({
       </div>
       <div
         onClick={cancel?.onClick || confirm?.onClick}
-        className="fixed top-0 z-40 h-full w-full bg-black/60"
+        className="fixed top-0 z-40 h-full w-full animate-[fadeIn_0.3s] bg-black/60"
       />
     </div>
   );

src/hooks/api/signup/useApiUserName.ts

@@ -15,7 +15,7 @@ export const useApiUserProfile = (userId: number) => {
 
   return useMutation({
     mutationFn: (nickname: string) => changeNickName(nickname),
-    onSuccess: () => navigate("/post/keyword"),
+    onSuccess: () => navigate("/post/keyword", { state: "openPostGuide" }),
     onError: () => navigate("/error"),
   });
 };

tailwind.config.js

@@ -101,12 +101,23 @@ export default {
             transform: "translateY(-2rem)",
           },
         },
+        fadeInWithScale: {
+          "0%": {
+            opacity: 0.3,
+            transform: "scale(0.95)",
+          },
+          "100%": {
+            opacity: 1,
+            transform: "scale(1)",
+          },
+        },
       },
       animation: {
         fadeInUp: "fadeInUp 1s ease-in-out",
         fadeIn: "fadeIn 1s ease-in-out",
         fadeOutUp: "fadeOutUp 1s ease-in-out",
         fadeOut: "fadeOut 1s ease-in-out",
+        fadeInWithScale: "fadeInWithScale 1s ease-in-out",
       },
     },
   },