[Feat] 필터 메뉴에서 필터 아이템 클릭 이벤트 추가 #32

soolsul · Nov 29, 2022 · f5179c3 · f5179c3
1 parent 9840ba3
commit f5179c3
Show file tree

Hide file tree

Showing 2 changed files with 99 additions and 25 deletions.
diff --git a/src/components/pages/map/FilterMenu.tsx b/src/components/pages/map/FilterMenu.tsx
@@ -1,3 +1,4 @@
+import { uuid } from '@lib/utils';
 import { filterAtom } from '@recoil/map';
 import Image from 'next/image';
 import { useEffect, useRef } from 'react';
@@ -9,6 +10,8 @@ import FilterSection from './FilterSection';
 function FilterMenu() {
   const [filterState, setFilterState] = useRecoilState(filterAtom);
   const filterRef = useRef<HTMLDivElement>(null);
+  const moodList = ['시끌벅적한', '고급스러운', '격식있는', '이색적인', '깔끔한', '조용한', '뷰가 이쁜'];
+  const drinkList = ['소주', '맥주', '와인', '칵테일', '샴페인', '위스키', '사케', '기타'];
 
   const closeClickOutSide = (e: MouseEvent) => {
     if (!filterRef.current) return;
@@ -18,13 +21,14 @@ function FilterMenu() {
   };
 
   const closeFilter = () => {
-    setFilterState({ ...filterState, isOpen: false });
+    setFilterState({ drinkTag: null, moodTag: null, isOpen: false });
   };
 
   useEffect(() => {
     document.addEventListener('click', closeClickOutSide);
     return () => document.removeEventListener('click', closeClickOutSide);
   }, [filterState.isOpen]);
+
   return (
     <Wrapper {...filterState} ref={filterRef}>
       <Title>
@@ -35,27 +39,47 @@ function FilterMenu() {
       </Title>
       <SectionWrapper>
         <FilterSection filterType="mood">
-          <MoodFilter>시끌벅적한</MoodFilter>
-          <MoodFilter>고급스러운</MoodFilter>
-          <MoodFilter>격식있는</MoodFilter>
-          <MoodFilter>이색적인</MoodFilter>
-          <MoodFilter>깔끔한</MoodFilter>
-          <MoodFilter>조용한</MoodFilter>
-          <MoodFilter>뷰가 예쁜</MoodFilter>
+          {moodList.map((mood) => {
+            return (
+              <MoodFilter key={uuid()} isActive={filterState.moodTag === mood}>
+                <button
+                  value={mood}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    setFilterState({ ...filterState, moodTag: mood });
+                  }}
+                >
+                  {mood}
+                </button>
+              </MoodFilter>
+            );
+          })}
         </FilterSection>
         <FilterSection filterType="drink">
-          <DrinkFilter />
-          <DrinkFilter />
-          <DrinkFilter />
-          <DrinkFilter />
-          <DrinkFilter />
+          {drinkList.map((drink) => {
+            return (
+              <DrinkFilter key={uuid()} isActive={filterState.drinkTag === drink}>
+                <button
+                  value={drink}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    setFilterState({ ...filterState, drinkTag: drink });
+                  }}
+                >
+                  {drink}
+                </button>
+              </DrinkFilter>
+            );
+          })}
         </FilterSection>
       </SectionWrapper>
       <ButtonWrapper>
         <Button className="cancel" onClick={closeFilter}>
           취소
         </Button>
-        <Button className="submit">적용</Button>
+        <Button className="submit" onClick={closeFilter}>
+          적용
+        </Button>
       </ButtonWrapper>
     </Wrapper>
   );
@@ -124,22 +148,66 @@ const SectionWrapper = styled.div`
   padding: 16px;
 `;
 
-const DrinkFilter = styled.li`
+const DrinkFilter = styled.li<{ isActive: boolean }>`
   aspect-ratio: 1/1;
   background-color: #fff;
   border: 1px solid #f0f0f0;
   border-radius: 50%;
+  button {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background-color: #fff;
+    border: 1px solid #fff;
+    color: #000;
+    cursor: pointer;
+    &:hover {
+      color: #715ae4;
+      border: 1px solid #715ae4;
+    }
+    ${({ isActive }) => {
+      if (isActive) {
+        return css`
+          border: 1px solid #715ae4;
+          color: #715ae4;
+        `;
+      } else {
+        return css`
+          border: 1px solid #f0f0f0;
+          color: #000;
+        `;
+      }
+    }}
+  }
 `;
 
-const MoodFilter = styled.li`
-  padding: 8px 16px;
-  border: 1px solid #f0f0f0;
-  background-color: #fff;
-  border-radius: 24px;
-  color: #000;
-  font-weight: 500;
-  font-size: 12px;
-  line-height: 16px;
+const MoodFilter = styled.li<{ isActive: boolean }>`
+  button {
+    padding: 8px 16px;
+    background-color: #fff;
+    border-radius: 24px;
+    font-weight: 500;
+    font-size: 12px;
+    line-height: 16px;
+    cursor: pointer;
+    &:hover {
+      border: 1px solid #715ae4;
+      color: #715ae4;
+    }
+    ${({ isActive }) => {
+      if (isActive) {
+        return css`
+          border: 1px solid #715ae4;
+          color: #715ae4;
+        `;
+      } else {
+        return css`
+          border: 1px solid #f0f0f0;
+          color: #000;
+        `;
+      }
+    }}
+  }
 `;
 
 const ButtonWrapper = styled.div`

diff --git a/src/recoil/map/filterAtom.ts b/src/recoil/map/filterAtom.ts
@@ -1,6 +1,12 @@
 import { atom } from 'recoil';
 
-const filterAtom = atom({
+interface filterType {
+  isOpen: boolean;
+  moodTag: string | null;
+  drinkTag: string | null;
+}
+
+const filterAtom = atom<filterType>({
   key: 'filterAtom',
   default: {
     isOpen: false,