Merge branch 'dev' into Feat/FeedPage

Author: jiyeeeah

app/(main)/community/error.tsx

@@ -10,31 +10,12 @@ export default function Error({
   error: Error & { digest?: string };
   reset: () => void;
 }) {
-  const login = async () => {
-    const response = await fetch(`/api/auth`, {
-      method: 'POST',
-      body: JSON.stringify({
-        email: '[email protected]',
-        password: '1234',
-      }),
-      mode: 'cors',
-      cache: 'no-cache',
-      credentials: 'include',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-    });
-    console.log(response);
-  };
   useEffect(() => {
     console.error(error);
   }, [error]);
 
   return (
     <div className="flex flex-col items-center justify-center w-full h-screen gap-10">
-      <button type="button" onClick={login}>
-        awd
-      </button>
       <h2 className="header1">예기치 못한 오류가 발생하였습니다.🙉</h2>
       <div className="flex gap-2 w-80">
         <Button fullWidth>메인으로</Button>

app/(main)/community/page.tsx

@@ -12,7 +12,6 @@ export const metadata: Metadata = {
 export default function CommunityPage() {
   return (
     <main className="flex flex-col flex-1 w-full h-full gap-10 p-8 overflow-x-hidden tablet:mt-0">
-      <h1 className="header2">참여중인 채팅방</h1>
       <EnteredChatList />
       <RecommendChatList />
       <TrendingChatList />

app/(main)/page.tsx

@@ -6,7 +6,7 @@ export default function Home() {
   return (
     <main className="flex items-start flex-1 w-full h-full gap-10 p-8 mt-0 overflow-y-scroll">
       <Feed />
-      <aside className="sticky top-0 flex-col justify-between hidden w-3/6 h-screen py-4 tablet:flex">
+      <aside className="sticky top-0 flex-col justify-between hidden w-3/6 h-full tablet:flex">
         <SimpleChatCardList />
         <RecommendPlace />
       </aside>

app/auth/email-login/page.tsx

@@ -1,5 +1,6 @@
 import EmailLogin from '@/components/pages/auth/EmailLogin';
 import { Metadata } from 'next';
+import Link from 'next/link';
 import React from 'react';
 
 export const metadata: Metadata = {
@@ -8,5 +9,25 @@ export const metadata: Metadata = {
 };
 
 export default function EmailLoginPage() {
-  return <EmailLogin title="이메일로 로그인" />;
+  return (
+    <div className="w-full flex flex-col">
+      <EmailLogin title="이메일로 로그인" />
+      <div className="flex justify-between items-center mt-6">
+        <Link href="/auth/policy">
+          <span className="text-xs 2xs:body1 text-grey-400">회원가입</span>
+        </Link>
+        <div className="flex gap-3 items-center">
+          <Link href="/auth/find-change?mode=findId">
+            <span className="text-xs 2xs:body1 text-grey-400">아이디 찾기</span>
+          </Link>
+          <div className="w-[1px] h-[18px] sm:h-6 bg-grey-200" />
+          <Link href="/auth/find-change?mode=changePwd">
+            <span className="text-xs 2xs:body1 text-grey-400">
+              비밀번호 변경
+            </span>
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
 }

app/auth/find-change/page.tsx

@@ -0,0 +1,19 @@
+import FindChange from '@/components/pages/auth/FindChange';
+import { Metadata } from 'next';
+import React from 'react';
+
+export const metadata: Metadata = {
+  title: '아이디 찾기/비밀번호 변경',
+  robots: 'noindex',
+};
+
+export default function FindChangePage() {
+  return (
+    <div className="w-full flex flex-col">
+      <h1 className="header1 text-center w-full gap-[40px] pb-8">
+        아이디 찾기/비밀번호 변경
+      </h1>
+      <FindChange />
+    </div>
+  );
+}

app/auth/login/page.tsx

@@ -37,12 +37,18 @@ export default function LoginPage() {
         isFullWidth
       >
         <div className="flex justify-between gap-[24px]">
-          <Link href="/" className="text-grey-400 text-xs 2xs:body1">
+          <Link
+            href="/auth/find-change?mode=findId"
+            className="text-grey-400 text-xs 2xs:body1"
+          >
             아이디(이메일)찾기
           </Link>
           <div className="w-[1px] h-[24px] bg-grey-200" />
-          <Link href="/" className="text-grey-400 text-xs 2xs:body1">
-            비밀번호 찾기
+          <Link
+            href="/auth/find-change?mode=changePwd"
+            className="text-grey-400 text-xs 2xs:body1"
+          >
+            비밀번호 변경
           </Link>
         </div>
       </BottomButton>

app/auth/pwchange/page.tsx

@@ -0,0 +1,13 @@
+import PwdChangeForm from '@/components/pages/auth/PwdChange';
+import React from 'react';
+
+export default function PwdChangePage() {
+  return (
+    <div className="w-full flex flex-col">
+      <h1 className="header1 text-center w-full gap-[40px] pb-8">
+        비밀번호 변경
+      </h1>
+      <PwdChangeForm />
+    </div>
+  );
+}

app/layout.tsx

@@ -16,6 +16,9 @@ export default function RootLayout({
 }) {
   return (
     <html lang="ko" className={myFont.className}>
+      <head>
+        <link rel="icon" href="/image.png" />
+      </head>
       <ReactQueryProvider>
         <body>
           <ToastContainer />

app/not-found.tsx

@@ -0,0 +1,19 @@
+import Button from '@/components/ui/Button';
+
+export default function NotFound() {
+  return (
+    <div className="flex flex-col items-center justify-center h-full max-w-xs gap-3 m-auto">
+      <h2 className="mb-5 header1">앗! 잠시만요.</h2>
+      <p className="mb-5 text-center whitespace-pre-wrap body2">
+        원하시는 페이지를 찾을 수 없어요. <br />
+        찾으시려는 페이지의 주소가 잘못 입력되었거나,
+        <br />
+        페이지 주소가 변경 또는 삭제되어 더는 사용하실 수 없습니다. 입력하신
+        페이지의 주소가 정확한지 다시 한번 확인해주세요.
+      </p>
+      <Button fullWidth to="/">
+        홈으로 이동
+      </Button>
+    </div>
+  );
+}

components/pages/auth/BottomButton.tsx

@@ -5,7 +5,7 @@ interface Props {
   variant?: 'primary' | 'secondary' | 'ghost' | 'light';
   isFullWidth?: boolean;
   to?: string;
-  text: string;
+  text: React.ReactNode;
   children?: React.ReactNode;
   isDisabled?: boolean;
   type?: 'button' | 'submit' | 'reset';

components/pages/auth/Complete/index.tsx

@@ -3,12 +3,10 @@
 import React from 'react';
 import Congratulation from '@/public/Auth/congratulation.svg';
 import { useGeneralRegisterStore } from '@/hooks/stores/useGeneralRegisterStore';
-import { useRouter } from 'next/navigation';
 import BottomButton from '@/components/pages/auth/BottomButton';
 
 export default function Complete() {
   const nickName = useGeneralRegisterStore((state) => state.nickname);
-  const router = useRouter();
   return (
     <>
       <div className="flex flex-col justify-center items-center gap-[24px] mb-[184px]">
@@ -26,7 +24,7 @@ export default function Complete() {
         variant="primary"
         isFullWidth
         handleClick={() => {
-          router.push('/');
+          window.location.href = '/';
         }}
       />
     </>

components/pages/auth/ConfirmIdentity/ConfirmForm.tsx

@@ -1,6 +1,7 @@
 import Button from '@/components/ui/Button';
 import { useIdentityStore } from '@/hooks/stores/useIdentityStore';
 import { checkVerification, requestVerification } from '@/service/auth';
+import Toast from '@/utils/notification';
 import React, { useEffect, useRef, useState } from 'react';
 import { shallow } from 'zustand/shallow';
 
@@ -41,7 +42,9 @@ export default function ConfirmForm({ setIsActive }: Props) {
       setIsLoading(true);
       setTimer(180);
     } catch (e) {
-      console.error('인증 요청 실패', e);
+      if (e instanceof Error) {
+        Toast.error(e.message);
+      }
     }
   };
 
@@ -58,7 +61,9 @@ export default function ConfirmForm({ setIsActive }: Props) {
         setIsDuplicatedRequest(false);
         inputRef.current?.focus();
       } catch (e) {
-        console.error('재인증 요청 실패', e);
+        if (e instanceof Error) {
+          Toast.error(e.message);
+        }
       }
       return;
     }
@@ -72,11 +77,13 @@ export default function ConfirmForm({ setIsActive }: Props) {
         setPhoneNum(phoneNumber);
         setTimer(0); // 타이머 값 리셋
       } else {
-        alert('인증번호가 일치하지 않습니다.');
+        Toast.error('인증번호가 일치하지 않습니다.');
         setIsDuplicatedRequest(true);
       }
     } catch (e) {
-      console.error('인증 요청 실패', e);
+      if (e instanceof Error) {
+        Toast.error(e.message);
+      }
     }
   };
 

components/pages/auth/EmailLogin/index.tsx

@@ -1,8 +1,8 @@
 'use client';
 
 import React, { useState } from 'react';
-import { useRouter } from 'next/navigation';
 import { loginWithEmailAndPassword } from '@/service/auth';
+import Toast from '@/utils/notification';
 import BottomButton from '../BottomButton';
 
 interface Props {
@@ -13,17 +13,17 @@ export default function EmailLogin({ title }: Props) {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [error, setError] = useState('');
-  const router = useRouter();
 
   const handleLogin = async (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     try {
       await loginWithEmailAndPassword({ email, password });
-      console.log('Success logging in');
-      router.push('/');
+      window.location.href = '/';
     } catch (e) {
       setError('"아이디 또는 비밀번호가 일치하지 않습니다. 다시 입력해주세요"');
-      console.error('Error logging in:', e);
+      if (e instanceof Error) {
+        Toast.error(e.message);
+      }
     }
   };
 

components/pages/auth/FindChange/TabButton.tsx

@@ -0,0 +1,37 @@
+// TabButton.js
+import { cn } from '@/utils/common';
+import React from 'react';
+import { TabType } from '.';
+
+interface Props {
+  activeTab: string;
+  tabName: TabType;
+  handleClick: () => void;
+  text: string;
+}
+
+function TabButton({ activeTab, tabName, handleClick, text }: Props) {
+  return (
+    <button
+      type="button"
+      className="w-1/2 flex flex-col justify-center items-center gap-2"
+      onClick={handleClick}
+    >
+      <p
+        className={`${
+          activeTab === tabName ? 'header4' : 'body1'
+        } text-grey-600`}
+      >
+        {text}
+      </p>
+      <div
+        className={cn(
+          'w-full h-1 bg-grey-200',
+          activeTab === tabName ? 'bg-grey-600' : null,
+        )}
+      />
+    </button>
+  );
+}
+
+export default TabButton;