Merge pull request #38 from KimCookieYa/dev

[FE] 1차 종이배 핸드셰이킹 구현
2024-Circular-Reference · May 6, 2024 · f9dc2ad · f9dc2ad
2 parents 64c2b72 + 039aea1
commit f9dc2ad
Show file tree

Hide file tree

Showing 15 changed files with 136 additions and 40 deletions.
diff --git a/BE/verifier/error-logs/2024-05-06.log b/BE/verifier/error-logs/2024-05-06.log
diff --git a/BE/verifier/logs/2024-05-06.log b/BE/verifier/logs/2024-05-06.log
@@ -0,0 +1,12 @@
+[32m[VERIFIER][39m [33mInfo[39m	5/6/2024, 8:05:01 AM [33m[RoutesResolver][39m [32mVerifierAPIController {/api/verifier}:[39m
+[32m[VERIFIER][39m [33mInfo[39m	5/6/2024, 8:05:01 AM [33m[RouterExplorer][39m [32mMapped {/api/verifier/verify-proof, POST} route[39m
+[32m[VERIFIER][39m [33mInfo[39m	5/6/2024, 8:05:01 AM [33m[NestApplication][39m [32mNest application successfully started[39m
+[32m[VERIFIER][39m [33mInfo[39m	5/6/2024, 8:05:03 AM [33m[RoutesResolver][39m [32mVerifierAPIController {/api/verifier}:[39m
+[32m[VERIFIER][39m [33mInfo[39m	5/6/2024, 8:05:03 AM [33m[RouterExplorer][39m [32mMapped {/api/verifier/verify-proof, POST} route[39m
+[32m[VERIFIER][39m [33mInfo[39m	5/6/2024, 8:05:03 AM [33m[NestApplication][39m [32mNest application successfully started[39m
+[32m[VERIFIER][39m [33mInfo[39m	5/6/2024, 10:53:49 AM [33m[RoutesResolver][39m [32mVerifierAPIController {/api/verifier}:[39m
+[32m[VERIFIER][39m [33mInfo[39m	5/6/2024, 10:53:49 AM [33m[RouterExplorer][39m [32mMapped {/api/verifier/verify-proof, POST} route[39m
+[32m[VERIFIER][39m [33mInfo[39m	5/6/2024, 10:53:49 AM [33m[NestApplication][39m [32mNest application successfully started[39m
+[32m[VERIFIER][39m [33mInfo[39m	5/6/2024, 4:47:21 PM [33m[RoutesResolver][39m [32mVerifierAPIController {/api/verifier}:[39m
+[32m[VERIFIER][39m [33mInfo[39m	5/6/2024, 4:47:21 PM [33m[RouterExplorer][39m [32mMapped {/api/verifier/verify-proof, POST} route[39m
+[32m[VERIFIER][39m [33mInfo[39m	5/6/2024, 4:47:21 PM [33m[NestApplication][39m [32mNest application successfully started[39m
diff --git a/FE/service-homepage/src/api/Auth.ts → FE/service-homepage/src/api/User.ts b/FE/service-homepage/src/api/Auth.ts → FE/service-homepage/src/api/User.ts
@@ -30,3 +30,9 @@ export async function getUserInfo() {
 export async function getCheckLogin() {
     return clientAxios.get('/api/user/me');
 }
+
+export async function postVerifyProof(proof: string) {
+    return clientAxios.post('/api/user/verify-proof', {
+        proof,
+    });
+}
diff --git a/FE/service-homepage/src/app/(home)/layout.tsx b/FE/service-homepage/src/app/(home)/layout.tsx
@@ -6,7 +6,7 @@ import { useToast } from '@/stores/useToastStore';
 import { useRouter } from 'next/navigation';
 import Toast from '@/app/_component/Toast';
 import { useEffect } from 'react';
-import { getCheckLogin, getUserInfo } from '@/api/Auth';
+import { getCheckLogin, getUserInfo } from '@/api/User';
 import { IUserInfo } from '@/types/auth';
 
 export default function HomeLayout({
@@ -31,7 +31,7 @@ export default function HomeLayout({
 
             const fetchCheckLogin = async () => {
                 const res = await getCheckLogin();
-                if (res.status <= 300) {
+                if (res.data.result <= 300) {
                     console.log(res.data.data);
                     const res2 = await fetchMe();
                     console.log(res2);

diff --git a/FE/service-homepage/src/app/(home)/my-page/page.tsx b/FE/service-homepage/src/app/(home)/my-page/page.tsx
@@ -1,11 +1,19 @@
 'use client';
 
 import useWalletStore from '@/stores/useWalletStore';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { FaHeart } from 'react-icons/fa';
+import useUserInfoStore from '@/stores/useUserInfoStore';
+import { useRouter } from 'next/navigation';
+import { postLogout } from '@/api/User';
+import { useToast } from '@/stores/useToastStore';
 
 export default function MyPagePage() {
+    const router = useRouter();
     const { isInstalled, setInstalled } = useWalletStore();
+    const toastStore = useToast();
+    const { userInfo, logout } = useUserInfoStore((state) => state);
+    const [proof, setProof] = useState<string>('');
 
     useEffect(() => {
         setTimeout(() => {
@@ -20,25 +28,66 @@ export default function MyPagePage() {
 
     useEffect(() => {
         if (isInstalled) {
-            console.log('installed');
+            console.log('wallet is installed');
+        } else {
+            console.log("wallet isn't installed");
         }
     }, [isInstalled]);
 
     const onConnectWallet = () => {
         alert('지갑 연결!');
+        sendMessageToExtension();
     };
 
     const onInstallWallet = () => {
         alert('크롬 웹스토어로 이동합니다!');
     };
 
+    useEffect(() => {
+        // 확장 앱으로부터 메시지를 받기 위한 이벤트 리스너
+        window.addEventListener('message', (event) => {
+            if (event.origin !== window.location.origin) return;
+
+            if (event.data.type === 'FROM_EXTENSION_TO_PAGE') {
+                console.log(JSON.parse(event.data.message));
+                alert(`Message from extension: ${event.data.message}`);
+                setProof(event.data.message);
+            }
+        });
+    }, []);
+
+    // 버튼 클릭시 메시지 보내기
+    const sendMessageToExtension = () => {
+        window.postMessage(
+            { type: 'FROM_PAGE', text: 'Hello, extension!' },
+            '*'
+        );
+    };
+
+    const onLogout = async () => {
+        logout();
+        await postLogout();
+        toastStore.openToast('로그아웃 되었습니다.', 'success', () => {
+            router.push('/');
+        });
+    };
+
     return (
         <main className="flex flex-col items-center justify-center p-24">
             <h1 className="text-40 mt-24">마이페이지</h1>
             <section className="flex flex-col gap-y-12 mt-80 w-full">
-                <ProfileInfo label={'닉네임'} value={'김쿠키야'} />
+                <ProfileInfo
+                    label={'닉네임'}
+                    value={userInfo?.nickname as string}
+                />
                 <ProfileInfo label={'대학교'} value={'부산대학교'} />
-                <ProfileInfo label={'2차 인증'} value={'미인증'} />
+                <ProfileInfo
+                    label={'2차 인증'}
+                    value={
+                        userInfo?.isVerifiedUser ? '2차 인증 완료' : '미인증'
+                    }
+                />
+                <div>proof: {proof}</div>
                 {/*    {isInstalled ? (*/}
                 {/*    <button*/}
                 {/*        className={*/}
@@ -84,6 +133,14 @@ export default function MyPagePage() {
                     </button>
                 </div>
             </section>
+            <div className="flex gap-x-4 mt-24">
+                <button
+                    className={'p-2 bg-gray-200 rounded-2xl'}
+                    onClick={onLogout}
+                >
+                    로그아웃
+                </button>
+            </div>
         </main>
     );
 }

diff --git a/FE/service-homepage/src/app/(home)/notification/page.tsx b/FE/service-homepage/src/app/(home)/notification/page.tsx
@@ -35,7 +35,7 @@ export default function NotificationPage() {
 
             <h1 className="text-40 mt-24">{userInfo?.nickname}의 내역</h1>
             {alarmList.length > 0 ? (
-                <section className="flex flex-col gap-y-24 mt-80 w-full overflow-y-scroll h-800">
+                <section className="flex flex-col gap-y-24 mt-80 w-full  h-800">
                     {alarmList.map((alarm, index) => (
                         <NotificationItem key={index} alarm={alarm} />
                     ))}

diff --git a/FE/service-homepage/src/app/(sign)/layout.tsx b/FE/service-homepage/src/app/(sign)/layout.tsx
@@ -1,7 +1,30 @@
+'use client';
+
+import useUserInfoStore from '@/stores/useUserInfoStore';
+import { useRouter } from 'next/navigation';
+import { useEffect } from 'react';
+import { useToast } from '@/stores/useToastStore';
+
 export default function LandingLayout({
     children,
 }: {
     children: React.ReactNode;
 }) {
+    const userInfo = useUserInfoStore((state) => state.userInfo);
+    const openToast = useToast((state) => state.openToast);
+    const router = useRouter();
+
+    useEffect(
+        function checkLoginEffect() {
+            console.log('userInfo: ', userInfo);
+            if (userInfo) {
+                openToast('로그인됨', 'error', () => {
+                    router.push('/pond');
+                });
+            }
+        },
+        [userInfo]
+    );
+
     return <>{children}</>;
 }
diff --git a/FE/service-homepage/src/app/(sign)/login/page.tsx b/FE/service-homepage/src/app/(sign)/login/page.tsx
@@ -2,7 +2,7 @@
 
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { IUserInfo, IUserInfoForm } from '@/types/auth';
-import { getUserInfo, postLogin } from '@/api/Auth';
+import { getUserInfo, postLogin } from '@/api/User';
 import useUserInfoStore from '@/stores/useUserInfoStore';
 import { useRouter } from 'next/navigation';
 import UserInfoInput from '@/app/(sign)/_component/UserInfoInput';
@@ -32,7 +32,6 @@ export default function Page() {
     const onSubmit: SubmitHandler<IUserInfoForm> = async (data) => {
         const res = await postLogin(data.id, data.password);
         if (res.data.result <= 300) {
-            openToast('로그인 성공', 'success', () => router.push('/pond'));
             console.log(res.data);
             const userInfo = await fetchMe();
             console.log(userInfo);

diff --git a/FE/service-homepage/src/app/(sign)/page.tsx b/FE/service-homepage/src/app/(sign)/page.tsx
@@ -1,28 +1,6 @@
-'use client';
-
-import { useEffect } from 'react';
 import Link from 'next/link';
 
 export default function Home() {
-    useEffect(() => {
-        // 확장 앱으로부터 메시지를 받기 위한 이벤트 리스너
-        window.addEventListener('message', (event) => {
-            if (event.origin !== window.location.origin) return;
-
-            if (event.data.type === 'FROM_EXTENSION_TO_PAGE') {
-                alert(`Message from extension: ${event.data.message}`);
-            }
-        });
-    }, []);
-
-    // 버튼 클릭시 메시지 보내기
-    const sendMessageToExtension = () => {
-        window.postMessage(
-            { type: 'FROM_PAGE', text: 'Hello, extension!' },
-            '*'
-        );
-    };
-
     return (
         <main className="flex flex-col w-full h-full text-white items-center justify-center p-24 gap-y-24">
             <h1
@@ -38,13 +16,15 @@ export default function Home() {
                 당신의 마음 속 짝사랑을 찾아보세요
             </p>
             <div
-                className={'flex gap-x-4 animate-fadeIn opacity-0 mt-48'}
+                className={
+                    'flex flex-col gap-y-4 animate-fadeIn opacity-0 mt-48'
+                }
                 style={{ animationDelay: '2.5s' }}
             >
                 <Link href="/register">
                     <button
                         className={
-                            'bg-white text-black px-8 py-4 rounded-6 animate-springAlways duration-300 transform ease-in-out'
+                            'bg-white text-black w-80 py-4 rounded-6 animate-springAlways duration-300 transform ease-in-out'
                         }
                         style={{ animationDelay: '3.0s' }}
                     >
@@ -54,7 +34,7 @@ export default function Home() {
                 <Link href="/login">
                     <button
                         className={
-                            'bg-white text-black px-8 py-4 rounded-6 animate-springAlways duration-300 transform ease-in-out'
+                            'bg-white text-black w-80 py-4 rounded-6 animate-springAlways duration-300 transform ease-in-out'
                         }
                         style={{ animationDelay: '3.0s' }}
                     >

diff --git a/FE/service-homepage/src/app/(sign)/register/page.tsx b/FE/service-homepage/src/app/(sign)/register/page.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { SubmitHandler, useForm, UseFormRegister } from 'react-hook-form';
-import { postRegister } from '@/api/Auth';
+import { postRegister } from '@/api/User';
 import { IUserInfoForm } from '@/types/auth';
 import { useRouter } from 'next/navigation';
 import UserInfoInput from '@/app/(sign)/_component/UserInfoInput';

diff --git a/FE/service-homepage/src/app/_component/NavFooter.tsx b/FE/service-homepage/src/app/_component/NavFooter.tsx
@@ -6,7 +6,7 @@ import Link from 'next/link';
 
 export default function NavFooter() {
     return (
-        <footer className="fixed bottom-0 left-0 right-0 m-auto p-12 flex items-center justify-around rounded-6 w-[calc(372px)] bg-gray-800 text-white">
+        <footer className="fixed bottom-0 left-0 right-0 m-auto p-12 flex items-center justify-around rounded-6 min-w-[calc(372px)] bg-gray-800 text-white">
             <Link href="/notification">
                 <FaRegBell size={36} />
             </Link>

diff --git a/FE/service-homepage/src/app/_component/header.tsx b/FE/service-homepage/src/app/_component/header.tsx
@@ -3,7 +3,7 @@
 import { useEffect } from 'react';
 import { usePathname, useRouter } from 'next/navigation';
 import useUserInfoStore from '@/stores/useUserInfoStore';
-import { getUserInfo, postLogout } from '@/api/Auth';
+import { getUserInfo, postLogout } from '@/api/User';
 
 export default function Header() {
     const { userInfo, logout } = useUserInfoStore();

diff --git a/FE/service-homepage/src/app/api/user/verify-proof/route.ts b/FE/service-homepage/src/app/api/user/verify-proof/route.ts
@@ -0,0 +1,18 @@
+import getSession from '@/lib/session';
+import { NextRequest, NextResponse } from 'next/server';
+import serverAxios, { apiHandler } from '@/lib/server-axios';
+
+export const POST = apiHandler(async (req: NextRequest) => {
+    const session = await getSession();
+    const userPk = session.userPk;
+    const { proof } = await req.json();
+    const res = await serverAxios.post(`/match-log/v1/send/my-label`, {
+        userPk,
+        proof,
+    });
+
+    return NextResponse.json({
+        result: res.data.statusCode,
+        data: res.data.data,
+    });
+});
diff --git a/FE/service-homepage/src/app/layout.tsx b/FE/service-homepage/src/app/layout.tsx
@@ -17,17 +17,17 @@ export default function RootLayout({
         <html lang="ko">
             <body
                 className={
-                    'w-screen h-screen flex flex-col items-center bg-gray-200'
+                    'max-w-390 h-screen flex flex-col items-center bg-gray-200'
                 }
             >
                 <Image
                     src={PaperBoatBackground}
                     alt="background"
-                    className="-z-[100] fixed w-380 h-full"
+                    className="-z-[100] fixed max-w-390 h-full"
                 />
                 <div
                     className={
-                        'relative w-380 h-screen overflow-y-auto overflow-x-hidden'
+                        'relative w-full h-full overflow-y-auto overflow-x-hidden'
                     }
                 >
                     {children}

diff --git a/FE/service-homepage/src/lib/session.ts b/FE/service-homepage/src/lib/session.ts
@@ -16,6 +16,7 @@ export default function getSession() {
         cookieOptions: {
             secure: process.env.NODE_ENV === 'production',
             httponly: true,
+            maxAge: 60 * 60 * 5,
         },
     });
 }