From cc8956a22b99cb9fe9762caaf63887670eea5a9c Mon Sep 17 00:00:00 2001
From: Dongseok Lee <ehdtjr510@naver.com>
Date: Mon, 17 Mar 2025 03:28:18 +0900
Subject: [PATCH 1/2] =?UTF-8?q?refactor(DEVING-71):=20=ED=94=BC=EB=93=9C?=
 =?UTF-8?q?=EB=B0=B1=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/(user-page)/mypage/MyPageClient.tsx   |  1 -
 .../mypage/_features/BasicEdit.tsx            |  4 +--
 .../mypage/_features/BasicInfo.tsx            | 16 +++++------
 .../mypage/_features/ContactEdit.tsx          |  4 +--
 .../mypage/_features/ContactInfo.tsx          |  4 +--
 .../mypage/_features/PasswordEdit.tsx         | 28 +++++++++++--------
 .../mypage/_features/PasswordInfo.tsx         |  4 +--
 .../mypage/_features/TechStackEdit.tsx        |  4 +--
 .../mypage/_features/TechStackInfo.tsx        |  2 +-
 src/hooks/mutations/useMyPageMutation.tsx     | 22 +++++++++++----
 src/types/mypageTypes.ts                      | 11 ++++++++
 11 files changed, 63 insertions(+), 37 deletions(-)

diff --git a/src/app/(user-page)/mypage/MyPageClient.tsx b/src/app/(user-page)/mypage/MyPageClient.tsx
index 78f2b99c..de9136c7 100644
--- a/src/app/(user-page)/mypage/MyPageClient.tsx
+++ b/src/app/(user-page)/mypage/MyPageClient.tsx
@@ -7,7 +7,6 @@ import {
 import { useQueryClient } from '@tanstack/react-query';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { getProfile } from 'service/api/mypageProfile';
 
 import { TAB_TYPES } from '../../../constants/mypage/mypageConstant';
 // 컴포넌트 임포트
diff --git a/src/app/(user-page)/mypage/_features/BasicEdit.tsx b/src/app/(user-page)/mypage/_features/BasicEdit.tsx
index 4bd9ae50..8981dee3 100644
--- a/src/app/(user-page)/mypage/_features/BasicEdit.tsx
+++ b/src/app/(user-page)/mypage/_features/BasicEdit.tsx
@@ -335,14 +335,14 @@ const BasicEdit = ({ onEditComplete }: BasicEditProps) => {
           <Button
             type="button"
             variant="outline"
-            className="h-[40px] w-[140px] md:h-[46px]"
+            className="h-[40px] w-[80px] md:h-[46px] md:w-[180px]"
             onClick={handleCancel}
           >
             취소
           </Button>
           <Button
             type="submit"
-            className="h-[40px] w-[140px] select-none md:h-[46px]"
+            className="h-[40px] w-[130px] select-none md:h-[46px] md:w-[200px]"
             disabled={
               isSubmitting || isUpdating || introLength > MAX_INTRO_LENGTH
             }
diff --git a/src/app/(user-page)/mypage/_features/BasicInfo.tsx b/src/app/(user-page)/mypage/_features/BasicInfo.tsx
index f0fff018..9aa90dd2 100644
--- a/src/app/(user-page)/mypage/_features/BasicInfo.tsx
+++ b/src/app/(user-page)/mypage/_features/BasicInfo.tsx
@@ -36,8 +36,8 @@ const BasicInfo = ({ onEnableEdit }: BasicInfoProps) => {
   }
 
   return (
-    <div className="w-full rounded-[16px] border border-Cgray300 p-[16px] md:p-[32px]">
-      <div className="flex flex-col gap-[32px]">
+    <div className="w-full rounded-[16px] border border-Cgray300 p-[24px] md:p-[32px]">
+      <div className="flex flex-col gap-[24px] md:gap-[32px]">
         <div className="flex flex-col gap-[8px]">
           <label htmlFor="name-input" className="typo-head3 text-Cgray700">
             이름
@@ -47,7 +47,7 @@ const BasicInfo = ({ onEnableEdit }: BasicInfoProps) => {
             type="text"
             value={userData.name}
             readOnly
-            className="typo-button1 h-[50px] rounded-[8px] border-b border-Cgray300 bg-transparent py-2 pl-[16px] text-Cgray700 focus:outline-none"
+            className="typo-button1 h-[50px] cursor-default rounded-[8px] border-b border-Cgray300 bg-transparent py-2 pl-[16px] text-Cgray700 focus:outline-none"
           />
         </div>
         <div className="flex flex-col gap-[8px]">
@@ -59,7 +59,7 @@ const BasicInfo = ({ onEnableEdit }: BasicInfoProps) => {
             rows={3}
             value={userData.intro}
             readOnly
-            className="h-[140px] resize-none rounded-[8px] border-b border-Cgray300 bg-transparent py-2 pl-[16px] text-Cgray700 focus:outline-none"
+            className="h-[140px] cursor-default resize-none rounded-[8px] border-b border-Cgray300 bg-transparent py-2 pl-[16px] text-Cgray700 focus:outline-none"
           />
         </div>
         <div className="flex flex-col gap-[8px]">
@@ -71,7 +71,7 @@ const BasicInfo = ({ onEnableEdit }: BasicInfoProps) => {
             type="text"
             value={userData.position}
             readOnly
-            className="typo-button1 h-[50px] rounded-[8px] border-b border-Cgray300 bg-transparent py-2 pl-[16px] text-Cgray700 focus:outline-none"
+            className="typo-button1 h-[50px] cursor-default rounded-[8px] border-b border-Cgray300 bg-transparent py-2 pl-[16px] text-Cgray700 focus:outline-none"
           />
         </div>
         <div className="flex flex-col gap-[8px]">
@@ -83,7 +83,7 @@ const BasicInfo = ({ onEnableEdit }: BasicInfoProps) => {
             type="text"
             value={userData.gender}
             readOnly
-            className="typo-button1 h-[50px] rounded-[8px] border-b border-Cgray300 bg-transparent py-2 pl-[16px] text-Cgray700 focus:outline-none"
+            className="typo-button1 h-[50px] cursor-default rounded-[8px] border-b border-Cgray300 bg-transparent py-2 pl-[16px] text-Cgray700 focus:outline-none"
           />
         </div>
         <div className="flex flex-col gap-[8px]">
@@ -95,7 +95,7 @@ const BasicInfo = ({ onEnableEdit }: BasicInfoProps) => {
             type="text"
             value={userData.age}
             readOnly
-            className="typo-button1 h-[50px] rounded-[8px] border-b border-Cgray300 bg-transparent py-2 pl-[16px] text-Cgray700 focus:outline-none"
+            className="typo-button1 h-[50px] cursor-default rounded-[8px] border-b border-Cgray300 bg-transparent py-2 pl-[16px] text-Cgray700 focus:outline-none"
           />
         </div>
         <div className="flex flex-col gap-[8px]">
@@ -107,7 +107,7 @@ const BasicInfo = ({ onEnableEdit }: BasicInfoProps) => {
             type="text"
             value={userData.location}
             readOnly
-            className="typo-button1 h-[50px] rounded-[8px] border-b border-Cgray300 bg-transparent py-2 pl-[16px] text-Cgray700 focus:outline-none"
+            className="typo-button1 h-[50px] cursor-default rounded-[8px] border-b border-Cgray300 bg-transparent py-2 pl-[16px] text-Cgray700 focus:outline-none"
           />
         </div>
         <div className="flex justify-center md:justify-start">
diff --git a/src/app/(user-page)/mypage/_features/ContactEdit.tsx b/src/app/(user-page)/mypage/_features/ContactEdit.tsx
index 1a2a63d0..11020313 100644
--- a/src/app/(user-page)/mypage/_features/ContactEdit.tsx
+++ b/src/app/(user-page)/mypage/_features/ContactEdit.tsx
@@ -205,14 +205,14 @@ const ContactEdit = ({ onEditComplete }: ContactEditProps) => {
           <Button
             type="button"
             variant="outline"
-            className="h-[40px] w-[140px] md:h-[46px]"
+            className="h-[40px] w-[80px] md:h-[46px] md:w-[180px]"
             onClick={handleCancel}
           >
             취소
           </Button>
           <Button
             type="submit"
-            className="h-[40px] w-[140px] select-none md:h-[46px]"
+            className="h-[40px] w-[130px] select-none md:h-[46px] md:w-[200px]"
             disabled={isSubmitting || isUpdating}
           >
             {isUpdating ? '저장 중...' : '변경사항 저장'}
diff --git a/src/app/(user-page)/mypage/_features/ContactInfo.tsx b/src/app/(user-page)/mypage/_features/ContactInfo.tsx
index 314e0329..c3ac35dd 100644
--- a/src/app/(user-page)/mypage/_features/ContactInfo.tsx
+++ b/src/app/(user-page)/mypage/_features/ContactInfo.tsx
@@ -45,8 +45,8 @@ const ContactInfo = ({ onEnableEdit }: ContactInfoProps) => {
   };
 
   return (
-    <div className="w-full rounded-[16px] border border-Cgray300 p-[32px]">
-      <div className="flex flex-col gap-[32px]">
+    <div className="w-full rounded-[16px] border border-Cgray300 p-[24px] md:p-[32px]">
+      <div className="flex flex-col gap-[24px] md:gap-[32px]">
         <div className="flex flex-col gap-[8px]">
           <label htmlFor="phone-input" className="typo-head3 text-Cgray700">
             전화번호
diff --git a/src/app/(user-page)/mypage/_features/PasswordEdit.tsx b/src/app/(user-page)/mypage/_features/PasswordEdit.tsx
index 428eb505..9676dbc6 100644
--- a/src/app/(user-page)/mypage/_features/PasswordEdit.tsx
+++ b/src/app/(user-page)/mypage/_features/PasswordEdit.tsx
@@ -5,11 +5,7 @@ import { Input } from '@/components/ui/Input';
 import { useUpdatePasswordMutation } from '@/hooks/mutations/useMyPageMutation';
 import { useForm } from 'react-hook-form';
 
-interface PasswordFormData {
-  currentPassword: string;
-  newPassword: string;
-  passwordCheck: string;
-}
+import { IPasswordUpdateRequest } from '../../../../types/mypageTypes';
 
 interface PasswordEditProps {
   onEditComplete: () => void;
@@ -23,7 +19,7 @@ const PasswordEdit = ({ onEditComplete }: PasswordEditProps) => {
     watch,
     setError,
     formState: { errors, isSubmitting },
-  } = useForm<PasswordFormData>({
+  } = useForm<IPasswordUpdateRequest>({
     defaultValues: {
       currentPassword: '',
       newPassword: '',
@@ -39,7 +35,7 @@ const PasswordEdit = ({ onEditComplete }: PasswordEditProps) => {
     useUpdatePasswordMutation();
 
   // 폼 제출 처리
-  const onSubmit = (data: PasswordFormData) => {
+  const onSubmit = (data: IPasswordUpdateRequest) => {
     // 비밀번호 일치 여부 확인
     if (data.newPassword !== data.passwordCheck) {
       setError('passwordCheck', {
@@ -109,7 +105,17 @@ const PasswordEdit = ({ onEditComplete }: PasswordEditProps) => {
               required: '새 비밀번호를 입력해주세요',
               minLength: {
                 value: 8,
-                message: '비밀번호는 8자 이상이어야 합니다',
+                message: '비밀번호는 숫자, 영문 포함 8자리 이상이어야 합니다',
+              },
+              validate: (value) => {
+                const hasNumber = /[0-9]/.test(value);
+                const hasLetter = /[a-zA-Z]/.test(value);
+
+                if (!hasNumber || !hasLetter) {
+                  return '비밀번호는 숫자, 영문 포함 8자리 이상이어야 합니다';
+                }
+
+                return true;
               },
             })}
           />
@@ -135,17 +141,17 @@ const PasswordEdit = ({ onEditComplete }: PasswordEditProps) => {
           <Button
             type="button"
             variant="outline"
-            className="h-[40px] w-[140px] md:h-[46px]"
+            className="h-[40px] w-[80px] md:h-[46px] md:w-[180px]"
             onClick={handleCancel}
           >
             취소
           </Button>
           <Button
             type="submit"
-            className="h-[40px] w-[140px] select-none md:h-[46px]"
+            className="h-[40px] w-[130px] select-none md:h-[46px] md:w-[200px]"
             disabled={isSubmitting || isUpdating}
           >
-            {isUpdating ? '변경 중...' : '비밀번호 변경'}
+            {isUpdating ? '저장 중...' : '변경사항 저장'}
           </Button>
         </div>
       </div>
diff --git a/src/app/(user-page)/mypage/_features/PasswordInfo.tsx b/src/app/(user-page)/mypage/_features/PasswordInfo.tsx
index c5eb715b..a34b8031 100644
--- a/src/app/(user-page)/mypage/_features/PasswordInfo.tsx
+++ b/src/app/(user-page)/mypage/_features/PasswordInfo.tsx
@@ -19,8 +19,8 @@ const PasswordInfo = ({ onEnableEdit }: PasswordInfoProps) => {
   }
 
   return (
-    <div className="w-full rounded-[16px] border border-Cgray300 p-[32px]">
-      <div className="flex flex-col gap-[32px]">
+    <div className="w-full rounded-[16px] border border-Cgray300 p-[24px] md:p-[32px]">
+      <div className="flex flex-col gap-[24px] md:gap-[32px]">
         <div className="flex flex-col gap-[8px]">
           <div className="typo-head3 text-Cgray700">비밀번호</div>
         </div>
diff --git a/src/app/(user-page)/mypage/_features/TechStackEdit.tsx b/src/app/(user-page)/mypage/_features/TechStackEdit.tsx
index 5223cb7f..924c9ac8 100644
--- a/src/app/(user-page)/mypage/_features/TechStackEdit.tsx
+++ b/src/app/(user-page)/mypage/_features/TechStackEdit.tsx
@@ -108,14 +108,14 @@ const TechStackEdit = ({
         <Button
           type="button"
           variant="outline"
-          className="h-[40px] w-[140px] md:h-[46px]"
+          className="h-[40px] w-[80px] md:h-[46px] md:w-[180px]"
           onClick={onEditComplete}
         >
           취소
         </Button>
         <Button
           type="button"
-          className="h-[40px] w-[140px] select-none md:h-[46px]"
+          className="h-[40px] w-[130px] select-none md:h-[46px] md:w-[200px]"
           disabled={isUpdating}
           onClick={handleSave}
         >
diff --git a/src/app/(user-page)/mypage/_features/TechStackInfo.tsx b/src/app/(user-page)/mypage/_features/TechStackInfo.tsx
index 246ff64f..9a2f5914 100644
--- a/src/app/(user-page)/mypage/_features/TechStackInfo.tsx
+++ b/src/app/(user-page)/mypage/_features/TechStackInfo.tsx
@@ -21,7 +21,7 @@ const TechStackInfo = ({ onEnableEdit }: TechStackInfoProps) => {
   }
 
   return (
-    <div className="rounded-[16px] border border-Cgray300 bg-BG p-[32px]">
+    <div className="rounded-[16px] border border-Cgray300 bg-BG p-[24px] md:p-[32px]">
       <div className="mb-4 flex items-center justify-between">
         <div className="typo-head3 text-Cgray700">기술 스택</div>
       </div>
diff --git a/src/hooks/mutations/useMyPageMutation.tsx b/src/hooks/mutations/useMyPageMutation.tsx
index 9fc3470e..a92c7851 100644
--- a/src/hooks/mutations/useMyPageMutation.tsx
+++ b/src/hooks/mutations/useMyPageMutation.tsx
@@ -1,5 +1,6 @@
 import { useToast } from '@/components/common/ToastContext';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { AxiosError } from 'axios';
 
 import {
   updateContactInfo,
@@ -8,7 +9,7 @@ import {
   updateProfileImage,
   updateSkills,
 } from '../../service/api/mypageProfile';
-import { IProfileResponse } from '../../types/mypageTypes';
+import { ErrorResponse, IProfileResponse } from '../../types/mypageTypes';
 import { QUERY_KEYS } from '../queries/useMyPageQueries';
 
 // 프로필 정보 업데이트 커스텀 훅
@@ -191,14 +192,23 @@ export const useUpdatePasswordMutation = () => {
   return useMutation({
     mutationFn: updatePassword,
 
-    onError: (error) => {
-      // 서버 에러 메시지 추출 시도
-      const errorMessage = error?.message || '비밀번호 변경에 실패했습니다.';
-      showToast(errorMessage, 'error');
+    onError: (error: AxiosError<ErrorResponse>) => {
+      // 서버 에러 응답 구조에 따라 조건 확인
+      const errorData = error.response?.data;
+
+      const isPasswordMismatch =
+        errorData?.message?.includes('password') ||
+        errorData?.code === 'INVALID_PASSWORD' ||
+        errorData?.message?.includes('비밀번호');
+
+      if (isPasswordMismatch) {
+        // 기타 오류에 대한 일반적인 메시지
+        showToast('비밀번호 변경에 실패했습니다', 'error');
+      }
     },
 
     onSuccess: () => {
-      showToast('비밀번호가 성공적으로 변경되었습니다.', 'success');
+      showToast('비밀번호가 성공적으로 변경되었습니다', 'success');
     },
   });
 };
diff --git a/src/types/mypageTypes.ts b/src/types/mypageTypes.ts
index 6e985b27..816fe4d6 100644
--- a/src/types/mypageTypes.ts
+++ b/src/types/mypageTypes.ts
@@ -107,3 +107,14 @@ export interface IPasswordUpdateResponse {
   };
   timestamp: string;
 }
+
+export interface IPasswordUpdateResponse {
+  success: boolean;
+  message?: string;
+}
+
+// 서버 에러 응답 타입 정의
+export interface ErrorResponse {
+  message?: string;
+  code?: string;
+}

From 918e0035369fc81ae5cefdf42b0d6ae5c4bda015 Mon Sep 17 00:00:00 2001
From: Dongseok Lee <ehdtjr510@naver.com>
Date: Tue, 18 Mar 2025 01:07:57 +0900
Subject: [PATCH 2/2] =?UTF-8?q?refactor(DEVING-71):=20=EB=A7=88=EC=9D=B4?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20UI=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mypage/_features/BasicEdit.tsx            | 18 ++--
 .../mypage/_features/BasicInfo.tsx            | 30 +++++--
 .../mypage/_features/ContactEdit.tsx          |  8 +-
 .../mypage/_features/ContactInfo.tsx          | 20 ++++-
 .../mypage/_features/PasswordEdit.tsx         | 15 +++-
 .../mypage/_features/PasswordInfo.tsx         |  2 +-
 .../mypage/_features/ProfileImage.tsx         | 84 ++++++++++++++++---
 .../mypage/_features/TechStackEdit.tsx        | 16 +++-
 .../mypage/_features/TechStackInfo.tsx        | 25 +++++-
 src/app/(user-page)/mypage/page.tsx           |  2 +-
 10 files changed, 177 insertions(+), 43 deletions(-)

diff --git a/src/app/(user-page)/mypage/_features/BasicEdit.tsx b/src/app/(user-page)/mypage/_features/BasicEdit.tsx
index 8981dee3..8aecb793 100644
--- a/src/app/(user-page)/mypage/_features/BasicEdit.tsx
+++ b/src/app/(user-page)/mypage/_features/BasicEdit.tsx
@@ -158,7 +158,10 @@ const BasicEdit = ({ onEditComplete }: BasicEditProps) => {
       <div className="flex flex-col gap-[16px] md:gap-[32px]">
         {/* 이름 입력 필드 */}
         <div className="flex flex-col gap-[8px]">
-          <label htmlFor="name-input" className="typo-head3 text-main">
+          <label
+            htmlFor="name-input"
+            className="typo-head3 text-[20px] text-main"
+          >
             사용자 이름
           </label>
           <input
@@ -203,7 +206,10 @@ const BasicEdit = ({ onEditComplete }: BasicEditProps) => {
         {/* 자기소개 텍스트 영역 */}
         <div className="flex flex-col gap-2">
           <div className="flex items-center justify-between">
-            <label htmlFor="intro-input" className="typo-head3 text-main">
+            <label
+              htmlFor="intro-input"
+              className="typo-head3 text-[20px] text-main"
+            >
               자기소개
             </label>
           </div>
@@ -230,7 +236,7 @@ const BasicEdit = ({ onEditComplete }: BasicEditProps) => {
 
         {/* 포지션 버튼 */}
         <div className="flex flex-col gap-[16px] border-b border-Cgray300 pb-[16px] md:pb-[32px]">
-          <div className="typo-head3 text-main">포지션</div>
+          <div className="typo-head3 text-[20px] text-main">포지션</div>
           <div className="flex w-full flex-wrap gap-2">
             <div className="rounded-4 typo-head3 flex w-full gap-[12px]">
               {POSITION_OPTIONS.map((option) => (
@@ -262,7 +268,7 @@ const BasicEdit = ({ onEditComplete }: BasicEditProps) => {
 
         {/* 성별 토글 버튼 */}
         <div className="flex flex-col gap-[16px] border-b border-Cgray300 pb-[16px] md:pb-[32px]">
-          <div className="typo-head3 text-main">성별</div>
+          <div className="typo-head3 text-[20px] text-main">성별</div>
           <div className="typo-head3 flex w-full gap-[16px] rounded-md">
             {GENDER_OPTIONS.map((option) => (
               <button
@@ -292,7 +298,7 @@ const BasicEdit = ({ onEditComplete }: BasicEditProps) => {
 
         {/* 연령대 드롭다운 */}
         <div className="flex flex-col gap-[16px] border-b border-Cgray300 pb-[16px] md:pb-[32px]">
-          <div className="typo-head3 text-main">연령대</div>
+          <div className="typo-head3 text-[20px] text-main">연령대</div>
           <Controller
             name="age"
             control={control}
@@ -312,7 +318,7 @@ const BasicEdit = ({ onEditComplete }: BasicEditProps) => {
 
         {/* 지역 드롭다운 */}
         <div className="flex flex-col gap-[16px] border-b border-Cgray300 pb-[16px] md:pb-[32px]">
-          <div className="typo-head3 text-main">지역</div>
+          <div className="typo-head3 text-[20px] text-main">지역</div>
           <Controller
             name="location"
             control={control}
diff --git a/src/app/(user-page)/mypage/_features/BasicInfo.tsx b/src/app/(user-page)/mypage/_features/BasicInfo.tsx
index 9aa90dd2..668c4f05 100644
--- a/src/app/(user-page)/mypage/_features/BasicInfo.tsx
+++ b/src/app/(user-page)/mypage/_features/BasicInfo.tsx
@@ -39,7 +39,10 @@ const BasicInfo = ({ onEnableEdit }: BasicInfoProps) => {
     <div className="w-full rounded-[16px] border border-Cgray300 p-[24px] md:p-[32px]">
       <div className="flex flex-col gap-[24px] md:gap-[32px]">
         <div className="flex flex-col gap-[8px]">
-          <label htmlFor="name-input" className="typo-head3 text-Cgray700">
+          <label
+            htmlFor="name-input"
+            className="typo-head3 text-[20px] text-white"
+          >
             이름
           </label>
           <input
@@ -51,7 +54,10 @@ const BasicInfo = ({ onEnableEdit }: BasicInfoProps) => {
           />
         </div>
         <div className="flex flex-col gap-[8px]">
-          <label htmlFor="intro-input" className="typo-head3 text-Cgray700">
+          <label
+            htmlFor="intro-input"
+            className="typo-head3 text-[20px] text-white"
+          >
             소개글
           </label>
           <textarea
@@ -63,7 +69,10 @@ const BasicInfo = ({ onEnableEdit }: BasicInfoProps) => {
           />
         </div>
         <div className="flex flex-col gap-[8px]">
-          <label htmlFor="position-input" className="typo-head3 text-Cgray700">
+          <label
+            htmlFor="position-input"
+            className="typo-head3 text-[20px] text-white"
+          >
             포지션
           </label>
           <input
@@ -75,7 +84,10 @@ const BasicInfo = ({ onEnableEdit }: BasicInfoProps) => {
           />
         </div>
         <div className="flex flex-col gap-[8px]">
-          <label htmlFor="gender-input" className="typo-head3 text-Cgray700">
+          <label
+            htmlFor="gender-input"
+            className="typo-head3 text-[20px] text-white"
+          >
             성별
           </label>
           <input
@@ -87,7 +99,10 @@ const BasicInfo = ({ onEnableEdit }: BasicInfoProps) => {
           />
         </div>
         <div className="flex flex-col gap-[8px]">
-          <label htmlFor="age-input" className="typo-head3 text-Cgray700">
+          <label
+            htmlFor="age-input"
+            className="typo-head3 text-[20px] text-white"
+          >
             연령대
           </label>
           <input
@@ -99,7 +114,10 @@ const BasicInfo = ({ onEnableEdit }: BasicInfoProps) => {
           />
         </div>
         <div className="flex flex-col gap-[8px]">
-          <label htmlFor="area-input" className="typo-head3 text-Cgray700">
+          <label
+            htmlFor="area-input"
+            className="typo-head3 text-[20px] text-white"
+          >
             지역
           </label>
           <input
diff --git a/src/app/(user-page)/mypage/_features/ContactEdit.tsx b/src/app/(user-page)/mypage/_features/ContactEdit.tsx
index 11020313..48b08008 100644
--- a/src/app/(user-page)/mypage/_features/ContactEdit.tsx
+++ b/src/app/(user-page)/mypage/_features/ContactEdit.tsx
@@ -80,7 +80,7 @@ const ContactEdit = ({ onEditComplete }: ContactEditProps) => {
     >
       <div className="flex flex-col gap-[32px]">
         <div className="flex flex-col gap-[8px]">
-          <label htmlFor="phone" className="typo-head3 text-main">
+          <label htmlFor="phone" className="typo-head3 text-[20px] text-main">
             전화번호
           </label>
           <Input
@@ -99,7 +99,7 @@ const ContactEdit = ({ onEditComplete }: ContactEditProps) => {
         </div>
 
         <div className="flex flex-col gap-[8px]">
-          <label htmlFor="kakao" className="typo-head3 text-main">
+          <label htmlFor="kakao" className="typo-head3 text-[20px] text-main">
             카카오톡 ID
           </label>
           <Input
@@ -117,7 +117,7 @@ const ContactEdit = ({ onEditComplete }: ContactEditProps) => {
         </div>
 
         <div className="flex flex-col gap-[8px]">
-          <label htmlFor="github" className="typo-head3 text-main">
+          <label htmlFor="github" className="typo-head3 text-[20px] text-main">
             깃허브
           </label>
           <Input
@@ -151,7 +151,7 @@ const ContactEdit = ({ onEditComplete }: ContactEditProps) => {
         </div>
 
         <div className="flex flex-col gap-[8px]">
-          <label htmlFor="blog" className="typo-head3 text-main">
+          <label htmlFor="blog" className="typo-head3 text-[20px] text-main">
             블로그
           </label>
           <Input
diff --git a/src/app/(user-page)/mypage/_features/ContactInfo.tsx b/src/app/(user-page)/mypage/_features/ContactInfo.tsx
index c3ac35dd..156ce8d4 100644
--- a/src/app/(user-page)/mypage/_features/ContactInfo.tsx
+++ b/src/app/(user-page)/mypage/_features/ContactInfo.tsx
@@ -48,7 +48,10 @@ const ContactInfo = ({ onEnableEdit }: ContactInfoProps) => {
     <div className="w-full rounded-[16px] border border-Cgray300 p-[24px] md:p-[32px]">
       <div className="flex flex-col gap-[24px] md:gap-[32px]">
         <div className="flex flex-col gap-[8px]">
-          <label htmlFor="phone-input" className="typo-head3 text-Cgray700">
+          <label
+            htmlFor="phone-input"
+            className="typo-head3 text-[20px] text-white"
+          >
             전화번호
           </label>
           <input
@@ -60,7 +63,10 @@ const ContactInfo = ({ onEnableEdit }: ContactInfoProps) => {
           />
         </div>
         <div className="flex flex-col gap-[8px]">
-          <label htmlFor="kakao-input" className="typo-head3 text-Cgray700">
+          <label
+            htmlFor="kakao-input"
+            className="typo-head3 text-[20px] text-white"
+          >
             카카오톡 ID
           </label>
           <input
@@ -72,7 +78,10 @@ const ContactInfo = ({ onEnableEdit }: ContactInfoProps) => {
           />
         </div>
         <div className="flex flex-col gap-[8px]">
-          <label htmlFor="github-input" className="typo-head3 text-Cgray700">
+          <label
+            htmlFor="github-input"
+            className="typo-head3 text-[20px] text-white"
+          >
             깃허브
           </label>
           <input
@@ -84,7 +93,10 @@ const ContactInfo = ({ onEnableEdit }: ContactInfoProps) => {
           />
         </div>
         <div className="flex flex-col gap-[8px]">
-          <label htmlFor="blog-input" className="typo-head3 text-Cgray700">
+          <label
+            htmlFor="blog-input"
+            className="typo-head3 text-[20px] text-white"
+          >
             블로그
           </label>
           <input
diff --git a/src/app/(user-page)/mypage/_features/PasswordEdit.tsx b/src/app/(user-page)/mypage/_features/PasswordEdit.tsx
index 9676dbc6..e0301a76 100644
--- a/src/app/(user-page)/mypage/_features/PasswordEdit.tsx
+++ b/src/app/(user-page)/mypage/_features/PasswordEdit.tsx
@@ -80,7 +80,10 @@ const PasswordEdit = ({ onEditComplete }: PasswordEditProps) => {
     >
       <div className="flex flex-col gap-[32px]">
         <div className="flex w-full flex-col gap-[8px]">
-          <label htmlFor="currentPassword" className="typo-head3 text-main">
+          <label
+            htmlFor="currentPassword"
+            className="typo-head3 text-[20px] text-main"
+          >
             기존 비밀번호
           </label>
           <Input
@@ -94,7 +97,10 @@ const PasswordEdit = ({ onEditComplete }: PasswordEditProps) => {
         </div>
 
         <div className="flex w-full flex-col gap-[8px]">
-          <label htmlFor="newPassword" className="typo-head3 text-main">
+          <label
+            htmlFor="newPassword"
+            className="typo-head3 text-[20px] text-main"
+          >
             새 비밀번호
           </label>
           <Input
@@ -122,7 +128,10 @@ const PasswordEdit = ({ onEditComplete }: PasswordEditProps) => {
         </div>
 
         <div className="flex w-full flex-col gap-[8px]">
-          <label htmlFor="passwordCheck" className="typo-head3 text-main">
+          <label
+            htmlFor="passwordCheck"
+            className="typo-head3 text-[20px] text-main"
+          >
             비밀번호 확인
           </label>
           <Input
diff --git a/src/app/(user-page)/mypage/_features/PasswordInfo.tsx b/src/app/(user-page)/mypage/_features/PasswordInfo.tsx
index a34b8031..64a6396f 100644
--- a/src/app/(user-page)/mypage/_features/PasswordInfo.tsx
+++ b/src/app/(user-page)/mypage/_features/PasswordInfo.tsx
@@ -22,7 +22,7 @@ const PasswordInfo = ({ onEnableEdit }: PasswordInfoProps) => {
     <div className="w-full rounded-[16px] border border-Cgray300 p-[24px] md:p-[32px]">
       <div className="flex flex-col gap-[24px] md:gap-[32px]">
         <div className="flex flex-col gap-[8px]">
-          <div className="typo-head3 text-Cgray700">비밀번호</div>
+          <div className="typo-head3 text-[20px] text-white">비밀번호</div>
         </div>
 
         <div className="flex justify-center md:justify-start">
diff --git a/src/app/(user-page)/mypage/_features/ProfileImage.tsx b/src/app/(user-page)/mypage/_features/ProfileImage.tsx
index 83215fe4..cff5d928 100644
--- a/src/app/(user-page)/mypage/_features/ProfileImage.tsx
+++ b/src/app/(user-page)/mypage/_features/ProfileImage.tsx
@@ -7,7 +7,7 @@ import { useUpdateProfileImageMutation } from '@/hooks/mutations/useMyPageMutati
 import { useProfileQuery } from '@/hooks/queries/useMyPageQueries';
 import { Pencil } from 'lucide-react';
 import Image from 'next/image';
-import { useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 import { MAX_FILE_SIZE } from '../../../../constants/mypage/mypageConstant';
 import SkeletonProfileImage from './skeletons/SkeletonProfileImage';
@@ -17,6 +17,7 @@ const ProfileImage = () => {
   const [selectedFile, setSelectedFile] = useState<File | null>(null);
   const [previewUrl, setPreviewUrl] = useState<string | null>(null);
   const [fileSizeError, setFileSizeError] = useState<string | null>(null);
+  const [isMobile, setIsMobile] = useState<boolean>(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
 
   // 프로필 데이터 조회
@@ -29,6 +30,23 @@ const ProfileImage = () => {
   // 프로필 이미지 URL
   const profileImageUrl = profileData?.data?.profilePic || null;
 
+  // 반응형 화면 크기 감지
+  useEffect(() => {
+    const checkIsMobile = () => {
+      // md 사이즈 기준 (보통 768px)
+      setIsMobile(window.innerWidth < 768);
+    };
+
+    // 초기 로드 시 체크
+    checkIsMobile();
+
+    // 리사이즈 이벤트 리스너 등록
+    window.addEventListener('resize', checkIsMobile);
+
+    // 컴포넌트 언마운트 시 정리
+    return () => window.removeEventListener('resize', checkIsMobile);
+  }, []);
+
   // 파일 선택 핸들러
   const handleFileSelect = () => {
     fileInputRef.current?.click();
@@ -90,6 +108,13 @@ const ProfileImage = () => {
     resetImageState();
   };
 
+  // 프로필 이미지 클릭 처리
+  const handleProfileClick = () => {
+    if (isMobile) {
+      setIsModalOpen(true);
+    }
+  };
+
   if (isProfileLoading) {
     return <SkeletonProfileImage />;
   }
@@ -98,21 +123,54 @@ const ProfileImage = () => {
     <div className="flex flex-col pt-[83px]">
       <div className="typo-head3 text-Cgray700">프로필 이미지</div>
       <div className="flex justify-center gap-[24px] py-[24px]">
-        <div className="relative flex h-[163px] w-[163px] items-center justify-center rounded-[20px] border border-Cgray300 bg-Cgray200 md:h-[255px] md:w-[255px]">
+        <div
+          className={`relative flex h-[163px] w-[163px] items-center justify-center rounded-[20px] border border-Cgray300 bg-Cgray200 md:h-[255px] md:w-[255px] ${isMobile ? 'cursor-pointer hover:opacity-90 active:opacity-75' : ''}`}
+          onClick={isMobile ? handleProfileClick : undefined}
+          onKeyDown={
+            isMobile
+              ? (e) => {
+                  if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    handleProfileClick();
+                  }
+                }
+              : undefined
+          }
+          role={isMobile ? 'button' : undefined}
+          tabIndex={isMobile ? 0 : undefined}
+          aria-label={isMobile ? '프로필 이미지 변경하기' : undefined}
+        >
           {profileImageUrl ? (
-            <Image
-              src={profileImageUrl}
-              alt="프로필 이미지"
-              priority
-              className="rounded-[20px] object-cover"
-              fill
-              unoptimized
-              sizes="(max-width: 768px) 163px, 255px"
-            />
+            <>
+              <Image
+                src={profileImageUrl}
+                alt="프로필 이미지"
+                priority
+                className="rounded-[20px] object-cover"
+                fill
+                unoptimized
+                sizes="(max-width: 768px) 163px, 255px"
+              />
+              {/* 모바일에서만 보이는 오버레이 효과 */}
+              {isMobile && (
+                <div className="absolute inset-0 flex items-center justify-center rounded-[20px] bg-black bg-opacity-30 opacity-0 transition-opacity hover:opacity-100 focus:opacity-100">
+                  <p className="font-medium text-white">이미지 변경</p>
+                </div>
+              )}
+            </>
           ) : (
-            <EditLogo className="text-Cgray700" width={86} height={86} />
+            <>
+              <EditLogo className="text-Cgray700" width={86} height={86} />
+              {/* 모바일에서만 보이는 오버레이 효과 */}
+              {isMobile && (
+                <div className="absolute inset-0 flex items-center justify-center rounded-[20px] bg-black bg-opacity-30 opacity-0 transition-opacity hover:opacity-100 focus:opacity-100">
+                  <p className="font-medium text-white">이미지 선택</p>
+                </div>
+              )}
+            </>
           )}
-          <div className="absolute bottom-[8px] right-[8px] md:bottom-[15px] md:right-[15px]">
+          {/* md 사이즈 이상에서만 보이는 편집 버튼 */}
+          <div className="absolute bottom-[8px] right-[8px] hidden md:bottom-[15px] md:right-[15px] md:block">
             <Button
               onClick={() => setIsModalOpen(true)}
               className="h-[28px] w-[28px] rounded-full md:h-[34px] md:w-[34px]"
diff --git a/src/app/(user-page)/mypage/_features/TechStackEdit.tsx b/src/app/(user-page)/mypage/_features/TechStackEdit.tsx
index 924c9ac8..6068eb9e 100644
--- a/src/app/(user-page)/mypage/_features/TechStackEdit.tsx
+++ b/src/app/(user-page)/mypage/_features/TechStackEdit.tsx
@@ -19,7 +19,7 @@ interface TechStackEditProps {
 
 const TechStackEdit = ({
   onEditComplete,
-  maxSelections = 999,
+  maxSelections = 10, // 변경: 기본값을 999에서 10으로 수정
 }: TechStackEditProps) => {
   const [activeCategory, setActiveCategory] = useState<CategoryType>('all');
 
@@ -51,6 +51,7 @@ const TechStackEdit = ({
     if (!isInitialized && !isLoading && profileData?.data?.skillArray) {
       const skillArray = profileData.data.skillArray;
       if (skillArray.length > 0) {
+        // 기존 스킬이 maxSelections보다 많으면 경고 표시 또는 처리 로직을 추가할 수 있음
         setInitialSelection(skillArray);
       }
       setIsInitialized(true); // 초기화 완료 표시
@@ -73,7 +74,11 @@ const TechStackEdit = ({
   return (
     <div className="rounded-lg border border-Cgray300 bg-BG p-[32px]">
       <div className="mb-4 flex items-center justify-between">
-        <div className="typo-head3 text-main">기술 스택 편집</div>
+        <div className="typo-head3 text-[20px] text-main">기술 스택 편집</div>
+        {/* 선택 개수 표시 추가 */}
+        <div className="text-Cgray800">
+          {selectedCount}/{maxSelections}
+        </div>
       </div>
 
       {/* 선택된 기술 목록 */}
@@ -104,6 +109,13 @@ const TechStackEdit = ({
         className="bg-transparent"
       />
 
+      {/* 최대 선택 개수 도달 시 안내 메시지 추가 */}
+      {selectedCount >= maxSelections && (
+        <div className="mt-2 text-sm text-warning">
+          최대 {maxSelections}개까지 선택할 수 있습니다.
+        </div>
+      )}
+
       <div className="mt-4 flex justify-between">
         <Button
           type="button"
diff --git a/src/app/(user-page)/mypage/_features/TechStackInfo.tsx b/src/app/(user-page)/mypage/_features/TechStackInfo.tsx
index 9a2f5914..3ab56cce 100644
--- a/src/app/(user-page)/mypage/_features/TechStackInfo.tsx
+++ b/src/app/(user-page)/mypage/_features/TechStackInfo.tsx
@@ -7,15 +7,23 @@ import SkeletonTechStackInfo from './skeletons/SkeletonTechStackInfo';
 
 interface TechStackInfoProps {
   onEnableEdit: () => void;
+  maxSelections?: number;
 }
 
-const TechStackInfo = ({ onEnableEdit }: TechStackInfoProps) => {
+const TechStackInfo = ({
+  onEnableEdit,
+  maxSelections = 10,
+}: TechStackInfoProps) => {
   // 커스텀 훅을 사용하여 프로필 데이터 가져오기
   const { data: profileData, isLoading } = useProfileQuery();
 
   // 사용자 스킬 데이터 (안전하게 기본값 지정)
   const userSkills = profileData?.data?.skillArray || [];
 
+  // 표시할 최대 개수 계산
+  const displaySkills = userSkills.slice(0, maxSelections);
+  const hasMoreSkills = userSkills.length > maxSelections;
+
   if (isLoading) {
     return <SkeletonTechStackInfo />;
   }
@@ -23,12 +31,18 @@ const TechStackInfo = ({ onEnableEdit }: TechStackInfoProps) => {
   return (
     <div className="rounded-[16px] border border-Cgray300 bg-BG p-[24px] md:p-[32px]">
       <div className="mb-4 flex items-center justify-between">
-        <div className="typo-head3 text-Cgray700">기술 스택</div>
+        <div className="typo-head3 text-[20px] text-white">기술 스택</div>
+        {/* 개수 표시 추가 */}
+        {userSkills.length > 0 && (
+          <div className="text-Cgray800">
+            {Math.min(userSkills.length, maxSelections)}/{maxSelections}
+          </div>
+        )}
       </div>
 
       {userSkills.length > 0 ? (
         <div className="flex flex-wrap gap-2">
-          {userSkills.map((skill) => {
+          {displaySkills.map((skill) => {
             const color = getIconColor(skill);
             const Icon = getIconComponent(skill);
             return (
@@ -48,6 +62,11 @@ const TechStackInfo = ({ onEnableEdit }: TechStackInfoProps) => {
               </div>
             );
           })}
+          {hasMoreSkills && (
+            <div className="text-Cgray600 flex items-center rounded-full border border-Cgray300 bg-Cgray100 px-2 py-1 text-xs">
+              +{userSkills.length - maxSelections}
+            </div>
+          )}
         </div>
       ) : (
         <p className="text-Cgray500">등록된 기술 스택이 없습니다.</p>
diff --git a/src/app/(user-page)/mypage/page.tsx b/src/app/(user-page)/mypage/page.tsx
index 6ba08b1a..eee8a6d8 100644
--- a/src/app/(user-page)/mypage/page.tsx
+++ b/src/app/(user-page)/mypage/page.tsx
@@ -16,7 +16,7 @@ export default async function MyPage() {
   await prefetchProfileData(queryClient);
 
   return (
-    <div className="flex flex-col px-[24px] pb-[100px] pt-[80px]">
+    <div className="flex flex-col px-[24px] pb-[100px]">
       <HydrationBoundary state={dehydrate(queryClient)}>
         <div className="md:mb-8">
           <ProfileImage />