refactor: make place related types readable

src/app/map/[mapId]/page.tsx

@@ -21,7 +21,7 @@ import PlaceMapPopup from '@/components/place/place-map-popup'
 import useFetch from '@/hooks/use-fetch'
 import useMeasure from '@/hooks/use-measure'
 import type { TagItem } from '@/models/api/maps'
-import type { PlaceType } from '@/models/api/place'
+import type { KorrkPlace } from '@/models/api/place'
 import { getMapIdFromCookie, updateMapIdCookie } from '@/services/map-id'
 import { api } from '@/utils/api'
 import { onboardingStorage, visitedMapIdsStorage } from '@/utils/storage'
@@ -64,8 +64,8 @@ const MapMain = ({ params: { mapId } }: { params: { mapId: string } }) => {
   const [selectedFilterNames, setSelectedFilterNames] =
     useState<FilterIdsType>(INITIAL_FILTER_IDS)
 
-  const [filteredPlace, setFilteredPlace] = useState<PlaceType[] | null>(null)
-  const [selectedPlace, setSelectedPlace] = useState<PlaceType | null>(null)
+  const [filteredPlace, setFilteredPlace] = useState<KorrkPlace[] | null>(null)
+  const [selectedPlace, setSelectedPlace] = useState<KorrkPlace | null>(null)
 
   const [mapIdFromCookie, setMapIdFromCookie] = useState('')
 
@@ -83,7 +83,7 @@ const MapMain = ({ params: { mapId } }: { params: { mapId: string } }) => {
     notify.error(error.message)
   }
 
-  const handleClickPlace = (place: PlaceType) => {
+  const handleClickPlace = (place: KorrkPlace) => {
     if (selectedPlace?.place.id === place.place.id) {
       setSelectedPlace(null)
       return
@@ -251,7 +251,7 @@ const MapMain = ({ params: { mapId } }: { params: { mapId: string } }) => {
         </Tooltip>
       </header>
 
-      <KorrkKakaoMap<PlaceType>
+      <KorrkKakaoMap<KorrkPlace>
         places={filteredPlace}
         selectedPlace={selectedPlace}
         onClickMap={() => setSelectedPlace(null)}

src/app/map/[mapId]/place-list-bottom-sheet.tsx

@@ -10,13 +10,13 @@ import EmptyPlaceList from '@/components/place/empty-place-list'
 import PlaceListItem from '@/components/place/place-list-item'
 import useFetch from '@/hooks/use-fetch'
 import { APIError } from '@/models/api/index'
-import type { PlaceType } from '@/models/api/place'
+import type { KorrkPlace } from '@/models/api/place'
 import { useInfiniteScroll } from '@/hooks/use-infinite-scroll'
 import { api } from '@/utils/api'
 import { revalidatePlaces } from '@/app/actions'
 
 interface PlaceListBottomSheetProps {
-  places: PlaceType[] | null
+  places: KorrkPlace[] | null
   mapId: string
   selectedFilter?: FilterIdsType
   onClickFilterButton: VoidFunction
@@ -31,8 +31,8 @@ const PlaceListBottomSheet = forwardRef<
     { places, mapId, selectedFilter, onClickFilterButton, onRefreshOldPlace },
     ref,
   ) => {
-    const [placeList, setPlaceList] = useState<PlaceType[]>([])
-    const { data: slicedPlaceList, listRef } = useInfiniteScroll<PlaceType>({
+    const [placeList, setPlaceList] = useState<KorrkPlace[]>([])
+    const { data: slicedPlaceList, listRef } = useInfiniteScroll<KorrkPlace>({
       totalData: places || [],
       itemsPerPage: 10,
     })
@@ -46,14 +46,14 @@ const PlaceListBottomSheet = forwardRef<
       (selectedFilter?.category !== 'all' ? 1 : 0) +
       (selectedFilter?.tags.length ?? 0)
 
-    const getIsLike = (place: PlaceType): boolean => {
+    const getIsLike = (place: KorrkPlace): boolean => {
       if (typeof userId === 'undefined') return false
 
       if (place.likedUser?.some((liked) => liked.id === userId)) return true
 
       return false
     }
-    const handleLike = async (place: PlaceType) => {
+    const handleLike = async (place: KorrkPlace) => {
       if (!userId) return
       try {
         setPlaceList((prevPlaces) =>

src/app/profile/[mapId]/[id]/liked-place-panel.tsx

@@ -1,4 +1,4 @@
-import type { PlaceType } from '@/models/api/place'
+import type { KorrkPlace } from '@/models/api/place'
 import type { MapInfo } from '@/models/map'
 import type { User } from '@/models/user'
 import { api } from '@/utils/api'
@@ -20,7 +20,7 @@ const LikedPlacePanel = ({
   userId: User['id']
   mapId: MapInfo['id']
 }) => {
-  const [places, setPlaces] = useState<PlaceType[]>()
+  const [places, setPlaces] = useState<KorrkPlace[]>()
   const [showMorePlace, setShowMorePlace] = useState(false)
 
   const renderPlaces = () => {

src/app/profile/[mapId]/[id]/place-item.tsx

@@ -13,7 +13,7 @@ import PickChip from '@/components/pick-chip'
 import TagList from '@/components/tag-list'
 import useFetch from '@/hooks/use-fetch'
 import { APIError } from '@/models/api'
-import type { PlaceType } from '@/models/api/place'
+import type { KorrkPlace } from '@/models/api/place'
 import type { ClassName } from '@/models/common'
 import { api } from '@/utils/api'
 import cn from '@/utils/cn'
@@ -22,7 +22,7 @@ import { getStarByScore } from '@/utils/score'
 import { revalidatePlaces } from '@/app/actions'
 
 interface PlaceItemProps extends ClassName {
-  selectedPlace: PlaceType
+  selectedPlace: KorrkPlace
   mapId: string
   onRefreshOldPlace?: VoidFunction
 }

src/app/profile/[mapId]/[id]/registered-place-panel.tsx

@@ -1,4 +1,4 @@
-import type { PlaceType } from '@/models/api/place'
+import type { KorrkPlace } from '@/models/api/place'
 import type { MapInfo } from '@/models/map'
 import type { User } from '@/models/user'
 import { api } from '@/utils/api'
@@ -19,7 +19,7 @@ const RegisterededPlacePanel = ({
   userId: User['id']
   mapId: MapInfo['id']
 }) => {
-  const [places, setPlaces] = useState<PlaceType[]>()
+  const [places, setPlaces] = useState<KorrkPlace[]>()
   const [showMorePlace, setShowMorePlace] = useState(false)
 
   const renderPlaces = () => {

src/app/search/[query]/result-place-map-popup.tsx

@@ -15,7 +15,7 @@ import PickChip from '@/components/pick-chip'
 import TagList from '@/components/tag-list'
 import useFetch from '@/hooks/use-fetch'
 import { APIError } from '@/models/api'
-import type { PlaceDetail, SearchPlace } from '@/models/api/place'
+import type { PlaceDetail, PlaceItem } from '@/models/api/place'
 import type { ClassName } from '@/models/common'
 import type { MapInfo } from '@/models/map'
 import { api } from '@/utils/api'
@@ -26,7 +26,7 @@ import { revalidatePlaces } from '@/app/actions'
 
 interface ResultPlaceMapPopupProps extends ClassName {
   mapId: MapInfo['id']
-  kakaoId: SearchPlace['kakaoId']
+  kakaoId: PlaceItem['kakaoId']
 }
 
 const ResultPlaceMapPopup = forwardRef<HTMLElement, ResultPlaceMapPopupProps>(

src/app/search/[query]/result-search-box.tsx

@@ -9,7 +9,7 @@ import ResultSearchListBox from './result-search-list'
 import { notify } from '@/components/common/custom-toast'
 import KorrkKakaoMap from '@/components/korrk-kakao-map'
 import useMeasure from '@/hooks/use-measure'
-import { type SearchPlace } from '@/models/api/place'
+import { type PlaceItem } from '@/models/api/place'
 import type { ClassName } from '@/models/common'
 import type { MapInfo } from '@/models/map'
 import { getMapId } from '@/services/map-id'
@@ -29,8 +29,8 @@ const ResultSearchBox = ({ query, className }: ResultSearchBoxProps) => {
   const [mapId, setMapId] = useState('')
   // TODO: useFetch에 status 추가 및 useFetch로 데이터 관리
   const [status, setStatus] = useState('pending') // 'pending' | 'fetching' | 'success' | 'error'
-  const [places, setPlaces] = useState<SearchPlace[]>([])
-  const [selectedPlace, setSelectedPlace] = useState<SearchPlace | null>(null)
+  const [places, setPlaces] = useState<PlaceItem[]>([])
+  const [selectedPlace, setSelectedPlace] = useState<PlaceItem | null>(null)
   const [center, setCenter] = useState<{ lat: number; lng: number } | null>(
     null,
   )
@@ -85,7 +85,7 @@ const ResultSearchBox = ({ query, className }: ResultSearchBoxProps) => {
   }
 
   useEffect(() => {
-    const moveCenterToFirstPlace = (searchResultPlaces: SearchPlace[]) => {
+    const moveCenterToFirstPlace = (searchResultPlaces: PlaceItem[]) => {
       if (searchResultPlaces.length === 0) return
       setCenter({ lat: searchResultPlaces[0].y, lng: searchResultPlaces[0].x })
     }
@@ -152,7 +152,7 @@ const ResultSearchBox = ({ query, className }: ResultSearchBoxProps) => {
 
       {isMapView ? (
         <>
-          <KorrkKakaoMap<SearchPlace>
+          <KorrkKakaoMap<PlaceItem>
             places={places}
             selectedPlace={selectedPlace}
             topOfBottomBounds={bottomBounds.top}

src/app/search/[query]/result-search-list.tsx

@@ -8,7 +8,7 @@ import PlaceListItem from '@/components/place/place-list-item'
 import useFetch from '@/hooks/use-fetch'
 import { useIsomorphicLayoutEffect } from '@/hooks/use-isomorphic-layout-effect'
 import useUserGeoLocation from '@/hooks/use-user-geo-location'
-import type { SearchPlace } from '@/models/api/place'
+import type { PlaceItem } from '@/models/api/place'
 import type { ClassName } from '@/models/common'
 import type { MapInfo } from '@/models/map'
 import { api } from '@/utils/api'
@@ -18,7 +18,7 @@ import { allowUserPositionStorage } from '@/utils/storage'
 import { revalidatePlaces } from '@/app/actions'
 
 interface ResultSearchListBoxProps extends ClassName {
-  places: SearchPlace[]
+  places: PlaceItem[]
   mapId: MapInfo['id']
 }
 
@@ -52,7 +52,7 @@ const ResultSearchListBox = ({
     }
   }, [likeInfoPlaces.length, places, user?.id])
 
-  const calculateNumOfLike = (place: SearchPlace, isLikePlace: boolean) => {
+  const calculateNumOfLike = (place: PlaceItem, isLikePlace: boolean) => {
     const initialNumOfLike = place.likedUser?.length || 0
 
     if (!user?.id) return initialNumOfLike
@@ -64,7 +64,7 @@ const ResultSearchListBox = ({
     return initialNumOfLike
   }
 
-  const optimisticUpdateLikeOrUnLike = (placeId: SearchPlace['placeId']) => {
+  const optimisticUpdateLikeOrUnLike = (placeId: PlaceItem['placeId']) => {
     const willUpdateIndex = places.findIndex(
       (place) => place.placeId === placeId,
     )
@@ -83,7 +83,7 @@ const ResultSearchListBox = ({
     }
   }
 
-  const handleLikePlace = async (placeId: SearchPlace['placeId']) => {
+  const handleLikePlace = async (placeId: PlaceItem['placeId']) => {
     try {
       if (!mapId) return
       optimisticUpdateLikeOrUnLike(placeId)
@@ -92,7 +92,7 @@ const ResultSearchListBox = ({
     } catch (error) {}
   }
 
-  const handleUnLikePlace = async (placeId: SearchPlace['placeId']) => {
+  const handleUnLikePlace = async (placeId: PlaceItem['placeId']) => {
     try {
       if (!mapId) return
       optimisticUpdateLikeOrUnLike(placeId)

src/app/search/search-box.tsx

@@ -13,7 +13,7 @@ import debounce from 'lodash.debounce'
 import { notify } from '@/components/common/custom-toast'
 import Typography from '@/components/common/typography'
 import useSafeRouter from '@/hooks/use-safe-router'
-import type { SearchPlace } from '@/models/api/place'
+import type { PlaceItem } from '@/models/api/place'
 import type { MapInfo } from '@/models/map'
 import { getMapId } from '@/services/map-id'
 import { api } from '@/utils/api'
@@ -34,7 +34,7 @@ const SearchBox = () => {
   const [query, setQuery] = useState(search)
   // TODO: useFetch에 status 추가 및 useFetch로 데이터 관리
   const [status, setStatus] = useState('pending') // 'pending' | 'fetching' | 'success' | 'error'
-  const [suggestedPlaces, setSuggestedPlaces] = useState<SearchPlace[]>([])
+  const [suggestedPlaces, setSuggestedPlaces] = useState<PlaceItem[]>([])
   const isShowRecentKeywords =
     query === '' &&
     !!recentKeywords.length &&

src/app/search/suggest-place-list.tsx

@@ -1,11 +1,11 @@
 import PlaceAutoSearchItem from '@/components/place/place-auto-search-item'
 import useUserGeoLocation from '@/hooks/use-user-geo-location'
-import type { SearchPlace } from '@/models/api/place'
+import type { PlaceItem } from '@/models/api/place'
 import { formatDistance, getDistance } from '@/utils/location'
 import { allowUserPositionStorage } from '@/utils/storage'
 
 interface SuggestPlaceListProps {
-  places: SearchPlace[]
+  places: PlaceItem[]
   query: string
 }
 

src/components/korrk-kakao-map.tsx

@@ -5,15 +5,15 @@ import KakaoMap from './kakao-map/kakao-map'
 import Marker from './kakao-map/marker'
 
 import {
-  type PlaceType,
-  type SearchPlace,
-  isPlaceType,
-  isSearchPlace,
+  type KorrkPlace,
+  type PlaceItem,
+  isKorrkPlace,
+  isPlaceItem,
 } from '@/models/api/place'
 import type { ClassName } from '@/models/common'
 import cn from '@/utils/cn'
 
-interface KorrkKakaoMapProps<T extends PlaceType | SearchPlace>
+interface KorrkKakaoMapProps<T extends KorrkPlace | PlaceItem>
   extends ClassName {
   places?: T[] | null
   center?: Parameters<typeof KakaoMap>[0]['center']
@@ -27,7 +27,7 @@ interface KorrkKakaoMapProps<T extends PlaceType | SearchPlace>
   onClickPlace: (place: T) => void
 }
 
-const KorrkKakaoMap = <T extends PlaceType | SearchPlace>({
+const KorrkKakaoMap = <T extends KorrkPlace | PlaceItem>({
   className,
   selectedPlace,
   center,
@@ -56,34 +56,32 @@ const KorrkKakaoMap = <T extends PlaceType | SearchPlace>({
           onCenterChanged={onCenterChangeMap}
         >
           {places?.map((place) => {
-            const isPlace = isPlaceType(place)
-            const isSearchPlaceType = isSearchPlace(place)
+            const isKorrkPlaceType = isKorrkPlace(place)
+            const isPlaceItemType = isPlaceItem(place)
 
             const isSelected = (() => {
-              if (isPlace && isPlaceType(selectedPlace)) {
+              if (isKorrkPlaceType && isKorrkPlace(selectedPlace)) {
                 return selectedPlace.place.id === place.place.id
               }
-              if (isSearchPlaceType && isSearchPlace(selectedPlace)) {
+              if (isPlaceItemType && isPlaceItem(selectedPlace)) {
                 return selectedPlace.kakaoId === place.kakaoId
               }
               return false
             })()
 
             const type = getMarkerType(
-              isSearchPlaceType
+              isPlaceItemType
                 ? place.category
                 : place.place.kakaoPlace.category,
               isSelected,
             )
             return (
               <Marker
-                key={isSearchPlaceType ? place.kakaoId : place.place.id}
-                latitude={isSearchPlaceType ? place.y : place.place.y}
-                longitude={isSearchPlaceType ? place.x : place.place.x}
+                key={isPlaceItemType ? place.kakaoId : place.place.id}
+                latitude={isPlaceItemType ? place.y : place.place.y}
+                longitude={isPlaceItemType ? place.x : place.place.x}
                 isSaved={
-                  isSearchPlaceType
-                    ? place.isRegisteredPlace
-                    : !!place.createdBy
+                  isPlaceItemType ? place.isRegisteredPlace : !!place.createdBy
                 }
                 type={type}
                 onClick={() => onClickPlace(place)}

src/components/place/kakao-rating.tsx

@@ -1,14 +1,14 @@
 import ExternalLink from '@/components/common/external-link'
 import Icon from '@/components/common/icon'
 import Typography from '@/components/common/typography'
-import type { PlaceType } from '@/models/api/place'
+import type { KorrkPlace } from '@/models/api/place'
 import type { ClassName } from '@/models/common'
 import cn from '@/utils/cn'
 import { roundToNthDecimal } from '@/utils/number'
 
 interface KakaoRatingProps extends ClassName {
   rating: number
-  placeId: PlaceType['place']['kakaoPlace']['id']
+  placeId: KorrkPlace['place']['kakaoPlace']['id']
 }
 
 const MAX_STAR = 5
@@ -31,7 +31,7 @@ const getNumberOfStarIcons = (rating: number) => {
   return { roundedRating, fullIcons, halfIcon, emptyIcons }
 }
 
-const toKakaoMapURL = (placeId: PlaceType['place']['kakaoPlace']['id']) =>
+const toKakaoMapURL = (placeId: KorrkPlace['place']['kakaoPlace']['id']) =>
   `https://place.map.kakao.com/${placeId}`
 
 const KakaoRating = ({ className, rating, placeId }: KakaoRatingProps) => {

src/components/place/place-auto-search-item.tsx

@@ -4,13 +4,13 @@ import Link from 'next/link'
 
 import Icon from '@/components/common/icon'
 import Typography from '@/components/common/typography'
-import type { SearchPlace } from '@/models/api/place'
+import type { PlaceItem } from '@/models/api/place'
 import type { ClassName } from '@/models/common'
 import cn from '@/utils/cn'
 import { recentSearchStorage } from '@/utils/storage'
 
 interface PlaceAutoSearchItemProps extends ClassName {
-  place: SearchPlace
+  place: PlaceItem
   query: string
   distance: string | null
 }