Merge pull request #235 from Meetfolio-Project-CodeZ-Team/develop

merge to main
Meetfolio-Project-CodeZ-Team · Jun 6, 2024 · bee28c6 · bee28c6
2 parents 9c2c3ed + f33d7a3
commit bee28c6
Show file tree

Hide file tree

Showing 14 changed files with 260 additions and 321 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -21,7 +21,7 @@
     "cookie": "^0.6.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-prettier": "^9.1.0",
-    "framer-motion": "^11.2.6",
+    "framer-motion": "^11.2.10",
     "next": "14.1.4",
     "prettier": "^3.2.5",
     "react": "^18",
@@ -31,7 +31,7 @@
     "react-router-dom": "^6.22.3",
     "react-toastify": "^10.0.5",
     "recoil": "^0.7.7",
-    "swiper": "^11.1.1",
+    "swiper": "^11.1.4",
     "tailwind-scrollbar-hide": "^1.1.7"
   },
   "devDependencies": {

diff --git a/src/app/components/coverletter/CovletEditFeed.tsx b/src/app/components/coverletter/CovletEditFeed.tsx
diff --git a/src/app/components/coverletter/CovletMain.tsx b/src/app/components/coverletter/CovletMain.tsx
@@ -125,6 +125,7 @@ const CovletMain = ({ isEdit, id }: CovletFinishContainerProps) => {
     }
   }, [isEdit, id])
 
+
   const handleToggle = () => {
     setEnabled(!enabled)
     const newShareType = !enabled ? 'PUBLIC' : 'PRIVATE'

diff --git a/src/app/components/coverletter/CovletSave.tsx b/src/app/components/coverletter/CovletSave.tsx
@@ -257,6 +257,8 @@ const CovletSave = () => {
       const data = await response.json()
       setAnalysisData(data)
       setAnalysisReceived(true)
+      console.log(data, 'data')
+      console.log('coverID', coverLetterId)
     } catch (error) {
       console.error('직무 역량 분석 요청에 실패했습니다.', error)
       alert('직무 역량 분석 요청에 실패했습니다. 오류를 확인해주세요.')
@@ -267,7 +269,7 @@ const CovletSave = () => {
 
   const handleSaveWithoutFeedback = async () => {
     const { coverLetterId } = coverletterData
-    router.push(`/mypage/myCovletDetail/${coverLetterId}`)
+    router.push(`/mypage`)
   }
 
   if (isLoading) {

diff --git a/src/app/components/experience/ExpFinishContainer.tsx b/src/app/components/experience/ExpFinishContainer.tsx
@@ -5,24 +5,22 @@ import { expData, expNum, modalNum } from '../../recoil/experience'
 import ExpFinishModal1 from './ExpFinishModal1'
 import ExpFinishModal2 from './ExpFinishModal2'
 import ExpFinishModal3 from './ExpFinishModal3'
+import { Swiper, SwiperSlide } from 'swiper/react';
+import 'swiper/swiper-bundle.css';
+import { Navigation } from 'swiper/modules'
+import { useEffect, useRef } from 'react'
+import { useRouter } from 'next/navigation'
 
 const ExpFinishContainer = () => {
   const [experienceNumber, setExperienceNumber] = useRecoilState(expNum)
   const [experienceData, setExperienceData] = useRecoilState(expData)
   const [pageNumber, setPageNumber] = useRecoilState(modalNum)
+  const router = useRouter()
+  const prevRef = useRef<HTMLDivElement>(null)
+  const nextRef = useRef<HTMLDivElement>(null)
+  const swiperRef = useRef<any>(null)
 
-  const getCurrentModal = () => {
-    switch (pageNumber) {
-      case 0:
-        return <ExpFinishModal1 />
-      case 1:
-        return <ExpFinishModal2 />
-      case 2:
-        return <ExpFinishModal3 />
-      default:
-        return null
-    }
-  }
+
 
   const goToPreviousPage = () => {
     setExperienceNumber(experienceNumber - 1)
@@ -55,6 +53,14 @@ const ExpFinishContainer = () => {
       console.error('데이터 저장에 실패했습니다.')
     }
   }
+  useEffect(() => {
+    if (swiperRef.current && prevRef.current && nextRef.current) {
+      swiperRef.current.params.navigation.prevEl = prevRef.current;
+      swiperRef.current.params.navigation.nextEl = nextRef.current;
+      swiperRef.current.navigation.init();
+      swiperRef.current.navigation.update();
+    }
+  }, []);
 
   return (
     <div className="justify-center items-center">
@@ -164,7 +170,40 @@ const ExpFinishContainer = () => {
           저장하기
         </button>
       </div>
-      <div className="justify-center items-center">{getCurrentModal()}</div>
+      <div className="fixed inset-0 flex items-center justify-center z-50">
+      <div className="absolute inset-0 bg-black bg-opacity-50" />
+        <Swiper onSwiper={(swiper) => (swiperRef.current = swiper)}
+          spaceBetween={50}
+          slidesPerView={1}
+          onSlideChange={(swiper) => setPageNumber(swiper.activeIndex)}
+          initialSlide={pageNumber}
+          navigation={{
+            prevEl: prevRef.current,
+            nextEl: nextRef.current,
+          }}
+          modules={[Navigation]}
+          className="w-full h-full max-w-[630px] max-h-[720px]">
+          <SwiperSlide>
+            <ExpFinishModal1 />
+          </SwiperSlide>
+          <SwiperSlide>
+            <ExpFinishModal2 />
+          </SwiperSlide>
+          <SwiperSlide>
+            <ExpFinishModal3 />
+          </SwiperSlide>
+          <div
+            ref={prevRef}
+            className="swiper-button-prev swiper-button-disabled"
+            style={{ color: '#FAFBFD' }}
+          ></div>
+          <div
+            ref={nextRef}
+            className="swiper-button-next"
+            style={{ color: '#FAFBFD' }}
+          ></div>
+        </Swiper>
+      </div>
     </div>
   )
 }

diff --git a/src/app/components/experience/ExpFinishModal1.tsx b/src/app/components/experience/ExpFinishModal1.tsx
@@ -14,23 +14,7 @@ const ExpFinishModal1 = () => {
   const [portfolioNumber, setPortfolioNumber] = useRecoilState(portNum)
   const router = useRouter()
 
-  const totalPages = 3
-
-  const handleNextClick = () => {
-    if (pageNumber < totalPages - 1) {
-      setPageNumber(pageNumber + 1)
-    } else {
-      setPageNumber(0)
-    }
-  }
-
-  const handlePrevClick = () => {
-    if (pageNumber > 0) {
-      setPageNumber(pageNumber - 1)
-    } else {
-      setPageNumber(totalPages - 1)
-    }
-  }
+
 
   const handleButtonClick = () => {
     setExperienceData({
@@ -52,7 +36,7 @@ const ExpFinishModal1 = () => {
 
   return (
     <div className="fixed top-0 left-0 w-full h-full flex items-center justify-center z-50">
-      <div className="absolute w-full h-full justify-center items-center bg-black bg-opacity-50" />
+      <div className="absolute w-full h-full justify-center items-center " />
       <div className="w-[500px] h-[650px] relative bg-slate-200 rounded-[10px]">
         <div className="w-[436.91px] h-[73px] left-[30px] top-[120px] absolute flex-col justify-start items-start gap-3 inline-flex">
           <div className="justify-start items-start gap-3 inline-flex">
@@ -65,38 +49,27 @@ const ExpFinishModal1 = () => {
               </div>
             </div>
           </div>
-          <div className="w-[373px]  relative">
-            <div className="px-5 left-[140.62px] top-0 absolute bg-gray-900 rounded-[30px] justify-center items-center gap-[5px] inline-flex">
-              <div className="text-center text-white text-sm font-bold leading-[23px]">
-                {experienceData.expStacks.join(' / ')}
-              </div>
-            </div>
-            <div className="w-[142.74px]  left-0 top-0 absolute justify-start items-start gap-3 inline-flex">
+          <div className="w-[373px] flex flex-inline gap-3 relative">
+            <div className="flex items-center gap-3">
               <div className="text-center text-gray-900 text-[16px] font-bold leading-[27px]">
                 직무 |{' '}
               </div>
-              <div className=" px-5 bg-gray-900 top-[1px] rounded-[30px] justify-center items-center gap-[5px] flex">
+              <div className="px-5 bg-gray-900 rounded-[30px] justify-center items-center gap-[5px] flex">
                 <div className="text-center text-white text-sm font-semibold leading-[23px]">
-                  {transKeyword(experienceData.jobKeyword)}
+                {transKeyword(experienceData.jobKeyword)}
+                </div>
+              </div>
+            </div>
+            <div className="flex items-center gap-3">
+              <div className="px-5 bg-gray-900 rounded-[30px] justify-center items-center gap-[5px] flex">
+                <div className="text-center text-white text-sm font-bold leading-[23px]">
+                {experienceData.expStacks.join(' / ')}
                 </div>
               </div>
             </div>
           </div>
         </div>
-        <div className="w-[640px] h-[52px] mt-[280px] ml-[-75px] justify-start items-start gap-[580px] inline-flex absolute">
-          <div
-            className="w-[26px] h-[52px] relative cursor-pointer"
-            onClick={handlePrevClick}
-          >
-            <PrevArrow />
-          </div>
-          <div
-            className="w-[26px] h-[52px] relative cursor-pointer"
-            onClick={handleNextClick}
-          >
-            <NextArrow />
-          </div>
-        </div>
+
         <div className="left-[30px] top-[214px] absolute text-black text-lg font-semibold leading-[27px]">
           업무 사항{' '}
         </div>

diff --git a/src/app/components/experience/ExpFinishModal2.tsx b/src/app/components/experience/ExpFinishModal2.tsx
@@ -14,23 +14,7 @@ const ExpFinishModal2 = () => {
   const [portfolioNumber, setPortfolioNumber] = useRecoilState(portNum)
   const router = useRouter()
 
-  const totalPages = 3
-
-  const handleNextClick = () => {
-    if (pageNumber < totalPages - 1) {
-      setPageNumber(pageNumber + 1)
-    } else {
-      setPageNumber(0)
-    }
-  }
-
-  const handlePrevClick = () => {
-    if (pageNumber > 0) {
-      setPageNumber(pageNumber - 1)
-    } else {
-      setPageNumber(totalPages - 1)
-    }
-  }
+
 
   const handleButtonClick = () => {
     setExperienceData({
@@ -51,8 +35,8 @@ const ExpFinishModal2 = () => {
   }
 
   return (
-    <div className="fixed top-0 left-0 w-full h-full flex items-center justify-center z-50">
-      <div className="absolute w-full h-full justify-center items-center bg-black bg-opacity-50" />
+    <div className="fixed top-0 left-0 w-full h-full flex items-center justify-center ">
+      <div className="absolute w-full h-full justify-center items-center " />
       <div className="w-[500px] h-[650px] relative bg-slate-200 rounded-[10px]">
         <div className="w-[436.91px] h-[73px] left-[30px] top-[120px] absolute flex-col justify-start items-start gap-3 inline-flex">
           <div className="justify-start items-start gap-3 inline-flex">
@@ -65,36 +49,24 @@ const ExpFinishModal2 = () => {
               </div>
             </div>
           </div>
-          <div className="w-[373px]  relative">
-            <div className="px-5 left-[140.62px] top-0 absolute bg-gray-900 rounded-[30px] justify-center items-center gap-[5px] inline-flex">
-              <div className="text-center text-white text-sm font-bold leading-[23px]">
-                {experienceData.expStacks.join(' / ')}
-              </div>
-            </div>
-            <div className="w-[142.74px]  left-0 top-0 absolute justify-start items-start gap-3 inline-flex">
+          <div className="w-[373px] flex flex-inline gap-3 relative">
+            <div className="flex items-center gap-3">
               <div className="text-center text-gray-900 text-[16px] font-bold leading-[27px]">
                 직무 |{' '}
               </div>
-              <div className=" px-5 bg-gray-900 top-[1px] rounded-[30px] justify-center items-center gap-[5px] flex">
+              <div className="px-5 bg-gray-900 rounded-[30px] justify-center items-center gap-[5px] flex">
                 <div className="text-center text-white text-sm font-semibold leading-[23px]">
-                  {transKeyword(experienceData.jobKeyword)}
+                {transKeyword(experienceData.jobKeyword)}
+                </div>
+              </div>
+            </div>
+            <div className="flex items-center gap-3">
+              <div className="px-5 bg-gray-900 rounded-[30px] justify-center items-center gap-[5px] flex">
+                <div className="text-center text-white text-sm font-bold leading-[23px]">
+                {experienceData.expStacks.join(' / ')}
                 </div>
               </div>
             </div>
-          </div>
-        </div>
-        <div className="w-[640px] h-[52px] mt-[280px] ml-[-75px] justify-start items-start gap-[580px] inline-flex absolute">
-          <div
-            className="w-[26px] h-[52px] relative cursor-pointer"
-            onClick={handlePrevClick}
-          >
-            <PrevArrow />
-          </div>
-          <div
-            className="w-[26px] h-[52px] relative cursor-pointer"
-            onClick={handleNextClick}
-          >
-            <NextArrow />
           </div>
         </div>
         <div className="w-[400px] h-11 left-[45px] top-[45px] absolute text-center text-gray-900 text-2xl font-semibold leading-[45px]">