feature: 프로필 페이지 반응형 디자인 제작

- 갤럭시 Fold에서 적절하게 보이도록 미디어 쿼리 사용
coffee-meet · Nov 10, 2023 · 1032f26 · 1032f26
1 parent 8249a88
commit 1032f26
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 1 deletion.
diff --git a/src/components/common/Buttons/IconButton/InterestButton.tsx b/src/components/common/Buttons/IconButton/InterestButton.tsx
@@ -38,7 +38,6 @@ const InterestButton = ({ nickName, interests, isDarkMode }: InterestButtonProps
           display: 'flex',
           justifyContent: 'center',
           alignItems: 'center',
-          margin: '18px 33px 18px 14px',
         }}
       >
         <RiStarFill

diff --git a/src/components/common/Buttons/IconButton/index.tsx b/src/components/common/Buttons/IconButton/index.tsx
@@ -46,6 +46,11 @@ export const StyledIconWrapper = styled.div<{
   display: flex;
   justify-content: center;
   align-items: center;
+  margin: 18px 33px 18px 14px;
+
+  @media (max-width: 280px) {
+    margin: 18px 14px 18px 14px;
+  }
 `
 
 export { InterestButton, KakaoButton, NaverButton, ParticularTopicButton, RandomMatchingButton }
diff --git a/src/pages/profile/ProfileDefault.tsx b/src/pages/profile/ProfileDefault.tsx
@@ -223,6 +223,10 @@ const StyledProfilePrimaryInfoTextWrapper = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: space-around;
+
+  @media (max-width: 280px) {
+    margin-left: 10px;
+  }
 `
 
 const StyledProfilePageContentCard = styled.div<{