From df251da2f86466c9296e474b8c8e8297b675df43 Mon Sep 17 00:00:00 2001 From: kwontaeyeon0310 Date: Thu, 4 Jun 2026 17:48:58 +0900 Subject: [PATCH 1/2] fix: mypage ui --- src/widgets/my-page/personal-info/style.ts | 25 +++++++++++-------- src/widgets/my-page/portfolio/style.ts | 29 ++++++++++++++-------- 2 files changed, 33 insertions(+), 21 deletions(-) diff --git a/src/widgets/my-page/personal-info/style.ts b/src/widgets/my-page/personal-info/style.ts index fa0c3b3..33028a7 100644 --- a/src/widgets/my-page/personal-info/style.ts +++ b/src/widgets/my-page/personal-info/style.ts @@ -2,8 +2,9 @@ import styled from "styled-components"; export const PersonalInfoWrapper = styled.section` position: relative; - width: 80%; - min-height: 18.5em; + width: 100%; + max-width: 850px; + min-height: 15.5em; padding: 1.9rem 2.3rem 2rem; background-color: #ffffff; border-radius: 1.25rem; @@ -21,7 +22,7 @@ export const PersonalInfoWrapper = styled.section` export const Title = styled.h2` margin: 0 0 2.6rem; color: #46506a; - font-size: clamp(1.4rem, 2.5vw, 1.8rem); + font-size: clamp(1.3rem, 2.5vw, 1.7rem); font-weight: 600; line-height: 1.2; `; @@ -31,8 +32,8 @@ export const InfoList = styled.div` flex-direction: column; gap: 1.5rem; margin-left: 2.25rem; - margin-top: -0.5rem; - + margin-bottom: 2.3rem; + margin-top: -0.35rem; @media (max-width: 48rem) { margin-left: 0; gap: 1.2rem; @@ -43,6 +44,8 @@ export const InfoRow = styled.div` display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); align-items: center; + padding-left: 1.5rem; + padding-top: -0.3rem; column-gap: 0.65rem; @media (max-width: 36rem) { @@ -52,16 +55,16 @@ export const InfoRow = styled.div` export const Label = styled.span` color: #4c91f3; -font-size: clamp(1.05rem, 1.9vw, 1.4rem); - font-weight: 600; + font-size: clamp(1.05rem, 1.9vw, 1.4rem); + font-weight: 550; line-height: 1; `; export const Value = styled.span` color: #55607b; font-size: clamp(0.95rem, 1.6vw, 1.25rem); - font-weight: 700; - line-height: 1.35; + font-weight: 500; + line-height: 1.2; word-break: break-all; `; @@ -69,7 +72,7 @@ export const EditButton = styled.button` position: absolute; right: 1.7rem; bottom: 1rem; - min-width: 7.4rem; + min-width: 8.4rem; height: 2.4rem; display: inline-flex; align-items: center; @@ -86,7 +89,7 @@ export const EditButton = styled.button` font-weight: 800; cursor: pointer; - box-shadow: 0 0.25rem 0.6rem rgba(25, 118, 232, 0.25); + // box-shadow: 0 0.25rem 0.6rem rgba(25, 118, 232, 0.25); transition: background-color 0.2s ease, transform 0.2s ease; &:hover { diff --git a/src/widgets/my-page/portfolio/style.ts b/src/widgets/my-page/portfolio/style.ts index 351bd0a..3dcb42e 100644 --- a/src/widgets/my-page/portfolio/style.ts +++ b/src/widgets/my-page/portfolio/style.ts @@ -1,7 +1,8 @@ import styled from "styled-components"; export const PortfolioWrapper = styled.section` - width: 80%; + width: 100%; + max-width: 850px; padding: 2.3rem 2.3rem 2rem; border-radius: 1.25rem; background-color: #ffffff; @@ -18,7 +19,7 @@ export const PortfolioWrapper = styled.section` export const Title = styled.h2` margin: 0 0 2.15rem; color: #46506a; - font-size: clamp(1.4rem, 2.5vw, 1.8rem); + font-size: clamp(1.3rem, 2.5vw, 1.7rem); font-weight: 600; line-height: 1.2; `; @@ -26,7 +27,7 @@ export const Title = styled.h2` export const UploadBox = styled.div` position: relative; width: 100%; - min-height: 18.7rem; + min-height: 18rem; border: 0.0938rem solid #dbe1ea; border-radius: 0.95rem; background-color: #fdfdfe; @@ -63,10 +64,11 @@ export const UploadContent = styled.div` `; export const FileIcon = styled.img` - width: auto; - height: clamp(4.9rem, 6vw, 5.9rem); + width: 5rem; + height: auto; display: block; margin-left: 0.75rem; + padding-top: 0.15rem; `; export const UploadText = styled.p` @@ -78,6 +80,10 @@ export const UploadText = styled.p` span { color: #8a90a2; + font-weight: 500; + font-size: clamp(0.8rem, 1.7vw, 1.15rem); + text-align: center; + padding-left: 0.35rem; } `; @@ -130,14 +136,14 @@ export const InputSection = styled.div` export const Label = styled.h3` margin-bottom: 0.9rem; color: #46506a; - font-size: clamp(1.4rem, 2.5vw, 1.8rem); + font-size: clamp(1.3rem, 2.5vw, 1.7rem); font-weight: 600; line-height: 1.2; `; export const Input = styled.input` width: 100%; - height: 3.45rem; + height: 3.15rem; padding: 0 1.15rem; border: 0.0625rem solid #d9dde5; border-radius: 0.7rem; @@ -162,7 +168,7 @@ export const SelectWrapper = styled.div` export const Select = styled.select` appearance: none; width: 100%; - height: 3.45rem; + height: 3.15rem; padding: 0 3.4rem 0 1.15rem; border: 0.0625rem solid #d9dde5; border-radius: 0.7rem; @@ -199,7 +205,7 @@ export const ButtonWrapper = styled.div` export const BackButton = styled.button` width: min(100%, 18rem); min-width: 13rem; - height: 3.55rem; + height: 3.25rem; border: none; border-radius: 0.85rem; background-color: #f1f2f5; @@ -208,6 +214,8 @@ export const BackButton = styled.button` font-weight: 800; cursor: pointer; transition: background-color 0.2s ease, transform 0.2s ease; + margin-top: -1.55rem; + margin-bottom: 1.5rem; &:hover { background-color: #e8ebf2; @@ -217,8 +225,9 @@ export const BackButton = styled.button` export const SaveButton = styled.button` width: min(100%, 18rem); + margin-top: -1.55rem; min-width: 13rem; - height: 3.55rem; + height: 3.25rem; border: none; border-radius: 0.85rem; background-color: #1976e8; From 8537f4d636b45ad138583029b29c2d5ec05880e1 Mon Sep 17 00:00:00 2001 From: kwontaeyeon0310 Date: Thu, 4 Jun 2026 18:00:33 +0900 Subject: [PATCH 2/2] fix: my-page --- src/widgets/my-page/personal-info/style.ts | 4 +--- src/widgets/my-page/portfolio/style.ts | 6 +++--- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/src/widgets/my-page/personal-info/style.ts b/src/widgets/my-page/personal-info/style.ts index 33028a7..4091ab5 100644 --- a/src/widgets/my-page/personal-info/style.ts +++ b/src/widgets/my-page/personal-info/style.ts @@ -4,15 +4,13 @@ export const PersonalInfoWrapper = styled.section` position: relative; width: 100%; max-width: 850px; - min-height: 15.5em; + min-height: 15.7em; padding: 1.9rem 2.3rem 2rem; background-color: #ffffff; border-radius: 1.25rem; box-shadow: 0 1.1rem 2.8rem rgba(169, 181, 205, 0.14); margin: 0 auto; margin-top: -1.65rem; - - @media (max-width: 48rem) { min-height: auto; padding: 1.5rem 1.4rem 1.75rem; diff --git a/src/widgets/my-page/portfolio/style.ts b/src/widgets/my-page/portfolio/style.ts index 3dcb42e..bb6f9b1 100644 --- a/src/widgets/my-page/portfolio/style.ts +++ b/src/widgets/my-page/portfolio/style.ts @@ -214,8 +214,8 @@ export const BackButton = styled.button` font-weight: 800; cursor: pointer; transition: background-color 0.2s ease, transform 0.2s ease; - margin-top: -1.55rem; - margin-bottom: 1.5rem; + margin-top: -1rem; + margin-bottom: 1rem; &:hover { background-color: #e8ebf2; @@ -225,7 +225,7 @@ export const BackButton = styled.button` export const SaveButton = styled.button` width: min(100%, 18rem); - margin-top: -1.55rem; + margin-top: -1rem; min-width: 13rem; height: 3.25rem; border: none;