[마이페이지] style qa를 위한 변경 사항

src/assets/svg/index.ts

@@ -1,3 +1,4 @@
+export { default as MypageBackground } from './MypageBackground';
 export { default as GradientCta } from './GradientCta';
 export { default as HomeBackground } from './HomeBackground';
 export { default as Step1 } from './Step1';
@@ -76,7 +77,6 @@ export { default as LongDivider } from './LongDivider';
 export { default as Main03 } from './Main03';
 export { default as Main04 } from './Main04';
 export { default as Main02 } from './Main02';
-export { default as MypageImage } from './MypageImage';
 export { default as Person1 } from './Person1';
 export { default as Person2 } from './Person2';
 export { default as Person3 } from './Person3';

src/components/CardRoom/CardRoom.style.ts

@@ -6,6 +6,14 @@ export const WholeWrapper = styled.div`
   z-index: 0;
 `;
 
+export const RoomImgWrapper = styled.img`
+  ${({ theme: { mixin } }) => mixin.flexBox({})};
+  width: 100%;
+  height: 16rem;
+  overflow: hidden;
+  object-fit: cover;
+`;
+
 export const CardRoomWrapper = styled.div`
   ${({ theme: { mixin } }) => mixin.flexBox({ direction: 'column' })};
 

src/components/CardRoom/DoneCardRoom.tsx

@@ -10,11 +10,18 @@ interface DoneCardRoomType {
 }
 
 const DoneCardRoom = ({ user, srcImage, userCount, onClick }: DoneCardRoomType) => {
+  const multiline = user.length > 3 || (/[a-zA-Z]/.test(user) && user.length > 5);
   return (
     <S.CardRoomWrapper onClick={onClick}>
-      <img src={srcImage} />
+      <S.RoomImgWrapper src={srcImage} />
       <S.Text>
-        <S.User>{user}님</S.User>을 위한 선물방
+        {multiline ? (
+          <>
+            <S.User>{user}님</S.User>을 위한 선물방
+          </>
+        ) : (
+          <S.User>{user}님을 위한 선물방</S.User>
+        )}
       </S.Text>
       <S.CountUser>
         <IcUser style={{ width: '1.6rem', height: '1.6rem', color: '#ACA7A9' }} />

src/components/CardRoom/EditCardRoom.tsx

@@ -21,12 +21,19 @@ const EditCardRoom = ({ user, srcImage, userCount, roomId, date, onClick }: Edit
   const handleSettingIcon = () => {
     navigate(`/editpage/${roomId}`);
   };
+  const multiline = user.length > 3 || (/[a-zA-Z]/.test(user) && user.length > 5);
   return (
     <S.WholeWrapper>
       <S.CardRoomWrapper onClick={onClick}>
-        <img src={srcImage} />
+        <S.RoomImgWrapper src={srcImage} />
         <S.Text>
-          <S.User>{user}님</S.User>을 위한 선물방
+          {multiline ? (
+            <>
+              <S.User>{user}님</S.User>을 위한 선물방
+            </>
+          ) : (
+            <S.User>{user}님을 위한 선물방</S.User>
+          )}
         </S.Text>
         <S.CountUser>
           <IcUser

src/components/CardRoom/ProgressCardRoom.tsx

@@ -14,11 +14,19 @@ interface ProgressCardRoomType {
 
 const ProgressCardRoom = ({ user, srcImage, userCount, date, onClick }: ProgressCardRoomType) => {
   const isFuture = DateCheck({ date: date });
+  const multiline = user.length > 3 || (/[a-zA-Z]/.test(user) && user.length > 5);
+
   return (
     <S.CardRoomWrapper onClick={onClick}>
-      <img src={srcImage} />
+      <S.RoomImgWrapper src={srcImage} />
       <S.Text>
-        <S.User>{user}님</S.User>을 위한 선물방
+        {multiline ? (
+          <>
+            <S.User>{user}님</S.User>을 위한 선물방
+          </>
+        ) : (
+          <S.User>{user}님을 위한 선물방</S.User>
+        )}
       </S.Text>
       <S.CountUser>
         <IcUser

src/components/HomeMypageHeader/HomeMypageHeader.style.ts

@@ -5,11 +5,9 @@ export const HomeMypageHeaderWrapper = styled.div`
   position: fixed;
   width: 100%;
   height: 5.6rem;
-  gap: 1.6rem;
   padding: 0 1.8rem;
   z-index: 999;
   top: 0rem;
-  background-color: #fafafa;
 `;
 
 export const UserProfileImg = styled.img`

src/components/HomeMypageHeader/HomeMypageHeader.tsx

@@ -1,10 +1,25 @@
 import { IcProfile, IcHome } from '../../assets/svg';
 import { useNavigate } from 'react-router';
 import * as S from './HomeMypageHeader.style';
+import { useEffect, useState } from 'react';
 
 const HomeMypageHeader = () => {
   const navigate = useNavigate();
   const userImg = localStorage.getItem('EXIT_USER_PROFILE_IMAGE');
+  const [isTop, setIsTop] = useState(true);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+      setIsTop(scrollTop === 0);
+    };
+
+    window.addEventListener('scroll', handleScroll);
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, []); // 처음 한 번만 실행
 
   const handleMyPageIcon = () => {
     navigate(`/mypage`);
@@ -14,8 +29,8 @@ const HomeMypageHeader = () => {
   };
 
   return (
-    <S.HomeMypageHeaderWrapper>
-      <IcHome style={{ width: '2.4rem' }} onClick={handleSettingHomeIcon} />
+    <S.HomeMypageHeaderWrapper style={{ backgroundColor: isTop ? 'transparent' : 'white' }}>
+      <IcHome style={{ width: '4.3rem' }} onClick={handleSettingHomeIcon} />
       {userImg ? (
         <S.UserProfileImg src={userImg} onClick={handleMyPageIcon} />
       ) : (

src/pages/MyPage/EditRoom/EditRoom.style.ts

@@ -18,7 +18,7 @@ export const TextWrapper = styled.div`
 
 export const Text = styled.div`
   ${({ theme: { fonts } }) => fonts.heading_01};
-  > p {
+  > span {
     color: ${({ theme: { colors } }) => colors.P_06};
   }
 `;

src/pages/MyPage/EditRoom/EditRoom.tsx

@@ -19,7 +19,9 @@ const EditRoom = () => {
     <S.EditRoomWrapper>
       <DetailHeader />
       <S.TextWrapper>
-        <S.Text>{roomGifteeData?.gifterNumber || 0}명이</S.Text>
+        <S.Text>
+          <span>{roomGifteeData?.gifterNumber || 0}명</span>이
+        </S.Text>
         <S.Text>{roomGifteeData?.gifteeName || ''}님을 위한</S.Text>
         <S.Text>선물을 준비하고 있어요</S.Text>
       </S.TextWrapper>

src/pages/MyPage/GiftRoomView/DoneGiftView/DoneGiftView.style.ts

@@ -1,8 +1,7 @@
 import styled from 'styled-components';
 
 export const DoneGiftViewWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
+  ${({ theme: { mixin } }) => mixin.flexBox({ direction: 'column' })};
   width: 100%;
 `;
 

src/pages/MyPage/GiftRoomView/ProgressGiftView/ProgressGiftView.style.ts

@@ -1,8 +1,7 @@
 import styled from 'styled-components';
 
 export const ProgressGiftViewWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
+  ${({ theme: { mixin } }) => mixin.flexBox({ direction: 'column' })};
   width: 100%;
 `;
 

src/pages/MyPage/MyPage.style.ts

@@ -1,29 +1,24 @@
 import styled from 'styled-components';
-import BackgroundImage from '../../assets/img/mypage_background.png';
+import { MypageBackground } from '../../assets/svg';
 
 export const MyPageWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
+  ${({ theme: { mixin } }) => mixin.flexCenter({})};
   width: 100%;
-  height: 100%;
 `;
 
-export const TopImage = styled.div`
+export const TopImage = styled(MypageBackground)`
+  ${({ theme: { mixin } }) => mixin.flexBox({})};
   position: relative;
-  width: 37.5rem;
-  height: 34rem;
-  flex-shrink: 0;
-  top: 5rem;
-
-  background-image: url(${BackgroundImage});
-  background-size: contain;
-  z-index: 0;
-  margin: 0;
+  top: 0rem;
+  margin-bottom: 2rem;
 `;
 export const UserName = styled.div`
-  ${({ theme: { mixin } }) => mixin.flexBox({ align: 'center' })};
+  ${({ theme: { mixin } }) => mixin.flexBox({ align: 'center', justify: 'center' })};
 
   ${({ theme: { fonts } }) => fonts.heading_03};
+  > span {
+    color: ${({ theme: { colors } }) => colors.P_06};
+  }
 `;
 export const User = styled.div`
   ${({ theme: { fonts } }) => fonts.heading_01};
@@ -36,7 +31,6 @@ export const UserButtonWrapper = styled.div`
 `;
 export const UserWrapper = styled.div`
   ${({ theme: { mixin } }) => mixin.flexBox({ align: 'center' })};
-  width: 100%;
   gap: 1.2rem;
 `;
 export const ProfileWrapper = styled.div`
@@ -50,8 +44,7 @@ export const ProfileWrapper = styled.div`
   border: 1px solid rgba(255, 255, 255, 0.4);
   padding: 0 1.6rem;
   gap: 1.6rem;
-  top: 19rem;
-  left: 1.7rem;
+  top: 15rem;
 
   z-index: 8;
 
@@ -62,15 +55,16 @@ export const GiftRoomWrapper = styled.div`
   ${({ theme: { mixin } }) =>
     mixin.flexBox({ direction: 'column', align: 'center', justify: 'center' })};
   background-color: white;
-  width: 100%;
   position: relative;
-  top: -5rem;
+  top: -7rem;
   padding-top: 4rem;
+  width: 37.5rem;
 `;
 
 export const NoneText = styled.div`
   ${({ theme: { mixin } }) => mixin.flexCenter({})};
   height: 32.7rem;
+  width: 37.5rem;
   color: ${({ theme: { colors } }) => colors.G_07};
   ${({ theme: { fonts } }) => fonts.body_07};
 `;

src/pages/MyPage/MyPage.tsx

@@ -41,7 +41,11 @@ const MyPage = () => {
       userName && userName.length > MAX_USERNAME_LENGTH
         ? `${userName.substring(0, MAX_USERNAME_LENGTH)}...`
         : userName;
-    return <S.UserName>{translatedUserName}님</S.UserName>;
+    return (
+      <S.UserName>
+        <span>{translatedUserName} </span>님
+      </S.UserName>
+    );
   };
 
   return (