[선물방 메인] 2차 QA 스타일 수정

src/components/GiftAdd/GiftAddButtons/GiftAddButtonsWrapper.tsx

@@ -36,7 +36,7 @@ const GiftAddButtonsWrapper = ({ data, onCancelClick }: GiftAddButtonsProps) =>
       <S.GiftsItemImage src={imageUrl} />
       <S.GiftsItemTitle>{data.name}</S.GiftsItemTitle>
       <S.GiftsItemPrice>
-        <GiftHomePriceTag price={data.cost} fonts={'body_09'} />
+        <GiftHomePriceTag price={data.cost} fonts={'body_09'} gap={0} colors={'G_10'} />
       </S.GiftsItemPrice>
     </S.GiftsItemWrapper>
   );

src/components/GiftHome/GiftHome2030Gifts/GiftHome2030Item.tsx

@@ -14,7 +14,7 @@ const GiftHome2030Item = ({ imgUrl, title, price, url }: GiftHome2030ItemProps)
       <S.GiftsItemImage src={imgUrl} />
       <S.GiftsItemTitle>{title}</S.GiftsItemTitle>
       <S.GiftsItemPrice>
-        <GiftHomePriceTag price={price} fonts={'body_09'} />
+        <GiftHomePriceTag gap={0.1} colors={'black'} price={price} fonts={'body_09'} />
       </S.GiftsItemPrice>
     </S.GiftsItemWrapper>
   );

src/components/GiftHome/GiftHomeFriendsGifts/GiftHomeFriendsItem.tsx

@@ -15,7 +15,7 @@ const GiftHomeFriendsItem = ({ imgUrl, title, price, user, url }: GiftHomeFriend
       <S.GiftsItemImage src={imgUrl} />
       <S.GiftsItemTitle>{title}</S.GiftsItemTitle>
       <S.GiftsItemPrice>
-        <GiftHomePriceTag price={price} fonts={'body_09'} />
+        <GiftHomePriceTag gap={0.1} colors={'black'} price={price} fonts={'body_09'} />
       </S.GiftsItemPrice>
       <S.GiftsItemUser>{user}</S.GiftsItemUser>
     </S.GiftsItemWrapper>

src/components/GiftHome/GiftHomeMyGifts/GiftHomeMyGiftsItem.style.ts

@@ -2,10 +2,10 @@ import styled from 'styled-components';
 
 export const GiftHomeMyGifts = styled.div`
   display: flex;
-  align-items: center;
   margin-bottom: 1.2rem;
 
   height: 7rem;
+
   img {
     width: 7rem;
     height: 7rem;
@@ -14,13 +14,25 @@ export const GiftHomeMyGifts = styled.div`
   }
 `;
 
+export const GiftHomeMygiftsImg = styled.img`
+  height: 7rem;
+  width: 7rem;
+  object-fit: cover;
+`;
+
 export const InfoWrapper = styled.div`
   display: flex;
   flex-direction: column;
+
   margin-left: 1.6rem;
+  margin-top: 1.2rem;
 `;
 
 export const Title = styled.p`
+  width: 24.9rem;
+  height: 2.1rem;
+  margin-bottom: 0.4rem;
+
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 1;

src/components/GiftHome/GiftHomeMyGifts/GiftHomeMyGiftsItem.tsx

@@ -1,4 +1,4 @@
-import PriceTag from '../../common/title/Price/PriceTag';
+import GiftHomePriceTag from '../../common/GiftHome/Price/GiftHomePriceTag';
 import * as S from './GiftHomeMyGiftsItem.style';
 
 interface GiftHomeMyGiftsItemProps {
@@ -10,10 +10,10 @@ interface GiftHomeMyGiftsItemProps {
 const GiftHomeMyGiftsItem: React.FC<GiftHomeMyGiftsItemProps> = ({ name, cost, imageUrl }) => {
   return (
     <S.GiftHomeMyGifts>
-      <img src={imageUrl} />
+      <S.GiftHomeMygiftsImg src={imageUrl} />
       <S.InfoWrapper>
         <S.Title>{name}</S.Title>
-        <PriceTag price={cost} />
+        <GiftHomePriceTag price={cost} fonts='body_09' colors='G_10' gap={0} />
       </S.InfoWrapper>
     </S.GiftHomeMyGifts>
   );

src/components/GiftHome/GiftHomeSummary/GiftHomeSummary.styled.ts

@@ -14,7 +14,7 @@ export const GiftHomeSummaryWrapper = styled.section`
   background-image: url(${HomeBackgroundImage});
   background-size: cover;
   background-repeat: no-repeat;
-  width: calc(100% + 1.4rem);
+  /* width: calc(100% + 1.4rem); */
 `;
 
 export const FriendsNumber = styled.p`

src/components/GiftHome/common/GiftHomeShowcase.styled.ts

@@ -22,7 +22,6 @@ export const NoGiftsWrapper = styled.div`
 
 export const GiftsWrapper = styled.div`
   width: 36rem;
-  height: 22.5rem;
 
   display: flex;
   column-gap: 0.8rem;
@@ -31,4 +30,8 @@ export const GiftsWrapper = styled.div`
 
   color: ${({ theme }) => theme.colors.G_07};
   ${({ theme }) => theme.fonts.body_09};
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
 `;

src/components/GiftHome/common/GiftHomeShowcaseHeader/GiftHoeShowcaseHeader.style.ts

@@ -4,7 +4,7 @@ export const GiftHomeShowcaseHeaderWrapper = styled.article`
   width: 100%;
   height: 4rem;
   padding: 0 1.4rem 0 0;
-  margin-bottom: 0.7rem;
+  margin-bottom: 0.6rem;
   display: flex;
   justify-content: space-between;
   align-items: center;

src/components/GiftHome/common/GiftHomeShowcaseItem.styled.ts

@@ -22,6 +22,8 @@ export const GiftsItemImage = styled.img`
 `;
 
 export const GiftsItemTitle = styled.p`
+  margin-top: 0.8rem;
+
   display: -webkit-box;
   width: 12.8rem;
   -webkit-box-orient: vertical;
@@ -35,6 +37,7 @@ export const GiftsItemTitle = styled.p`
 `;
 
 export const GiftsItemPrice = styled.span`
+  margin-top: 0.2rem;
   ${({ theme }) => theme.fonts.body_09};
   color: ${({ theme }) => theme.colors.black};
 `;

src/components/common/GiftDetail/GiftDetailHeader.style.ts

@@ -1,13 +1,24 @@
 import styled from 'styled-components';
+import { IcLeft } from '../../../assets/svg';
 
 export const GiftDetailHeaderWrapper = styled.article`
-  width: 100%;
+  width: 37.5rem;
   height: 5.6rem;
   margin-bottom: 0.8rem;
 
   display: flex;
-  justify-content: space-between;
+  justify-content: center;
   align-items: center;
 
   ${({ theme }) => theme.fonts.body_01};
 `;
+export const IcLeftSvg = styled(IcLeft)`
+  position: absolute;
+  left: 0.6rem;
+  width: 3.6rem;
+  height: 3.6rem;
+  top: 1rem;
+
+  cursor: pointer;
+  ${({ theme }) => theme.fonts.body_01};
+`;

src/components/common/GiftDetail/GiftDetailHeader.tsx

@@ -1,29 +1,22 @@
 import { useNavigate } from 'react-router-dom';
-import { IcLeft, IcMenu } from '../../../assets/svg';
 import * as S from './GiftDetailHeader.style';
 
 interface GiftDetailHeaderProps {
   title: string;
   roomId: string;
-  // targetDate: string;
 }
 
 const GiftDetailHeader = ({ title, roomId }: GiftDetailHeaderProps) => {
   const navigate = useNavigate();
 
   const handleClickBtn = () => {
     navigate(`/gift-home/${roomId}`);
-    // navigate(-1);
   };
 
   return (
     <S.GiftDetailHeaderWrapper>
-      <IcLeft
-        style={{ width: '3.6rem', height: '3.6rem', cursor: 'pointer' }}
-        onClick={handleClickBtn}
-      />
+      <S.IcLeftSvg onClick={handleClickBtn} />
       {title}
-      <IcMenu style={{ width: '2.8rem', height: '2.8rem', cursor: 'pointer' }} />
     </S.GiftDetailHeaderWrapper>
   );
 };

src/components/common/GiftHome/Price/GiftHomePriceTag.style.ts

@@ -1,5 +1,10 @@
 import styled from 'styled-components';
 
-export const Price = styled.p<{ $fonts: string }>`
-  ${({ theme, $fonts }) => `${theme}.fonts.${$fonts}`};
+export const Price = styled.p<{ $fonts: string; $colors: string; $gap: number }>`
+  display: flex;
+  column-gap: ${({ $gap }) => $gap}rem;
+  ${({ theme, $fonts, $colors }) => `
+    ${theme.fonts[$fonts]};
+    color: ${theme.colors[$colors]};
+ `}
 `;

src/components/common/GiftHome/Price/GiftHomePriceTag.tsx

@@ -1,21 +1,23 @@
-import PropTypes from 'prop-types';
 import { Price } from './GiftHomePriceTag.style';
 
 interface PriceTagProps {
   price: number;
   fonts: string;
+  colors: string;
+  gap: number;
 }
 
-const GiftHomePriceTag: React.FC<PriceTagProps> = ({ price, fonts }) => {
+const GiftHomePriceTag = ({ price, fonts, colors, gap }: PriceTagProps) => {
   const formatPrice = (price: number) => {
     return price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
   };
 
-  return <Price $fonts={fonts}>{formatPrice(price)}원</Price>;
-};
-
-GiftHomePriceTag.propTypes = {
-  price: PropTypes.number.isRequired,
+  return (
+    <Price $fonts={fonts} $colors={colors} $gap={gap}>
+      <span>{formatPrice(price)}</span>
+      <span>원</span>
+    </Price>
+  );
 };
 
 export default GiftHomePriceTag;

src/pages/GiftHome/GiftHomeMyGifts/GiftHomeMyGifts.style.ts

@@ -2,6 +2,7 @@ import styled from 'styled-components';
 
 export const GiftHomeMyGiftsWrapper = styled.article`
   width: 100%;
+
   margin-bottom: 1.8rem;
 
   padding: 0.6rem 0.5rem 0 2rem;

src/pages/GiftHomeDetail/GiftHomeDetail.styled.ts

@@ -40,6 +40,8 @@ export const GiftsItemImage = styled.img`
 `;
 
 export const GiftsItemTitle = styled.p`
+  margin-top: 0.8rem;
+
   display: -webkit-box;
   width: 12.8rem;
   -webkit-box-orient: vertical;

src/pages/GiftHomeDetail/GiftHomeDetail.tsx

@@ -24,7 +24,7 @@ export const GiftHomeDetail = () => {
               <S.GiftsItemImage src={item.imageUrl} />
               <S.GiftsItemTitle>{item.name}</S.GiftsItemTitle>
               <S.GiftsItemPrice>
-                <GiftHomePriceTag price={item.cost} fonts={'body_07'} />
+                <GiftHomePriceTag price={item.cost} fonts={'body_07'} gap={0.1} colors={'black'} />
               </S.GiftsItemPrice>
             </S.GiftsItemWrapper>
           ))

src/pages/GiftHomeDetail/GiftHomeDetail2030.tsx

@@ -24,7 +24,7 @@ function GiftHomeDetail() {
               <S.GiftsItemImage src={item.imageUrl} />
               <S.GiftsItemTitle>{item.name}</S.GiftsItemTitle>
               <S.GiftsItemPrice>
-                <GiftHomePriceTag price={item.cost} fonts={'body_07'} />
+                <GiftHomePriceTag gap={0.1} colors={'black'} price={item.cost} fonts={'body_07'} />
               </S.GiftsItemPrice>
             </S.GiftsItemWrapper>
           ))

src/pages/GiftHomeDetail/GiftHomeDetailFriends.tsx

@@ -26,7 +26,7 @@ function GiftHomeDetailFriends() {
             <S.GiftsItemWrapper key={index} onClick={() => window.open(item.url)}>
               <S.GiftsItemImage src={item.imageUrl} />
               <S.GiftsItemTitle>{item.name}</S.GiftsItemTitle>
-              <GiftHomePriceTag price={item.cost} fonts={`body_07`} />
+              <GiftHomePriceTag gap={0.1} colors={'black'} price={item.cost} fonts={`body_07`} />
             </S.GiftsItemWrapper>
           ))
         ) : (

src/style/GlobalStyle.ts

@@ -18,17 +18,15 @@ ${reset}
  }
 
  :root {
-  --vh: 100%
+  --vh: 100%;
  }
- html {
-   over-flow-x :  hidden;
-}
-body {
-   over-flow-x :  hidden;
-}
+
+ html, body{
+  overflow-x :  hidden;
+ }
+
 #root, body, html {
     scrollbar-width: none; /* 파이어폭스 스크롤바 숨김 */
-
     margin: 0 auto;
     padding:0;
     font-size: 62.5%;