From 505ca2ba7d7f0a8ce804238b32a8da29e4db1f40 Mon Sep 17 00:00:00 2001
From: jiohjung98 <ckaquz98@naver.com>
Date: Thu, 12 Sep 2024 18:18:42 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20step=EB=B3=84=20=ED=99=94=EC=82=B4?=
 =?UTF-8?q?=ED=91=9C=20=EC=95=84=EC=9D=B4=EC=BD=98=20router.back()?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/find/ShowEmailInfo.tsx         | 24 +++++++++----------
 src/components/signup/Step1.tsx               |  5 ++++
 src/components/signup/Step3.tsx               |  5 ++++
 src/components/signup/Step4.tsx               |  2 ++
 .../signup/modal/PhoneVerification.tsx        |  5 ++++
 5 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/src/components/find/ShowEmailInfo.tsx b/src/components/find/ShowEmailInfo.tsx
index 6326332..47bd940 100644
--- a/src/components/find/ShowEmailInfo.tsx
+++ b/src/components/find/ShowEmailInfo.tsx
@@ -3,18 +3,18 @@ import React from 'react';
 
 const ShowEmailInfo = () => {
   return (
-    <section className="max-w-[340px] w-full mx-auto mt-[76px]">
-        <div className="text-heading3 ">
-          <h2 className="text-xl text-center font-bold mb-6 text-left">
-            가입하신<br />
-            <span className="text-purple-600">이메일 정보</span>입니다
-          </h2>
-        </div>
-      <div className="py-8 px-4 text-center bg-gray-100 rounded-lg mb-6">Moaguide@gmail.com</div>
-      <Link href={'/sign'} className='cursor-pointer'>
-      <button className="flex items-center justify-center px-5 py-[14px] mt-[60px] w-full rounded-[12px] bg-gradient2 text-heading4 text-white">
-        로그인으로 돌아가기
-      </button>
+    <section className="flex flex-col items-center justify-center max-w-[340px] w-full mx-auto min-h-[calc(100vh-100px)] relative">
+      <div className="text-heading3">
+        <h2 className="text-xl text-center font-bold">
+          가입하신<br />
+          <span className="text-purple-600">이메일 정보</span>입니다
+        </h2>
+      </div>
+      <div className="w-full py-8 px-4 text-center bg-gray-100 rounded-lg my-10">Moaguide@gmail.com</div>
+      <Link href={'/sign'}>
+        <button className='w-full max-w-[340px] py-3 rounded-[12px] text-white text-lg font-bold bg-gradient2 text-heading4 text-white absolute bottom-0 left-0 right-0 mx-auto'>
+          로그인으로 돌아가기
+        </button>
       </Link>
     </section>
   );
diff --git a/src/components/signup/Step1.tsx b/src/components/signup/Step1.tsx
index ddf208f..ad265bd 100644
--- a/src/components/signup/Step1.tsx
+++ b/src/components/signup/Step1.tsx
@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import Image from 'next/image';
+import { useRouter } from 'next/navigation';
 import PrivacyModal from './modal/PrivacyModal';
 import ServiceModal from './modal/ServiceModal';
 import AgeModal from './modal/AgeModal';
@@ -20,6 +21,8 @@ const Step1: React.FC<StepProps> = ({ onNext, onUpdate }) => {
   });
   const [activePage, setActivePage] = useState<string | null>(null);
 
+  const router = useRouter();
+
   const handleAllCheckedChange = () => {
     const newCheckedState = !allChecked;
     setAllChecked(newCheckedState);
@@ -62,6 +65,8 @@ const Step1: React.FC<StepProps> = ({ onNext, onUpdate }) => {
           alt='뒤로가기'
           width={24}
           height={24}
+          className='cursor-pointer'
+          onClick={() => router.back()} 
         />
         <Image
           className="mt-6 mb-6"
diff --git a/src/components/signup/Step3.tsx b/src/components/signup/Step3.tsx
index 188669e..362c725 100644
--- a/src/components/signup/Step3.tsx
+++ b/src/components/signup/Step3.tsx
@@ -1,4 +1,5 @@
 import Image from 'next/image';
+import { useRouter } from 'next/navigation';
 import React, { useState } from 'react';
 
 interface StepProps {
@@ -13,6 +14,8 @@ const Step3: React.FC<StepProps> = ({ onNext, onUpdate }) => {
   const [passwordValid, setPasswordValid] = useState<boolean | null>(null);
   const [passwordMatch, setPasswordMatch] = useState<boolean | null>(null);
 
+  const router = useRouter();
+
   const validatePassword = (password: string) => {
     const isValid = /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[!@#$%^&*])[A-Za-z\d!@#$%^&*]{8,20}$/.test(password);
     setPasswordValid(isValid);
@@ -44,6 +47,8 @@ const Step3: React.FC<StepProps> = ({ onNext, onUpdate }) => {
           alt='뒤로가기'
           width={24}
           height={24}
+          className='cursor-pointer'
+          onClick={() => router.back()} 
         />
         <Image
           className="mt-6 mb-6"
diff --git a/src/components/signup/Step4.tsx b/src/components/signup/Step4.tsx
index 3a42091..51d5d77 100644
--- a/src/components/signup/Step4.tsx
+++ b/src/components/signup/Step4.tsx
@@ -99,6 +99,8 @@ const Step4: React.FC<StepProps> = ({ onNext, onUpdate }) => {
           alt='뒤로가기'
           width={24}
           height={24}
+          className='cursor-pointer'
+          onClick={() => router.back()} 
         />
         <Image
           className="mt-6 mb-6"
diff --git a/src/components/signup/modal/PhoneVerification.tsx b/src/components/signup/modal/PhoneVerification.tsx
index a112512..2a40de2 100644
--- a/src/components/signup/modal/PhoneVerification.tsx
+++ b/src/components/signup/modal/PhoneVerification.tsx
@@ -2,6 +2,7 @@ import React, { ChangeEvent, useEffect, useRef, useState } from 'react';
 import { sendVerificationCode, verifyCode } from '@/service/auth';
 import Image from 'next/image';
 import { validNumberToTime } from '@/utils/validNumberToTime';
+import { useRouter } from 'next/navigation';
 
 interface PhoneVerificationProps {
   onNext: () => void;
@@ -19,6 +20,8 @@ const PhoneVerification: React.FC<PhoneVerificationProps> = ({ onNext, onPhoneNu
   const [validTime, setValidTime] = useState<number>(300); // 인증 시간
   const inputRef = useRef<HTMLInputElement>(null);
 
+  const router = useRouter();
+
   const handlePhoneNumberChange = (e: ChangeEvent<HTMLInputElement>) => {
     const regex = e.target.value
       .replace(/[^0-9]/g, '')
@@ -137,6 +140,8 @@ const PhoneVerification: React.FC<PhoneVerificationProps> = ({ onNext, onPhoneNu
           alt='뒤로가기'
           width={24}
           height={24}
+          className='cursor-pointer'
+          onClick={() => router.back()} 
         />
         <Image
           className="mt-6 mb-6"