refactor(front): 공용 컴포넌트/유틸 구조 정비

- cn·interactive를 components에서 lib로 분리 (컴포넌트와 순수 유틸 경계 정리)
- core/provider.tsx → Provider.tsx 개명 (컴포넌트 파일 PascalCase 통일)
- 불필요한 주석 정리

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

front/src/components/Button.tsx

@@ -1,5 +1,5 @@
 import { type ComponentProps } from 'react'
-import { cn } from '@/components/cn'
+import { cn, interactive } from '@/lib'
 
 export type ButtonVariant =
   | 'primary'
@@ -10,20 +10,18 @@ export type ButtonVariant =
 export type ButtonSize = 'sm' | 'md' | 'lg'
 
 const base =
-  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium ' +
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium select-none ' +
-  'transition-[color,background-color,transform] cursor-pointer select-none ' +
+  interactive +
-  'active:scale-[0.98] ' +
+  ' focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ' +
-  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ' +
   'disabled:pointer-events-none disabled:opacity-50'
 
-// hover 는 한 단계 톤다운(brand-700) — 디자인 선호
 const variantClass: Record<ButtonVariant, string> = {
-  primary: 'bg-primary text-primary-foreground hover:bg-brand-700',
+  primary: 'bg-primary text-primary-foreground',
-  secondary: 'bg-secondary text-secondary-foreground hover:bg-border',
+  secondary: 'bg-secondary text-secondary-foreground',
-  outline:
+  outline: 'border border-input bg-background',
-    'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+  // 투명 배경이라 brightness 무효 → bg 하이라이트
   ghost: 'hover:bg-accent hover:text-accent-foreground',
-  destructive: 'bg-destructive text-white hover:opacity-90',
+  destructive: 'bg-destructive text-white',
 }
 
 const sizeClass: Record<ButtonSize, string> = {

front/src/components/Input.tsx

@@ -1,5 +1,5 @@
 import { type ComponentProps } from 'react'
-import { cn } from '@/components/cn'
+import { cn } from '@/lib'
 
 export function Input({ type = 'text', className, ...props }: ComponentProps<'input'>) {
   return (

front/src/components/Logo.tsx

@@ -1,5 +1,5 @@
 import { type ComponentProps } from 'react'
-import { cn } from '@/components/cn'
+import { cn } from '@/lib'
 import logoColor from '@/assets/imarketkorea-logo.png'
 import logoWhite from '@/assets/imarketkorea-logo-white.png'
 
@@ -7,11 +7,10 @@ export type LogoVariant = 'color' | 'white'
 export type LogoSize = 'sm' | 'md' | 'lg'
 
 const sources: Record<LogoVariant, string> = {
-  color: logoColor, // 브랜드 블루 심볼 — 밝은 배경용
+  color: logoColor,
-  white: logoWhite, // 화이트 심볼 — 어두운 배경용
+  white: logoWhite,
 }
 
-// 심볼 높이에 맞춰 텍스트도 함께 스케일한다.
 const sizes: Record<LogoSize, { img: string; text: string; gap: string }> = {
   sm: { img: 'h-6', text: 'text-base', gap: 'gap-1.5' },
   md: { img: 'h-8', text: 'text-xl', gap: 'gap-2' },
@@ -21,9 +20,7 @@ const sizes: Record<LogoSize, { img: string; text: string; gap: string }> = {
 export interface LogoProps extends Omit<ComponentProps<'div'>, 'children'> {
   variant?: LogoVariant
   size?: LogoSize
-  /** 워드마크(iMarket Korea) 텍스트 노출 여부 */
   withText?: boolean
-  /** 심볼 이미지 alt */
   alt?: string
 }
 

front/src/components/cn.ts

@@ -1,11 +0,0 @@
-// 경량 className 병합 헬퍼 (외부 의존성 없음).
-// falsy 값을 걸러 공백으로 join 한다. 조건부 클래스: cn('base', isActive && 'active').
-//
-// 주의: tailwind-merge 가 아니므로 같은 속성의 Tailwind 유틸이 충돌할 때
-//       (예: 'px-4' + 'px-2') 자동 정리는 하지 않는다. 전달한 className 을
-//       뒤에 두어 우선하도록 의도하지만, 최종 승자는 CSS 출력 순서를 따른다.
-export type ClassValue = string | number | false | null | undefined
-
-export function cn(...classes: ClassValue[]): string {
-  return classes.filter(Boolean).join(' ')
-}

front/src/components/index.ts

@@ -1,4 +1,3 @@
-export { cn } from '@/components/cn'
 export { Button } from '@/components/Button'
 export type { ButtonProps, ButtonVariant, ButtonSize } from '@/components/Button'
 export { Input } from '@/components/Input'

front/src/lib/cn.ts

@@ -0,0 +1,6 @@
+// className 병합. tailwind-merge 아님 — 같은 속성 충돌 시 CSS 출력 순서가 승자.
+export type ClassValue = string | number | false | null | undefined
+
+export function cn(...classes: ClassValue[]): string {
+  return classes.filter(Boolean).join(' ')
+}

front/src/lib/index.ts

@@ -0,0 +1,4 @@
+// 전역 순수 유틸/스타일
+export { cn } from '@/lib/cn'
+export type { ClassValue } from '@/lib/cn'
+export { interactive } from '@/lib/interactive'

front/src/lib/interactive.ts

@@ -0,0 +1,3 @@
+// 공통 인터랙션: hover=brightness↓, active=scale↓. transform/filter 만 전환(잔상 방지).
+export const interactive =
+  'transition-[transform,filter] duration-150 ease-out cursor-pointer hover:brightness-[0.97] active:scale-[0.98]'