{post.title}
- {post.author.name}
+ {post.author.nickname}
•
{post.createdAt}
@@ -33,22 +46,49 @@ export function PostContent({ post, onLikeClick }: PostContentProps) {
{post.content}
-
-
+
diff --git a/src/pages/community/index.tsx b/src/pages/community/index.tsx
new file mode 100644
index 0000000..ed40976
--- /dev/null
+++ b/src/pages/community/index.tsx
@@ -0,0 +1,391 @@
+import { useParams, useNavigate } from "react-router-dom";
+import { useState } from "react";
+import Header from "@/components/layout/Header";
+import {
+ ArrowLeft,
+ Bookmark,
+ Heart,
+ MessageCircle,
+ Users,
+ Trash2,
+} from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { Separator } from "@/components/ui/separator";
+import { Button } from "@/components/ui/button";
+import {
+ AlertDialog,
+ AlertDialogAction,
+ AlertDialogCancel,
+ AlertDialogContent,
+ AlertDialogDescription,
+ AlertDialogFooter,
+ AlertDialogHeader,
+ AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import {
+ usePostDetail,
+ useComments,
+ useToggleLike,
+ useToggleBookmark,
+ useCreateComment,
+ useApplicants,
+ useToggleApply,
+ useDeletePost,
+ useUpdateComment,
+ useDeleteComment,
+} from "@/hooks/queries/usePosts";
+import { CommentForm } from "./__components/CommentForm";
+import { CommentSection } from "./__components/CommentSection";
+import { ApplicantSection } from "./__components/ApplicantSection";
+
+import { formatPostDetailDate } from "@/lib/date";
+
+export function PostDetailPage() {
+ const { postId } = useParams<{ postId: string }>();
+ const navigate = useNavigate();
+ const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+ const [showCommentDeleteDialog, setShowCommentDeleteDialog] = useState(false);
+ const [commentToDelete, setCommentToDelete] = useState
+
+
+
+
+
+
+ 수정
+
+
+ 삭제
+
+
+
+ )}
+
-
- {post.likeCount}
-
+
+ {post.nLikes}
+
+
+
+ {post.editable && (
+ 유효하지 않은 게시글 ID입니다.
;
+ }
+
+ const { data: post, isLoading, isError, error } = usePostDetail(postId);
+ const {
+ data: comments = [],
+ isLoading: isCommentsLoading,
+ isError: isCommentsError,
+ } = useComments(postId);
+
+ const {
+ data: applicants = [],
+ isLoading: isApplicantsLoading,
+ isError: isApplicantsError,
+ } = useApplicants(postId);
+
+ const toggleLikeMutation = useToggleLike();
+ const toggleBookmarkMutation = useToggleBookmark();
+ const createCommentMutation = useCreateComment();
+ const toggleApplyMutation = useToggleApply();
+ const deletePostMutation = useDeletePost();
+ const updateCommentMutation = useUpdateComment();
+ const deleteCommentMutation = useDeleteComment();
+
+ if (isLoading) {
+ return 로딩 중...
;
+ }
+ if (isError) {
+ return 에러 발생: {error?.message}
;
+ }
+ if (!post) {
+ return 게시글이 없습니다.
;
+ }
+
+ const handleBackClick = () => {
+ navigate(-1);
+ };
+
+ const handleLikeClick = async () => {
+ if (!post) return;
+ try {
+ await toggleLikeMutation.mutateAsync(post.id);
+ } catch (error) {
+ console.error("좋아요 처리 실패:", error);
+ }
+ };
+
+ const handleBookmarkClick = async () => {
+ if (!post) return;
+ try {
+ await toggleBookmarkMutation.mutateAsync(post.id);
+ } catch (error) {
+ console.error("북마크 처리 실패:", error);
+ }
+ };
+
+ const handleCommentSubmit = async (content: string) => {
+ if (!postId) return;
+ try {
+ await createCommentMutation.mutateAsync({ postId, content });
+ } catch (error) {
+ console.error("댓글 작성 실패:", error);
+ alert("댓글 작성에 실패했습니다. 다시 시도해주세요.");
+ }
+ };
+
+ const handleApplyClick = async () => {
+ if (!postId) return;
+ try {
+ await toggleApplyMutation.mutateAsync(parseInt(postId));
+ } catch (error) {
+ console.error("지원 처리 실패:", error);
+ alert("지원 처리에 실패했습니다. 다시 시도해주세요.");
+ }
+ };
+
+ const handleDeletePost = async () => {
+ if (!post) return;
+ try {
+ await deletePostMutation.mutateAsync(post.id);
+ setShowDeleteDialog(false);
+ navigate(-1);
+ } catch (error) {
+ console.error("게시글 삭제 실패:", error);
+ alert("게시글 삭제에 실패했습니다. 다시 시도해주세요.");
+ }
+ };
+
+ const handleEditComment = (commentId: number) => {
+ setEditingCommentId(commentId);
+ };
+
+ const handleCommentEditSubmit = async (content: string) => {
+ if (!editingCommentId) return;
+ try {
+ await updateCommentMutation.mutateAsync({
+ commentId: editingCommentId,
+ content,
+ });
+ setEditingCommentId(null);
+ } catch (error) {
+ console.error("댓글 수정 실패:", error);
+ alert("댓글 수정에 실패했습니다. 다시 시도해주세요.");
+ }
+ };
+
+ const handleCommentEditCancel = () => {
+ setEditingCommentId(null);
+ };
+
+ const handleDeleteComment = async () => {
+ if (!commentToDelete) return;
+ try {
+ await deleteCommentMutation.mutateAsync(commentToDelete);
+ setShowCommentDeleteDialog(false);
+ setCommentToDelete(null);
+ } catch (error) {
+ console.error("댓글 삭제 실패:", error);
+ alert("댓글 삭제에 실패했습니다. 다시 시도해주세요.");
+ }
+ };
+
+ const openCommentDeleteDialog = (commentId: number) => {
+ setCommentToDelete(commentId);
+ setShowCommentDeleteDialog(true);
+ };
+
+ return (
+
+
+
+
+ 게시글 삭제
+
+ 이 게시글을 삭제하시겠습니까?
이 작업은 되돌릴 수 + 없습니다. +
+
+
+
+ 취소
+
+
+ 삭제
+
+
+
+
+
+ {/* 댓글 삭제 확인 다이얼로그 */}
+
+
+
+ 댓글 삭제
+
+ 이 댓글을 삭제하시겠습니까?
이 작업은 되돌릴 수 없습니다. +
+
+
+
+ 취소
+
+
+ 삭제
+
+
+
+
+
+ );
+}
diff --git a/src/pages/developer/_components/Links.tsx b/src/pages/developer/_components/Links.tsx
new file mode 100644
index 0000000..e15216b
--- /dev/null
+++ b/src/pages/developer/_components/Links.tsx
@@ -0,0 +1,66 @@
+import { Github, Mail, Linkedin, Globe } from "lucide-react";
+import type { GetProfileResponse } from "@/types/my.types";
+
+interface SocialLinksProps {
+ userProfile?: GetProfileResponse;
+}
+
+const SocialLinks = ({ userProfile }: SocialLinksProps) => {
+ if (!userProfile) {
+ return
+
+
+
+
+ {/* 자유, 질문 게시판만 댓글 작성 가능 */}
+ {!post.board.isRecruit && (
+
+
+ {post.board.value}
+
+
+
+ {post.title}
+
+ {post.author.nickname}
+ •
+ {formatPostDetailDate(post.createdAt)}
+
+
+
+
+ {post.content ? (
+ <>{post.content}
+ ) : (
+
+
+ 게시글 내용이 없습니다.
+ )} +
+
+
+
+ {/* 일반 게시판만 댓글 개수 표시 */}
+ {!post.board.isRecruit && (
+
+
+
+ )}
+ {/* 모집 게시판은 지원자 개수 표시 */}
+ {post.board.isRecruit && (
+
+
+ )}
+
+ 댓글을 불러오는 중...
+
+ ) : isCommentsError ? (
+
+ 댓글을 불러오는 데 실패했습니다.
+
+ ) : (
+
+ 지원자 목록을 불러오는 중...
+
+ ) : isApplicantsError ? (
+
+ 지원자 목록을 불러오는 데 실패했습니다.
+
+ ) : (
+
+ c.id === editingCommentId)?.content || ""
+ : ""
+ }
+ onCancel={handleCommentEditCancel}
+ />
+
+ )}
+
+ {/* 모각코, 프로젝트 게시판은 지원 버튼 표시 */}
+ {post.board.isRecruit && (
+
+
+
+ )}
+
+ 이 작업은 되돌릴 수 + 없습니다. +
이 작업은 되돌릴 수 없습니다. +
소셜 링크 정보가 없습니다.
;
+ }
+
+ return (
+
+ );
+};
+
+export default SocialLinks;
diff --git a/src/pages/developer/_components/Posts.tsx b/src/pages/developer/_components/Posts.tsx
deleted file mode 100644
index 9ec48d4..0000000
--- a/src/pages/developer/_components/Posts.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-const Posts = () => {
- return 작성글
; -}; - -export default Posts; diff --git a/src/pages/developer/_components/Profile.tsx b/src/pages/developer/_components/Profile.tsx index 8442bc3..932c5ca 100644 --- a/src/pages/developer/_components/Profile.tsx +++ b/src/pages/developer/_components/Profile.tsx @@ -1,5 +1,68 @@ -const Profile = () => { - return프로필
; +import { Badge } from "@/components/ui/badge"; +import type { GetProfileResponse } from "@/types/my.types"; + +interface ProfileProps { + userProfile?: GetProfileResponse; +} + +const Profile = ({ userProfile }: ProfileProps) => { + if (!userProfile) { + return프로필 정보가 없습니다.
;
+ }
+
+ return (
+
+ {/* Bio */}
+ {userProfile.bio && (
+
+ );
};
export default Profile;
diff --git a/src/pages/developer/index.tsx b/src/pages/developer/index.tsx
index 73c01ac..74f3a3f 100644
--- a/src/pages/developer/index.tsx
+++ b/src/pages/developer/index.tsx
@@ -1,27 +1,107 @@
import { useState } from "react";
+import { useParams, useNavigate } from "react-router-dom";
import { AppTabs } from "@/components/common/AppTabs";
import { ProfileSection } from "@/components/profile/ProfileSection.tsx";
import type { DeveloperTabValue } from "@/constants/profile";
import { DEVELOPER_TABS } from "@/constants/profile";
-import Posts from "./_components/Posts.tsx";
+import Links from "./_components/Links.tsx";
import Profile from "./_components/Profile.tsx";
import Header from "@/components/layout/Header.tsx";
import { ArrowLeft, Heart } from "lucide-react";
+import {
+ useUserProfile,
+ useToggleUserSubscription,
+} from "@/hooks/queries/useDevelopers";
export const DeveloperPage = () => {
+ const { nickname } = useParams<{ nickname: string }>();
+ const navigate = useNavigate();
const [activeTab, setActiveTab] = useState
+
+ )}
+
+ {/* 경력 */}
+ 소개
++ {userProfile.bio} +
+
+
+
+ {/* 테크스택 */}
+ {userProfile.techStack && userProfile.techStack.length > 0 && (
+ 경력
+{userProfile.experience}년
+
+
+ )}
+
+ {/* 관심사 */}
+ {userProfile.interests && userProfile.interests.length > 0 && (
+ 기술 스택
+
+ {userProfile.techStack.map((tech, index) => (
+
+ {tech.value}
+
+ ))}
+
+
+
+ )}
+ 관심사
+
+ {userProfile.interests.map((interest, index) => (
+
+ {interest.value}
+
+ ))}
+
+
+
+ );
+ }
+
+ if (error) {
+ return (
+
+
+ 로딩 중...
+
+
+ );
+ }
+
return (
-
+
+
+ 프로필을 불러오는 중 오류가 발생했습니다.
+
+
-
-
+
+
-
+
{
className="w-full mt-8"
/>
diff --git a/src/pages/explore/_components/DeveloperProfileCard.tsx b/src/pages/explore/_components/DeveloperProfileCard.tsx
index f1c8edd..76f67a1 100644
--- a/src/pages/explore/_components/DeveloperProfileCard.tsx
+++ b/src/pages/explore/_components/DeveloperProfileCard.tsx
@@ -1,3 +1,4 @@
+import { useNavigate } from "react-router-dom";
import type { Developer } from "@/types/developer.types";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
@@ -11,11 +12,29 @@ export const DeveloperProfileCard = ({
developer,
viewMode,
}: DeveloperProfileCardProps) => {
+ const navigate = useNavigate();
+
+ const handleClick = () => {
+ navigate(`/developer/${developer.nickname}`);
+ };
+
if (viewMode === "grid") {
return (
-
- {activeTab === "profile" &&
-
- {/* 이미지 영역 */}
+
+
+ {developer.image ? (
+ 
+ ) : (
+
+
+ {developer.nickname.charAt(0)}
+
+
+ )}
@@ -28,9 +47,25 @@ export const DeveloperProfileCard = ({
}
return (
-
+
-
+
-
+ {developer.image ? (
+
+ ) : (
+
+
+ {developer.nickname.charAt(0)}
+
+
+ )}
+
@@ -40,18 +75,22 @@ export const DeveloperProfileCard = ({
- {developer.position}
+
+ {typeof developer.position === "string"
+ ? developer.position
+ : "포지션 정보 없음"}
+
·
{developer.experience}
- {developer.stacks.map((stack, index) => (
+
+ {(developer.stacks || []).map((stack, index) => (
+ className="rounded-full text-[10px] bg-brand-surface border-brand-primary text-brand-primary">
{stack}
))}
diff --git a/src/pages/explore/index.tsx b/src/pages/explore/index.tsx
index 5093dc3..736a062 100644
--- a/src/pages/explore/index.tsx
+++ b/src/pages/explore/index.tsx
@@ -1,48 +1,95 @@
-import { useState, useEffect } from "react";
+import { useState } from "react";
import { Settings2, LayoutGrid, List } from "lucide-react";
import { Button } from "../../components/ui/button";
import { FilteringModal } from "./_components/FilteringModal";
import { EXPLORE_TABS, type ExploreTabValue } from "../../constants/explore";
-import type { Developer } from "../../types/developer.types";
+import type {
+ Developer,
+ NearbyUser,
+ NearbyUsersParams,
+} from "../../types/developer.types";
import { ListView } from "./_components/layout/ListView";
import { GridView } from "./_components/layout/GridView";
import { AppTabs } from "../../components/common/AppTabs";
import { cn } from "../../lib/utils";
-import { fetchDevelopers } from "../../lib/api/developers";
+import { useDevelopers } from "../../hooks/queries/useDevelopers";
+
+const transformNearbyUserToDeveloper = (
+ user: NearbyUser,
+ index: number
+): Developer => {
+ return {
+ id: Date.now() + index + Math.random(),
+ nickname: user.nickname,
+ distance: user.distance ? `${Math.round(user.distance * 10) / 10}km` : "",
+ position: user.position ? user.position.role : "포지션 정보 없음",
+ stacks: user.techStack?.map((stack) => stack.value) || [],
+ experience: `${user.experience}년`,
+ image: user.avatar || "",
+ category: "nearby" as const,
+ };
+};
export const ExplorePage = () => {
const [activeTab, setActiveTab] = useState("nearby");
const [isModalOpen, setIsModalOpen] = useState(false);
const [viewMode, setViewMode] = useState<"list" | "grid">("list");
- const [developers, setDevelopers] = useState([]);
- const [isLoading, setIsLoading] = useState(true);
- const [error, setError] = useState(null);
+ const [filterParams, setFilterParams] = useState>(
+ {}
+ );
+
+ const {
+ data: developersData = [],
+ isLoading: isDevelopersLoading,
+ error: developersError,
+ } = useDevelopers(
+ activeTab,
+ true,
+ activeTab === "nearby" ? filterParams : undefined
+ );
+
+ const isLoading = isDevelopersLoading;
+ const error = developersError;
- useEffect(() => {
- const loadDevelopers = async () => {
- setIsLoading(true);
- setError(null);
- try {
- const fetchedDevelopers = await fetchDevelopers(activeTab);
- setDevelopers(fetchedDevelopers);
- } catch (err) {
- setError(err as Error);
- } finally {
- setIsLoading(false);
- }
- };
- loadDevelopers();
- }, [activeTab]);
+ const developers = (developersData || []).map((user: any, index: number) =>
+ transformNearbyUserToDeveloper(user, index)
+ );
const openModal = () => setIsModalOpen(true);
const closeModal = () => setIsModalOpen(false);
+ const handleFilterSubmit = (params: Partial) => {
+ console.log("필터링 적용:", params);
+ setFilterParams(params);
+ closeModal();
+ };
+
const handleTabChange = (value: string) => {
setActiveTab(value as ExploreTabValue);
};
- if (isLoading) return
로딩 중...
;
- if (error) return 에러 발생: {error.message}
;
+ if (isLoading)
+ return (
+
+
+ );
+
+ if (error) {
+ return (
+ 로딩 중...
+
+
+ );
+ }
return (
+ 개발자 정보를 불러오는 중 오류가 발생했습니다.
+
+ {error.message}
+ {error.message.includes("인증") && (
+
+ 💡 팁: 로그인이 만료되었을 수 있습니다. 다시 로그인해주세요.
+
+ )}
+
@@ -54,8 +101,8 @@ export const ExplorePage = () => {
className="-mx-4"
/>
-
-
+
);
};
diff --git a/src/pages/home/_components/modal/AddPostModal.tsx b/src/pages/home/_components/modal/AddPostModal.tsx
index 4e9f6b0..ee59447 100644
--- a/src/pages/home/_components/modal/AddPostModal.tsx
+++ b/src/pages/home/_components/modal/AddPostModal.tsx
@@ -1,3 +1,4 @@
+import { useEffect } from "react";
import { Button } from "@/components/ui/button";
import {
Select,
@@ -12,17 +13,33 @@ import { PostItem } from "./PostItem";
import { RecruitItem } from "./RecruitItem";
import { useAddPostModal } from "../../../../hooks/useAddPostModal";
import { useBoards } from "../../../../hooks/queries/usePosts";
+import {
+ usePositionsInterests,
+ useStacks,
+} from "../../../../hooks/queries/useTags";
+import { useLocationQuery } from "../../../../hooks/queries/useLocationQuery";
interface AddPostModalProps {
onClose: () => void;
- onSubmit: (data: { title: string; content: string; boardId: number }) => void;
+ onSubmit: (data: {
+ title: string;
+ content: string;
+ boardId: number;
+ location: { lat: number; lng: number };
+ }) => void;
isSubmitting?: boolean;
+ initialData?: {
+ title: string;
+ content: string;
+ boardId: number;
+ };
}
export const AddPostModal = ({
onClose,
onSubmit,
isSubmitting = false,
+ initialData,
}: AddPostModalProps) => {
const {
title,
@@ -31,7 +48,9 @@ export const AddPostModal = ({
description,
recruitCount,
position,
+ selectedPositionIds,
selectedStackIds,
+ location,
isRecruitBoard,
setTitle,
setContent,
@@ -39,11 +58,51 @@ export const AddPostModal = ({
setDescription,
setRecruitCount,
setPosition,
+ setSelectedPositionIds,
setSelectedStackIds,
+ setLocation,
reset,
} = useAddPostModal();
const { data: boards = [] } = useBoards();
+ const { data: positionsInterestsData } = usePositionsInterests();
+ const { data: stacks } = useStacks();
+ const { location: currentLocation, refetchLocation } = useLocationQuery();
+
+ useEffect(() => {
+ if (currentLocation && !location) {
+ setLocation(currentLocation);
+ }
+ }, [currentLocation, location, setLocation]);
+
+ useEffect(() => {
+ if (!location && currentLocation) {
+ setLocation(currentLocation);
+ }
+ }, [location, currentLocation, setLocation]);
+
+ useEffect(() => {
+ if (initialData && !location) {
+ if (currentLocation) {
+ setLocation(currentLocation);
+ } else {
+ refetchLocation().then(() => {
+ console.log("위치 정보 다시 가져오기 완료");
+ });
+ }
+ }
+ }, [initialData, currentLocation, location, setLocation, refetchLocation]);
+
+ useEffect(() => {
+ if (initialData) {
+ setTitle(initialData.title);
+ setContent(initialData.content);
+ const board = boards.find((b) => b.id === initialData.boardId);
+ if (board) {
+ setSelectedBoard(board.value);
+ }
+ }
+ }, [initialData, boards]);
const handleSubmit = () => {
if (!title.trim() || !selectedBoard) {
@@ -51,7 +110,10 @@ export const AddPostModal = ({
}
if (isRecruitBoard) {
- if (!description.trim() || !position || selectedStackIds.length === 0) {
+ if (!description.trim() || selectedStackIds.length === 0) {
+ return;
+ }
+ if (selectedBoard === "프로젝트" && selectedPositionIds.length === 0) {
return;
}
} else {
@@ -60,15 +122,41 @@ export const AddPostModal = ({
}
}
+ if (!location) {
+ alert("위치 정보가 필요합니다. 위치 정보를 설정해주세요.");
+ return;
+ }
+
const selectedBoardData = boards.find(
(board) => board.value === selectedBoard
);
if (!selectedBoardData) return;
+ let finalContent = isRecruitBoard ? description.trim() : content.trim();
+
+ if (isRecruitBoard) {
+ finalContent += `\n\n모집 인원: ${recruitCount}명`;
+ if (selectedBoard === "프로젝트" && selectedPositionIds.length > 0) {
+ const positions = positionsInterestsData?.positions || [];
+ const selectedPositions = positions.filter((pos) =>
+ selectedPositionIds.includes(pos.id)
+ );
+ const positionText = selectedPositions
+ .map((pos) => pos.role)
+ .join(", ");
+ finalContent += `\n포지션: ${positionText}`;
+ }
+ const selectedStacks =
+ stacks?.filter((stack) => selectedStackIds.includes(stack.id)) || [];
+ const stackText = selectedStacks.map((stack) => stack.value).join(", ");
+ finalContent += `\n기술스택: ${stackText}`;
+ }
+
const postData = {
title: title.trim(),
- content: isRecruitBoard ? description.trim() : content.trim(),
+ content: finalContent,
boardId: selectedBoardData.id,
+ location,
};
onSubmit(postData);
@@ -79,6 +167,17 @@ export const AddPostModal = ({
onClose();
};
+ const isDisabled =
+ isSubmitting ||
+ !title.trim() ||
+ !selectedBoard ||
+ (isRecruitBoard
+ ? !description.trim() ||
+ selectedStackIds.length === 0 ||
+ (selectedBoard === "프로젝트" && selectedPositionIds.length === 0)
+ : !content.trim()) ||
+ !location;
+
const footer = (
+
-
+ {activeTab === "nearby" && (
+
+ )}
{viewMode === "list" ? (
@@ -94,7 +143,9 @@ export const ExplorePage = () => {
)}
- {isModalOpen &&