From b507f5945c7e5dd82acd7cf96b45caaff0144d09 Mon Sep 17 00:00:00 2001 From: shlee9999 <95556588+shlee9999@users.noreply.github.com> Date: Thu, 21 Nov 2024 18:29:39 +0900 Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=90=9BFix:=20Typo=20color=20=EB=A1=9C?= =?UTF-8?q?=EC=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Typo/index.ts | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/components/Typo/index.ts b/src/components/Typo/index.ts index 3346479..dd6911f 100644 --- a/src/components/Typo/index.ts +++ b/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` - 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)}; ` From 3880959ff18a1256991e950f664f0f67cb578b40 Mon Sep 17 00:00:00 2001 From: shlee9999 <95556588+shlee9999@users.noreply.github.com> Date: Thu, 21 Nov 2024 19:23:33 +0900 Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=8E=A8Design:=20HomePage?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Button/ActionButton.ts | 4 +- src/components/Separator.ts | 8 +++ src/constants/layout.ts | 1 + src/pages/HomePage/index.tsx | 53 +++++++++++++++++++- src/pages/HomePage/styles.ts | 72 ++++++++++++++++++++++++++- 5 files changed, 135 insertions(+), 3 deletions(-) create mode 100644 src/components/Separator.ts create mode 100644 src/constants/layout.ts diff --git a/src/components/Button/ActionButton.ts b/src/components/Button/ActionButton.ts index 42a144d..8b7980b 100644 --- a/src/components/Button/ActionButton.ts +++ b/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 @@ -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` 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}; ` diff --git a/src/components/Separator.ts b/src/components/Separator.ts new file mode 100644 index 0000000..395f8b7 --- /dev/null +++ b/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}; +` diff --git a/src/constants/layout.ts b/src/constants/layout.ts new file mode 100644 index 0000000..77b0a2b --- /dev/null +++ b/src/constants/layout.ts @@ -0,0 +1 @@ +export const FOOTER_HEIGHT = 56 diff --git a/src/pages/HomePage/index.tsx b/src/pages/HomePage/index.tsx index 0c4bf8d..6d29d76 100644 --- a/src/pages/HomePage/index.tsx +++ b/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() { DDang | 반려견 산책 서비스 - HomePage + + + + + + + + + + 오늘은 아빠랑 + 산책가는 날! + + + + + + + + + 오늘 밤톨이가  + + 1,293 + + kcal 소비했어요! + + + + + 산책 시간  + + 1시간 + + + + + + 산책한 거리 {' '} + + 3km + + + + + + 산책 시작하기 + ) } diff --git a/src/pages/HomePage/styles.ts b/src/pages/HomePage/styles.ts index 0bd8f2f..75fd7e2 100644 --- a/src/pages/HomePage/styles.ts +++ b/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; +`