diff --git a/apps/jurumarble/src/app/vote/[id]/components/SearchRestaurantModal.tsx b/apps/jurumarble/src/app/vote/[id]/components/SearchRestaurantModal.tsx index 4763ec9e..0848fe1b 100644 --- a/apps/jurumarble/src/app/vote/[id]/components/SearchRestaurantModal.tsx +++ b/apps/jurumarble/src/app/vote/[id]/components/SearchRestaurantModal.tsx @@ -3,8 +3,12 @@ import { Button, ModalTemplate } from "components/index"; import SearchInput from "components/SearchInput"; import VoteHeader from "components/VoteHeader"; +import { ThemeColors, transitions } from "lib/styles"; +import Image from "next/image"; +import { EmptyAImg } from "public/images"; +import { useState } from "react"; import SvgIcX from "src/assets/icons/components/IcX"; -import styled from "styled-components"; +import styled, { css } from "styled-components"; import RestaurantItem from "./RestaurantItem"; interface Props { @@ -15,20 +19,16 @@ const TEMP_LIST = [ { manufacturer: "gyeonggiDo", drinkName: "경기도" }, { manufacturer: "chungcheongDo", drinkName: "충청도" }, { manufacturer: "gyeongsangDo", drinkName: "경상도" }, - { manufacturer: "gangwonDo", drinkName: "강원도" }, - { manufacturer: "jeollaDo", drinkName: "전라도" }, - { manufacturer: "seoul", drinkName: "서울" }, - { manufacturer: "incheon", drinkName: "인천" }, - { manufacturer: "sejong", drinkName: "세종" }, - { manufacturer: "daejeon", drinkName: "대전" }, - { manufacturer: "busan", drinkName: "부산" }, - { manufacturer: "daegu", drinkName: "대구" }, - { manufacturer: "gwangju", drinkName: "광주" }, { manufacturer: "ulsan", drinkName: "울산" }, { manufacturer: "jeju", drinkName: "제주" }, ]; function SearchRestaurantModal({ onToggleSearchRestaurantModal }: Props) { + const [selected, setSelected] = useState(""); + const onClickSelected = (e: React.MouseEvent) => { + setSelected(e.currentTarget.name); + e.currentTarget.name === "nonSelect" && setSelected("nonSelect"); + }; return ( } + > + 이미지 선택 + + + + + + + 선택 안함 + + {TEMP_LIST.map(({ manufacturer }) => ( + + + 음식 이미지 + + ))} + + + 완료 + + + {/** + * @Note 음식점 검색 + */} + {/* + + + } > 음식점 검색 @@ -47,7 +99,7 @@ function SearchRestaurantModal({ onToggleSearchRestaurantModal }: Props) { ))} - + */} ); } @@ -64,12 +116,55 @@ const CloseButton = styled(Button)` margin: 14px 12px 0 0; `; -const RestaurantList = styled.ol` +const FoodImageList = styled.ul` display: flex; - flex-direction: column; - margin-top: 8px; + flex-wrap: wrap; + padding-top: 24px; + gap: 7px; + border-top: 1px solid ${({ theme }) => theme.colors.line_01}; overflow: auto; - height: 100%; + padding-bottom: 80px; + -ms-overflow-style: none /* IE and Edge 스크롤바 없애는 css*/; + scrollbar-width: none; /* Firefox 스크롤바 없애는 css */ + &::-webkit-scrollbar { + display: none; /* Chrome , Safari , Opera 스크롤바 없애는 css*/ + } +`; + +const NonSelectedButton = styled(Button)` + position: relative; +`; + +const FoodItem = styled.div` + position: relative; +`; + +const ColorBox = styled.div<{ theme: ThemeColors; selected: boolean }>` + ${({ theme, selected }) => + css` + border-radius: 4px; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + ${selected && + css` + border: 2px solid ${theme.colors.main_01}; + background: rgba(255, 74, 22, 0.7); + animation: ${transitions.blink} 0.7s ease-in-out; + `} + `} +`; + +const CompleteButton = styled(Button)` + ${({ theme }) => + css` + ${theme.typography.body01} + + position: absolute; + bottom: 54px; + `} `; export default SearchRestaurantModal; diff --git a/apps/jurumarble/src/app/vote/post/components/DrinkSearchModal.tsx b/apps/jurumarble/src/app/vote/post/components/DrinkSearchModal.tsx index 2129f29e..ee9bd230 100644 --- a/apps/jurumarble/src/app/vote/post/components/DrinkSearchModal.tsx +++ b/apps/jurumarble/src/app/vote/post/components/DrinkSearchModal.tsx @@ -110,7 +110,6 @@ const DrinkList = styled.ul` display: flex; flex-direction: column; gap: 8px; - margin-bottom: 500px; overflow: auto; height: 400px; -ms-overflow-style: none /* IE and Edge 스크롤바 없애는 css*/; diff --git a/apps/jurumarble/src/components/button/Button.tsx b/apps/jurumarble/src/components/button/Button.tsx index 410a92fa..9204d9dd 100644 --- a/apps/jurumarble/src/components/button/Button.tsx +++ b/apps/jurumarble/src/components/button/Button.tsx @@ -58,13 +58,13 @@ const ButtonStyled = styled.button` width: ${width}; height: ${height}; border-radius: ${borderRadius}; - ${variant && variantStyles[variant]}; display: inline-flex; justify-content: center; align-items: center; padding: 0; border: none; cursor: pointer; + ${variant && variantStyles[variant]}; `} `;