[선물홈 세부 페이지] 친구 등록, 2030 세부 페이지 UI 구현

src/components/common/MiniTimer/MiniTimer.styled.ts

@@ -0,0 +1,23 @@
+import styled from 'styled-components';
+
+export const MiniTimerWrapper = styled.div`
+  width: 10.3rem;
+  height: 2.7rem;
+
+  padding: 0.3rem 1rem;
+  margin: 2.2rem 0 1.2rem 0;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  column-gap: 0.4rem;
+
+  border-radius: 1.4rem;
+  background: ${({ theme }) => theme.colors.G_01};
+`;
+
+export const MiniTimerNumbers = styled.span`
+  ${({ theme }) => theme.fonts.body_09};
+  color: ${({ theme }) => theme.colors.P_06};
+`;

src/components/common/MiniTimer/MiniTimer.tsx

@@ -0,0 +1,15 @@
+import * as S from './MiniTimer.styled';
+
+interface MiniTimerProps {
+  time: string;
+}
+
+function MiniTimer({ time }: MiniTimerProps) {
+  return (
+    <S.MiniTimerWrapper>
+      <S.MiniTimerNumbers>{time}</S.MiniTimerNumbers>
+    </S.MiniTimerWrapper>
+  );
+}
+
+export default MiniTimer;

src/pages/GiftAddPage/GiftAddPage.tsx

@@ -0,0 +1,7 @@
+import * as S from './GiftAddPage.styled';
+
+function GiftAddPage() {
+  return <S.GiftAddPageWrapper></S.GiftAddPageWrapper>;
+}
+
+export default GiftAddPage;

src/pages/GiftHomeDetail/GiftHomeDetail.styled.ts

@@ -0,0 +1,62 @@
+import styled from 'styled-components';
+
+export const GiftHomeDetailPageWrapper = styled.div`
+  width: 100%;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  background-color: ${({ theme }) => theme.colors.white};
+`;
+
+export const GiftHomeDetailWrapper = styled.div`
+  width: 100%;
+  padding: 0 2rem;
+
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+`;
+
+export const GiftsItemWrapper = styled.div`
+  width: 16rem;
+  height: 25.7rem;
+  padding: 0;
+
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+`;
+
+export const GiftsItemImage = styled.img`
+  width: 16rem;
+  height: 16rem;
+
+  border-radius: 1rem;
+  background-color: ${({ theme }) => theme.colors.G_03};
+  border: 1px solid ${({ theme }) => theme.colors.G_02};
+`;
+
+export const GiftsItemTitle = styled.p`
+  display: -webkit-box;
+  width: 12.8rem;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+
+  ${({ theme }) => theme.fonts.body_09};
+  overflow: hidden;
+  color: ${({ theme }) => theme.colors.black};
+  text-overflow: ellipsis;
+  text-align: left;
+`;
+
+export const GiftsItemPrice = styled.span`
+  ${({ theme }) => theme.fonts.body_07};
+  color: ${({ theme }) => theme.colors.black};
+`;
+
+export const GiftsItemUser = styled.span`
+  ${({ theme }) => theme.fonts.caption_02};
+  color: ${({ theme }) => theme.colors.G_08};
+`;

src/pages/GiftHomeDetail/GiftHomeDetail2030.tsx

@@ -0,0 +1,43 @@
+import * as S from './GiftHomeDetail.styled';
+import MiniTimer from '../../components/common/MiniTimer/MiniTimer';
+
+function GiftHomeDetail() {
+  const price = 42000;
+  const name = '왕호은';
+  const time = '00:00:00';
+
+  return (
+    <S.GiftHomeDetailPageWrapper>
+      {/* 공통 헤더 추가 예정 */}
+      <MiniTimer time={time} />
+      <S.GiftHomeDetailWrapper>
+        <S.GiftsItemWrapper>
+          <S.GiftsItemImage></S.GiftsItemImage>
+          <S.GiftsItemTitle>어센틱 로고 후디 멜란지 그레이</S.GiftsItemTitle>
+          <S.GiftsItemPrice>{price}원</S.GiftsItemPrice>
+          <S.GiftsItemUser>{name}</S.GiftsItemUser>
+        </S.GiftsItemWrapper>
+        <S.GiftsItemWrapper>
+          <S.GiftsItemImage></S.GiftsItemImage>
+          <S.GiftsItemTitle>어센틱 로고 후디 멜란지 그레이</S.GiftsItemTitle>
+          <S.GiftsItemPrice>{price}원</S.GiftsItemPrice>
+          <S.GiftsItemUser>{name}</S.GiftsItemUser>
+        </S.GiftsItemWrapper>
+        <S.GiftsItemWrapper>
+          <S.GiftsItemImage></S.GiftsItemImage>
+          <S.GiftsItemTitle>어센틱 로고 후디 멜란지 그레이</S.GiftsItemTitle>
+          <S.GiftsItemPrice>{price}원</S.GiftsItemPrice>
+          <S.GiftsItemUser>{name}</S.GiftsItemUser>
+        </S.GiftsItemWrapper>
+        <S.GiftsItemWrapper>
+          <S.GiftsItemImage></S.GiftsItemImage>
+          <S.GiftsItemTitle>어센틱 로고 후디 멜란지 그레이</S.GiftsItemTitle>
+          <S.GiftsItemPrice>{price}원</S.GiftsItemPrice>
+          <S.GiftsItemUser>{name}</S.GiftsItemUser>
+        </S.GiftsItemWrapper>
+      </S.GiftHomeDetailWrapper>
+    </S.GiftHomeDetailPageWrapper>
+  );
+}
+
+export default GiftHomeDetail;

src/pages/GiftHomeDetail/GiftHomeDetailFriends.tsx

@@ -0,0 +1,52 @@
+import * as S from './GiftHomeDetail.styled';
+import MiniTimer from '../../components/common/MiniTimer/MiniTimer';
+
+function GiftHomeDetail() {
+  const price = 42000;
+  const name = '왕호은';
+  const people = 3;
+  const time = '00:00:00';
+
+  return (
+    <S.GiftHomeDetailPageWrapper>
+      {/* 공통 헤더 추가 예정 */}
+      <MiniTimer time={time} />
+      <S.GiftHomeDetailWrapper>
+        <S.GiftsItemWrapper>
+          <S.GiftsItemImage></S.GiftsItemImage>
+          <S.GiftsItemTitle>어센틱 로고 후디 멜란지 그레이</S.GiftsItemTitle>
+          <S.GiftsItemPrice>{price}원</S.GiftsItemPrice>
+          <S.GiftsItemUser>
+            {name} | 인당 {Math.floor(price / people)}원
+          </S.GiftsItemUser>
+        </S.GiftsItemWrapper>
+        <S.GiftsItemWrapper>
+          <S.GiftsItemImage></S.GiftsItemImage>
+          <S.GiftsItemTitle>어센틱 로고 후디 멜란지 그레이</S.GiftsItemTitle>
+          <S.GiftsItemPrice>{price}원</S.GiftsItemPrice>
+          <S.GiftsItemUser>
+            {name} | 인당 {Math.floor(price / people)}원
+          </S.GiftsItemUser>
+        </S.GiftsItemWrapper>
+        <S.GiftsItemWrapper>
+          <S.GiftsItemImage></S.GiftsItemImage>
+          <S.GiftsItemTitle>어센틱 로고 후디 멜란지 그레이</S.GiftsItemTitle>
+          <S.GiftsItemPrice>{price}원</S.GiftsItemPrice>
+          <S.GiftsItemUser>
+            {name} | 인당 {Math.floor(price / people)}원
+          </S.GiftsItemUser>
+        </S.GiftsItemWrapper>
+        <S.GiftsItemWrapper>
+          <S.GiftsItemImage></S.GiftsItemImage>
+          <S.GiftsItemTitle>어센틱 로고 후디 멜란지 그레이</S.GiftsItemTitle>
+          <S.GiftsItemPrice>{price}원</S.GiftsItemPrice>
+          <S.GiftsItemUser>
+            {name} | 인당 {Math.floor(price / people)}원
+          </S.GiftsItemUser>
+        </S.GiftsItemWrapper>
+      </S.GiftHomeDetailWrapper>
+    </S.GiftHomeDetailPageWrapper>
+  );
+}
+
+export default GiftHomeDetail;

src/router/Router.tsx

@@ -2,6 +2,8 @@ import { createBrowserRouter } from 'react-router-dom';
 import Main from '../pages/Main';
 import Mypage from '../pages/Mypage';
 import Layout from '../layouts/Layout';
+import GiftHomeDetailFriends from '../pages/GiftHomeDetail/GiftHomeDetailFriends';
+import GiftHomeDetail2030 from '../pages/GiftHomeDetail/GiftHomeDetail2030';
 
 const router = createBrowserRouter([
   {
@@ -16,6 +18,16 @@ const router = createBrowserRouter([
         path: '/mypage',
         element: <Mypage />,
       },
+      {
+        // 임의로 세부페이지 추가
+        path: '/giftdetailfriends',
+        element: <GiftHomeDetailFriends />,
+      },
+      {
+        // 임의로 세부페이지 추가
+        path: '/giftdetail2030',
+        element: <GiftHomeDetail2030 />,
+      },
     ],
   },
 ]);

src/style/GlobalStyle.ts

@@ -24,6 +24,7 @@ ${reset}
     scrollbar-width: none; /* 파이어폭스 스크롤바 숨김 */
 
     margin: 0 auto;
+    padding:0;
     font-size: 62.5%;
     -ms-overflow-style: none; /* 인터넷 익스플로러  스크롤바 숨김 */
     scrollbar-width: none; /* 파이어폭스 스크롤바 숨김 */