[refactor] front: 공통 UI를 components 디렉터리로 정리 + Logo 컴포넌트/로고 에셋 추가

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

front/src/components/Button.tsx

@@ -11,7 +11,8 @@ export type ButtonSize = 'sm' | 'md' | 'lg'
 
 const base =
   'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium ' +
-  'transition-colors cursor-pointer select-none ' +
+  'transition-[color,background-color,transform] cursor-pointer select-none ' +
+  'active:scale-[0.98] ' +
   'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ' +
   'disabled:pointer-events-none disabled:opacity-50'
 

front/src/components/Logo.tsx

@@ -0,0 +1,56 @@
+import { type ComponentProps } from 'react'
+import { cn } from './cn'
+import logoColor from '@/assets/imarketkorea-logo.png'
+import logoWhite from '@/assets/imarketkorea-logo-white.png'
+
+export type LogoVariant = 'color' | 'white'
+export type LogoSize = 'sm' | 'md' | 'lg'
+
+const sources: Record<LogoVariant, string> = {
+  color: logoColor, // 브랜드 블루 심볼 — 밝은 배경용
+  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' },
+  lg: { img: 'h-10', text: 'text-2xl', gap: 'gap-2.5' },
+}
+
+export interface LogoProps extends Omit<ComponentProps<'div'>, 'children'> {
+  variant?: LogoVariant
+  size?: LogoSize
+  /** 워드마크(iMarket Korea) 텍스트 노출 여부 */
+  withText?: boolean
+  /** 심볼 이미지 alt */
+  alt?: string
+}
+
+export function Logo({
+  variant = 'color',
+  size = 'md',
+  withText = true,
+  alt = 'iMarket Korea',
+  className,
+  ...props
+}: LogoProps) {
+  const s = sizes[size]
+
+  return (
+    <div className={cn('flex items-center', s.gap, className)} {...props}>
+      <img
+        src={sources[variant]}
+        alt={withText ? '' : alt}
+        className={cn('w-auto select-none', s.img)}
+      />
+      {withText && (
+        <span className={cn('font-bold tracking-[-0.4px] text-foreground', s.text)}>
+          iMarket Korea
+        </span>
+      )}
+    </div>
+  )
+}
+
+export default Logo

front/src/components/index.ts

@@ -2,3 +2,5 @@ export { cn } from './cn'
 export { Button } from './Button'
 export type { ButtonProps, ButtonVariant, ButtonSize } from './Button'
 export { Input } from './Input'
+export { Logo } from './Logo'
+export type { LogoProps, LogoVariant } from './Logo'