diff --git a/src/page/onboarding-page.tsx b/src/page/onboarding-page.tsx
new file mode 100644
index 0000000..e51ea0a
--- /dev/null
+++ b/src/page/onboarding-page.tsx
@@ -0,0 +1,23 @@
+import LoginBg from '@shared/assets/login.svg?react';
+import { Button } from '@shared/ui/button';
+import KakaoIcon from '@shared/assets/icon/KakaoTalk.svg?react';
+const OnboardingPage = () => {
+ const handleKakaoLogin = () => {
+ window.location.href = import.meta.env.VITE_KAKAO_LOGIN_URL;
+ };
+
+ return (
+
+ {/* 배경 */}
+
+
+ {/* 버튼 영역 */}
+
+ } onClick={handleKakaoLogin}>
+ 카카오 로그인
+
+
+
+ );
+};
+export default OnboardingPage;
diff --git a/src/page/post-detail-page.tsx b/src/page/post-detail-page.tsx
index 893da7c..a357c24 100644
--- a/src/page/post-detail-page.tsx
+++ b/src/page/post-detail-page.tsx
@@ -1,93 +1,27 @@
import { TopNavigation } from '@shared/ui/topNavigation';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
import ArrowLeftIcon from '@shared/assets/icon/arrow-left.svg?react';
import UploadIcon from '@shared/assets/icon/upload.svg?react';
import { Carousel } from '@widgets/postDetail/carousel/carousel';
import { DetailInfo } from '@widgets/postDetail/detail-info';
import { Comment } from '@widgets/postDetail/comment/comment';
-import type { CommentItemProps } from '@widgets/postDetail/comment/comment-item';
import Input from '@shared/ui/input';
import { FloatingActionButton } from '@shared/ui/floatingActionButton';
import SendIcon from '@shared/assets/icon/send.svg?react';
import { Button } from '@shared/ui/button';
-export const mockComments: CommentItemProps[] = [
- // ===== 시스템 메시지 (최상단 고정 대상) =====
- {
- id: 100,
- author: '시스템',
- time: '방금 전',
- value: '홍길동님의 참가 신청이 승인 대기중입니다.',
- parentId: null,
- type: 'system',
- status: 'pending',
- },
- {
- id: 101,
- author: '시스템',
- time: '10분 전',
- value: '김철수님의 참가 신청이 승인되었습니다.',
- parentId: null,
- type: 'system',
- status: 'approved',
- },
- {
- id: 102,
- author: '시스템',
- time: '30분 전',
- value: '이영희님의 참가 신청이 거절되었습니다.',
- parentId: null,
- type: 'system',
- status: 'rejected',
- },
-
- // ===== 일반 댓글 =====
- {
- id: 1,
- author: '승택',
- time: '19시간 전',
- value: '제발 저요!!!',
- parentId: null,
- type: 'user',
- },
-
- // ===== 대댓글 (id:1의 답글) =====
- {
- id: 2,
- author: '작성자',
- time: '18시간 전',
- value: '확인했어요! 잠시만 기다려주세요.',
- parentId: 1,
- type: 'user',
- },
- {
- id: 3,
- author: '승택',
- time: '17시간 전',
- value: '감사합니다 🙏',
- parentId: 1,
- type: 'user',
- },
-
- // ===== 다른 일반 댓글 =====
- {
- id: 4,
- author: '홍길동',
- time: '2시간 전',
- value: '저도 가능할까요?',
- parentId: null,
- type: 'user',
- },
-
- // ===== 대댓글 (id:4의 답글) =====
- {
- id: 5,
- author: '작성자',
- time: '1시간 전',
- value: '네! 신청 남겨주세요.',
- parentId: 4,
- type: 'user',
- },
-];
+import { useQuery } from '@tanstack/react-query';
+import { FEED_QUERY_OPTIONS } from '@shared/api/domain/feeds/query';
+import { useMutation } from '@tanstack/react-query';
+import {
+ PARTICIPATION_MUTATION_OPTIONS,
+ PARTICIPATION_QUERY_OPTIONS,
+} from '@shared/api/domain/participations/query';
+import { getMyMemberId } from '@shared/utils/auth';
+import { COMMENT_QUERY_OPTIONS } from '@shared/api/domain/comments/query';
+import { queryClient } from '@app/providers/query-client';
+import { COMMENT_MUTATION_OPTIONS } from '@shared/api/domain/comments/query';
+import { useState } from 'react';
+import XIcon from '@shared/assets/icon/x.svg?react';
const handleShare = async () => {
const url = window.location.href;
@@ -95,26 +29,102 @@ const handleShare = async () => {
if (navigator.share) {
try {
await navigator.share({
- title: '역삼동 공터에서 경도 할 사람 찾고 있어요!',
- text: '같이 경도 하실 분 구해요!',
+ title: '공유하기',
+ text: '게시글을 확인해보세요!',
url,
});
- } catch (error) {
+ } catch {
console.log('공유 취소');
}
- } else {
- // fallback은 아래에서 설명
}
};
-const isOwner = false;
-const isApplied = false;
-const isClosed = false;
-
-const canApply = !isOwner && !isApplied && !isClosed;
-
const PostDetailPage = () => {
const navigate = useNavigate();
+ const { feedId } = useParams();
+ const numericFeedId = Number(feedId);
+ const [comment, setComment] = useState('');
+ const [parentId, setParentId] = useState
(null);
+ const [replyTarget, setReplyTarget] = useState(null);
+
+ const { mutate: applyParticipation } = useMutation({
+ ...PARTICIPATION_MUTATION_OPTIONS.APPLY(),
+ onSuccess: () => {
+ console.log('✅ 참가 신청 성공');
+
+ queryClient.invalidateQueries({
+ queryKey: ['participations', numericFeedId],
+ });
+
+ queryClient.invalidateQueries({
+ queryKey: ['comments', numericFeedId],
+ });
+ },
+
+ onError: (error) => {
+ console.error('❌ 참가 신청 실패:', error);
+ },
+ });
+ const { data: participants } = useQuery(
+ PARTICIPATION_QUERY_OPTIONS.LIST(numericFeedId),
+ );
+ const { data: commentsData } = useQuery(
+ COMMENT_QUERY_OPTIONS.LIST(numericFeedId),
+ );
+ const { mutate: approveParticipation } = useMutation({
+ ...PARTICIPATION_MUTATION_OPTIONS.APPROVE(),
+
+ onSuccess: () => {
+ queryClient.invalidateQueries({
+ queryKey: ['participations', numericFeedId],
+ });
+
+ queryClient.invalidateQueries({
+ queryKey: ['comments', numericFeedId],
+ });
+ },
+ });
+
+ const { mutate: rejectParticipation } = useMutation({
+ ...PARTICIPATION_MUTATION_OPTIONS.REJECT(),
+
+ onSuccess: () => {
+ queryClient.invalidateQueries({
+ queryKey: ['participations', numericFeedId],
+ });
+
+ queryClient.invalidateQueries({
+ queryKey: ['comments', numericFeedId],
+ });
+ },
+ });
+ const { mutate: createComment } = useMutation({
+ ...COMMENT_MUTATION_OPTIONS.CREATE(),
+ onSuccess: () => {
+ setComment('');
+ setParentId(null);
+ setReplyTarget(null);
+
+ queryClient.invalidateQueries({
+ queryKey: ['comments', numericFeedId],
+ });
+ },
+ });
+
+ const { data, isLoading } = useQuery(
+ FEED_QUERY_OPTIONS.DETAIL(numericFeedId),
+ );
+ if (isLoading) return loading...
;
+
+ if (!data) return no data
;
+
+ const myId = getMyMemberId();
+
+ const isOwner = data.writer?.writerId === myId;
+ const isApplied = participants?.some((p) => p.applicantId === myId) ?? false;
+ const isClosed = false;
+
+ const canApply = !isOwner && !isApplied && !isClosed;
return (
@@ -124,37 +134,97 @@ const PostDetailPage = () => {
onLeftClick={() => navigate(-1)}
onRightClick={handleShare}
/>
+
+ {/* 🔥 이미지 */}
- 
- 
- 
+ 
+
+ {/* 🔥 제목 */}
- 역삼동 공터에서 경도 할 사람 찾고 있어요!!(성인만)
+ {data.title}
-
-
-
- {
- '역삼동 공터에서 경도 하실 분 구합니다~~ 20세 이상 성인분들만 모집하고 있어요! 즐겁게 하실 분들만 신청해주셨으면 좋겠어요~'
- }
+
+ {/* 🔥 상세 정보 */}
+
+
-
+ {
+ setParentId(commentId);
+ setReplyTarget(nickname ?? null);
+ }}
+ onChangeApproval={(participationId, status) => {
+ if (status === 'approved') {
+ approveParticipation(participationId);
+ } else {
+ rejectParticipation(participationId);
+ }
+ }}
+ />
+
{canApply && (
-
-
-
- }
- />
-
+
)}
+
+ {replyTarget && (
+
+ ↳{replyTarget}님에게 답글 작성중...
+
+
+
+ )}
+
+
+ setComment(e.target.value)}
+ />
+
+ }
+ onClick={() => {
+ if (!comment.trim()) return;
+
+ createComment({
+ feedId: numericFeedId,
+ body: {
+ description: comment,
+ parentId: parentId ?? undefined,
+ },
+ });
+ }}
+ />
+
+
);
};
diff --git a/src/shared/api/config/instance.ts b/src/shared/api/config/instance.ts
index 2884239..776bc31 100644
--- a/src/shared/api/config/instance.ts
+++ b/src/shared/api/config/instance.ts
@@ -1,6 +1,15 @@
import ky from 'ky';
+import {
+ handleCheckAndSetToken,
+ handleUnauthorizedResponse,
+} from './interceptor';
export const api = ky.create({
prefixUrl: import.meta.env.VITE_BASE_URL,
+ credentials: 'include', // 쿠키
retry: 0,
+ hooks: {
+ beforeRequest: [handleCheckAndSetToken],
+ afterResponse: [handleUnauthorizedResponse],
+ },
});
diff --git a/src/shared/api/config/interceptor.ts b/src/shared/api/config/interceptor.ts
new file mode 100644
index 0000000..a4dfea0
--- /dev/null
+++ b/src/shared/api/config/interceptor.ts
@@ -0,0 +1,57 @@
+import { routePath } from '@app/router/path';
+import { api } from './instance';
+
+let refreshPromise: Promise
| null = null;
+
+/**
+ * 🔐 accessToken 자동 주입
+ */
+export const handleCheckAndSetToken = (request: Request) => {
+ const token = localStorage.getItem('accessToken');
+
+ if (token) {
+ request.headers.set('Authorization', `Bearer ${token}`);
+ }
+};
+
+/**
+ * 🔁 401 → refresh 시도
+ */
+export const handleUnauthorizedResponse = async (
+ request: Request,
+ options: any,
+ response: Response,
+) => {
+ if (response.status !== 401) return response;
+
+ try {
+ if (!refreshPromise) {
+ refreshPromise = fetch(`${import.meta.env.VITE_BASE_URL}/token/refresh`, {
+ method: 'POST',
+ credentials: 'include', // 🔥 쿠키 자동 포함
+ })
+ .then(async (res) => {
+ if (!res.ok) throw new Error('refresh 실패');
+ const data = await res.json();
+ localStorage.setItem('accessToken', data.accessToken);
+ return data.accessToken;
+ })
+ .finally(() => {
+ refreshPromise = null;
+ });
+ }
+
+ const newAccessToken = await refreshPromise;
+
+ request.headers.set('Authorization', `Bearer ${newAccessToken}`);
+
+ return api(request, options);
+ } catch {
+ logout();
+ }
+};
+
+function logout() {
+ localStorage.removeItem('accessToken');
+ window.location.href = routePath.ONBOARDING;
+}
diff --git a/src/shared/api/domain/comments/query.ts b/src/shared/api/domain/comments/query.ts
new file mode 100644
index 0000000..9816f7b
--- /dev/null
+++ b/src/shared/api/domain/comments/query.ts
@@ -0,0 +1,38 @@
+import { queryOptions, mutationOptions } from '@tanstack/react-query';
+import { api } from '@shared/api/config/instance';
+import { END_POINT } from '@shared/api/end-point';
+import type {
+ CreateCommentRequest,
+ GetCommentsResponse,
+} from '@shared/types/comments/type';
+
+const getComments = async (feedId: number) => {
+ return api.get(END_POINT.FEED.COMMENTS(feedId)).json();
+};
+
+const createComment = async (feedId: number, body: CreateCommentRequest) => {
+ return api.post(END_POINT.FEED.COMMENTS(feedId), {
+ json: body,
+ });
+};
+
+export const COMMENT_QUERY_OPTIONS = {
+ LIST: (feedId: number) =>
+ queryOptions({
+ queryKey: ['comments', feedId],
+ queryFn: () => getComments(feedId),
+ }),
+};
+
+export const COMMENT_MUTATION_OPTIONS = {
+ CREATE: () =>
+ mutationOptions({
+ mutationFn: ({
+ feedId,
+ body,
+ }: {
+ feedId: number;
+ body: CreateCommentRequest;
+ }) => createComment(feedId, body),
+ }),
+};
diff --git a/src/shared/api/domain/controller/query.ts b/src/shared/api/domain/controller/query.ts
new file mode 100644
index 0000000..9a30509
--- /dev/null
+++ b/src/shared/api/domain/controller/query.ts
@@ -0,0 +1,14 @@
+import { api } from '@shared/api/config/instance';
+import { END_POINT } from '@shared/api/end-point';
+import type { GetPresignedUploadResponse } from '@shared/types/controller/type';
+
+export const getPresignedUpload = async (
+ type: string,
+ contentType: string,
+): Promise => {
+ return api
+ .get(END_POINT.S3.PRESIGNED_UPLOAD, {
+ searchParams: { type, contentType },
+ })
+ .json();
+};
diff --git a/src/shared/api/domain/feeds/query.ts b/src/shared/api/domain/feeds/query.ts
new file mode 100644
index 0000000..648e800
--- /dev/null
+++ b/src/shared/api/domain/feeds/query.ts
@@ -0,0 +1,55 @@
+import { mutationOptions, queryOptions } from '@tanstack/react-query';
+import { api } from '@shared/api/config/instance';
+import { END_POINT } from '@shared/api/end-point';
+import { FEED_QUERY_KEY } from '@shared/api/query-key';
+import type {
+ CreateFeedRequest,
+ GetFeedDetailResponse,
+ GetFeedsResponse,
+} from '@shared/types/feeds/type';
+
+interface GetFeedsParams extends Record {
+ sort?: 'LATEST' | 'DISTANCE';
+ latitude?: number;
+ longitude?: number;
+}
+
+const getFeeds = async (params?: GetFeedsParams): Promise => {
+ return api
+ .get(END_POINT.FEED.LIST, {
+ searchParams: params,
+ })
+ .json();
+};
+
+const getFeedDetail = async (
+ feedId: number,
+): Promise => {
+ return api.get(END_POINT.FEED.DETAIL(feedId)).json();
+};
+
+const postFeed = async (body: CreateFeedRequest) => {
+ return api.post(END_POINT.FEED.LIST, { json: body }).json();
+};
+
+export const FEED_QUERY_OPTIONS = {
+ LIST: (params?: GetFeedsParams) =>
+ queryOptions({
+ queryKey: FEED_QUERY_KEY.LIST(params),
+ queryFn: () => getFeeds(params),
+ }),
+ DETAIL: (feedId: number) =>
+ queryOptions({
+ queryKey: FEED_QUERY_KEY.DETAIL(feedId),
+ queryFn: () => getFeedDetail(feedId),
+ enabled: !!feedId,
+ staleTime: 0,
+ }),
+};
+
+export const FEED_MUTATION_OPTIONS = {
+ CREATE: () =>
+ mutationOptions({
+ mutationFn: postFeed,
+ }),
+};
diff --git a/src/shared/api/domain/notifications/query.ts b/src/shared/api/domain/notifications/query.ts
new file mode 100644
index 0000000..478525e
--- /dev/null
+++ b/src/shared/api/domain/notifications/query.ts
@@ -0,0 +1,30 @@
+import { mutationOptions, queryOptions } from '@tanstack/react-query';
+import { api } from '@shared/api/config/instance';
+import { END_POINT } from '@shared/api/end-point';
+import { NOTIFICATION_QUERY_KEY } from '@shared/api/query-key';
+import type { GetNotificationsResponse } from '@shared/types/notifications/type';
+
+const getNotifications = async (): Promise => {
+ return api
+ .get(END_POINT.NOTIFICATION.LIST)
+ .json();
+};
+
+const deleteNotifications = async () => {
+ await api.delete(END_POINT.NOTIFICATION.LIST);
+};
+
+export const NOTIFICATION_QUERY_OPTIONS = {
+ LIST: () =>
+ queryOptions({
+ queryKey: NOTIFICATION_QUERY_KEY.LIST(),
+ queryFn: getNotifications,
+ }),
+};
+
+export const NOTIFICATION_MUTATION_OPTIONS = {
+ DELETE_ALL: () =>
+ mutationOptions({
+ mutationFn: deleteNotifications,
+ }),
+};
diff --git a/src/shared/api/domain/participations/query.ts b/src/shared/api/domain/participations/query.ts
new file mode 100644
index 0000000..81641f3
--- /dev/null
+++ b/src/shared/api/domain/participations/query.ts
@@ -0,0 +1,47 @@
+import { mutationOptions, queryOptions } from '@tanstack/react-query';
+import { api } from '@shared/api/config/instance';
+import { END_POINT } from '@shared/api/end-point';
+import type { GetParticipantsResponse } from '@shared/types/participations/type';
+const applyParticipation = async (feedId: number) => {
+ return api.post(END_POINT.FEED.PARTICIPATION(feedId)).json();
+};
+const approveParticipation = async (id: number) => {
+ return api.patch(END_POINT.PARTICIPATION.APPROVE(id)).json();
+};
+
+const rejectParticipation = async (id: number) => {
+ return api.patch(END_POINT.PARTICIPATION.REJECT(id)).json();
+};
+
+const getParticipants = async (
+ feedId: number,
+): Promise => {
+ return api
+ .get(END_POINT.FEED.PARTICIPATION(feedId))
+ .json();
+};
+
+export const PARTICIPATION_MUTATION_OPTIONS = {
+ APPLY: () =>
+ mutationOptions({
+ mutationFn: applyParticipation,
+ }),
+
+ APPROVE: () =>
+ mutationOptions({
+ mutationFn: approveParticipation,
+ }),
+
+ REJECT: () =>
+ mutationOptions({
+ mutationFn: rejectParticipation,
+ }),
+};
+
+export const PARTICIPATION_QUERY_OPTIONS = {
+ LIST: (feedId: number) =>
+ queryOptions({
+ queryKey: ['participations', feedId],
+ queryFn: () => getParticipants(feedId),
+ }),
+};
diff --git a/src/shared/api/end-point.ts b/src/shared/api/end-point.ts
new file mode 100644
index 0000000..aeed2ba
--- /dev/null
+++ b/src/shared/api/end-point.ts
@@ -0,0 +1,20 @@
+export const END_POINT = {
+ FEED: {
+ LIST: 'api/feeds',
+ DETAIL: (feedId: number) => `api/feeds/${feedId}`,
+ PARTICIPATION: (feedId: number) => `api/feeds/${feedId}/participations`,
+ COMMENTS: (feedId: number) => `api/feeds/${feedId}/comments`,
+ CREATE: (feedId: number) => `api/feeds/${feedId}/comments`,
+ },
+ PARTICIPATION: {
+ APPROVE: (id: number) => `api/participations/${id}/approve`,
+ REJECT: (id: number) => `api/participations/${id}/reject`,
+ },
+
+ S3: {
+ PRESIGNED_UPLOAD: 'api/s3/presigned-upload',
+ },
+ NOTIFICATION: {
+ LIST: 'api/notifications',
+ },
+} as const;
diff --git a/src/shared/api/query-key.ts b/src/shared/api/query-key.ts
new file mode 100644
index 0000000..9803412
--- /dev/null
+++ b/src/shared/api/query-key.ts
@@ -0,0 +1,12 @@
+export const FEED_QUERY_KEY = {
+ LIST: (params?: {
+ sort?: 'LATEST' | 'DISTANCE';
+ latitude?: number;
+ longitude?: number;
+ }) => ['feeds', params ?? {}] as const,
+ DETAIL: (feedId: number) => ['feed', feedId] as const,
+};
+
+export const NOTIFICATION_QUERY_KEY = {
+ LIST: () => ['notifications'] as const,
+};
diff --git a/src/shared/assets/login.svg b/src/shared/assets/login.svg
new file mode 100644
index 0000000..691c38e
--- /dev/null
+++ b/src/shared/assets/login.svg
@@ -0,0 +1,52 @@
+
diff --git a/src/shared/lib/kakao-map/load-kakao-map.ts b/src/shared/lib/kakao-map/load-kakao-map.ts
new file mode 100644
index 0000000..091b695
--- /dev/null
+++ b/src/shared/lib/kakao-map/load-kakao-map.ts
@@ -0,0 +1,56 @@
+let kakaoMapLoaderPromise: Promise | null = null;
+
+export function loadKakaoMap() {
+ if (typeof window === 'undefined') {
+ return Promise.reject(new Error('Window is not available.'));
+ }
+
+ if (window.kakao?.maps) {
+ return new Promise((resolve) => {
+ window.kakao.maps.load(() => resolve(window.kakao));
+ });
+ }
+
+ if (kakaoMapLoaderPromise) {
+ return kakaoMapLoaderPromise;
+ }
+
+ const appKey = import.meta.env.VITE_KAKAO_MAP_JS_KEY;
+
+ if (!appKey) {
+ return Promise.reject(
+ new Error('VITE_KAKAO_MAP_JS_KEY is not configured.'),
+ );
+ }
+
+ kakaoMapLoaderPromise = new Promise((resolve, reject) => {
+ const existingScript = document.querySelector(
+ 'script[data-kakao-map-sdk="true"]',
+ );
+
+ if (existingScript) {
+ existingScript.addEventListener('load', () => {
+ window.kakao.maps.load(() => resolve(window.kakao));
+ });
+ existingScript.addEventListener('error', () => {
+ reject(new Error('Failed to load Kakao Map SDK.'));
+ });
+ return;
+ }
+
+ const script = document.createElement('script');
+ script.src = `https://dapi.kakao.com/v2/maps/sdk.js?autoload=false&libraries=services&appkey=${appKey}`;
+ script.async = true;
+ script.dataset.kakaoMapSdk = 'true';
+ script.onload = () => {
+ window.kakao.maps.load(() => resolve(window.kakao));
+ };
+ script.onerror = () => {
+ reject(new Error('Failed to load Kakao Map SDK.'));
+ };
+
+ document.head.appendChild(script);
+ });
+
+ return kakaoMapLoaderPromise;
+}
diff --git a/src/shared/types/.gitkeep b/src/shared/types/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/src/shared/types/comments/type.ts b/src/shared/types/comments/type.ts
new file mode 100644
index 0000000..6bad85c
--- /dev/null
+++ b/src/shared/types/comments/type.ts
@@ -0,0 +1,7 @@
+import type { paths } from '@shared/types/schema';
+
+export type GetCommentsResponse =
+ paths['/api/feeds/{feedId}/comments']['get']['responses']['200']['content']['*/*'];
+
+export type CreateCommentRequest =
+ paths['/api/feeds/{feedId}/comments']['post']['requestBody']['content']['application/json'];
diff --git a/src/shared/types/controller/type.ts b/src/shared/types/controller/type.ts
new file mode 100644
index 0000000..8791adc
--- /dev/null
+++ b/src/shared/types/controller/type.ts
@@ -0,0 +1,4 @@
+import type { paths } from '@shared/types/schema';
+
+export type GetPresignedUploadResponse =
+ paths['/api/s3/presigned-upload']['get']['responses']['200']['content']['*/*'];
diff --git a/src/shared/types/feeds/type.ts b/src/shared/types/feeds/type.ts
new file mode 100644
index 0000000..f62e05f
--- /dev/null
+++ b/src/shared/types/feeds/type.ts
@@ -0,0 +1,10 @@
+import type { paths } from '@shared/types/schema';
+
+export type GetFeedsResponse =
+ paths['/api/feeds']['get']['responses']['200']['content']['application/json'];
+
+export type CreateFeedRequest =
+ paths['/api/feeds']['post']['requestBody']['content']['application/json'];
+
+export type GetFeedDetailResponse =
+ paths['/api/feeds/{feedId}']['get']['responses']['200']['content']['application/json'];
diff --git a/src/shared/types/notifications/type.ts b/src/shared/types/notifications/type.ts
new file mode 100644
index 0000000..cf21249
--- /dev/null
+++ b/src/shared/types/notifications/type.ts
@@ -0,0 +1,5 @@
+import type { paths } from '@shared/types/schema';
+
+export type GetNotificationsResponse =
+ paths['/api/notifications']['get']['responses']['200']['content']['*/*'];
+
diff --git a/src/shared/types/participations/type.ts b/src/shared/types/participations/type.ts
new file mode 100644
index 0000000..ec0f8bc
--- /dev/null
+++ b/src/shared/types/participations/type.ts
@@ -0,0 +1,4 @@
+import type { paths } from '@shared/types/schema';
+
+export type GetParticipantsResponse =
+ paths['/api/feeds/{feedId}/participations']['get']['responses']['200']['content']['*/*'];
diff --git a/src/shared/types/schema.ts b/src/shared/types/schema.ts
new file mode 100644
index 0000000..638ff7a
--- /dev/null
+++ b/src/shared/types/schema.ts
@@ -0,0 +1,951 @@
+/**
+ * This file was auto-generated by openapi-typescript.
+ * Do not make direct changes to the file.
+ */
+
+export interface paths {
+ "/api/feeds/{feedId}": {
+ parameters: {
+ query?: never;
+ header?: never;
+ path?: never;
+ cookie?: never;
+ };
+ /**
+ * 피드 상세 조회
+ * @description 피드 ID로 상세 정보를 조회합니다.
+ */
+ get: operations["getFeed"];
+ /**
+ * 피드 수정
+ * @description 기존 피드를 수정합니다.
+ */
+ put: operations["updateFeed"];
+ post?: never;
+ /**
+ * 피드 삭제
+ * @description 피드를 삭제합니다.
+ */
+ delete: operations["deleteFeed"];
+ options?: never;
+ head?: never;
+ patch?: never;
+ trace?: never;
+ };
+ "/token/refresh": {
+ parameters: {
+ query?: never;
+ header?: never;
+ path?: never;
+ cookie?: never;
+ };
+ get?: never;
+ put?: never;
+ post: operations["refresh"];
+ delete?: never;
+ options?: never;
+ head?: never;
+ patch?: never;
+ trace?: never;
+ };
+ "/token/logout": {
+ parameters: {
+ query?: never;
+ header?: never;
+ path?: never;
+ cookie?: never;
+ };
+ get?: never;
+ put?: never;
+ post: operations["logout"];
+ delete?: never;
+ options?: never;
+ head?: never;
+ patch?: never;
+ trace?: never;
+ };
+ "/api/members/fcm-token": {
+ parameters: {
+ query?: never;
+ header?: never;
+ path?: never;
+ cookie?: never;
+ };
+ get?: never;
+ put?: never;
+ post: operations["saveFcmToken"];
+ delete: operations["deleteFcmToken"];
+ options?: never;
+ head?: never;
+ patch?: never;
+ trace?: never;
+ };
+ "/api/feeds": {
+ parameters: {
+ query?: never;
+ header?: never;
+ path?: never;
+ cookie?: never;
+ };
+ /**
+ * 피드 목록 조회
+ * @description 조건에 따라 피드 목록을 조회합니다.
+ */
+ get: operations["getFeeds"];
+ put?: never;
+ /**
+ * 피드 생성
+ * @description 새로운 피드를 생성합니다.
+ */
+ post: operations["createFeed"];
+ delete?: never;
+ options?: never;
+ head?: never;
+ patch?: never;
+ trace?: never;
+ };
+ "/api/feeds/{feedId}/participations": {
+ parameters: {
+ query?: never;
+ header?: never;
+ path?: never;
+ cookie?: never;
+ };
+ /**
+ * 참가자 목록 조회
+ * @description 특정 피드의 전체 참가자 목록을 조회합니다.
+ */
+ get: operations["getParticipations"];
+ put?: never;
+ /**
+ * 참가 신청
+ * @description 특정 피드에 참가 신청을 합니다.
+ */
+ post: operations["apply"];
+ delete?: never;
+ options?: never;
+ head?: never;
+ patch?: never;
+ trace?: never;
+ };
+ "/api/feeds/{feedId}/comments": {
+ parameters: {
+ query?: never;
+ header?: never;
+ path?: never;
+ cookie?: never;
+ };
+ /**
+ * 댓글 목록 조회
+ * @description 특정 피드의 댓글 목록을 조회합니다.
+ */
+ get: operations["getComments"];
+ put?: never;
+ /**
+ * 댓글/대댓글 작성
+ * @description 특정 피드에 댓글 또는 대댓글을 작성합니다.
+ */
+ post: operations["createComment"];
+ delete?: never;
+ options?: never;
+ head?: never;
+ patch?: never;
+ trace?: never;
+ };
+ "/api/participations/{id}/reject": {
+ parameters: {
+ query?: never;
+ header?: never;
+ path?: never;
+ cookie?: never;
+ };
+ get?: never;
+ put?: never;
+ post?: never;
+ delete?: never;
+ options?: never;
+ head?: never;
+ /**
+ * 참가 거절
+ * @description 참가 신청을 거절합니다.
+ */
+ patch: operations["reject"];
+ trace?: never;
+ };
+ "/api/participations/{id}/approve": {
+ parameters: {
+ query?: never;
+ header?: never;
+ path?: never;
+ cookie?: never;
+ };
+ get?: never;
+ put?: never;
+ post?: never;
+ delete?: never;
+ options?: never;
+ head?: never;
+ /**
+ * 참가 승인
+ * @description 참가 신청을 승인합니다.
+ */
+ patch: operations["approve"];
+ trace?: never;
+ };
+ "/api/members/nickname": {
+ parameters: {
+ query?: never;
+ header?: never;
+ path?: never;
+ cookie?: never;
+ };
+ get?: never;
+ put?: never;
+ post?: never;
+ delete?: never;
+ options?: never;
+ head?: never;
+ patch: operations["updateNickname"];
+ trace?: never;
+ };
+ "/health": {
+ parameters: {
+ query?: never;
+ header?: never;
+ path?: never;
+ cookie?: never;
+ };
+ get: operations["health"];
+ put?: never;
+ post?: never;
+ delete?: never;
+ options?: never;
+ head?: never;
+ patch?: never;
+ trace?: never;
+ };
+ "/api/s3/presigned-upload": {
+ parameters: {
+ query?: never;
+ header?: never;
+ path?: never;
+ cookie?: never;
+ };
+ get: operations["getPreSignedUploadUrl"];
+ put?: never;
+ post?: never;
+ delete?: never;
+ options?: never;
+ head?: never;
+ patch?: never;
+ trace?: never;
+ };
+ "/api/notifications": {
+ parameters: {
+ query?: never;
+ header?: never;
+ path?: never;
+ cookie?: never;
+ };
+ get: operations["getMyNotifications"];
+ put?: never;
+ post?: never;
+ delete: operations["deleteMyNotifications"];
+ options?: never;
+ head?: never;
+ patch?: never;
+ trace?: never;
+ };
+ "/api/me/participations": {
+ parameters: {
+ query?: never;
+ header?: never;
+ path?: never;
+ cookie?: never;
+ };
+ /**
+ * 내 경기 참가 기록 조회 (커서 기반 무한 스크롤)
+ * @description 로그인한 사용자의 경기 참가 기록을 조회합니다.
+ *
+ * - cursorTime, cursorId가 없으면 최초 조회
+ * - cursorTime, cursorId가 있으면 다음 페이지 조회
+ * - status 파라미터로 참가 상태별 필터링 가능
+ * - 정렬 기준: createdAt DESC, id DESC
+ */
+ get: operations["getMyParticipations"];
+ put?: never;
+ post?: never;
+ delete?: never;
+ options?: never;
+ head?: never;
+ patch?: never;
+ trace?: never;
+ };
+ "/api/feeds/{feedId}/comments/{commentId}": {
+ parameters: {
+ query?: never;
+ header?: never;
+ path?: never;
+ cookie?: never;
+ };
+ get?: never;
+ put?: never;
+ post?: never;
+ /**
+ * 댓글 삭제
+ * @description 댓글 ID를 기준으로 댓글을 삭제합니다.
+ */
+ delete: operations["deleteComment"];
+ options?: never;
+ head?: never;
+ patch?: never;
+ trace?: never;
+ };
+}
+export type webhooks = Record;
+export interface components {
+ schemas: {
+ FeedUpdateRequest: {
+ title?: string;
+ image?: string;
+ description?: string;
+ /** Format: int32 */
+ timer?: number;
+ playGround?: string;
+ /** Format: date-time */
+ playDate?: string;
+ /** Format: int32 */
+ round?: number;
+ address?: string;
+ /** Format: double */
+ latitude?: number;
+ /** Format: double */
+ longitude?: number;
+ allNull?: boolean;
+ };
+ FcmTokenRequest: {
+ fcmToken: string;
+ };
+ FeedCreateRequest: {
+ image?: string;
+ title: string;
+ playGround: string;
+ /** Format: date-time */
+ playDate: string;
+ /** Format: int32 */
+ round?: number;
+ /** Format: int32 */
+ playCount?: number;
+ description?: string;
+ /** Format: int32 */
+ timer?: number;
+ address?: string;
+ /** Format: double */
+ latitude?: number;
+ /** Format: double */
+ longitude?: number;
+ };
+ CommentCreateRequest: {
+ description: string;
+ /** Format: int64 */
+ parentId?: number;
+ };
+ NicknameUpdateRequest: {
+ nickname: string;
+ };
+ NotificationResponse: {
+ /** Format: int64 */
+ notificationId?: number;
+ message?: string;
+ read?: boolean;
+ /** Format: date-time */
+ createdAt?: string;
+ /** @enum {string} */
+ targetType?: "PARTICIPATION_APPROVED" | "PARTICIPATION_REJECTED" | "GAME_STARTED" | "GAME_FINISHED";
+ /** Format: int64 */
+ targetId?: number;
+ };
+ MyParticipationResponse: {
+ /** Format: int64 */
+ participationId?: number;
+ /** Format: int64 */
+ feedId?: number;
+ feedTitle?: string;
+ playGround?: string;
+ /** Format: date-time */
+ playDate?: string;
+ /** @enum {string} */
+ status?: "PENDING" | "APPROVED" | "REJECTED" | "CANCELED";
+ };
+ FeedCursorResponse: {
+ feeds?: components["schemas"]["FeedResponse"][];
+ /** Format: int64 */
+ nextCursorId?: number;
+ /** Format: date-time */
+ nextCursorCreatedAt?: string;
+ hasNext?: boolean;
+ };
+ FeedResponse: {
+ /** Format: int64 */
+ feedId?: number;
+ title?: string;
+ image?: string;
+ playGround?: string;
+ /** Format: date-time */
+ playDate?: string;
+ /** Format: int32 */
+ playCount?: number;
+ /** Format: date-time */
+ createdAt?: string;
+ };
+ FeedDetailResponse: {
+ /** Format: int64 */
+ feedId?: number;
+ image?: string;
+ title?: string;
+ playGround?: string;
+ /** Format: date-time */
+ playDate?: string;
+ /** Format: int32 */
+ round?: number;
+ /** Format: int32 */
+ playCount?: number;
+ description?: string;
+ /** Format: int32 */
+ timer?: number;
+ writer?: components["schemas"]["WriterResponse"];
+ };
+ WriterResponse: {
+ /** Format: int64 */
+ writerId?: number;
+ nickname?: string;
+ };
+ ParticipationResponse: {
+ /** Format: int64 */
+ participationId?: number;
+ /** Format: int64 */
+ applicantId?: number;
+ applicantNickname?: string;
+ /** @enum {string} */
+ status?: "PENDING" | "APPROVED" | "REJECTED" | "CANCELED";
+ /** Format: date-time */
+ appliedAt?: string;
+ };
+ CommentResponse: {
+ /** Format: int64 */
+ commentId?: number;
+ description?: string;
+ /** Format: int64 */
+ parentId?: number;
+ /** Format: int32 */
+ depth?: number;
+ commentType?: string;
+ /** Format: int64 */
+ memberId?: number;
+ nickname?: string;
+ /** Format: date-time */
+ createdAt?: string;
+ };
+ };
+ responses: never;
+ parameters: never;
+ requestBodies: never;
+ headers: never;
+ pathItems: never;
+}
+export type $defs = Record;
+export interface operations {
+ getFeed: {
+ parameters: {
+ query?: never;
+ header?: never;
+ path: {
+ /** @description 피드 ID */
+ feedId: number;
+ };
+ cookie?: never;
+ };
+ requestBody?: never;
+ responses: {
+ /** @description 피드 상세 조회 성공 */
+ 200: {
+ headers: {
+ [name: string]: unknown;
+ };
+ content: {
+ "application/json": components["schemas"]["FeedDetailResponse"];
+ };
+ };
+ };
+ };
+ updateFeed: {
+ parameters: {
+ query?: never;
+ header?: never;
+ path: {
+ /** @description 피드 ID */
+ feedId: number;
+ };
+ cookie?: never;
+ };
+ requestBody: {
+ content: {
+ "application/json": components["schemas"]["FeedUpdateRequest"];
+ };
+ };
+ responses: {
+ /** @description 피드 수정 성공 */
+ 200: {
+ headers: {
+ [name: string]: unknown;
+ };
+ content?: never;
+ };
+ };
+ };
+ deleteFeed: {
+ parameters: {
+ query?: never;
+ header?: never;
+ path: {
+ /** @description 피드 ID */
+ feedId: number;
+ };
+ cookie?: never;
+ };
+ requestBody?: never;
+ responses: {
+ /** @description 피드 삭제 성공 */
+ 200: {
+ headers: {
+ [name: string]: unknown;
+ };
+ content?: never;
+ };
+ };
+ };
+ refresh: {
+ parameters: {
+ query?: never;
+ header?: never;
+ path?: never;
+ cookie?: never;
+ };
+ requestBody?: never;
+ responses: {
+ /** @description OK */
+ 200: {
+ headers: {
+ [name: string]: unknown;
+ };
+ content: {
+ "*/*": Record;
+ };
+ };
+ };
+ };
+ logout: {
+ parameters: {
+ query?: never;
+ header?: never;
+ path?: never;
+ cookie?: never;
+ };
+ requestBody?: never;
+ responses: {
+ /** @description OK */
+ 200: {
+ headers: {
+ [name: string]: unknown;
+ };
+ content?: never;
+ };
+ };
+ };
+ saveFcmToken: {
+ parameters: {
+ query?: never;
+ header?: never;
+ path?: never;
+ cookie?: never;
+ };
+ requestBody: {
+ content: {
+ "application/json": components["schemas"]["FcmTokenRequest"];
+ };
+ };
+ responses: {
+ /** @description OK */
+ 200: {
+ headers: {
+ [name: string]: unknown;
+ };
+ content?: never;
+ };
+ };
+ };
+ deleteFcmToken: {
+ parameters: {
+ query?: never;
+ header?: never;
+ path?: never;
+ cookie?: never;
+ };
+ requestBody?: never;
+ responses: {
+ /** @description OK */
+ 200: {
+ headers: {
+ [name: string]: unknown;
+ };
+ content?: never;
+ };
+ };
+ };
+ getFeeds: {
+ parameters: {
+ query?: {
+ /** @description 커서 ID */
+ cursorId?: number;
+ /** @description 커서 생성 시간 */
+ cursorCreatedAt?: string;
+ /** @description 정렬 기준 (LATEST / DISTANCE) */
+ sort?: string;
+ /** @description 위도 */
+ latitude?: number;
+ /** @description 경도 */
+ longitude?: number;
+ /** @description 조회 개수 */
+ size?: number;
+ };
+ header?: never;
+ path?: never;
+ cookie?: never;
+ };
+ requestBody?: never;
+ responses: {
+ /** @description 피드 목록 조회 성공 */
+ 200: {
+ headers: {
+ [name: string]: unknown;
+ };
+ content: {
+ "application/json": components["schemas"]["FeedCursorResponse"];
+ };
+ };
+ };
+ };
+ createFeed: {
+ parameters: {
+ query?: never;
+ header?: never;
+ path?: never;
+ cookie?: never;
+ };
+ requestBody: {
+ content: {
+ "application/json": components["schemas"]["FeedCreateRequest"];
+ };
+ };
+ responses: {
+ /** @description 피드 생성 성공 */
+ 200: {
+ headers: {
+ [name: string]: unknown;
+ };
+ content: {
+ "*/*": number;
+ };
+ };
+ };
+ };
+ getParticipations: {
+ parameters: {
+ query?: never;
+ header?: never;
+ path: {
+ /** @description 피드 ID */
+ feedId: number;
+ };
+ cookie?: never;
+ };
+ requestBody?: never;
+ responses: {
+ /** @description 참가자 목록 조회 성공 */
+ 200: {
+ headers: {
+ [name: string]: unknown;
+ };
+ content: {
+ "*/*": components["schemas"]["ParticipationResponse"][];
+ };
+ };
+ };
+ };
+ apply: {
+ parameters: {
+ query?: never;
+ header?: never;
+ path: {
+ /** @description 피드 ID */
+ feedId: number;
+ };
+ cookie?: never;
+ };
+ requestBody?: never;
+ responses: {
+ /** @description 참가 신청 성공 */
+ 200: {
+ headers: {
+ [name: string]: unknown;
+ };
+ content?: never;
+ };
+ };
+ };
+ getComments: {
+ parameters: {
+ query?: never;
+ header?: never;
+ path: {
+ /** @description 피드 ID */
+ feedId: number;
+ };
+ cookie?: never;
+ };
+ requestBody?: never;
+ responses: {
+ /** @description 댓글 목록 조회 성공 */
+ 200: {
+ headers: {
+ [name: string]: unknown;
+ };
+ content: {
+ "*/*": components["schemas"]["CommentResponse"][];
+ };
+ };
+ };
+ };
+ createComment: {
+ parameters: {
+ query?: never;
+ header?: never;
+ path: {
+ /** @description 피드 ID */
+ feedId: number;
+ };
+ cookie?: never;
+ };
+ requestBody: {
+ content: {
+ "application/json": components["schemas"]["CommentCreateRequest"];
+ };
+ };
+ responses: {
+ /** @description 댓글 작성 성공 */
+ 200: {
+ headers: {
+ [name: string]: unknown;
+ };
+ content?: never;
+ };
+ };
+ };
+ reject: {
+ parameters: {
+ query?: never;
+ header?: never;
+ path: {
+ /** @description 참가 ID */
+ id: number;
+ };
+ cookie?: never;
+ };
+ requestBody?: never;
+ responses: {
+ /** @description 참가 거절 성공 */
+ 200: {
+ headers: {
+ [name: string]: unknown;
+ };
+ content?: never;
+ };
+ };
+ };
+ approve: {
+ parameters: {
+ query?: never;
+ header?: never;
+ path: {
+ /** @description 참가 ID */
+ id: number;
+ };
+ cookie?: never;
+ };
+ requestBody?: never;
+ responses: {
+ /** @description 참가 승인 성공 */
+ 200: {
+ headers: {
+ [name: string]: unknown;
+ };
+ content?: never;
+ };
+ };
+ };
+ updateNickname: {
+ parameters: {
+ query?: never;
+ header?: never;
+ path?: never;
+ cookie?: never;
+ };
+ requestBody: {
+ content: {
+ "application/json": components["schemas"]["NicknameUpdateRequest"];
+ };
+ };
+ responses: {
+ /** @description OK */
+ 200: {
+ headers: {
+ [name: string]: unknown;
+ };
+ content?: never;
+ };
+ };
+ };
+ health: {
+ parameters: {
+ query?: never;
+ header?: never;
+ path?: never;
+ cookie?: never;
+ };
+ requestBody?: never;
+ responses: {
+ /** @description OK */
+ 200: {
+ headers: {
+ [name: string]: unknown;
+ };
+ content: {
+ "*/*": string;
+ };
+ };
+ };
+ };
+ getPreSignedUploadUrl: {
+ parameters: {
+ query: {
+ type: string;
+ contentType: string;
+ };
+ header?: never;
+ path?: never;
+ cookie?: never;
+ };
+ requestBody?: never;
+ responses: {
+ /** @description OK */
+ 200: {
+ headers: {
+ [name: string]: unknown;
+ };
+ content: {
+ "*/*": {
+ [key: string]: string;
+ };
+ };
+ };
+ };
+ };
+ getMyNotifications: {
+ parameters: {
+ query?: never;
+ header?: never;
+ path?: never;
+ cookie?: never;
+ };
+ requestBody?: never;
+ responses: {
+ /** @description OK */
+ 200: {
+ headers: {
+ [name: string]: unknown;
+ };
+ content: {
+ "*/*": components["schemas"]["NotificationResponse"][];
+ };
+ };
+ };
+ };
+ deleteMyNotifications: {
+ parameters: {
+ query?: never;
+ header?: never;
+ path?: never;
+ cookie?: never;
+ };
+ requestBody?: never;
+ responses: {
+ /** @description OK */
+ 200: {
+ headers: {
+ [name: string]: unknown;
+ };
+ content?: never;
+ };
+ };
+ };
+ getMyParticipations: {
+ parameters: {
+ query?: {
+ /** @description 참가 상태 (PENDING, APPROVED, REJECTED) */
+ status?: string;
+ /** @description 커서 기준 시간 (마지막 요소의 createdAt) */
+ cursorTime?: string;
+ /** @description 커서 기준 ID (마지막 요소의 id) */
+ cursorId?: number;
+ /** @description 조회 개수 (기본값 10) */
+ size?: number;
+ };
+ header?: never;
+ path?: never;
+ cookie?: never;
+ };
+ requestBody?: never;
+ responses: {
+ /** @description 내 경기 참가 기록 조회 성공 */
+ 200: {
+ headers: {
+ [name: string]: unknown;
+ };
+ content: {
+ "*/*": components["schemas"]["MyParticipationResponse"][];
+ };
+ };
+ };
+ };
+ deleteComment: {
+ parameters: {
+ query?: never;
+ header?: never;
+ path: {
+ /** @description 댓글 ID */
+ commentId: number;
+ };
+ cookie?: never;
+ };
+ requestBody?: never;
+ responses: {
+ /** @description 댓글 삭제 성공 */
+ 204: {
+ headers: {
+ [name: string]: unknown;
+ };
+ content?: never;
+ };
+ };
+ };
+}
diff --git a/src/shared/utils/auth.ts b/src/shared/utils/auth.ts
new file mode 100644
index 0000000..98c4882
--- /dev/null
+++ b/src/shared/utils/auth.ts
@@ -0,0 +1,9 @@
+import { jwtDecode } from 'jwt-decode';
+
+export const getMyMemberId = () => {
+ const token = localStorage.getItem('accessToken');
+ if (!token) return null;
+
+ const decoded: any = jwtDecode(token);
+ return decoded.memberId;
+};
diff --git a/src/shared/utils/date.ts b/src/shared/utils/date.ts
index 049553b..9def209 100644
--- a/src/shared/utils/date.ts
+++ b/src/shared/utils/date.ts
@@ -15,3 +15,35 @@ export function generateFutureDates(days = 30) {
return result;
}
+
+export const formatDate = (date: string) =>
+ new Date(date).toLocaleString('ko-KR', {
+ year: 'numeric',
+ month: '2-digit',
+ day: '2-digit',
+ hour: '2-digit',
+ minute: '2-digit',
+ hour12: true,
+ });
+
+export const formatRelativeTime = (date: string) => {
+ const diffMs = new Date(date).getTime() - Date.now();
+ const rtf = new Intl.RelativeTimeFormat('ko', { numeric: 'auto' });
+ const diffMinutes = Math.round(diffMs / (1000 * 60));
+
+ if (Math.abs(diffMinutes) < 60) {
+ return rtf.format(diffMinutes, 'minute');
+ }
+
+ const diffHours = Math.round(diffMinutes / 60);
+ if (Math.abs(diffHours) < 24) {
+ return rtf.format(diffHours, 'hour');
+ }
+
+ const diffDays = Math.round(diffHours / 24);
+ if (Math.abs(diffDays) < 7) {
+ return rtf.format(diffDays, 'day');
+ }
+
+ return formatDate(date);
+};
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
index 5be55a6..e28cfdd 100644
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -1,5 +1,19 @@
///
+interface ImportMetaEnv {
+ readonly VITE_BASE_URL: string;
+ readonly VITE_KAKAO_LOGIN_URL: string;
+ readonly VITE_KAKAO_MAP_JS_KEY: string;
+}
+
+interface ImportMeta {
+ readonly env: ImportMetaEnv;
+}
+
+interface Window {
+ kakao?: any;
+}
+
declare module '*.svg?react' {
import * as React from 'react';
const ReactComponent: React.FC>;
diff --git a/src/widgets/create/add-image.tsx b/src/widgets/create/add-image.tsx
index 47eff17..76a30d3 100644
--- a/src/widgets/create/add-image.tsx
+++ b/src/widgets/create/add-image.tsx
@@ -5,9 +5,10 @@ import XIcon from '@shared/assets/icon/x.svg?react';
interface AddImageProps {
max?: number; // 최대 업로드 개수 (기본 5)
disabled?: boolean;
+ onChange?: (file: File) => void;
}
-export function AddImage({ max = 5, disabled }: AddImageProps) {
+export function AddImage({ max = 5, disabled, onChange }: AddImageProps) {
const [images, setImages] = useState([]);
const handleFileChange = (e: React.ChangeEvent) => {
@@ -18,6 +19,9 @@ export function AddImage({ max = 5, disabled }: AddImageProps) {
const url = URL.createObjectURL(file);
setImages((prev) => [...prev, url]);
+
+ onChange?.(file); // 🔥 부모로 file 전달
+
e.target.value = '';
};
diff --git a/src/widgets/create/modal/contents/modal-location-search.tsx b/src/widgets/create/modal/contents/modal-location-search.tsx
index 9f16c86..fb663bb 100644
--- a/src/widgets/create/modal/contents/modal-location-search.tsx
+++ b/src/widgets/create/modal/contents/modal-location-search.tsx
@@ -1,10 +1,9 @@
-import { FloatingActionButton } from '@shared/ui/floatingActionButton';
-import Input from '@shared/ui/input';
-import LocationIcon from '@shared/assets/icon/material-symbols_my-location-outline-rounded.svg?react';
+import { LocationPicker } from '@features/location-picker/ui/location-picker';
+import type { LocationSelection } from '@features/location-picker/types';
interface ModalLocationSearchProps {
- value: string;
- onChange: (value: string) => void;
+ value: LocationSelection | null;
+ onChange: (value: LocationSelection) => void;
}
export function ModalLocationSearch({
@@ -12,17 +11,14 @@ export function ModalLocationSearch({
onChange,
}: ModalLocationSearchProps) {
return (
-
- onChange(e.target.value)}
- placeholder="예) 역삼동"
- />
- }
- />
-
+
);
}
diff --git a/src/widgets/main/bottom-sheet/bottom-sheet.tsx b/src/widgets/main/bottom-sheet/bottom-sheet.tsx
index 644368f..c59a874 100644
--- a/src/widgets/main/bottom-sheet/bottom-sheet.tsx
+++ b/src/widgets/main/bottom-sheet/bottom-sheet.tsx
@@ -2,7 +2,7 @@ import {
BottomSheetContext,
useBottomSheetContext,
} from '@shared/hooks/use-bottom-sheet-context';
-import type { ReactNode } from 'react';
+import { useEffect, type ReactNode } from 'react';
import { cva } from 'class-variance-authority';
import { cn } from '@shared/utils/cn';
@@ -18,11 +18,25 @@ function Overlay() {
return ;
}
+function BodyScrollLock() {
+ useEffect(() => {
+ const originalStyle = window.getComputedStyle(document.body).overflow;
+ document.body.style.overflow = 'hidden';
+
+ return () => {
+ document.body.style.overflow = originalStyle;
+ };
+ }, []);
+
+ return null;
+}
+
function Root({ isOpen, onClose, children }: BottomSheetProps) {
if (!isOpen) return null;
return (
+
{children}
);
diff --git a/src/widgets/main/bottom-sheet/contents/bottom-sheet-location-search.tsx b/src/widgets/main/bottom-sheet/contents/bottom-sheet-location-search.tsx
index e089769..399865a 100644
--- a/src/widgets/main/bottom-sheet/contents/bottom-sheet-location-search.tsx
+++ b/src/widgets/main/bottom-sheet/contents/bottom-sheet-location-search.tsx
@@ -1,28 +1,14 @@
-import { FloatingActionButton } from '@shared/ui/floatingActionButton';
-import Input from '@shared/ui/input';
-import LocationIcon from '@shared/assets/icon/material-symbols_my-location-outline-rounded.svg?react';
+import { LocationPicker } from '@features/location-picker/ui/location-picker';
+import type { LocationSelection } from '@features/location-picker/types';
interface BottomSheetLocationSearchProps {
- value: string;
- onChange: (value: string) => void;
+ value: LocationSelection | null;
+ onChange: (value: LocationSelection) => void;
}
export function BottomSheetLocationSearch({
value,
onChange,
}: BottomSheetLocationSearchProps) {
- return (
-
- onChange(e.target.value)}
- placeholder="동을 입력해주세요. 예) 역삼동"
- />
- }
- />
-
- );
+ return ;
}
diff --git a/src/widgets/main/card/card.tsx b/src/widgets/main/card/card.tsx
index 808c87a..1d8d704 100644
--- a/src/widgets/main/card/card.tsx
+++ b/src/widgets/main/card/card.tsx
@@ -23,8 +23,12 @@ export function Card({
onClick={onClick}
className="flex flex-low gap-[1.6rem] w-[32.7rem] h-[14.8rem] pb-[2rem] border-b border-gray-100"
>
-
-
+
+
diff --git a/src/widgets/main/notification/notification-card.tsx b/src/widgets/main/notification/notification-card.tsx
index 8f9ade6..30f2942 100644
--- a/src/widgets/main/notification/notification-card.tsx
+++ b/src/widgets/main/notification/notification-card.tsx
@@ -1,5 +1,6 @@
import ChevronRightIcon from '@shared/assets/icon/chevron-right.svg?react';
export interface NotificationCardProps {
+ id: number;
value: string;
time: string;
}
diff --git a/src/widgets/main/notification/notification-popover.tsx b/src/widgets/main/notification/notification-popover.tsx
new file mode 100644
index 0000000..7c11862
--- /dev/null
+++ b/src/widgets/main/notification/notification-popover.tsx
@@ -0,0 +1,60 @@
+import {
+ NOTIFICATION_MUTATION_OPTIONS,
+ NOTIFICATION_QUERY_OPTIONS,
+} from '@shared/api/domain/notifications/query';
+import { formatRelativeTime } from '@shared/utils/date';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { NotificationPanel } from '@widgets/main/notification/notificationPanel';
+
+interface NotificationPopoverProps {
+ isOpen: boolean;
+ onClose: () => void;
+}
+
+export function NotificationPopover({
+ isOpen,
+ onClose,
+}: NotificationPopoverProps) {
+ const queryClient = useQueryClient();
+ const { data: notifications = [] } = useQuery({
+ ...NOTIFICATION_QUERY_OPTIONS.LIST(),
+ enabled: isOpen,
+ });
+ const { mutate: deleteAllNotifications, isPending } = useMutation({
+ ...NOTIFICATION_MUTATION_OPTIONS.DELETE_ALL(),
+ onSuccess: () => {
+ queryClient.setQueryData(
+ NOTIFICATION_QUERY_OPTIONS.LIST().queryKey,
+ [],
+ );
+ },
+ });
+
+ if (!isOpen) {
+ return null;
+ }
+
+ const mappedNotifications = notifications.map((notification) => ({
+ id: notification.notificationId ?? 0,
+ value: notification.message ?? '',
+ time: notification.createdAt
+ ? formatRelativeTime(notification.createdAt)
+ : '',
+ }));
+
+ return (
+ <>
+
+
e.stopPropagation()}
+ >
+ deleteAllNotifications()}
+ />
+
+
+ );
+}
diff --git a/src/widgets/main/notification/notificationPanel.tsx b/src/widgets/main/notification/notificationPanel.tsx
index 263dd69..79ea9f2 100644
--- a/src/widgets/main/notification/notificationPanel.tsx
+++ b/src/widgets/main/notification/notificationPanel.tsx
@@ -5,23 +5,44 @@ import {
interface NotificationPanelProps {
notifications: NotificationCardProps[];
+ isDeleting?: boolean;
+ onDeleteAll?: () => void;
}
-export function NotificationPanel({ notifications }: NotificationPanelProps) {
+export function NotificationPanel({
+ notifications,
+ isDeleting = false,
+ onDeleteAll,
+}: NotificationPanelProps) {
return (
알림 내역
-
- {notifications.map((item, index) => (
-
- ))}
+ {notifications.length === 0 ? (
+
+ 도착한 알림이 없어요.
+
+ ) : (
+ notifications.map((item) => (
+
+ ))
+ )}
);
diff --git a/src/widgets/postDetail/comment/comment-item.tsx b/src/widgets/postDetail/comment/comment-item.tsx
index 2d093bd..43b0fa1 100644
--- a/src/widgets/postDetail/comment/comment-item.tsx
+++ b/src/widgets/postDetail/comment/comment-item.tsx
@@ -1,69 +1,95 @@
import MessageIcon from '@shared/assets/icon/message-square.svg?react';
import { Chip, type ApprovalStatus } from '@widgets/postDetail/chip/chip';
+
export interface CommentItemProps {
- id: number;
- author: string;
- time: string;
- value: string;
+ commentId?: number;
+ nickname?: string;
+ description?: string;
parentId?: number | null;
- type?: 'user' | 'system';
+ commentType?: string;
+ depth?: number;
+ memberId?: number;
+ participationId?: number;
+ createdAt?: string;
+ children?: CommentItemProps[];
+}
- status?: ApprovalStatus;
- applicantId?: number;
+export interface Participant {
+ participationId?: number;
+ status?: 'PENDING' | 'APPROVED' | 'REJECTED' | 'CANCELED';
}
interface CommentItemUIProps extends CommentItemProps {
isOwner?: boolean;
+ participants?: Participant[];
+ onReply?: (commentId: number, nickname?: string) => void;
onChangeApproval?: (
- commentId: number,
+ participationId: number,
status: Exclude
,
) => void;
}
export function CommentItem({
- author,
- time,
- value,
- type = 'user',
- status = 'pending',
+ nickname,
+ description,
+ commentType = 'USER',
isOwner = false,
+ depth,
onChangeApproval,
- id,
+ onReply,
+ commentId,
+ children,
+ participationId,
+ participants,
}: CommentItemUIProps) {
- const isSystem = type === 'system';
+ const isSystem = commentType !== 'USER';
+
+ const participation = participants?.find(
+ (p) => p.participationId === participationId,
+ );
+
+ let computedStatus: ApprovalStatus = 'pending';
+
+ if (participation?.status === 'APPROVED') computedStatus = 'approved';
+ if (participation?.status === 'REJECTED') computedStatus = 'rejected';
return (
![]()
- {/* 상단 라인: 작성자/시간 + (system이면 chip 우측) */}
- {author}
- {time}
+ {nickname}
{isSystem &&
(isOwner ? (
onChangeApproval?.(id, next)}
+ status={computedStatus}
+ onChange={(next) => {
+ if (!participationId) return;
+
+ console.log('🔥 participationId:', participationId);
+ onChangeApproval?.(participationId, next);
+ }}
/>
) : (
-
+
))}
- {/* 본문 */}
-
{value}
+
{description}
- {!isSystem && (
-
diff --git a/src/widgets/postDetail/comment/comment.tsx b/src/widgets/postDetail/comment/comment.tsx
index c873bf1..de9bfb2 100644
--- a/src/widgets/postDetail/comment/comment.tsx
+++ b/src/widgets/postDetail/comment/comment.tsx
@@ -1,40 +1,75 @@
+import type { ApprovalStatus } from '@widgets/postDetail/chip/chip';
import {
CommentItem,
type CommentItemProps,
+ type Participant,
} from '@widgets/postDetail/comment/comment-item';
interface CommentProps {
comments: CommentItemProps[];
+ participants?: Participant[];
+ isOwner?: boolean;
+ onReply?: (commentId: number, nickname?: string) => void; // 추가
+ onChangeApproval?: (
+ participationId: number,
+ status: Exclude
,
+ ) => void;
}
-export function Comment({ comments }: CommentProps) {
+export function Comment({
+ comments,
+ participants,
+ isOwner,
+ onReply,
+ onChangeApproval,
+}: CommentProps) {
const systemRoot = comments.filter(
- (c) => c.parentId === null && c.type === 'system',
+ (c) => c.parentId === null && c.commentType === 'APPLY',
);
const userRoot = comments.filter(
- (c) => c.parentId === null && c.type !== 'system',
+ (c) => c.parentId === null && c.commentType !== 'APPLY',
);
return (
댓글 {comments.length}
+
{systemRoot.map((comment) => (
-
+
))}
{userRoot.map((comment) => (
-
-
+
+
-
- {comments
- .filter((c) => c.parentId === comment.id)
- .map((reply) => (
-
+ {comment.children && comment.children.length > 0 && (
+
+ {comment.children.map((reply) => (
+
))}
-
+
+ )}
))}
diff --git a/src/widgets/postDetail/detail-info.tsx b/src/widgets/postDetail/detail-info.tsx
index 62f0900..42e09b3 100644
--- a/src/widgets/postDetail/detail-info.tsx
+++ b/src/widgets/postDetail/detail-info.tsx
@@ -1,21 +1,37 @@
import { CardInfo } from '@widgets/main/card/card-info';
+import { formatDate } from '@shared/utils/date';
-export function DetailInfo({}) {
+interface DetailInfoProps {
+ playDate?: string;
+ playCount?: number;
+ location?: string;
+ writerNickname?: string;
+}
+
+export function DetailInfo({
+ playDate,
+ playCount,
+ location,
+ writerNickname,
+}: DetailInfoProps) {
return (
-
+
![]()
- {'게시글 작성자'}
- {'게시글 시간'}
+ {writerNickname}
+
+ {playDate ? formatDate(playDate) : ''}
+
+
+