[Design] #20 홈페이지 디자인

src/components/Button/ActionButton.ts

@@ -1,4 +1,4 @@
-import styled, { BrandColors, GrayscaleColors, Typography } from 'styled-components'
+import styled, { BrandColors, FontWeight, GrayscaleColors, Typography } from 'styled-components'
 
 type BgColorType =
   | Extract<keyof BrandColors, 'default' | 'lighten_2'>
@@ -7,6 +7,7 @@ type BgColorType =
 type ActionButtonProps = {
   $bgColor?: BgColorType
   $type?: 'roundedRect' | 'semiRoundedRect' | 'capsule'
+  $fontWeight?: FontWeight
 }
 
 type ActionButtonStyles = {
@@ -49,4 +50,5 @@ export const ActionButton = styled.button<ActionButtonProps>`
   padding: ${({ $type = 'capsule' }) => ACTION_BUTTON_STYLES[$type]?.padding};
   border-radius: ${({ $type = 'capsule' }) => ACTION_BUTTON_STYLES[$type]?.borderRadius};
   font-size: ${({ theme, $type = 'capsule' }) => theme.typography[ACTION_BUTTON_STYLES[$type]?.fontSize]};
+  font-weight: ${({ $fontWeight }) => $fontWeight};
 `

src/components/Separator.ts

@@ -0,0 +1,8 @@
+import { styled } from 'styled-components'
+
+export const Separator = styled.hr`
+  border: none;
+  width: 1px;
+  height: 20px;
+  background-color: ${({ theme }) => theme.colors.grayscale.gc_1};
+`

src/components/Typo/index.ts

@@ -1,12 +1,16 @@
-import { FontWeight, GrayscaleColors, styled } from 'styled-components'
+import { BrandColors, FontWeight, GrayscaleColors, styled } from 'styled-components'
 
 type TypoProps = {
-  color?: keyof GrayscaleColors
+  color?: keyof GrayscaleColors | keyof BrandColors
   weight?: FontWeight
 }
 
 const Typo = styled.p<TypoProps>`
-  color: ${({ color }) => (color ? color : 'inherit')};
+  color: ${({ theme, color }) =>
+    theme.colors.grayscale[color as keyof GrayscaleColors] ||
+    theme.colors.brand[color as keyof BrandColors] ||
+    'inherit'};
+
   font-weight: ${({ weight }) => (weight ? weight : 400)};
 `
 

src/constants/layout.ts

@@ -1 +1,2 @@
+export const FOOTER_HEIGHT = 56
 export const HEADER_HEIGHT = 56

src/pages/HomePage/index.tsx

@@ -1,5 +1,11 @@
 import * as S from './styles'
 import { Helmet } from 'react-helmet-async'
+import { GoBell } from 'react-icons/go'
+import { Typo14, Typo17, Typo24 } from '~components/Typo'
+import { LuClock5 } from 'react-icons/lu'
+import { Separator } from '~components/Separator'
+import { ActionButton } from '~components/Button/ActionButton'
+import { GrLocation } from 'react-icons/gr'
 
 export default function HomePage() {
   return (
@@ -8,7 +14,52 @@ export default function HomePage() {
         <title>DDang | 반려견 산책 서비스</title>
         <meta name='description' content='반려견과 함께하는 즐거운 산책, DDang.' />
       </Helmet>
-      HomePage
+
+      <S.Header>
+        <S.ProfileImgWrapper>
+          <S.ProfileImg src='test.svg' />
+        </S.ProfileImgWrapper>
+        <GoBell cursor='pointer' size={28} />
+      </S.Header>
+
+      <S.Visual>
+        <Typo24 weight='700'>오늘은 아빠랑</Typo24>
+        <Typo24 weight='700'>산책가는 날!</Typo24>
+      </S.Visual>
+
+      <S.CharacterWrapper>
+        <S.Character />
+      </S.CharacterWrapper>
+
+      <S.WalkInfoArea>
+        <Typo17 weight='700'>
+          오늘 밤톨이가&nbsp;
+          <Typo17 as='span' weight='700' color='default'>
+            1,293
+          </Typo17>
+          kcal 소비했어요!
+        </Typo17>
+        <S.WalkInfoWrapper>
+          <S.WalkTime>
+            <LuClock5 style={{ marginRight: 6 }} size={18} />
+            <Typo14 weight='700'>산책 시간&nbsp;</Typo14>
+            <Typo14 color='default' weight='700'>
+              1시간
+            </Typo14>
+          </S.WalkTime>
+          <Separator />
+          <S.WalkDistance>
+            <GrLocation style={{ marginRight: 6 }} size={18} />
+            <Typo14 weight='700'>산책한 거리&nbsp;</Typo14>{' '}
+            <Typo14 as='span' color='default' weight='700'>
+              3km
+            </Typo14>
+          </S.WalkDistance>
+        </S.WalkInfoWrapper>
+      </S.WalkInfoArea>
+      <ActionButton $fontWeight='700' $type='roundedRect'>
+        산책 시작하기
+      </ActionButton>
     </S.HomePage>
   )
 }

src/pages/HomePage/styles.ts

@@ -1,3 +1,73 @@
 import { styled } from 'styled-components'
+import { Box } from '~components/Box'
+import { FOOTER_HEIGHT } from '~constants/layout'
 
-export const HomePage = styled.div``
+export const HomePage = styled.div`
+  padding: 0 20px 31px 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: calc(100dvh - ${FOOTER_HEIGHT}px);
+`
+
+export const ProfileImgWrapper = styled.div`
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  overflow: hidden;
+`
+
+export const ProfileImg = styled.img`
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
+  cursor: pointer;
+`
+export const Header = styled.header`
+  padding: 12px 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`
+
+export const Visual = styled.div`
+  margin-top: 24px;
+  text-align: center;
+`
+export const CharacterWrapper = styled.div`
+  margin: 8px auto 0;
+  width: 240px;
+  height: 240px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`
+export const Character = styled.div`
+  width: 148px;
+  height: 148px;
+  background-color: ${({ theme }) => theme.colors.brand.lighten_1};
+  border-radius: 50%;
+`
+export const WalkInfoArea = styled(Box)`
+  padding: 20px 24px;
+`
+export const WalkInfoWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 20px;
+  gap: 6px;
+  padding: 0 6px;
+`
+export const WalkTime = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`
+
+export const WalkDistance = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`