From f7e79b30eefee05700b688424afad3c6c02a57dd Mon Sep 17 00:00:00 2001
From: "chohee.hwang" <manent556@gmail.com>
Date: Fri, 20 Dec 2024 09:13:46 +0900
Subject: [PATCH] =?UTF-8?q?:lipstick:=20[Fix]=20Profile=20bio=20=EB=AA=A8?=
 =?UTF-8?q?=EB=B0=94=EC=9D=BC=EB=B2=84=EC=A0=84=20=EB=B0=B0=EA=B2=BD?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/globals.css                       |  3 +++
 src/components/profile/Profile.module.css | 22 ++++++++++++++++++++--
 src/components/profile/ProfileEdit.jsx    |  6 +++---
 3 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 66cf4b71..7ba352c0 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -44,6 +44,7 @@
   --delete-btn-background: rgba(200, 200, 200, 0.75);
   --mainPost-img-overlay: rgba(0, 0, 0, 60%);
   --reverse-black-font-color: #eef0de;
+  --profile-bio: #f89b9b20;
 
   --tomong-stamp-half-opacity: 0.5;
   --tomong-stamp-one-fifth-opacity: 0.2;
@@ -126,6 +127,7 @@
     --invalid-border-color: #ba5b5b;
     --invalid-text-color: #ba5b5b;
     --reverse-black-font-color: #141420;
+    --profile-bio: #95959530;
   }
 }
 
@@ -181,6 +183,7 @@
   --invalid-border-color: #ba5b5b;
   --invalid-text-color: #ba5b5b;
   --reverse-black-font-color: #141420;
+  --profile-bio: #95959520;
 }
 
 html {
diff --git a/src/components/profile/Profile.module.css b/src/components/profile/Profile.module.css
index 34fba9d2..8bdcca49 100644
--- a/src/components/profile/Profile.module.css
+++ b/src/components/profile/Profile.module.css
@@ -14,7 +14,8 @@
 
 .profile-wrap {
   display: flex;
-  margin: auto;
+  margin-left: auto;
+  margin-right: auto;
   width: 100%;
   padding: 4.3rem 0 0.3rem 5.1rem;
 }
@@ -105,12 +106,21 @@
 }
 
 .profile-bio {
-  width: 21rem;
+  width: 36rem;
+  height: 6.6rem;
   color: var(--black-font-color);
 }
 
 /* profile form */
 
+.edit-profile-wrap {
+  display: flex;
+  margin-left: auto;
+  margin-right: auto;
+  width: 100%;
+  padding: 4.3rem 0 0 5.1rem;
+}
+
 .profile-form {
   display: flex;
   width: 100%;
@@ -129,6 +139,11 @@
   align-items: center;
 }
 
+.profile-form-pic .profile-image {
+  border-radius: 50%;
+  margin-bottom: 1.6rem;
+}
+
 .profile-form-pic label {
   margin-right: 4.5rem;
 }
@@ -410,6 +425,9 @@
   }
   .profile-bio {
     width: 32rem;
+    background-color: var(--profile-bio);
+    border-radius: 1rem;
+    padding: 0.5rem;
   }
 
   /* profile form */
diff --git a/src/components/profile/ProfileEdit.jsx b/src/components/profile/ProfileEdit.jsx
index ba49c6ae..d99e26e5 100644
--- a/src/components/profile/ProfileEdit.jsx
+++ b/src/components/profile/ProfileEdit.jsx
@@ -156,7 +156,7 @@ export default function ProfileEdit({
   };
 
   return (
-    <article className={styles["profile-wrap"]}>
+    <article className={styles["edit-profile-wrap"]}>
       <h2 className="sr-only">프로필 편집</h2>
       <form onSubmit={handleSubmit} className={styles["profile-form"]}>
         <fieldset className={styles["profile-form-pic"]}>
@@ -169,8 +169,8 @@ export default function ProfileEdit({
                   : "/images/rabbit.svg"
             }
             className={styles["profile-image"]}
-            width={160}
-            height={160}
+            width={150}
+            height={150}
             alt={profile.name + "님의 프로필 이미지"}
           />
           <ButtonLabel highlight={true}>