From 4346e5559cece47844549bc2bca9425b96c6a48a Mon Sep 17 00:00:00 2001
From: jeschun <jeschun54@gmail.com>
Date: Sun, 19 Oct 2025 20:08:28 +0900
Subject: [PATCH 1/5] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor:=20=ED=94=84?=
 =?UTF-8?q?=EB=A1=9C=ED=95=84=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=A0=88?=
 =?UTF-8?q?=EC=9D=B4=EC=95=84=EC=9B=83=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/my-profile/index.tsx | 215 +++++++++++++++++++--------------
 1 file changed, 125 insertions(+), 90 deletions(-)

diff --git a/src/pages/my-profile/index.tsx b/src/pages/my-profile/index.tsx
index 4c5ef50..b28a440 100644
--- a/src/pages/my-profile/index.tsx
+++ b/src/pages/my-profile/index.tsx
@@ -1,3 +1,4 @@
+// src/pages/my-profile/index.tsx
 import Image from 'next/image';
 import Link from 'next/link';
 import { useEffect, useMemo, useState } from 'react';
@@ -46,124 +47,158 @@ export default function MyProfileDetailPage() {
         startsAt: a.notice.item.startsAt,
         workhour: a.notice.item.workhour,
         status,
-        // employee 표에서는 미사용 — 타입만 충족
         bio: '',
         phone: '',
       };
     });
   }, [applications]);
 
-  const pagedRows = useMemo(() => rows.slice(offset, offset + limit), [rows, offset]);
+  // 로딩 중에도 마지막 성공 데이터를 유지 (화면 흔들림 방지)
+  const [stableRows, setStableRows] = useState<TableRowProps[]>([]);
+  const [stableTotal, setStableTotal] = useState<number>(0);
+  useEffect(() => {
+    if (rows.length > 0) {
+      setStableRows(rows);
+      setStableTotal(applications.length);
+    }
+  }, [rows, applications.length]);
 
-  // rows 변화 시 첫 페이지로 리셋 (페이지네이션 UX 보강)
+  // rows 변화 시 첫 페이지로 리셋
   useEffect(() => {
     setOffset(0);
   }, [rows.length]);
 
-  return (
-    <main className='mx-auto w-full max-w-[1440px] px-4 py-6 tablet:py-8'>
-      <div className='mx-auto w-full desktop:max-w-[957px]'>
-        <h1 className='mb-6 text-heading-l font-semibold'>내 프로필</h1>
+  const currentRows = rows.length > 0 ? rows : stableRows;
+  const currentTotal = rows.length > 0 ? applications.length : stableTotal;
+
+  const pagedRows = useMemo(() => currentRows.slice(offset, offset + limit), [currentRows, offset]);
 
-        {/* 프로필이 없으면 등록 프레임 */}
+  return (
+    <main className='mx-auto w-full max-w-[1440px] py-6 tablet:py-8'>
+      {/* 공통 컨테이너: Table과 좌측선/폭 동일 */}
+      <div className='mx-auto w-full max-w-full px-8 md:px-10 lg:mx-auto lg:max-w-[1000px] lg:px-0'>
         {profileIsEmpty ? (
-          <Frame
-            title=''
-            content='내 프로필을 등록하고 원하는 가게에 지원해 보세요.'
-            buttonText='내 프로필 등록하기'
-            href='/my-profile/register'
-          />
+          <>
+            <h1 className='mb-6 text-heading-l font-semibold'>내 프로필</h1>
+            <div className='mx-auto w-full'>
+              <Frame
+                title=''
+                content='내 프로필을 등록하고 원하는 가게에 지원해 보세요.'
+                buttonText='내 프로필 등록하기'
+                href='/my-profile/register'
+              />
+            </div>
+          </>
         ) : (
-          // 프로필 카드(피그마 스타일)
-          <section
-            className='w-full rounded-[24px] border border-[var(--red-300)] bg-[var(--red-100)] p-5 tablet:p-7 desktop:p-8'
-            aria-label='내 프로필 요약'
-          >
-            <div className='flex items-start justify-between gap-4'>
-              <div className='flex-1'>
-                <p className='mb-1 text-body-m font-semibold text-[var(--red-500)]'>이름</p>
-                <p className='text-heading-m font-extrabold leading-tight text-[var(--gray-900)]'>
-                  {user?.name || '—'}
-                </p>
-
-                {/* 연락처 */}
-                <div className='mt-4 flex items-center gap-2 text-[var(--gray-600)]'>
-                  <Image
-                    src={ICONS.phone}
-                    alt='전화'
-                    width={24}
-                    height={24}
-                    className={ICON_SIZES.md}
-                    priority
-                  />
-                  <span className='text-body-m'>{user?.phone || '—'}</span>
-                </div>
-
-                {/* 선호 지역 */}
-                <div className='mt-3 flex items-center gap-2 text-[var(--gray-600)]'>
-                  <Image
-                    src={ICONS.map}
-                    alt='지도'
-                    width={24}
-                    height={24}
-                    className={ICON_SIZES.md}
-                    priority
-                  />
-                  <span className='text-body-m'>선호 지역: {(user?.address as string) || '—'}</span>
-                </div>
+          // ✅ 데스크탑에서 제목과 카드가 같은 flex 라인에 놓이도록
+          <div className='desktop:flex desktop:items-start desktop:gap-8'>
+            <h1 className='mb-6 text-heading-l font-semibold desktop:mb-0 desktop:w-[200px] desktop:shrink-0 desktop:pt-2'>
+              내 프로필
+            </h1>
 
-                {/* 소개 */}
-                {user?.bio && (
-                  <p className='mt-6 whitespace-pre-wrap text-body-m text-[var(--gray-900)]'>
-                    {user.bio}
+            <section
+              className='flex-1 rounded-[24px] bg-[var(--red-100)] p-4 tablet:p-6 desktop:max-w-[780px] desktop:p-7'
+              aria-label='내 프로필 요약'
+            >
+              <div className='flex items-start justify-between gap-3 tablet:gap-4 desktop:gap-6'>
+                <div className='flex-1'>
+                  <p className='mb-1 text-body-m font-semibold text-[var(--red-500)]'>이름</p>
+                  <p className='text-heading-m font-extrabold leading-tight text-[var(--gray-900)]'>
+                    {user?.name || '—'}
                   </p>
-                )}
-              </div>
 
-              {/* 우상단 편집 버튼 */}
-              <div className='ml-4 shrink-0'>
-                <Button
-                  variant='secondary'
-                  size='lgFixed'
-                  className='w-[169px]'
-                  as={Link}
-                  href='/my-profile/register'
-                >
-                  편집하기
-                </Button>
+                  {/* 연락처 */}
+                  <div className='mt-3 flex items-center gap-2 text-[var(--gray-600)] tablet:mt-4'>
+                    <Image
+                      src={ICONS.phone}
+                      alt='전화'
+                      width={24}
+                      height={24}
+                      className={ICON_SIZES.md}
+                      priority
+                    />
+                    <span className='text-body-m'>{user?.phone || '—'}</span>
+                  </div>
+
+                  {/* 선호 지역 */}
+                  <div className='mt-2 flex items-center gap-2 text-[var(--gray-600)] tablet:mt-3'>
+                    <Image
+                      src={ICONS.map}
+                      alt='지도'
+                      width={24}
+                      height={24}
+                      className={ICON_SIZES.md}
+                      priority
+                    />
+                    <span className='text-body-m'>
+                      선호 지역: {(user?.address as string) || '—'}
+                    </span>
+                  </div>
+
+                  {/* 소개 */}
+                  {user?.bio && (
+                    <p className='mt-5 whitespace-pre-wrap text-body-m text-[var(--gray-900)] tablet:mt-6'>
+                      {user.bio}
+                    </p>
+                  )}
+                </div>
+
+                {/* 우상단 편집 버튼 */}
+                <div className='ml-3 shrink-0 tablet:ml-4'>
+                  <Button
+                    variant='secondary'
+                    size='lgFixed'
+                    className='w-[169px]'
+                    as={Link}
+                    href='/my-profile/register'
+                  >
+                    편집하기
+                  </Button>
+                </div>
               </div>
-            </div>
-          </section>
+            </section>
+          </div>
         )}
       </div>
 
-      {/* 신청 내역 — 프로필 있고 로그인 상태일 때만 */}
+      {/* 하단: 신청 내역 — 프로필 있고 로그인 상태일 때만 */}
       {!profileIsEmpty && isLogin && (
-        <section className='mt-8'>
-          {isLoading ? (
-            <div className='text-body-m text-[var(--gray-500)]'>불러오는 중…</div>
-          ) : rows.length === 0 ? (
-            <div className='mx-auto w-full desktop:max-w-[964px]'>
+        <section className='mt-8 bg-[var(--gray-50)] py-8'>
+          <div className='mx-auto w-full max-w-full px-8 md:px-10 lg:mx-auto lg:max-w-[1000px] lg:px-0'>
+            {isLoading && currentRows.length === 0 ? (
+              <>
+                <div className='px-0 text-xl font-bold'>
+                  <h2 className='text-heading-l font-semibold'>신청 내역</h2>
+                </div>
+                <div className='m-7 overflow-hidden rounded-lg border bg-white lg:mx-auto lg:max-w-[1000px]'>
+                  <div className='h-[48px] bg-[var(--red-100)]' />
+                  {[...Array(5)].map((_, i) => (
+                    <div key={i} className='h-[56px] border-t bg-white last:border-b' />
+                  ))}
+                  <div className='flex justify-center px-3 py-2' />
+                </div>
+              </>
+            ) : currentRows.length === 0 ? (
               <Frame
                 title='신청 내역'
                 content='마음에 드는 공고를 찾아 지원해 보세요.'
                 buttonText='공고 보러가기'
                 href='/notices'
               />
-            </div>
-          ) : (
-            <div className='mx-auto w-full desktop:max-w-[964px]'>
-              <Table
-                headers={headers}
-                tableData={pagedRows}
-                userRole={userType}
-                total={applications.length}
-                limit={limit}
-                offset={offset}
-                onPageChange={setOffset}
-              />
-            </div>
-          )}
+            ) : (
+              <div className='mx-auto w-full lg:mx-auto lg:max-w-[1000px]'>
+                <Table
+                  headers={headers}
+                  tableData={pagedRows}
+                  userRole={userType}
+                  total={currentTotal}
+                  limit={limit}
+                  offset={offset}
+                  onPageChange={setOffset}
+                />
+              </div>
+            )}
+          </div>
         </section>
       )}
     </main>

From 01640bd2320cc3b1ee627b46f10214add8b48436 Mon Sep 17 00:00:00 2001
From: jeschun <jeschun54@gmail.com>
Date: Sun, 19 Oct 2025 21:59:51 +0900
Subject: [PATCH 2/5] =?UTF-8?q?=F0=9F=90=9B=20fix:=20=ED=95=84=EC=88=98=20?=
 =?UTF-8?q?=EC=9E=85=EB=A0=A5=20=ED=95=84=EB=93=9C=EC=97=90=20=ED=91=9C?=
 =?UTF-8?q?=EC=8B=9C=20=EC=B6=94=EA=B0=80=20=EB=B0=8F=20=EC=98=A4=EB=A5=98?=
 =?UTF-8?q?=20=EB=A9=94=EC=8B=9C=EC=A7=80=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/my-profile/register.tsx | 29 +++++++++++++++++++++--------
 1 file changed, 21 insertions(+), 8 deletions(-)

diff --git a/src/pages/my-profile/register.tsx b/src/pages/my-profile/register.tsx
index 3a68053..2038ca5 100644
--- a/src/pages/my-profile/register.tsx
+++ b/src/pages/my-profile/register.tsx
@@ -14,7 +14,7 @@ type ProfileForm = {
   name: string;
   phone: string;
   region: AddressCode | '';
-  bio: string;
+  bio: string; // bio는 선택
 };
 
 export default function MyProfileRegisterPage() {
@@ -76,12 +76,12 @@ export default function MyProfileRegisterPage() {
 
     setIsSubmitting(true);
     try {
-      //  서버 반영 + 컨텍스트 동기화
+      // 서버 반영 + 컨텍스트 동기화
       await updateUser({
         name: formState.name.trim(),
         phone: formState.phone.trim(),
         address: formState.region,
-        bio: formState.bio,
+        bio: formState.bio, // bio는 선택(빈 문자열 가능)
       });
       setIsDoneOpen(true);
     } finally {
@@ -100,6 +100,7 @@ export default function MyProfileRegisterPage() {
       >
         <Icon iconName='close' iconSize='md' ariaLabel='닫기' />
       </button>
+
       <h1 className='mb-6 text-heading-l font-semibold'>내 프로필</h1>
 
       <form
@@ -113,7 +114,7 @@ export default function MyProfileRegisterPage() {
           <div className='flex flex-col'>
             <Input
               id='name'
-              label='이름'
+              label='이름*' // ⭐ 변경: 필수표시
               placeholder='입력'
               value={formState.name}
               onChange={e => {
@@ -123,16 +124,21 @@ export default function MyProfileRegisterPage() {
               onBlur={() =>
                 setNameErrorMessage(formState.name.trim() ? null : '이름을 입력해 주세요.')
               }
-              required
+              required // HTML5 required
               error={nameErrorMessage ?? undefined}
             />
+            {nameErrorMessage && (
+              <p className='mt-1 text-caption text-[var(--red-500)]' role='alert'>
+                {nameErrorMessage}
+              </p>
+            )}
           </div>
 
           {/* 연락처 */}
           <div className='flex flex-col'>
             <Input
               id='phone'
-              label='연락처'
+              label='연락처*' // ⭐ 변경: 필수표시
               placeholder='010-1234-5678'
               value={formState.phone}
               onChange={e => {
@@ -149,6 +155,11 @@ export default function MyProfileRegisterPage() {
               required
               error={phoneErrorMessage ?? undefined}
             />
+            {phoneErrorMessage && (
+              <p className='mt-1 text-caption text-[var(--red-500)]' role='alert'>
+                {phoneErrorMessage}
+              </p>
+            )}
           </div>
 
           {/* 선호 지역 */}
@@ -170,7 +181,9 @@ export default function MyProfileRegisterPage() {
               className='w-full'
             />
             {regionErrorMessage && (
-              <p className='mt-1 text-caption text-[var(--red-500)]'>{regionErrorMessage}</p>
+              <p className='mt-1 text-caption text-[var(--red-500)]' role='alert'>
+                {regionErrorMessage}
+              </p>
             )}
           </div>
         </div>
@@ -178,7 +191,7 @@ export default function MyProfileRegisterPage() {
         {/* 소개(선택) */}
         <div className='mt-4'>
           <label htmlFor='bio' className='mb-2 block text-body-m'>
-            소개
+            소개 (선택) {/* ⭐ 변경: 선택 표기 */}
           </label>
           <textarea
             id='bio'

From ab7ec275776fbee31bfee85b765abea97f04128b Mon Sep 17 00:00:00 2001
From: jeschun <jeschun54@gmail.com>
Date: Sun, 19 Oct 2025 22:00:09 +0900
Subject: [PATCH 3/5] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor:=20=EB=B6=88?=
 =?UTF-8?q?=ED=95=84=EC=9A=94=ED=95=9C=20=EC=A3=BC=EC=84=9D=20=EC=A0=9C?=
 =?UTF-8?q?=EA=B1=B0=20=EB=B0=8F=20=ED=95=84=EB=93=9C=20=EB=A0=88=EC=9D=B4?=
 =?UTF-8?q?=EB=B8=94=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/my-profile/register.tsx | 39 ++++++++++---------------------
 1 file changed, 12 insertions(+), 27 deletions(-)

diff --git a/src/pages/my-profile/register.tsx b/src/pages/my-profile/register.tsx
index 2038ca5..4e5db9a 100644
--- a/src/pages/my-profile/register.tsx
+++ b/src/pages/my-profile/register.tsx
@@ -9,7 +9,6 @@ import { useEffect, useState } from 'react';
 
 import { ADDRESS_CODE, type AddressCode } from '@/constants/dropdown';
 
-/** 폼 타입 */
 type ProfileForm = {
   name: string;
   phone: string;
@@ -33,15 +32,13 @@ export default function MyProfileRegisterPage() {
   const [regionErrorMessage, setRegionErrorMessage] = useState<string | null>(null);
 
   const [isSubmitting, setIsSubmitting] = useState(false);
-  const [isDoneOpen, setIsDoneOpen] = useState(false); // 완료 모달
-  const [isCancelOpen, setIsCancelOpen] = useState(false); // 취소 확인 모달
+  const [isDoneOpen, setIsDoneOpen] = useState(false);
+  const [isCancelOpen, setIsCancelOpen] = useState(false);
 
-  // 로그인 가드
   useEffect(() => {
     if (!isLogin) router.replace('/login');
   }, [isLogin, router]);
 
-  // 기존 값 프리필(컨텍스트 user 사용)
   useEffect(() => {
     if (!isLogin || !user) return;
     setFormState({
@@ -76,12 +73,11 @@ export default function MyProfileRegisterPage() {
 
     setIsSubmitting(true);
     try {
-      // 서버 반영 + 컨텍스트 동기화
       await updateUser({
         name: formState.name.trim(),
         phone: formState.phone.trim(),
         address: formState.region,
-        bio: formState.bio, // bio는 선택(빈 문자열 가능)
+        bio: formState.bio, // 선택값: 빈 문자열 가능
       });
       setIsDoneOpen(true);
     } finally {
@@ -91,7 +87,7 @@ export default function MyProfileRegisterPage() {
 
   return (
     <main className='relative mx-auto w-full max-w-[960px] px-4 py-6 tablet:py-8'>
-      {/* 우상단 닫기(X) 버튼 */}
+      {/* 닫기 */}
       <button
         type='button'
         aria-label='프로필 등록 취소'
@@ -114,7 +110,7 @@ export default function MyProfileRegisterPage() {
           <div className='flex flex-col'>
             <Input
               id='name'
-              label='이름*' // ⭐ 변경: 필수표시
+              label='이름*' // 문구만 유지(필수)
               placeholder='입력'
               value={formState.name}
               onChange={e => {
@@ -124,21 +120,17 @@ export default function MyProfileRegisterPage() {
               onBlur={() =>
                 setNameErrorMessage(formState.name.trim() ? null : '이름을 입력해 주세요.')
               }
-              required // HTML5 required
+              required
               error={nameErrorMessage ?? undefined}
             />
-            {nameErrorMessage && (
-              <p className='mt-1 text-caption text-[var(--red-500)]' role='alert'>
-                {nameErrorMessage}
-              </p>
-            )}
+            {/* ❌ 중복 메시지 제거: 아래 커스텀 <p> 삭제 */}
           </div>
 
           {/* 연락처 */}
           <div className='flex flex-col'>
             <Input
               id='phone'
-              label='연락처*' // ⭐ 변경: 필수표시
+              label='연락처*' // 문구만 유지(필수)
               placeholder='010-1234-5678'
               value={formState.phone}
               onChange={e => {
@@ -155,17 +147,13 @@ export default function MyProfileRegisterPage() {
               required
               error={phoneErrorMessage ?? undefined}
             />
-            {phoneErrorMessage && (
-              <p className='mt-1 text-caption text-[var(--red-500)]' role='alert'>
-                {phoneErrorMessage}
-              </p>
-            )}
+            {/* ❌ 중복 메시지 제거: 아래 커스텀 <p> 삭제 */}
           </div>
 
           {/* 선호 지역 */}
           <div className='flex flex-col'>
             <label htmlFor='region' className='mb-2 text-body-m'>
-              선호 지역*
+              선호 지역 {/* ← * 제거 */}
             </label>
             <Dropdown<AddressCode>
               name='region'
@@ -188,10 +176,10 @@ export default function MyProfileRegisterPage() {
           </div>
         </div>
 
-        {/* 소개(선택) */}
+        {/* 소개(선택) → 소개 */}
         <div className='mt-4'>
           <label htmlFor='bio' className='mb-2 block text-body-m'>
-            소개 (선택) {/* ⭐ 변경: 선택 표기 */}
+            소개
           </label>
           <textarea
             id='bio'
@@ -202,7 +190,6 @@ export default function MyProfileRegisterPage() {
           />
         </div>
 
-        {/* 등록 버튼 */}
         <div className='mt-6 flex justify-center'>
           <Button
             type='submit'
@@ -217,7 +204,6 @@ export default function MyProfileRegisterPage() {
         </div>
       </form>
 
-      {/* 등록 완료 모달 */}
       <Modal
         open={isDoneOpen}
         onClose={() => setIsDoneOpen(false)}
@@ -230,7 +216,6 @@ export default function MyProfileRegisterPage() {
         }}
       />
 
-      {/* 취소 확인 모달 */}
       <Modal
         open={isCancelOpen}
         onClose={() => setIsCancelOpen(false)}

From b2188920a00fd6de7877953b36cdfe3ddd9d4b10 Mon Sep 17 00:00:00 2001
From: jeschun <jeschun54@gmail.com>
Date: Sun, 19 Oct 2025 23:03:55 +0900
Subject: [PATCH 4/5] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor:=20=EB=B9=84?=
 =?UTF-8?q?=EB=B0=80=EB=B2=88=ED=98=B8=20=EA=B2=80=EC=A6=9D=20=EB=A1=9C?=
 =?UTF-8?q?=EC=A7=81=20=EA=B0=9C=EC=84=A0=20=EB=B0=8F=20=EC=A6=89=EC=8B=9C?=
 =?UTF-8?q?=20=EA=B2=80=EC=A6=9D=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/signup.tsx | 69 +++++++++++++++++++++++++++-----------------
 1 file changed, 43 insertions(+), 26 deletions(-)

diff --git a/src/pages/signup.tsx b/src/pages/signup.tsx
index 7eae3c8..1d85af8 100644
--- a/src/pages/signup.tsx
+++ b/src/pages/signup.tsx
@@ -41,12 +41,34 @@ const SignupPage: NextPageWithLayout = () => {
   const [successOpen, setSuccessOpen] = useState(false);
   const [globalErr, setGlobalErr] = useState<string | null>(null);
 
-  const onBlurEmail = (e: React.FocusEvent<HTMLInputElement>) => {
-    if (e.currentTarget.validity.typeMismatch) setEmailErr('이메일 형식으로 작성해 주세요.');
+  // ---- validators ----
+  const validateEmail = (el: HTMLInputElement) => {
+    if (el.validity.typeMismatch) setEmailErr('이메일 형식으로 작성해 주세요.');
     else setEmailErr(null);
   };
-  const onBlurPw = () => setPwErr(pw.length < 8 ? '8자 이상 입력해주세요.' : null);
-  const onBlurPw2 = () => setPw2Err(pw !== pw2 ? '비밀번호가 일치하지 않습니다.' : null);
+  const validatePw = (value: string) => {
+    setPwErr(value.length < 8 ? '8자 이상 입력해주세요.' : null);
+  };
+  const validatePwMatch = (v1: string, v2: string) => {
+    // 둘 중 하나라도 값이 있으면 비교하고, 둘 다 비면 에러 없음
+    if (!v1 && !v2) return setPw2Err(null);
+    setPw2Err(v1 === v2 ? null : '비밀번호가 일치하지 않습니다.');
+  };
+
+  const onBlurEmail = (e: React.FocusEvent<HTMLInputElement>) => validateEmail(e.currentTarget);
+  const onBlurPw = () => validatePw(pw);
+  const onBlurPw2 = () => validatePwMatch(pw, pw2);
+
+  // 즉시 검증: 입력 중에도 에러/버튼 상태가 반영되도록
+  const onChangePw = (next: string) => {
+    setPw(next);
+    validatePw(next);
+    if (pw2) validatePwMatch(next, pw2);
+  };
+  const onChangePw2 = (next: string) => {
+    setPw2(next);
+    validatePwMatch(pw, next);
+  };
 
   const canSubmit =
     !!email && pw.length >= 8 && !!pw2 && pw === pw2 && !emailErr && !pwErr && !pw2Err && !loading;
@@ -55,23 +77,20 @@ const SignupPage: NextPageWithLayout = () => {
     e.preventDefault();
     setGlobalErr(null);
 
-    if (!e.currentTarget.checkValidity()) {
-      e.currentTarget.reportValidity();
-      return;
-    }
-    if (!canSubmit) {
-      onBlurEmail({
-        currentTarget: e.currentTarget.email,
-      } as unknown as React.FocusEvent<HTMLInputElement>);
-      onBlurPw();
-      onBlurPw2();
-      return;
-    }
+    // HTML5 validity (이메일)
+    const emailInput = (e.currentTarget.elements.namedItem('email') as HTMLInputElement) || null;
+    if (emailInput) validateEmail(emailInput);
+
+    // 수동 검증 (패스워드 + 매칭)
+    validatePw(pw);
+    validatePwMatch(pw, pw2);
+
+    if (!canSubmit) return;
 
     setLoading(true);
     try {
       await signup({ email, password: pw, type });
-      setSuccessOpen(true); // ✅ alert → 모달
+      setSuccessOpen(true);
     } catch (err) {
       const status = (err as { response?: { status?: number } })?.response?.status;
       if (status === 409) setDupOpen(true);
@@ -199,10 +218,7 @@ const SignupPage: NextPageWithLayout = () => {
               type='password'
               placeholder='입력'
               value={pw}
-              onChange={e => {
-                setPw(e.target.value);
-                if (pwErr) setPwErr(null);
-              }}
+              onChange={e => onChangePw(e.target.value)}
               onBlur={onBlurPw}
               minLength={8}
               required
@@ -221,10 +237,7 @@ const SignupPage: NextPageWithLayout = () => {
               type='password'
               placeholder='입력'
               value={pw2}
-              onChange={e => {
-                setPw2(e.target.value);
-                if (pw2Err) setPw2Err(null);
-              }}
+              onChange={e => onChangePw2(e.target.value)}
               onBlur={onBlurPw2}
               required
               error={pw2Err ?? undefined}
@@ -288,7 +301,11 @@ const SignupPage: NextPageWithLayout = () => {
       {/* 가입 성공 모달 */}
       <Modal
         open={successOpen}
-        onClose={() => setSuccessOpen(false)}
+        // ✅ dimmed 클릭(= onClose)도 로그인 페이지로 이동
+        onClose={() => {
+          setSuccessOpen(false);
+          window.location.href = '/';
+        }}
         title='가입이 완료되었습니다'
         description={<p className='text-center'>이메일과 비밀번호로 로그인해 주세요.</p>}
         variant='success'

From 2042346ee90cc7e0870bf77ba9b46497e630806b Mon Sep 17 00:00:00 2001
From: jeschun <jeschun54@gmail.com>
Date: Sun, 19 Oct 2025 23:59:05 +0900
Subject: [PATCH 5/5] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor:=20=EC=95=8C?=
 =?UTF-8?q?=EB=A6=BC=20=EB=B2=84=ED=8A=BC=20=EB=B0=8F=20=ED=8C=A8=EB=84=90?=
 =?UTF-8?q?=20=EB=A0=8C=EB=8D=94=EB=A7=81=20=EB=A1=9C=EC=A7=81=20=EA=B0=9C?=
 =?UTF-8?q?=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/layout/header/nav.tsx | 69 ++++++++++++++++++++++------
 1 file changed, 54 insertions(+), 15 deletions(-)

diff --git a/src/components/layout/header/nav.tsx b/src/components/layout/header/nav.tsx
index 49f0ea2..772c815 100644
--- a/src/components/layout/header/nav.tsx
+++ b/src/components/layout/header/nav.tsx
@@ -24,6 +24,7 @@ const NAV_ITEMS: Record<UserRole, NavItems[]> = {
 const Nav = () => {
   const { role, isLogin, logout } = useAuth();
   const { applications } = useUserApplications();
+
   const [open, setOpen] = useState(false);
   // 읽음 처리한 알림 ID들 (간단 로컬 상태)
   const [readIds, setReadIds] = useState<Set<string>>(new Set());
@@ -43,10 +44,6 @@ const Nav = () => {
       }));
   }, [applications, readIds]);
 
-  const unreadCount = alerts.filter(a => !a.read).length;
-  const bellIcon: 'notificationOn' | 'notificationOff' =
-    unreadCount > 0 ? 'notificationOn' : 'notificationOff';
-
   const handleRead = (id: string) => {
     setReadIds(prev => {
       const next = new Set(prev);
@@ -55,9 +52,17 @@ const Nav = () => {
     });
   };
 
+  // ✅ role이 초기 undefined일 수 있어 방어
+  const currentRole: UserRole = (role ?? 'guest') as UserRole;
+
+  // ✅ 아이콘은 "패널 열림 상태"로만 토글
+  const bellIcon: 'notificationOn' | 'notificationOff' = open
+    ? 'notificationOn'
+    : 'notificationOff';
+
   return (
     <nav className={cn('flex shrink-0 items-center gap-4 text-body-m font-bold', 'desktop:gap-10')}>
-      {NAV_ITEMS[role].map(({ href, label }) => (
+      {(NAV_ITEMS[currentRole] ?? []).map(({ href, label }) => (
         <Link key={href} href={href}>
           {label}
         </Link>
@@ -74,20 +79,54 @@ const Nav = () => {
           >
             로그아웃
           </button>
-          <button type='button' aria-label='알림 확인하기' onClick={() => setOpen(true)}>
-            <Icon iconName={bellIcon} iconSize='rg' bigScreenSize='md' ariaLabel='알림' />
-          </button>
-          <div className='absolute right-4 top-[64px] z-[50] w-full max-w-[420px]'>
-            <Notification
-              alerts={alerts}
-              onRead={handleRead}
-              isOpen={open}
-              onClose={() => setOpen(false)}
+
+          {/* 알림 버튼: 토글 */}
+          <button
+            type='button'
+            aria-label='알림 확인하기'
+            aria-expanded={open}
+            aria-controls='notification-panel'
+            onClick={() => setOpen(prev => !prev)}
+            className='relative'
+          >
+            {/* 일부 메모이제이션 대비 강제 리렌더 */}
+            <Icon
+              key={open ? 'bell-on' : 'bell-off'}
+              iconName={bellIcon}
+              iconSize='rg'
+              bigScreenSize='md'
+              ariaLabel='알림'
             />
-          </div>
+          </button>
+
+          {/* 패널: 열릴 때만 렌더 + 사이즈 고정(피그마) */}
+          {open && (
+            <div
+              id='notification-panel'
+              role='dialog'
+              aria-modal='true'
+              className={cn(
+                'absolute right-2 top-[64px] z-[50]',
+                // 모바일 기본 375 x 812
+                'h-[812px] w-[375px]',
+                // 태블릿/데스크탑 368 x 419
+                'tablet:h-[419px] tablet:w-[368px]',
+                'desktop:h-[419px] desktop:w-[368px]',
+                'overflow-auto rounded-xl'
+              )}
+            >
+              <Notification
+                alerts={alerts}
+                onRead={handleRead}
+                isOpen={open}
+                onClose={() => setOpen(false)} // 내부 닫기와 연동
+              />
+            </div>
+          )}
         </>
       )}
     </nav>
   );
 };
+
 export default Nav;