feat: step별 화살표 아이콘 router.back()

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">[email protected]</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">[email protected]</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>
   );

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"

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"

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"

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"