[Feat] : 패치노트 페이지 추가 (#228) by GulSam00 · Pull Request #229 · GulSam00/singcode

GulSam00 · 2026-05-07T04:43:57Z

User description

📌 PR 제목

[Feat] : 패치노트 페이지 추가

📌 변경 사항

`/info/patch-notes` 페이지 신규 구현 — changelog.json을 최신 버전 역순으로 렌더링
버전별 카드 UI: 버전 제목 + 업데이트 항목 bullet 표시
`-`로 시작하는 메시지는 들여쓰기 처리하여 서브 항목 구분
`/info` 페이지 메뉴에 패치노트 카드 추가 (ScrollText 아이콘)

💬 추가 참고 사항

changelog.json은 정적 파일 import 방식 사용 (API 라우트 불필요)
close 패치노트 페이지 추가 #228

PR Type

Enhancement

Description

Add new patch notes page at /info/patch-notes route
Display changelog entries in reverse chronological order with card UI
Implement hierarchical bullet formatting for sub-items starting with -
Add patch notes menu item to /info page with ScrollText icon

Diagram Walkthrough

flowchart LR
  A["Info Page"] -->|"Add Menu Item"| B["Patch Notes Page"]
  C["changelog.json"] -->|"Import & Reverse"| B
  B -->|"Render Entries"| D["Version Cards"]
  D -->|"Format Messages"| E["Bullet Points & Sub-items"]

File Walkthrough

Relevant files

Enhancement

page.tsx `Add patch notes menu item to info page` apps/web/src/app/info/page.tsx Import `ScrollText` icon from lucide-react Add new patch notes menu item to `menuItems` array with id `patch-notes`, title `패치노트`, and description Configure menu item with `ScrollText` icon for visual representation	+7/-1
page.tsx `Create patch notes page with changelog rendering` apps/web/src/app/info/patch-notes/page.tsx Create new patch notes page component that imports and displays `changelog.json` Reverse changelog entries to show latest versions first Render each changelog entry as a card with version title and messages Implement conditional formatting: lines starting with `-` are indented sub-items, others are main bullet points Add back navigation button with `ArrowLeft` icon	+59/-0

vercel · 2026-05-07T04:44:01Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
singcode	Ready	Preview, Comment	May 7, 2026 4:44am

GulSam00 · 2026-05-07T04:44:07Z

/describe

GulSam00 · 2026-05-07T04:44:08Z

/review

qodo-code-review · 2026-05-07T04:44:09Z

Review Summary by Qodo

Add patch notes page with changelog display

✨ Enhancement

Walkthroughs

Description

• Add new patch notes page at /info/patch-notes route
• Display changelog entries in reverse chronological order with version cards
• Implement hierarchical bullet formatting for changelog messages
• Add patch notes menu item to info page with ScrollText icon

Diagram

flowchart LR
  A["Info Page"] -- "Add menu item" --> B["Patch Notes Page"]
  C["changelog.json"] -- "Import & reverse" --> B
  B -- "Render entries" --> D["Version Cards"]
  D -- "Format messages" --> E["Bullet List"]

File Changes

1. apps/web/src/app/info/page.tsx ✨ Enhancement +7/-1

Add patch notes menu item to info page

• Import ScrollText icon from lucide-react
• Add new patch notes menu item to menuItems array
• Configure menu item with id, title, description and icon

apps/web/src/app/info/page.tsx

2. apps/web/src/app/info/patch-notes/page.tsx ✨ Enhancement +59/-0

Implement patch notes page with changelog display

• Create new patch notes page component with client-side rendering
• Import and reverse changelog.json entries for display
• Render version cards with title and formatted message list
• Implement hierarchical bullet formatting with indentation for sub-items
• Add back navigation button and ScrollArea for scrollable content

apps/web/src/app/info/patch-notes/page.tsx

GulSam00 · 2026-05-07T04:44:09Z

/improve

qodo-code-review · 2026-05-07T04:44:10Z

Code Review by Qodo

🐞 Bugs (2) 📘 Rule violations (0) 📎 Requirement gaps (0)

Context used

✅ Tickets: 🎫 패치노트 페이지 추가

1. Unstable version ordering 🐞 Bug ≡ Correctness

Description

Patch notes are ordered via Object.entries(...).reverse(), which depends on JSON object insertion
order rather than semantic version ordering, so the displayed “latest first” order can become
incorrect if versions are inserted/reordered in the JSON. This can cause older releases to appear
above newer ones without any code change.

Code

apps/web/src/app/info/patch-notes/page.tsx[13]
+const entries = Object.entries(changelog as Record<string, ChangelogEntry>).reverse();

Evidence

The page reverses the object entry list instead of sorting by version; the changelog is a JSON
object keyed by version strings, so ordering correctness is tied to how keys are arranged in the
file (insertion order), not to the actual version values.

apps/web/src/app/info/patch-notes/page.tsx[11-14]
apps/web/public/changelog.json[1-20]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
`entries` is built using `Object.entries(changelog).reverse()`, which only reverses insertion order of object keys. This is not the same as “newest version first” and can silently break ordering when the JSON is edited.
### Issue Context
- `changelog.json` is a JSON object keyed by version strings.
- The UI intends to show the newest version first.
### Fix Focus Areas
- apps/web/src/app/info/patch-notes/page.tsx[11-14]
### Suggested fix
Replace `.reverse()` with an explicit sort comparator for version strings (e.g., split by `.` and compare numeric parts descending), or change `changelog.json` to an array already ordered newest-first and render it directly.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

2. Client bundles full changelog 🐞 Bug ➹ Performance

Description

PatchNotesPage is a client component and statically imports changelog.json, so the entire
changelog content is bundled into the route’s client-side JS. As changelog grows, this increases
download/parse cost unnecessarily for a read-only page.

Code

apps/web/src/app/info/patch-notes/page.tsx[R1-10]

+'use client';
+
+import { ArrowLeft } from 'lucide-react';
+import { useRouter } from 'next/navigation';
+
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import changelog from '../../../../public/changelog.json';
+

Evidence

The file is explicitly marked as a client component and imports the JSON at module scope; this
forces the JSON data into the client module graph for this route.

apps/web/src/app/info/patch-notes/page.tsx[1-10]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
The patch notes route ships `changelog.json` to the browser because the page is a client component and statically imports the JSON.
### Issue Context
This page appears read-only (no client-side state required besides back navigation), so it can be rendered as a server component and/or load data without bundling it into client JS.
### Fix Focus Areas
- apps/web/src/app/info/patch-notes/page.tsx[1-10]
### Suggested fix options
1) Convert to a server component (remove `'use client'`) and replace `router.back()` with a normal `<Link href="/info">` back button.
2) If you need it to stay client-side, fetch `/changelog.json` from `public` at runtime (or dynamically import on demand) to avoid embedding the entire JSON into the JS bundle.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

Previous review results

Review updated until commit f16ca9d

Results up to commit f16ca9d

🐞 Bugs (2) 📘 Rule violations (0) 📎 Requirement gaps (0)

Context used

✅ Tickets: 🎫 패치노트 페이지 추가

1. Unstable version ordering 🐞 Bug ≡ Correctness

Description

Patch notes are ordered via Object.entries(...).reverse(), which depends on JSON object insertion
order rather than semantic version ordering, so the displayed “latest first” order can become
incorrect if versions are inserted/reordered in the JSON. This can cause older releases to appear
above newer ones without any code change.

Code

apps/web/src/app/info/patch-notes/page.tsx[13]
+const entries = Object.entries(changelog as Record<string, ChangelogEntry>).reverse();

Evidence

The page reverses the object entry list instead of sorting by version; the changelog is a JSON
object keyed by version strings, so ordering correctness is tied to how keys are arranged in the
file (insertion order), not to the actual version values.

apps/web/src/app/info/patch-notes/page.tsx[11-14]
apps/web/public/changelog.json[1-20]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

### Issue description
`entries` is built using `Object.entries(changelog).reverse()`, which only reverses insertion order of object keys. This is not the same as “newest version first” and can silently break ordering when the JSON is edited.

### Issue Context
- `changelog.json` is a JSON object keyed by version strings.
- The UI intends to show the newest version first.

### Fix Focus Areas
- apps/web/src/app/info/patch-notes/page.tsx[11-14]

### Suggested fix
Replace `.reverse()` with an explicit sort comparator for version strings (e.g., split by `.` and compare numeric parts descending), or change `changelog.json` to an array already ordered newest-first and render it directly.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

2. Client bundles full changelog 🐞 Bug ➹ Performance

Description

PatchNotesPage is a client component and statically imports changelog.json, so the entire
changelog content is bundled into the route’s client-side JS. As changelog grows, this increases
download/parse cost unnecessarily for a read-only page.

Code

apps/web/src/app/info/patch-notes/page.tsx[R1-10]

+'use client';
+
+import { ArrowLeft } from 'lucide-react';
+import { useRouter } from 'next/navigation';
+
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import changelog from '../../../../public/changelog.json';
+

Evidence

The file is explicitly marked as a client component and imports the JSON at module scope; this
forces the JSON data into the client module graph for this route.

apps/web/src/app/info/patch-notes/page.tsx[1-10]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

### Issue description
The patch notes route ships `changelog.json` to the browser because the page is a client component and statically imports the JSON.

### Issue Context
This page appears read-only (no client-side state required besides back navigation), so it can be rendered as a server component and/or load data without bundling it into client JS.

### Fix Focus Areas
- apps/web/src/app/info/patch-notes/page.tsx[1-10]

### Suggested fix options
1) Convert to a server component (remove `'use client'`) and replace `router.back()` with a normal `<Link href="/info">` back button.
2) If you need it to stay client-side, fetch `/changelog.json` from `public` at runtime (or dynamically import on demand) to avoid embedding the entire JSON into the JS bundle.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

qodo-code-review · 2026-05-07T06:02:27Z

Code Review by Qodo

New Review Started

This review has been superseded by a new analysis

qodo-code-review · 2026-05-07T06:02:28Z

Persistent review updated to latest commit f16ca9d

qodo-code-review · 2026-05-07T06:02:33Z

PR Description updated to latest commit (f16ca9d)

Copy walkthrough table to "Files Changed" Tab

feat : 패치노트 페이지 추가 (#228)

f16ca9d

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Feat] : 패치노트 페이지 추가 (#228)#229

[Feat] : 패치노트 페이지 추가 (#228)#229
GulSam00 wants to merge 1 commit into
developfrom
feat/228-patchNotesPage

GulSam00 commented May 7, 2026 •

edited by qodo-code-review Bot

Loading

Uh oh!

vercel Bot commented May 7, 2026

Uh oh!

GulSam00 commented May 7, 2026

Uh oh!

GulSam00 commented May 7, 2026

Uh oh!

qodo-code-review Bot commented May 7, 2026

Uh oh!

GulSam00 commented May 7, 2026

Uh oh!

qodo-code-review Bot commented May 7, 2026 •

edited

Loading

Uh oh!

qodo-code-review Bot commented May 7, 2026 •

edited

Loading

Uh oh!

qodo-code-review Bot commented May 7, 2026 •

edited

Loading

Uh oh!

qodo-code-review Bot commented May 7, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

GulSam00 commented May 7, 2026 • edited by qodo-code-review Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

User description

📌 PR 제목