🔀 :: 문제 설명, 풀이 페이지 구현 및 연결

[jiwoo1222]

📃 작업내용

🖥️ 문제풀이 화면 전환 및 상태 관리 구조 구현
화면 분기 상태(State) 설계: 홈, 문제 상세 페이지, 코드 에디터 페이지 간의 유기적인 흐름을 제어하기 위해 App.tsx에 solvingProblem(선택한 문제 데이터)과 isEditing(에디터 진입 여부) 상태를 구축했습니다.

조건부 렌더링 트리 정립:

isEditing과 solvingProblem이 모두 활성화되면 ➡️ CodeEditorPage 오픈
문제만 선택된 상태(solvingProblem만 존재)면 ➡️ ProblemDetailPage 오픈

그 외 기본 상태면 ➡️ 메인 워크스페이스(홈/메뉴) 노출

프롭스(Props) 및 타입 인터페이스 매핑: CodeEditorPage 컴포넌트가 부모로부터 문제 데이터(problem)와 이탈 함수(onBack)를 안전하게 주입받아 동적으로 화면을 그리도록 TypeScript 인터페이스(CodeEditorPageProps)를 연결하고 컴파일 에러를 해결했습니다.

🔍 테스트 방법

1. 일반 홈/메뉴 상태 확인
   방법: 상단 탑바 메뉴(문제, 학습, 랭킹 등)를 자유롭게 탭해봅니다.
   패스 기준: 문제풀이나 에디터 화면이 끼어들지 않고 각 메뉴에 맞는 화면(SceneTitle)이 정상적으로 나와야 합니다.

2. 문제 상세 페이지 진입 테스트
   방법: '문제' 메뉴나 홈 화면에서 목록에 있는 아무 문제나 선택해 [풀기] 버튼을 누릅니다.
   패스 기준: 메인 화면이 숨겨지면서 내가 방금 클릭한 문제가 ProblemDetailPage에 상세하게 나타나야 합니다.
   (상세하게 나타나는 건 아직 문제 출제 ai를 연동하지 않았기 때문에 한 문제의 설명으로 나타나게끔 통일해두었습니다.)

3. 코드 에디터 페이지 진입 및 데이터 연동 테스트 (핵심)
   방법: 상세 페이지 안에서 [풀이 시작](혹은 시작 버튼)을 누릅니다.
   패스 기준: 에러 없이 CodeEditorPage로 즉시 화면이 전환되어야 하며, 상단 헤더에 내가 고른 실제 문제 제목(예: "1001번 A+B 풀이")과 난이도 정보가 동적으로 띄워져야 합니다.

4. 에디터 나가기(뒤로가기) 및 상태 초기화 테스트
   방법: 에디터 화면 상단의 ← 나가기 버튼을 눌러봅니다. (상세 페이지나 목록으로 가는지 확인)
   그 상태에서 상단 탑바의 다른 메뉴(예: '랭킹' 또는 '게시판')를 탭해봅니다.
   패스 기준: 에디터에서 나가면 이전 화면으로 튕겨야 하며, 다른 메뉴를 탭했을 때는 isEditing과 solvingProblem 상태가 모두 깔끔하게 비워져서 에디터 잔상이 남지 않아야 합니다.

🖼️ 스크린샷

🙋 질문사항

• 화면 분기 및 렌더링 조건 처리: App.tsx에서 isEditing과 solvingProblem 두 상태값의 조합으로 홈 ➡️ 상세 ➡️ 에디터로 이어지는 3단계 화면 전환을 처리했습니다. 이 조건부 렌더링 구조가 복잡하거나 가독성을 해치지 않는지 검토 부탁드립니다.

• TypeScript 타입 바인딩: CodeEditorPage가 독립된 페이지 컴포넌트로서 부모의 상태를 제어할 수 있도록 problem: ProblemItem과 onBack: () => void 프롭스 타입을 명시했습니다. 상호 의존성이나 타입 지정 방식에 개선할 점이 있을지 봐주시면 감사하겠습니다.

• 네비게이션 이동 시 상태 초기화: 상단 탑바 메뉴를 클릭해 다른 메뉴로 완전히 이탈할 때 setIsEditing(false)와 setSolvingProblem(null)을 통해 기존 풀이 상태를 초기화하도록 handleNavClick에 반영했습니다. 이 흐름에서 사이드 이펙트나 메모리 누수 우려가 없는지 확인받고 싶습니다.

• 개선할 점, 오타, 코드에 이상한 부분이 있다면 Comment 달아주세요.

✅ 체크리스트

• 코드가 정상적으로 컴파일되고 실행되는지 확인했습니다.
• 불필요한 코드가 없는지 확인했습니다.
• 코드 스타일 가이드를 준수했습니다.
• 기존 기능이 정상적으로 작동하는지 확인했습니다.