[JR-609] 메인 페이지 퍼블리싱 (#124)

* feat: navigation typography 추가 * feat: theme 추가 사항 반영 * feat: 디자인 수정사항 반영 * feat: 메인 페이지 인기있는 술 투표 퍼블리싱
choooz · Aug 17, 2023 · d1492a5 · d1492a5
1 parent a8539fc
commit d1492a5
Show file tree

Hide file tree

Showing 3 changed files with 121 additions and 34 deletions.
diff --git 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 (
     <Container>
-      <Header />
-      <Banner />
-      <Input />
-      <H2>
-        우리술
-        <Main01Color> TOP 10</Main01Color>
-      </H2>
-      <H3>7시, 지금 가장 인기있는 우리술이에요.</H3>
-      <Carousel />
-      <DivideLine />
-      <H2>
-        우리술
-        <Main01Color> 투표</Main01Color>
-      </H2>
-      <H3>7시, 현재 가장 핫한 우리 술이에요.</H3>
+      <TopSection>
+        <Header />
+        <Banner />
+        <Input />
+        <H2>
+          우리술
+          <Main01Color> TOP 10</Main01Color>
+        </H2>
+        <H3>7시, 지금 가장 인기있는 우리술이에요.</H3>
+        <Carousel />
+      </TopSection>
+      <BottomSection>
+        <H2>
+          우리술
+          <Main01Color> 투표</Main01Color>
+        </H2>
+        <H3>7시, 지금 가장 인기있는 우리술 투표에요.</H3>
+        <PopularVoteCard>
+          <VoteImages>
+            <DrinkImageBox color="orange">
+              <DrinkImageWrapper>
+                <Image alt="임시 이미지" src={EmptyAImg} fill style={{ borderRadius: "80px" }} />
+              </DrinkImageWrapper>
+            </DrinkImageBox>
+            <DrinkImageBox color="mint">
+              <DrinkImageWrapper>
+                <Image alt="임시 이미지" src={EmptyAImg} fill style={{ borderRadius: "80px" }} />
+              </DrinkImageWrapper>
+            </DrinkImageBox>
+          </VoteImages>
+          <VoteTitleWrapper>
+            <VoteTitle>부산에서 제일 맛있는 술은?</VoteTitle>
+          </VoteTitleWrapper>
+        </PopularVoteCard>
+      </BottomSection>
       <BottomBar />
     </Container>
   );
 }
 
 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
@@ -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
@@ -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)`;