Feat: HomePage 1차 작업 및 스타일링

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;
+`;