Merge pull request #277 from ODOICHON/fix/#254

fix: 메인페이지 오도이촌 소개, 오도이촌 커뮤니티 콘텐츠 카드 슬라이더 순환하도록 수정

package.json

@@ -43,7 +43,7 @@
     "react-quill": "^2.0.0",
     "react-router-dom": "^6.8.1",
     "sass": "^1.58.1",
-    "swiper": "^9.0.5",
+    "swiper": "^11.1.4",
     "uuid": "^9.0.0",
     "vite": "^4.1.0",
     "vite-tsconfig-paths": "^4.0.5",

src/hooks/useSwiperRef.ts

@@ -0,0 +1,14 @@
+import { useState, useRef, useEffect } from 'react';
+
+const useSwiperRef = <T extends HTMLElement>() => {
+  const [wrapper, setWrapper] = useState<T | null>(null);
+  const ref = useRef<T>(null);
+
+  useEffect(() => {
+    setWrapper(ref.current);
+  }, []);
+
+  return [wrapper, ref] as const;
+};
+
+export default useSwiperRef;

src/pages/Introduce/index.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useQuery } from '@tanstack/react-query';
 import { motion } from 'framer-motion';
-import { Scrollbar } from 'swiper';
+import { Scrollbar } from 'swiper/modules';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import ReviewBoard from '@/components/Introduce/ReviewBoard';
 import TrendBoard from '@/components/Introduce/TrendBoard';

src/pages/Main/index.tsx

@@ -1,31 +1,33 @@
 import 'swiper/css';
 import 'swiper/css/pagination';
 import 'swiper/css/navigation';
-import { useEffect, useRef, useState } from 'react';
+import { useState } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import { useQuery } from '@tanstack/react-query';
 import dayjs from 'dayjs';
 import { motion } from 'framer-motion';
-import { Autoplay, Pagination, Navigation } from 'swiper';
+import { Autoplay, Pagination, Navigation } from 'swiper/modules';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import footer from '@/assets/common/footer.png';
 import { QueryKeys, restFetcher } from '@/queryClient';
 import { CommunityBoardType } from '@/types/Board/communityType';
 import { IntroBoardType } from '@/types/Board/introType';
+import useSwiperRef from '@/hooks/useSwiperRef';
 import { getPrefixCategoryName } from '@/utils/utils';
 import { ApiResponseWithDataType } from '@/types/apiResponseType';
 import { jumbotronData } from '@/constants/main_dummy';
 import { opacityVariants } from '@/constants/variants';
 import styles from './styles.module.scss';
 
 export default function MainPage() {
-  const [_, updateState] = useState(false);
   const [introToggle, setIntroToggle] = useState<'trend' | 'review'>('trend');
   const navigate = useNavigate();
-  const introNextRef = useRef<HTMLButtonElement>(null);
-  const introPrevRef = useRef<HTMLButtonElement>(null);
-  const commuNextRef = useRef<HTMLButtonElement>(null);
-  const commuPrevRef = useRef<HTMLButtonElement>(null);
+
+  const [introPrevEl, introPrevRef] = useSwiperRef<HTMLButtonElement>();
+  const [introNextEl, introNextRef] = useSwiperRef<HTMLButtonElement>();
+  const [commuNextEl, commuNextRef] = useSwiperRef<HTMLButtonElement>();
+  const [commuPrevEl, commuPrevRef] = useSwiperRef<HTMLButtonElement>();
+
   const { data: introData } = useQuery<
     ApiResponseWithDataType<IntroBoardType[]>
   >([QueryKeys.PREVIEW_BOARD, QueryKeys.INTRO_BOARD, introToggle], () =>
@@ -52,10 +54,6 @@ export default function MainPage() {
     }),
   );
 
-  useEffect(() => {
-    updateState(true);
-  }, [introNextRef, commuNextRef]);
-
   return (
     <motion.div
       className={styles.container}
@@ -74,7 +72,7 @@ export default function MainPage() {
         pagination={{
           clickable: true,
         }}
-        modules={[Autoplay, Pagination, Navigation]}
+        modules={[Autoplay, Pagination]}
         className={styles.swiperContainer}
       >
         {jumbotronData.map((data, idx) => (
@@ -151,8 +149,8 @@ export default function MainPage() {
         </div>
         <Swiper
           navigation={{
-            nextEl: introNextRef.current,
-            prevEl: introPrevRef.current,
+            nextEl: introNextEl,
+            prevEl: introPrevEl,
           }}
           slidesPerView={1}
           breakpoints={{
@@ -211,8 +209,8 @@ export default function MainPage() {
               clickable: true,
             }}
             navigation={{
-              nextEl: commuNextRef.current,
-              prevEl: commuPrevRef.current,
+              nextEl: commuNextEl,
+              prevEl: commuPrevEl,
             }}
             touchStartPreventDefault={false}
             modules={[Pagination, Navigation]}

src/pages/Trade/Board/index.tsx

@@ -1,10 +1,10 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { useQuery } from '@tanstack/react-query';
 import dayjs from 'dayjs';
 import Dompurify from 'dompurify';
 import { motion } from 'framer-motion';
-import { A11y, Navigation, Pagination, Scrollbar } from 'swiper';
+import { A11y, Navigation, Pagination, Scrollbar } from 'swiper/modules';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import AccessModal from '@/components/Common/AccessModal';
 import ModalPortal from '@/components/Common/ModalPortal';
@@ -22,6 +22,7 @@ import { TradeBoardDetailType } from '@/types/Board/tradeType';
 import { DeleteHouseAPI } from '@/apis/houses';
 import userStore from '@/store/userStore';
 import useModalState from '@/hooks/useModalState';
+import useSwiperRef from '@/hooks/useSwiperRef';
 import useToastMessageType from '@/hooks/useToastMessageType';
 import { getHouseName, getMoveInType, getUserType } from '@/utils/utils';
 import { ApiResponseWithDataType } from '@/types/apiResponseType';
@@ -44,7 +45,8 @@ export default function TradeBoardPage() {
   );
   const [_, updateState] = useState(false);
   const [modal, setModal] = useState(false);
-  const ref = useRef<HTMLDivElement>(null);
+
+  const [paginationEl, paginationRef] = useSwiperRef<HTMLDivElement>();
 
   const handleDeleteButtonClick = async (houseId: number) => {
     if (houseId === 0) throw new Error('없는 농가거래 게시물입니다.');
@@ -160,7 +162,7 @@ export default function TradeBoardPage() {
           spaceBetween={50}
           slidesPerView={1}
           navigation
-          pagination={{ el: ref.current }}
+          pagination={{ el: paginationEl }}
           scrollbar={{ draggable: true }}
         >
           {data?.data.imageUrls.map((url, index) => (
@@ -169,7 +171,7 @@ export default function TradeBoardPage() {
             </SwiperSlide>
           ))}
         </Swiper>
-        <div className={styles.pagination} ref={ref} />
+        <div className={styles.pagination} ref={paginationRef} />
         <section
           className={styles.infoContainer}
           style={user ? undefined : { visibility: 'hidden' }}

yarn.lock

@@ -3419,11 +3419,6 @@ slice-ansi@^5.0.0:
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
   integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
 
-ssr-window@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/ssr-window/-/ssr-window-4.0.2.tgz#dc6b3ee37be86ac0e3ddc60030f7b3bc9b8553be"
-  integrity sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ==
-
 stop-iteration-iterator@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/stop-iteration-iterator/-/stop-iteration-iterator-1.0.0.tgz#6a60be0b4ee757d1ed5254858ec66b10c49285e4"
@@ -3569,12 +3564,10 @@ supports-preserve-symlinks-flag@^1.0.0:
   resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
-swiper@^9.0.5:
-  version "9.2.4"
-  resolved "https://registry.yarnpkg.com/swiper/-/swiper-9.2.4.tgz#2fa3cf58cef586366f674a10fa56fe6eec2026fe"
-  integrity sha512-L7y3K/iiMXNYQ94FbfcJn7jex4QPnS4+voXGupTdC+UHW4XrR40QDdm4c9hXJ+Br0Il7PP0vP1W3goM9/Ly6Sg==
-  dependencies:
-    ssr-window "^4.0.2"
+swiper@^11.1.4:
+  version "11.1.4"
+  resolved "https://registry.yarnpkg.com/swiper/-/swiper-11.1.4.tgz#2f8e303e8bf9e5bc40a3885fc637ae60ff27996c"
+  integrity sha512-1n7kbYJB2dFEpUHRFszq7gys/ofIBrMNibwTiMvPHwneKND/t9kImnHt6CfGPScMHgI+dWMbGTycCKGMoOO1KA==
 
 synckit@^0.8.5:
   version "0.8.5"