🔀 Merge dev → main

next.config.mjs

@@ -18,6 +18,11 @@ const nextConfig = {
         pathname: '/**',
         search: '',
       },
+      {
+        protocol: 'http',
+        hostname: 'k.kakaocdn.net',
+        pathname: '/**',
+      },
     ],
   },
 };

package.json

@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@hookform/resolvers": "^5.0.1",
     "@svgr/webpack": "^8.1.0",
     "@tanstack/react-query": "^5.75.5",
     "clsx": "^2.1.1",
@@ -20,6 +21,7 @@
     "react": "^18",
     "react-datepicker": "^8.3.0",
     "react-dom": "^18",
+    "react-hook-form": "^7.56.4",
     "react-toastify": "^11.0.5",
     "tailwind-merge": "^3.2.0",
     "zod": "^3.24.4",

src/app/(auth)/layout.tsx

@@ -0,0 +1,25 @@
+import { cookies } from 'next/headers';
+import { redirect } from 'next/navigation';
+import { ROUTES } from '@/constants/routes';
+import { getUserGroups } from '@/lib/apis/user';
+
+export default async function AuthLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const accessToken = cookies().get('accessToken')?.value;
+
+  if (accessToken) {
+    const userGroupsData = await getUserGroups({});
+    const firstGroupId = userGroupsData?.[0]?.id;
+
+    if (firstGroupId) {
+      redirect(ROUTES.TEAM(firstGroupId));
+    } else {
+      redirect(ROUTES.TEAM_NO);
+    }
+  }
+
+  return <>{children}</>;
+}

src/app/(auth)/login/_components/LoginForm/OpenPasswordResetModal.tsx

@@ -0,0 +1,87 @@
+'use client';
+
+import ResetPasswordModal from '@/components/common/Modal/content/ResetPasswordModal';
+import { postResetPasswordToEmail } from '@/lib/apis/user';
+import { ResetPasswordToEmailBody } from '@/lib/apis/user/type';
+import { useModalStore } from '@/store/useModalStore';
+import { useEffect } from 'react';
+import { toast } from 'react-toastify';
+
+export default function OpenPasswordResetModal({ ...props }) {
+  const { openModal } = useModalStore();
+
+  useEffect(() => {
+    const unsubscribe = useModalStore.subscribe(
+      (state) => state.requestBody, // selector
+      // listener
+      (newRequestBody) => {
+        if (!newRequestBody) return;
+        const { email } = newRequestBody as { email: string };
+
+        if (!email) return;
+
+        const requestBody = {
+          email,
+          redirectUrl: `${window.location.origin}/`,
+        };
+        handleSendResetPasswordLink(requestBody);
+      }
+    );
+    return () => {
+      unsubscribe();
+    };
+  }, []);
+
+  // send reset password link
+  const handleSendResetPasswordLink = async (
+    requestBody: ResetPasswordToEmailBody
+  ) => {
+    try {
+      const response = await postResetPasswordToEmail({ body: requestBody });
+
+      if (!response) {
+        throw new Error('204 : No Content');
+      }
+      toast.success('비밀번호 재설정 링크가 전송되었습니다.');
+    } catch (error) {
+      if (error instanceof Error) {
+        const errorMessage = error.message;
+
+        // User not found
+        if (errorMessage.includes('User not found')) {
+          toast.error('존재하지 않는 이메일입니다. 회원가입을 먼저 해주세요.');
+        } else {
+          toast.error(`Error : ${error}`);
+        }
+      }
+    }
+  };
+
+  return (
+    <div className="mt-3 mb-10 flex justify-end">
+      <button
+        className="text-md-medium tablet:text-lg-medium leading-6 text-emerald-500 underline"
+        type="button"
+        onClick={() => {
+          openModal(
+            {
+              title: '비밀번호 재설정',
+              description: '비밀번호 재설정 링크를 보내드립니다.',
+              button: {
+                formId: 'reset-password-form', // form 연결
+                number: 2,
+                text: '링크 보내기',
+                // 기존 모달 컴포넌트의 onRequest 호출 방식과의 일관성을 위해 빈 함수 전달
+                onRequest: () => {},
+              },
+            },
+            (() => <ResetPasswordModal />)()
+          );
+        }}
+        {...props}
+      >
+        비밀번호를 잊으셨나요?
+      </button>
+    </div>
+  );
+}