Feat: 아이콘 활용 방식 수정 & HomePage 구현

src/components/Header/Header.jsx

@@ -1,14 +1,15 @@
 import React from 'react';
 import * as S from './Header.style';
 import { Link } from 'react-router-dom';
-import logo from '../../icons/logo.svg';
+// import logo from '../../icons/logo.svg';
+import Icon from '../Icon/Icon';
 
-export default function Header() {
+export default function Header({ fill }) {
   return (
     <S.Header>
       <Link to='/home'>
         <S.LogoWrapper>
-          <img src={logo} alt='로고 이미지' />
+          <Icon id='logo' fill={fill} />
         </S.LogoWrapper>
       </Link>
     </S.Header>

src/components/Header/Header.style.jsx

@@ -3,13 +3,12 @@ import styled from '@emotion/styled';
 export const Header = styled.div`
   display: flex;
   justify-content: center;
-  padding-bottom: 14px;
+  align-items: center;
+  height: 76px;
 `;
 
 export const LogoWrapper = styled.div`
-  padding: 10px;
-
-  img {
-    height: 100%;
-  }
+  display: flex;
+  width: 78px;
+  height: 22px;
 `;

src/components/Icon/Icon.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import iconSvg from '../../assets/icon.svg';
+
+export default function Icon({ id, fill, ...props }) {
+  return (
+    <svg {...props}>
+      <use href={`${iconSvg}#${id}`} fill={fill} />
+    </svg>
+  );
+}

src/constants/onboarding.js

@@ -1,6 +1,6 @@
-import illust1 from '../imgs/onboarding_1.svg';
-import illust2 from '../imgs/onboarding_2.svg';
-import illust3 from '../imgs/onboarding_3.svg';
+import illust1 from '../assets/imgs/onboarding_1.svg';
+import illust2 from '../assets/imgs/onboarding_2.svg';
+import illust3 from '../assets/imgs/onboarding_3.svg';
 import step1 from '../icons/step_1.svg';
 import step2 from '../icons/step_2.svg';
 import step3 from '../icons/step_3.svg';

src/pages/HomePage/HomePage.jsx

@@ -1,12 +1,54 @@
 import * as S from './HomePage.style';
-import { Header, TabBar } from '../../components';
-
+import { Header, SearchBar, TabBar } from '../../components';
+import Icon from '../../components/Icon/Icon';
 export default function HomePage() {
   return (
     <>
       <S.HomePage>
-        <Header />
-        <S.Container>홈페이지</S.Container>
+        <S.Top>
+          <Header fill='#fff' />
+          <SearchBar />
+          <S.CardListTitle>
+            <p>내 명함</p>
+            <p>나의 명함 확인 및 관리하기</p>
+          </S.CardListTitle>
+          <S.MyCard>
+            <S.ProfileImg></S.ProfileImg>
+            <S.ProfileText>
+              <S.Name>김은지</S.Name>
+              <S.Team>WELLET Corp.</S.Team>
+              <S.ExtraInfo>
+                <p>TEL</p>
+                <p>+82-10-1234-5678</p>
+              </S.ExtraInfo>
+              <S.ExtraInfo>
+                <p>EMAIL</p>
+                <p>[email protected]</p>
+              </S.ExtraInfo>
+              <S.ExtraInfo>
+                <p>ADRESS</p>
+                <p>서울시 강남구 테헤란로 134</p>
+              </S.ExtraInfo>
+            </S.ProfileText>
+            <S.MoreOption>
+              <Icon id='dot3' fill='#2D29FF' />
+            </S.MoreOption>
+          </S.MyCard>
+          <S.UpDownBar />
+        </S.Top>
+        <S.Container>
+          <S.CardListTitle>
+            <p style={{ color: '#000' }}>둘러보기</p>
+            <p style={{ color: '#555' }}>등록된 명함 찾아보기</p>
+          </S.CardListTitle>
+          <S.ListOpiton>
+            <S.ArrowBottomIcon>
+              <Icon id='arrow-bottom' />
+            </S.ArrowBottomIcon>
+            <S.Filter>최근 등록 순</S.Filter>
+            <S.AddGroup>그룹 추가</S.AddGroup>
+          </S.ListOpiton>
+        </S.Container>
       </S.HomePage>
       <TabBar />
     </>

src/pages/HomePage/HomePage.style.jsx

@@ -1,9 +1,123 @@
 import styled from '@emotion/styled';
 
-export const HomePage = styled.div`
+export const HomePage = styled.div``;
+
+export const Top = styled.div`
+  padding: 0 20px;
+  height: 348px;
+  border-radius: 0px 0px 20px 20px;
+  background: linear-gradient(153deg, #2d29ff 16.96%, #721cff 124.87%);
+`;
+
+export const CardListTitle = styled.div`
+  display: flex;
+  color: #fff;
+  gap: 4px;
+  padding: 4px 0 10px 0;
+  /* border: 1px solid red; */
+
+  p:nth-of-type(1) {
+    font-size: 14px;
+  }
+
+  p:nth-of-type(2) {
+    font-size: 9px;
+    display: flex;
+    align-items: end;
+  }
+`;
+
+export const MyCard = styled.div`
   padding: 20px;
+  border-radius: 20px;
+  background: #fff;
+  display: flex;
+  height: 155px;
+`;
+
+export const ProfileImg = styled.div`
+  width: 68px;
+  height: 68px;
+  border-radius: 67.574px;
+  border: 1px solid gray;
+`;
+
+export const ProfileText = styled.div`
+  padding-left: 15px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+`;
+
+export const Name = styled.div`
+  font-size: 16px;
+  font-weight: 600;
+  padding: 3px 0;
+`;
+
+export const Team = styled.div`
+  font-size: 11px;
+  font-weight: 400;
+  padding-bottom: 15px;
+`;
+
+export const ExtraInfo = styled.div`
+  display: flex;
+  gap: 4px;
+  padding: 2px 0;
+
+  p:nth-of-type(1) {
+    font-size: 9px;
+    font-weight: 600;
+  }
+
+  p:nth-of-type(2) {
+    font-size: 9px;
+    font-weight: 400;
+  }
+`;
+
+export const MoreOption = styled.div`
+  display: flex;
+  width: 16px;
+  height: 30px;
+  justify-content: end;
+  margin-left: auto;
+  padding-top: 18px;
+`;
+
+export const UpDownBar = styled.div`
+  margin: 0 124px;
+  height: 5px;
+  border-radius: 4px;
+  background: #8776ff;
 `;
 
 export const Container = styled.div`
+  padding: 20px;
   background-color: gray;
 `;
+
+export const ListOpiton = styled.div`
+  border: 1px solid red;
+  display: flex;
+  align-items: center;
+`;
+
+export const ArrowBottomIcon = styled.div`
+  display: flex;
+  width: 10px;
+  height: 10px;
+`;
+
+export const Filter = styled.p`
+  display: flex;
+  padding-left: 4px;
+  font-size: 9px;
+  color: #555;
+`;
+
+export const AddGroup = styled.p`
+  border: 1px solid red;
+  margin-left: auto;
+`;