💄 [Fix] Profile bio 모바일버전 배경추가

oreumi-dreamer · Dec 20, 2024 · f7e79b3 · f7e79b3
1 parent 0ce89f3
commit f7e79b3
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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}>