wip

AboutClan · Oct 11, 2024 · 6671b34 · 6671b34
1 parent c71b877
commit 6671b34
Show file tree

Hide file tree

Showing 21 changed files with 439 additions and 400 deletions.
diff --git a/components/BottomNav.tsx b/components/BottomNav.tsx
@@ -1,4 +1,4 @@
-import { Box } from "@chakra-ui/react";
+import { Box, Flex } from "@chakra-ui/react";
 import { useSession } from "next-auth/react";
 import Link, { LinkProps } from "next/link";
 import { usePathname, useSearchParams } from "next/navigation";
@@ -8,7 +8,7 @@ import styled from "styled-components";
 import { getStudyStandardDate } from "../libs/study/date/getStudyStandardDate";
 import { slideDirectionState } from "../recoils/navigationRecoils";
 import { convertLocationLangTo } from "../utils/convertUtils/convertDatas";
-import { getBottomNavSize } from "../utils/mathUtils";
+import { iPhoneNotchSize } from "../utils/validationUtils";
 import { CommunityIcon, HomeIcon, StudyIcon, ThunderIcon, UserIcon } from "./Icons/BottomNavIcons";
 
 interface INavButtonProps {
@@ -34,7 +34,7 @@ export default function BottomNav() {
   const locationEn = convertLocationLangTo(session?.user.location, "en");
 
   return (
-    <Nav height={getBottomNavSize()}>
+    <Nav>
       {navItems.map((item, idx) => {
         const getParams = (category: Category) => {
           switch (category) {
@@ -78,11 +78,13 @@ function NavButton({ text, url, activeIcon, defaultIcon, isActive, idx }: INavBu
       replace={!text}
       className={`bottom_nav${idx}`}
     >
-      <Box>{isActive ? activeIcon || defaultIcon : defaultIcon}</Box>
+      <Flex justify="center" align="center" w="26px" h="26px">
+        {isActive ? activeIcon || defaultIcon : defaultIcon}
+      </Flex>
       <Box
         as="span"
+        mt="2px"
         fontSize="11px"
-        fontWeight={500}
         color={isActive ? "var(--color-mint)" : "var(--gray-400)"}
       >
         {text}
@@ -124,21 +126,19 @@ const navItems: INavButtonProps[] = [
   },
 ];
 
-const Nav = styled.nav<{ height: number }>`
+const Nav = styled.nav`
   width: 100%;
   display: flex;
-  justify-content: even;
   position: fixed;
   bottom: 0;
-  height: ${(props) => `${props.height}px`};
+  height: ${52 + iPhoneNotchSize()}px;
   background-color: white;
   z-index: 10;
+  padding-bottom: ${iPhoneNotchSize()}px;
 
   border-top: var(--border);
   max-width: var(--max-width);
   margin: 0 auto;
-  padding-top: ${(props) => (props.height > 90 ? 0 : "4px")};
-  padding-bottom: ${(props) => (props.height > 90 ? "4px" : 0)};
 `;
 
 const NavLink = styled(Link)<{ isactive: "true" | "false" } & LinkProps>`

diff --git a/components/Icons/CircleIcons.tsx b/components/Icons/CircleIcons.tsx
@@ -0,0 +1,21 @@
+export const CheckCircleIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
+    <g clip-path="url(#clip0_2105_2224)">
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M8.6 5.1L5.8 7.9C5.7 8 5.6 8.05 5.45 8.05C5.3 8.05 5.2 8 5.1 7.9L3.4 6.2C3.2 6 3.2 5.7 3.4 5.5C3.6 5.3 3.9 5.3 4.1 5.5L5.45 6.85L7.9 4.4C8.1 4.2 8.4 4.2 8.6 4.4C8.8 4.6 8.8 4.9 8.6 5.1Z"
+        fill="white"
+      />
+      <path
+        d="M6 1.5C8.5 1.5 10.5 3.5 10.5 6C10.5 8.5 8.5 10.5 6 10.5C3.5 10.5 1.5 8.5 1.5 6C1.5 3.5 3.5 1.5 6 1.5ZM6 0.5C2.95 0.5 0.5 2.95 0.5 6C0.5 9.05 2.95 11.5 6 11.5C9.05 11.5 11.5 9.05 11.5 6C11.5 2.95 9.05 0.5 6 0.5Z"
+        fill="white"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_2105_2224">
+        <rect width="12" height="12" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
diff --git a/components/organisms/VoteMap.tsx b/components/organisms/VoteMap.tsx
@@ -28,11 +28,17 @@ export default function VoteMap({
     polylines: [],
     infoWindow: [],
   });
-  console.log(0);
+
   useEffect(() => {
     if (!mapRef?.current || typeof naver === "undefined" || !mapOptions) return;
-    console.log(1);
-    const map = new naver.maps.Map(mapRef.current, mapOptions);
+
+    const map = new naver.maps.Map(mapRef.current, {
+      ...mapOptions,
+      logoControl: true,
+      logoControlOptions: {
+        position: naver.maps.Position.BOTTOM_LEFT,
+      },
+    });
     mapInstanceRef.current = map;
   }, [mapOptions]);
 

diff --git a/components/organisms/drawer/BottomFlexDrawer.tsx b/components/organisms/drawer/BottomFlexDrawer.tsx
@@ -2,33 +2,10 @@ import { Button } from "@chakra-ui/react";
 import { motion } from "framer-motion";
 import { useRef, useState } from "react";
 import styled from "styled-components";
-import { IModal } from "../../../types/components/modalTypes";
 import { iPhoneNotchSize } from "../../../utils/validationUtils";
 
-export interface IBottomDrawerLgOptions {
-  header?: {
-    title: string;
-    subTitle: string;
-  };
-  footer?: {
-    buttonText: string;
-    onClick: () => void;
-    buttonLoading?: boolean;
-  };
-}
-
-interface IBottomDrawerLg extends IModal {
-  options?: IBottomDrawerLgOptions;
-  children: React.ReactNode;
-  isAnimation?: boolean;
-  height?: number;
-  isxpadding?: boolean;
-  isOverlay?: boolean;
-  isLittleClose?: boolean;
-  paddingOptions?: {
-    bottom?: number;
-  };
-}
+export const DRAWER_MIN_HEIGHT = 40;
+export const DRAWER_MAX_HEIGHT = 650; // 최대 높이
 
 export default function BottomFlexDrawer({
   setIsModal,
@@ -40,14 +17,16 @@ export default function BottomFlexDrawer({
   isOverlay = true,
   isLittleClose,
   paddingOptions,
-}: IBottomDrawerLg) {
+}: any) {
   const header = options?.header;
   const footer = options?.footer;
 
   const [drawerHeight, setDrawerHeight] = useState(height); // 초기 높이
   const startYRef = useRef(0); // 드래그 시작 위치 저장
   const currentHeightRef = useRef(drawerHeight); // 현재 높이 저장
 
+  const SWIPE_THRESHOLD = 40; // 스와이프 임계값
+
   const handlePointerDown = (event) => {
     startYRef.current = event.clientY || event.touches[0].clientY; // 드래그 시작 위치 저장
     currentHeightRef.current = drawerHeight; // 드래그 시작 시점의 높이 저장
@@ -58,77 +37,79 @@ export default function BottomFlexDrawer({
   const handlePointerMove = (event) => {
     const currentY = event.clientY || event.touches[0].clientY;
     const deltaY = startYRef.current - currentY; // 드래그한 만큼의 변화량
-
-    const newHeight = Math.max(currentHeightRef.current + deltaY, 60); // 최소 높이 60 설정
-    setDrawerHeight(newHeight); // 높이 업데이트
+    const newHeight = Math.max(currentHeightRef.current + deltaY, DRAWER_MIN_HEIGHT); // 최소 높이 설정
+    setDrawerHeight(newHeight); // 드래그 중 높이 업데이트
   };
 
-  const handlePointerUp = () => {
+  const handlePointerUp = (event) => {
+    const endY = event.clientY || event.touches[0].clientY;
+    const deltaY = startYRef.current - endY; // 드래그한 만큼의 변화량
+
     window.removeEventListener("pointermove", handlePointerMove);
     window.removeEventListener("pointerup", handlePointerUp);
 
-    // 드래그 종료 후 닫기 조건 확인
-    if (drawerHeight < 100 && isLittleClose) {
-      setDrawerHeight(60); // 최소 높이로 설정
-      setIsModal(false);
+    // 스와이프 종료 시 부드럽게 애니메이션 적용
+    if (deltaY > SWIPE_THRESHOLD) {
+      console.log("Swiped up"); // 위로 스와이프
+      setDrawerHeight(DRAWER_MAX_HEIGHT); // 위로 쭉 올라가는 동작
+    } else if (deltaY < -SWIPE_THRESHOLD) {
+      console.log("Swiped down"); // 아래로 스와이프
+      setDrawerHeight(DRAWER_MIN_HEIGHT); // 아래로 내려가는 동작
+    } else {
+      console.log("Swipe too short, resetting to original height");
+      setDrawerHeight(currentHeightRef.current); // 스와이프가 임계값보다 짧으면 원래 높이로 복원
     }
   };
 
   return (
-    <>
-      <Layout
-        as={motion.div}
-        height={drawerHeight}
-        isxpadding={isxpadding.toString()}
-        paddingoptions={paddingOptions}
-        onPointerDown={handlePointerDown} // 드래그 시작 시
-      >
-        <TopNav />
+    <Layout
+      as={motion.div}
+      animate={{ height: drawerHeight }} // 애니메이션 적용
+      transition={{ type: "spring", stiffness: 300, damping: 30 }} // 부드러운 스프링 애니메이션
+      isxpadding={isxpadding.toString()}
+      paddingoptions={paddingOptions}
+      onPointerDown={handlePointerDown} // 드래그 시작 시
+    >
+      <TopNav />
 
-        {header && drawerHeight > 100 && (
-          <Header>
-            <span>{header.subTitle}</span>
-            <span>{header.title}</span>
-          </Header>
-        )}
-        {drawerHeight > 100 && children}
-        {footer && drawerHeight > 100 && (
-          <Button
-            w="100%"
-            mt="auto"
-            colorScheme="mintTheme"
-            size="lg"
-            isLoading={footer.buttonLoading}
-            borderRadius="var(--rounded-lg)"
-            onClick={footer.onClick}
-          >
-            {footer.buttonText}
-          </Button>
-        )}
-      </Layout>
-    </>
+      {header && drawerHeight > 100 && (
+        <Header>
+          <span>{header.subTitle}</span>
+          <span>{header.title}</span>
+        </Header>
+      )}
+      {drawerHeight > 100 && children}
+      {footer && drawerHeight > 100 && (
+        <Button
+          w="100%"
+          mt="auto"
+          colorScheme="mintTheme"
+          size="lg"
+          isLoading={footer.buttonLoading}
+          borderRadius="var(--rounded-lg)"
+          onClick={footer.onClick}
+        >
+          {footer.buttonText}
+        </Button>
+      )}
+    </Layout>
   );
 }
 
 const Layout = styled.div<{
   paddingoptions: { bottom?: number };
-  height: number;
   isxpadding: string;
 }>`
-  height: ${(props) => props.height + iPhoneNotchSize()}px;
   position: fixed;
-  bottom: 100px;
+  bottom: ${52 + iPhoneNotchSize()}px;
   width: 100%;
   max-width: var(--max-width);
   border-top-left-radius: 20px;
   border-top-right-radius: 20px;
   background-color: white;
   z-index: 500;
   padding: ${(props) => (props.isxpadding === "true" ? "12px 20px" : "12px 0")};
-  padding-bottom: ${(props) =>
-    props.isxpadding === "true" && props?.paddingoptions?.bottom !== 0
-      ? `${20 + iPhoneNotchSize()}px`
-      : iPhoneNotchSize()};
+  padding-bottom: 0;
   display: flex;
   flex-direction: column;
   align-items: center;

diff --git a/hooks/custom/CustomHooks.tsx b/hooks/custom/CustomHooks.tsx
@@ -1,10 +1,9 @@
 import axios from "axios";
 import { useCallback, useEffect, useState } from "react";
 import { useQueryClient } from "react-query";
-import { useSetRecoilState } from "recoil";
 
 import { STUDY_VOTE, USER_INFO } from "../../constants/keys/queryKeys";
-import { myStudyInfoState, studyPairArrState } from "../../recoils/studyRecoils";
+
 import { IStudyVotePlaces } from "../../types/models/studyTypes/studyInterActions";
 import { useStudyPreferenceMutation } from "../study/mutations";
 import { useToast } from "./CustomToast";
@@ -41,15 +40,15 @@ export const useResetQueryData = () => {
 };
 export const useResetStudyQuery = () => {
   const queryClient = useQueryClient();
-  const setStudyPairArr = useSetRecoilState(studyPairArrState);
-  const setMyStudy = useSetRecoilState(myStudyInfoState);
+  // const setStudyPairArr = useSetRecoilState(studyPairArrState);
+  // const setMyStudy = useSetRecoilState(myStudyInfoState);
 
   const refetchWithDelay = useCallback(
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     () => {
       queryClient.invalidateQueries({ queryKey: [STUDY_VOTE], exact: false });
-      setStudyPairArr(null);
-      setMyStudy(null);
+      // setStudyPairArr(null);
+      // setMyStudy(null);
     },
     [queryClient],
   );

diff --git a/libs/study/getMyStudy.ts b/libs/study/getMyStudy.ts