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 누락 수정

.gitignore

@@ -18,4 +18,5 @@ node_modules
 # Web
 .sentryclirc
 .next
-.idea
+.idea
+login

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"
  },

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`);
  },
  });
 };

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';
 

packages/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>
  );
 }

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();

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 />;
  }

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">

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>
  );
 }

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;

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

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>
  );
 }