[FE] 마인드맵 생성 페이지

[pakxe]

Closes #370

목적

마인드맵 생성 페이지를 개발합니다.

아래 페이지부터 시작하는 전체..

작업 내용

➊ 개인 마인드맵 생성 과정

2026-02-15.10.42.39.mov

➋ 팀 마인드맵 생성 과정

2026-02-15.10.43.09.mov

➌ useFunnel

spa에서 여러 step으로 이루어진 페이지의 뒤로가기 등을 지원하기 위한 훅입니다.

제공되는 기능은 다음과 같습니다.

1. 뒤로가기 시 이전 데이터 복원
2. 뒤로 갔다 앞으로 왔을 때 데이터 복원
3. step마무리 하고 이동된 페이지에서 뒤로가기 시 step 중간이 아니라 step 진입 전의 페이지로 이동
4. 새로고침 시 데이터 유지

2026-02-15.10.47.30.mov

(로직에 대한 자세한 설명은 이후 추가하겠습니다)

결과

잘됩니다.

참고

입력한 카테고리나 데이터 기반으로 마인드맵(ydoc)을 생성하는 로직은 아직 안했습니다.

[gemini-code-assist]

Summary of Changes

Hello @pakxe, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

이 Pull Request는 마인드맵 생성 과정을 사용자 친화적인 다단계 흐름으로 재구성하여, 사용자가 개인 또는 팀 마인드맵을 쉽게 만들 수 있도록 합니다. 새로운 useFunnel 훅을 활용하여 복잡한 페이지 흐름과 상태 관리를 간소화하고, 마인드맵 생성에 필요한 정보를 단계별로 입력받아 효율적인 사용자 경험을 제공하는 데 중점을 두었습니다.

Highlights

• 마인드맵 생성 페이지 개발: 사용자가 개인 또는 팀 마인드맵을 생성할 수 있는 새로운 다단계 페이지를 구현했습니다. 이 페이지는 마인드맵 유형 선택, 카테고리 선택, 팀 마인드맵의 경우 프로젝트 이름 및 에피소드 입력 등의 단계를 포함합니다.
• useFunnel 훅 도입: 다단계 페이지의 상태 관리 및 내비게이션을 효율적으로 처리하기 위한 useFunnel 커스텀 훅을 새로 추가했습니다. 이 훅은 뒤로가기 시 데이터 복원, 새로고침 시 데이터 유지 등 복잡한 사용자 흐름을 지원합니다.
• 마인드맵 생성 API 연동: 새로운 useCreateMindmap 훅을 통해 마인드맵 생성 기능을 백엔드 API와 연동하여, 사용자가 입력한 정보를 바탕으로 마인드맵을 생성할 수 있도록 했습니다.
• UI 컴포넌트 추가 및 개선: 마인드맵 유형 선택을 위한 MindmapTypeCard, 카테고리 선택을 위한 EmojiCard, 그리고 랜딩 페이지에 사용될 Logo 및 LandingInfo 컴포넌트 등 여러 UI 컴포넌트를 새로 추가하거나 기존 컴포넌트의 스타일을 개선했습니다.

Changelog

• frontend/components.json
  • JSON 파일의 서식을 업데이트했습니다.
• frontend/src/App.tsx
  • 마인드맵 생성 페이지(CreateMindmapFunnelPage)의 import 주석을 해제하고, 라우터에 해당 페이지를 활성화했습니다.
• frontend/src/features/landing/components/Logo/logo.tsx
  • 랜딩 페이지에 사용될 Logo 컴포넌트를 새로 추가했습니다.
• frontend/src/features/landing/components/landing_info/LandingInfo.tsx
  • 랜딩 페이지 정보를 표시하기 위한 LandingInfo 컴포넌트를 새로 추가했습니다.
• frontend/src/features/mindmap/components/MindmapCard.tsx
  • 마인드맵 카드에 선택 상호작용(interaction, selected, onSelect)을 위한 props를 추가했습니다.
  • 카드 클릭 시 선택 또는 상세 페이지로 이동하는 로직을 구현했습니다.
  • 카드 선택 시 시각적 피드백을 위한 스타일(outline-primary, shadow-md)을 추가했습니다.
  • 불필요한 주석 처리된 태그 관련 코드를 제거했습니다.
• frontend/src/features/mindmap/components/MindmapCategoryStep.tsx
  • 마인드맵 생성 퍼널의 카테고리 선택 단계를 위한 MindmapCategoryStep 컴포넌트를 새로 추가했습니다.
• frontend/src/features/mindmap/components/MindmapTypeCard.tsx
  • 마인드맵 유형 선택을 위한 MindmapTypeCard 컴포넌트를 새로 추가했습니다.
• frontend/src/features/mindmap/components/MindmapTypeStep.tsx
  • 마인드맵 생성 퍼널의 유형 선택 단계를 위한 MindmapTypeStep 컴포넌트를 새로 추가했습니다.
• frontend/src/features/mindmap/components/TeamDetailStep.tsx
  • 팀 마인드맵 생성 퍼널의 상세 정보 입력 단계를 위한 TeamDetailStep 컴포넌트를 새로 추가했습니다.
• frontend/src/features/mindmap/hooks/useCreateMindmap.ts
  • 마인드맵 생성을 위한 useCreateMindmap 커스텀 훅을 새로 추가했습니다.
• frontend/src/features/mindmap/pages/CreateMindmapPage.tsx
  • 마인드맵 생성 퍼널의 메인 페이지인 CreateMindmapFunnelPage를 새로 추가했습니다.
• frontend/src/features/mindmap/pages/MindmapDetailPage.tsx
  • 마인드맵 상세 페이지인 MindmapDetailPage를 새로 추가하고, 진단 결과 사이드 패널 기능을 포함했습니다.
• frontend/src/features/mindmap/pages/MindmapPage.tsx
  • 기존의 MindmapPage 파일을 제거했습니다.
• frontend/src/features/mindmap/types/mindmap_funnel.ts
  • 마인드맵 생성 퍼널의 단계별 컨텍스트를 정의하는 CreateMindmapFunnel 타입을 새로 추가했습니다.
• frontend/src/global.css
  • 랜딩 페이지 배경 이미지 스타일을 위한 .bg-landing CSS 클래스를 추가했습니다.
• frontend/src/shared/components/call_to_action_button/CallToActionButton.tsx
  • CallToActionButton의 quaternary_accent_outlined variant에 호버 스타일을 추가했습니다.
• frontend/src/shared/components/emoji_card/EmojiCard.tsx
  • 이모지 및 라벨을 표시하고 선택 상태를 나타내는 EmojiCard 컴포넌트를 새로 추가했습니다.
• frontend/src/shared/components/global_navigation_bar/GlobalNavigationBar.tsx
  • GlobalNavigationBar의 transparent variant에 backdrop-blur-xs 스타일을 추가하여 시각적 효과를 개선했습니다.
• frontend/src/shared/components/top/Top.tsx
  • Top 컴포넌트의 내부 div에서 불필요한 className prop을 제거했습니다.
• frontend/src/shared/hooks/useFunnel.ts
  • 다단계 페이지 흐름과 상태 관리를 위한 useFunnel 커스텀 훅을 새로 추가했습니다.
• frontend/src/shared/types/utility_type.ts
  • useFunnel 훅에서 사용되는 SelectFrom, MissingRequiredKeys, UnknownRecord 등의 유틸리티 타입을 새로 추가했습니다.
• frontend/src/shared/utils/route.ts
  • 경로 정의(PATHS)에서 self_diagnosis를 self_diagnoses로 변경하고, 세부 경로(start, question, question_result)를 추가했습니다.
  • 새로운 diagnoses 경로와 관련 링크 생성 함수(applyExisting, applyNew)를 추가했습니다.
• frontend/tsconfig.json
  • TypeScript 설정에 @/assets 경로 별칭을 추가했습니다.
• frontend/vite.base.ts
  • Vite 설정에 @/assets 경로 별칭을 추가했습니다.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

이 PR은 여러 단계로 구성된 퍼널(funnel)을 갖춘 마인드맵 생성 페이지를 도입하는 중요한 새 기능입니다. 특히 useFunnel 커스텀 훅의 구현이 인상적이며, 브라우저 히스토리와 상태 복원을 처리하면서 복잡한 다단계 흐름을 관리하기 위한 견고한 솔루션을 제공합니다. 코드는 잘 구조화되어 있고 새로운 컴포넌트들도 멋지게 디자인되었습니다. 위에 제시된 코드 리뷰 의견들은 코드 일관성 및 사용자 경험과 관련하여 몇 가지 사소한 개선 제안을 포함하고 있으며, 전반적으로 매우 수준 높은 기여입니다.

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 7e30d40f94

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

[arty0928]

고생하셨습니다! 마인드맵 생성 페이지 너무 예쁘게 잘 구현해주셨네요~

[pakxe]

@arty0928
리뷰반영했스빈다 확인부탁드려요~

[arty0928]

@pakxe

확인했습니당~