Fix/UI ux

[GulSam00]

📌 PR 제목

[Type] : 작업 내용 요약

📌 변경 사항

• Claude 세팅, Claude 주도 개발
• UI/UX 요소 개선

💬 추가 참고 사항

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
singcode	Building	Preview, Comment	Mar 5, 2026 4:34pm

[qodo-code-review]

Review Summary by Qodo

Add Claude documentation and improve UI/UX with animations, modals, and interactions

✨ Enhancement 🐞 Bug fix

Walkthroughs

Description

• Add Claude AI guidance documentation for repository and web app
• Improve UI/UX with checkbox toggle, point display, and input controls
• Fix MarqueeText animation jitter and add mobile click support
• Enhance GradientText visibility and SearchResultCard interactivity
• Update ChatBot positioning and add dev server external access

Diagram

flowchart LR
  A["Documentation<br/>CLAUDE.md files"] --> B["Enhanced UI Components"]
  C["Animation Fixes<br/>MarqueeText"] --> B
  D["Modal Improvements<br/>CheckIn, ThumbUp"] --> B
  E["Interaction Updates<br/>SearchResult, GradientText"] --> B
  B --> F["Better User Experience"]
  G["Dev Server Config<br/>External Access"] --> F

Loading

File Changes

1. CLAUDE.md 📝 Documentation +74/-0

Add root-level Claude AI guidance documentation

CLAUDE.md

---

2. apps/web/CLAUDE.md 📝 Documentation +145/-0

Add comprehensive web app Claude AI guidance

apps/web/CLAUDE.md

---

3. apps/web/package.json ⚙️ Configuration changes +1/-1

Enable external host access for dev server

apps/web/package.json

---

View more (9)

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

Improve point display gradient color visibility

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

---

5. apps/web/src/app/search/ChatBot.tsx 🐞 Bug fix +1/-1

Fix ChatBot fixed positioning on mobile

apps/web/src/app/search/ChatBot.tsx

---

6. apps/web/src/app/search/HomePage.tsx Miscellaneous +36/-9

Comment out ChatBot toggle and adjust scroll height

apps/web/src/app/search/HomePage.tsx

---

7. apps/web/src/app/search/SearchResultCard.tsx ✨ Enhancement +9/-3

Add karaoke number area click interaction

apps/web/src/app/search/SearchResultCard.tsx

---

8. apps/web/src/components/CheckInModal.tsx ✨ Enhancement +36/-3

Add current points and check-in reward UI display

apps/web/src/components/CheckInModal.tsx

---

9. apps/web/src/components/MarqueeText.tsx 🐞 Bug fix +8/-3

Fix animation jitter and add pause on click

apps/web/src/components/MarqueeText.tsx

---

10. apps/web/src/components/RankingItem.tsx ✨ Enhancement +12/-14

Refactor layout and improve GradientText styling

apps/web/src/components/RankingItem.tsx

---

11. apps/web/src/components/ThumbUpModal.tsx ✨ Enhancement +19/-1

Add point input field for direct value entry

apps/web/src/components/ThumbUpModal.tsx

---

12. apps/web/src/components/reactBits/GradientText.tsx 🐞 Bug fix +1/-1

Remove rounded border styling for better visibility

apps/web/src/components/reactBits/GradientText.tsx

---

[qodo-code-review]

Code Review by Qodo

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

1. Stale points after check-in 🐞 Bug ✓ Correctness

Description

The check-in DONE screen renders the user’s current point from useUserQuery(), but the animation
flow transitions to DONE without waiting for the check-in mutation/refetch. On slow networks the UI
can show the old point total (missing the +30 reward), undermining trust in the reward system.

Code

apps/web/src/components/CheckInModal.tsx[R89-99]

+                <div className="bg-muted flex flex-col items-center gap-1 rounded-lg p-3">
+                  <span className="text-muted-foreground text-xs font-bold tracking-widest uppercase">
+                    Current Points
+                  </span>
+                  <GradientText
+                    className="text-2xl font-black tracking-tighter"
+                    colors={['#FFD700', '#FFA000', '#E65100']}
+                  >
+                    <CountUp to={point} duration={0.5} separator="," />
+                  </GradientText>
+                </div>

Evidence

CheckInModal reads point from useUserQuery() and displays it in the DONE view. The click
triggers patchUserCheckIn() but the animation flow immediately goes to PLAYING and then DONE on
animation completion, independent of whether the mutation/refetch has completed. The mutation only
invalidates the query on success (async), and the server increments points by 30, so timing can
cause the DONE view to render with the pre-mutation point.

apps/web/src/components/CheckInModal.tsx[28-42]
apps/web/src/components/CheckInModal.tsx[87-109]
apps/web/src/components/ActionAnimationFlow.tsx[29-35]
apps/web/src/components/ActionAnimationFlow.tsx[35-56]
apps/web/src/queries/userQuery.ts[21-27]
apps/web/src/app/api/user/check-in/route.ts[20-25]

Agent prompt

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

## Issue description
Check-in DONE 화면에서 `useUserQuery()`의 `point`를 그대로 렌더링하는데, 체크인 요청/리패치 완료 여부와 무관하게 애니메이션 완료 시 DONE으로 전환됩니다. 네트워크 지연 시 DONE 화면에 +30이 반영되지 않은 기존 포인트가 표시될 수 있습니다.

## Issue Context
- 체크인 API는 서버에서 `point + 30`을 수행합니다.
- `usePatchUserCheckInMutation`은 성공 시 invalidate만 수행하며 optimistic update가 없습니다.
- `ActionAnimationFlow`는 clickCallback을 await하지 않고 즉시 PLAYING으로 전환 후 애니메이션 완료 시 DONE을 렌더링합니다.

## Fix Focus Areas
- apps/web/src/queries/userQuery.ts[21-33]
- apps/web/src/components/ActionAnimationFlow.tsx[29-56]
- apps/web/src/components/CheckInModal.tsx[28-109]

## Suggested approach
1) `usePatchUserCheckInMutation`에 `onMutate`를 추가하여 `['userCheckIn']` 캐시를 즉시 `point + 30`, `last_check_in = new Date()`로 업데이트하고, `onError`에서 롤백합니다.
2) DONE 화면은 그대로 `point`를 표시하되, optimistic update로 인해 애니메이션 종료 시점에는 이미 증가된 값이 보이도록 만듭니다.
3) (대안) `ActionAnimationFlow`가 async clickCallback을 지원하도록 변경하고 DONE 전환을 mutation 완료 이후로 지연합니다.

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

---

2. Dev server bound to 0.0.0.0 🐞 Bug ⛨ Security

Description

next dev가 기본적으로 모든 인터페이스(0.0.0.0)에 바인딩되도록 변경되어, 동일 LAN의 다른 기기에서 개발 서버와 /api/* 라우트에 접근 가능해집니다.
의도된 변경이 아니라면 기본값(localhost)로 되돌리거나 별도 스크립트로 분리하는 게 안전합니다.

Code

apps/web/package.json[7]

+    "dev": "next dev --turbopack -H 0.0.0.0",

Evidence

apps/web의 dev 스크립트가 -H 0.0.0.0로 변경되어 개발 서버가 로컬 머신 외부에서도 접근 가능해집니다. 레포 가이드에서도 개발은 pnpm dev로
수행하도록 안내하고 있어(개발자 기본 경로), 의도하지 않은 노출이 반복될 수 있습니다.

apps/web/package.json[6-10]
CLAUDE.md[11-18]

Agent prompt

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

## Issue description
`apps/web`의 `dev` 스크립트가 `-H 0.0.0.0`로 변경되어 개발 서버가 LAN에 노출됩니다. 의도되지 않은 경우 보안 리스크가 될 수 있습니다.

## Issue Context
- 레포 가이드에서 일반적인 개발 시작 방법으로 `pnpm dev`/`pnpm dev-web`를 안내합니다.
- 기본 dev 스크립트가 LAN 바인딩이면 개발자가 매번 opt-in 없이 노출하게 됩니다.

## Fix Focus Areas
- apps/web/package.json[6-13]
- CLAUDE.md[11-20]

## Suggested approach
1) `dev`를 원래대로 되돌리고(`next dev --turbopack`),
2) LAN 테스트용으로만 `dev:lan`: `next dev --turbopack -H 0.0.0.0` 같은 별도 스크립트를 추가하거나,
3) `DEV_HOST` 환경변수로 opt-in: `next dev --turbopack -H ${DEV_HOST:-127.0.0.1}` 형태로 제어하고 문서에 주의사항을 명시합니다.

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

---

ⓘ The new review experience is currently in Beta. Learn more