From a0ee4894554b026cb5b759a18dfc15fec87bfaab Mon Sep 17 00:00:00 2001 From: Pridesd Date: Sun, 29 Sep 2024 19:34:38 +0900 Subject: [PATCH 01/18] feat: set inital design --- src/app/profile/[id]/page.tsx | 56 +++++++++++++++++++++++++++++++++++ 1 file changed, 56 insertions(+) create mode 100644 src/app/profile/[id]/page.tsx diff --git a/src/app/profile/[id]/page.tsx b/src/app/profile/[id]/page.tsx new file mode 100644 index 00000000..f8d25797 --- /dev/null +++ b/src/app/profile/[id]/page.tsx @@ -0,0 +1,56 @@ +'use client' + +import AccessibleIconButton from '@/components/common/accessible-icon-button' +import Avatar from '@/components/common/avatar' +import Typography from '@/components/common/typography' +import useFetch from '@/hooks/use-fetch' +import useSafeRouter from '@/hooks/use-safe-router' +import { api } from '@/utils/api' + +const Profile = ({ params: { id } }: { params: { id: number } }) => { + const router = useSafeRouter() + const { data: userData } = useFetch(() => api.users.id.get(id)) + + return ( +
+
+ router.back()} + /> + + 그룹원 프로필 + +
+ +
+
+ + {userData?.nickname} +
+
+
+ + 일반 + +
+
+
+ ) +} + +export default Profile From 57fdc0091ed137952b0cb2179391cf36b7ec3b7a Mon Sep 17 00:00:00 2001 From: Pridesd Date: Sun, 29 Sep 2024 20:18:45 +0900 Subject: [PATCH 02/18] feat: set profile link --- src/app/my-map/[mapId]/crew-info-editable-item.tsx | 13 +++++++++---- src/app/my-map/[mapId]/crew-info-read-only-item.tsx | 9 +++++++-- src/app/place/[placeId]/place-liked-users.tsx | 10 ++++++++-- 3 files changed, 24 insertions(+), 8 deletions(-) diff --git a/src/app/my-map/[mapId]/crew-info-editable-item.tsx b/src/app/my-map/[mapId]/crew-info-editable-item.tsx index 429eae98..09973de8 100644 --- a/src/app/my-map/[mapId]/crew-info-editable-item.tsx +++ b/src/app/my-map/[mapId]/crew-info-editable-item.tsx @@ -11,6 +11,7 @@ import BottomModal from '@/components/common/bottom-modal' import { api } from '@/utils/api' import { notify } from '@/components/common/custom-toast' import useFetch from '@/hooks/use-fetch' +import Link from 'next/link' const RoleButton = ({ role, @@ -128,7 +129,10 @@ const CrewInfoEditableItem = ({ return ( <> -
  • +
    { + className="flex h-full items-center gap-[2px]" + onClick={(e) => { + e.preventDefault() setIsOpenRoleModal(true) }} > @@ -164,7 +169,7 @@ const CrewInfoEditableItem = ({ )} -
    • + { return ( -
  • +
    {korRole[member.role]} -
    • + ) } diff --git a/src/app/place/[placeId]/place-liked-users.tsx b/src/app/place/[placeId]/place-liked-users.tsx index 0fee6ffe..da350848 100644 --- a/src/app/place/[placeId]/place-liked-users.tsx +++ b/src/app/place/[placeId]/place-liked-users.tsx @@ -4,6 +4,7 @@ import type { LikeUser } from '@/components/place/types' import type { ClassName } from '@/models/common' import type { User } from '@/models/user' import cn from '@/utils/cn' +import Link from 'next/link' interface PlaceLikedUserProps extends ClassName { me: User | null @@ -14,7 +15,12 @@ const PlaceLikedUser = ({ likedUser, className, me }: PlaceLikedUserProps) => { return (
      {likedUser.map((user) => ( -
    • + { {user.nickname} -
      • + ))}
    ) From 5e101de4e100f7af8e71cb949d079cf1af37a647 Mon Sep 17 00:00:00 2001 From: Pridesd Date: Sun, 29 Sep 2024 21:34:17 +0900 Subject: [PATCH 03/18] feat: add blue color --- src/components/common/icon.tsx | 6 ++++++ src/components/common/typography.tsx | 3 +++ src/models/color.ts | 3 +++ tailwind.config.ts | 5 +++++ 4 files changed, 17 insertions(+) diff --git a/src/components/common/icon.tsx b/src/components/common/icon.tsx index 9e45da84..09bab468 100644 --- a/src/components/common/icon.tsx +++ b/src/components/common/icon.tsx @@ -49,6 +49,9 @@ const IconVariants = cva<{ 'purple-700': '[&_path]:stroke-purple-700', 'purple-800': '[&_path]:stroke-purple-800', 'yellow-100': '[&_path]:stroke-yellow-100', + 'blue-100': '[&_path]:stroke-blue-100', + 'blue-200': '[&_path]:stroke-blue-200', + 'blue-300': '[&_path]:stroke-blue-300', 'profile-coral': '[&_path]:stroke-profile-coral', 'profile-dark-blue': '[&_path]:stroke-profile-dark-blue', 'profile-sky-blue': '[&_path]:stroke-profile-sky-blue', @@ -85,6 +88,9 @@ const IconVariants = cva<{ 'purple-700': '[&_path]:fill-purple-700', 'purple-800': '[&_path]:fill-purple-800', 'yellow-100': '[&_path]:fill-yellow-100', + 'blue-100': '[&_path]:fill-blue-100', + 'blue-200': '[&_path]:fill-blue-200', + 'blue-300': '[&_path]:fill-blue-300', 'profile-coral': '[&_path]:fill-profile-coral', 'profile-dark-blue': '[&_path]:fill-profile-dark-blue', 'profile-sky-blue': '[&_path]:fill-profile-sky-blue', diff --git a/src/components/common/typography.tsx b/src/components/common/typography.tsx index 16fb6576..15b47e35 100644 --- a/src/components/common/typography.tsx +++ b/src/components/common/typography.tsx @@ -79,6 +79,9 @@ export const TypographyVariants = cva<{ 'profile-sky-blue': 'text-profile-sky-blue', 'profile-violet': 'text-profile-violet', 'profile-green': 'text-profile-green', + 'blue-100': 'text-blue-100', + 'blue-200': 'text-blue-200', + 'blue-300': 'text-blue-300', }, }, defaultVariants: { diff --git a/src/models/color.ts b/src/models/color.ts index 95fd2bd3..a9538f3e 100644 --- a/src/models/color.ts +++ b/src/models/color.ts @@ -32,3 +32,6 @@ export type ColorKey = | 'profile-sky-blue' | 'profile-violet' | 'profile-green' + | 'blue-100' + | 'blue-200' + | 'blue-300' diff --git a/tailwind.config.ts b/tailwind.config.ts index a3a56766..9b807c96 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -171,6 +171,11 @@ const config: Config = { yellow: { '100': '#FFDE59', }, + blue: { + '100': '#C2D8F8', + '200': '#4B93FF', + '300': '#0066FF', + }, profile: { coral: '#E5684C', 'dark-blue': '#5456D7', From b5f4a8eb1f8197a054a5f29b6541e44ce7032e10 Mon Sep 17 00:00:00 2001 From: Pridesd Date: Sun, 29 Sep 2024 21:35:34 +0900 Subject: [PATCH 04/18] feat: set TasteRate --- src/app/profile/[id]/taste-rate.tsx | 59 +++++++++++++++++++++++++++++ 1 file changed, 59 insertions(+) create mode 100644 src/app/profile/[id]/taste-rate.tsx diff --git a/src/app/profile/[id]/taste-rate.tsx b/src/app/profile/[id]/taste-rate.tsx new file mode 100644 index 00000000..3eda6eb9 --- /dev/null +++ b/src/app/profile/[id]/taste-rate.tsx @@ -0,0 +1,59 @@ +'use client' + +import { notify } from '@/components/common/custom-toast' +import Icon from '@/components/common/icon' +import Typography from '@/components/common/typography' +import { APIError } from '@/models/api' +import { User } from '@/models/user' +import { getMapId } from '@/services/map-id' +import { api } from '@/utils/api' +import { useEffect, useState } from 'react' + +const TasteRate = ({ userId }: { userId: User['id'] }) => { + const [rate, setRate] = useState(0) + + useEffect(() => { + const getRate = async () => { + try { + const mapId = await getMapId() + if (!mapId) { + throw new Error('잘못된 접근입니다.') + } + const { data: tasteRate } = await api.place.differ.mapId.userId.get({ + userId, + mapId, + }) + setRate(tasteRate ?? 80) + } catch (error) { + if (error instanceof APIError) { + notify.error(error.message) + } else { + notify.error('알 수 없는 에러가 발생했습니다. ') + } + } + } + + getRate() + }, [userId]) + return ( +
    + + {`나와 취향 유사도 ${rate}%`} +
    + ) +} + +export default TasteRate From 9b23ad44ea0dab58b0bfa68eaa437f21328fe760 Mon Sep 17 00:00:00 2001 From: Pridesd Date: Sun, 29 Sep 2024 21:35:53 +0900 Subject: [PATCH 05/18] feat: add differ api --- src/utils/api/index.ts | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/src/utils/api/index.ts b/src/utils/api/index.ts index c94eb519..dc0b93be 100644 --- a/src/utils/api/index.ts +++ b/src/utils/api/index.ts @@ -193,6 +193,20 @@ const place = { get: (placeId: string): Promise> => client.secure.get(`place/${placeId}`), }, + differ: { + mapId: { + userId: { + get: ({ + mapId, + userId, + }: { + mapId: MapInfo['id'] + userId: User['id'] + }): Promise> => + client.secure.get(`/place/differ/${mapId}/${userId}`), + }, + }, + }, } const proxy = { From 0fcc1982bbe6b29eebe4fa200579517c5eb2b66d Mon Sep 17 00:00:00 2001 From: Pridesd Date: Sun, 29 Sep 2024 21:37:49 +0900 Subject: [PATCH 06/18] fix: fix initial rate --- src/app/profile/[id]/taste-rate.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/profile/[id]/taste-rate.tsx b/src/app/profile/[id]/taste-rate.tsx index 3eda6eb9..d9229511 100644 --- a/src/app/profile/[id]/taste-rate.tsx +++ b/src/app/profile/[id]/taste-rate.tsx @@ -23,7 +23,7 @@ const TasteRate = ({ userId }: { userId: User['id'] }) => { userId, mapId, }) - setRate(tasteRate ?? 80) + setRate(tasteRate ?? 0) } catch (error) { if (error instanceof APIError) { notify.error(error.message) From c5170083ffd3a74b4247e6d57d697d9ee020a255 Mon Sep 17 00:00:00 2001 From: Pridesd Date: Mon, 30 Sep 2024 00:43:44 +0900 Subject: [PATCH 07/18] feat: set initial-panel --- src/app/profile/[id]/liked-place-panel.tsx | 14 +++++ src/app/profile/[id]/page.tsx | 51 ++++++++++++++----- .../profile/[id]/registered-place-panel.tsx | 14 +++++ 3 files changed, 67 insertions(+), 12 deletions(-) create mode 100644 src/app/profile/[id]/liked-place-panel.tsx create mode 100644 src/app/profile/[id]/registered-place-panel.tsx diff --git a/src/app/profile/[id]/liked-place-panel.tsx b/src/app/profile/[id]/liked-place-panel.tsx new file mode 100644 index 00000000..8dcd2de0 --- /dev/null +++ b/src/app/profile/[id]/liked-place-panel.tsx @@ -0,0 +1,14 @@ +const LikedPlacePanel = () => { + return ( +
    + LikedPlacePanel +
    + ) +} + +export default LikedPlacePanel diff --git a/src/app/profile/[id]/page.tsx b/src/app/profile/[id]/page.tsx index f8d25797..1d4835ab 100644 --- a/src/app/profile/[id]/page.tsx +++ b/src/app/profile/[id]/page.tsx @@ -5,11 +5,21 @@ import Avatar from '@/components/common/avatar' import Typography from '@/components/common/typography' import useFetch from '@/hooks/use-fetch' import useSafeRouter from '@/hooks/use-safe-router' +import { User } from '@/models/user' import { api } from '@/utils/api' +import TasteRate from './taste-rate' +import { useState } from 'react' +import LikedPlacePanel from './liked-place-panel' +import RegisterededPlacePanel from './registered-place-panel' -const Profile = ({ params: { id } }: { params: { id: number } }) => { +type PlaceFilter = 'register' | 'liked' + +const Profile = ({ params: { id } }: { params: { id: User['id'] } }) => { const router = useSafeRouter() const { data: userData } = useFetch(() => api.users.id.get(id)) + const [type, setType] = useState('register') + + const getIsSelected = (currentType: PlaceFilter) => type === currentType return (
    @@ -29,8 +39,8 @@ const Profile = ({ params: { id } }: { params: { id: number } }) => { -
    -
    +
    +
    { /> {userData?.nickname}
    +
    -
    - - 일반 - -
    +
    +
    + + +
    + {type === 'liked' ? : } +
    ) } diff --git a/src/app/profile/[id]/registered-place-panel.tsx b/src/app/profile/[id]/registered-place-panel.tsx new file mode 100644 index 00000000..24e125df --- /dev/null +++ b/src/app/profile/[id]/registered-place-panel.tsx @@ -0,0 +1,14 @@ +const RegisterededPlacePanel = () => { + return ( +
    + RegisterededPlacePanel +
    + ) +} + +export default RegisterededPlacePanel From fd8f4f8b5ec254eb17940de9864ff12948b45904 Mon Sep 17 00:00:00 2001 From: Pridesd Date: Tue, 1 Oct 2024 17:19:06 +0900 Subject: [PATCH 08/18] feat: add place item --- src/app/profile/[id]/place-item.tsx | 201 ++++++++++++++++++++++++++++ 1 file changed, 201 insertions(+) create mode 100644 src/app/profile/[id]/place-item.tsx diff --git a/src/app/profile/[id]/place-item.tsx b/src/app/profile/[id]/place-item.tsx new file mode 100644 index 00000000..09adff37 --- /dev/null +++ b/src/app/profile/[id]/place-item.tsx @@ -0,0 +1,201 @@ +'use client' + +import { forwardRef, useEffect, useState } from 'react' + +import Link from 'next/link' + +import { notify } from '@/components/common/custom-toast' +import Icon from '@/components/common/icon' +import ProxyImage from '@/components/common/proxy-image' +import Typography from '@/components/common/typography' +import LikeButton from '@/components/like-button' +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 { ClassName } from '@/models/common' +import { api } from '@/utils/api' +import cn from '@/utils/cn' +import { roundOnePoint } from '@/utils/number' +import { getStarByScore } from '@/utils/score' + +interface PlaceItemProps extends ClassName { + selectedPlace: PlaceType + mapId: string + onRefreshOldPlace?: VoidFunction +} + +const PlaceItem = forwardRef( + ({ selectedPlace, className, mapId, onRefreshOldPlace }, ref) => { + const [isLikePlace, setIsLikePlace] = useState(false) + const { data: user, revalidate } = useFetch(api.users.me.get, { + key: ['user'], + }) + + const place = selectedPlace.place + + const getNumOfLike = () => { + const initialNumOfLike = selectedPlace.likedUser?.length || 0 + + if (!user?.id) return initialNumOfLike + if (selectedPlace.likedUser.some((liked) => liked.id === user.id)) { + if (isLikePlace) return initialNumOfLike + return initialNumOfLike - 1 + } + if (isLikePlace) return initialNumOfLike + 1 + return initialNumOfLike + } + + const handleLikePlace = async () => { + try { + if (!mapId) return + + setIsLikePlace(true) + await api.place.mapId.placeId.like.put({ + placeId: place.id, + mapId, + }) + revalidate(['places', mapId]) + } catch (error) { + setIsLikePlace(false) + if (error instanceof APIError || error instanceof Error) { + notify.error(error.message) + } + } finally { + if (onRefreshOldPlace) { + onRefreshOldPlace() + } + } + } + + const handleUnLikePlace = async () => { + try { + if (!mapId) return + + setIsLikePlace(false) + await api.place.mapId.placeId.like.delete({ + placeId: place.id, + mapId, + }) + revalidate(['places', mapId]) + } catch (error) { + setIsLikePlace(true) + if (error instanceof APIError || error instanceof Error) { + notify.error(error.message) + } + } finally { + if (onRefreshOldPlace) { + onRefreshOldPlace() + } + } + } + + const kakaoPlace = place.kakaoPlace + const tags = selectedPlace.tags + const pick = { + isLiked: isLikePlace, + isMyPick: + typeof selectedPlace.createdBy != 'undefined' && + selectedPlace.createdBy.id === user?.id, + numOfLikes: getNumOfLike(), + onClickLike: isLikePlace ? handleUnLikePlace : handleLikePlace, + } + + useEffect(() => { + if (!user) return + setIsLikePlace( + selectedPlace.likedUser.some((liked) => liked.id === user.id), + ) + }, [user, selectedPlace]) + + return ( + +
    +
    +
    +
    + + {kakaoPlace.name} + + + {kakaoPlace.category} + +
    + +
    + {!!kakaoPlace.score && ( +
    + + + {roundOnePoint(kakaoPlace.score)} + +
    + )} + + {kakaoPlace.address} + +
    +
    + + {pick && ( +
    + + { + e.stopPropagation() + e.preventDefault() + pick.onClickLike() + }} + /> +
    + )} +
    + + {kakaoPlace.mainPhotoUrl && ( + + )} +
    + + {!!tags?.length && ( + + )} + + ) + }, +) + +PlaceItem.displayName = 'PlaceItem' + +export default PlaceItem From 2370dd28bb29bfe2428e611d1d6948edae3bd011 Mon Sep 17 00:00:00 2001 From: Pridesd Date: Tue, 1 Oct 2024 17:20:16 +0900 Subject: [PATCH 09/18] chore: change style --- src/components/common/chip.tsx | 2 +- src/components/tag-list.tsx | 16 ++++++++++++++-- 2 files changed, 15 insertions(+), 3 deletions(-) diff --git a/src/components/common/chip.tsx b/src/components/common/chip.tsx index 9f193ec4..31a474e7 100644 --- a/src/components/common/chip.tsx +++ b/src/components/common/chip.tsx @@ -21,7 +21,7 @@ const ChipVariants = cva<{ variants: { colorScheme: { 'neutral-400': 'bg-neutral-400 text-neutral-000', - 'neutral-500': 'bg-neutral-500 text-neutral-400', + 'neutral-500': 'bg-neutral-500 text-neutral-100', 'neutral-600': 'bg-neutral-600 text-neutral-300', 'neutral-800': 'bg-neutral-800 text-orange-400', orange: 'bg-orange-400 text-neutral-000', diff --git a/src/components/tag-list.tsx b/src/components/tag-list.tsx index 60f00e72..65072fd5 100644 --- a/src/components/tag-list.tsx +++ b/src/components/tag-list.tsx @@ -10,9 +10,21 @@ import { changeSpaceToHyphen } from '@/utils/tags' interface TagListProps extends ClassName { placeId: PlaceType['place']['id'] tags: TagItem[] | string[] + tagColorScheme?: + | 'neutral-400' + | 'neutral-500' + | 'neutral-600' + | 'neutral-800' + | 'orange' + | 'purple' } -const TagList = ({ placeId, tags, className }: TagListProps) => { +const TagList = ({ + placeId, + tags, + className, + tagColorScheme, +}: TagListProps) => { const tagNames = tags.map((tag) => (typeof tag === 'string' ? tag : tag.name)) return ( @@ -26,7 +38,7 @@ const TagList = ({ placeId, tags, className }: TagListProps) => { {`#${tag}`} ))} From e7a820fc728049019391ac5ff6113c5e460daeaa Mon Sep 17 00:00:00 2001 From: Pridesd Date: Tue, 1 Oct 2024 17:28:28 +0900 Subject: [PATCH 10/18] feat: set profile --- src/app/profile/[id]/liked-place-panel.tsx | 49 ++++++++++++++++--- src/app/profile/[id]/page.tsx | 6 ++- .../profile/[id]/registered-place-panel.tsx | 41 ++++++++++++++-- src/components/common/chip.tsx | 2 +- src/components/tag-list.tsx | 6 ++- src/utils/api/index.ts | 24 +++++++++ 6 files changed, 114 insertions(+), 14 deletions(-) diff --git a/src/app/profile/[id]/liked-place-panel.tsx b/src/app/profile/[id]/liked-place-panel.tsx index 8dcd2de0..adc7233a 100644 --- a/src/app/profile/[id]/liked-place-panel.tsx +++ b/src/app/profile/[id]/liked-place-panel.tsx @@ -1,12 +1,45 @@ -const LikedPlacePanel = () => { +import { PlaceType } from '@/models/api/place' +import { MapInfo } from '@/models/map' +import { User } from '@/models/user' +import { getMapId } from '@/services/map-id' +import { api } from '@/utils/api' +import { useEffect, useState } from 'react' +import PlaceItem from './place-item' + +const LikedPlacePanel = ({ userId }: { userId: User['id'] }) => { + const [mapId, setMapId] = useState('') + const [places, setPlaces] = useState([]) + useEffect(() => { + const getLikedPlace = async () => { + try { + const mapId = await getMapId() + if (!mapId) { + throw new Error('잘못된 접근입니다.') + } + setMapId(mapId) + const { data } = await api.place.like.mapId.userId.get({ + mapId, + userId, + }) + setPlaces(data) + } catch (error) {} + } + + getLikedPlace() + }, [userId]) + + console.log(places) return ( -
    - LikedPlacePanel +
    +
    + {places.map((place) => ( + + ))} +
    ) } diff --git a/src/app/profile/[id]/page.tsx b/src/app/profile/[id]/page.tsx index 1d4835ab..4c533429 100644 --- a/src/app/profile/[id]/page.tsx +++ b/src/app/profile/[id]/page.tsx @@ -74,7 +74,11 @@ const Profile = ({ params: { id } }: { params: { id: User['id'] } }) => { 좋아요
    - {type === 'liked' ? : } + {type === 'liked' ? ( + + ) : ( + + )}
    ) diff --git a/src/app/profile/[id]/registered-place-panel.tsx b/src/app/profile/[id]/registered-place-panel.tsx index 24e125df..66a2baac 100644 --- a/src/app/profile/[id]/registered-place-panel.tsx +++ b/src/app/profile/[id]/registered-place-panel.tsx @@ -1,12 +1,47 @@ -const RegisterededPlacePanel = () => { +import { PlaceType } from '@/models/api/place' +import { MapInfo } from '@/models/map' +import { User } from '@/models/user' +import { getMapId } from '@/services/map-id' +import { api } from '@/utils/api' +import { useEffect, useState } from 'react' +import PlaceItem from './place-item' + +const RegisterededPlacePanel = ({ userId }: { userId: User['id'] }) => { + const [mapId, setMapId] = useState('') + const [places, setPlaces] = useState([]) + useEffect(() => { + const getRegisteredPlace = async () => { + try { + const mapId = await getMapId() + if (!mapId) { + throw new Error('잘못된 접근입니다.') + } + setMapId(mapId) + const { data } = await api.place.mapId.userId.get({ + mapId, + userId, + }) + setPlaces(data) + } catch (error) {} + } + + getRegisteredPlace() + }, [userId]) return (
    - RegisterededPlacePanel +
    + {places.map((place) => ( + + ))} +
    ) } diff --git a/src/components/common/chip.tsx b/src/components/common/chip.tsx index 31a474e7..9f193ec4 100644 --- a/src/components/common/chip.tsx +++ b/src/components/common/chip.tsx @@ -21,7 +21,7 @@ const ChipVariants = cva<{ variants: { colorScheme: { 'neutral-400': 'bg-neutral-400 text-neutral-000', - 'neutral-500': 'bg-neutral-500 text-neutral-100', + 'neutral-500': 'bg-neutral-500 text-neutral-400', 'neutral-600': 'bg-neutral-600 text-neutral-300', 'neutral-800': 'bg-neutral-800 text-orange-400', orange: 'bg-orange-400 text-neutral-000', diff --git a/src/components/tag-list.tsx b/src/components/tag-list.tsx index 65072fd5..e0956cc8 100644 --- a/src/components/tag-list.tsx +++ b/src/components/tag-list.tsx @@ -37,7 +37,11 @@ const TagList = ({ {tagNames.map((tag) => ( {`#${tag}`} diff --git a/src/utils/api/index.ts b/src/utils/api/index.ts index dc0b93be..c3af1108 100644 --- a/src/utils/api/index.ts +++ b/src/utils/api/index.ts @@ -149,6 +149,16 @@ const place = { mapId: { get: (mapId: MapInfo['id']): Promise> => client.secure.get(`/place/${mapId}`), + userId: { + get: ({ + mapId, + userId, + }: { + mapId: MapInfo['id'] + userId: User['id'] + }): Promise> => + client.secure.get(`/place/${mapId}/${userId}`), + }, placeId: { delete: ({ placeId, mapId }: PlaceIdWithMapId) => @@ -207,6 +217,20 @@ const place = { }, }, }, + like: { + mapId: { + userId: { + get: ({ + userId, + mapId, + }: { + userId: User['id'] + mapId: MapInfo['id'] + }): Promise> => + client.secure.get(`/place/like/${mapId}/${userId}`), + }, + }, + }, } const proxy = { From 3308595ee66b9cb12f46caaccb400559c0161ec9 Mon Sep 17 00:00:00 2001 From: Pridesd Date: Tue, 1 Oct 2024 17:31:01 +0900 Subject: [PATCH 11/18] feat: set update map id logic --- src/app/my-map/[mapId]/crew-info-list.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/app/my-map/[mapId]/crew-info-list.tsx b/src/app/my-map/[mapId]/crew-info-list.tsx index e9cc2736..cbfdd15d 100644 --- a/src/app/my-map/[mapId]/crew-info-list.tsx +++ b/src/app/my-map/[mapId]/crew-info-list.tsx @@ -5,6 +5,8 @@ import type { User } from '@/models/user' import cn from '@/utils/cn' import CrewInfoReadOnlyItem from './crew-info-read-only-item' import CrewInfoEditableItem from './crew-info-editable-item' +import { useEffect } from 'react' +import { updateMapIdCookie } from '@/services/map-id' interface CrewInfoListProps extends ClassName { user: User @@ -45,6 +47,10 @@ const CrewInfoList = ({ const isMyMap = mapInfo.createBy.id === user.id const members = mapInfo.users + useEffect(() => { + updateMapIdCookie(mapInfo.id) + }, []) + return (
    From c770498e50975478fa2a43a89d34a052678a01a5 Mon Sep 17 00:00:00 2001 From: Pridesd Date: Tue, 1 Oct 2024 17:45:15 +0900 Subject: [PATCH 12/18] fix: lint error --- src/app/my-map/[mapId]/crew-info-list.tsx | 2 +- src/app/profile/[id]/liked-place-panel.tsx | 27 ++++++++++++------- src/app/profile/[id]/page.tsx | 2 +- .../profile/[id]/registered-place-panel.tsx | 27 ++++++++++++------- src/app/profile/[id]/taste-rate.tsx | 2 +- 5 files changed, 39 insertions(+), 21 deletions(-) diff --git a/src/app/my-map/[mapId]/crew-info-list.tsx b/src/app/my-map/[mapId]/crew-info-list.tsx index cbfdd15d..730b3bc3 100644 --- a/src/app/my-map/[mapId]/crew-info-list.tsx +++ b/src/app/my-map/[mapId]/crew-info-list.tsx @@ -49,7 +49,7 @@ const CrewInfoList = ({ useEffect(() => { updateMapIdCookie(mapInfo.id) - }, []) + }, [mapInfo.id]) return (
    diff --git a/src/app/profile/[id]/liked-place-panel.tsx b/src/app/profile/[id]/liked-place-panel.tsx index adc7233a..a601a33f 100644 --- a/src/app/profile/[id]/liked-place-panel.tsx +++ b/src/app/profile/[id]/liked-place-panel.tsx @@ -1,10 +1,12 @@ -import { PlaceType } from '@/models/api/place' -import { MapInfo } from '@/models/map' -import { User } from '@/models/user' +import type { PlaceType } from '@/models/api/place' +import type { MapInfo } from '@/models/map' +import type { User } from '@/models/user' import { getMapId } from '@/services/map-id' import { api } from '@/utils/api' import { useEffect, useState } from 'react' import PlaceItem from './place-item' +import { APIError } from '@/models/api' +import { notify } from '@/components/common/custom-toast' const LikedPlacePanel = ({ userId }: { userId: User['id'] }) => { const [mapId, setMapId] = useState('') @@ -12,17 +14,23 @@ const LikedPlacePanel = ({ userId }: { userId: User['id'] }) => { useEffect(() => { const getLikedPlace = async () => { try { - const mapId = await getMapId() - if (!mapId) { + const currentMapId = await getMapId() + if (!currentMapId) { throw new Error('잘못된 접근입니다.') } - setMapId(mapId) + setMapId(currentMapId) const { data } = await api.place.like.mapId.userId.get({ - mapId, + mapId: currentMapId, userId, }) setPlaces(data) - } catch (error) {} + } catch (error) { + if (error instanceof APIError) { + notify.error(error.message) + } else { + notify.error('에러가 발생했습니다.') + } + } } getLikedPlace() @@ -31,9 +39,10 @@ const LikedPlacePanel = ({ userId }: { userId: User['id'] }) => { console.log(places) return (
    -
    +
    {places.map((place) => ( { const [mapId, setMapId] = useState('') @@ -12,17 +14,23 @@ const RegisterededPlacePanel = ({ userId }: { userId: User['id'] }) => { useEffect(() => { const getRegisteredPlace = async () => { try { - const mapId = await getMapId() - if (!mapId) { + const currentMapId = await getMapId() + if (!currentMapId) { throw new Error('잘못된 접근입니다.') } - setMapId(mapId) + setMapId(currentMapId) const { data } = await api.place.mapId.userId.get({ - mapId, + mapId: currentMapId, userId, }) setPlaces(data) - } catch (error) {} + } catch (error) { + if (error instanceof APIError) { + notify.error(error.message) + } else { + notify.error('에러가 발생했습니다.') + } + } } getRegisteredPlace() @@ -33,9 +41,10 @@ const RegisterededPlacePanel = ({ userId }: { userId: User['id'] }) => { id="tappanel-tappanel-register" aria-labelledby="tap-tappanel-register" > -
    +
    {places.map((place) => ( Date: Tue, 1 Oct 2024 18:04:54 +0900 Subject: [PATCH 13/18] =?UTF-8?q?feat:=20set=20=EC=8A=A4=EC=BC=88=EB=A0=88?= =?UTF-8?q?=ED=86=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/profile/[id]/liked-place-panel.tsx | 50 ++++++++++++++----- .../profile/[id]/registered-place-panel.tsx | 48 ++++++++++++++---- 2 files changed, 76 insertions(+), 22 deletions(-) diff --git a/src/app/profile/[id]/liked-place-panel.tsx b/src/app/profile/[id]/liked-place-panel.tsx index a601a33f..c661cd15 100644 --- a/src/app/profile/[id]/liked-place-panel.tsx +++ b/src/app/profile/[id]/liked-place-panel.tsx @@ -7,10 +7,46 @@ import { useEffect, useState } from 'react' import PlaceItem from './place-item' import { APIError } from '@/models/api' import { notify } from '@/components/common/custom-toast' +import EmptyPlaceList from '@/components/place/empty-place-list' +import PlacePopupSkeleton from '@/components/place/place-popup-skeleton' const LikedPlacePanel = ({ userId }: { userId: User['id'] }) => { const [mapId, setMapId] = useState('') - const [places, setPlaces] = useState([]) + const [places, setPlaces] = useState() + + const renderPlaces = () => { + if (typeof places === 'undefined') { + return ( +
    + + + +
    + ) + } + if (places.length === 0) { + return ( + + ) + } + + return ( +
    + {places.map((place) => ( + + ))} +
    + ) + } + useEffect(() => { const getLikedPlace = async () => { try { @@ -36,19 +72,9 @@ const LikedPlacePanel = ({ userId }: { userId: User['id'] }) => { getLikedPlace() }, [userId]) - console.log(places) return (
    -
    - {places.map((place) => ( - - ))} -
    + {renderPlaces()}
    ) } diff --git a/src/app/profile/[id]/registered-place-panel.tsx b/src/app/profile/[id]/registered-place-panel.tsx index a0440456..2b67644e 100644 --- a/src/app/profile/[id]/registered-place-panel.tsx +++ b/src/app/profile/[id]/registered-place-panel.tsx @@ -7,10 +7,46 @@ import { useEffect, useState } from 'react' import PlaceItem from './place-item' import { APIError } from '@/models/api' import { notify } from '@/components/common/custom-toast' +import EmptyPlaceList from '@/components/place/empty-place-list' +import PlacePopupSkeleton from '@/components/place/place-popup-skeleton' const RegisterededPlacePanel = ({ userId }: { userId: User['id'] }) => { const [mapId, setMapId] = useState('') const [places, setPlaces] = useState([]) + + const renderPlaces = () => { + if (typeof places === 'undefined') { + return ( +
    + + + +
    + ) + } + if (places.length === 0) { + return ( + + ) + } + + return ( +
    + {places.map((place) => ( + + ))} +
    + ) + } + useEffect(() => { const getRegisteredPlace = async () => { try { @@ -35,22 +71,14 @@ const RegisterededPlacePanel = ({ userId }: { userId: User['id'] }) => { getRegisteredPlace() }, [userId]) + return (
    -
    - {places.map((place) => ( - - ))} -
    + {renderPlaces()}
    ) } From 264cb2a9ab6bea517b624fa0e14f23f67c9bb337 Mon Sep 17 00:00:00 2001 From: Pridesd Date: Thu, 3 Oct 2024 13:24:16 +0900 Subject: [PATCH 14/18] refactor: add mapId --- package-lock.json | 120 ++++++++++++++++++ .../{ => [mapId]}/[id]/liked-place-panel.tsx | 0 src/app/profile/{ => [mapId]}/[id]/page.tsx | 7 +- .../profile/{ => [mapId]}/[id]/place-item.tsx | 0 .../[id]/registered-place-panel.tsx | 0 .../profile/{ => [mapId]}/[id]/taste-rate.tsx | 0 6 files changed, 126 insertions(+), 1 deletion(-) rename src/app/profile/{ => [mapId]}/[id]/liked-place-panel.tsx (100%) rename src/app/profile/{ => [mapId]}/[id]/page.tsx (95%) rename src/app/profile/{ => [mapId]}/[id]/place-item.tsx (100%) rename src/app/profile/{ => [mapId]}/[id]/registered-place-panel.tsx (100%) rename src/app/profile/{ => [mapId]}/[id]/taste-rate.tsx (100%) diff --git a/package-lock.json b/package-lock.json index a659f657..4a910e74 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19994,6 +19994,126 @@ "funding": { "url": "https://github.com/sponsors/sindresorhus" } + }, + "node_modules/@next/swc-darwin-x64": { + "version": "14.2.13", + "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.13.tgz", + "integrity": "sha512-Dv1RBGs2TTjkwEnFMVL5XIfJEavnLqqwYSD6LXgTPdEy/u6FlSrLBSSfe1pcfqhFEXRAgVL3Wpjibe5wXJzWog==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-linux-arm64-gnu": { + "version": "14.2.13", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.13.tgz", + "integrity": "sha512-yB1tYEFFqo4ZNWkwrJultbsw7NPAAxlPXURXioRl9SdW6aIefOLS+0TEsKrWBtbJ9moTDgU3HRILL6QBQnMevg==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-linux-arm64-musl": { + "version": "14.2.13", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.13.tgz", + "integrity": "sha512-v5jZ/FV/eHGoWhMKYrsAweQ7CWb8xsWGM/8m1mwwZQ/sutJjoFaXchwK4pX8NqwImILEvQmZWyb8pPTcP7htWg==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-linux-x64-gnu": { + "version": "14.2.13", + "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.13.tgz", + "integrity": "sha512-aVc7m4YL7ViiRv7SOXK3RplXzOEe/qQzRA5R2vpXboHABs3w8vtFslGTz+5tKiQzWUmTmBNVW0UQdhkKRORmGA==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-linux-x64-musl": { + "version": "14.2.13", + "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.13.tgz", + "integrity": "sha512-4wWY7/OsSaJOOKvMsu1Teylku7vKyTuocvDLTZQq0TYv9OjiYYWt63PiE1nTuZnqQ4RPvME7Xai+9enoiN0Wrg==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-win32-arm64-msvc": { + "version": "14.2.13", + "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.13.tgz", + "integrity": "sha512-uP1XkqCqV2NVH9+g2sC7qIw+w2tRbcMiXFEbMihkQ8B1+V6m28sshBwAB0SDmOe0u44ne1vFU66+gx/28RsBVQ==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-win32-ia32-msvc": { + "version": "14.2.13", + "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.13.tgz", + "integrity": "sha512-V26ezyjPqQpDBV4lcWIh8B/QICQ4v+M5Bo9ykLN+sqeKKBxJVDpEc6biDVyluTXTC40f5IqCU0ttth7Es2ZuMw==", + "cpu": [ + "ia32" + ], + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-win32-x64-msvc": { + "version": "14.2.13", + "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.13.tgz", + "integrity": "sha512-WwzOEAFBGhlDHE5Z73mNU8CO8mqMNLqaG+AO9ETmzdCQlJhVtWZnOl2+rqgVQS+YHunjOWptdFmNfbpwcUuEsw==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10" + } } } } diff --git a/src/app/profile/[id]/liked-place-panel.tsx b/src/app/profile/[mapId]/[id]/liked-place-panel.tsx similarity index 100% rename from src/app/profile/[id]/liked-place-panel.tsx rename to src/app/profile/[mapId]/[id]/liked-place-panel.tsx diff --git a/src/app/profile/[id]/page.tsx b/src/app/profile/[mapId]/[id]/page.tsx similarity index 95% rename from src/app/profile/[id]/page.tsx rename to src/app/profile/[mapId]/[id]/page.tsx index 7fcb9ea5..d3daa0a0 100644 --- a/src/app/profile/[id]/page.tsx +++ b/src/app/profile/[mapId]/[id]/page.tsx @@ -11,10 +11,15 @@ import TasteRate from './taste-rate' import { useState } from 'react' import LikedPlacePanel from './liked-place-panel' import RegisterededPlacePanel from './registered-place-panel' +import type { MapInfo } from '@/models/map' type PlaceFilter = 'register' | 'liked' -const Profile = ({ params: { id } }: { params: { id: User['id'] } }) => { +const Profile = ({ + params: { id, mapId }, +}: { + params: { id: User['id']; mapId: MapInfo['id'] } +}) => { const router = useSafeRouter() const { data: userData } = useFetch(() => api.users.id.get(id)) const [type, setType] = useState('register') diff --git a/src/app/profile/[id]/place-item.tsx b/src/app/profile/[mapId]/[id]/place-item.tsx similarity index 100% rename from src/app/profile/[id]/place-item.tsx rename to src/app/profile/[mapId]/[id]/place-item.tsx diff --git a/src/app/profile/[id]/registered-place-panel.tsx b/src/app/profile/[mapId]/[id]/registered-place-panel.tsx similarity index 100% rename from src/app/profile/[id]/registered-place-panel.tsx rename to src/app/profile/[mapId]/[id]/registered-place-panel.tsx diff --git a/src/app/profile/[id]/taste-rate.tsx b/src/app/profile/[mapId]/[id]/taste-rate.tsx similarity index 100% rename from src/app/profile/[id]/taste-rate.tsx rename to src/app/profile/[mapId]/[id]/taste-rate.tsx From 47732843e4b26f170b1c23527e47017b8805fceb Mon Sep 17 00:00:00 2001 From: Pridesd Date: Thu, 3 Oct 2024 13:46:06 +0900 Subject: [PATCH 15/18] =?UTF-8?q?feat:=20=EB=A7=B5=EC=95=84=EC=9D=B4?= =?UTF-8?q?=EB=94=94=EB=A5=BC=20=EC=A0=81=EC=9A=A9=ED=95=B4=EB=B3=B4?= =?UTF-8?q?=EC=95=98=EC=96=B4=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../my-map/[mapId]/crew-info-editable-item.tsx | 2 +- src/app/my-map/[mapId]/crew-info-list.tsx | 8 +------- .../[mapId]/crew-info-read-only-item.tsx | 6 ++++-- src/app/place/[placeId]/place-liked-users.tsx | 18 +++++++++++++----- .../profile/[mapId]/[id]/liked-place-panel.tsx | 18 +++++++++--------- src/app/profile/[mapId]/[id]/page.tsx | 4 ++-- .../[mapId]/[id]/registered-place-panel.tsx | 18 +++++++++--------- 7 files changed, 39 insertions(+), 35 deletions(-) diff --git a/src/app/my-map/[mapId]/crew-info-editable-item.tsx b/src/app/my-map/[mapId]/crew-info-editable-item.tsx index 09973de8..9a5c3c77 100644 --- a/src/app/my-map/[mapId]/crew-info-editable-item.tsx +++ b/src/app/my-map/[mapId]/crew-info-editable-item.tsx @@ -130,7 +130,7 @@ const CrewInfoEditableItem = ({ return ( <>
    diff --git a/src/app/my-map/[mapId]/crew-info-list.tsx b/src/app/my-map/[mapId]/crew-info-list.tsx index 730b3bc3..ac39b32e 100644 --- a/src/app/my-map/[mapId]/crew-info-list.tsx +++ b/src/app/my-map/[mapId]/crew-info-list.tsx @@ -5,9 +5,6 @@ import type { User } from '@/models/user' import cn from '@/utils/cn' import CrewInfoReadOnlyItem from './crew-info-read-only-item' import CrewInfoEditableItem from './crew-info-editable-item' -import { useEffect } from 'react' -import { updateMapIdCookie } from '@/services/map-id' - interface CrewInfoListProps extends ClassName { user: User mapInfo: MapInfo @@ -47,10 +44,6 @@ const CrewInfoList = ({ const isMyMap = mapInfo.createBy.id === user.id const members = mapInfo.users - useEffect(() => { - updateMapIdCookie(mapInfo.id) - }, [mapInfo.id]) - return (
    @@ -77,6 +70,7 @@ const CrewInfoList = ({ diff --git a/src/app/my-map/[mapId]/crew-info-read-only-item.tsx b/src/app/my-map/[mapId]/crew-info-read-only-item.tsx index b7d67f1c..124d3cdd 100644 --- a/src/app/my-map/[mapId]/crew-info-read-only-item.tsx +++ b/src/app/my-map/[mapId]/crew-info-read-only-item.tsx @@ -1,7 +1,7 @@ import Avatar from '@/components/common/avatar' import Chip from '@/components/common/chip' import Typography from '@/components/common/typography' -import type { MapMemberData } from '@/models/map' +import type { MapInfo, MapMemberData } from '@/models/map' import { korRole } from './constant' import Link from 'next/link' @@ -9,7 +9,9 @@ const CrewInfoReadOnlyItem = ({ member, isMe, avatarColor, + mapId, }: { + mapId: MapInfo['id'] member: MapMemberData avatarColor: Parameters[0]['colorScheme'] isMe: boolean @@ -17,7 +19,7 @@ const CrewInfoReadOnlyItem = ({ return (
    diff --git a/src/app/place/[placeId]/place-liked-users.tsx b/src/app/place/[placeId]/place-liked-users.tsx index da350848..749d04a9 100644 --- a/src/app/place/[placeId]/place-liked-users.tsx +++ b/src/app/place/[placeId]/place-liked-users.tsx @@ -3,8 +3,9 @@ import Typography from '@/components/common/typography' import type { LikeUser } from '@/components/place/types' import type { ClassName } from '@/models/common' import type { User } from '@/models/user' +import { getMapId } from '@/services/map-id' import cn from '@/utils/cn' -import Link from 'next/link' +import { useRouter } from 'next/navigation' interface PlaceLikedUserProps extends ClassName { me: User | null @@ -12,14 +13,21 @@ interface PlaceLikedUserProps extends ClassName { } const PlaceLikedUser = ({ likedUser, className, me }: PlaceLikedUserProps) => { + const router = useRouter() + + const handleMoveProfile = async (userId: User['id']) => { + const mapId = await getMapId() + if (!mapId) return + router.push(`/profile/${mapId}/${userId}`) + } + return (
      {likedUser.map((user) => ( - handleMoveProfile(user.id)} > { {user.nickname} - + ))}
    ) diff --git a/src/app/profile/[mapId]/[id]/liked-place-panel.tsx b/src/app/profile/[mapId]/[id]/liked-place-panel.tsx index c661cd15..9c8aff7d 100644 --- a/src/app/profile/[mapId]/[id]/liked-place-panel.tsx +++ b/src/app/profile/[mapId]/[id]/liked-place-panel.tsx @@ -10,8 +10,13 @@ import { notify } from '@/components/common/custom-toast' import EmptyPlaceList from '@/components/place/empty-place-list' import PlacePopupSkeleton from '@/components/place/place-popup-skeleton' -const LikedPlacePanel = ({ userId }: { userId: User['id'] }) => { - const [mapId, setMapId] = useState('') +const LikedPlacePanel = ({ + userId, + mapId, +}: { + userId: User['id'] + mapId: MapInfo['id'] +}) => { const [places, setPlaces] = useState() const renderPlaces = () => { @@ -50,13 +55,8 @@ const LikedPlacePanel = ({ userId }: { userId: User['id'] }) => { useEffect(() => { const getLikedPlace = async () => { try { - const currentMapId = await getMapId() - if (!currentMapId) { - throw new Error('잘못된 접근입니다.') - } - setMapId(currentMapId) const { data } = await api.place.like.mapId.userId.get({ - mapId: currentMapId, + mapId, userId, }) setPlaces(data) @@ -70,7 +70,7 @@ const LikedPlacePanel = ({ userId }: { userId: User['id'] }) => { } getLikedPlace() - }, [userId]) + }, [userId, mapId]) return (
    diff --git a/src/app/profile/[mapId]/[id]/page.tsx b/src/app/profile/[mapId]/[id]/page.tsx index d3daa0a0..d7a627f5 100644 --- a/src/app/profile/[mapId]/[id]/page.tsx +++ b/src/app/profile/[mapId]/[id]/page.tsx @@ -80,9 +80,9 @@ const Profile = ({
    {type === 'liked' ? ( - + ) : ( - + )}
    diff --git a/src/app/profile/[mapId]/[id]/registered-place-panel.tsx b/src/app/profile/[mapId]/[id]/registered-place-panel.tsx index 2b67644e..83162e82 100644 --- a/src/app/profile/[mapId]/[id]/registered-place-panel.tsx +++ b/src/app/profile/[mapId]/[id]/registered-place-panel.tsx @@ -10,8 +10,13 @@ import { notify } from '@/components/common/custom-toast' import EmptyPlaceList from '@/components/place/empty-place-list' import PlacePopupSkeleton from '@/components/place/place-popup-skeleton' -const RegisterededPlacePanel = ({ userId }: { userId: User['id'] }) => { - const [mapId, setMapId] = useState('') +const RegisterededPlacePanel = ({ + userId, + mapId, +}: { + userId: User['id'] + mapId: MapInfo['id'] +}) => { const [places, setPlaces] = useState([]) const renderPlaces = () => { @@ -50,13 +55,8 @@ const RegisterededPlacePanel = ({ userId }: { userId: User['id'] }) => { useEffect(() => { const getRegisteredPlace = async () => { try { - const currentMapId = await getMapId() - if (!currentMapId) { - throw new Error('잘못된 접근입니다.') - } - setMapId(currentMapId) const { data } = await api.place.mapId.userId.get({ - mapId: currentMapId, + mapId, userId, }) setPlaces(data) @@ -70,7 +70,7 @@ const RegisterededPlacePanel = ({ userId }: { userId: User['id'] }) => { } getRegisteredPlace() - }, [userId]) + }, [userId, mapId]) return (
    Date: Thu, 3 Oct 2024 14:14:38 +0900 Subject: [PATCH 16/18] =?UTF-8?q?feat:=20=EB=8D=94=EB=B3=B4=EA=B8=B0?= =?UTF-8?q?=EB=A5=BC=20=EC=B6=94=EA=B0=80=ED=96=88=EC=96=B4=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../[mapId]/[id]/liked-place-panel.tsx | 55 ++++++++++++++---- .../[mapId]/[id]/registered-place-panel.tsx | 56 +++++++++++++++---- 2 files changed, 88 insertions(+), 23 deletions(-) diff --git a/src/app/profile/[mapId]/[id]/liked-place-panel.tsx b/src/app/profile/[mapId]/[id]/liked-place-panel.tsx index 9c8aff7d..5e7a089d 100644 --- a/src/app/profile/[mapId]/[id]/liked-place-panel.tsx +++ b/src/app/profile/[mapId]/[id]/liked-place-panel.tsx @@ -1,7 +1,6 @@ import type { PlaceType } from '@/models/api/place' import type { MapInfo } from '@/models/map' import type { User } from '@/models/user' -import { getMapId } from '@/services/map-id' import { api } from '@/utils/api' import { useEffect, useState } from 'react' import PlaceItem from './place-item' @@ -9,6 +8,9 @@ import { APIError } from '@/models/api' import { notify } from '@/components/common/custom-toast' import EmptyPlaceList from '@/components/place/empty-place-list' import PlacePopupSkeleton from '@/components/place/place-popup-skeleton' +import ChipButton from '@/components/common/chip-button' + +export const INITIAL_VISIBLE_PLACE_LENGTH = 1 const LikedPlacePanel = ({ userId, @@ -18,6 +20,7 @@ const LikedPlacePanel = ({ mapId: MapInfo['id'] }) => { const [places, setPlaces] = useState() + const [showMorePlace, setShowMorePlace] = useState(false) const renderPlaces = () => { if (typeof places === 'undefined') { @@ -39,19 +42,49 @@ const LikedPlacePanel = ({ } return ( -
    - {places.map((place) => ( - - ))} -
    + <> +
    + {places + .slice( + 0, + showMorePlace ? places.length : INITIAL_VISIBLE_PLACE_LENGTH, + ) + .map((place) => ( + + ))} +
    + {!showMorePlace && places.length > INITIAL_VISIBLE_PLACE_LENGTH && ( +
    + { + setShowMorePlace(true) + }} + > + 더보기 + +
    + )} + ) } + useEffect(() => { + if (places) { + setShowMorePlace(places.length <= INITIAL_VISIBLE_PLACE_LENGTH) + } + }, [places]) + useEffect(() => { const getLikedPlace = async () => { try { diff --git a/src/app/profile/[mapId]/[id]/registered-place-panel.tsx b/src/app/profile/[mapId]/[id]/registered-place-panel.tsx index 83162e82..5638daaa 100644 --- a/src/app/profile/[mapId]/[id]/registered-place-panel.tsx +++ b/src/app/profile/[mapId]/[id]/registered-place-panel.tsx @@ -1,7 +1,6 @@ import type { PlaceType } from '@/models/api/place' import type { MapInfo } from '@/models/map' import type { User } from '@/models/user' -import { getMapId } from '@/services/map-id' import { api } from '@/utils/api' import { useEffect, useState } from 'react' import PlaceItem from './place-item' @@ -9,6 +8,8 @@ import { APIError } from '@/models/api' import { notify } from '@/components/common/custom-toast' import EmptyPlaceList from '@/components/place/empty-place-list' import PlacePopupSkeleton from '@/components/place/place-popup-skeleton' +import { INITIAL_VISIBLE_PLACE_LENGTH } from './liked-place-panel' +import ChipButton from '@/components/common/chip-button' const RegisterededPlacePanel = ({ userId, @@ -17,7 +18,8 @@ const RegisterededPlacePanel = ({ userId: User['id'] mapId: MapInfo['id'] }) => { - const [places, setPlaces] = useState([]) + const [places, setPlaces] = useState() + const [showMorePlace, setShowMorePlace] = useState(false) const renderPlaces = () => { if (typeof places === 'undefined') { @@ -39,19 +41,49 @@ const RegisterededPlacePanel = ({ } return ( -
    - {places.map((place) => ( - - ))} -
    + <> +
    + {places + .slice( + 0, + showMorePlace ? places.length : INITIAL_VISIBLE_PLACE_LENGTH, + ) + .map((place) => ( + + ))} +
    + {!showMorePlace && places.length > INITIAL_VISIBLE_PLACE_LENGTH && ( +
    + { + setShowMorePlace(true) + }} + > + 더보기 + +
    + )} + ) } + useEffect(() => { + if (places) { + setShowMorePlace(places.length <= INITIAL_VISIBLE_PLACE_LENGTH) + } + }, [places]) + useEffect(() => { const getRegisteredPlace = async () => { try { From cfa73ce020a0d4db27a61c63ca60cfdb4fe86065 Mon Sep 17 00:00:00 2001 From: Pridesd Date: Thu, 3 Oct 2024 14:30:18 +0900 Subject: [PATCH 17/18] =?UTF-8?q?feat:=20=EB=8D=94=EB=B3=B4=EA=B8=B0=20?= =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=EB=94=94=EC=9E=90=EC=9D=B8=EC=9D=84=20?= =?UTF-8?q?=EC=8C=88@@=EB=BD=95=ED=95=98=EA=B2=8C=20=EB=B0=94=EA=BF=A8?= =?UTF-8?q?=EC=96=B4=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../[mapId]/[id]/liked-place-panel.tsx | 28 ++++++++----------- .../[mapId]/[id]/registered-place-panel.tsx | 28 ++++++++----------- 2 files changed, 24 insertions(+), 32 deletions(-) diff --git a/src/app/profile/[mapId]/[id]/liked-place-panel.tsx b/src/app/profile/[mapId]/[id]/liked-place-panel.tsx index 5e7a089d..538f04ba 100644 --- a/src/app/profile/[mapId]/[id]/liked-place-panel.tsx +++ b/src/app/profile/[mapId]/[id]/liked-place-panel.tsx @@ -9,6 +9,8 @@ import { notify } from '@/components/common/custom-toast' import EmptyPlaceList from '@/components/place/empty-place-list' import PlacePopupSkeleton from '@/components/place/place-popup-skeleton' import ChipButton from '@/components/common/chip-button' +import Icon from '@/components/common/icon' +import Typography from '@/components/common/typography' export const INITIAL_VISIBLE_PLACE_LENGTH = 1 @@ -42,8 +44,8 @@ const LikedPlacePanel = ({ } return ( - <> -
    +
    +
    {places .slice( 0, @@ -59,23 +61,17 @@ const LikedPlacePanel = ({ ))}
    {!showMorePlace && places.length > INITIAL_VISIBLE_PLACE_LENGTH && ( -
    - { - setShowMorePlace(true) - }} +
    +
    )} - +
    ) } diff --git a/src/app/profile/[mapId]/[id]/registered-place-panel.tsx b/src/app/profile/[mapId]/[id]/registered-place-panel.tsx index 5638daaa..406b1920 100644 --- a/src/app/profile/[mapId]/[id]/registered-place-panel.tsx +++ b/src/app/profile/[mapId]/[id]/registered-place-panel.tsx @@ -10,6 +10,8 @@ import EmptyPlaceList from '@/components/place/empty-place-list' import PlacePopupSkeleton from '@/components/place/place-popup-skeleton' import { INITIAL_VISIBLE_PLACE_LENGTH } from './liked-place-panel' import ChipButton from '@/components/common/chip-button' +import Icon from '@/components/common/icon' +import Typography from '@/components/common/typography' const RegisterededPlacePanel = ({ userId, @@ -41,8 +43,8 @@ const RegisterededPlacePanel = ({ } return ( - <> -
    +
    +
    {places .slice( 0, @@ -58,23 +60,17 @@ const RegisterededPlacePanel = ({ ))}
    {!showMorePlace && places.length > INITIAL_VISIBLE_PLACE_LENGTH && ( -
    - { - setShowMorePlace(true) - }} +
    +
    )} - +
    ) } From 35914ce21857bd09d25b61280596fb0d1a72fc9f Mon Sep 17 00:00:00 2001 From: Pridesd Date: Thu, 3 Oct 2024 21:35:53 +0900 Subject: [PATCH 18/18] fix: lint error --- src/app/profile/[mapId]/[id]/liked-place-panel.tsx | 1 - src/app/profile/[mapId]/[id]/registered-place-panel.tsx | 1 - 2 files changed, 2 deletions(-) diff --git a/src/app/profile/[mapId]/[id]/liked-place-panel.tsx b/src/app/profile/[mapId]/[id]/liked-place-panel.tsx index 538f04ba..77ae1d43 100644 --- a/src/app/profile/[mapId]/[id]/liked-place-panel.tsx +++ b/src/app/profile/[mapId]/[id]/liked-place-panel.tsx @@ -8,7 +8,6 @@ import { APIError } from '@/models/api' import { notify } from '@/components/common/custom-toast' import EmptyPlaceList from '@/components/place/empty-place-list' import PlacePopupSkeleton from '@/components/place/place-popup-skeleton' -import ChipButton from '@/components/common/chip-button' import Icon from '@/components/common/icon' import Typography from '@/components/common/typography' diff --git a/src/app/profile/[mapId]/[id]/registered-place-panel.tsx b/src/app/profile/[mapId]/[id]/registered-place-panel.tsx index 406b1920..3df22def 100644 --- a/src/app/profile/[mapId]/[id]/registered-place-panel.tsx +++ b/src/app/profile/[mapId]/[id]/registered-place-panel.tsx @@ -9,7 +9,6 @@ import { notify } from '@/components/common/custom-toast' import EmptyPlaceList from '@/components/place/empty-place-list' import PlacePopupSkeleton from '@/components/place/place-popup-skeleton' import { INITIAL_VISIBLE_PLACE_LENGTH } from './liked-place-panel' -import ChipButton from '@/components/common/chip-button' import Icon from '@/components/common/icon' import Typography from '@/components/common/typography'