[JR-760] 술도장 페이지 퍼블리싱 (#145)

* chore: 아이콘 추가 * chore: 전통주 이미지 추가 * refactor: 지역 select box를 공용 컴포넌트로 분리 * feat: 헤더 구현 * feat: 술도장 페이지 퍼블리싱
choooz · Sep 17, 2023 · 0497d02 · 0497d02
1 parent 29464e6
commit 0497d02
Show file tree

Hide file tree

Showing 11 changed files with 288 additions and 31 deletions.
diff --git a/...ble/public/images/SearchResultNothing.png → apps/jurumarble/public/images/DrinkImage.png b/...ble/public/images/SearchResultNothing.png → apps/jurumarble/public/images/DrinkImage.png
diff --git a/apps/jurumarble/public/images/index.ts b/apps/jurumarble/public/images/index.ts
@@ -1,3 +1,4 @@
 export { default as EmptyAImg } from "./AImg.png";
 export { default as ExImg1 } from "./exe1.png";
 export { default as ExImg2 } from "./exe2.png";
+export { default as DrinkImage } from "./DrinkImage.png";
diff --git a/apps/jurumarble/src/app/stemp/page.tsx b/apps/jurumarble/src/app/stemp/page.tsx
@@ -0,0 +1,91 @@
+"use client";
+
+import BottomBar from "components/BottomBar";
+import Header from "components/Header";
+import RegionSelect from "components/RegionSelect";
+import Image from "next/image";
+import { DrinkImage } from "public/images";
+import { useState } from "react";
+import styled, { css } from "styled-components";
+
+function StempPage() {
+  const [regionOption, setRegionOption] = useState("");
+  const onChangeRegionOption = (value: string) => {
+    setRegionOption(value);
+  };
+  return (
+    <>
+      <Header />
+      <Section>
+        <div>
+          <H2>
+            나의 <br /> 우리술 도장
+          </H2>
+          <H3>
+            <MainColor>N</MainColor>
+            개의 술을 마셨어요.
+          </H3>
+        </div>
+        <Image
+          alt="전통주"
+          src={DrinkImage}
+          style={{ width: "82px", height: "82px", borderRadius: "100px" }}
+        />
+      </Section>
+      <DrinkStempContainer>
+        <RegionSelect regionOption={regionOption} onChangeRegionOption={onChangeRegionOption} />
+        <DrinkList></DrinkList>
+      </DrinkStempContainer>
+      <BottomBar />
+    </>
+  );
+}
+
+const Section = styled.section`
+  ${({ theme }) => css`
+    background-color: ${theme.colors.bg_02};
+    color: ${theme.colors.black_01};
+    padding: 20px;
+    display: flex;
+    justify-content: space-between;
+  `}
+`;
+
+const H2 = styled.h2`
+  ${({ theme }) => css`
+    ${theme.typography.headline02}
+  `}
+`;
+
+const H3 = styled.h3`
+  ${({ theme }) => css`
+    ${theme.typography.body_long03}
+    color: ${theme.colors.black_02};
+    margin-top: 8px;
+  `}
+`;
+
+const MainColor = styled.span`
+  ${({ theme }) => css`
+    color: ${theme.colors.main_01};
+  `}
+`;
+
+const DrinkStempContainer = styled.section`
+  padding: 24px 20px;
+`;
+
+const DrinkList = styled.ul`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  overflow: auto;
+  height: 400px;
+  -ms-overflow-style: none /* IE and Edge 스크롤바 없애는 css*/;
+  scrollbar-width: none; /* Firefox 스크롤바 없애는 css */
+  &::-webkit-scrollbar {
+    display: none; /* Chrome , Safari , Opera 스크롤바 없애는 css*/
+  }
+`;
+
+export default StempPage;
diff --git a/apps/jurumarble/src/app/vote/post/components/DrinkSearchModal.tsx b/apps/jurumarble/src/app/vote/post/components/DrinkSearchModal.tsx
@@ -6,13 +6,13 @@ import { useState } from "react";
 import SvgIcX from "src/assets/icons/components/IcX";
 import styled, { css } from "styled-components";
 import useUpdateSelectedDrinkList from "../hooks/useUpdateSelectedDrinkList";
-import RegionSelect from "./RegionSelect";
 import SelectedDrinkChip from "./SelectedDrinkChip";
 import DrinkItem from "app/vote/post/components/DrinkItem";
 import useGetDrinkListService from "hooks/useGetDrinkList";
 import SearchInput from "components/SearchInput";
 import useInput from "hooks/useInput";
 import { DrinkInfoType } from "src/types/vote";
+import RegionSelect from "components/RegionSelect";
 
 interface Props {
   onToggleDrinkSearchModal: () => void;
@@ -49,10 +49,7 @@ function DrinkSearchModal({ onToggleDrinkSearchModal, onClickSearchDrinkComplete
         <TitleStyled>술 검색하기</TitleStyled>
       </VoteHeader>
       <SearchSection>
-        <RegionSelect
-          regionOption={regionOption}
-          onChangeRegionOption={onChangeRegionOption}
-        ></RegionSelect>
+        <RegionSelect regionOption={regionOption} onChangeRegionOption={onChangeRegionOption} />
         <SearchInput
           placeholder="관심있는 술을 검색해보세요."
           value={keyword}

diff --git a/apps/jurumarble/src/assets/icons/components/IcHeaderSearch.tsx b/apps/jurumarble/src/assets/icons/components/IcHeaderSearch.tsx
@@ -0,0 +1,42 @@
+import type { SVGProps } from "react";
+const SvgHeaderSearch = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <g id="search">
+      <mask
+        id="mask0_1004_284"
+        style={{
+          maskType: "alpha",
+        }}
+        maskUnits="userSpaceOnUse"
+        x={0}
+        y={0}
+        width={24}
+        height={24}
+      >
+        <rect
+          id="Bounding box"
+          width={24}
+          height={24}
+          fill="currentColor"
+          vectorEffect="non-scaling-stroke"
+        />
+      </mask>
+      <g mask="url(#mask0_1004_284)">
+        <path
+          id="search_2"
+          d="M19.6 21L13.3 14.7C12.8 15.1 12.225 15.4167 11.575 15.65C10.925 15.8833 10.2333 16 9.5 16C7.68333 16 6.14583 15.3708 4.8875 14.1125C3.62917 12.8542 3 11.3167 3 9.5C3 7.68333 3.62917 6.14583 4.8875 4.8875C6.14583 3.62917 7.68333 3 9.5 3C11.3167 3 12.8542 3.62917 14.1125 4.8875C15.3708 6.14583 16 7.68333 16 9.5C16 10.2333 15.8833 10.925 15.65 11.575C15.4167 12.225 15.1 12.8 14.7 13.3L21 19.6L19.6 21ZM9.5 14C10.75 14 11.8125 13.5625 12.6875 12.6875C13.5625 11.8125 14 10.75 14 9.5C14 8.25 13.5625 7.1875 12.6875 6.3125C11.8125 5.4375 10.75 5 9.5 5C8.25 5 7.1875 5.4375 6.3125 6.3125C5.4375 7.1875 5 8.25 5 9.5C5 10.75 5.4375 11.8125 6.3125 12.6875C7.1875 13.5625 8.25 14 9.5 14Z"
+          fill="currentColor"
+          vectorEffect="non-scaling-stroke"
+        />
+      </g>
+    </g>
+  </svg>
+);
+export default SvgHeaderSearch;
diff --git a/apps/jurumarble/src/assets/icons/components/IcLogo.tsx b/apps/jurumarble/src/assets/icons/components/IcLogo.tsx
@@ -0,0 +1,87 @@
+import type { SVGProps } from "react";
+const SvgLogo = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 111 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <g id="Group 5">
+      <path
+        id="Vector"
+        d="M25.1721 12.8677H13.2151V15.3855H25.1721V12.8677Z"
+        fill="currentColor"
+        vectorEffect="non-scaling-stroke"
+      />
+      <path
+        id="Vector_2"
+        d="M22.6558 0.910706H13.2166V3.42851H22.6558V4.68519H20.138V7.20299H22.6558L23.5994 7.20447C24.4688 7.20447 25.1721 6.49973 25.1721 5.63177V0.910706H22.6543H22.6558Z"
+        fill="currentColor"
+        vectorEffect="non-scaling-stroke"
+      />
+      <path
+        id="Vector_3"
+        d="M15.7329 19.7905V16.6436H13.2151V19.7905H15.7329Z"
+        fill="currentColor"
+        vectorEffect="non-scaling-stroke"
+      />
+      <path
+        id="Vector_4"
+        d="M25.1721 19.7905V16.6436H22.6543V19.7905H25.1721Z"
+        fill="currentColor"
+        vectorEffect="non-scaling-stroke"
+      />
+      <path
+        id="Vector_5"
+        d="M11.3279 0.910706H0V3.42851H11.3279V0.910706Z"
+        fill="currentColor"
+        vectorEffect="non-scaling-stroke"
+      />
+      <path
+        id="Vector_6"
+        d="M2.5178 4.70003V7.83356H1.57418C0.704748 7.83356 0 8.53682 0 9.40626V19.7905H2.5178V10.3647H5.03561V4.70003H2.5178Z"
+        fill="currentColor"
+        vectorEffect="non-scaling-stroke"
+      />
+      <path
+        id="Vector_7"
+        d="M9.75371 7.83356H8.81009V4.70003H6.29228V10.3632H8.81009V19.789H11.3279V9.40626C11.3279 8.53682 10.6231 7.83356 9.75519 7.83356H9.75371Z"
+        fill="currentColor"
+        vectorEffect="non-scaling-stroke"
+      />
+      <path
+        id="Vector_8"
+        d="M22.1914 8.1481C21.5935 8.7119 20.4748 9.09172 19.1944 9.09172C17.2834 9.09172 15.7329 8.24602 15.7329 7.20448H18.2507V4.68668H13.2166V7.20448C13.2166 9.63771 15.8932 11.6095 19.1944 11.6095C22.0564 11.6095 24.4481 10.1273 25.0341 8.1481H22.1914Z"
+        fill="currentColor"
+        vectorEffect="non-scaling-stroke"
+      />
+      <path
+        id="Vector_9"
+        d="M50.0579 13.4953H42.6825V19.8706H40.0579V13.4953H32.7656V11.3706H50.0579V13.4953ZM39.8591 3.99528H34.3279V1.91071H48.5163V3.99379H42.9852C43.2567 5.85878 45.3502 7.71338 49.2463 8.18074L48.2878 10.2638C44.954 9.81575 42.5683 8.39884 41.4229 6.45077C40.2671 8.39884 37.9021 9.81575 34.5994 10.2638L33.6202 8.18074C37.454 7.71189 39.5786 5.85729 39.8605 3.99379L39.8591 3.99528Z"
+        fill="currentColor"
+        vectorEffect="non-scaling-stroke"
+      />
+      <path
+        id="Vector_10"
+        d="M53.0252 12.2653H70.3798V14.3899H63.0044V19.9107H60.3383V14.3899H53.0252V12.2653ZM68.3798 7.14067H57.7745V8.72376H68.816V10.8484H55.0861V5.14067H65.6499V3.64067H55.0237V1.49379H68.3783V7.13919L68.3798 7.14067Z"
+        fill="currentColor"
+        vectorEffect="non-scaling-stroke"
+      />
+      <path
+        id="Vector_11"
+        d="M82.4525 15.2445H73.3487V2.70299H82.4525V15.246V15.2445ZM79.8071 13.1407V4.78608H75.9733V13.1407H79.8071ZM85.0356 0.910706H87.7018V8.05759H90.4941V10.2653H87.7018V19.8706H85.0356V0.910706Z"
+        fill="currentColor"
+        vectorEffect="non-scaling-stroke"
+      />
+      <path
+        id="Vector_12"
+        d="M93.4807 8.64067H110.773V10.703H93.4807V8.64067ZM95.4807 11.8276H108.669V16.6199H98.1053V17.7445H109.169V19.7445H95.5015V14.7653H106.045V13.7653H95.4807V11.8276ZM98.3145 2.5561H105.918V1.22375H108.564V7.59913H95.6884V1.22375H98.3131V2.55758L98.3145 2.5561ZM105.918 5.61841V4.47301H98.3145V5.61841H105.918Z"
+        fill="currentColor"
+        vectorEffect="non-scaling-stroke"
+      />
+    </g>
+  </svg>
+);
+export default SvgLogo;
diff --git a/apps/jurumarble/src/assets/icons/components/IcNoti.tsx b/apps/jurumarble/src/assets/icons/components/IcNoti.tsx
diff --git a/apps/jurumarble/src/assets/icons/components/IcNotification.tsx b/apps/jurumarble/src/assets/icons/components/IcNotification.tsx
@@ -0,0 +1,42 @@
+import type { SVGProps } from "react";
+const SvgNotification = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <g id="notifications">
+      <mask
+        id="mask0_1004_277"
+        style={{
+          maskType: "alpha",
+        }}
+        maskUnits="userSpaceOnUse"
+        x={0}
+        y={0}
+        width={24}
+        height={24}
+      >
+        <rect
+          id="Bounding box"
+          width={24}
+          height={24}
+          fill="currentColor"
+          vectorEffect="non-scaling-stroke"
+        />
+      </mask>
+      <g mask="url(#mask0_1004_277)">
+        <path
+          id="notifications_2"
+          d="M4 19V17H6V10C6 8.61667 6.41667 7.3875 7.25 6.3125C8.08333 5.2375 9.16667 4.53333 10.5 4.2V3.5C10.5 3.08333 10.6458 2.72917 10.9375 2.4375C11.2292 2.14583 11.5833 2 12 2C12.4167 2 12.7708 2.14583 13.0625 2.4375C13.3542 2.72917 13.5 3.08333 13.5 3.5V4.2C14.8333 4.53333 15.9167 5.2375 16.75 6.3125C17.5833 7.3875 18 8.61667 18 10V17H20V19H4ZM12 22C11.45 22 10.9792 21.8042 10.5875 21.4125C10.1958 21.0208 10 20.55 10 20H14C14 20.55 13.8042 21.0208 13.4125 21.4125C13.0208 21.8042 12.55 22 12 22ZM8 17H16V10C16 8.9 15.6083 7.95833 14.825 7.175C14.0417 6.39167 13.1 6 12 6C10.9 6 9.95833 6.39167 9.175 7.175C8.39167 7.95833 8 8.9 8 10V17Z"
+          fill="currentColor"
+          vectorEffect="non-scaling-stroke"
+        />
+      </g>
+    </g>
+  </svg>
+);
+export default SvgNotification;
diff --git a/apps/jurumarble/src/assets/icons/components/index.ts b/apps/jurumarble/src/assets/icons/components/index.ts
@@ -11,7 +11,6 @@ export { default as SvgIcMapPin } from "./IcMapPin";
 export { default as IcMark } from "./IcMark";
 export { default as SvgIcMenu } from "./IcMenu";
 export { default as SvgNaverIcon } from "./IcNaverIcon";
-export { default as SvgIcNoti } from "./IcNoti";
 export { default as SvgIcPlus } from "./IcPlus";
 export { default as SvgIcPrev } from "./IcPrev";
 export { default as SvgIcPrevious } from "./IcPrevious";
@@ -20,3 +19,6 @@ export { default as SvgStamp } from "./IcStamp";
 export { default as SvgIcUser } from "./IcUser";
 export { default as SvgIcX } from "./IcX";
 export { default as SvgIcBookmarkActive } from "./IcBookmarkActive";
+export { default as SvgLogo } from "./IcLogo";
+export { default as SvgNotification } from "./IcNotification";
+export { default as SvgHeaderSearch } from "./IcHeaderSearch";
diff --git a/apps/jurumarble/src/components/Header.tsx b/apps/jurumarble/src/components/Header.tsx
@@ -1,13 +1,28 @@
+import { SvgHeaderSearch, SvgLogo, SvgNotification } from "src/assets/icons/components";
 import styled from "styled-components";
 
 function Header() {
-  return <Container />;
+  return (
+    <Container>
+      <SvgLogo width={110} height={19} />
+      <IconContainer>
+        <SvgNotification width={24} height={24} />
+        <SvgHeaderSearch width={24} height={24} />
+      </IconContainer>
+    </Container>
+  );
 }
 
-const Container = styled.header`
-  height: 24px;
-  margin-top: 18px;
-  background-color: ${({ theme }) => theme.colors.main_01};
+const Container = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 20px;
+`;
+
+const IconContainer = styled.div`
+  display: flex;
+  gap: 16px;
 `;
 
 export default Header;
diff --git a/...app/vote/post/components/RegionSelect.tsx → ...urumarble/src/components/RegionSelect.tsx b/...app/vote/post/components/RegionSelect.tsx → ...urumarble/src/components/RegionSelect.tsx