diff --git a/src/apis/hangout.ts b/src/apis/hangout.ts index 51ccd78..e0374d3 100644 --- a/src/apis/hangout.ts +++ b/src/apis/hangout.ts @@ -35,7 +35,7 @@ export const api_getHangouts = getApi('GET', '/api/hangout', { members: { id: number; email: string; - nickname: string; + name: string; profileImg: string; status: string; }[]; diff --git a/src/apis/hangoutDetail.ts b/src/apis/hangoutDetail.ts new file mode 100644 index 0000000..dadfece --- /dev/null +++ b/src/apis/hangoutDetail.ts @@ -0,0 +1,18 @@ +import { z } from 'zod'; +import { getApi } from '@/utils/api'; + +const BASE_QUERY_KEY = ['hangout']; + +// TODO type +/** 약속 상세 정보를 조회하는 API */ +export const api_getHangoutDetail = getApi('GET', '/api/hangout', { + needToLogin: true, + requestSchema: z.object({ + pathParams: z.tuple([z.number().describe('hangout id')]), + }), + getQueryKey: (requestInput?) => + requestInput + ? [...BASE_QUERY_KEY, 'single', requestInput.pathParams[0]] + : [...BASE_QUERY_KEY, 'single'], + _resultType: {} as any, +}); diff --git a/src/components/common/HangoutBox/HangoutBox.stories.tsx b/src/components/common/HangoutBox/HangoutBox.stories.tsx index 629ce1e..c72974d 100644 --- a/src/components/common/HangoutBox/HangoutBox.stories.tsx +++ b/src/components/common/HangoutBox/HangoutBox.stories.tsx @@ -15,10 +15,12 @@ export const Default: Story = { location: '숭실대 정보관 204호', members: [ { + id: 1, name: '공소나', profileImg: 'https://img.freepik.com/free-icon/user_318-159711.jpg', }, { + id: 2, name: '공소나2', profileImg: 'https://img.freepik.com/free-icon/user_318-159711.jpg', }, @@ -33,10 +35,12 @@ export const HangoutBoxWithShadow: Story = { location: '숭실대 정보관 204호', members: [ { + id: 1, name: '공소나', profileImg: 'https://img.freepik.com/free-icon/user_318-159711.jpg', }, { + id: 2, name: '공소나2', profileImg: 'https://img.freepik.com/free-icon/user_318-159711.jpg', }, @@ -52,10 +56,12 @@ export const NotAcceptedHangoutBox: Story = { location: '숭실대 정보관 204호', members: [ { + id: 1, name: '공소나', profileImg: 'https://img.freepik.com/free-icon/user_318-159711.jpg', }, { + id: 2, name: '공소나2', profileImg: 'https://img.freepik.com/free-icon/user_318-159711.jpg', }, diff --git a/src/components/common/HangoutBox/HangoutBox.tsx b/src/components/common/HangoutBox/HangoutBox.tsx index 83e99e6..648dbdb 100644 --- a/src/components/common/HangoutBox/HangoutBox.tsx +++ b/src/components/common/HangoutBox/HangoutBox.tsx @@ -60,8 +60,8 @@ const HangoutBox = ({
{members.map((member) => ( diff --git a/src/components/common/SelectUserList/SelectUserList.stories.tsx b/src/components/common/SelectUserList/SelectUserList.stories.tsx index 999f992..f77ef62 100644 --- a/src/components/common/SelectUserList/SelectUserList.stories.tsx +++ b/src/components/common/SelectUserList/SelectUserList.stories.tsx @@ -9,12 +9,12 @@ export default { type Story = StoryObj; -export const WithFriend: Story = { - args: { - type: 'friend', - list: userDummydata, - }, -}; +// export const WithFriend: Story = { +// args: { +// type: 'friend', +// list: userDummydata, +// }, +// }; export const WithGroup: Story = { args: { diff --git a/src/components/common/SelectUserList/SelectUserList.tsx b/src/components/common/SelectUserList/SelectUserList.tsx index cf3816f..5897c57 100644 --- a/src/components/common/SelectUserList/SelectUserList.tsx +++ b/src/components/common/SelectUserList/SelectUserList.tsx @@ -36,13 +36,14 @@ const SelectUserList = ({ key={id} onClick={() => onSelect?.(id)} > - {type === 'friend' ? ( + {type === 'friend' && ( - ) : ( + )} + {type === 'group' && ( { - const { location, name } = infos; - const mapContainerRef = useKakaoMap(37.4963, 126.9569); + const { location, members, groupName, latitude, longitude } = infos; + + const mapContainerRef = useKakaoMap(Number(latitude), Number(longitude)); + return (
+ {latitude && longitude && ( +
+ +
+
+ )}
- -
-
-
- +
- {userDummydata.map((user) => ( + {members?.map((user) => (
- +
{user.name}
))} diff --git a/src/components/home/HomeContent/ScheduleList/ScheduleList.tsx b/src/components/home/HomeContent/ScheduleList/ScheduleList.tsx index 5970838..b2e2432 100644 --- a/src/components/home/HomeContent/ScheduleList/ScheduleList.tsx +++ b/src/components/home/HomeContent/ScheduleList/ScheduleList.tsx @@ -36,8 +36,8 @@ const ScheduleList = () => { lat: item.latitude, friendList: item.clubMemberInfo.members.map((member) => ({ id: member.id, - name: member.nickname, - img: member.profileImg, + name: member.name, + profileImg: member.profileImg, })), })), }, diff --git a/src/dummyData.ts b/src/dummyData.ts index 669bb26..255a3f6 100644 --- a/src/dummyData.ts +++ b/src/dummyData.ts @@ -194,25 +194,27 @@ export const ScheduleDummyData: ScheduleInfoType[] = [ { id: 2, statusMessage: null, - img: '1', + profileImg: '1', name: '일인자', }, { id: 3, statusMessage: null, - img: '2', + profileImg: '2', name: '이인자', }, { id: 1, statusMessage: null, - img: 'http://k.kakaocdn.net/dn/bFe99u/btsmd0qfsWk/vLkfmNU6qbO06IDDLxFKkk/img_640x640.jpg', + profileImg: + 'http://k.kakaocdn.net/dn/bFe99u/btsmd0qfsWk/vLkfmNU6qbO06IDDLxFKkk/img_640x640.jpg', name: '박가현', }, { id: 5, statusMessage: null, - img: 'http://k.kakaocdn.net/dn/cyE47l/btsoEpQApLy/SH9WMN9GuJUYHwX1FlRLsK/img_640x640.jpg', + profileImg: + 'http://k.kakaocdn.net/dn/cyE47l/btsoEpQApLy/SH9WMN9GuJUYHwX1FlRLsK/img_640x640.jpg', name: '이정민', }, ], diff --git a/src/pages/hangout/hangoutDetail.tsx b/src/pages/hangout/hangoutDetail.tsx index a076b69..b6fad46 100644 --- a/src/pages/hangout/hangoutDetail.tsx +++ b/src/pages/hangout/hangoutDetail.tsx @@ -1,17 +1,64 @@ +import { useParams, useNavigate } from 'react-router-dom'; +import { api_getHangoutDetail } from '@/apis/hangoutDetail'; +import useApiQuery from '@/hooks/useApiQuery'; import HangoutDetailContent from '@/components/hangout/detail/HangoutDetailContent'; -import { hangoutsDummydata } from '@/dummyData'; +import { HangoutInfoType } from '@/types/hangout'; +import PageSubHeader from '@/components/common/PageSubHeader'; const HangoutDetailTab = () => { + const navigate = useNavigate(); + const { hid } = useParams(); + + const hangoutId = Number(hid); + + const { data: apiData } = useApiQuery(api_getHangoutDetail, { + pathParams: [hangoutId], + }); + + const data = apiData?.data; + + const membersData = data?.clubMemberInfo.members?.map((member: any) => ({ + id: member.id, + name: member.name, + profileImg: member.profileImg, + email: member.email, + status: member.status, + })); + + const hangoutInfo: HangoutInfoType = { + id: data?.id, + name: data?.name, + date: new Date(data?.startDate), + location: data?.placeName, + members: membersData, + groupName: data?.clubMemberInfo.clubName, + groupId: data?.clubMemberInfo.clubId, + isAccepted: data?.approved, + latitude: data?.latitude, + longitude: data?.longitude, + }; + const buttonInfo = [ { label: '약속 수정', onClick: () => {} }, { label: '취소 요청', onClick: () => {} }, ]; + const mainTitle = hangoutInfo.members ? '약속' : '일정'; + + const onMovePrevPage = () => { + navigate('/'); + }; + return ( - + <> +
+ +
+ + ); }; diff --git a/src/pages/hangout/newHangout.tsx b/src/pages/hangout/newHangout.tsx index 2ad3e62..9ccdb23 100644 --- a/src/pages/hangout/newHangout.tsx +++ b/src/pages/hangout/newHangout.tsx @@ -91,8 +91,8 @@ const NewHangoutTab = () => { // 장소 선택 데이터 const placeName = data.selectLocation?.placeInfo.place_name; const address = data.selectLocation?.placeInfo.address_name; - const latitude = Number(data.selectLocation?.placeInfo.y); - const longitude = Number(data.selectLocation?.placeInfo.x); + const latitude = data.selectLocation?.placeInfo.y; + const longitude = data.selectLocation?.placeInfo.x; // 약속 이름 const name = data.selectLocation?.hangoutName; diff --git a/src/types/hangout.ts b/src/types/hangout.ts index 908d504..9144d87 100644 --- a/src/types/hangout.ts +++ b/src/types/hangout.ts @@ -1,11 +1,21 @@ -// TODO 멤버 타입 정의 +export interface MemberType { + id: number; + name: string; + profileImg?: string; + email?: string; + status?: string; +} export interface HangoutInfoType { id: number; name: string; date: Date; location: string; + latitude?: string; + longitude?: string; /** 멤버 정보가 없을 경우 `약속`이 아닌 `일정` 정보를 담고 있다고 간주 */ - members?: any[]; + members?: MemberType[]; + groupName?: string; + groupId?: number; /** 약속 정보를 담은 컴포넌트인 경우, 사용자가 현재 약속을 수락했는지에 대한 여부 */ isAccepted?: boolean; } diff --git a/src/types/schedule.ts b/src/types/schedule.ts index f55865c..1070ee3 100644 --- a/src/types/schedule.ts +++ b/src/types/schedule.ts @@ -6,7 +6,7 @@ export interface ScheduleType { export interface FriendType { id: number; name: string; - img: string; + profileImg?: string; statusMessage?: string | null; }