Merge pull request #176 from Team-TIFY/dev

[Deploy]: QA 배포

package.json

@@ -29,6 +29,7 @@
     "axios": "^1.4.0",
     "date-fns": "^2.30.0",
     "dnd-core": "^16.0.1",
+    "framer-motion": "^10.16.5",
     "react": "^18.2.0",
     "react-cookie": "^4.1.1",
     "react-copy-to-clipboard": "^5.1.0",
@@ -40,6 +41,7 @@
     "react-modal": "^3.16.1",
     "react-native-modal-datetime-picker": "^17.1.0",
     "react-router-dom": "^6.14.1",
+    "react-toastify": "^9.1.3",
     "recoil": "^0.7.7"
   },
   "devDependencies": {

src/assets/icons/MenuIcon.tsx

@@ -1,41 +1,49 @@
+import { useNavigate } from 'react-router-dom'
+
 const MenuIcon = () => {
+  const navigate = useNavigate()
+  const gotoSetting = () => {
+    navigate('/setting')
+  }
   return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <g clipPath="url(#clip0_2562_6816)">
-        <path
-          d="M4 6H20"
-          stroke="#E4E4E5"
-          strokeWidth="1.6"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-        <path
-          d="M4 12H20"
-          stroke="#E4E4E5"
-          strokeWidth="1.6"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-        <path
-          d="M4 18H20"
-          stroke="#E4E4E5"
-          strokeWidth="1.6"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-      </g>
-      <defs>
-        <clipPath id="clip0_2562_6816">
-          <rect width="24" height="24" fill="white" />
-        </clipPath>
-      </defs>
-    </svg>
+    <div onClick={gotoSetting}>
+      <svg
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g clipPath="url(#clip0_2562_6816)">
+          <path
+            d="M4 6H20"
+            stroke="#E4E4E5"
+            strokeWidth="1.6"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <path
+            d="M4 12H20"
+            stroke="#E4E4E5"
+            strokeWidth="1.6"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <path
+            d="M4 18H20"
+            stroke="#E4E4E5"
+            strokeWidth="1.6"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </g>
+        <defs>
+          <clipPath id="clip0_2562_6816">
+            <rect width="24" height="24" fill="white" />
+          </clipPath>
+        </defs>
+      </svg>
+    </div>
   )
 }
 

src/assets/icons/PriceFilter.tsx → src/assets/icons/PriceFilterIcon.tsx

@@ -1,4 +1,4 @@
-export const PriceFilter = () => {
+export const PriceFilterIcon = () => {
   return (
     <>
       <svg

src/assets/icons/PurpleCheck.tsx

@@ -0,0 +1,21 @@
+export const PurpleCheck = () => {
+  return (
+    <>
+      <svg
+        width="15"
+        height="10"
+        viewBox="0 0 15 10"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M1.1665 4.99967L5.33317 9.16634L13.6665 0.833008"
+          stroke="#D2B2FF"
+          strokeWidth="1.6"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    </>
+  )
+}

src/components/atoms/BottomSheet/index.tsx

@@ -1,13 +1,73 @@
 import styled from '@emotion/styled'
-import { useState } from 'react'
-const BottomSheet = () => {
-  const [expanded, setExpanded] = useState(false)
-  return <BottomSheetContainer></BottomSheetContainer>
+import { useState, useEffect, ReactNode } from 'react'
+import Dimmer from '@components/layouts/Dimmer'
+import { useOutsideClick } from '@libs/hooks/useOutsideClick'
+import { theme } from '@styles/theme'
+import { motion } from 'framer-motion'
+
+const BottomSheet = ({
+  delaytime,
+  children,
+}: {
+  delaytime?: number
+  children?: ReactNode
+}) => {
+  const [expanded, setExpanded] = useState(true)
+  const [outsideRef, handleClickEditProfileDimmer] = useOutsideClick(() =>
+    setExpanded(false),
+  )
+  useEffect(() => {
+    if (delaytime) {
+      setTimeout(() => {
+        setExpanded(false)
+      }, delaytime)
+    }
+  }, [])
+
+  return (
+    <>
+      {expanded ? (
+        <Dimmer dimmerRef={outsideRef} onClick={handleClickEditProfileDimmer} />
+      ) : (
+        ''
+      )}
+      <BottomSheetContainer
+        initial={{ y: '100%' }}
+        animate={{ y: expanded ? '0%' : '100%' }}
+        transition={{
+          duration: 1,
+          type: 'spring',
+          damping: 40,
+          stiffness: 400,
+        }}
+      >
+        <div
+          style={{
+            borderRadius: '40px',
+            width: '32px',
+            height: '4px',
+            backgroundColor: `${theme.palette.gray_500}`,
+            marginBottom: '60px',
+          }}
+        />
+        {children}
+      </BottomSheetContainer>
+    </>
+  )
 }
 
 export default BottomSheet
 
-const BottomSheetContainer = styled.div`
+const BottomSheetContainer = styled(motion.div)`
   display: flex;
+  position: absolute;
+  bottom: 0px;
   flex-direction: column;
+  align-items: center;
+  background-color: ${theme.palette.background};
+  width: 100%;
+  height: 330px;
+  z-index: 1000;
+  border-radius: 24px 24px 0px 0px;
+  padding: 16px;
 `

src/components/atoms/Category/Category.stories.tsx

@@ -38,14 +38,6 @@ const meta = {
         type: 'function',
       },
     },
-    onShowMorePreferencesClick: {
-      name: 'onShowMorePreferencesClick',
-      description:
-        '취향 더보기 버튼 클릭 시 발생할 이벤트를 넘겨주는 함수입니다.',
-      control: {
-        type: 'function',
-      },
-    },
   },
 } as Meta<typeof Category>