From ad16854ce65d56f44458fbef1f1aaf769ca61079 Mon Sep 17 00:00:00 2001 From: Park Chan Hyeok <56295771+WithM2@users.noreply.github.com> Date: Fri, 10 Oct 2025 14:47:02 +0900 Subject: [PATCH 1/2] feat: redesign ko journey section --- src/app/ko/page.tsx | 3 + src/components/ko/LearningJourneySection.tsx | 134 +++++++++++++++++++ 2 files changed, 137 insertions(+) create mode 100644 src/components/ko/LearningJourneySection.tsx 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..8e94dab --- /dev/null +++ b/src/components/ko/LearningJourneySection.tsx @@ -0,0 +1,134 @@ +"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 activeStage = + journeyStages.find((stage) => stage.id === selectedStageId) ?? journeyStages[0]; + + return ( +
+
+
+

+ IAKKA의 프로젝트는 피라미드 단계를 따라가며 점진적으로 성장합니다. 각 버튼을 눌러 단계별 경험을 살펴보세요. +

+ +
+ {journeyStages.map((stage) => { + const isActive = stage.id === activeStage.id; + + return ( + + ); + })} +
+
+ +
+ + {`Step ${journeyStages.indexOf(activeStage) + 1}`} + +

{activeStage.detailTitle}

+

+ {activeStage.detailDescription} +

+ +
    + {activeStage.keyPoints.map((point) => ( +
  • + + {point} +
    • + ))} +
+
+
+
+ ); +} From 21aec60e7a9c48dad762d330b92e606c55737a01 Mon Sep 17 00:00:00 2001 From: Park Chan Hyeok <56295771+WithM2@users.noreply.github.com> Date: Fri, 10 Oct 2025 15:19:19 +0900 Subject: [PATCH 2/2] Refine KO learning journey layout --- src/components/ko/LearningJourneySection.tsx | 41 +++++++++++--------- 1 file changed, 23 insertions(+), 18 deletions(-) diff --git a/src/components/ko/LearningJourneySection.tsx b/src/components/ko/LearningJourneySection.tsx index 8e94dab..2961338 100644 --- a/src/components/ko/LearningJourneySection.tsx +++ b/src/components/ko/LearningJourneySection.tsx @@ -69,19 +69,22 @@ const journeyStages: JourneyStage[] = [ export default function LearningJourneySection() { const [selectedStageId, setSelectedStageId] = useState(journeyStages[0].id); - const activeStage = - journeyStages.find((stage) => stage.id === selectedStageId) ?? journeyStages[0]; + const activeStageIndex = Math.max( + journeyStages.findIndex((stage) => stage.id === selectedStageId), + 0, + ); + const activeStage = journeyStages[activeStageIndex] ?? journeyStages[0]; return (
-
-
-

- IAKKA의 프로젝트는 피라미드 단계를 따라가며 점진적으로 성장합니다. 각 버튼을 눌러 단계별 경험을 살펴보세요. -

+
+
+
+ 체계적인 교육 프로세스 +
- {journeyStages.map((stage) => { + {journeyStages.map((stage, index) => { const isActive = stage.id === activeStage.id; return ( @@ -96,7 +99,7 @@ export default function LearningJourneySection() { }`} >
- {`Step ${journeyStages.indexOf(stage) + 1}`} + {`Step ${index + 1}`}
{stage.label} @@ -110,16 +113,18 @@ export default function LearningJourneySection() {
-
- - {`Step ${journeyStages.indexOf(activeStage) + 1}`} - -

{activeStage.detailTitle}

-

- {activeStage.detailDescription} -

+
+
+ + {`Step ${activeStageIndex + 1}`} + +

{activeStage.detailTitle}

+

+ {activeStage.detailDescription} +

+
-
    +
      {activeStage.keyPoints.map((point) => (