+
)
}
const { items, totalPages, totalCount } = data
+ const pageSize = PAGE_SIZES.MEETING_APPROVALS
const showPagination = totalCount > pageSize
return (
{items.map((item) => (
-
+
))}
{showPagination && (
-
setCurrentPage(page)}
- />
+
)}
)
diff --git a/src/features/meetings/components/MeetingApprovalListSkeleton.tsx b/src/features/meetings/components/MeetingApprovalListSkeleton.tsx
new file mode 100644
index 0000000..9cf38d3
--- /dev/null
+++ b/src/features/meetings/components/MeetingApprovalListSkeleton.tsx
@@ -0,0 +1,25 @@
+/**
+ * @file MeetingApprovalListSkeleton.tsx
+ * @description 약속 승인 리스트 스켈레톤 컴포넌트
+ */
+
+export default function MeetingApprovalListSkeleton() {
+ const SKELETON_COUNT = 10
+
+ return (
+
+ {[...Array(SKELETON_COUNT).keys()].map((i) => (
+ -
+
+
+ ))}
+
+ )
+}
diff --git a/src/features/meetings/components/MeetingDetailButton.tsx b/src/features/meetings/components/MeetingDetailButton.tsx
index 0a43a82..5246913 100644
--- a/src/features/meetings/components/MeetingDetailButton.tsx
+++ b/src/features/meetings/components/MeetingDetailButton.tsx
@@ -1,5 +1,9 @@
+import { useNavigate } from 'react-router-dom'
+
import { useCancelJoinMeeting, useJoinMeeting } from '@/features/meetings/hooks'
import type { MeetingDetailActionStateType } from '@/features/meetings/meetings.types'
+import { ROUTES } from '@/shared/constants'
+import { showToast } from '@/shared/lib/toast'
import { Button } from '@/shared/ui'
import { useGlobalModalStore } from '@/store'
@@ -7,6 +11,7 @@ interface MeetingDetailButtonProps {
buttonLabel: string
isEnabled: boolean
type: MeetingDetailActionStateType
+ gatheringId: number
meetingId: number
}
@@ -14,8 +19,10 @@ export default function MeetingDetailButton({
buttonLabel,
isEnabled,
type,
+ gatheringId,
meetingId,
}: MeetingDetailButtonProps) {
+ const navigate = useNavigate()
const joinMutation = useJoinMeeting()
const cancelJoinMutation = useCancelJoinMeeting()
const { openError, openConfirm } = useGlobalModalStore()
@@ -25,9 +32,9 @@ export default function MeetingDetailButton({
const handleClick = async () => {
if (!isEnabled || isPending) return
- // 약속 수정 - 페이지 이동 예정 (TODO)
+ // 약속 수정
if (type === 'CAN_EDIT') {
- // 페이지 이동 로직 추가 예정
+ navigate(ROUTES.MEETING_UPDATE(gatheringId, meetingId))
return
}
@@ -38,7 +45,7 @@ export default function MeetingDetailButton({
joinMutation.mutate(meetingId, {
onSuccess: () => {
- alert('참가 신청이 완료되었습니다.')
+ showToast('참가 신청이 완료되었습니다.')
},
onError: (error) => {
openError('에러', error.userMessage)
@@ -54,7 +61,7 @@ export default function MeetingDetailButton({
cancelJoinMutation.mutate(meetingId, {
onSuccess: () => {
- alert('참가 취소가 완료되었습니다.')
+ showToast('참가 취소가 완료되었습니다.')
},
onError: (error) => {
openError('에러', error.userMessage)
@@ -74,7 +81,7 @@ export default function MeetingDetailButton({
>
{buttonLabel}
- {isEnabled && (
+ {!isEnabled && (
{type === 'EDIT_TIME_EXPIRED' && '약속 24시간 전까지만 약속 정보를 수정할 수 있어요'}
{(type === 'CANCEL_TIME_EXPIRED' || type === 'JOIN_TIME_EXPIRED') &&
diff --git a/src/features/meetings/components/MeetingDetailHeader.tsx b/src/features/meetings/components/MeetingDetailHeader.tsx
index ab2d34e..6c59a90 100644
--- a/src/features/meetings/components/MeetingDetailHeader.tsx
+++ b/src/features/meetings/components/MeetingDetailHeader.tsx
@@ -9,7 +9,10 @@ type ProgressBadge = {
text: '약속 전' | '약속 중' | '약속 후'
color: 'yellow' | 'blue' | 'red'
}
-export function MeetingDetailHeader({ children, progressStatus }: MeetingDetailHeaderProps) {
+export default function MeetingDetailHeader({
+ children,
+ progressStatus,
+}: MeetingDetailHeaderProps) {
const progressStatusLabelMap: Record = {
PRE: { text: '약속 전', color: 'yellow' },
ONGOING: { text: '약속 중', color: 'red' },
diff --git a/src/features/meetings/components/MeetingDetailInfo.tsx b/src/features/meetings/components/MeetingDetailInfo.tsx
index 797b12f..69b9bb8 100644
--- a/src/features/meetings/components/MeetingDetailInfo.tsx
+++ b/src/features/meetings/components/MeetingDetailInfo.tsx
@@ -1,7 +1,5 @@
import { MapPin } from 'lucide-react'
-import { useState } from 'react'
-import MapModal from '@/features/meetings/components/MapModal'
import {
Avatar,
AvatarFallback,
@@ -20,9 +18,7 @@ interface MeetingDetailInfoProps {
meeting: GetMeetingDetailResponse
}
-export function MeetingDetailInfo({ meeting }: MeetingDetailInfoProps) {
- const [isMapModalOpen, setIsMapModalOpen] = useState(false)
-
+export default function MeetingDetailInfo({ meeting }: MeetingDetailInfoProps) {
const leader = meeting.participants.members.find((member) => member.role === 'LEADER')
const members = meeting.participants.members.filter((member) => member.role === 'MEMBER')
const displayedMembers = members.slice(0, MAX_DISPLAYED_AVATARS)
@@ -32,14 +28,19 @@ export function MeetingDetailInfo({ meeting }: MeetingDetailInfoProps) {
const [startDate, endDate] = meeting.schedule.displayDate.split(' ~ ')
+ const location = meeting.location
+
return (
{/* 도서 */}
- 도서
- -
-
{meeting.book.bookName}
+ -
+
+
{meeting.book.bookName}
+
{meeting.book.authors}
+
- 장소
-
- {meeting.location && (
+ {location && (
setIsMapModalOpen(true)}
+ onClick={() => {
+ window.open(
+ `https://map.kakao.com/link/map/${location.name},${location.latitude},${location.longitude}`,
+ '_blank',
+ 'noopener,noreferrer'
+ )
+ }}
>
- {meeting.location.name}
+ {location.name}
)}
-
- {/* 지도 모달 */}
- {meeting.location && (
-
- )}
)
}
diff --git a/src/features/meetings/components/PlaceList.tsx b/src/features/meetings/components/PlaceList.tsx
index 9f99b42..6af8c68 100644
--- a/src/features/meetings/components/PlaceList.tsx
+++ b/src/features/meetings/components/PlaceList.tsx
@@ -3,51 +3,47 @@
* @description 장소 검색 결과 목록 컴포넌트
*/
-import type { KakaoPlace } from '../kakaoMap.types'
+import type { KakaoPlace } from '@/features/kakaomap'
+import { Button } from '@/shared/ui'
export type PlaceListProps = {
/** 장소 목록 */
places: KakaoPlace[]
- /** 장소 클릭 핸들러 */
+ /** li 클릭 시 지도 포커스 핸들러 */
+ onPlaceFocus: (place: KakaoPlace) => void
+ /** 선택 버튼 클릭 핸들러 */
onPlaceClick: (place: KakaoPlace) => void
- /** 장소 hover 핸들러 */
- onPlaceHover?: (place: KakaoPlace, index: number) => void
- /** 장소 hover 종료 핸들러 */
- onPlaceHoverEnd?: () => void
}
-export default function PlaceList({
- places,
- onPlaceClick,
- onPlaceHover,
- onPlaceHoverEnd,
-}: PlaceListProps) {
- if (places.length === 0) {
- return (
-
- )
- }
-
+export default function PlaceList({ places, onPlaceFocus, onPlaceClick }: PlaceListProps) {
return (
-
- {places.map((place, index) => (
-
+
+
{place.place_name}
+
{place.category_group_name}
+
+
{place.road_address_name}
+
+
+
+
+
))}
-
+
)
}
diff --git a/src/features/meetings/components/PlaceListSkeleton.tsx b/src/features/meetings/components/PlaceListSkeleton.tsx
new file mode 100644
index 0000000..f7cc107
--- /dev/null
+++ b/src/features/meetings/components/PlaceListSkeleton.tsx
@@ -0,0 +1,19 @@
+type PlaceListSkeletonProps = {
+ count?: number
+}
+
+export default function PlaceListSkeleton({ count = 5 }: PlaceListSkeletonProps) {
+ return (
+
+ {[...Array(count).keys()].map((i) => (
+ -
+
+
+
+ ))}
+
+ )
+}
diff --git a/src/features/meetings/components/PlaceSearchModal.tsx b/src/features/meetings/components/PlaceSearchModal.tsx
index dfd54f5..0dc5d2c 100644
--- a/src/features/meetings/components/PlaceSearchModal.tsx
+++ b/src/features/meetings/components/PlaceSearchModal.tsx
@@ -1,33 +1,17 @@
/**
* @file PlaceSearchModal.tsx
- * @description 카카오 장소 검색 모달 컴포넌트
+ * @description 장소 검색 모달 컴포넌트
+ *
+ * UI는 searchState 기준으로만 화면을 분기합니다.
+ * 모든 상태 관리와 비동기 로직은 usePlaceSearch 훅에서 처리합니다.
*/
-import { Search } from 'lucide-react'
-import { useEffect, useRef } from 'react'
-
-import {
- Button,
- Input,
- Modal,
- ModalBody,
- ModalContent,
- ModalFooter,
- ModalHeader,
- ModalTitle,
-} from '@/shared/ui'
-
-import { useKakaoMap } from '../hooks/useKakaoMap'
-import { useKakaoPlaceSearch } from '../hooks/useKakaoPlaceSearch'
-import type { KakaoPlace } from '../kakaoMap.types'
-import PlaceList from './PlaceList'
-
-declare global {
- interface Window {
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- kakao: any
- }
-}
+import { Map, MapMarker, ZoomControl } from '@/features/kakaomap'
+import PlaceList from '@/features/meetings/components/PlaceList'
+import PlaceListSkeleton from '@/features/meetings/components/PlaceListSkeleton'
+import { usePlaceSearch } from '@/features/meetings/hooks'
+import { cn } from '@/shared/lib/utils'
+import { Modal, ModalBody, ModalContent, ModalHeader, ModalTitle, SearchField } from '@/shared/ui'
export type PlaceSearchModalProps = {
/** 모달 열림 상태 */
@@ -48,59 +32,21 @@ export default function PlaceSearchModal({
onOpenChange,
onSelectPlace,
}: PlaceSearchModalProps) {
- // 지도 관리
- const { mapElement, isInitialized, initializeMap, renderMarkers, setCenter, cleanup } =
- useKakaoMap()
-
- // 장소 검색 관리
- const keywordRef = useRef
(null)
- const { places, search, reset } = useKakaoPlaceSearch({
- onSearchSuccess: renderMarkers,
- })
-
- // 모달 열릴 때 지도 초기화
- useEffect(() => {
- if (open && !isInitialized) {
- initializeMap()
- }
- }, [open, isInitialized, initializeMap])
-
- // 검색 실행
- const handleSearch = () => {
- const keyword = keywordRef.current?.value || ''
- search(keyword)
- }
-
- // Enter 키 처리
- const handleKeyUp = (e: React.KeyboardEvent) => {
- if (e.key === 'Enter') {
- e.preventDefault()
- handleSearch()
- }
- }
-
- // 장소 선택
- const handlePlaceClick = (place: KakaoPlace) => {
- setCenter(Number(place.y), Number(place.x))
-
- onSelectPlace({
- name: place.place_name,
- address: place.road_address_name || place.address_name,
- latitude: Number(place.y),
- longitude: Number(place.x),
- })
-
- onOpenChange(false)
- reset()
- cleanup()
- }
-
- // 모달 닫기
- const handleClose = () => {
- onOpenChange(false)
- reset()
- cleanup()
- }
+ const {
+ searchState,
+ errorMessage,
+ places,
+ isMapMounted,
+ isMapVisible,
+ hoveredPlaceId,
+ keywordRef,
+ setMapInstance,
+ setHoveredPlaceId,
+ handleKeyDown,
+ handlePlaceClick,
+ handlePlaceFocus,
+ handleClose,
+ } = usePlaceSearch({ open, onOpenChange, onSelectPlace })
return (
@@ -110,46 +56,68 @@ export default function PlaceSearchModal({
-
-
-
-
-
-
- {/* 지도 영역 */}
-
-
+
+
+ {/* 지도 + 리스트 영역
+ isMapMounted: 첫 검색 전 / 에러는 마운트하지 않음
+ isMapVisible: noResults일 때 Map 인스턴스를 유지한 채 CSS로만 숨김 */}
+ {isMapMounted && (
+
+
+
+
+ {searchState === 'searching' ? (
+
+ ) : (
+
+ )}
+
+
+ )}
- {/* 검색 전 안내 메시지 오버레이 */}
- {!isInitialized && (
-
-
-
-
장소를 검색하면
-
지도에 표시됩니다
-
-
- )}
+ {/* 검색 결과 없음 */}
+ {searchState === 'noResults' && (
+
+ )}
- {/* 장소 리스트 */}
-
-
+ {/* SDK 오류 또는 검색 오류 */}
+ {searchState === 'error' && (
+
+ )}
-
-
-
-
)
diff --git a/src/features/meetings/components/index.ts b/src/features/meetings/components/index.ts
index 272ec4f..68df722 100644
--- a/src/features/meetings/components/index.ts
+++ b/src/features/meetings/components/index.ts
@@ -1,8 +1,9 @@
-export { default as MapModal } from './MapModal'
export { default as MeetingApprovalItem } from './MeetingApprovalItem'
export { default as MeetingApprovalList } from './MeetingApprovalList'
+export { default as MeetingApprovalListSkeleton } from './MeetingApprovalListSkeleton'
export { default as MeetingDetailButton } from './MeetingDetailButton'
-export { MeetingDetailHeader } from './MeetingDetailHeader'
-export { MeetingDetailInfo } from './MeetingDetailInfo'
+export { default as MeetingDetailHeader } from './MeetingDetailHeader'
+export { default as MeetingDetailInfo } from './MeetingDetailInfo'
export { default as PlaceList } from './PlaceList'
+export { default as PlaceListSkeleton } from './PlaceListSkeleton'
export { default as PlaceSearchModal } from './PlaceSearchModal'
diff --git a/src/features/meetings/hooks/index.ts b/src/features/meetings/hooks/index.ts
index 68684c0..9915b1a 100644
--- a/src/features/meetings/hooks/index.ts
+++ b/src/features/meetings/hooks/index.ts
@@ -1,13 +1,15 @@
export * from './meetingQueryKeys'
+export * from './myMeetingQueryKeys'
export * from './useCancelJoinMeeting'
export * from './useConfirmMeeting'
export * from './useCreateMeeting'
export * from './useDeleteMeeting'
export * from './useJoinMeeting'
-export * from './useKakaoMap'
-export * from './useKakaoPlaceSearch'
export * from './useMeetingApprovals'
-export * from './useMeetingApprovalsCount'
export * from './useMeetingDetail'
export * from './useMeetingForm'
+export * from './useMyMeetings'
+export * from './useMyMeetingTabCounts'
+export * from './usePlaceSearch'
export * from './useRejectMeeting'
+export * from './useUpdateMeeting'
diff --git a/src/features/meetings/hooks/myMeetingQueryKeys.ts b/src/features/meetings/hooks/myMeetingQueryKeys.ts
new file mode 100644
index 0000000..cd6bfbc
--- /dev/null
+++ b/src/features/meetings/hooks/myMeetingQueryKeys.ts
@@ -0,0 +1,8 @@
+import type { MyMeetingFilter } from '@/features/meetings/meetings.types'
+
+export const myMeetingQueryKeys = {
+ all: ['myMeetings'] as const,
+ lists: () => [...myMeetingQueryKeys.all, 'list'] as const,
+ list: (filter: MyMeetingFilter) => [...myMeetingQueryKeys.lists(), filter] as const,
+ tabCounts: () => [...myMeetingQueryKeys.all, 'tabCounts'] as const,
+}
diff --git a/src/features/meetings/hooks/useCancelJoinMeeting.ts b/src/features/meetings/hooks/useCancelJoinMeeting.ts
index 3d80a28..d424b74 100644
--- a/src/features/meetings/hooks/useCancelJoinMeeting.ts
+++ b/src/features/meetings/hooks/useCancelJoinMeeting.ts
@@ -24,8 +24,7 @@ export const useCancelJoinMeeting = () => {
return useMutation
, ApiError, number>({
mutationFn: (meetingId: number) => cancelJoinMeeting(meetingId),
- onSuccess: (data, variables) => {
- void data // 사용하지 않는 파라미터
+ onSuccess: (_data, variables) => {
// 약속 상세 캐시 무효화
queryClient.invalidateQueries({
queryKey: meetingQueryKeys.detail(variables),
diff --git a/src/features/meetings/hooks/useConfirmMeeting.ts b/src/features/meetings/hooks/useConfirmMeeting.ts
index 1fa80ac..86b0a95 100644
--- a/src/features/meetings/hooks/useConfirmMeeting.ts
+++ b/src/features/meetings/hooks/useConfirmMeeting.ts
@@ -5,8 +5,8 @@
import { useMutation, useQueryClient } from '@tanstack/react-query'
-import { ApiError } from '@/api/errors'
-import type { ApiResponse } from '@/api/types'
+import type { ApiError, ApiResponse } from '@/api'
+import { gatheringQueryKeys } from '@/features/gatherings'
import { confirmMeeting, type ConfirmMeetingResponse } from '@/features/meetings'
import { meetingQueryKeys } from './meetingQueryKeys'
@@ -18,12 +18,13 @@ import { meetingQueryKeys } from './meetingQueryKeys'
* 약속을 승인하고 관련 쿼리 캐시를 무효화합니다.
* - 약속 승인 리스트 캐시 무효화
* - 약속 승인 카운트 캐시 무효화
+ * - 모임 약속 리스트 캐시 무효화
*
* @example
- * const confirmMutation = useConfirmMeeting()
+ * const confirmMutation = useConfirmMeeting(gatheringId)
* confirmMutation.mutate(meetingId)
*/
-export const useConfirmMeeting = () => {
+export const useConfirmMeeting = (gatheringId: number) => {
const queryClient = useQueryClient()
return useMutation, ApiError, number>({
@@ -33,6 +34,8 @@ export const useConfirmMeeting = () => {
queryClient.invalidateQueries({
queryKey: meetingQueryKeys.approvals(),
})
+ // 모임 약속 리스트 캐시 무효화
+ queryClient.invalidateQueries({ queryKey: gatheringQueryKeys.meetings(gatheringId) })
},
})
}
diff --git a/src/features/meetings/hooks/useCreateMeeting.ts b/src/features/meetings/hooks/useCreateMeeting.ts
index e56733b..6610439 100644
--- a/src/features/meetings/hooks/useCreateMeeting.ts
+++ b/src/features/meetings/hooks/useCreateMeeting.ts
@@ -20,20 +20,6 @@ import { meetingQueryKeys } from './meetingQueryKeys'
*
* @description
* 새로운 약속을 생성하고 관련 쿼리 캐시를 무효화합니다.
- * - 약속 승인 리스트 캐시 무효화
- * - 약속 승인 카운트 캐시 무효화
- *
- * @example
- * const createMutation = useCreateMeeting()
- * createMutation.mutate({
- * gatheringId: 1,
- * bookId: 1,
- * meetingName: '1월 독서 모임',
- * meetingStartDate: '2025-02-01T14:00:00',
- * meetingEndDate: '2025-02-01T16:00:00',
- * maxParticipants: 10,
- * place: '강남역 스타벅스'
- * })
*/
export const useCreateMeeting = () => {
const queryClient = useQueryClient()
@@ -41,7 +27,7 @@ export const useCreateMeeting = () => {
return useMutation, ApiError, CreateMeetingRequest>({
mutationFn: (data: CreateMeetingRequest) => createMeeting(data),
onSuccess: () => {
- // 약속 승인 관련 모든 캐시 무효화 (리스트 + 카운트)
+ // 약속 승인 관련 모든 캐시 무효화
queryClient.invalidateQueries({
queryKey: meetingQueryKeys.approvals(),
})
diff --git a/src/features/meetings/hooks/useDeleteMeeting.ts b/src/features/meetings/hooks/useDeleteMeeting.ts
index 4f09f3e..561caee 100644
--- a/src/features/meetings/hooks/useDeleteMeeting.ts
+++ b/src/features/meetings/hooks/useDeleteMeeting.ts
@@ -7,6 +7,7 @@ import { useMutation, useQueryClient } from '@tanstack/react-query'
import { ApiError } from '@/api/errors'
import type { ApiResponse } from '@/api/types'
+import { gatheringQueryKeys } from '@/features/gatherings'
import { deleteMeeting } from '@/features/meetings'
import { meetingQueryKeys } from './meetingQueryKeys'
@@ -23,7 +24,7 @@ import { meetingQueryKeys } from './meetingQueryKeys'
* const deleteMutation = useDeleteMeeting()
* deleteMutation.mutate(meetingId)
*/
-export const useDeleteMeeting = () => {
+export const useDeleteMeeting = (gatheringId: number) => {
const queryClient = useQueryClient()
return useMutation, ApiError, number>({
@@ -33,6 +34,7 @@ export const useDeleteMeeting = () => {
queryClient.invalidateQueries({
queryKey: meetingQueryKeys.approvals(),
})
+ queryClient.invalidateQueries({ queryKey: gatheringQueryKeys.meetings(gatheringId) })
},
})
}
diff --git a/src/features/meetings/hooks/useJoinMeeting.ts b/src/features/meetings/hooks/useJoinMeeting.ts
index 34aa980..ea63b82 100644
--- a/src/features/meetings/hooks/useJoinMeeting.ts
+++ b/src/features/meetings/hooks/useJoinMeeting.ts
@@ -24,8 +24,7 @@ export const useJoinMeeting = () => {
return useMutation, ApiError, number>({
mutationFn: (meetingId: number) => joinMeeting(meetingId),
- onSuccess: (data, variables) => {
- void data // 사용하지 않는 파라미터
+ onSuccess: (_data, variables) => {
// 약속 상세 캐시 무효화
queryClient.invalidateQueries({
queryKey: meetingQueryKeys.detail(variables),
diff --git a/src/features/meetings/hooks/useKakaoMap.ts b/src/features/meetings/hooks/useKakaoMap.ts
deleted file mode 100644
index 9d67bee..0000000
--- a/src/features/meetings/hooks/useKakaoMap.ts
+++ /dev/null
@@ -1,164 +0,0 @@
-/**
- * @file useKakaoMap.ts
- * @description Kakao Maps 지도 및 마커 관리 훅
- */
-
-import { useRef, useState } from 'react'
-
-import type { KakaoPlace } from '../kakaoMap.types'
-
-export type UseKakaoMapOptions = {
- /** 초기 중심 좌표 */
- initialCenter?: { lat: number; lng: number }
- /** 초기 줌 레벨 */
- initialLevel?: number
-}
-
-export function useKakaoMap({ initialCenter, initialLevel = 3 }: UseKakaoMapOptions = {}) {
- const [mapElement, setMapElement] = useState(null)
- const [isInitialized, setIsInitialized] = useState(false)
-
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- const mapRef = useRef(null)
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- const markersRef = useRef([])
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- const infowindowRef = useRef(null)
-
- const defaultCenter = useRef(initialCenter ?? { lat: 37.566826, lng: 126.9786567 })
-
- // 마커 제거
- const clearMarkers = () => {
- markersRef.current.forEach((marker) => {
- marker.setMap(null)
- })
- markersRef.current = []
- }
-
- // 인포윈도우 닫기
- const closeInfoWindow = () => {
- infowindowRef.current?.close()
- }
-
- // HTML escape 유틸리티
- const escapeHtml = (text: string) => {
- const div = document.createElement('div')
- div.textContent = text
- return div.innerHTML
- }
-
- // 인포윈도우 열기
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- const openInfoWindow = (marker: any, title: string) => {
- if (!mapRef.current || !infowindowRef.current) return
- const escapedTitle = escapeHtml(title)
- infowindowRef.current.setContent(`${escapedTitle}
`)
- infowindowRef.current.open(mapRef.current, marker)
- }
-
- // 지도 수동 초기화
- const initializeMap = () => {
- if (!mapElement) {
- console.warn('Map element not ready')
- return false
- }
-
- if (mapRef.current) {
- // 이미 초기화된 경우 relayout만 실행
- mapRef.current.relayout()
- return true
- }
-
- const kakao = window.kakao
-
- if (!kakao?.maps) {
- console.error('Kakao Maps SDK not loaded')
- return false
- }
-
- // 지도 생성
- const map = new kakao.maps.Map(mapElement, {
- center: new kakao.maps.LatLng(defaultCenter.current.lat, defaultCenter.current.lng),
- level: initialLevel,
- })
-
- mapRef.current = map
-
- infowindowRef.current = new kakao.maps.InfoWindow({ zIndex: 1 })
- setIsInitialized(true)
-
- // Portal/Modal에서 사이즈 계산 이슈 방지
- setTimeout(() => {
- map.relayout()
- map.setCenter(new kakao.maps.LatLng(defaultCenter.current.lat, defaultCenter.current.lng))
- }, 0)
-
- return true
- }
-
- // 지도 정리
- const cleanup = () => {
- clearMarkers()
- closeInfoWindow()
- mapRef.current = null
- infowindowRef.current = null
- setIsInitialized(false)
- }
-
- // 장소 목록에 대한 마커 렌더링
- const renderMarkers = (places: KakaoPlace[]) => {
- if (!mapRef.current || !window.kakao) return
-
- const kakao = window.kakao
- const map = mapRef.current
-
- clearMarkers()
- closeInfoWindow()
-
- const bounds = new kakao.maps.LatLngBounds()
-
- places.forEach((place) => {
- const position = new kakao.maps.LatLng(Number(place.y), Number(place.x))
-
- const marker = new kakao.maps.Marker({
- position,
- map,
- })
-
- // 마커 hover 이벤트
- kakao.maps.event.addListener(marker, 'mouseover', () => {
- openInfoWindow(marker, place.place_name)
- })
- kakao.maps.event.addListener(marker, 'mouseout', () => {
- closeInfoWindow()
- })
-
- markersRef.current.push(marker)
- bounds.extend(position)
- })
-
- // 마커들이 모두 보이도록 bounds 조정
- if (places.length > 0) {
- map.setBounds(bounds)
- }
- }
-
- // 특정 좌표로 지도 중심 이동
- const setCenter = (lat: number, lng: number) => {
- if (!mapRef.current || !window.kakao) return
- const kakao = window.kakao
- const position = new kakao.maps.LatLng(lat, lng)
- mapRef.current.setCenter(position)
- }
-
- return {
- mapElement: setMapElement,
- isInitialized,
- initializeMap,
- renderMarkers,
- closeInfoWindow,
- openInfoWindow,
- setCenter,
- cleanup,
- }
-}
diff --git a/src/features/meetings/hooks/useKakaoPlaceSearch.ts b/src/features/meetings/hooks/useKakaoPlaceSearch.ts
deleted file mode 100644
index e9829c8..0000000
--- a/src/features/meetings/hooks/useKakaoPlaceSearch.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * @file useKakaoPlaceSearch.ts
- * @description Kakao Places API 검색 로직 훅
- */
-
-import { useRef, useState } from 'react'
-
-import type { KakaoPlace } from '../kakaoMap.types'
-
-export type UseKakaoPlaceSearchOptions = {
- /** 검색 성공 콜백 */
- onSearchSuccess?: (places: KakaoPlace[]) => void
-}
-
-export function useKakaoPlaceSearch({ onSearchSuccess }: UseKakaoPlaceSearchOptions = {}) {
- const [places, setPlaces] = useState([])
-
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- const placesServiceRef = useRef(null)
-
- // 검색 실행
- const search = (searchKeyword: string) => {
- if (!searchKeyword.trim()) {
- return false
- }
-
- const kakao = window.kakao
- if (!kakao?.maps?.services) {
- return false
- }
-
- // Places 서비스
- if (!placesServiceRef.current) {
- placesServiceRef.current = new kakao.maps.services.Places()
- }
-
- const ps = placesServiceRef.current
-
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- ps.keywordSearch(searchKeyword, (data: KakaoPlace[], status: any) => {
- if (status === kakao.maps.services.Status.OK) {
- setPlaces(data)
- onSearchSuccess?.(data)
- } else if (status === kakao.maps.services.Status.ZERO_RESULT) {
- setPlaces([])
- onSearchSuccess?.([])
- } else {
- setPlaces([])
- onSearchSuccess?.([])
- alert('검색 중 오류가 발생했습니다.')
- }
- })
-
- return true
- }
-
- // 검색 상태 초기화
- const reset = () => {
- setPlaces([])
- placesServiceRef.current = null
- }
-
- return {
- places,
- search,
- reset,
- }
-}
diff --git a/src/features/meetings/hooks/useMeetingApprovals.ts b/src/features/meetings/hooks/useMeetingApprovals.ts
index 6c0ce37..7db0abd 100644
--- a/src/features/meetings/hooks/useMeetingApprovals.ts
+++ b/src/features/meetings/hooks/useMeetingApprovals.ts
@@ -40,13 +40,11 @@ import { meetingQueryKeys } from './meetingQueryKeys'
* })
*/
export const useMeetingApprovals = (params: GetMeetingApprovalsParams) => {
- const isValidGatheringId = !Number.isNaN(params.gatheringId) && params.gatheringId > 0
-
return useQuery, ApiError>({
queryKey: meetingQueryKeys.approvalList(params),
queryFn: () => getMeetingApprovals(params),
// gatheringId가 유효할 때만 쿼리 실행
- enabled: isValidGatheringId,
+ enabled: params.gatheringId > 0,
// 캐시 데이터 10분간 유지 (전역 설정 staleTime: 5분 사용)
gcTime: 10 * 60 * 1000,
})
diff --git a/src/features/meetings/hooks/useMeetingApprovalsCount.ts b/src/features/meetings/hooks/useMeetingApprovalsCount.ts
deleted file mode 100644
index 41ef067..0000000
--- a/src/features/meetings/hooks/useMeetingApprovalsCount.ts
+++ /dev/null
@@ -1,80 +0,0 @@
-/**
- * @file useMeetingApprovalsCount.ts
- * @description 약속 승인 카운트 조회 훅
- */
-
-import { useQueries } from '@tanstack/react-query'
-
-import type { PaginatedResponse } from '@/api/types'
-import { getMeetingApprovals, type MeetingApprovalItemType } from '@/features/meetings'
-
-import { meetingQueryKeys } from './meetingQueryKeys'
-
-/**
- * 약속 승인 카운트 일괄 조회 훅
- *
- * @description
- * PENDING과 CONFIRMED 상태의 카운트를 병렬로 조회합니다.
- * size=1로 요청하여 totalCount만 효율적으로 가져옵니다.
- * 두 개의 쿼리를 useQueries로 한 번에 처리하여 코드 간결성을 높입니다.
- *
- * @param gatheringId - 모임 식별자 (유효하지 않은 경우 쿼리 비활성화)
- *
- * @returns 카운트 및 로딩/에러 상태 객체
- * - pendingCount: PENDING 상태 카운트
- * - confirmedCount: CONFIRMED 상태 카운트
- * - isPendingLoading: PENDING 로딩 상태
- * - isConfirmedLoading: CONFIRMED 로딩 상태
- * - isLoading: 둘 중 하나라도 로딩 중인지 여부
- * - pendingError: PENDING 에러 객체
- * - confirmedError: CONFIRMED 에러 객체
- * - isError: 둘 중 하나라도 에러가 발생했는지 여부
- *
- * @example
- * const { pendingCount, confirmedCount, isLoading, isError } = useMeetingApprovalsCount(1)
- */
-export const useMeetingApprovalsCount = (gatheringId: number) => {
- const isValidGatheringId = !Number.isNaN(gatheringId) && gatheringId > 0
-
- const results = useQueries({
- queries: [
- {
- queryKey: meetingQueryKeys.approvalCount(gatheringId, 'PENDING'),
- queryFn: () =>
- getMeetingApprovals({
- gatheringId,
- status: 'PENDING',
- page: 0,
- size: 1,
- }),
- enabled: isValidGatheringId,
- select: (data: PaginatedResponse) => data.totalCount,
- gcTime: 10 * 60 * 1000,
- },
- {
- queryKey: meetingQueryKeys.approvalCount(gatheringId, 'CONFIRMED'),
- queryFn: () =>
- getMeetingApprovals({
- gatheringId,
- status: 'CONFIRMED',
- page: 0,
- size: 1,
- }),
- enabled: isValidGatheringId,
- select: (data: PaginatedResponse) => data.totalCount,
- gcTime: 10 * 60 * 1000,
- },
- ],
- })
-
- return {
- pendingCount: results[0].data,
- confirmedCount: results[1].data,
- isPendingLoading: results[0].isLoading,
- isConfirmedLoading: results[1].isLoading,
- isLoading: results[0].isLoading || results[1].isLoading,
- pendingError: results[0].error,
- confirmedError: results[1].error,
- isError: results[0].isError || results[1].isError,
- }
-}
diff --git a/src/features/meetings/hooks/useMeetingForm.ts b/src/features/meetings/hooks/useMeetingForm.ts
index fcc8b10..a1ec808 100644
--- a/src/features/meetings/hooks/useMeetingForm.ts
+++ b/src/features/meetings/hooks/useMeetingForm.ts
@@ -1,14 +1,19 @@
-import { useMemo, useRef, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { type SearchBookItem } from '@/features/book'
import {
combineDateAndTime,
+ extractTime,
formatScheduleRange,
generateTimeOptions,
+ type GetMeetingDetailResponse,
isStartBeforeEnd,
} from '@/features/meetings'
type UseMeetingFormParams = {
gatheringMaxCount: number
+ /** 수정 모드일 때 초기값 */
+ initialData?: GetMeetingDetailResponse | null
}
type ValidationErrors = {
@@ -18,22 +23,82 @@ type ValidationErrors = {
location?: string | null
}
-export const useMeetingForm = ({ gatheringMaxCount }: UseMeetingFormParams) => {
- // 폼 상태
- const [locationName, setLocationName] = useState(null)
- const [locationAddress, setLocationAddress] = useState(null)
- const [latitude, setLatitude] = useState(null)
- const [longitude, setLongitude] = useState(null)
- const [meetingName, setMeetingName] = useState(null)
- const [bookId, setBookId] = useState(null)
- const [bookName, setBookName] = useState(null)
- const [maxParticipants, setMaxParticipants] = useState(null)
-
- // 날짜/시간 상태
- const [startDate, setStartDate] = useState(null)
- const [startTime, setStartTime] = useState(null)
- const [endDate, setEndDate] = useState(null)
- const [endTime, setEndTime] = useState(null)
+/**
+ * 폼 데이터 타입
+ */
+type FormData = {
+ locationName: string | null
+ locationAddress: string | null
+ latitude: number | null
+ longitude: number | null
+ meetingName: string | null
+ bookId: string | null
+ bookName: string | null
+ bookThumbnail: string | null
+ bookAuthors: string | null
+ bookPublisher: string | null
+ maxParticipants: string | null
+ startDate: Date | null
+ startTime: string | null
+ endDate: Date | null
+ endTime: string | null
+}
+
+/**
+ * 초기 폼 데이터 생성
+ */
+const getInitialFormData = (initialData?: GetMeetingDetailResponse | null): FormData => {
+ if (!initialData) {
+ return {
+ locationName: null,
+ locationAddress: null,
+ latitude: null,
+ longitude: null,
+ meetingName: null,
+ bookId: null,
+ bookName: null,
+ bookThumbnail: null,
+ bookAuthors: null,
+ bookPublisher: null,
+ maxParticipants: null,
+ startDate: null,
+ startTime: null,
+ endDate: null,
+ endTime: null,
+ }
+ }
+
+ return {
+ locationName: initialData.location?.name ?? null,
+ locationAddress: initialData.location?.address ?? null,
+ latitude: initialData.location?.latitude ?? null,
+ longitude: initialData.location?.longitude ?? null,
+ meetingName: initialData.meetingName ?? null,
+ bookId: initialData.book?.bookId?.toString() ?? null,
+ bookName: initialData.book?.bookName ?? null,
+ bookThumbnail: initialData.book?.thumbnail ?? null,
+ bookAuthors: initialData.book?.authors ?? null,
+ bookPublisher: initialData.book?.publisher ?? null,
+ maxParticipants: initialData.participants?.maxCount?.toString() ?? null,
+ startDate: initialData.schedule?.startDateTime
+ ? new Date(initialData.schedule.startDateTime)
+ : null,
+ startTime: initialData.schedule?.startDateTime
+ ? extractTime(initialData.schedule.startDateTime)
+ : null,
+ endDate: initialData.schedule?.endDateTime ? new Date(initialData.schedule.endDateTime) : null,
+ endTime: initialData.schedule?.endDateTime
+ ? extractTime(initialData.schedule.endDateTime)
+ : null,
+ }
+}
+
+export const useMeetingForm = ({ gatheringMaxCount, initialData }: UseMeetingFormParams) => {
+ // 수정 모드 여부
+ const isEditMode = !!initialData
+
+ // 폼 상태를 단일 객체로 관리
+ const [formData, setFormData] = useState(() => getInitialFormData(initialData))
// 유효성 검사 에러 상태
const [errors, setErrors] = useState(null)
@@ -47,27 +112,41 @@ export const useMeetingForm = ({ gatheringMaxCount }: UseMeetingFormParams) => {
// 시간 옵션 메모이제이션 (렌더링마다 재생성 방지)
const timeOptions = useMemo(() => generateTimeOptions(), [])
+ // initialData가 로드되면 상태 업데이트 (수정 모드)
+ useEffect(() => {
+ if (initialData) {
+ setFormData(getInitialFormData(initialData))
+ }
+ }, [initialData])
+
const validateForm = (): boolean => {
const newError: ValidationErrors = {}
- if (!bookId || !bookName) {
+ if (
+ !isEditMode &&
+ (!formData.bookId ||
+ !formData.bookName ||
+ !formData.bookThumbnail ||
+ !formData.bookAuthors ||
+ !formData.bookPublisher)
+ ) {
newError.bookId = '* 도서를 선택해주세요.'
}
- if (!startDate || !startTime || !endDate || !endTime) {
+ if (!formData.startDate || !formData.startTime || !formData.endDate || !formData.endTime) {
newError.schedule = '* 일정을 선택해주세요.'
} else {
// 시작/종료 일시 비교 (둘 다 있을 때만)
- const startDateTime = combineDateAndTime(startDate, startTime)
- const endDateTime = combineDateAndTime(endDate, endTime)
+ const startDateTime = combineDateAndTime(formData.startDate, formData.startTime)
+ const endDateTime = combineDateAndTime(formData.endDate, formData.endTime)
if (!isStartBeforeEnd(startDateTime, endDateTime)) {
newError.schedule = '* 종료 일정은 시작 일정보다 늦어야 합니다.'
}
}
- if (maxParticipants) {
- const participants = Number(maxParticipants)
+ if (formData.maxParticipants) {
+ const participants = Number(formData.maxParticipants)
if (isNaN(participants) || participants < 1 || participants > gatheringMaxCount) {
newError.maxParticipants = `현재 모임의 전체 멤버 수는 ${gatheringMaxCount}명이에요. 최대 ${gatheringMaxCount}명까지 참가 가능해요.`
}
@@ -75,10 +154,10 @@ export const useMeetingForm = ({ gatheringMaxCount }: UseMeetingFormParams) => {
// 장소 검증: 4개 필드가 모두 있거나 모두 없어야 함
const locationFields = [
- locationName !== null,
- locationAddress !== null,
- latitude !== null,
- longitude !== null,
+ formData.locationName !== null,
+ formData.locationAddress !== null,
+ formData.latitude !== null,
+ formData.longitude !== null,
]
const filledCount = locationFields.filter(Boolean).length
@@ -103,50 +182,53 @@ export const useMeetingForm = ({ gatheringMaxCount }: UseMeetingFormParams) => {
return true
}
- /**
- * 에러 설정/제거 내부 함수
- */
- const setError = (field: keyof ValidationErrors, message: string | null) => {
- setErrors((prev) => {
- if (!prev) return message ? { [field]: message } : null
- const updated = { ...prev, [field]: message }
- return updated
- })
- }
-
/**
* 에러 초기화 (특정 필드 또는 전체)
- * @param field - 초기화할 필드 (undefined면 전체 초기화)
*/
const clearError = (field?: keyof ValidationErrors) => {
if (field === undefined) {
- // 전체 에러 초기화
setErrors(null)
} else {
- // 특정 필드 에러 초기화
- setError(field, null)
+ setErrors((prev) => {
+ if (!prev) return null
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
+ const { [field]: _, ...rest } = prev
+ return Object.keys(rest).length > 0 ? rest : null
+ })
+ }
+ }
+
+ /**
+ * 폼 필드 업데이트 헬퍼
+ */
+ const updateField = (
+ field: K,
+ value: FormData[K],
+ errorField?: keyof ValidationErrors
+ ) => {
+ setFormData((prev) => ({ ...prev, [field]: value }))
+ if (errorField && errors?.[errorField]) {
+ clearError(errorField)
}
}
/**
* 종료 날짜 비활성화 조건
- * 시작 날짜보다 이전 날짜는 선택 불가
*/
const getEndDateDisabled = () => {
- if (!startDate || !startTime) return undefined
- return { before: startDate }
+ if (!formData.startDate || !formData.startTime) return undefined
+ return { before: formData.startDate }
}
/**
* 종료 시간 옵션 필터링
- * 같은 날짜인 경우 시작 시간 이후만 선택 가능
*/
const getEndTimeOptions = () => {
- if (!startDate || !endDate || !startTime) return timeOptions
+ if (!formData.startDate || !formData.endDate || !formData.startTime) return timeOptions
// 같은 날짜인 경우
- if (startDate.toDateString() === endDate.toDateString()) {
- return timeOptions.filter((option) => option.value > startTime)
+ if (formData.startDate.toDateString() === formData.endDate.toDateString()) {
+ return timeOptions.filter((option) => option.value > formData.startTime!)
}
return timeOptions
@@ -154,7 +236,6 @@ export const useMeetingForm = ({ gatheringMaxCount }: UseMeetingFormParams) => {
/**
* 시작 날짜 비활성화 조건
- * 오늘은 불가, 내일부터 선택 가능
*/
const getStartDateDisabled = () => {
const tomorrow = new Date()
@@ -165,77 +246,37 @@ export const useMeetingForm = ({ gatheringMaxCount }: UseMeetingFormParams) => {
}
/**
- * 시작 날짜 변경 (에러 초기화 포함)
+ * 도서 정보 변경 (에러 초기화 포함)
*/
- const handleStartDateChange = (date: Date | null) => {
- setStartDate(date)
- if (errors?.schedule) {
- clearError('schedule')
- }
- }
-
- /**
- * 시작 시간 변경 (에러 초기화 포함)
- */
- const handleStartTimeChange = (time: string) => {
- setStartTime(time)
- if (errors?.schedule) {
- clearError('schedule')
- }
- }
-
- /**
- * 종료 날짜 변경 (에러 초기화 포함)
- */
- const handleEndDateChange = (date: Date | null) => {
- setEndDate(date)
- if (errors?.schedule) {
- clearError('schedule')
- }
- }
-
- /**
- * 종료 시간 변경 (에러 초기화 포함)
- */
- const handleEndTimeChange = (time: string) => {
- setEndTime(time)
- if (errors?.schedule) {
- clearError('schedule')
- }
- }
-
- /**
- * 참가 인원 변경 (에러 초기화 포함)
- */
- const handleMaxParticipantsChange = (value: string) => {
- setMaxParticipants(value)
- if (errors?.maxParticipants) {
- clearError('maxParticipants')
+ const handleBookChange = (book: Omit) => {
+ setFormData((prev) => ({
+ ...prev,
+ bookId: book.isbn,
+ bookName: book.title,
+ bookThumbnail: book.thumbnail,
+ bookAuthors: book.authors.join(', '),
+ bookPublisher: book.publisher,
+ }))
+ if (errors?.bookId) {
+ clearError('bookId')
}
}
/**
* 선택된 일정 텍스트 생성
- * 시작/종료 날짜와 시간이 모두 선택된 경우 포맷된 문자열 반환
*/
- const formattedSchedule = formatScheduleRange(startDate, startTime, endDate, endTime)
+ const formattedSchedule = formatScheduleRange(
+ formData.startDate,
+ formData.startTime,
+ formData.endDate,
+ formData.endTime
+ )
return {
+ // 모드
+ isEditMode,
// 폼 데이터
- formData: {
- meetingName,
- bookId,
- bookName,
- locationName,
- locationAddress,
- latitude,
- longitude,
- maxParticipants,
- startDate,
- startTime,
- endDate,
- endTime,
- },
+ formData,
// 시간 옵션
timeOptions,
// 유효성 검사
@@ -256,18 +297,18 @@ export const useMeetingForm = ({ gatheringMaxCount }: UseMeetingFormParams) => {
},
// 상태 업데이트 핸들러
handlers: {
- setMeetingName,
- setBookId,
- setBookName,
- setMaxParticipants: handleMaxParticipantsChange,
- setStartDate: handleStartDateChange,
- setStartTime: handleStartTimeChange,
- setEndDate: handleEndDateChange,
- setEndTime: handleEndTimeChange,
- setLocationAddress,
- setLocationName,
- setLatitude,
- setLongitude,
+ setMeetingName: (value: string) => updateField('meetingName', value),
+ setBook: handleBookChange,
+ setMaxParticipants: (value: string) =>
+ updateField('maxParticipants', value, 'maxParticipants'),
+ setStartDate: (date: Date | null) => updateField('startDate', date, 'schedule'),
+ setStartTime: (time: string) => updateField('startTime', time, 'schedule'),
+ setEndDate: (date: Date | null) => updateField('endDate', date, 'schedule'),
+ setEndTime: (time: string) => updateField('endTime', time, 'schedule'),
+ setLocationAddress: (address: string | null) => updateField('locationAddress', address),
+ setLocationName: (name: string | null) => updateField('locationName', name),
+ setLatitude: (lat: number | null) => updateField('latitude', lat),
+ setLongitude: (lng: number | null) => updateField('longitude', lng),
},
}
}
diff --git a/src/features/meetings/hooks/useMyMeetingTabCounts.ts b/src/features/meetings/hooks/useMyMeetingTabCounts.ts
new file mode 100644
index 0000000..a402ee0
--- /dev/null
+++ b/src/features/meetings/hooks/useMyMeetingTabCounts.ts
@@ -0,0 +1,11 @@
+import { useQuery } from '@tanstack/react-query'
+
+import { getMyMeetingTabCounts } from '../meetings.api'
+import { myMeetingQueryKeys } from './myMeetingQueryKeys'
+
+export function useMyMeetingTabCounts() {
+ return useQuery({
+ queryKey: myMeetingQueryKeys.tabCounts(),
+ queryFn: getMyMeetingTabCounts,
+ })
+}
diff --git a/src/features/meetings/hooks/useMyMeetings.ts b/src/features/meetings/hooks/useMyMeetings.ts
new file mode 100644
index 0000000..269fe68
--- /dev/null
+++ b/src/features/meetings/hooks/useMyMeetings.ts
@@ -0,0 +1,22 @@
+import { useInfiniteQuery } from '@tanstack/react-query'
+
+import { PAGE_SIZES } from '@/shared/constants'
+
+import { getMyMeetings } from '../meetings.api'
+import type { MyMeetingFilter, MyMeetingListResponse } from '../meetings.types'
+import { myMeetingQueryKeys } from './myMeetingQueryKeys'
+
+export function useMyMeetings(filter: MyMeetingFilter) {
+ return useInfiniteQuery({
+ queryKey: myMeetingQueryKeys.list(filter),
+ queryFn: ({ pageParam }) =>
+ getMyMeetings({
+ filter,
+ startDateTime: pageParam?.startDateTime,
+ meetingId: pageParam?.meetingId,
+ size: PAGE_SIZES.MY_MEETINGS,
+ }),
+ initialPageParam: undefined as MyMeetingListResponse['nextCursor'] | undefined,
+ getNextPageParam: (lastPage) => (lastPage.hasNext ? lastPage.nextCursor : undefined),
+ })
+}
diff --git a/src/features/meetings/hooks/usePlaceSearch.ts b/src/features/meetings/hooks/usePlaceSearch.ts
new file mode 100644
index 0000000..6386dd2
--- /dev/null
+++ b/src/features/meetings/hooks/usePlaceSearch.ts
@@ -0,0 +1,168 @@
+/**
+ * @file usePlaceSearch.ts
+ * @description 장소 검색 모달의 상태 관리 훅
+ *
+ * SDK 로드, 지도 초기화, 장소 검색 API 등 모든 비동기 로직과 에러를
+ * 하나의 searchState로 추상화하여 UI가 선언적으로 상태를 수신할 수 있도록 합니다.
+ *
+ * searchState:
+ * - 'idle' 초기 화면 (검색 전)
+ * - 'searching' 검색 중 (리스트 스켈레톤 표시)
+ * - 'hasResults' 검색 결과 있음 (지도 + 리스트 표시)
+ * - 'noResults' 일치하는 결과 없음
+ * - 'error' SDK 로드 실패 또는 검색 API 오류
+ */
+
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+import type { KakaoMap, KakaoPlace } from '@/features/kakaomap'
+import { useKakaoLoader, useKakaoPlaceSearch } from '@/features/kakaomap'
+
+export type PlaceSearchState = 'idle' | 'searching' | 'hasResults' | 'noResults' | 'error'
+
+type SelectedPlace = {
+ name: string
+ address: string
+ latitude: number
+ longitude: number
+}
+
+export type UsePlaceSearchOptions = {
+ open: boolean
+ onOpenChange: (open: boolean) => void
+ onSelectPlace: (place: SelectedPlace) => void
+}
+
+export function usePlaceSearch({ open, onOpenChange, onSelectPlace }: UsePlaceSearchOptions) {
+ const [sdkLoading, sdkError] = useKakaoLoader()
+
+ const [searchState, setSearchState] = useState('idle')
+ const [mapInstance, setMapInstance] = useState(null)
+ const [hoveredPlaceId, setHoveredPlaceId] = useState(null)
+
+ // 카카오 Map SDK는 마운트 시점의 컨테이너 크기로 지도를 초기화합니다.
+ // display:none 상태에서 마운트되면 크기가 0으로 계산되어 지도가 깨지므로,
+ // 첫 검색이 실행되어 지도 영역이 화면에 보이는 시점에 처음 마운트합니다.
+ const [hasBeenSearched, setHasBeenSearched] = useState(false)
+
+ const keywordRef = useRef(null)
+
+ const {
+ places,
+ error: searchError,
+ search,
+ reset,
+ } = useKakaoPlaceSearch({
+ onSearchSuccess: (results) => {
+ setSearchState(results.length > 0 ? 'hasResults' : 'noResults')
+ },
+ onSearchError: () => {
+ setSearchState('error')
+ },
+ })
+
+ // SDK 로드 실패 시 error 상태로 전환
+ const effectiveSearchState: PlaceSearchState = sdkError ? 'error' : searchState
+
+ // places 또는 mapInstance가 준비되면 지도 범위를 자동 조정
+ // (첫 검색 시 places가 먼저 오거나 mapInstance가 먼저 올 수 있으므로 둘 다 dep에 포함)
+ useEffect(() => {
+ if (!mapInstance || places.length === 0) return
+
+ const { kakao } = window
+ const bounds = new kakao.maps.LatLngBounds()
+ places.forEach((p) => bounds.extend(new kakao.maps.LatLng(Number(p.y), Number(p.x))))
+ mapInstance.setBounds(bounds)
+ }, [mapInstance, places])
+
+ const resetState = useCallback(() => {
+ setSearchState('idle')
+ setHoveredPlaceId(null)
+ setHasBeenSearched(false)
+ setMapInstance(null)
+ reset()
+ }, [reset])
+
+ const handleKeyDown = useCallback(
+ (e: React.KeyboardEvent) => {
+ if (e.key !== 'Enter') return
+ // 한국어 등 IME 입력 중 composition 이벤트는 무시
+ if (e.nativeEvent.isComposing) return
+ e.preventDefault()
+
+ const keyword = keywordRef.current?.value.trim() ?? ''
+ if (!keyword) return
+
+ // SDK 로드 실패 상태에서는 검색 불가
+ if (sdkError) return
+
+ // SDK 아직 로드 중이라면 무시
+ if (sdkLoading) return
+
+ reset()
+ setHoveredPlaceId(null)
+ setSearchState('searching')
+ setHasBeenSearched(true)
+ search(keyword)
+ },
+ [sdkLoading, sdkError, reset, search]
+ )
+
+ const handlePlaceClick = useCallback(
+ (place: KakaoPlace) => {
+ if (mapInstance) {
+ mapInstance.setCenter(new window.kakao.maps.LatLng(Number(place.y), Number(place.x)))
+ }
+ onSelectPlace({
+ name: place.place_name,
+ address: place.road_address_name || place.address_name,
+ latitude: Number(place.y),
+ longitude: Number(place.x),
+ })
+ onOpenChange(false)
+ resetState()
+ },
+ [mapInstance, onSelectPlace, onOpenChange, resetState]
+ )
+
+ const handlePlaceFocus = useCallback(
+ (place: KakaoPlace) => {
+ if (!mapInstance) return
+ mapInstance.setLevel(4)
+ mapInstance.setCenter(new window.kakao.maps.LatLng(Number(place.y), Number(place.x)))
+ },
+ [mapInstance]
+ )
+
+ const handleClose = useCallback(() => {
+ onOpenChange(false)
+ resetState()
+ }, [onOpenChange, resetState])
+
+ // error 상태에서 노출할 메시지 — SDK 오류 우선
+ const errorMessage = sdkError?.message ?? searchError ?? '오류가 발생했습니다. 다시 시도해주세요.'
+
+ // Map 컴포넌트를 DOM에 마운트할지 여부
+ // error 상태는 인스턴스 보존이 불필요하므로 unmount (다음 검색 시 새로 초기화)
+ const isMapMounted = open && hasBeenSearched && effectiveSearchState !== 'error'
+
+ // 지도 영역을 화면에 표시할지 여부 (isMapMounted가 true일 때만 유의미)
+ // noResults에서는 Map 인스턴스를 유지한 채 CSS로만 숨김 → 재검색 시 재초기화 없이 재사용
+ const isMapVisible = effectiveSearchState === 'searching' || effectiveSearchState === 'hasResults'
+
+ return {
+ searchState: effectiveSearchState,
+ errorMessage,
+ places,
+ isMapMounted,
+ isMapVisible,
+ hoveredPlaceId,
+ keywordRef,
+ setMapInstance,
+ setHoveredPlaceId,
+ handleKeyDown,
+ handlePlaceClick,
+ handlePlaceFocus,
+ handleClose,
+ }
+}
diff --git a/src/features/meetings/hooks/useRejectMeeting.ts b/src/features/meetings/hooks/useRejectMeeting.ts
index a1bf449..b0e81f9 100644
--- a/src/features/meetings/hooks/useRejectMeeting.ts
+++ b/src/features/meetings/hooks/useRejectMeeting.ts
@@ -6,6 +6,7 @@
import { useMutation, useQueryClient } from '@tanstack/react-query'
import type { ApiError, ApiResponse } from '@/api'
+import { gatheringQueryKeys } from '@/features/gatherings'
import { rejectMeeting, type RejectMeetingResponse } from '@/features/meetings'
import { meetingQueryKeys } from './meetingQueryKeys'
@@ -17,12 +18,8 @@ import { meetingQueryKeys } from './meetingQueryKeys'
* 약속을 거부하고 관련 쿼리 캐시를 무효화합니다.
* - 약속 승인 리스트 캐시 무효화
* - 약속 승인 카운트 캐시 무효화
- *
- * @example
- * const rejectMutation = useRejectMeeting()
- * rejectMutation.mutate(meetingId)
*/
-export const useRejectMeeting = () => {
+export const useRejectMeeting = (gatheringId: number) => {
const queryClient = useQueryClient()
return useMutation, ApiError, number>({
@@ -32,6 +29,8 @@ export const useRejectMeeting = () => {
queryClient.invalidateQueries({
queryKey: meetingQueryKeys.approvals(),
})
+ // 모임 약속 리스트 캐시 무효화
+ queryClient.invalidateQueries({ queryKey: gatheringQueryKeys.meetings(gatheringId) })
},
})
}
diff --git a/src/features/meetings/hooks/useUpdateMeeting.ts b/src/features/meetings/hooks/useUpdateMeeting.ts
new file mode 100644
index 0000000..7199fc8
--- /dev/null
+++ b/src/features/meetings/hooks/useUpdateMeeting.ts
@@ -0,0 +1,46 @@
+/**
+ * @file useUpdateMeeting.ts
+ * @description 약속 수정 mutation 훅
+ */
+
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+
+import { ApiError } from '@/api/errors'
+import type { ApiResponse } from '@/api/types'
+import {
+ updateMeeting,
+ type UpdateMeetingRequest,
+ type UpdateMeetingResponse,
+} from '@/features/meetings'
+
+import { meetingQueryKeys } from './meetingQueryKeys'
+
+type UpdateMeetingVariables = {
+ meetingId: number
+ data: UpdateMeetingRequest
+}
+
+/**
+ * 약속 수정 mutation 훅
+ *
+ * @description
+ * 약속 정보를 수정하고 관련 쿼리 캐시를 무효화합니다.
+ */
+export const useUpdateMeeting = () => {
+ const queryClient = useQueryClient()
+
+ return useMutation, ApiError, UpdateMeetingVariables>({
+ mutationFn: ({ meetingId, data }: UpdateMeetingVariables) => updateMeeting(meetingId, data),
+ onSuccess: (_, variables) => {
+ // 수정된 약속의 상세 정보 캐시 무효화
+ queryClient.invalidateQueries({
+ queryKey: meetingQueryKeys.detail(variables.meetingId),
+ })
+
+ // 약속 승인 관련 모든 캐시 무효화
+ queryClient.invalidateQueries({
+ queryKey: meetingQueryKeys.approvals(),
+ })
+ },
+ })
+}
diff --git a/src/features/meetings/index.ts b/src/features/meetings/index.ts
index e0d6b0e..3e59a6f 100644
--- a/src/features/meetings/index.ts
+++ b/src/features/meetings/index.ts
@@ -11,21 +11,25 @@ export * from './lib'
export * from './meetings.api'
// Types
-export type {
- KakaoPlace,
- KakaoSearchMeta,
- KakaoSearchParams,
- KakaoSearchResponse,
-} from './kakaoMap.types'
export type {
ConfirmMeetingResponse,
CreateMeetingRequest,
CreateMeetingResponse,
GetMeetingApprovalsParams,
GetMeetingDetailResponse,
+ GetMyMeetingsParams,
MeetingApprovalItem as MeetingApprovalItemType,
MeetingDetailActionStateType,
MeetingLocation,
MeetingStatus,
+ MyMeetingCursor,
+ MyMeetingFilter,
+ MyMeetingListItem,
+ MyMeetingListResponse,
+ MyMeetingProgressStatus,
+ MyMeetingRole,
+ MyMeetingTabCountsResponse,
RejectMeetingResponse,
+ UpdateMeetingRequest,
+ UpdateMeetingResponse,
} from './meetings.types'
diff --git a/src/features/meetings/kakaoMap.types.ts b/src/features/meetings/kakaoMap.types.ts
deleted file mode 100644
index 2f13f71..0000000
--- a/src/features/meetings/kakaoMap.types.ts
+++ /dev/null
@@ -1,90 +0,0 @@
-/**
- * @file kakao.types.ts
- * @description 카카오 로컬 API 관련 타입 정의
- * @note 외부 API 응답 스펙을 따르기 위해 snake_case 사용
- */
-
-/* eslint-disable @typescript-eslint/naming-convention */
-
-/**
- * 카카오 장소 검색 응답 문서 타입
- */
-export type KakaoPlace = {
- /** 장소명, 업체명 */
- place_name: string
- /** 전체 지번 주소 */
- address_name: string
- /** 전체 도로명 주소 */
- road_address_name: string
- /** X 좌표값, 경도(longitude) */
- x: string
- /** Y 좌표값, 위도(latitude) */
- y: string
- /** 장소 ID */
- id: string
- /** 카테고리 그룹 코드 */
- category_group_code: string
- /** 카테고리 그룹명 */
- category_group_name: string
- /** 카테고리 이름 */
- category_name: string
- /** 전화번호 */
- phone: string
- /** 장소 상세페이지 URL */
- place_url: string
- /** 중심좌표까지의 거리 (단, x,y 파라미터를 준 경우에만 존재) */
- distance?: string
-}
-
-/**
- * 카카오 장소 검색 API 응답 메타 정보
- */
-export type KakaoSearchMeta = {
- /** 검색된 문서 수 */
- total_count: number
- /** total_count 중 노출 가능 문서 수 */
- pageable_count: number
- /** 현재 페이지가 마지막 페이지인지 여부 */
- is_end: boolean
- /** 질의어의 지역 및 키워드 분석 정보 */
- same_name?: {
- /** 질의어에서 인식된 지역의 리스트 */
- region: string[]
- /** 질의어에서 지역 정보를 제외한 키워드 */
- keyword: string
- /** 인식된 지역 리스트 중, 현재 검색에 사용된 지역 정보 */
- selected_region: string
- }
-}
-
-/**
- * 카카오 장소 검색 API 응답 타입
- */
-export type KakaoSearchResponse = {
- /** 검색 결과 문서 리스트 */
- documents: KakaoPlace[]
- /** 응답 관련 정보 */
- meta: KakaoSearchMeta
-}
-
-/**
- * 카카오 장소 검색 API 요청 파라미터
- */
-export type KakaoSearchParams = {
- /** 검색을 원하는 질의어 (필수) */
- query: string
- /** 카테고리 그룹 코드 (선택) */
- category_group_code?: string
- /** 중심 좌표의 X 혹은 경도(longitude) */
- x?: string
- /** 중심 좌표의 Y 혹은 위도(latitude) */
- y?: string
- /** 중심 좌표부터의 반경거리. 미터(m) 단위 */
- radius?: number
- /** 결과 페이지 번호 (1~45, 기본값: 1) */
- page?: number
- /** 한 페이지에 보여질 문서의 개수 (1~15, 기본값: 15) */
- size?: number
- /** 결과 정렬 순서 (distance: 거리순, accuracy: 정확도순) */
- sort?: 'distance' | 'accuracy'
-}
diff --git a/src/features/meetings/meetings.api.ts b/src/features/meetings/meetings.api.ts
index a1989f4..e21ab9b 100644
--- a/src/features/meetings/meetings.api.ts
+++ b/src/features/meetings/meetings.api.ts
@@ -13,17 +13,18 @@ import type {
CreateMeetingResponse,
GetMeetingApprovalsParams,
GetMeetingDetailResponse,
+ GetMyMeetingsParams,
MeetingApprovalItem,
+ MyMeetingListResponse,
+ MyMeetingTabCountsResponse,
RejectMeetingResponse,
+ UpdateMeetingRequest,
+ UpdateMeetingResponse,
} from '@/features/meetings/meetings.types'
import { PAGE_SIZES } from '@/shared/constants'
-/**
- * 목데이터 사용 여부
- * @description 로그인 기능 개발 전까지 true로 설정하여 목데이터 사용
- * TODO: 로그인 기능 완료 후 false로 변경하여 실제 API 호출
- */
-const USE_MOCK_DATA = true
+/** 목데이터 사용 여부 플래그 */
+const USE_MOCK = import.meta.env.VITE_USE_MOCK === 'true'
/**
* 약속 승인 리스트 조회
@@ -48,7 +49,7 @@ export const getMeetingApprovals = async (
// 🚧 임시: 로그인 기능 개발 전까지 목데이터 사용
// TODO: 로그인 완료 후 아래 주석을 해제하고 목데이터 로직 제거
- if (USE_MOCK_DATA) {
+ if (USE_MOCK) {
// 실제 API 호출을 시뮬레이션하기 위한 지연
await new Promise((resolve) => setTimeout(resolve, 500))
return getMockMeetingApprovals(status, page, size)
@@ -137,7 +138,7 @@ export const deleteMeeting = async (meetingId: number) => {
export const getMeetingDetail = async (meetingId: number): Promise => {
// 🚧 임시: 로그인 기능 개발 전까지 목데이터 사용
// TODO: 로그인 완료 후 아래 주석을 해제하고 목데이터 로직 제거
- if (USE_MOCK_DATA) {
+ if (USE_MOCK) {
// 실제 API 호출을 시뮬레이션하기 위한 지연
await new Promise((resolve) => setTimeout(resolve, 500))
return getMockMeetingDetail(meetingId)
@@ -194,6 +195,54 @@ export const cancelJoinMeeting = async (meetingId: number) => {
* - B001: 책을 찾을 수 없습니다.
*/
export const createMeeting = async (data: CreateMeetingRequest) => {
- const response = await apiClient.post>('/api/meetings', data)
+ const response = await apiClient.post>(
+ MEETINGS_ENDPOINTS.CREATE,
+ data
+ )
return response.data
}
+
+/**
+ * 약속 수정
+ *
+ * @description
+ * 약속 정보를 수정합니다.
+ * 책 정보는 수정할 수 없습니다.
+ *
+ * @param meetingId - 약속 ID
+ * @param data - 약속 수정 요청 데이터
+ *
+ * @returns 수정된 약속 정보
+ *
+ * @throws
+ * - M001: 약속을 찾을 수 없습니다.
+ * - M013: 최대 참가 인원이 유효하지 않습니다.
+ */
+export const updateMeeting = async (meetingId: number, data: UpdateMeetingRequest) => {
+ const response = await apiClient.patch>(
+ MEETINGS_ENDPOINTS.UPDATE(meetingId),
+ data
+ )
+ return response.data
+}
+
+/**
+ * 메인페이지 내 약속 리스트 조회
+ *
+ * @param params - 조회 파라미터 (filter, cursor, size)
+ * @returns 내 약속 리스트 (커서 기반 페이지네이션)
+ */
+export const getMyMeetings = async (
+ params: GetMyMeetingsParams
+): Promise => {
+ return api.get(MEETINGS_ENDPOINTS.MY_MEETINGS, { params })
+}
+
+/**
+ * 메인페이지 내 약속 탭 카운트 조회
+ *
+ * @returns 탭별 약속 카운트 (all, upcoming, done)
+ */
+export const getMyMeetingTabCounts = async (): Promise => {
+ return api.get(MEETINGS_ENDPOINTS.MY_MEETING_TAB_COUNTS)
+}
diff --git a/src/features/meetings/meetings.endpoints.ts b/src/features/meetings/meetings.endpoints.ts
index e5fc740..e153a18 100644
--- a/src/features/meetings/meetings.endpoints.ts
+++ b/src/features/meetings/meetings.endpoints.ts
@@ -7,6 +7,9 @@ export const MEETINGS_ENDPOINTS = {
// 약속 상세 조회 (GET /api/meetings/{meetingId})
DETAIL: (meetingId: number) => `${API_PATHS.MEETINGS}/${meetingId}`,
+ // 약속 생성 (POST /api/meetings)
+ CREATE: `${API_PATHS.MEETINGS}`,
+
// 약속 거부 (POST /api/meetings/{meetingId}/reject)
REJECT: (meetingId: number) => `${API_PATHS.MEETINGS}/${meetingId}/reject`,
@@ -21,4 +24,13 @@ export const MEETINGS_ENDPOINTS = {
// 약속 참가취소 (DELETE /api/meetings/{meetingId}/join)
CANCEL_JOIN: (meetingId: number) => `${API_PATHS.MEETINGS}/${meetingId}/join`,
+
+ // 약속 수정 (PATCH /api/meetings/{meetingId})
+ UPDATE: (meetingId: number) => `${API_PATHS.MEETINGS}/${meetingId}`,
+
+ // 메인페이지 내 약속 리스트 조회 (GET /api/meetings/me)
+ MY_MEETINGS: `${API_PATHS.MEETINGS}/me`,
+
+ // 메인페이지 내 약속 탭 카운트 조회 (GET /api/meetings/me/tab-counts)
+ MY_MEETING_TAB_COUNTS: `${API_PATHS.MEETINGS}/me/tab-counts`,
} as const
diff --git a/src/features/meetings/meetings.mock.ts b/src/features/meetings/meetings.mock.ts
index 60863c1..c6f7be4 100644
--- a/src/features/meetings/meetings.mock.ts
+++ b/src/features/meetings/meetings.mock.ts
@@ -218,6 +218,8 @@ const mockMeetingDetails: Record = {
bookId: 1001,
bookName: '클린 코드',
thumbnail: 'https://picsum.photos/seed/cleancode/200/300',
+ authors: '로버트 C. 마틴',
+ publisher: '인사이트',
},
schedule: {
startDateTime: '2026-02-01T14:00:00',
@@ -259,7 +261,7 @@ const mockMeetingDetails: Record = {
buttonLabel: '약속이 끝났어요',
enabled: false,
},
- confirmedTopicExpand: true,
+ confirmedTopic: true,
confirmedTopicDate: '2026-01-20T14:00:00',
},
11: {
@@ -267,7 +269,7 @@ const mockMeetingDetails: Record = {
progressStatus: 'PRE',
meetingName: '킥오프 모임',
meetingStatus: 'CONFIRMED',
- confirmedTopicExpand: false,
+ confirmedTopic: false,
confirmedTopicDate: null,
gathering: {
gatheringId: 102,
@@ -277,6 +279,8 @@ const mockMeetingDetails: Record = {
bookId: 1002,
bookName: '실용주의 프로그래머',
thumbnail: 'https://picsum.photos/seed/pragmatic/200/300',
+ authors: '데이비드 토머스, 앤드류 헌트',
+ publisher: '인사이트',
},
schedule: {
startDateTime: '2026-02-11T14:00:00',
diff --git a/src/features/meetings/meetings.types.ts b/src/features/meetings/meetings.types.ts
index a2333bf..35381f5 100644
--- a/src/features/meetings/meetings.types.ts
+++ b/src/features/meetings/meetings.types.ts
@@ -3,6 +3,8 @@
* @description Meeting API 관련 타입 정의
*/
+import type { CreateBookBody } from '@/features/book'
+
/**
* 약속 상태 타입
*/
@@ -84,8 +86,8 @@ export type MeetingLocation = {
export type CreateMeetingRequest = {
/** 모임 ID */
gatheringId: number
- /** 책 ID */
- bookId: number
+ /** 책 정보 */
+ book: CreateBookBody
/** 약속 이름 */
meetingName: string
/** 약속 시작 일시 (ISO 8601 형식) */
@@ -99,7 +101,7 @@ export type CreateMeetingRequest = {
}
/**
- * 약속 생성 응답 타입
+ * 약속 생성 응답 타입 Todo:실제 응답값이랑 비교해봐야 함
*/
export type CreateMeetingResponse = {
/** 약속 ID */
@@ -117,6 +119,9 @@ export type CreateMeetingResponse = {
book: {
bookId: number
bookName: string
+ thumbnail: string
+ authors: string
+ publisher: string
}
/** 일정 정보 */
schedule: {
@@ -139,6 +144,40 @@ export type CreateMeetingResponse = {
}
}
+/**
+ * 약속 수정 요청 타입
+ */
+export type UpdateMeetingRequest = {
+ /** 약속 이름 */
+ meetingName: string
+ /** 약속 시작 일시 (ISO 8601 형식) */
+ startDate: string
+ /** 약속 종료 일시 (ISO 8601 형식) */
+ endDate: string
+ /** 장소 (선택 사항) */
+ location: MeetingLocation | null
+ /** 최대 참가 인원 */
+ maxParticipants: number
+}
+
+/**
+ * 약속 수정 응답 타입
+ */
+export type UpdateMeetingResponse = {
+ /** 약속 ID */
+ meetingId: number
+ /** 약속 이름 */
+ meetingName: string
+ /** 약속 시작 일시 (ISO 8601 형식) */
+ startDate: string
+ /** 약속 종료 일시 (ISO 8601 형식) */
+ endDate: string
+ /** 장소 (선택 사항) */
+ location: MeetingLocation | null
+ /** 최대 참가 인원 */
+ maxParticipants: number
+}
+
/**
* 약속 일정 타입
*/
@@ -176,7 +215,7 @@ export type GetMeetingDetailResponse = {
/** 약속 진행 상태 */
progressStatus: MeetingProgressStatus
/** 주제 확정 여부 */
- confirmedTopicExpand: boolean
+ confirmedTopic: boolean
/** 주제 확정 일시 */
confirmedTopicDate: string | null
/** 모임 정보 */
@@ -189,6 +228,8 @@ export type GetMeetingDetailResponse = {
bookId: number
bookName: string
thumbnail: string
+ authors: string
+ publisher: string
}
/** 일정 정보 */
schedule: MeetingSchedule
@@ -212,3 +253,61 @@ export type GetMeetingDetailResponse = {
enabled: boolean
}
}
+
+// ============================================================
+// 메인페이지 내 약속 리스트 관련 타입
+// ============================================================
+
+/** 메인페이지 약속 진행 상태 (시간 기준) */
+export type MyMeetingProgressStatus = 'UPCOMING' | 'ONGOING' | 'DONE' | 'UNKNOWN'
+
+/** 메인페이지 내 역할 */
+export type MyMeetingRole = 'LEADER' | 'GATHERING_LEADER' | 'MEMBER' | 'NONE'
+
+/** 메인페이지 약속 필터 */
+export type MyMeetingFilter = 'ALL' | 'UPCOMING' | 'DONE'
+
+/** 메인페이지 내 약속 아이템 */
+export interface MyMeetingListItem {
+ meetingId: number
+ meetingName: string
+ gatheringId: number
+ gatheringName: string
+ meetingLeaderName: string
+ bookName: string
+ startDateTime: string
+ endDateTime: string
+ meetingStatus: MeetingStatus | 'REJECTED' | 'DONE'
+ myRole: MyMeetingRole
+ progressStatus: MyMeetingProgressStatus
+}
+
+/** 메인페이지 내 약속 커서 */
+export interface MyMeetingCursor {
+ startDateTime: string
+ meetingId: number
+}
+
+/** 메인페이지 내 약속 리스트 응답 */
+export interface MyMeetingListResponse {
+ items: MyMeetingListItem[]
+ totalCount: number
+ pageSize: number
+ hasNext: boolean
+ nextCursor: MyMeetingCursor | null
+}
+
+/** 메인페이지 내 약속 조회 파라미터 */
+export interface GetMyMeetingsParams {
+ filter: MyMeetingFilter
+ startDateTime?: string
+ meetingId?: number
+ size?: number
+}
+
+/** 메인페이지 내 약속 탭 카운트 응답 */
+export interface MyMeetingTabCountsResponse {
+ all: number
+ upcoming: number
+ done: number
+}
diff --git a/src/features/pre-opinion/components/BookReviewSection.tsx b/src/features/pre-opinion/components/BookReviewSection.tsx
new file mode 100644
index 0000000..8be7ef3
--- /dev/null
+++ b/src/features/pre-opinion/components/BookReviewSection.tsx
@@ -0,0 +1,59 @@
+import {
+ BookReviewForm,
+ type BookReviewFormValues,
+} from '@/features/book/components/BookReviewForm'
+import type { PreOpinionReview } from '@/features/pre-opinion/preOpinion.types'
+import { Container } from '@/shared/ui'
+
+/**
+ * 사전 의견 작성 페이지의 책 평가 섹션
+ *
+ * @description 기존 평가가 있으면 해당 데이터를 채워서 보여주고,
+ * 없으면 빈 폼을 보여줘서 사용자가 평가를 남길 수 있게 합니다.
+ * 제출은 상위 페이지에서 일괄 처리합니다.
+ *
+ * @example
+ * ```tsx
+ * setReviewValues(values)} />
+ * ```
+ */
+interface BookReviewSectionProps {
+ review: PreOpinionReview | null
+ onChange?: (values: BookReviewFormValues) => void
+}
+
+const BookReviewSection = ({ review, onChange }: BookReviewSectionProps) => {
+ const hasReview = review !== null
+
+ return (
+
+
+ 이 책은 어떠셨나요?
+
+
+ k.id)
+ .sort()
+ .join(',')}`
+ : 'empty'
+ }
+ initialRating={review?.rating ?? 0}
+ initialKeywordIds={review?.keywords.map((k) => k.id) ?? []}
+ onChange={onChange}
+ />
+
+
+ )
+}
+
+export default BookReviewSection
diff --git a/src/features/pre-opinion/components/PreOpinionWriteHeader.tsx b/src/features/pre-opinion/components/PreOpinionWriteHeader.tsx
new file mode 100644
index 0000000..9975621
--- /dev/null
+++ b/src/features/pre-opinion/components/PreOpinionWriteHeader.tsx
@@ -0,0 +1,104 @@
+import { useEffect, useRef, useState } from 'react'
+
+import type { PreOpinionBook } from '@/features/pre-opinion/preOpinion.types'
+import { cn } from '@/shared/lib/utils'
+import { Button } from '@/shared/ui'
+
+import { formatUpdatedAt } from '../lib/date'
+
+interface PreOpinionWriteHeaderProps {
+ book: PreOpinionBook
+ updatedAt: string | null
+ onSave: () => void
+ onSubmit: () => void
+ isSaving?: boolean
+ isSubmitting?: boolean
+ isReviewValid?: boolean
+}
+
+/**
+ * 사전 의견 작성 페이지 헤더
+ *
+ * @description
+ * 책 제목, 저자, 마지막 저장 시각을 표시하고
+ * 스크롤 시 sticky로 고정되며 하단 그림자가 생깁니다.
+ *
+ * @example
+ * ```tsx
+ *
+ * ```
+ */
+const PreOpinionWriteHeader = ({
+ book,
+ updatedAt,
+ onSave,
+ onSubmit,
+ isSaving,
+ isSubmitting,
+ isReviewValid = false,
+}: PreOpinionWriteHeaderProps) => {
+ const sentinelRef = useRef(null)
+ const [isStuck, setIsStuck] = useState(false)
+
+ useEffect(() => {
+ const sentinel = sentinelRef.current
+ if (!sentinel) return
+
+ const observer = new IntersectionObserver(
+ ([entry]) => {
+ setIsStuck(!entry.isIntersecting)
+ },
+ { threshold: 0 }
+ )
+
+ observer.observe(sentinel)
+ return () => observer.disconnect()
+ }, [])
+
+ return (
+ <>
+
+
+
+
+
+
사전 의견 작성하기
+
+ {book.title} · {book.author}
+
+
+
+ {updatedAt && (
+
{formatUpdatedAt(updatedAt)}
+ )}
+
+
+
+
+
+
+
{topic.topicDescription}
+
+ {isEditMode && (
+