• Add Claude AI guidance documentation for repository and web app
• Fix MarqueeText animation stuttering and add mobile click support
• Improve GradientText color visibility and remove unnecessary styling
• Add point display and check-in reward UI to CheckInModal
• Add point input field to ThumbUpModal for direct value entry
• Enhance SearchResultCard karaoke number area with click interaction
• Fix ChatBot positioning and add external host access for dev server
• Improve RankingItem layout and GradientText styling consistency
• Comment out ChatBot toggle checkbox feature for future use

Add root-level Claude AI guidance documentation

CLAUDE.md

Add comprehensive web app Claude AI guidance

apps/web/CLAUDE.md

Enable external host access for dev server

apps/web/package.json

Description

MarqueeText에서 애니메이션 중지용 클래스가 group-hover:animate-none!, animate-none! 형태로 변경되어, 코드베이스 내 다른
important 표기(!text-* 등)와 불일치합니다. Tailwind/tailwind-merge 처리에 따라 hover/click으로 애니메이션을 멈추려는 의도가
실제로 적용되지 않을 수 있습니다.

Code

apps/web/src/components/MarqueeText.tsx[R33-46]

    <div
      ref={containerRef}
      className={cn('group w-full overflow-hidden', className)}
-      onClick={onClick}
+      onClick={() => {
+        if (isOverflowing) setIsAnimationPaused(p => !p);
+        onClick?.();
+      }}
    >
      <div
        className={cn(
          'flex w-max items-center',
-          isOverflowing && 'animate-marquee group-hover:!animate-none',
+          isOverflowing && 'animate-marquee group-hover:animate-none!',
+          isAnimationPaused && 'animate-none!',
        )}

Evidence

MarqueeText는 overflow 시 marquee 애니메이션을 돌리고 hover/클릭으로 멈추게 하려는 로직인데, 애니메이션 중지 클래스 표기가 코드베이스의 다른
important 사용 패턴(leading !)과 다릅니다. 이 불일치가 Tailwind 생성/병합 단계에서 원하는 override가 되지 않는 원인이 될 수 있습니다.

apps/web/src/components/MarqueeText.tsx[33-55]
apps/web/src/components/ui/dropdown-menu.tsx[59-66]

Agent prompt

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

## Issue description
`MarqueeText`의 애니메이션 중지(hover/click) 클래스가 `animate-none!`/`group-hover:animate-none!` 형태로 변경되어, 코드베이스 내 다른 important 패턴과 불일치합니다. Tailwind 생성/`tailwind-merge` 병합 과정에서 의도한 override가 적용되지 않을 수 있어 marquee가 멈추지 않는 회귀 가능성이 있습니다.

## Issue Context
- `cn()`은 `tailwind-merge`를 사용하므로, 클래스 충돌/우선순위 처리가 중요합니다.
- 코드베이스 다른 곳은 leading `!` 형태(`...:!text-destructive`)로 important를 사용 중입니다.

## Fix Focus Areas
- apps/web/src/components/MarqueeText.tsx[33-46]
- apps/web/src/components/ui/dropdown-menu.tsx[59-66]

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

Description

CheckInModal이 useUserQuery()를 새로 호출하면서, 이미 Header에서 동일 queryKey로 호출 중인 사용자 조회가 중복 구독됩니다. 상황에 따라 모달
오픈 시 불필요한 refetch/401 에러 노이즈가 늘 수 있으므로, Header에서 받은 user/point를 props로 전달하는 구조가 더 안전합니다.

Code

apps/web/src/components/CheckInModal.tsx[R30-33]

+  const { data: user } = useUserQuery();
+  const point = user?.point ?? 0;
+  const CHECK_IN_REWARD = 30;
+

Evidence

RootLayout에서 Header가 항상 렌더링되고, Header는 이미 useUserQuery()를 호출합니다. 그 상태에서 CheckInModal까지
useUserQuery()를 추가 호출하면 동일 데이터 소스를 두 컴포넌트에서 중복으로 구독/트리거할 수 있습니다. 또한 /api/user는 비인증 시 401을 반환하므로,
비로그인 사용자에게는 에러/재요청 노이즈가 커질 수 있습니다.

apps/web/src/components/CheckInModal.tsx[28-35]
apps/web/src/Header.tsx[19-55]
apps/web/src/app/layout.tsx[101-109]
apps/web/src/app/api/user/route.ts[8-28]
apps/web/src/lib/api/user.ts[6-9]

Agent prompt

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

## Issue description
`CheckInModal`이 `useUserQuery()`를 직접 호출하면서, 전역적으로 항상 렌더링되는 `Header`의 `useUserQuery()`와 중복됩니다. 이는 모달 오픈 시점의 불필요한 구독/재요청 및(특히 비로그인 401 케이스에서) 에러 노이즈 증가 가능성이 있습니다.

## Issue Context
- `Header`는 `RootLayout`에서 항상 렌더링됩니다.
- `Header`가 이미 `useUserQuery()` 결과로 `user`를 확보하고 `isLogin`을 계산합니다.
- `/api/user`는 비인증 시 401을 반환합니다.

## Fix Focus Areas
- apps/web/src/components/CheckInModal.tsx[28-35]
- apps/web/src/Header.tsx[19-55]
- apps/web/src/app/layout.tsx[101-109]
- apps/web/src/app/api/user/route.ts[8-28]

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