diff --git a/improvement-suggestions.md b/improvement-suggestions.md
new file mode 100644
index 0000000..709f677
--- /dev/null
+++ b/improvement-suggestions.md
@@ -0,0 +1,132 @@
+# 코드 개선 제안사항
+
+## 성능 (Performance)
+
+### 최적화
+- #P101 컴포넌트 지연 로딩(lazy loading) 도입 검토 `MainContent.tsx`
+- #P102 이미지 및 컨텐츠 최적화 `MainContent.tsx`
+- #P201 React Query 캐시 전략 최적화 `GatheringDetailInformation.tsx`
+- #P202 불필요한 리렌더링 방지 `GatheringDetailInformation.tsx`
+- #P301 모달 컴포넌트 지연 로딩 적용 `CreateGatheringModalWrapper.tsx`
+- #P401 불필요한 리렌더링 최적화를 위한 메모이제이션 검토 `LoginForm.tsx`
+- #P402 상태 업데이트 로직 최적화 `LoginForm.tsx`
+- #P403 유효성 검사 로직 최적화 `LoginForm.tsx`
+- #P404 디바운스 시간 조정 및 성능 모니터링 `LoginForm.tsx`
+- #P501 Zustand 스토어 선택자 메모이제이션 `FavoriteList.tsx`
+- #P502 필터링 로직 최적화 `FavoriteList.tsx`
+- #P503 데이터 페칭 및 캐싱 전략 최적화 `FavoriteList.tsx`
+- #P504 클라이언트 사이드 필터링 최적화 `FavoriteList.tsx`
+- #P701 이미지 업로드 최적화 `ImageUploader.tsx`
+- #P801 네비게이션 상태 관리 최적화 `NavList.tsx`
+- #P802 리렌더링 최적화 `NavList.tsx`
+- #P803 경로 비교 로직 최적화 `NavList.tsx`
+- #P901 프로필 이미지 최적화 `MyProfile.tsx`
+- #P902 상태 관리 최적화 `MyProfile.tsx`
+- #P1001 이미지 업로드 최적화 `EditProfileModal.tsx`
+- #P1002 상태 업데이트 최적화 `EditProfileModal.tsx`
+
+## 접근성 (Accessibility)
+
+### ARIA 및 의미론적 마크업
+- #A101 랜드마크 역할(role="main") 추가 `MainContent.tsx`
+- #A201 의미론적 HTML 구조 개선 `GatheringDetailInformation.tsx`
+- #A202 섹션 제목 및 설명 추가 `GatheringDetailInformation.tsx`
+- #A203 진행률 표시에 대한 접근성 개선 `GatheringDetailInformation.tsx`
+- #A301 폼 유효성 검사 결과 스크린 리더 지원 `LoginForm.tsx`
+- #A302 폼 레이아웃 및 키보드 탐색 개선 `LoginForm.tsx`
+- #A401 리뷰 목록 탐색 및 필터링 접근성 개선 `ReviewListParent.tsx`
+- #A402 리뷰 목록 랜드마크 및 헤딩 구조 개선 `ReviewListParent.tsx`
+- #A501 필터링 및 정렬 컨트롤 접근성 개선 `FavoriteList.tsx`
+- #A502 리스트 구조 및 랜드마크 개선 `FavoriteList.tsx`
+- #A601 ARIA 역할 및 속성 강화 `AlertModal.tsx`
+- #A602 모달 포커스 관리 개선 `AlertModal.tsx`
+- #A701 파일 업로드 상태 알림 `ImageUploader.tsx`
+- #A801 네비게이션 구조 및 키보드 탐색 개선 `NavList.tsx`
+- #A802 모바일 버튼 접근성 개선 `NavList.tsx`
+- #A803 네비게이션 아이템 접근성 강화 `NavList.tsx`
+- #A804 전체 네비게이션 구조 개선 `NavList.tsx`
+- #A901 프로필 섹션 구조 개선 `MyProfile.tsx`
+- #A1001 모달 키보드 탐색 개선 `EditProfileModal.tsx`
+
+## 타입 안정성 (Type Safety)
+
+### 타입 정의 및 검증
+- #T201 API 응답 데이터 타입 정의 강화 `GatheringDetailInformation.tsx`
+- #T202 props 인터페이스 문서화 `GatheringDetailInformation.tsx`
+- #T301 Zustand 스토어 타입 안정성 강화 `CreateGatheringModalWrapper.tsx`
+- #T401 URL 파라미터 타입 안정성 강화 `ReviewListParent.tsx`
+- #T402 검색 파라미터 타입 검증 및 기본값 처리 `ReviewListParent.tsx`
+- #T403 쿼리 파라미터 타입 안정성 강화 `ReviewListParent.tsx`
+- #T501 로그인 폼 타입 정의 개선 및 문서화 `LoginForm.tsx`
+- #T502 react-hook-form 타입 안정성 강화 `LoginForm.tsx`
+- #T601 props 인터페이스 문서화 `AlertModal.tsx`
+- #T602 콜백 함수 타입 명시적 정의 `AlertModal.tsx`
+- #T701 props 인터페이스 문서화 `ImageUploader.tsx`
+- #T702 파일 객체 타입 제한 `ImageUploader.tsx`
+- #T801 Zustand 스토어 타입 안정성 강화 `NavList.tsx`
+- #T802 props 인터페이스 문서화 `NavList.tsx`
+- #T803 활성화 상태 타입 강화 `NavList.tsx`
+- #T804 props 인터페이스 문서화 `NavList.tsx`
+- #T901 사용자 데이터 타입 안정성 강화 `MyProfile.tsx`
+- #T1001 프로필 수정 폼 타입 안정성 강화 `EditProfileModal.tsx`
+- #T1002 props 인터페이스 문서화 `EditProfileModal.tsx`
+- #T1003 콜백 함수 타입 명시적 정의 `EditProfileModal.tsx`
+
+## 사용자 경험 (User Experience)
+
+### UI/UX 개선
+- #U101 스켈레톤 UI 적용으로 로딩 체감 개선 `MainContent.tsx`
+- #U201 실시간 참여자 수 업데이트 `GatheringDetailInformation.tsx`
+- #U202 참여 가능 여부 시각적 피드백 강화 `GatheringDetailInformation.tsx`
+- #U301 모달 애니메이션 개선 `CreateGatheringModalWrapper.tsx`
+- #U302 모달 외부 클릭 시 확인 프롬프트 추가 `CreateGatheringModalWrapper.tsx`
+- #U303 버튼 호버/포커스 상태 개선 `CreateGatheringModalWrapper.tsx`
+- #U304 모달 전환 애니메이션 추가 `CreateGatheringModalWrapper.tsx`
+- #U401 스크롤 위치 복원 기능 추가 `ReviewListParent.tsx`
+- #U402 스크롤 로딩 UX 개선 `ReviewListParent.tsx`
+- #U403 로딩 상태 스켈레톤 UI 적용 `ReviewListParent.tsx`
+- #U501 필터 변경 시 애니메이션 추가 `FavoriteList.tsx`
+- #U502 로딩 및 빈 상태 UX 개선 `FavoriteList.tsx`
+- #U601 로그인 상태 유지 옵션 추가 `LoginForm.tsx`
+- #U602 실시간 유효성 검사 피드백 제공 `LoginForm.tsx`
+- #U603 로딩 상태 UI/UX 개선 `LoginForm.tsx`
+- #U701 드래그 앤 드롭 지원 `ImageUploader.tsx`
+- #U702 업로드 진행률 표시 `ImageUploader.tsx`
+- #U801 반응형 전환 애니메이션 추가 `NavList.tsx`
+- #U802 활성화 상태 전환 효과 `NavList.tsx`
+- #U803 네비게이션 상태 피드백 `NavList.tsx`
+- #U901 사용자 경험: 프로필 수정 상호작용 개선 `MyProfile.tsx`
+- #U1001 이미지 업로드 피드백 개선 `EditProfileModal.tsx`
+
+## 에러 처리 (Error Handling)
+
+### 에러 관리 및 복구
+- #E301 데이터 로딩 실패 시 폴백 UI 추가 `GatheringDetailInformation.tsx`
+- #E401 로그인 상태 변경 시 에러 처리 `CreateGatheringModalWrapper.tsx`
+- #E501 데이터 페칭 실패 시 재시도 로직 추가 `ReviewListParent.tsx`
+- #E502 데이터 로딩 상태 처리 개선 `ReviewListParent.tsx`
+- #E601 데이터 로딩 실패 시 에러 처리 `FavoriteList.tsx`
+- #E602 데이터 로딩 상태 처리 개선 `FavoriteList.tsx`
+- #E603 필터 상태 초기화 오류 처리 `FavoriteList.tsx`
+- #E701 콜백 함수 실행 오류 처리 `AlertModal.tsx`
+- #E702 콜백 함수 실행 순서 보장 `AlertModal.tsx`
+- #E801 네트워크 오류 및 서버 응답 타임아웃 처리 `LoginForm.tsx`
+- #E802 의존성 배열 최적화 및 cleanup 함수 추가 `LoginForm.tsx`
+- #E803 서버 응답 에러 상태 처리 개선 `LoginForm.tsx`
+- #E901 로그아웃 실패 처리 `NavList.tsx`
+- #E902 잘못된 경로 처리 `NavList.tsx`
+- #E1001 사용자 데이터 누락 처리 `MyProfile.tsx`
+- #E1101 이미지 업로드 실패 처리 `EditProfileModal.tsx`
+- #E1102 파일 선택 취소 처리 `EditProfileModal.tsx`
+- #E1103 서버 응답 에러 처리 `EditProfileModal.tsx`
+
+## 보안 (Security)
+
+### 보안 강화
+- #S701 CSRF 토큰 검증 및 XSS 방지 처리 강화 `LoginForm.tsx`
+- #S702 비밀번호 입력 시 자동완성 정책 검토 `LoginForm.tsx`
+- #S703 폼 데이터 전송 전 sanitization 처리 `LoginForm.tsx`
+- #S801 파일 업로드 검증 강화 `ImageUploader.tsx`
+- #S802 파일 MIME 타입 검증 `ImageUploader.tsx`
+- #S1001 이미지 파일 검증 `EditProfileModal.tsx`
+- #S1002 폼 데이터 검증 `EditProfileModal.tsx`
diff --git a/src/app/(home)/_components/MainContent.tsx b/src/app/(home)/_components/MainContent.tsx
index 5eafbdd..eb22369 100644
--- a/src/app/(home)/_components/MainContent.tsx
+++ b/src/app/(home)/_components/MainContent.tsx
@@ -1,10 +1,16 @@
+/**
+ * #P101 성능: 컴포넌트 지연 로딩(lazy loading) 도입 검토
+ * #P102 성능: 이미지 및 컨텐츠 최적화
+ * #A101 접근성: 랜드마크 역할(role="main") 추가
+ * #U101 사용자 경험: 스켈레톤 UI 적용으로 로딩 체감 개선
+ */
 import MainCarouselContainer from "./MainCarouselContainer";
 import MainPromotionContainer from "./MainPromotionContainer";
 import MainReviewContent from "./MainReviewContent";
 
 const MainContent = () => {
   return (
-    <div className="base-wrap mb-20 flex flex-col gap-40">
+    <div className="base-wrap mb-20 flex flex-col gap-40" role="main">
       <MainCarouselContainer />
       <MainPromotionContainer />
       <MainReviewContent />
diff --git a/src/app/all-reviews/[tab]/_components/ReviewListParent.tsx b/src/app/all-reviews/[tab]/_components/ReviewListParent.tsx
index 6d62969..b4a1777 100644
--- a/src/app/all-reviews/[tab]/_components/ReviewListParent.tsx
+++ b/src/app/all-reviews/[tab]/_components/ReviewListParent.tsx
@@ -1,5 +1,10 @@
 "use client";
 
+/**
+ * #P401 성능: 무한 스크롤 최적화 및 가상화 도입 검토
+ * #T401 타입: URL 파라미터 타입 안정성 강화
+ * #E501 에러: 데이터 페칭 실패 시 재시도 로직 추가
+ */
 import { useParams, useSearchParams } from "next/navigation";
 
 import LoadingSpinner from "@/components/common/LoadingSpinner";
@@ -9,12 +14,18 @@ import { useSuspenseReviewList } from "@/hooks/review/useReviewList";
 import useIntersectionObserver from "@/hooks/useIntersectionObserver";
 import { TReviewQueryParams } from "@/types/review";
 
+/**
+ * #P402 성능: 검색 파라미터 변경 시 불필요한 리렌더링 방지
+ * #A401 접근성: 리뷰 목록 탐색 및 필터링 접근성 개선
+ * #U401 사용자 경험: 스크롤 위치 복원 기능 추가
+ */
 const ReviewListParent = () => {
   const { tab } = useParams();
   const searchParams = useSearchParams();
   const online = SERVICE_LIST.ONLINE;
   const isOnline = tab === online.value;
 
+  /** #T402 타입: 검색 파라미터 타입 검증 및 기본값 처리 */
   const type = isOnline ? online.type : searchParams.get("type");
   let location;
   if (searchParams.get("location") !== "전체") {
@@ -26,6 +37,7 @@ const ReviewListParent = () => {
   const sortBy = searchParams.get("sortBy");
   const sortOrder = searchParams.get("sortOrder");
 
+  /** #T403 타입: 쿼리 파라미터 타입 안정성 강화 */
   const reviewQueryParams: TReviewQueryParams = {
     ...(type && { type }),
     ...(sortBy && { sortBy }),
@@ -34,11 +46,19 @@ const ReviewListParent = () => {
     ...(date && { date }),
   };
 
+  /**
+   * #P403 성능: 데이터 캐싱 및 프리페칭 전략 수립
+   * #E502 에러: 데이터 로딩 상태 처리 개선
+   */
   const { data, hasNextPage, fetchNextPage, isFetchingNextPage } =
     useSuspenseReviewList(!isOnline, reviewQueryParams);
 
   const flatData = data?.pages.flatMap(page => page.data);
 
+  /**
+   * #P404 성능: Intersection Observer 콜백 최적화
+   * #U402 사용자 경험: 스크롤 로딩 UX 개선
+   */
   const onIntersect: IntersectionObserverCallback = ([{ isIntersecting }]) => {
     if (isIntersecting && hasNextPage) {
       fetchNextPage();
@@ -49,6 +69,10 @@ const ReviewListParent = () => {
 
   return (
     <>
+      {/**
+       * #A402 접근성: 리뷰 목록 랜드마크 및 헤딩 구조 개선
+       * #U403 사용자 경험: 로딩 상태 스켈레톤 UI 적용
+       */}
       {flatData.length > 0 ? (
         <>
           <ReviewCardList reviews={flatData} />
@@ -61,7 +85,11 @@ const ReviewListParent = () => {
           </div>
         </>
       ) : (
-        <div className="flex min-h-40 w-full items-center justify-center">
+        <div
+          className="flex min-h-40 w-full items-center justify-center"
+          role="status"
+          aria-label="리뷰 없음"
+        >
           <p className="text-sm font-medium text-gray-500">
             아직 리뷰가 없어요
           </p>
diff --git a/src/app/favorites/_components/FavoriteList.tsx b/src/app/favorites/_components/FavoriteList.tsx
index 7c5d3a1..7656a65 100644
--- a/src/app/favorites/_components/FavoriteList.tsx
+++ b/src/app/favorites/_components/FavoriteList.tsx
@@ -1,5 +1,10 @@
 "use client";
 
+/**
+ * #P501 성능: Zustand 스토어 선택자 메모이제이션
+ * #T501 타입: Zustand 스토어 타입 안정성 강화
+ * #E601 에러: 데이터 로딩 실패 시 에러 처리
+ */
 import { useEffect, useState } from "react";
 
 import MainCardItem from "@/components/layout/MainCardItem";
@@ -9,16 +14,30 @@ import useFavoriteStore from "@/stores/useFavoriteStore";
 import useTabStore from "@/stores/useTabStore";
 import { IGathering } from "@/types/gathering";
 
+/**
+ * #P502 성능: 필터링 로직 최적화
+ * #A501 접근성: 필터링 및 정렬 컨트롤 접근성 개선
+ * #U501 사용자 경험: 필터 변경 시 애니메이션 추가
+ */
 const FavoriteList = () => {
+  /** #T502 타입: 스토어 상태 타입 명시적 정의 */
   const tabIdxs = useTabStore(state => state.tabIdxs);
   const favoriteList = useFavoriteStore(state => state.favoriteList);
 
   const [filter, setFilter] = useState<string>("");
 
+  /**
+   * #P503 성능: 데이터 페칭 및 캐싱 전략 최적화
+   * #E602 에러: 데이터 로딩 상태 처리 개선
+   */
   const { data: favoriteData } = useSuspenseFavoriteList(filter, {
     id: favoriteList,
   });
 
+  /**
+   * #P504 성능: 클라이언트 사이드 필터링 최적화
+   * #E603 에러: 필터 상태 초기화 오류 처리
+   */
   useEffect(() => {
     if (typeof window !== "undefined") {
       setFilter(favoriteFilterKey[tabIdxs.join("-")]);
@@ -27,13 +46,27 @@ const FavoriteList = () => {
 
   return (
     <>
-      <div className="mb-8 flex flex-col items-center justify-center gap-6">
+      {/**
+       * #A502 접근성: 리스트 구조 및 랜드마크 개선
+       * #U502 사용자 경험: 로딩 및 빈 상태 UX 개선
+       */}
+      <div
+        className="mb-8 flex flex-col items-center justify-center gap-6"
+        role="region"
+        aria-label="찜한 모임 목록"
+      >
         {favoriteData &&
           favoriteData.map((card: IGathering) => (
             <MainCardItem key={card.id} gathering={card} />
           ))}
         {favoriteData?.length === 0 && (
-          <p className="mt-28 text-gray-500">{"아직 찜한 모임이 없어요."}</p>
+          <p
+            className="mt-28 text-gray-500"
+            role="status"
+            aria-label="찜한 모임 없음"
+          >
+            {"아직 찜한 모임이 없어요."}
+          </p>
         )}
       </div>
     </>
diff --git a/src/app/gathering/[tab]/_components/CreateGatheringModalWrapper.tsx b/src/app/gathering/[tab]/_components/CreateGatheringModalWrapper.tsx
index 9f0bc6b..92e63c5 100644
--- a/src/app/gathering/[tab]/_components/CreateGatheringModalWrapper.tsx
+++ b/src/app/gathering/[tab]/_components/CreateGatheringModalWrapper.tsx
@@ -1,5 +1,10 @@
 "use client";
 
+/**
+ * #P301 성능: 모달 컴포넌트 지연 로딩 적용
+ * #T301 타입: Zustand 스토어 타입 안정성 강화
+ * #U301 사용자 경험: 모달 애니메이션 개선
+ */
 import { useRouter } from "next/navigation";
 import { FaPlus } from "react-icons/fa";
 
@@ -9,6 +14,11 @@ import { Button } from "@/components/ui/Button";
 import { useModal } from "@/hooks/useModal";
 import useUserStore from "@/stores/useUserStore";
 
+/**
+ * #A301 접근성: 모달 키보드 탐색 및 포커스 관리 개선
+ * #U302 사용자 경험: 모달 외부 클릭 시 확인 프롬프트 추가
+ * #E401 에러: 로그인 상태 변경 시 에러 처리
+ */
 const CreateGatheringModalWrapper = () => {
   const router = useRouter();
   const { isOpen, onClose, onOpen } = useModal();
@@ -16,15 +26,23 @@ const CreateGatheringModalWrapper = () => {
 
   return (
     <>
+      {/**
+       * #A302 접근성: 반응형 레이아웃에서 버튼 레이블 관리
+       * #U303 사용자 경험: 버튼 호버/포커스 상태 개선
+       */}
       <Button
         variant="purple"
         className="h-10 w-10 rounded-full md:h-11 md:w-28 md:rounded-xl"
         onClick={onOpen}
         aria-label="모임 만들기"
       >
-        <FaPlus className="md:hidden" />
+        <FaPlus className="md:hidden" aria-hidden="true" />
         <span className="hidden md:block">모임 만들기</span>
       </Button>
+      {/**
+       * #U304 사용자 경험: 모달 전환 애니메이션 추가
+       * #A303 접근성: 모달 ARIA 속성 및 역할 개선
+       */}
       {user ? (
         <CreateGatheringModal isOpen={isOpen} onClose={onClose} />
       ) : (
diff --git a/src/app/gathering/detail/[id]/_components/GatheringDetailInformation.tsx b/src/app/gathering/detail/[id]/_components/GatheringDetailInformation.tsx
index 8a23bc5..d00c393 100644
--- a/src/app/gathering/detail/[id]/_components/GatheringDetailInformation.tsx
+++ b/src/app/gathering/detail/[id]/_components/GatheringDetailInformation.tsx
@@ -1,5 +1,10 @@
 "use client";
 
+/**
+ * #P201 성능: React Query 캐시 전략 최적화
+ * #E301 에러: 데이터 로딩 실패 시 폴백 UI 추가
+ * #T201 타입: API 응답 데이터 타입 정의 강화
+ */
 import { useSuspenseQuery } from "@tanstack/react-query";
 import dayjs from "dayjs";
 import { FaCircleCheck } from "react-icons/fa6";
@@ -12,10 +17,16 @@ import { gatheringDetailQueryOption } from "@/hooks/gathering/useGatheringDetail
 
 import ParticipantAvatarStack from "./ParticipantAvatarStack";
 
+/** #T202 타입: props 인터페이스 문서화 */
 interface IGatheringDetailInformationProps {
   id: string;
 }
 
+/**
+ * #A201 접근성: 의미론적 HTML 구조 개선
+ * #U201 사용자 경험: 실시간 참여자 수 업데이트
+ * #P202 성능: 불필요한 리렌더링 방지
+ */
 const GatheringDetailInformation = ({
   id,
 }: IGatheringDetailInformationProps) => {
@@ -28,7 +39,11 @@ const GatheringDetailInformation = ({
 
   return (
     <article className="flex h-[270px] flex-1 flex-col gap-6 rounded-3xl border-2 border-gray-200 bg-white px-1 py-6">
-      <section className="flex min-h-[110px] justify-between gap-2 px-6">
+      {/** #A202 접근성: 섹션 제목 및 설명 추가 */}
+      <section
+        className="flex min-h-[110px] justify-between gap-2 px-6"
+        aria-label="모임 기본 정보"
+      >
         <div className="flex flex-col gap-3">
           <div className="flex flex-col gap-1">
             <p className="line-clamp-2 pr-3 text-lg font-semibold">{name}</p>
@@ -41,7 +56,11 @@ const GatheringDetailInformation = ({
         </div>
       </section>
       <hr className="border-b-2 border-dashed border-gray-200" />
-      <section className="flex flex-col gap-2 px-6">
+      {/**
+       * #A203 접근성: 진행률 표시에 대한 접근성 개선
+       * #U202 사용자 경험: 참여 가능 여부 시각적 피드백 강화
+       */}
+      <section className="flex flex-col gap-2 px-6" aria-label="모임 참여 현황">
         <div className="flex justify-between">
           <div className="flex items-center gap-3 text-sm font-semibold text-gray-900">
             <p>{`모집 정원 ${capacity}명`}</p>
diff --git a/src/app/login/_components/LoginForm.tsx b/src/app/login/_components/LoginForm.tsx
index 0fb659d..fa34781 100644
--- a/src/app/login/_components/LoginForm.tsx
+++ b/src/app/login/_components/LoginForm.tsx
@@ -1,5 +1,9 @@
 "use client";
 
+/**
+ * #S701 보안: CSRF 토큰 검증 및 XSS 방지 처리 강화
+ * #P401 성능: 불필요한 리렌더링 최적화를 위한 메모이제이션 검토
+ */
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
@@ -24,9 +28,17 @@ import {
   TErrorMsg,
 } from "../../join/_components/JoinForm";
 
+/** #T501 타입: 로그인 폼 타입 정의 개선 및 문서화 */
 export type TLoginForm = z.infer<typeof LoginFormSchema>;
 
+/**
+ * #A301 접근성: 폼 유효성 검사 결과 스크린 리더 지원
+ * #E801 에러: 네트워크 오류 및 서버 응답 타임아웃 처리
+ * #U601 사용자 경험: 로그인 상태 유지 옵션 추가
+ * #S702 보안: 비밀번호 입력 시 자동완성 정책 검토
+ */
 const LoginForm = () => {
+  /** #T502 타입: react-hook-form 타입 안정성 강화 */
   const {
     register,
     handleSubmit,
@@ -49,6 +61,10 @@ const LoginForm = () => {
 
   const { setFavoriteInitValue } = useFavorite();
 
+  /**
+   * #E802 에러: 의존성 배열 최적화 및 cleanup 함수 추가
+   * #P402 성능: 상태 업데이트 로직 최적화
+   */
   useEffect(() => {
     if (state && !state.status && !state.user) {
       const error: TErrorMsg = JSON.parse(state.error);
@@ -79,6 +95,10 @@ const LoginForm = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [state, setError, router, setUserState, onOpen]);
 
+  /**
+   * #S703 보안: 폼 데이터 전송 전 sanitization 처리
+   * #E803 에러: 서버 응답 에러 상태 처리 개선
+   */
   const onSubmit = handleSubmit(data => {
     setIsSubmitting(true);
     const formData = new FormData();
@@ -90,6 +110,10 @@ const LoginForm = () => {
     formAction(formData);
   });
 
+  /**
+   * #P403 성능: 유효성 검사 로직 최적화
+   * #U602 사용자 경험: 실시간 유효성 검사 피드백 제공
+   */
   const registerWithValidation = (
     name: keyof TLoginForm,
   ): IRegisterWithValidation => {
@@ -108,12 +132,17 @@ const LoginForm = () => {
     };
   };
 
+  /** #P404 성능: 디바운스 시간 조정 및 성능 모니터링 */
   const debouncedValidation = useDebounce(fieldName => {
     trigger(fieldName);
   }, 500);
 
   return (
     <>
+      {/**
+       * #A302 접근성: 폼 레이아웃 및 키보드 탐색 개선
+       * #U603 사용자 경험: 로딩 상태 UI/UX 개선
+       */}
       <form onSubmit={onSubmit} className="flex flex-col gap-6">
         {LOGIN_INPUTS.map(input => (
           <Input
diff --git a/src/app/mypage/_components/MyProfile.tsx b/src/app/mypage/_components/MyProfile.tsx
index 89e83c6..f7585c4 100644
--- a/src/app/mypage/_components/MyProfile.tsx
+++ b/src/app/mypage/_components/MyProfile.tsx
@@ -1,3 +1,8 @@
+/**
+ * #P901 성능: 프로필 이미지 최적화
+ * #T901 타입: 사용자 데이터 타입 안정성 강화
+ * #A901 접근성: 프로필 섹션 구조 개선
+ */
 "use client";
 
 import Image from "next/image";
@@ -8,6 +13,11 @@ import EditProfileModal from "@/components/modals/edit-profile-modal/EditProfile
 import MyProfileSkeleton from "@/components/skeletons/MyProfileSkeleton";
 import useUserStore from "@/stores/useUserStore";
 
+/**
+ * #P902 성능: 상태 관리 최적화
+ * #U901 사용자 경험: 프로필 수정 상호작용 개선
+ * #E1001 에러: 사용자 데이터 누락 처리
+ */
 const MyProfile = () => {
   const user = useUserStore(state => state.user);
   const [isOpen, setIsOpen] = useState(false);
@@ -18,7 +28,10 @@ const MyProfile = () => {
   ];
 
   return (
-    <section className="overflow-hidden rounded-3xl border-2 border-gray-200">
+    <section
+      className="overflow-hidden rounded-3xl border-2 border-gray-200"
+      aria-label="내 프로필 정보"
+    >
       <div className="relative">
         <div className="relative flex h-[65px] items-center justify-between bg-purple-300 px-6">
           <h2 className="z-10 mt-[-6px] text-lg font-semibold">내 프로필</h2>
@@ -29,11 +42,13 @@ const MyProfile = () => {
             width={158}
             height={47}
             style={{ width: "158px", height: "47px" }}
+            priority
           />
           <button
             className="z-10"
             onClick={() => setIsOpen(true)}
             disabled={!user}
+            aria-label="프로필 수정"
           >
             <Image
               src="/images/edit-button.png"
@@ -47,7 +62,11 @@ const MyProfile = () => {
       </div>
 
       {user ? (
-        <div className="flex h-[109px] gap-3 bg-white px-6">
+        <div
+          className="flex h-[109px] gap-3 bg-white px-6"
+          role="region"
+          aria-label="프로필 상세 정보"
+        >
           <div className="mt-[-16px]">
             <Avatar
               size={"large"}
@@ -65,7 +84,7 @@ const MyProfile = () => {
                     {info.label}
                   </dt>
                   <dd className="w-[calc(100%-72px)] truncate text-sm text-gray-700">
-                    {info.value}
+                    {info.value || "정보 없음"}
                   </dd>
                 </div>
               ))}
diff --git a/src/components/modals/confirm-alert-modal/AlertModal.tsx b/src/components/modals/confirm-alert-modal/AlertModal.tsx
index 0c2a467..538100d 100644
--- a/src/components/modals/confirm-alert-modal/AlertModal.tsx
+++ b/src/components/modals/confirm-alert-modal/AlertModal.tsx
@@ -1,6 +1,15 @@
+/**
+ * #P601 성능: 모달 컴포넌트 지연 로딩 적용
+ * #A601 접근성: ARIA 역할 및 속성 강화
+ * #U601 사용자 경험: 키보드 인터랙션 개선
+ */
 import ConfirmAlertModalWrapper from "@/components/modals/confirm-alert-modal/ConfirmAlertModalWrapper";
 import { Button } from "@/components/ui/Button";
 
+/**
+ * #T601 타입: props 인터페이스 문서화
+ * #T602 타입: 콜백 함수 타입 명시적 정의
+ */
 interface IAlertModalProps {
   title: string;
   isOpen: boolean;
@@ -8,12 +17,18 @@ interface IAlertModalProps {
   onConfirm?: () => void;
 }
 
+/**
+ * #A602 접근성: 모달 포커스 관리 개선
+ * #U602 사용자 경험: 모달 애니메이션 추가
+ * #E701 에러: 콜백 함수 실행 오류 처리
+ */
 const AlertModal = ({
   isOpen,
   onClose,
   title,
   onConfirm,
 }: IAlertModalProps) => {
+  /** #E702 에러: 콜백 함수 실행 순서 보장 */
   const handleConfirm = () => {
     onConfirm?.();
     onClose();
@@ -26,7 +41,12 @@ const AlertModal = ({
       onClose={onClose}
       title={title}
     >
-      <Button variant="purple" className="w-[120px]" onClick={handleConfirm}>
+      <Button
+        variant="purple"
+        className="w-[120px]"
+        onClick={handleConfirm}
+        aria-label="알림 확인"
+      >
         확인
       </Button>
     </ConfirmAlertModalWrapper>
diff --git a/src/components/modals/edit-profile-modal/EditProfileModal.tsx b/src/components/modals/edit-profile-modal/EditProfileModal.tsx
index 1e03d6c..5e1cdee 100644
--- a/src/components/modals/edit-profile-modal/EditProfileModal.tsx
+++ b/src/components/modals/edit-profile-modal/EditProfileModal.tsx
@@ -1,3 +1,8 @@
+/**
+ * #P1001 성능: 이미지 업로드 최적화
+ * #T1001 타입: 프로필 수정 폼 타입 안정성 강화
+ * #A1001 접근성: 모달 키보드 탐색 개선
+ */
 "use client";
 
 import React, { useEffect, useState } from "react";
@@ -10,12 +15,21 @@ import { Input } from "@/components/ui/Input";
 import { useUpdateUser } from "@/hooks/auth/useUpdateUser";
 import { IUser } from "@/types/user";
 
+/**
+ * #T1002 타입: props 인터페이스 문서화
+ * #T1003 타입: 콜백 함수 타입 명시적 정의
+ */
 interface EditProfileModalProps {
   isOpen: boolean;
   onClose: () => void;
   user: IUser;
 }
 
+/**
+ * #P1002 성능: 상태 업데이트 최적화
+ * #U1001 사용자 경험: 이미지 업로드 피드백 개선
+ * #E1101 에러: 이미지 업로드 실패 처리
+ */
 const EditProfileModal = ({ isOpen, onClose, user }: EditProfileModalProps) => {
   const [companyName, setCompanyName] = useState(user.companyName);
   const [avatarImage, setAvatarImage] = useState(user.image); // UI 미리보기 용 이미지 URL
@@ -33,6 +47,10 @@ const EditProfileModal = ({ isOpen, onClose, user }: EditProfileModalProps) => {
 
   if (!isOpen) return null;
 
+  /**
+   * #S1001 보안: 이미지 파일 검증
+   * #E1102 에러: 파일 선택 취소 처리
+   */
   const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (e.target.files && e.target.files[0]) {
       const file = e.target.files[0];
@@ -41,6 +59,10 @@ const EditProfileModal = ({ isOpen, onClose, user }: EditProfileModalProps) => {
     }
   };
 
+  /**
+   * #S1002 보안: 폼 데이터 검증
+   * #E1103 에러: 서버 응답 에러 처리
+   */
   const handleSubmit = () => {
     const formData = new FormData();
     formData.append("companyName", companyName);
@@ -57,7 +79,12 @@ const EditProfileModal = ({ isOpen, onClose, user }: EditProfileModalProps) => {
       <Modal isOpen={isOpen} onClose={onClose} title="프로필 수정하기">
         <div className="mt-1 flex flex-col gap-6">
           <div className="w-[56px]">
-            <label htmlFor="image-upload" className="relative cursor-pointer">
+            <label
+              htmlFor="image-upload"
+              className="relative cursor-pointer"
+              role="button"
+              aria-label="프로필 이미지 업로드"
+            >
               <Avatar size="large" type="editable" imgPath={avatarImage} />
               <input
                 type="file"
@@ -65,6 +92,7 @@ const EditProfileModal = ({ isOpen, onClose, user }: EditProfileModalProps) => {
                 accept="image/jpeg, image/png, image/gif, image/webp"
                 className="hidden"
                 onChange={handleImageChange}
+                aria-label="프로필 이미지 선택"
               />
             </label>
           </div>
@@ -77,6 +105,7 @@ const EditProfileModal = ({ isOpen, onClose, user }: EditProfileModalProps) => {
             placeholder="회사를 입력해주세요"
             value={companyName}
             onChange={e => setCompanyName(e.target.value)}
+            aria-required="true"
           />
 
           <Input
@@ -86,6 +115,7 @@ const EditProfileModal = ({ isOpen, onClose, user }: EditProfileModalProps) => {
             id="email"
             value={user.email}
             disabled
+            aria-label="이메일 (수정 불가)"
           />
 
           <div className="flex gap-4">
@@ -93,6 +123,7 @@ const EditProfileModal = ({ isOpen, onClose, user }: EditProfileModalProps) => {
               variant="purple-outline"
               className="h-[44px] w-full"
               onClick={onClose}
+              aria-label="프로필 수정 취소"
             >
               취소
             </Button>
@@ -101,6 +132,7 @@ const EditProfileModal = ({ isOpen, onClose, user }: EditProfileModalProps) => {
               className="h-[44px] w-full"
               onClick={handleSubmit}
               disabled={!companyName}
+              aria-label="프로필 수정 완료"
             >
               수정하기
             </Button>
diff --git a/src/components/navigations/NavList.tsx b/src/components/navigations/NavList.tsx
index e98b5f7..5d42299 100644
--- a/src/components/navigations/NavList.tsx
+++ b/src/components/navigations/NavList.tsx
@@ -1,3 +1,8 @@
+/**
+ * #P801 성능: 네비게이션 상태 관리 최적화
+ * #T801 타입: Zustand 스토어 타입 안정성 강화
+ * #A801 접근성: 네비게이션 구조 및 키보드 탐색 개선
+ */
 import clsx from "clsx";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
@@ -12,6 +17,11 @@ import useUserStore from "@/stores/useUserStore";
 
 import { Button } from "../ui/Button";
 
+/**
+ * #A802 접근성: 모바일 버튼 접근성 개선
+ * #U801 사용자 경험: 반응형 전환 애니메이션 추가
+ * #E901 에러: 로그아웃 실패 처리
+ */
 const NavButtonForMobile = () => {
   const { onToggleSideBar } = useSideBarStore();
   const { isLoggedIn } = useUserStore(
@@ -20,7 +30,11 @@ const NavButtonForMobile = () => {
   const { logout } = useLogout();
 
   return (
-    <div className="mb-11 mt-4 flex items-center justify-between md:hidden">
+    <div
+      className="mb-11 mt-4 flex items-center justify-between md:hidden"
+      role="navigation"
+      aria-label="모바일 메뉴"
+    >
       {NAV_BUTTONS.filter(button => isLoggedIn === button.loggedInShow).map(
         button => (
           <Button
@@ -45,10 +59,19 @@ const NavButtonForMobile = () => {
   );
 };
 
+/**
+ * #T802 타입: props 인터페이스 문서화
+ * #T803 타입: 활성화 상태 타입 강화
+ */
 interface INavItemProps {
   isActive: (href: string) => boolean;
 }
 
+/**
+ * #P802 성능: 리렌더링 최적화
+ * #A803 접근성: 네비게이션 아이템 접근성 강화
+ * #U802 사용자 경험: 활성화 상태 전환 효과
+ */
 const NavItem = ({ isActive }: INavItemProps) => {
   const { onToggleSideBar } = useSideBarStore();
   const { favoriteByUserLength } = useFavoriteLocalStorage();
@@ -56,9 +79,12 @@ const NavItem = ({ isActive }: INavItemProps) => {
   const favoriteLength = favoriteByUserLength(); // 찜한 모임 카운트 state
 
   return (
-    <ul className="flex flex-col gap-6 font-semibold md:flex-row md:gap-10">
+    <ul
+      className="flex flex-col gap-6 font-semibold md:flex-row md:gap-10"
+      role="menubar"
+    >
       {NAV_ITEMS.map(item => (
-        <li key={item.href} className="relative">
+        <li key={item.href} className="relative" role="none">
           <Link
             onClick={() => onToggleSideBar(false)}
             href={item.href}
@@ -68,12 +94,17 @@ const NavItem = ({ isActive }: INavItemProps) => {
                 ? "font-bold text-purple-600"
                 : "text-gray-700",
             )}
+            role="menuitem"
             aria-current={isActive(item.href) ? "page" : "false"}
           >
             {item.name}
           </Link>
           {item.href === "/favorites" && favoriteLength > 0 && (
-            <span className="absolute ml-[1.5px] rounded-3xl bg-purple-300 px-[6px] py-0 text-xs font-bold text-white">
+            <span
+              className="absolute ml-[1.5px] rounded-3xl bg-purple-300 px-[6px] py-0 text-xs font-bold text-white"
+              role="status"
+              aria-label={`찜한 모임 ${favoriteLength}개`}
+            >
               {favoriteLength}
             </span>
           )}
@@ -83,10 +114,19 @@ const NavItem = ({ isActive }: INavItemProps) => {
   );
 };
 
+/**
+ * #T804 타입: props 인터페이스 문서화
+ * #E902 에러: 잘못된 경로 처리
+ */
 interface INavListProps {
   activePath?: string; // 스토리북 환경에서 테스트하기 위한 path prop
 }
 
+/**
+ * #P803 성능: 경로 비교 로직 최적화
+ * #A804 접근성: 전체 네비게이션 구조 개선
+ * #U803 사용자 경험: 네비게이션 상태 피드백
+ */
 const NavList = ({ activePath }: INavListProps) => {
   const pathname = usePathname();
   const currentPath = activePath || pathname;
@@ -96,7 +136,7 @@ const NavList = ({ activePath }: INavListProps) => {
   };
 
   return (
-    <nav>
+    <nav aria-label="메인 메뉴">
       <NavButtonForMobile />
       <NavItem isActive={isActive} />
     </nav>
diff --git a/src/components/ui/ImageUploader.tsx b/src/components/ui/ImageUploader.tsx
index baaf3aa..3bc4847 100644
--- a/src/components/ui/ImageUploader.tsx
+++ b/src/components/ui/ImageUploader.tsx
@@ -1,14 +1,32 @@
+/**
+ * #P701 성능: 이미지 업로드 최적화
+ * #S701 보안: 파일 업로드 검증 강화
+ * #E801 에러: 파일 크기 및 형식 검증
+ */
 import { useState } from "react";
 
 import { Button } from "@/components/ui/Button";
 
+/**
+ * #T701 타입: props 인터페이스 문서화
+ * #T702 타입: 파일 객체 타입 제한
+ */
 interface ImageUploaderProps {
   setValue: (value: File) => void;
 }
 
+/**
+ * #A701 접근성: 파일 업로드 상태 알림
+ * #U701 사용자 경험: 드래그 앤 드롭 지원
+ * #S702 보안: 파일 MIME 타입 검증
+ */
 const ImageUploader = ({ setValue }: ImageUploaderProps) => {
   const [fileName, setFileName] = useState<string>("");
 
+  /**
+   * #E802 에러: 파일 업로드 실패 처리
+   * #U702 사용자 경험: 업로드 진행률 표시
+   */
   const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
     if (!file) return;
@@ -20,8 +38,15 @@ const ImageUploader = ({ setValue }: ImageUploaderProps) => {
   const imageDescription = fileName ? fileName : "이미지를 첨부해주세요.";
 
   return (
-    <div className="flex items-center gap-3">
-      <div className="flex w-full items-center overflow-auto rounded-2xl bg-gray-50 px-4 py-[10px]">
+    <div
+      className="flex items-center gap-3"
+      role="region"
+      aria-label="이미지 업로드"
+    >
+      <div
+        className="flex w-full items-center overflow-auto rounded-2xl bg-gray-50 px-4 py-[10px]"
+        aria-live="polite"
+      >
         <p className="line-clamp-1 font-medium text-gray-400">
           {imageDescription}
         </p>
@@ -38,6 +63,7 @@ const ImageUploader = ({ setValue }: ImageUploaderProps) => {
         type="button"
         variant="purple-outline"
         onClick={() => document.getElementById("image-file")?.click()}
+        aria-controls="image-file"
       >
         파일 찾기
       </Button>