From f4cc502d0cd067a53506b2c4c30372defdfc7cc1 Mon Sep 17 00:00:00 2001 From: sh0723 Date: Sun, 3 May 2026 18:10:33 +0900 Subject: [PATCH 1/2] feat(presentation): add tenth team-po deck --- src/App.tsx | 5 + .../team-po-presentation-tenth-view.tsx | 847 ++++++++++++++++++ src/pages/team-po-presentation-tenth-page.tsx | 5 + 3 files changed, 857 insertions(+) create mode 100644 src/features/presentation/components/team-po-presentation-tenth-view.tsx create mode 100644 src/pages/team-po-presentation-tenth-page.tsx diff --git a/src/App.tsx b/src/App.tsx index 254543b..463c039 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -15,6 +15,7 @@ import { TeamPoPresentationThirdPage } from "@/pages/team-po-presentation-third- import { TeamPoPresentationFifthPage } from "@/pages/team-po-presentation-fifth-page"; import { TeamPoPresentationSeventhPage } from "@/pages/team-po-presentation-seventh-page"; import { TeamPoPresentationSixthPage } from "@/pages/team-po-presentation-sixth-page"; +import { TeamPoPresentationTenthPage } from "@/pages/team-po-presentation-tenth-page"; export function App() { return ( @@ -54,6 +55,10 @@ export function App() { path="/deck/team-po-9" element={} /> + } + /> } /> } /> } /> diff --git a/src/features/presentation/components/team-po-presentation-tenth-view.tsx b/src/features/presentation/components/team-po-presentation-tenth-view.tsx new file mode 100644 index 0000000..f32d4b2 --- /dev/null +++ b/src/features/presentation/components/team-po-presentation-tenth-view.tsx @@ -0,0 +1,847 @@ +import { + BadgeCheck, + Clock3, + FolderKanban, + Github, + GitBranch, + Layers3, + ListChecks, + Rocket, + Sparkles, + Target, + UserRoundPlus, +} from "lucide-react"; +import { useEffect, useRef } from "react"; +import { useLocation } from "react-router-dom"; + +import { SiteFooter } from "@/components/site-footer"; +import { SiteHeader } from "@/components/site-header"; +import { Badge } from "@/components/ui/badge"; +import { Container } from "@/components/ui/container"; +import { Surface } from "@/components/ui/surface"; +import { PresentationSlide } from "@/features/presentation/components/team-po-presentation-view"; +import type { PresentationSectionLink } from "@/features/presentation/constants"; +import { cn } from "@/lib/utils"; +import "./team-po-presentation-view.css"; + +const teamMembers = ["장다은", "김황조", "박상혁", "정종우"]; +const teamLeaderName = "장다은"; +const featuredMemberName = "박상혁"; +const CAPTURE_SCROLL_OFFSET = 2; + +const tocSections: PresentationSectionLink[] = [ + { + id: "intro", + label: "COVER", + title: "표지", + summary: "주간 진행 현황 소개", + }, + { + id: "toc", + label: "INDEX", + title: "목차", + summary: "이번 진행 흐름", + }, + { + id: "completed", + label: "01", + title: "완료", + summary: "이번 주 마무리된 작업", + }, + { + id: "in-progress", + label: "02", + title: "진행 중", + summary: "현재 구현 중인 작업", + }, + { + id: "planned", + label: "03", + title: "예정", + summary: "다음 작업 우선순위", + }, + { + id: "closing", + label: "END", + title: "마무리", + summary: "다음 체크포인트", + }, +]; + +const summaryCards = [ + { + title: "완료", + value: "3 Groups", + description: + "매칭 시스템을 완료하고 팀 스페이스 전 단계까지 안정화한 뒤 배포했습니다.", + icon: BadgeCheck, + tone: "primary", + }, + { + title: "진행 중", + value: "3 Items", + description: + "팀스페이스에서 개발 가이드라인, 체크리스트, GitHub 연동 기능을 구현하고 있습니다.", + icon: Clock3, + tone: "accent", + }, + { + title: "다음 목표", + value: "2 Items", + description: "간이 메신저와 Team Rule 기능으로 팀 협업 흐름을 확장합니다.", + icon: Rocket, + tone: "chart2", + }, +] as const; + +const completedItems = [ + { + title: "매칭 시스템 구현 완료", + description: + "매칭 요청부터 상대방 확인, 수락·거절 처리까지 이어지는 핵심 매칭 흐름 구현을 완료했습니다.", + icon: GitBranch, + }, + { + title: "팀 스페이스 전 단계 안정화", + description: + "유저 기능, 매칭 기능, 사용자 흐름, 코드 폴리싱까지 팀 스페이스 진입 전의 모든 기반 흐름을 안정화했습니다.", + icon: FolderKanban, + }, + { + title: "완료 버전 배포", + description: + "현재 완료된 버전을 배포해 실제 접근 가능한 상태로 만들고 다음 기능 구현의 기준점을 마련했습니다.", + icon: Rocket, + }, +] as const; + +const inProgressItems = [ + { + title: "프로젝트 개발 가이드라인 제공 서비스", + description: + "팀스페이스 안에서 프로젝트 상황과 역할을 바탕으로 개발 가이드라인을 제공하는 기능을 구현하고 있습니다.", + icon: Sparkles, + keywords: ["Team Space", "Dev Guide", "Developer Flow"], + }, + { + title: "체크리스트 서비스", + description: + "팀이 해야 할 작업을 작은 단위로 확인하고 진행 상태를 관리할 수 있는 체크리스트 기능을 구현하고 있습니다.", + icon: ListChecks, + keywords: ["Checklist", "Progress", "Task Flow"], + }, + { + title: "GitHub 연동 서비스", + description: + "프로젝트 저장소와 팀스페이스를 연결해 개발 활동을 서비스 흐름 안에서 확인할 수 있도록 GitHub 연동을 진행하고 있습니다.", + icon: Github, + keywords: ["GitHub", "Repository", "Integration"], + }, +] as const; + +const plannedItems = [ + { + title: "간이 메신저", + description: + "팀스페이스 안에서 빠르게 의견을 주고받을 수 있는 간단한 메시징 기능을 구현할 예정입니다.", + icon: Layers3, + keywords: ["Messenger", "Team Space", "Communication"], + }, + { + title: "Team Rule 기능", + description: + "팀별 협업 규칙을 정리하고 공유할 수 있도록 Team Rule 기능을 서비스 흐름에 추가할 예정입니다.", + icon: Target, + keywords: ["Team Rule", "Collaboration", "Policy"], + }, +] as const; + +const closingPillars = [ + { + title: "Find", + description: "초보 개발자도 팀을 쉽게 찾을 수 있도록", + icon: UserRoundPlus, + }, + { + title: "Run", + description: "협업 규칙과 체크리스트로 프로젝트를 유지하고", + icon: ListChecks, + }, + { + title: "Ship", + description: "GitHub 연동과 운영 보드로 끝까지 완주하도록", + icon: Github, + }, +] as const; + +const closingDescription = + "초보 개발자가 팀을 찾고, 협업을 유지하고, 프로젝트를 끝까지 완주할 수 있도록 돕는 팀 매칭 & 프로젝트 관리 플랫폼입니다."; + +const statusToneClasses = { + primary: "border-primary/20 bg-primary/10 text-primary", + accent: "border-accent/20 bg-accent/10 text-accent", + chart2: "border-chart-2/20 bg-chart-2/10 text-chart-2", +} as const; + +const pageLabels = new Map( + tocSections.map((section, index) => [ + section.id, + `(${index + 1}/${tocSections.length})`, + ]), +); + +export function TeamPoPresentationTenthView() { + const location = useLocation(); + const isCaptureMode = + new URLSearchParams(location.search).get("mode") === "capture"; + const captureSlideIndex = useRef(0); + const captureSlidesRef = useRef([]); + const showPageNumbers = true; + + const getPageLabel = (sectionId: string) => + showPageNumbers ? pageLabels.get(sectionId) : undefined; + + useEffect(() => { + if (!isCaptureMode) { + return; + } + + const slides = Array.from( + document.querySelectorAll(".presentation-slide"), + ); + + if (!slides.length) { + return; + } + + captureSlidesRef.current = slides; + captureSlideIndex.current = 0; + + const goToSlide = (index: number) => { + const nextIndex = Math.min( + Math.max(index, 0), + captureSlidesRef.current.length - 1, + ); + + captureSlideIndex.current = nextIndex; + const target = captureSlidesRef.current[nextIndex]; + const top = Math.max(0, target.offsetTop + CAPTURE_SCROLL_OFFSET); + + window.scrollTo({ + top, + behavior: "auto", + }); + }; + + const handleKeyDown = (event: KeyboardEvent) => { + if ( + event.target instanceof HTMLInputElement || + event.target instanceof HTMLTextAreaElement || + (event.target as HTMLElement | null)?.isContentEditable + ) { + return; + } + + switch (event.key) { + case "ArrowRight": + case "ArrowDown": + case "j": + case "PageDown": { + event.preventDefault(); + goToSlide(captureSlideIndex.current + 1); + return; + } + case "ArrowLeft": + case "ArrowUp": + case "k": + case "PageUp": { + event.preventDefault(); + goToSlide(captureSlideIndex.current - 1); + return; + } + case "Home": { + event.preventDefault(); + goToSlide(0); + return; + } + case "End": { + event.preventDefault(); + goToSlide(captureSlidesRef.current.length - 1); + return; + } + default: + return; + } + }; + + window.addEventListener("keydown", handleKeyDown, { passive: false }); + goToSlide(0); + + return () => { + window.removeEventListener("keydown", handleKeyDown); + }; + }, [isCaptureMode]); + + return ( +
+
+
+
+ + {!isCaptureMode && ( +
+ +
+ )} + +
+
+ +
+
+ 전공종합설계1 + 2026. 5. 3. + 5조 githug +
+ + +
+
+
+
+

+ Developer Side Project Matching Service +

+

+ Team-po +

+

+ 주간 진행 현황 +

+

+ 매칭 시스템 구현을 완료하고, 팀 스페이스 진입 전까지의 + 사용자 흐름과 코드 기반을 안정화했습니다. 현재 완료된 + 버전은 배포까지 마쳤고, 팀스페이스 협업 기능 구현을 + 이어가고 있습니다. +

+
+ +
+ {summaryCards.map((item) => { + const Icon = item.icon; + + return ( +
+
+ +
+

+ {item.title} +

+

+ {item.value} +

+

+ {item.description} +

+
+ ); + })} +
+ +
+
+

+ Team +

+
+ {teamMembers.map((member) => { + const isLeader = member === teamLeaderName; + const isFeatured = member === featuredMemberName; + + return ( +
+ {isLeader ? `${member} · 팀장` : member} +
+ ); + })} +
+
+
+
+ +
+ {getPageLabel("intro") ? ( +
+ {getPageLabel("intro")} +
+ ) : null} + +
+ + +
+ {tocSections + .filter((section) => section.id !== "intro") + .map((section) => ( + +
+

+ {section.label} +

+

+ {section.title} +

+
+

+ {section.summary} +

+ + ))} +
+ + + +
+
+
+
+
+

+ Completed This Week +

+

+ 완료 +

+
+
+ +
+
+

+ 3 Groups +

+

+ 사용자 흐름과 코드 폴리싱을 포함해 팀 스페이스 전 단계의 + 기반을 안정화했습니다. +

+
+ +
+
+ {completedItems.map((item, index) => ( +
+
+ + 0{index + 1} + +
+

+ {item.title} +

+
+ ))} +
+
+
+ +
+ {completedItems.map((item) => { + const Icon = item.icon; + + return ( + +
+
+
+
+ +
+
+

+ Done +

+

+ {item.title} +

+
+
+

+ {item.description} +

+
+
+ + ); + })} +
+
+ + + +
+ +
+
+
+

+ Current Build +

+

+ 진행 중 +

+

+ 3 Items +

+

+ 지금은 팀스페이스 안에서 개발 흐름을 실제로 도와주는 협업 + 기능을 구현하는 단계입니다. +

+
+ +
+ {inProgressItems.map((item, index) => ( +
+
+ + 0{index + 1} + +
+

+ {item.title} +

+
+ ))} +
+
+ + +
+ {inProgressItems.map((item) => { + const Icon = item.icon; + + return ( +
+
+
+ +
+
+

+ In Progress +

+

+ {item.title} +

+
+
+

+ {item.description} +

+
+ {item.keywords.map((keyword) => ( +
+ {keyword} +
+ ))} +
+
+ ); + })} +
+
+ + + +
+ +
+
+

+ Next Queue +

+

+ 예정 +

+

+ 2 Items +

+

+ 다음 구현에서는 팀 소통과 협업 규칙을 다루는 기능을 + 확장합니다. +

+
+ +
+ {plannedItems.map((item, index) => ( +
+
+ + 0{index + 1} + +
+

+ {item.title} +

+
+ ))} +
+
+ + +
+ {plannedItems.map((item) => { + const Icon = item.icon; + + return ( +
+
+
+
+ +
+
+

+ Planned +

+

+ {item.title} +

+
+
+

+ {item.description} +

+
+ {item.keywords.map((keyword) => ( +
+ {keyword} +
+ ))} +
+
+
+ ); + })} +
+
+ + +
+ +
+
+
+ +
+
+
+

+ END NOTE +

+

+ Team-po +

+

+ {closingDescription} +

+
+ +
+ {closingPillars.map((item) => { + const Icon = item.icon; + + return ( +
+
+ +
+

+ {item.title} +

+

+ {item.description} +

+
+ ); + })} +
+
+ +
+
+
+
+
+
+ +
+
+

+ Product Focus +

+

+ Match, Manage, Momentum +

+
+
+

+ 팀 매칭은 시작점입니다. 매칭 이후 개발 가이드라인, + 체크리스트, GitHub 연동, 규칙과 소통 기능으로 팀은 + 지속적으로 작동합니다. +

+
+ {[ + "빠른 팀 결성", + "책임 분담 고정", + "기여도 기반 성장", + "완주율 향상", + ].map((item) => ( +
+ {item} +
+ ))} +
+
+ +
+ {[ + { label: "팀 매칭", icon: Target }, + { label: "라이프사이클", icon: Rocket }, + { label: "개발 가이드", icon: Sparkles }, + { label: "GitHub 연동", icon: GitBranch }, + ].map((item) => { + const Icon = item.icon; + + return ( +
+
+ +
+

{item.label}

+
+ ); + })} +
+ +
+
+ +

+ 감사합니다. +

+
+
+
+
+
+ {getPageLabel("closing") ? ( +
+ {getPageLabel("closing")} +
+ ) : null} + +
+
+ + {!isCaptureMode && ( +
+ +
+ )} +
+ ); +} diff --git a/src/pages/team-po-presentation-tenth-page.tsx b/src/pages/team-po-presentation-tenth-page.tsx new file mode 100644 index 0000000..fc46866 --- /dev/null +++ b/src/pages/team-po-presentation-tenth-page.tsx @@ -0,0 +1,5 @@ +import { TeamPoPresentationTenthView } from "@/features/presentation/components/team-po-presentation-tenth-view"; + +export function TeamPoPresentationTenthPage() { + return ; +} From f275a55b655e618d6c4260785ad0b3d7512e00ac Mon Sep 17 00:00:00 2001 From: hwangjokim Date: Sun, 3 May 2026 22:43:13 +0900 Subject: [PATCH 2/2] fix(presentation): fit tenth deck cover team block --- .../team-po-presentation-tenth-view.tsx | 28 +++++++++---------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/src/features/presentation/components/team-po-presentation-tenth-view.tsx b/src/features/presentation/components/team-po-presentation-tenth-view.tsx index f32d4b2..e610e9e 100644 --- a/src/features/presentation/components/team-po-presentation-tenth-view.tsx +++ b/src/features/presentation/components/team-po-presentation-tenth-view.tsx @@ -305,7 +305,7 @@ export function TeamPoPresentationTenthView() { id="intro" > -
+
전공종합설계1 2026. 5. 3. @@ -313,23 +313,23 @@ export function TeamPoPresentationTenthView() {
-
-
+
+

Developer Side Project Matching Service

-

+

Team-po

-

+

주간 진행 현황

-

+

매칭 시스템 구현을 완료하고, 팀 스페이스 진입 전까지의 사용자 흐름과 코드 기반을 안정화했습니다. 현재 완료된 버전은 배포까지 마쳤고, 팀스페이스 협업 기능 구현을 @@ -343,24 +343,24 @@ export function TeamPoPresentationTenthView() { return (

-

+

{item.title}

{item.value}

-

+

{item.description}

@@ -368,12 +368,12 @@ export function TeamPoPresentationTenthView() { })}
-
+

Team

-
+
{teamMembers.map((member) => { const isLeader = member === teamLeaderName; const isFeatured = member === featuredMemberName; @@ -381,7 +381,7 @@ export function TeamPoPresentationTenthView() { return (