Refactor/#79 코드 가독성을 위한 리팩토링

apps/web/app/_components/PlaceListItem/PlaceListItem.tsx

@@ -6,6 +6,7 @@ import { Text } from '@repo/ui/components/Text'
 import { Icon } from '@repo/ui/components/Icon'
 import { Chip } from '@repo/ui/components/Chip'
 import { Column, Flex } from '@repo/ui/components/Layout'
+import { PlaceListItemSkeleton } from './PlaceListItemSkeleton'
 
 type Props = {
   showCategory?: boolean
@@ -53,3 +54,5 @@ export const PlaceListItem = ({
     </li>
   )
 }
+
+PlaceListItem.Skeleton = PlaceListItemSkeleton

apps/web/app/_components/PlaceListItem/PlaceListItemSkeleton.tsx

@@ -0,0 +1,29 @@
+'use client'
+
+import { Skeleton } from '@heroui/react'
+import { Column, Flex } from '@repo/ui/components/Layout'
+import { cn } from '@repo/ui/utils/cn'
+
+type Props = {
+  count?: number
+}
+
+export const PlaceListItemSkeleton = ({ count = 3 }: Props) => {
+  return (
+    <div className={cn('w-full', 'flex flex-col gap-4')}>
+      {Array.from({ length: count }).map((_, index) => (
+        <Column
+          key={index}
+          className='border-b-1 w-full gap-3 border-gray-50 pb-4 pt-2.5'
+        >
+          <Skeleton className='w-18 h-5 rounded-full' />
+          <Skeleton className='w-26 h-4 rounded-full' />
+          <Flex className={'gap-1'}>
+            <Skeleton className='w-18 h-6 rounded-full' />
+            <Skeleton className='w-18 h-6 rounded-full' />
+          </Flex>
+        </Column>
+      ))}
+    </div>
+  )
+}

apps/web/app/_components/RankingPlaceList/RankingPlaceList.tsx

@@ -1,28 +1,51 @@
+'use client'
+
+import { Suspense } from 'react'
+import { useSuspenseQuery } from '@tanstack/react-query'
+import { useCampusStore } from '@/_store/campus'
+import { usePlaceQueries } from '@/_apis/queries/place'
 import type { IconType } from '@repo/ui/components/Icon'
-import type { BasePlace } from '@/_apis/schemas/place'
+import type { RankingPlaceSort } from '@/_apis/schemas/place'
 import { Column } from '@repo/ui/components/Layout'
 import { SubTitle } from '@/_components/SubTitle'
 import { PlaceListItem } from '@/_components/PlaceListItem'
 
 type Props = {
   title: string
   icon: IconType
-  places: BasePlace[]
+  rankingPlaceSort: RankingPlaceSort
 }
 
-export const RankingPlaceList = ({ title, icon, places }: Props) => {
+export const RankingPlaceList = ({ title, icon, rankingPlaceSort }: Props) => {
   return (
     <Column className={'gap-1.5 px-5'}>
       <SubTitle title={title} icon={icon} />
-      <ul className={'px-3'}>
-        {places.map((place, index) => (
-          <PlaceListItem
-            key={place.placeId}
-            {...place}
-            showBorder={index !== places.length - 1}
-          />
-        ))}
-      </ul>
+      <Suspense fallback={<PlaceListItem.Skeleton />}>
+        <PlaceList rankingPlaceSort={rankingPlaceSort} />
+      </Suspense>
     </Column>
   )
 }
+
+const PlaceList = ({
+  rankingPlaceSort,
+}: {
+  rankingPlaceSort: RankingPlaceSort
+}) => {
+  const { campus } = useCampusStore()
+  const { data: places } = useSuspenseQuery(
+    usePlaceQueries.byRanking(rankingPlaceSort, campus),
+  )
+
+  return (
+    <ul className={'px-3'}>
+      {places.map((place, index) => (
+        <PlaceListItem
+          key={place.placeId}
+          {...place}
+          showBorder={index !== places.length - 1}
+        />
+      ))}
+    </ul>
+  )
+}

apps/web/app/_components/RankingPlaceList/index.tsx

@@ -1,3 +1 @@
 export { RankingPlaceList } from './RankingPlaceList'
-export { MostViewsPlaces } from './MostViewsPlaces'
-export { MostLikesPlaces } from './MostLikesPlaces'

apps/web/app/categories/[id]/CategoryDetailPage.tsx

@@ -1,28 +1,25 @@
 'use client'
-
-import { usePathname } from 'next/navigation'
+import { Suspense, useEffect } from 'react'
 import { useSuspenseQuery } from '@tanstack/react-query'
 import { useCategoryQueries } from '@/_apis/queries/category'
+import { useCategoryIdFromUrl } from './_hooks/useCategoryIdFromUrl'
+
 import { Icon } from '@repo/ui/components/Icon'
 import { Text } from '@repo/ui/components/Text'
 import { Header } from '@repo/ui/components/Header'
 import { Flex } from '@repo/ui/components/Layout'
 import { HeaderBackButton } from '@/_components/HeaderBackButton'
+import { PlaceListItem } from '@/_components/PlaceListItem'
 import { RowCategories, Places } from './_components'
-import { Suspense, useEffect } from 'react'
-import { Spinner } from '@heroui/react'
+import { SwipeableArea } from './_components/SwipeableArea'
 
 export const CategoryDetailPage = () => {
   const { data: categories } = useSuspenseQuery(useCategoryQueries.list())
-  const activeCategoryId = usePathname().split('/')[2] || '0'
+  const [categoryId, setCategoryId] = useCategoryIdFromUrl()
   const activeCategory = categories.find(
-    (category) => category.id === activeCategoryId,
+    (category) => category.id === categoryId,
   )
 
-  const setIdFunc = (id: string) => {
-    window.history.replaceState(null, '', `/categories/${id}`)
-  }
-
   useEffect(() => {
     document.title = `공주대 맛집 | ${activeCategory?.name}`
   }, [activeCategory])
@@ -42,14 +39,15 @@ export const CategoryDetailPage = () => {
         className={'border-b-1 border-gray-50'}
       />
       <RowCategories
-        id={activeCategoryId}
         categories={categories}
-        setIdFunc={setIdFunc}
+        categoryId={categoryId}
+        setCategoryId={setCategoryId}
       />
-      {/*Todo: 맛집 리스트 스켈레톤으로 변경하기*/}
-      <Suspense fallback={<Spinner className={'my-auto'} />}>
-        <Places id={activeCategoryId} setIdFunc={setIdFunc} />
-      </Suspense>
+      <SwipeableArea categoryId={categoryId} setCategoryId={setCategoryId}>
+        <Suspense fallback={<PlaceListItem.Skeleton count={3} />}>
+          <Places categoryId={categoryId} />
+        </Suspense>
+      </SwipeableArea>
     </>
   )
 }

apps/web/app/categories/[id]/_components/Places/Places.tsx

@@ -1,74 +1,36 @@
 import { useSuspenseQuery } from '@tanstack/react-query'
-import { motion, PanInfo } from 'motion/react'
 import { useCampusStore } from '@/_store/campus'
 import { usePlaceQueries } from '@/_apis/queries/place'
 import { PlaceListItem } from '@/_components/PlaceListItem'
 import { VerticalScrollArea } from '@repo/ui/components/Layout'
 import { EmptyPlaces } from './EmptyPlaces'
 
 type Props = {
-  id: string
-  setIdFunc: (id: string) => void
+  categoryId: string
 }
 
-// 스와이프 감도
-const SWIPE_CONFIDENCE_THRESHOLD = 20
-
-export const Places = ({ id, setIdFunc }: Props) => {
+export const Places = ({ categoryId }: Props) => {
   const { campus } = useCampusStore()
   const { data: places } = useSuspenseQuery(
-    usePlaceQueries.byCategory(id, campus),
+    usePlaceQueries.byCategory(categoryId, campus),
   )
 
-  const currentCategoryId = Number(id)
-  const onDragEnd = (
-    _e: MouseEvent | TouchEvent | PointerEvent,
-    { offset, velocity }: PanInfo,
-  ) => {
-    const swipePower = Math.abs(offset.x) * velocity.x
-
-    if (swipePower < -SWIPE_CONFIDENCE_THRESHOLD) {
-      if (currentCategoryId < 15) {
-        setIdFunc(String(currentCategoryId + 1))
-      }
-    } else if (swipePower > SWIPE_CONFIDENCE_THRESHOLD) {
-      if (currentCategoryId > 1) {
-        setIdFunc(String(currentCategoryId - 1))
-      }
-    }
-  }
-
-  const content =
-    places.length === 0 ? (
-      <EmptyPlaces />
-    ) : (
-      <VerticalScrollArea as={'ul'} className={'px-8'}>
-        {places.map((place, index) => (
-          <PlaceListItem
-            key={place.placeId}
-            {...place}
-            showCategory={false}
-            showBorder={index !== places.length - 1}
-          />
-        ))}
-      </VerticalScrollArea>
-    )
-
   return (
-    <div className='relative h-full w-full overflow-hidden'>
-      <motion.div
-        key={id}
-        drag='x'
-        dragConstraints={{
-          right: currentCategoryId <= 1 ? 0 : undefined,
-          left: currentCategoryId >= 15 ? 0 : undefined,
-        }}
-        dragElastic={0.2}
-        onDragEnd={onDragEnd}
-        className='relative h-full w-full bg-white'
-      >
-        {content}
-      </motion.div>
-    </div>
+    <>
+      {places.length === 0 ? (
+        <EmptyPlaces />
+      ) : (
+        <VerticalScrollArea as={'ul'}>
+          {places.map((place, index) => (
+            <PlaceListItem
+              key={place.placeId}
+              {...place}
+              showCategory={false}
+              showBorder={index !== places.length - 1}
+            />
+          ))}
+        </VerticalScrollArea>
+      )}
+    </>
   )
 }

apps/web/app/categories/[id]/_components/RowCategories/RowCategories.tsx

@@ -5,21 +5,25 @@ import { cn } from '@repo/ui/utils/cn'
 
 type Props = {
   categories: Category[]
-  id: string
-  setIdFunc: (id: string) => void
+  categoryId: string
+  setCategoryId: (id: string) => void
 }
 
-export const RowCategories = ({ id, categories, setIdFunc }: Props) => {
+export const RowCategories = ({
+  categoryId,
+  categories,
+  setCategoryId,
+}: Props) => {
   return (
     <div className={'relative px-5 py-2.5'}>
       <Flex className={'scrollbar-hide gap-4 overflow-x-auto'}>
         {categories.map((category) => (
           <CategoryItem
             key={category.id}
             category={category}
-            isActive={id === category.id}
+            isActive={categoryId === category.id}
             onClick={() => {
-              setIdFunc(category.id)
+              setCategoryId(category.id)
             }}
           />
         ))}

apps/web/app/categories/[id]/_components/SwipeableArea/SwipeableArea.tsx

@@ -0,0 +1,52 @@
+import { motion, PanInfo } from 'motion/react'
+
+type Props = {
+  categoryId: string
+  setCategoryId: (id: string) => void
+  children: React.ReactNode
+}
+
+const SWIPE_CONFIDENCE_THRESHOLD = 20
+
+export const SwipeableArea = ({
+  categoryId,
+  setCategoryId,
+  children,
+}: Props) => {
+  const NumberToCategoryId = Number(categoryId)
+
+  const onDragEnd = (
+    _e: MouseEvent | TouchEvent | PointerEvent,
+    { offset, velocity }: PanInfo,
+  ) => {
+    const swipePower = Math.abs(offset.x) * velocity.x
+
+    if (swipePower < -SWIPE_CONFIDENCE_THRESHOLD) {
+      if (NumberToCategoryId < 15) {
+        setCategoryId(String(NumberToCategoryId + 1))
+      }
+    } else if (swipePower > SWIPE_CONFIDENCE_THRESHOLD) {
+      if (NumberToCategoryId > 1) {
+        setCategoryId(String(NumberToCategoryId - 1))
+      }
+    }
+  }
+
+  return (
+    <div className='relative h-full w-full overflow-hidden px-8'>
+      <motion.div
+        key={categoryId}
+        drag='x'
+        dragConstraints={{
+          right: NumberToCategoryId <= 1 ? 0 : undefined,
+          left: NumberToCategoryId >= 15 ? 0 : undefined,
+        }}
+        dragElastic={0.2}
+        onDragEnd={onDragEnd}
+        className='relative h-full w-full bg-white'
+      >
+        {children}
+      </motion.div>
+    </div>
+  )
+}

apps/web/app/categories/[id]/_components/SwipeableArea/index.ts

@@ -0,0 +1 @@
+export { SwipeableArea } from './SwipeableArea'

apps/web/app/categories/[id]/_hooks/useCategoryIdFromUrl.ts

@@ -0,0 +1,11 @@
+import { usePathname } from 'next/navigation'
+import { CLIENT_PATH } from '@/_constants/path'
+
+export const useCategoryIdFromUrl = () => {
+  const categoryId = usePathname().split('/')[2] || '0'
+  const setCategoryId = (id: string) => {
+    window.history.replaceState(null, '', CLIENT_PATH.CATEGORY_DETAIL(id))
+  }
+
+  return [categoryId, setCategoryId] as const
+}