diff --git a/src/app/ko/page.tsx b/src/app/ko/page.tsx index 834226c..f7b82a4 100644 --- a/src/app/ko/page.tsx +++ b/src/app/ko/page.tsx @@ -1,4 +1,5 @@ import Header from "@/components/common/Header"; +import LearningJourneySection from "@/components/ko/LearningJourneySection"; import Image from "next/image"; import Link from "next/link"; @@ -204,6 +205,8 @@ export default function PageKO() { + + {/* 아래부터 다음 섹션들… */}
{/* 예시 영역 */} diff --git a/src/components/ko/LearningJourneySection.tsx b/src/components/ko/LearningJourneySection.tsx new file mode 100644 index 0000000..2961338 --- /dev/null +++ b/src/components/ko/LearningJourneySection.tsx @@ -0,0 +1,139 @@ +"use client"; + +import { useState } from "react"; + +interface JourneyStage { + id: string; + label: string; + summary: string; + detailTitle: string; + detailDescription: string; + keyPoints: string[]; +} + +const journeyStages: JourneyStage[] = [ + { + id: "discovery", + label: "아이디어 발굴", + summary: "아이의 흥미에서 출발해 해결하고 싶은 문제를 찾습니다.", + detailTitle: "아이디어에서 출발하는 배움", + detailDescription: + "멘토와 함께 일상의 호기심을 탐색하며, 아이 스스로 의미 있다고 느끼는 문제를 정의합니다. 이 단계에서 프로젝트의 방향과 팀의 목표가 명확해집니다.", + keyPoints: [ + "흥미와 강점을 탐색하여 프로젝트 주제를 선정해요.", + "사용자와 환경을 조사하며 문제를 구체화합니다.", + "목표를 세우고 프로젝트 로드맵을 설계합니다.", + ], + }, + { + id: "design", + label: "설계 & 프로토타입", + summary: "아이디어를 구체적인 서비스 콘셉트와 설계로 발전시켜요.", + detailTitle: "문제를 해결하는 구조를 만듭니다", + detailDescription: + "사용자 여정을 그려 보고, 필요한 기능과 화면을 기획합니다. 프로토타입을 만들며 아이들은 사용자 관점에서 생각하는 방법을 익힙니다.", + keyPoints: [ + "서비스 구조와 화면 흐름을 시각화합니다.", + "프로토타입을 만들며 빠르게 피드백을 받아요.", + "팀 내 역할을 나누고 협업하는 방법을 경험합니다.", + ], + }, + { + id: "build", + label: "개발 & 제작", + summary: "실제 동작하는 결과물을 팀과 함께 구현해요.", + detailTitle: "손에 잡히는 결과로 연결되는 과정", + detailDescription: + "멘토의 가이드를 받으며 디자인, 개발, 콘텐츠 제작을 병행합니다. 서로의 강점을 살려 역할을 맡고, 스프린트 방식으로 결과를 쌓아갑니다.", + keyPoints: [ + "실제 코드와 디자인 도구로 완성도를 높입니다.", + "정기적인 리뷰로 문제를 빠르게 해결합니다.", + "협업 도구를 사용해 책임감 있게 일정을 관리합니다.", + ], + }, + { + id: "launch", + label: "출시 & 회고", + summary: "사용자 앞에 결과물을 선보이고 성장 포인트를 찾습니다.", + detailTitle: "실제 세상과 만나는 경험", + detailDescription: + "완성한 결과물을 사용자에게 공개하고 피드백을 수집합니다. 발표와 회고를 통해 내가 만든 가치와 다음 목표를 스스로 정리합니다.", + keyPoints: [ + "사용자 테스트와 설문으로 생생한 반응을 확인해요.", + "발표를 통해 자신 있게 결과를 설명합니다.", + "회고를 기록하며 다음 도전을 설계합니다.", + ], + }, +]; + +export default function LearningJourneySection() { + const [selectedStageId, setSelectedStageId] = useState(journeyStages[0].id); + + const activeStageIndex = Math.max( + journeyStages.findIndex((stage) => stage.id === selectedStageId), + 0, + ); + const activeStage = journeyStages[activeStageIndex] ?? journeyStages[0]; + + return ( +
+
+
+
+ 체계적인 교육 프로세스 +
+ +
+ {journeyStages.map((stage, index) => { + const isActive = stage.id === activeStage.id; + + return ( + + ); + })} +
+
+ +
+
+ + {`Step ${activeStageIndex + 1}`} + +

{activeStage.detailTitle}

+

+ {activeStage.detailDescription} +

+
+ +
    + {activeStage.keyPoints.map((point) => ( +
  • + + {point} +
    • + ))} +
+
+
+
+ ); +}