From d1492a504dbc4af632950839a73b441a1205cd2f Mon Sep 17 00:00:00 2001 From: Leejha <57664427+Leejha@users.noreply.github.com> Date: Thu, 17 Aug 2023 22:10:47 +0900 Subject: [PATCH] =?UTF-8?q?[JR-609]=20=EB=A9=94=EC=9D=B8=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=ED=8D=BC=EB=B8=94=EB=A6=AC=EC=8B=B1=20(#1?= =?UTF-8?q?24)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: navigation typography 추가 * feat: theme 추가 사항 반영 * feat: 디자인 수정사항 반영 * feat: 메인 페이지 인기있는 술 투표 퍼블리싱 --- apps/jurumarble/src/app/page.tsx | 123 ++++++++++++++++--- apps/jurumarble/src/components/BottomBar.tsx | 1 - apps/jurumarble/src/lib/styles/theme.ts | 31 +++-- 3 files changed, 121 insertions(+), 34 deletions(-) diff --git a/apps/jurumarble/src/app/page.tsx b/apps/jurumarble/src/app/page.tsx index 375f0ecd..2eb919e2 100644 --- a/apps/jurumarble/src/app/page.tsx +++ b/apps/jurumarble/src/app/page.tsx @@ -2,36 +2,62 @@ import BottomBar from "components/BottomBar"; import Header from "components/Header"; +import Image from "next/image"; +import { EmptyAImg } from "public/images"; import styled, { css } from "styled-components"; import Carousel from "./main/components/Carousel"; - // import { Input } from "@monorepo/ui"; function Main() { return ( -
- - -

- 우리술 - TOP 10 -

-

7시, 지금 가장 인기있는 우리술이에요.

- - -

- 우리술 - 투표 -

-

7시, 현재 가장 핫한 우리 술이에요.

+ +
+ + +

+ 우리술 + TOP 10 +

+

7시, 지금 가장 인기있는 우리술이에요.

+ + + +

+ 우리술 + 투표 +

+

7시, 지금 가장 인기있는 우리술 투표에요.

+ + + + + 임시 이미지 + + + + + 임시 이미지 + + + + + 부산에서 제일 맛있는 술은? + + + ); } const Container = styled.div` + background-color: ${({ theme }) => theme.colors.bg_01}; +`; + +const TopSection = styled.section` padding: 0 20px; + background-color: ${({ theme }) => theme.colors.white}; `; const Banner = styled.div` @@ -67,10 +93,67 @@ const H3 = styled.h3` `} `; -const DivideLine = styled.div` - height: 8px; - margin-top: 40px; - background-color: ${({ theme }) => theme.colors.bg_01}; +const BottomSection = styled.section` + padding: 0 20px 96px; + margin-top: 8px; // 64(BottomBar height) + 32(margin) = 96 + background-color: ${({ theme }) => theme.colors.white}; + overflow: auto; +`; + +const PopularVoteCard = styled.div` + ${({ theme }) => + css` + background-color: ${theme.colors.bg_02}; + width: auto; + margin-top: 32px; + overflow: auto; + border: 1px solid ${theme.colors.bg_02}; + border-radius: 16px; + box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.08), 0px 10px 25px 0px rgba(0, 0, 0, 0.06); + `} +`; + +const VoteImages = styled.div` + display: flex; + width: auto; + height: 120px; + gap: 11px; + margin: 20px; +`; + +const DrinkImageBox = styled.div<{ color: string }>` + ${({ theme, color }) => + css` + background-color: ${color === "orange" ? theme.colors.sub_01 : theme.colors.sub_02}; + display: flex; + justify-content: center; + align-items: center; + width: 100%; + border-radius: 10px; + `} +`; + +const DrinkImageWrapper = styled.div` + width: 80px; + height: 80px; + position: relative; +`; + +const VoteTitleWrapper = styled.div` + ${({ theme }) => + css` + background-color: ${theme.colors.white}; + padding: 20px 0; + `} +`; + +const VoteTitle = styled.div` + ${({ theme }) => + css` + ${theme.typography.headline03}; + color: ${theme.colors.black_01}; + padding: 0 20px; + `} `; export default Main; diff --git a/apps/jurumarble/src/components/BottomBar.tsx b/apps/jurumarble/src/components/BottomBar.tsx index 05019fd3..8c455509 100644 --- a/apps/jurumarble/src/components/BottomBar.tsx +++ b/apps/jurumarble/src/components/BottomBar.tsx @@ -63,7 +63,6 @@ const Container = styled.section` bottom: 0; left: 0; background-color: ${({ theme }) => theme.colors.white}; - box-shadow: 0px -16px 32px 0px rgba(235, 235, 235, 0.8); `; const Inner = styled.div` diff --git a/apps/jurumarble/src/lib/styles/theme.ts b/apps/jurumarble/src/lib/styles/theme.ts index c8d1b0c2..4804036e 100644 --- a/apps/jurumarble/src/lib/styles/theme.ts +++ b/apps/jurumarble/src/lib/styles/theme.ts @@ -18,99 +18,104 @@ const colors = { sub_02: "#aedac4", system_red: "#dc0000", system_green: "#04b014", + system_yellow: "#f5a623", + system_blue: "rgba(0, 26, 255, 0.80)", + system_black: "rgba(0, 0, 0, 0.80)", modal: "rgba(0, 0, 0, 0.5)", + main_drop_shadow_top: "rgba(235, 235, 235, 0.80)", + main_drop_shadow_bottom: "rgba(235, 235, 235, 0.80)", + modal_shadow: "rgba(235, 235, 235, 0.80)", } as const; const typography = { headline01: ` font-size: 24px; - font-style: normal; font-weight: 700; line-height: 130%; letter-spacing: -0.24px; `, headline02: ` font-size: 20px; - font-style: normal; font-weight: 700; line-height: 130%; letter-spacing: -0.2px; `, headline03: ` font-size: 18px; - font-style: normal; font-weight: 600; line-height: 130%; letter-spacing: -0.18px; `, headline04: ` font-size: 16px; - font-style: normal; font-weight: 700; line-height: 130%; letter-spacing: -0.16px; `, subhead01: ` font-size: 18px; - font-style: normal; font-weight: 400; line-height: 130%; letter-spacing: -0.18px; `, subhead02: ` font-size: 14px; - font-style: normal; font-weight: 400; line-height: 130%; letter-spacing: -0.14px; `, body01: ` font-size: 16px; - font-style: normal; font-weight: 700; line-height: 130%; letter-spacing: -0.16px; `, body_long01: ` font-size: 16px; - font-style: normal; font-weight: 700; line-height: 150%; letter-spacing: -0.16px; `, body02: ` font-size: 16px; - font-style: normal; font-weight: 400; line-height: 130%; letter-spacing: -0.16px; `, body03: ` font-size: 14px; - font-style: normal; font-weight: 400; line-height: 130%; letter-spacing: -0.14px; `, body_long03: ` font-size: 14px; - font-style: normal; font-weight: 400; line-height: 150%; letter-spacing: -0.14px; `, caption: ` font-size: 12px; - font-style: normal; font-weight: 600; line-height: 130%; `, chip: ` font-size: 12px; - font-style: normal; font-weight: 600; line-height: 100%; `, + navigation: ` + font-size: 10px; + font-weight: 500; + line-height: 130%; + letter-spacing: -0.1px; + `, + button01: ` + font-size: 14px; + font-weight: 600; + line-height: 130%; + letter-spacing: -0.14px; +`, } as const; const mediaQuery = (minWidth: number) => `@media (min-width: ${minWidth}px)`;