Refactor: bundle, routing param 누락 추가 (#669)

* refactor: framer-motion lazy load * refactor: group detail page url 수정 * refactor: group 생성 페이지 이미지 업로드 시 Loading 노출 * refactor: swiper -> react-glider로 변경 * refactor: groupdetail page param 누락 수정
gloddy-dev · Mar 21, 2024 · 64ad976 · 64ad976
1 parent e65e38c
commit 64ad976
Show file tree

Hide file tree

Showing 19 changed files with 180 additions and 117 deletions.
diff --git a/.gitignore b/.gitignore
@@ -18,4 +18,5 @@ node_modules
 # Web
 .sentryclirc
 .next
-.idea
+.idea
+login
diff --git a/packages/web/package.json b/packages/web/package.json
@@ -39,6 +39,7 @@
     "react-datepicker": "^4.15.0",
     "react-dom": "^18.2.0",
     "react-error-boundary": "^4.0.12",
+    "react-glider": "^4.0.2",
     "react-google-autocomplete": "^2.7.3",
     "react-hook-form": "^7.45.0",
     "react-i18next": "^13.2.2",
@@ -47,7 +48,6 @@
     "react-simple-pull-to-refresh": "^1.3.3",
     "server-only": "^0.0.1",
     "sharp": "^0.33.2",
-    "swiper": "^9.4.1",
     "tailwind-merge": "^1.14.0",
     "zustand": "^4.3.8"
   },

diff --git a/packages/web/src/apis/groups/mutations.tsx b/packages/web/src/apis/groups/mutations.tsx
@@ -1,3 +1,5 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
 import {
   deleteArticle,
   deleteComment,
@@ -15,10 +17,10 @@ import { Keys as GroupsKeys } from './keys';
 import { GroupDetailResponse } from './type';
 import { MeetingScrapResponse } from '../meeting';
 import { Keys as MeetingKeys } from '../meeting/keys';
+
 import FeedbackCompleteModal from '@/app/[lng]/(main)/meeting/participate/feedback/[groupId]/funnels/step3/FeedbackCompleteModal.client';
 import useAppRouter from '@/hooks/useAppRouter';
 import { useModal } from '@/hooks/useModal';
-import { useMutation, useQueryClient } from '@tanstack/react-query';
 
 export const usePostCreateGroup = () => {
   const { replace } = useAppRouter();
@@ -28,7 +30,7 @@ export const usePostCreateGroup = () => {
     mutationFn: postCreateGroup,
     onSuccess: (data) => {
       queryClient.resetQueries({ queryKey: GroupsKeys.getGroups() });
-      replace(`/grouping/${data.groupId}`);
+      replace(`/grouping/${data.groupId}?tab=detail`);
     },
   });
 };

diff --git a/packages/web/src/app/[lng]/(main)/community/components/ContentSection.tsx b/packages/web/src/app/[lng]/(main)/community/components/ContentSection.tsx
@@ -1,8 +1,8 @@
 'use client';
 import dynamic from 'next/dynamic';
 import { Suspense } from 'react';
-import { useTranslation } from 'react-i18next';
 
+import { useTranslation } from '@/app/i18n/client';
 import { Loading } from '@/components/Loading';
 import { Tabs } from '@/components/Tabs';
 

diff --git a/...ges/web/src/app/[lng]/(main)/grouping/[groupId]/manage/components/ManageDetail.client.tsx b/...ges/web/src/app/[lng]/(main)/grouping/[groupId]/manage/components/ManageDetail.client.tsx
@@ -1,8 +1,7 @@
 'use client';
 
 import { useState } from 'react';
-import { Pagination } from 'swiper';
-import { Swiper, SwiperSlide } from 'swiper/react';
+import Glider from 'react-glider';
 
 import ApplyCard from './ApplyCard.client';
 
@@ -13,6 +12,8 @@ import { Flex } from '@/components/Layout';
 import { Spacing } from '@/components/Spacing';
 import { useNumberParams } from '@/hooks/useNumberParams';
 
+import 'glider-js/glider.min.css';
+
 export default function ManageDetail() {
   const { t } = useTranslation('groupDetail');
   const { groupId } = useNumberParams<['groupId']>();
@@ -22,6 +23,12 @@ export default function ManageDetail() {
 
   const [currentApplication, setCurrentApplication] = useState(1);
 
+  const handleSlideChange = (event: any) => {
+    const newSlideIndex = event.detail.slide;
+    console.log(newSlideIndex);
+    setCurrentApplication(newSlideIndex);
+  };
+
   if (!totalCount) {
     return (
       <Flex direction="column" justify="center" align="center" className="my-80 gap-8">
@@ -39,24 +46,23 @@ export default function ManageDetail() {
         <Flex align="center">
           <Icon id="16-application" width={16} height={16} />
           <p className="text-caption text-sign-sub">
-            {currentApplication}/{totalCount}
+            {currentApplication + 1}/{totalCount}
           </p>
         </Flex>
       </Flex>
-      <Swiper
-        spaceBetween={8}
-        pagination={true}
-        modules={[Pagination]}
-        slidesPerView={1}
-        className="!p-20 !pr-40"
-        onSlideChange={(swiper) => setCurrentApplication(swiper.activeIndex + 1)}
+      <Glider
+        draggable
+        slidesToShow={1}
+        slidesToScroll={1}
+        scrollLock
+        onSlideVisible={handleSlideChange}
       >
         {applies.map((apply) => (
-          <SwiperSlide key={apply.userId}>
+          <div key={apply.userId}>
             <ApplyCard apply={apply} groupId={groupId} />
-          </SwiperSlide>
+          </div>
         ))}
-      </Swiper>
+      </Glider>
     </div>
   );
 }
diff --git a/packages/web/src/app/[lng]/(main)/grouping/create/components/LocationBottomSheet.client.tsx b/packages/web/src/app/[lng]/(main)/grouping/create/components/LocationBottomSheet.client.tsx
@@ -1,3 +1,4 @@
+'use client';
 import { useParams } from 'next/navigation';
 import { useState } from 'react';
 import usePlacesService from 'react-google-autocomplete/lib/usePlacesAutocompleteService';
@@ -71,6 +72,8 @@ export default function LocationBottomSheet({
   };
 
   const handleSelect = async (place: google.maps.places.AutocompletePrediction) => {
+    if (!placesService) return;
+
     placesService?.getDetails({ placeId: place.place_id }, (details) => {
       const lat = details?.geometry?.location?.lat();
       const lng = details?.geometry?.location?.lng();

diff --git a/packages/web/src/app/[lng]/(main)/grouping/create/funnels/main/UploadSection.client.tsx b/packages/web/src/app/[lng]/(main)/grouping/create/funnels/main/UploadSection.client.tsx
@@ -7,6 +7,7 @@ import type { CreateGroupContextValue } from '../../type';
 
 import { Icon } from '@/components/Icon';
 import { Flex } from '@/components/Layout';
+import { Loading } from '@/components/Loading';
 import { useFileUpload } from '@/hooks/useFileUpload';
 
 interface ImageThumbnailProps {
@@ -19,7 +20,7 @@ export default function UploadSection({ control }: ImageThumbnailProps) {
     control,
   });
 
-  const { handleFileUploadClick, previewImage } = useFileUpload(async (files) => {
+  const { handleFileUploadClick, previewImage, isPending } = useFileUpload(async (files) => {
     field.onChange(files[0]);
   });
 
@@ -30,16 +31,21 @@ export default function UploadSection({ control }: ImageThumbnailProps) {
       className="rounded-8 bg-sub relative mx-20 aspect-[8/5] overflow-hidden"
       onClick={handleFileUploadClick}
     >
-      <RenderImage previewImage={field.value} />
+      <RenderImage previewImage={previewImage} isPending={isPending} />
     </Flex>
   );
 }
 
 interface RenderImageProps {
   previewImage: string | undefined;
+  isPending: boolean;
 }
 
-const RenderImage = memo(function ({ previewImage }: RenderImageProps) {
+const RenderImage = memo(function ({ previewImage, isPending }: RenderImageProps) {
+  if (isPending) {
+    return <Loading />;
+  }
+
   if (previewImage) {
     return <Image src={previewImage} alt="group_image" className="object-cover" fill />;
   }

diff --git a/packages/web/src/app/[lng]/(main)/profile/components/ProfileDetailSection.client.tsx b/packages/web/src/app/[lng]/(main)/profile/components/ProfileDetailSection.client.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { motion } from 'framer-motion';
+import { m } from 'framer-motion';
 import Image from 'next/image';
 import { useParams, usePathname } from 'next/navigation';
 
@@ -10,6 +10,7 @@ import { Avatar } from '@/components/Avatar';
 import { Divider } from '@/components/Divider';
 import { Icon } from '@/components/Icon';
 import { Flex } from '@/components/Layout';
+import { Motion } from '@/components/Motion';
 import { NavLink } from '@/components/NavLink';
 import { Spacing } from '@/components/Spacing';
 import { Tag } from '@/components/Tag';
@@ -148,12 +149,14 @@ export default function ProfileDetailSection({ profileData }: ProfileDetailProps
           <Flex direction="column" className="h-70 rounded-8 bg-sub px-12">
             <Spacing size={16} />
             <div className="rounded-10 h-16 overflow-hidden bg-white">
-              <motion.div
-                initial={{ width: 0 }}
-                animate={{ width: `${reliabilityScore / 2}%` }}
-                transition={{ duration: 0.5 }}
-                className="rounded-10 bg-primary h-full"
-              />
+              <Motion>
+                <m.div
+                  initial={{ width: 0 }}
+                  animate={{ width: `${reliabilityScore / 2}%` }}
+                  transition={{ duration: 0.5 }}
+                  className="rounded-10 bg-primary h-full"
+                />
+              </Motion>
             </div>
             <Spacing size={8} />
             <Flex className="text-caption" justify="between">

diff --git a/packages/web/src/components/Animation/ButtonAnimation.tsx b/packages/web/src/components/Animation/ButtonAnimation.tsx
@@ -1,6 +1,9 @@
 'use client';
+import { m } from 'framer-motion';
+
+import { Motion } from '../Motion';
+
 import { StrictPropsWithChildren } from '@/types';
-import { motion } from 'framer-motion';
 
 interface ButtonAnimationProps {
   className?: string;
@@ -11,23 +14,25 @@ export default function ButtonAnimation({
   ...props
 }: StrictPropsWithChildren<ButtonAnimationProps>) {
   return (
-    <motion.div
-      {...props}
-      whileHover="hover"
-      whileTap="pressed"
-      variants={{
-        hover: (clicked) => ({
-          scale: clicked ? 1 : 1.1,
-        }),
-        pressed: {
-          scale: 0.9,
-        },
-        rest: {
-          scale: 1,
-        },
-      }}
-    >
-      {children}
-    </motion.div>
+    <Motion>
+      <m.div
+        {...props}
+        whileHover="hover"
+        whileTap="pressed"
+        variants={{
+          hover: (clicked) => ({
+            scale: clicked ? 1 : 1.1,
+          }),
+          pressed: {
+            scale: 0.9,
+          },
+          rest: {
+            scale: 1,
+          },
+        }}
+      >
+        {children}
+      </m.div>
+    </Motion>
   );
 }
diff --git a/packages/web/src/components/Calendar/Calendar.client.tsx b/packages/web/src/components/Calendar/Calendar.client.tsx
@@ -1,15 +1,17 @@
 import 'react-datepicker/dist/react-datepicker.css';
 
-import { Icon } from '../Icon';
-import { Spacing } from '../Spacing';
-import { IconButton } from '@/components/Button';
-import { Flex } from '@/components/Layout';
 import { format } from 'date-fns';
 import { enUS, ko } from 'date-fns/esm/locale';
 import { useParams } from 'next/navigation';
 import { useMemo } from 'react';
 import DatePicker from 'react-datepicker';
 
+import { Icon } from '../Icon';
+import { Spacing } from '../Spacing';
+
+import { IconButton } from '@/components/Button';
+import { Flex } from '@/components/Layout';
+
 interface CalendarProps {
   dateValue: Date | null;
   setDateValue: (date: Date) => void;

diff --git a/packages/web/src/components/Card/GroupingCard.client.tsx b/packages/web/src/components/Card/GroupingCard.client.tsx
@@ -55,7 +55,7 @@ export default function GroupingCard({
 
   return (
     <Flex className="bg-white px-20 py-16" direction="column">
-      <NavLink href={`/grouping/${groupId}`} className="flex items-center">
+      <NavLink href={`/grouping/${groupId}?tab=detail`} className="flex items-center">
         <section className="relative h-96 w-96 shrink-0">
           {imageUrl ? (
             <Image

diff --git a/packages/web/src/components/Modal/ImageModal.client.tsx b/packages/web/src/components/Modal/ImageModal.client.tsx
@@ -1,12 +1,13 @@
 'use client';
 import Image from 'next/image';
-import { useEffect, useState } from 'react';
-import { Swiper, SwiperSlide } from 'swiper/react';
+import React, { useEffect, useState } from 'react';
+import Glider from 'react-glider';
 
 import ModalWrapper from './ModalWrapper.client';
 import { Flex } from '../Layout';
 import { Spacing } from '../Spacing';
-import 'swiper/css';
+
+import 'glider-js/glider.min.css';
 
 interface ImageModalProps {
   images: string[];
@@ -24,25 +25,32 @@ export default function ImageModal({ images, currentImage, onClose }: ImageModal
     };
   }, []);
 
+  const handleSlideChange = (event: any) => {
+    const newSlideIndex = event.detail.slide;
+    setCurrentImageIndex(newSlideIndex);
+  };
+
   return (
-    <ModalWrapper onClose={onClose} className="w-full">
-      <Swiper
-        slidesPerView={1}
-        initialSlide={currentImageIndex}
-        onSlideChange={(swiper) => setCurrentImageIndex(swiper.activeIndex)}
+    <ModalWrapper onClose={onClose} className="w-full px-[5%]">
+      <Glider
+        draggable
+        slidesToShow={1}
+        slidesToScroll={1}
+        scrollLock
+        onSlideVisible={handleSlideChange}
       >
         {images.map((image, index) => (
-          <SwiperSlide key={index} className="relative w-full before:block before:pb-[100%]">
-            <Image src={image} alt="fullImage" className="object-cover" fill />
-          </SwiperSlide>
+          <div key={index} className={'relative w-full before:block before:pb-[100%]'}>
+            <Image src={image} alt={`img-${index}`} layout="fill" objectFit="cover" />
+          </div>
         ))}
-        <Spacing size={12} />
-        <Flex justify="center">
-          <span className="rounded-20 text-caption text-sign-sub bg-white px-6 py-2">
-            {currentImageIndex + 1}/{images.length}
-          </span>
-        </Flex>
-      </Swiper>
+      </Glider>
+      <Spacing size={12} />
+      <Flex justify="center">
+        <span className="rounded-20 text-caption text-sign-sub bg-white px-6 py-2">
+          {currentImageIndex + 1}/{images.length}
+        </span>
+      </Flex>
     </ModalWrapper>
   );
 }