From 0497d023c3d6d2384d37f47283584ba0c69f3b79 Mon Sep 17 00:00:00 2001 From: Leejha <57664427+Leejha@users.noreply.github.com> Date: Mon, 18 Sep 2023 01:44:59 +0900 Subject: [PATCH] =?UTF-8?q?[JR-760]=20=EC=88=A0=EB=8F=84=EC=9E=A5=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=ED=8D=BC=EB=B8=94=EB=A6=AC?= =?UTF-8?q?=EC=8B=B1=20(#145)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * chore: 아이콘 추가 * chore: 전통주 이미지 추가 * refactor: 지역 select box를 공용 컴포넌트로 분리 * feat: 헤더 구현 * feat: 술도장 페이지 퍼블리싱 --- ...SearchResultNothing.png => DrinkImage.png} | Bin apps/jurumarble/public/images/index.ts | 1 + apps/jurumarble/src/app/stemp/page.tsx | 91 ++++++++++++++++++ .../vote/post/components/DrinkSearchModal.tsx | 7 +- .../icons/components/IcHeaderSearch.tsx | 42 ++++++++ .../src/assets/icons/components/IcLogo.tsx | 87 +++++++++++++++++ .../src/assets/icons/components/IcNoti.tsx | 20 ---- .../icons/components/IcNotification.tsx | 42 ++++++++ .../src/assets/icons/components/index.ts | 4 +- apps/jurumarble/src/components/Header.tsx | 25 ++++- .../post => }/components/RegionSelect.tsx | 0 11 files changed, 288 insertions(+), 31 deletions(-) rename apps/jurumarble/public/images/{SearchResultNothing.png => DrinkImage.png} (100%) create mode 100644 apps/jurumarble/src/app/stemp/page.tsx create mode 100644 apps/jurumarble/src/assets/icons/components/IcHeaderSearch.tsx create mode 100644 apps/jurumarble/src/assets/icons/components/IcLogo.tsx delete mode 100644 apps/jurumarble/src/assets/icons/components/IcNoti.tsx create mode 100644 apps/jurumarble/src/assets/icons/components/IcNotification.tsx rename apps/jurumarble/src/{app/vote/post => }/components/RegionSelect.tsx (100%) diff --git a/apps/jurumarble/public/images/SearchResultNothing.png b/apps/jurumarble/public/images/DrinkImage.png similarity index 100% rename from apps/jurumarble/public/images/SearchResultNothing.png rename to apps/jurumarble/public/images/DrinkImage.png diff --git a/apps/jurumarble/public/images/index.ts b/apps/jurumarble/public/images/index.ts index fd57b1fc..5e8605e3 100644 --- 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 new file mode 100644 index 00000000..c308da4a --- /dev/null +++ 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 ( + <> +
+
+
+

+ 나의
우리술 도장 +

+

+ N + 개의 술을 마셨어요. +

+
+ 전통주 +
+ + + + + + + ); +} + +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 index 909456c2..ebb7c81d 100644 --- 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 술 검색하기 - + ) => ( + + + + + + + + + + +); +export default SvgHeaderSearch; diff --git a/apps/jurumarble/src/assets/icons/components/IcLogo.tsx b/apps/jurumarble/src/assets/icons/components/IcLogo.tsx new file mode 100644 index 00000000..2e78eb62 --- /dev/null +++ b/apps/jurumarble/src/assets/icons/components/IcLogo.tsx @@ -0,0 +1,87 @@ +import type { SVGProps } from "react"; +const SvgLogo = (props: SVGProps) => ( + + + + + + + + + + + + + + + + +); +export default SvgLogo; diff --git a/apps/jurumarble/src/assets/icons/components/IcNoti.tsx b/apps/jurumarble/src/assets/icons/components/IcNoti.tsx deleted file mode 100644 index 8adaa31f..00000000 --- a/apps/jurumarble/src/assets/icons/components/IcNoti.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import type { SVGProps } from "react"; -const SvgIcNoti = (props: SVGProps) => ( - - - -); -export default SvgIcNoti; diff --git a/apps/jurumarble/src/assets/icons/components/IcNotification.tsx b/apps/jurumarble/src/assets/icons/components/IcNotification.tsx new file mode 100644 index 00000000..b43af1fb --- /dev/null +++ b/apps/jurumarble/src/assets/icons/components/IcNotification.tsx @@ -0,0 +1,42 @@ +import type { SVGProps } from "react"; +const SvgNotification = (props: SVGProps) => ( + + + + + + + + + + +); +export default SvgNotification; diff --git a/apps/jurumarble/src/assets/icons/components/index.ts b/apps/jurumarble/src/assets/icons/components/index.ts index 76fe878f..fd600c12 100644 --- 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 index 240f7676..0a109e33 100644 --- 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 ; + return ( + + + + + + + + ); } -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/apps/jurumarble/src/app/vote/post/components/RegionSelect.tsx b/apps/jurumarble/src/components/RegionSelect.tsx similarity index 100% rename from apps/jurumarble/src/app/vote/post/components/RegionSelect.tsx rename to apps/jurumarble/src/components/RegionSelect.tsx