Merge pull request peer-42seoul#456 from SaltySalt77/feat/hitchDemo

[H-HITCH] 히치하이킹 토글 및 버튼 추가
asroq1 · Jan 4, 2024 · a732401 · a732401
2 parents aae638d + adf1f1d
commit a732401
Show file tree

Hide file tree

Showing 9 changed files with 452 additions and 152 deletions.
diff --git a/src/app/hitchhiking/hitchhiking.style.ts b/src/app/hitchhiking/hitchhiking.style.ts
@@ -0,0 +1,7 @@
+import { SxProps } from '@mui/material'
+
+export const HeaderStyle: SxProps = {
+  width: '100%',
+  height: '2.5rem',
+  py: '0.44rem',
+}
diff --git a/src/app/hitchhiking/page.tsx b/src/app/hitchhiking/page.tsx
@@ -6,14 +6,19 @@ import React, { useEffect, useState } from 'react'
 import useSWR from 'swr'
 import { IPagination } from '@/types/IPagination'
 import CardContainer from './panel/CardContainer'
-import CuToggle from '@/components/CuToggle'
+import CuTypeToggle from '@/components/CuTypeToggle'
 import useMedia from '@/hook/useMedia'
 import Interest from './panel/Interest'
+// import CuButton from '@/components/CuButton'
+import * as cardStyle from './panel/HitchhikingCard.style'
+// import * as style from './Hitchhiking.style'
 
 const Hitchhiking = () => {
   const [page, setPage] = useState<number>(1)
   const [isProject, setIsProject] = useState(false)
   const [cardList, setCardList] = useState<Array<IMainCard>>([])
+  const [draggedCardList, setDraggedCardList] = useState<IMainCard[]>([])
+  console.log(draggedCardList)
 
   const { isPc } = useMedia()
   const { data, isLoading, error } = useSWR<IPagination<Array<IMainCard>>>(
@@ -23,6 +28,11 @@ const Hitchhiking = () => {
     defaultGetFetcher,
   )
 
+  const handleChange = () => {
+    setCardList([])
+    setIsProject((prev) => !prev)
+  }
+
   useEffect(() => {
     if (!isLoading && data?.content) {
       setCardList((prev) => {
@@ -32,51 +42,106 @@ const Hitchhiking = () => {
     }
   }, [isLoading, data?.content])
 
+  const removeCard = (recruit_id: number) => {
+    setDraggedCardList((prev: IMainCard[]) => {
+      prev.push(cardList[cardList.length - 1])
+      return prev
+    })
+    setCardList((prev: IMainCard[]) => {
+      return prev.filter((card) => card.recruit_id !== recruit_id)
+    })
+    if (cardList.length === 2) {
+      setPage((prev) => (!data?.last ? prev + 1 : prev))
+    }
+    console.log('cardList.length')
+    console.log(cardList.length)
+    console.log('cardList')
+    console.log(cardList)
+  }
+
+  // const addCard = () => {
+  //   setCardList((prev: IMainCard[]) => {
+  //     return [...prev, draggedCardList[0]]
+  //   })
+  //   setDraggedCardList((prev: IMainCard[]) => {
+  //     return prev.filter(
+  //       (card) => card.recruit_id !== draggedCardList[0].recruit_id,
+  //     )
+  //   })
+  // }
+
   let message: string = ''
 
-  if (isLoading && !cardList.length) message = '로딩중'
+  if (!isLoading && !cardList.length) message = '히치하이킹 끝!'
+  else if (isLoading && !cardList.length) message = '로딩중'
   else if (error) message = '에러 발생'
 
   return (
     <Stack
       justifyContent={'space-between'}
       alignItems={'center'}
-      sx={{ width: '100%', height: '80svh', overflow: 'hidden' }}
+      sx={{
+        width: '100%',
+        height: isPc ? '90svh' : '80svh',
+        overflow: 'hidden',
+        bottom: 0,
+      }}
       direction={'column'}
     >
-      <FormControlLabel
-        control={
-          <CuToggle
-            checked={isProject}
-            onChange={() => setIsProject((prev) => !prev)}
-          />
-        }
-        label="Label"
-      />
+      <Stack
+        sx={{ width: '100%' }}
+        justifyContent={'center'}
+        alignItems={'center'}
+        direction={'row'}
+        spacing={'0.5rem'}
+      >
+        <Typography
+          variant="Caption"
+          color={!isProject ? 'purple.normal' : 'text.assistive'}
+          sx={{ transition: 'color 0.5s ease' }}
+        >
+          스터디
+        </Typography>
+        <FormControlLabel
+          control={<CuTypeToggle checked={isProject} onChange={handleChange} />}
+          label={''}
+        />
+        <Typography
+          variant="Caption"
+          color={isProject ? 'purple.normal' : 'text.assistive'}
+          sx={{ transition: 'color 0.5s ease' }}
+        >
+          프로젝트
+        </Typography>
+      </Stack>
       <Stack
         justifyContent={'center'}
         alignItems={'center'}
         sx={{
-          width: isPc ? '20.5rem' : '93vw',
-          height: '27rem',
-          maxWidth: '20.5rem',
+          ...(isPc ? cardStyle.cardPcSize : cardStyle.cardMobileSize),
           position: 'relative',
         }}
       >
         {!message ? (
           <CardContainer
             cardList={cardList}
-            update={() => setPage((prev) => (!data?.last ? prev + 1 : prev))}
-            setCardList={setCardList}
+            removeCard={removeCard}
             isProject={isProject}
           />
         ) : (
           <Typography>{message}</Typography>
         )}
       </Stack>
-      {/* {cardList.length && ( */}
+      {/* <CuButton
+          message="되돌리기"
+          action={addCard}
+          disabled={!draggedCardList.length}
+        /> */}
       <Interest id={cardList[cardList.length - 1]?.recruit_id} />
-      {/* )} */}
+      {/* <CuButton
+          message="관심없음"
+          action={() => removeCard(cardList[cardList.length - 1]?.recruit_id)}
+        /> */}
     </Stack>
   )
 }

diff --git a/src/app/hitchhiking/panel/CardContainer.tsx b/src/app/hitchhiking/panel/CardContainer.tsx
@@ -1,11 +1,12 @@
 'use client'
 
 import { IMainCard } from '@/types/IPostDetail'
-import { Box, Typography } from '@mui/material'
+import { Box } from '@mui/material'
 import React, { useState } from 'react'
 import { motion, AnimatePresence } from 'framer-motion'
 import HitchhikingCard from './HitchhikingCard'
-import { cardStyle } from './HitchhikingCard.style'
+import * as style from './HitchhikingCard.style'
+import useMedia from '@/hook/useMedia'
 
 enum ESwipeDirection {
   left = 'left',
@@ -16,18 +17,15 @@ enum ESwipeDirection {
 
 const CardContainer = ({
   cardList,
-  update,
-  setCardList,
+  removeCard,
   isProject,
 }: {
   cardList: Array<IMainCard>
-  update: () => void
-  setCardList: (
-    cardList: IMainCard[] | ((prev: IMainCard[]) => IMainCard[]),
-  ) => void
+  removeCard: (recruit_id: number) => void
   isProject: boolean
 }) => {
   const [dragged, setDragged] = useState(false)
+  const { isPc } = useMedia()
 
   console.log('cardList')
   console.log(cardList)
@@ -55,37 +53,30 @@ const CardContainer = ({
 
       return
     }
+    removeCard(recruit_id)
+    console.log(`dislike api 호출 pathValue: ${recruit_id}, title: ${title}`)
 
-    setCardList((prev: IMainCard[]) => {
-      console.log(`dislike api 호출 pathValue: ${recruit_id}, title: ${title}`)
-      return prev.filter((card) => card.recruit_id !== recruit_id)
-    })
-    if (cardList.length === 2) {
-      update()
-    }
     setDragged(false)
   }
 
   return (
     <>
-      <Box width={1} height={1} position={'relative'} sx={{ zIndex: 500 }}>
+      <Box
+        position={'relative'}
+        sx={isPc ? style.cardPcSize : style.cardMobileSize}
+      >
         <motion.div
           animate={{
             opacity: cardList.length > 2 ? 1 : 0,
             transform: cardList.length > 2 ? 'rotate(-2.5deg)' : 'rotate(0deg)',
             position: 'absolute',
-            top: '0',
-            left: '0',
           }}
           transition={{ duration: 0.8 }}
         >
           <Box
             sx={{
-              ...cardStyle,
+              ...(isPc ? style.cardPcSize : style.cardMobileSize),
               backgroundColor: 'text.assistive',
-              top: '0',
-              left: '0',
-              position: 'static',
             }}
           />
         </motion.div>
@@ -99,69 +90,60 @@ const CardContainer = ({
         >
           <Box
             sx={{
-              ...cardStyle,
+              ...(isPc ? style.cardPcSize : style.cardMobileSize),
               backgroundColor: 'text.assistive',
-              position: 'static',
             }}
           />
         </motion.div>
-        {cardList.length > 1 && (
-          <>
-            <AnimatePresence>
-              {cardList.map((card, i) => {
-                if (cardList.length - i > 2) return null
-                return (
-                  <motion.div
-                    key={card.recruit_id}
-                    initial={{
-                      scale: 0.8,
-                      opacity: 0,
-                    }}
-                    animate={{
-                      scale: i === cardList.length - 1 ? 1 : 0.8,
-                      opacity: i === cardList.length - 1 ? 1 : 0,
-                    }}
-                    style={{
-                      display: i === cardList.length - 1 ? 'block' : 'none',
-                    }}
-                    exit={{ opacity: 0 }}
-                    drag
-                    dragSnapToOrigin
-                    whileDrag={{ scale: 1.2 }}
-                    dragElastic={1}
-                    dragConstraints={{
-                      left: 0,
-                      right: 0,
-                      bottom: 0,
-                    }}
-                    dragTransition={{ bounceStiffness: 300, bounceDamping: 15 }}
-                    onDragStart={() => setDragged(true)}
-                    onDragEnd={(e: any, info: any) =>
-                      handleDragEnd(e, info, card.recruit_id, card.title)
-                    }
-                    transition={{ duration: 0.5 }}
-                  >
-                    <HitchhikingCard
-                      authorImage={card.user_thumbnail}
-                      teamName={card.user_nickname}
-                      title={card.title}
-                      tagList={card.tagList}
-                      image={card.image}
-                      postId={card.recruit_id}
-                      sx={cardStyle}
-                      dragged={dragged}
-                      setDragged={setDragged}
-                      isProject={isProject}
-                    />
-                  </motion.div>
-                )
-              })}
-            </AnimatePresence>
-          </>
-        )}
+        <AnimatePresence>
+          {cardList.map((card, i) => {
+            console.log(`i : ${i}`)
+            if (cardList.length > 2 && cardList.length - i > 2) return null
+            return (
+              <motion.div
+                key={card.recruit_id}
+                initial={{
+                  scale: 0.8,
+                  opacity: 0,
+                }}
+                animate={{
+                  scale: i === cardList.length - 1 ? 1 : 0.8,
+                  opacity: i === cardList.length - 1 ? 1 : 0,
+                }}
+                exit={{ opacity: 0 }}
+                drag
+                dragSnapToOrigin
+                whileDrag={{ scale: 1.2 }}
+                dragElastic={1}
+                dragConstraints={{
+                  left: 0,
+                  right: 0,
+                  bottom: 0,
+                }}
+                dragTransition={{ bounceStiffness: 300, bounceDamping: 50 }}
+                onDragStart={() => setDragged(true)}
+                onDragEnd={(e: any, info: any) =>
+                  handleDragEnd(e, info, card.recruit_id, card.title)
+                }
+                transition={{ duration: 0.3 }}
+              >
+                <HitchhikingCard
+                  authorImage={card.user_thumbnail}
+                  teamName={card.user_nickname}
+                  title={card.title}
+                  tagList={card.tagList}
+                  image={card.image}
+                  postId={card.recruit_id}
+                  sx={isPc ? style.cardPcStyleBase : style.cardMobileStyleBase}
+                  dragged={dragged}
+                  setDragged={setDragged}
+                  isProject={isProject}
+                />
+              </motion.div>
+            )
+          })}
+        </AnimatePresence>
       </Box>
-
-      <Typography sx={{ zIndex: 0 }}>히치하이킹 끝!</Typography>
     </>
   )
 }