feat: add activity demo components and sidebar functionality

[citron03]

PR Type

Enhancement

---

Description

• 새로운 활동 데모 페이지 추가.

• 확장 가능한 사이드바 컴포넌트 구현.

• 상태 보존 탭 예제 컴포넌트 포함.

• 홈 페이지에 데모 페이지 링크 추가.

---

Diagram Walkthrough

flowchart LR
  A["홈 페이지"] --> B["활동 데모 페이지"];
  B --> C["사이드바 컴포넌트"];
  B --> D["탭 예제 컴포넌트"];

Loading

File Walkthrough

Relevant files

Enhancement

Sidebar.tsx 활동 데모 사이드바 컴포넌트 추가                                                                              apps/web/app/activity-demo/Sidebar.tsx 확장/축소 기능이 있는 사이드바 컴포넌트 구현. isExpanded 상태를 관리하는 useState 훅 사용. useEffect를 사용하여 1초마다 시간을 업데이트. 경계 내에서 효과 정리 동작을 시연. +45/-0    TabsExample.tsx 활동 데모 탭 예제 컴포넌트 추가                                                                              apps/web/app/activity-demo/TabsExample.tsx 탭 선택을 위한 useState 훅을 사용하여 탭 인터페이스 구현. DOM/상태 보존을 위해 CSS 기반 숨김 처리 사용. 메시지 길이 카운터가 있는 Contact 컴포넌트 포함. +44/-0    page.tsx 활동 API 데모 페이지 추가                                                                                  apps/web/app/activity-demo/page.tsx Sidebar 및 TabsExample 컴포넌트를 렌더링하는 메인 데모 페이지. 사이드바 표시/숨김 토글 기능 구현. React 19 API에 대한 설명 및 대체(fallback) 방식 제공. API 사용 시 주의사항 명시. +50/-0    page.tsx 홈 페이지에 활동 데모 링크 추가                                                                              apps/web/app/page.tsx /activity-demo 경로로 이동하는 새 링크 추가. React Activity Test Page로의 접근성 향상. +1/-0

---

[github-actions]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review 스타일링 방식 현재 컴포넌트에서 인라인 스타일이 많이 사용되고 있어요. 데모 목적이라면 괜찮지만, 실제 프로덕션 코드에서는 유지보수성과 재사용성을 위해 CSS 모듈, Tailwind CSS, 또는 Styled Components와 같은 다른 스타일링 방식을 고려해볼 수 있습니다. <aside style={{ width: isExpanded ? 300 : 120, transition: 'width 0.25s', border: '1px solid #ddd', padding: 12, borderRadius: 8, background: '#fff', }} > 스타일링 방식 Sidebar.tsx와 마찬가지로, TabsExample.tsx에서도 인라인 스타일이 사용되고 있어요. 컴포넌트의 확장성과 가독성을 높이기 위해 스타일링 방식을 개선하는 것을 고려해볼 수 있습니다. <div style={{ border: '1px solid #eee', padding: 12, borderRadius: 8 }}> <div style={{ display: 'flex', gap: 8, marginBottom: 12 }}> 스타일링 방식 페이지 컴포넌트에서도 인라인 스타일이 사용되고 있습니다. 전체적으로 일관된 스타일링 전략을 적용하면 프로젝트의 통일성을 유지하는 데 도움이 될 거예요. <main style={{ display: 'grid', gap: 16, padding: 24 }}>

[github-actions]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
Possible issue	사이드바 컴포넌트의 조건부 렌더링을 수정합니다 ActivityDemoPage에서 사이드바를 숨길 때 CSS display: 'none'을 사용하면 Sidebar 컴포넌트가 마운트 해제되지 않아 useEffect의 정리 함수가 실행되지 않습니다. 이는 Sidebar.tsx의 useEffect 주석에 명시된 경계의 정리 동작과 모순되며, setInterval이 숨겨진 상태에서도 계속 실행되어 메모리 누수를 유발할 수 있습니다. showSidebar 상태에 따라 Sidebar 컴포넌트를 조건부로 렌더링하여 useEffect 정리가 올바르게 작동하도록 해야 합니다. apps/web/app/activity-demo/page.tsx [30-32] -<div style={{ display: showSidebar ? 'block' : 'none' }}> - <Sidebar /> -</div> +{showSidebar && ( + <div> + <Sidebar /> + </div> +)} Suggestion importance[1-10]: 8 __ Why: The suggestion correctly identifies that using display: 'none' prevents the Sidebar component's useEffect cleanup from running, leading to a setInterval memory leak. While page.tsx explicitly states the fallback preserves DOM/state, Sidebar.tsx's useEffect is designed to demonstrate cleanup, creating a contradiction in the demo's purpose.	Medium