From 16b8c3a04ff8004712dea4d85be71bad4b2f0e70 Mon Sep 17 00:00:00 2001
From: KimTaeHun <kth32105@naver.com>
Date: Fri, 27 Dec 2024 16:02:57 +0900
Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=94=A7UserProfile=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=EC=9D=98=20=EC=A3=BC=EC=84=9D=20?=
 =?UTF-8?q?=EB=B0=8F=20=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20=EC=84=A4?=
 =?UTF-8?q?=EB=AA=85=20=EC=97=85=EB=8D=B0=EC=9D=B4=ED=8A=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/UserProfile.tsx | 81 ++++++++++++++++++++------------------
 1 file changed, 42 insertions(+), 39 deletions(-)

diff --git a/components/UserProfile.tsx b/components/UserProfile.tsx
index 68f8d60..5638524 100644
--- a/components/UserProfile.tsx
+++ b/components/UserProfile.tsx
@@ -8,10 +8,10 @@ import Spinner from './Spinner';
 /**
  * UserProfile 컴포넌트
  * 사용자의 프로필 정보를 표시하고 편집하는 컴포넌트
- * PC와 모바일/태블릿 환경에서 각각 다른 레이아웃으로 표시됨
+ * PC, 태블릿, 모바일 환경에 따라 레이아웃이 반응형으로 변경
  *
- * @param data - 사용자 프로필 데이터
- * @param isEditing - 편집 모드 여부 (기본값: false)
+ * @param data - 사용자 프로필 데이터 객체
+ * @param isEditing - 편집 모드 여부
  * @param onDataChange - 데이터 변경 시 호출되는 콜백 함수
  */
 function UserProfile({
@@ -19,16 +19,16 @@ function UserProfile({
   isEditing = false,
   onDataChange,
 }: UserProfileProps) {
-  // 추가 정보 영역의 펼침/접힘 상태 관리
+  // 추가 정보 영역의 펼침/접힘 상태 관리 훅
   const { isExpanded, toggleExpand } = useExpandedState();
 
-  // 프로필 이미지 관련 상태와 핸들러
+  // 프로필 이미지 관련 상태와 이벤트 핸들러 훅
   const {
-    isLoading,
-    previewImage,
-    fileInputRef,
-    handleImageClick,
-    handleFileChange,
+    isLoading, // 이미지 로딩 상태
+    previewImage, // 이미지 미리보기 URL
+    fileInputRef, // 파일 입력 요소 참조
+    handleImageClick, // 이미지 클릭 핸들러
+    handleFileChange, // 파일 변경 핸들러
   } = useProfileImage((url) => onDataChange('image', url));
 
   /**
@@ -36,7 +36,7 @@ function UserProfile({
    * 편집 모드에서는 입력 필드로, 조회 모드에서는 텍스트로 표시
    *
    * @param label - 필드 레이블
-   * @param field - 데이터 객체의 키
+   * @param field - data 객체의 키값
    * @returns 렌더링된 필드 컴포넌트
    */
   const renderField = (label: string, field: keyof typeof data) => {
@@ -60,9 +60,9 @@ function UserProfile({
   };
 
   return (
-    // 메인 컨테이너
-    <div className="mx-auto max-w-4xl rounded-custom bg-white shadow-custom dark:bg-gray-600 dark:shadow-custom-dark mo:w-11/12 ta:w-11/12 pc:w-[400px] pc:p-7 tamo:p-5">
-      {/* 레이아웃 컨테이너: PC에서는 세로, 모바일/태블릿에서는 가로 배치 */}
+    // 최상위 컨테이너: 전체 프로필 카드를 감싸는 요소
+    <div className="mx-auto max-w-4xl rounded-custom bg-background shadow-custom mo:w-11/12 ta:w-11/12 pc:w-[400px] pc:p-7 tamo:p-5">
+      {/* 레이아웃 컨테이너: 화면 크기에 따라 세로/가로 배치가 변경됨 */}
       <div
         className={`flex ${isEditing ? 'flex-col' : 'flex-col mo:flex-row ta:flex-row pc:flex-col'} pc:items-center`}
       >
@@ -77,32 +77,35 @@ function UserProfile({
             type="button"
             disabled={isLoading}
           >
-            {/* 프로필 이미지 표시 */}
-            <Image
-              src={
-                previewImage !== null
-                  ? previewImage
-                  : data.image && data.image !== ''
-                    ? data.image
-                    : '/icon/icon-profile.svg'
-              }
-              alt="Profile"
-              width={100}
-              height={100}
-              priority
-              className={`rounded-full object-cover ${
+            {/* 이미지 컨테이너 */}
+            <div
+              className={`relative ${
                 isEditing
                   ? 'mo:size-[62px] ta:size-[71px] pc:size-48'
                   : 'mo:size-[62px] ta:size-[71px] pc:size-48'
               }`}
-            />
-            {/* 편집 모드일 때 이미지 위에 오버레이 표시 */}
+            >
+              {/* 프로필 이미지 */}
+              <Image
+                src={
+                  previewImage !== null
+                    ? previewImage
+                    : data.image && data.image !== ''
+                      ? data.image
+                      : '/icon/icon-profile.svg'
+                }
+                alt="Profile"
+                fill
+                sizes="(max-width: 768px) 62px, (max-width: 1024px) 71px, 192px"
+                priority
+                className="rounded-full object-cover"
+              />
+            </div>
             {isEditing && (
               <div className="absolute left-0 top-0 flex size-full items-center justify-center rounded-full bg-black/50">
                 {isLoading ? (
                   <Spinner />
                 ) : (
-                  // 카메라 아이콘 표시
                   <Image
                     src="/icon/icon-camera.svg"
                     alt="Edit photo"
@@ -114,7 +117,7 @@ function UserProfile({
               </div>
             )}
           </button>
-          {/* 숨겨진 파일 입력 필드 */}
+          {/* 숨겨진 파일 입력 필드: 실제 파일 선택 다이얼로그를 위한 요소 */}
           <input
             ref={fileInputRef}
             type="file"
@@ -122,15 +125,16 @@ function UserProfile({
             onChange={handleFileChange}
             className="hidden"
             aria-label="Upload profile image"
+            disabled={!isEditing || isLoading}
           />
         </div>
 
-        {/* 프로필 정보 섹션 */}
+        {/* 프로필 정보 섹션: 사용자 정보를 표시하는 영역 */}
         <div
           className={`${isEditing ? 'mt-4 mo:justify-center' : 'mo:ml-4 mo:flex-1 ta:ml-4 ta:flex-1 pc:mt-4'} mt-6 pc:w-full`}
         >
           <div className="space-y-3">
-            {/* 기본 정보 영역 */}
+            {/* 기본 정보 영역: 항상 표시되는 필수 정보들 */}
             <div
               className={`${
                 isEditing
@@ -144,7 +148,7 @@ function UserProfile({
               {isEditing && renderField('SNS 계정', 'sns')}
             </div>
 
-            {/* 추가 정보 영역 - 편집 모드와 조회 모드에서 다르게 표시 */}
+            {/* 추가 정보 영역: 편집 모드와 조회 모드에서 다르게 표시 */}
             {isEditing ? (
               // 편집 모드: 모든 필드를 그리드로 표시
               <div className="mo:space-y-3 ta:grid ta:grid-cols-2 ta:place-items-center ta:gap-3 pc:space-y-3">
@@ -153,7 +157,6 @@ function UserProfile({
                 {renderField('혈액형', 'bloodType')}
                 {renderField('국적', 'nationality')}
                 {renderField('가족관계', 'family')}
-                {renderField('자기소개', 'content')}
               </div>
             ) : (
               // 조회 모드: PC와 모바일/태블릿에서 다르게 표시
@@ -161,7 +164,7 @@ function UserProfile({
                 {/* 모바일/태블릿용 펼침/접힘 섹션 */}
                 <div className="pc:hidden">
                   {!isExpanded ? (
-                    // 접힌 상태: 펼치기 버튼
+                    // 접힌 상태: 펼치기 버튼 표시
                     <div className="flex justify-center">
                       <button
                         onClick={toggleExpand}
@@ -176,7 +179,7 @@ function UserProfile({
                       </button>
                     </div>
                   ) : (
-                    // 펼친 상태: 추가 정보와 접기 버튼
+                    // 펼친 상태: 추가 정보와 접기 버튼 표시
                     <div>
                       <div className="space-y-3">
                         {renderField('SNS 계정', 'sns')}
@@ -202,7 +205,7 @@ function UserProfile({
                   )}
                 </div>
 
-                {/* PC용 추가 정보 섹션 - 항상 표시 */}
+                {/* PC용 추가 정보 섹션: 항상 표시 */}
                 <div className="hidden space-y-3 pc:block">
                   {renderField('SNS 계정', 'sns')}
                   {renderField('생일', 'birthday')}

From 4cfe1f0066144da57edd564abc707c8d4d14dd89 Mon Sep 17 00:00:00 2001
From: Kim Tae Hun <135201712+horororok@users.noreply.github.com>
Date: Fri, 27 Dec 2024 17:31:12 +0900
Subject: [PATCH 2/2] =?UTF-8?q?:sparkles:=20=EB=A8=B8=EC=A7=80=20=EC=97=90?=
 =?UTF-8?q?=EB=9F=AC=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/UserProfile.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/components/UserProfile.tsx b/components/UserProfile.tsx
index 71a4476..b49e432 100644
--- a/components/UserProfile.tsx
+++ b/components/UserProfile.tsx
@@ -60,7 +60,6 @@ function UserProfile({
   };
 
   return (
-
     // 메인 컨테이너
     <div className="max-w-4xl rounded-custom bg-white shadow-custom dark:bg-gray-600 dark:shadow-custom-dark pc:h-[671px] pc:w-[320px] pc:p-7 tamo:w-full tamo:p-5">
       {/* 레이아웃 컨테이너: PC에서는 세로, 모바일/태블릿에서는 가로 배치 */}