Merge branch 'feat/mypage'

package.json

@@ -10,12 +10,16 @@
   },
   "dependencies": {
     "@tanstack/react-query": "^5.51.11",
+    "@tanstack/react-query-devtools": "4",
     "axios": "^1.7.2",
+    "date-fns": "^3.6.0",
     "next": "14.2.3",
     "ps": "^1.0.0",
     "qs": "^6.13.0",
     "react": "^18",
     "react-dom": "^18",
+    "react-virtuoso": "^4.10.1",
+    "scroll-lock": "^2.1.5",
     "react-query": "^3.39.3",
     "zustand": "^4.5.4"
   },
@@ -24,6 +28,7 @@
     "@types/qs": "^6.9.15",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@types/scroll-lock": "^2.1.3",
     "@typescript-eslint/eslint-plugin": "^7.17.0",
     "eslint": "^8",
     "eslint-config-next": "14.2.3",

src/app/layout.tsx

@@ -4,6 +4,9 @@ import localFont from 'next/font/local';
 import Gnb from '@/components/common/Gnb';
 import QueryProvider from '@/providers/QueryProvider';
 import IntegrateMSW from '@/mocks/IntegrateMsw';
+import dynamic from 'next/dynamic';
+
+const ModalProvider = dynamic(() => import('@/providers/ModalProvider'), { ssr: false });
 
 const pretendard = localFont({
   src: '../static/fonts/PretendardVariable.woff2',
@@ -41,6 +44,8 @@ export default function RootLayout({
           <QueryProvider>
             <Gnb />
             {children}
+            <ModalProvider />
+            <div id="root-portal"></div>
           </QueryProvider>
         </IntegrateMSW>
       </body>

src/app/mypage/edit/changepassword/page.tsx

@@ -0,0 +1,33 @@
+'use client';
+import CertifyPassword from '@/components/mypage/CertifyPassword';
+import NewPassword from '@/components/mypage/NewPassword';
+import PasswordChangeSuccess from '@/components/mypage/PasswordChangeSuccess';
+import { useRouter } from 'next/navigation';
+import React, { useState } from 'react';
+
+const ChangePasswordPage = () => {
+  const router = useRouter();
+  const [step, setStep] = useState(0);
+  return (
+    <div>
+      <div className="max-w-[640px] w-full mx-auto">
+        {step === 2 ? null : (
+          <div onClick={() => router.back()} className="py-[14px]">
+            <img
+              src="/images/mypage/left_password.svg"
+              alt=""
+              className="cursor-pointer"
+            />
+          </div>
+        )}
+      </div>
+      <section className="max-w-[340px] w-full mx-auto mt-[76px]">
+        {step === 0 ? <CertifyPassword setStep={setStep} /> : null}
+        {step === 1 ? <NewPassword setStep={setStep} /> : null}
+        {step === 2 ? <PasswordChangeSuccess /> : null}
+      </section>
+    </div>
+  );
+};
+
+export default ChangePasswordPage;