-
-
-
View Type:
-
- {
- handleSelectChange("view", value);
- }}
- />
-
-
+
+ {VIEW_OPTIONS.map((opt) => (
+
+ ))}
+
+
+
+ {DATE_OPTIONS.map((opt) => (
+
+ ))}
-
-
정렬 기준:
-
- {
- handleSelectChange("date", value);
- }}
- />
-
-
+
-
-
정렬:
-
- {
- handleSelectChange("sort", value);
- }}
- />
-
-
-
+
+
+
+ {isNonDefault && (
+ <>
+
+
+
+ )}
);
}
diff --git a/src/features/project/ui/ProjectBoardHeader.tsx b/src/features/project/ui/ProjectBoardHeader.tsx
index a329fd0..0f69016 100644
--- a/src/features/project/ui/ProjectBoardHeader.tsx
+++ b/src/features/project/ui/ProjectBoardHeader.tsx
@@ -1,29 +1,27 @@
-"use client"
+"use client";
-import { SectionHeader } from "@/components/shared/SectionHeader";
+import { useState } from "react";
import Button from "@/components/ui/Button";
-import { useRouter } from "next/navigation";
+import { ProjectCreationModal } from "./ProjectCreationModal";
export default function ProjectBoardHeader() {
- const router = useRouter();
+ const [open, setOpen] = useState(false);
- const handleAddProject = () => {
- sessionStorage.removeItem("current_Project_Id");
- router.push('/project/create');
- };
-
return (
-
-
-
-
+
+
+
);
}
diff --git a/src/features/project/ui/ProjectCard.tsx b/src/features/project/ui/ProjectCard.tsx
index 72e3933..e0943c3 100644
--- a/src/features/project/ui/ProjectCard.tsx
+++ b/src/features/project/ui/ProjectCard.tsx
@@ -1,107 +1,114 @@
"use client";
-import Button from "@/components/ui/Button";
import { Icon } from "@/components/shared/Icon";
-import {
- Card,
- CardContent,
- CardDescription,
- CardFooter,
- CardHeader,
- CardTitle,
-} from "./Card";
import { DeleteDialog } from "./DeleteDialog";
import { deleteProject, deleteProjectMember } from "../model";
import { useRouter } from "next/navigation";
import { showToast } from "@/lib/utils/toast";
import { useQueryClient } from "@tanstack/react-query";
import { queryKeys } from "@/lib/constants/queryKeys";
-import type { Project } from "../model";
+import type { Project, ProjectStatus } from "../model";
+import { Pencil, CalendarDays } from "lucide-react";
interface ProjectCardProps {
project: Project;
projectMember: Record
| null;
}
-export default function ProjectCard({
- project,
- projectMember,
-}: ProjectCardProps) {
- const router = useRouter();
- const queryClient = useQueryClient();
+const STATUS_CONFIG: Record = {
+ active: { label: "진행중", dot: "bg-emerald-400", text: "text-emerald-600 dark:text-emerald-400" },
+ completed: { label: "완료", dot: "bg-gray-300 dark:bg-gray-500", text: "text-gray-400 dark:text-gray-500" },
+ archived: { label: "일시정지", dot: "bg-amber-400", text: "text-amber-500 dark:text-amber-400" },
+};
- const handleSelectProject = (projectId: string) => {
- // 세션 스토리지에 선택한 프로젝트 ID 저장
- sessionStorage.setItem("current_Project_Id", projectId);
- // URL에 ID 노출없이 프로젝트 페이지로 이동
- router.push("/project/workspace");
- };
+function formatDate(d: string) {
+ const date = new Date(d);
+ const dateStr = date.toLocaleDateString("ko-KR", {
+ year: "numeric",
+ month: "2-digit",
+ day: "2-digit",
+ });
+ const timeStr = date.toLocaleTimeString("ko-KR", {
+ hour: "2-digit",
+ minute: "2-digit",
+ hour12: false,
+ });
+ return `${dateStr.replace(/\. /g, ".").replace(/\.$/, "")} ${timeStr}`;
+}
- const handleEditProject = (projectId: string) => {
- // 세션 스토리지에 선택한 프로젝트 ID 저장
- sessionStorage.setItem("current_Project_Id", projectId);
+function formatDateRange(start?: string, end?: string) {
+ if (!start && !end) return null;
+ if (!end) return formatDate(start!);
+ return `${formatDate(start!)} – ${formatDate(end)}`;
+}
- // URL에 ID 노출없이 프로젝트 페이지로 이동
- router.push("/project/update/");
- };
+export default function ProjectCard({ project, projectMember }: ProjectCardProps) {
+ const router = useRouter();
+ const queryClient = useQueryClient();
- async function handleDeleteProject(id: string) {
- // 프로젝트 및 프로젝트 멤버 정보 삭제
- await deleteProject(id);
- await deleteProjectMember(id);
+ const memberCount = projectMember?.[project.project_id] ?? 1;
+ const status = STATUS_CONFIG[project.status] ?? STATUS_CONFIG.active;
+ const dateRange = formatDateRange(project.started_at, project.ended_at);
- // 캐시 무효화 → 목록 자동 재조회
+ async function handleDelete() {
+ await deleteProject(project.project_id);
+ await deleteProjectMember(project.project_id);
queryClient.invalidateQueries({ queryKey: queryKeys.projects.all });
-
showToast("삭제되었습니다.", "deleted");
}
return (
- <>
- {
- handleSelectProject(project.project_id);
- }}
- >
-
-
- {project.project_name}
-
-
-
- {project.description}
-
-
+
router.push(`/project/workspace/${project.project_id}`)}
+ className="group relative flex flex-col bg-card rounded-2xl border border-border p-5 cursor-pointer transition-all duration-200 hover:shadow-lg hover:-translate-y-0.5 hover:border-main-200 dark:hover:border-main-700"
+ >
+ {/* 상태 */}
+
+
+ {status.label}
+
+
+ {/* 제목 + 설명 */}
+
+
+ {project.project_name}
+
+
+ {project.description || "설명이 없습니다."}
+
+
+
+ {/* 날짜 */}
+ {dateRange && (
+
+
+ {dateRange}
-
-
-
-
- {projectMember ? projectMember[project.project_id] : 1}팀원
-
-
-
- ) => e.stopPropagation()}>
-
- ) => e.stopPropagation()}>
-
handleDeleteProject(project.project_id)}
- />
+ )}
+
+ {/* 팀원 수 + 호버 액션 */}
+
+
+
+ {memberCount}명
+
+
+ {/* 호버 시 나타나는 액션 버튼 */}
+
e.stopPropagation()}
+ >
+
+
+
-
-
-
+
+
- (null);
+ const [members, setMembers] = useState([]);
+ const [isSubmitting, setIsSubmitting] = useState(false);
+
+ const { data: userList = [] } = useQuery({
+ queryKey: queryKeys.users.all,
+ queryFn: async () => {
+ const result = await getUser();
+ return (result.data || []).map(({ user_id, user_name, email }) => ({
+ id: user_id,
+ label: `${user_name} (${email})`,
+ value: user_name,
+ email,
+ })) as Item[];
+ },
+ staleTime: 1000 * 60 * 10,
+ enabled: open,
+ });
+
+ const reset = () => {
+ setStep(1);
+ setName("");
+ setNameError("");
+ setType(null);
+ setDuration(null);
+ setStartDate("");
+ setEndDate("");
+ setDescription("");
+ setTechStack("");
+ setIsExpanded(false);
+ setSelectedUser(null);
+ setMembers([]);
+ };
+
+ const handleClose = () => {
+ reset();
+ onOpenChange(false);
+ };
+
+ const handleNext = () => {
+ if (step === 1) {
+ if (!name.trim()) {
+ setNameError("이름을 입력해주세요");
+ return;
+ }
+ setNameError("");
+ }
+ setStep((s) => s + 1);
+ };
+
+ const handleBack = () => setStep((s) => s - 1);
+
+ const handleAddMember = (item: Item | null) => {
+ if (!item) return;
+ if (members.some((m) => m.userId === item.id)) {
+ alert("이미 추가된 멤버입니다.");
+ return;
+ }
+ setMembers((prev) => [...prev, { projectId: "", userId: item.id, userName: item.value, email: item.email, role: "member" }]);
+ };
+
+ const handleSubmit = async () => {
+ if (!name || !type || !duration) return;
+
+ const today = new Date();
+ let endedAt: Date;
+
+ if (duration === "custom") {
+ endedAt = endDate ? new Date(endDate) : today;
+ } else {
+ endedAt = new Date(today);
+ endedAt.setMonth(endedAt.getMonth() + duration);
+ }
+
+ const startedAt = duration === "custom" && startDate ? new Date(startDate) : today;
+
+ setIsSubmitting(true);
+ try {
+ const { data } = await createProject({
+ projectName: name,
+ type,
+ status: "active",
+ startedAt,
+ endedAt,
+ description: description,
+ techStack: techStack,
+ });
+
+ const projectId = data?.[0]?.project_id;
+ if (projectId && members.length > 0) {
+ await updateProjectMember(projectId, members.map((m) => ({ ...m, projectId })));
+ }
+
+ queryClient.invalidateQueries({ queryKey: queryKeys.projects.all });
+ showToast("프로젝트가 생성되었습니다.", "success");
+ handleClose();
+ if (projectId) {
+ router.push(`/project/workspace/${projectId}`);
+ }
+ } catch {
+ showToast("생성에 실패했습니다.", "error");
+ } finally {
+ setIsSubmitting(false);
+ }
+ };
+
+ const canSubmit = !!duration && (duration !== "custom" || (!!startDate && !!endDate));
+
+ return (
+
+
+
+
+ {/* 헤더 */}
+
+
+
+ {[1, 2, 3].map((s) => (
+
+ ))}
+
+
Step {step} / 3
+
+
+
+
+
+ {step === 1 && (
+
+
+
프로젝트 이름
+
+
+
{ setName(e.target.value); setNameError(""); }}
+ placeholder="프로젝트 이름을 입력해주세요"
+ className="w-full px-6 py-4 bg-background border border-border rounded-[10px] focus:outline-none focus:ring-2 focus:ring-main-500 text-foreground text-lg placeholder:text-main-600 dark:placeholder:text-main-400 text-center"
+ autoFocus
+ onKeyDown={(e) => e.key === "Enter" && handleNext()}
+ />
+ {nameError &&
{nameError}
}
+
+
+ )}
+
+ {step === 2 && (
+
+
+
어떤 프로젝트인가요?
+
+
+ {PROJECT_TYPES.map(({ value, label, description: desc, icon: Icon }) => (
+
+ ))}
+
+
+ )}
+
+ {step === 3 && (
+
+
+
기간을 정해볼까요?
+
+
+ {DURATION_OPTIONS.map((opt) => (
+
+ ))}
+
+
+ {duration === "custom" && (
+
+ )}
+
+ {/* 선택적 추가 정보 */}
+
+
+
+ + 추가 정보 입력하기 (선택사항)
+ {isExpanded ? : }
+
+
+