[JR-658] 음식 이미지 추가 퍼블리싱

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<HTMLButtonElement>) => {
+    setSelected(e.currentTarget.name);
+    e.currentTarget.name === "nonSelect" && setSelected("nonSelect");
+  };
   return (
     <ModalTemplate width="375px" height="100%" onToggleModal={onToggleSearchRestaurantModal}>
       <VoteHeader
@@ -37,6 +37,58 @@ function SearchRestaurantModal({ onToggleSearchRestaurantModal }: Props) {
             <SvgIcX width={24} height={24} />
           </CloseButton>
         }
+      >
+        <TitleStyled>이미지 선택</TitleStyled>
+      </VoteHeader>
+      <Container>
+        <RestaurantItem />
+        <FoodImageList>
+          <NonSelectedButton
+            variant="outline"
+            width="107px"
+            height="60px"
+            borderRadius="4px"
+            name="nonSelect"
+            onClick={onClickSelected}
+          >
+            <ColorBox selected={selected === "nonSelect"} />
+            선택 안함
+          </NonSelectedButton>
+          {TEMP_LIST.map(({ manufacturer }) => (
+            <FoodItem>
+              <Button key={manufacturer} name={manufacturer} onClick={onClickSelected}>
+                <ColorBox selected={selected === manufacturer} />
+              </Button>
+              <Image
+                alt="음식 이미지"
+                src={EmptyAImg}
+                width={107}
+                height={60}
+                style={{
+                  borderRadius: "4px",
+                }}
+              />
+            </FoodItem>
+          ))}
+        </FoodImageList>
+        <CompleteButton
+          width="335px"
+          height="56px"
+          variant="primary"
+          // onClick={onToggleDrinkSearchModal}
+        >
+          완료
+        </CompleteButton>
+      </Container>
+      {/**
+       * @Note 음식점 검색
+       */}
+      {/* <VoteHeader
+        rightButton={
+          <CloseButton onClick={onToggleSearchRestaurantModal}>
+            <SvgIcX width={24} height={24} />
+          </CloseButton>
+        }
       >
         <TitleStyled>음식점 검색</TitleStyled>
       </VoteHeader>
@@ -47,7 +99,7 @@ function SearchRestaurantModal({ onToggleSearchRestaurantModal }: Props) {
             <RestaurantItem />
           ))}
         </RestaurantList>
-      </Container>
+      </Container> */}
     </ModalTemplate>
   );
 }
@@ -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;

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*/;

apps/jurumarble/src/components/button/Button.tsx

@@ -58,13 +58,13 @@ const ButtonStyled = styled.button<ButtonStyledProps>`
     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]};
   `}
 `;