From c7260009135f02b1aa28ab993191fc21da3eb8c4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=8B=E1=85=B5=E1=84=8C=E1=85=A2=E1=84=92=E1=85=A1?= Date: Thu, 17 Aug 2023 21:41:15 +0900 Subject: [PATCH 1/4] =?UTF-8?q?feat:=20navigation=20typography=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/jurumarble/src/lib/styles/theme.ts | 19 ++++++------------- 1 file changed, 6 insertions(+), 13 deletions(-) diff --git a/apps/jurumarble/src/lib/styles/theme.ts b/apps/jurumarble/src/lib/styles/theme.ts index c8d1b0c2..0db07f69 100644 --- a/apps/jurumarble/src/lib/styles/theme.ts +++ b/apps/jurumarble/src/lib/styles/theme.ts @@ -24,93 +24,86 @@ const colors = { 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; + `, } as const; const mediaQuery = (minWidth: number) => `@media (min-width: ${minWidth}px)`; From 36e87077afa4e7cd3fe85a631643115492c3e038 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=8B=E1=85=B5=E1=84=8C=E1=85=A2=E1=84=92=E1=85=A1?= Date: Thu, 17 Aug 2023 21:52:24 +0900 Subject: [PATCH 2/4] =?UTF-8?q?feat:=20theme=20=EC=B6=94=EA=B0=80=20?= =?UTF-8?q?=EC=82=AC=ED=95=AD=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/jurumarble/src/lib/styles/theme.ts | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/apps/jurumarble/src/lib/styles/theme.ts b/apps/jurumarble/src/lib/styles/theme.ts index 0db07f69..4804036e 100644 --- a/apps/jurumarble/src/lib/styles/theme.ts +++ b/apps/jurumarble/src/lib/styles/theme.ts @@ -18,7 +18,13 @@ 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 = { @@ -104,6 +110,12 @@ const typography = { 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)`; From dbf3c2a31ae65e4afd59505f4f9f37f54fade4b7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=8B=E1=85=B5=E1=84=8C=E1=85=A2=E1=84=92=E1=85=A1?= Date: Thu, 17 Aug 2023 22:02:15 +0900 Subject: [PATCH 3/4] =?UTF-8?q?feat:=20=EB=94=94=EC=9E=90=EC=9D=B8=20?= =?UTF-8?q?=EC=88=98=EC=A0=95=EC=82=AC=ED=95=AD=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/jurumarble/src/components/BottomBar.tsx | 1 - 1 file changed, 1 deletion(-) 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` From b08b479a0461b35cad3eae0ba5de682ac260785e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=8B=E1=85=B5=E1=84=8C=E1=85=A2=E1=84=92=E1=85=A1?= Date: Thu, 17 Aug 2023 22:03:18 +0900 Subject: [PATCH 4/4] =?UTF-8?q?feat:=20=EB=A9=94=EC=9D=B8=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=9D=B8=EA=B8=B0=EC=9E=88=EB=8A=94=20?= =?UTF-8?q?=EC=88=A0=20=ED=88=AC=ED=91=9C=20=ED=8D=BC=EB=B8=94=EB=A6=AC?= =?UTF-8?q?=EC=8B=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/jurumarble/src/app/page.tsx | 123 ++++++++++++++++++++++++++----- 1 file changed, 103 insertions(+), 20 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;