From 245c287a9dc601f24d6443b07c1cb2eda92bef81 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=AF=BC=ED=97=8C?= Date: Tue, 16 Jun 2026 14:33:23 +0900 Subject: [PATCH] =?UTF-8?q?[refactor]=20front:=20=EA=B3=B5=ED=86=B5=20UI?= =?UTF-8?q?=EB=A5=BC=20components=20=EB=94=94=EB=A0=89=ED=84=B0=EB=A6=AC?= =?UTF-8?q?=EB=A1=9C=20=EC=A0=95=EB=A6=AC=20+=20Logo=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8/=EB=A1=9C=EA=B3=A0=20=EC=97=90=EC=85=8B=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Opus 4.8 (1M context) --- front/src/assets/imarketkorea-logo-white.png | Bin 0 -> 8314 bytes front/src/assets/imarketkorea-logo.png | Bin 0 -> 2883 bytes .../src/{component => components}/Button.tsx | 3 +- front/src/{component => components}/Input.tsx | 0 front/src/components/Logo.tsx | 56 ++++++++++++++++++ front/src/{component => components}/cn.ts | 0 front/src/{component => components}/index.ts | 2 + 7 files changed, 60 insertions(+), 1 deletion(-) create mode 100644 front/src/assets/imarketkorea-logo-white.png create mode 100644 front/src/assets/imarketkorea-logo.png rename front/src/{component => components}/Button.tsx (93%) rename front/src/{component => components}/Input.tsx (100%) create mode 100644 front/src/components/Logo.tsx rename front/src/{component => components}/cn.ts (100%) rename front/src/{component => components}/index.ts (66%) diff --git a/front/src/assets/imarketkorea-logo-white.png b/front/src/assets/imarketkorea-logo-white.png new file mode 100644 index 0000000000000000000000000000000000000000..297c69c2e12abfcf044d19c593f7767d3c4f2f53 GIT binary patch literal 8314 zcmeHNZ%i9y7{7K^D@Z6uDBA+IO}ZGTTXoYhgzak6r6pU6EJG4ufRlunuoNT)5$J&_ znbj!cgBx>5)wwJYLop_Rar6jmX%x4U_@~P{cLN3$wU%hJJJ)q2!n!$z(b ztiXY$)mC;)3qPIOhBq$ITgc4|yu~Oz+>a z#r2}omH&}mt6Ki0#JF6aeWtd76UK)}lf9|)p-bidU@(!bQfst2qxHi~VN-`6zm}_v zx~Ga%rujogYc~e>zk8qe%99^F@E|mUW7B*gnn!U!`S4G1k;C+m)GeU*x42}ORja9{ zuAhgQ=bd(myi5Ygo!AzY(fEXUHL)0?`$CJc@2Y})Wv~5*d_3pdVu;M2G+z4)N1W!7 zBDdGBX@!1zo>rOq^|`q3u+zR<{`-ww9scrOQ~!k5e)kpG-~cq(hYV00P(C1Bp!$I7 zBw7y8vWV!xJ)%ip)EO-GB$-Oa!cl^D_<^VN;Q$a*Kv-@R1iqw}i1IA~iscJyNoi^J zY#_j_q~giF9!V&qX`YRPIhvX5;9}=!KLLK5Ih9TAI1y54;*Qmo?=RKWO8X`|ct!}# zGH-?0SxVsGmM=;L#T3uNLxKps!Lx0hpg2GQ2SJKL)E{H01-6efFvEhtMZ$sAP@FF( z!1YBc*wq5kvQMpXX}ni_?>EY75zqj6IF48)=|5uwPdQA6BKixRhP0RqP)HY-SB2&}X5gNy#Y z{82Y)7TL2JDItj|O1ya3p;V7YSJ&DSR9$f6tFJA91Q*FXJnOjgDN7jc9gvIT9;hL2 zU(WfP^4x98`EoGVXss`|IzPGQwJ+d!|Ew%clTe!8gwhllpg5p>K)68l0o6&g9H3

v$es#dqz83=KZ})9dg^iciV}(0b?7?$Zetx}o;1kN*g5u(Crg`-rXnjXwdzShkk{ literal 0 HcmV?d00001 diff --git a/front/src/assets/imarketkorea-logo.png b/front/src/assets/imarketkorea-logo.png new file mode 100644 index 0000000000000000000000000000000000000000..9b0d88ab8a86e16b4c3c983254d53f4761a69356 GIT binary patch literal 2883 zcmcguU1%Id9Nz}S*cugDsEE{M>w}_uyR#p+yF<^C<}T*27t`d>SV5edox5A^c4yt) z^KM_G&DX0&n_)@I;Abqe}5FdO|?1Qs=dz&;SO`3=YyE`-Y zpWpBQJ@e|s_@hJH@7d0A+)#O}ILW?W$IsvZdkfI|hJ9}H$DRr~ZpY5}*~XnXc{j%m zzTs4-qv^^)h^d=HHm#9d*Y%k+$L-tS^$~87h_8``;}wM8Kl?)99lIbrsaNERKSG+$ z*nB{y=EtjezJ)DY*#8K>uL~J~OCrQ~-L@CPZb3+JAsffblE5b-QL7*f$AtWJWr81} z0pYD25V0&PykX@~9_3XlZ=#2JMOHLPRwX$v0swUd$~vF^1V$LxbvRiZP3hRIAT*=M zhmzFkbaEXvM}vk0EX$H)MN$-zNr>T`7oo1`g?sx5MH1q`@gs+Ne2j={bS5eYOxd0l zuAjkrVd^R7GpUPw3FPG1szlJnnVdfpv=ee0OQcO);zc2o1(~ehq!A69bPee2@9PMd zcPo{QV^v*TH=_un(kwG0b;zpHVRgGj1U?G`9HDI*Fk+^i znrKm}z_J%c$it*uEC|emoa5NAhLC|&1&Bb=kf>QY5=|2j(J~EW8k%MrHtz2)Qalr9 zM!dgQCpN_lV~JJOSs5rY5M@(WL`~LA(bO1Zy}D;+u@U(f(Xa8 zQV?()XJQNKva^amHpHCn?=%Smy+QDM>>;g39Tbq^2J_uU@=IDv{}9dISbJT^H6W|1 zh%C((HBDuK1ofIo3@u*Ph=I+%^((ahcRp@X`_wtOiM$439as|9v2Sn^~4{d_?)B^k0+5CV{iebIVyW75M*GL)d-As*&khZM+qvO84(%)*x~uf< zap%iZBVQfd_QbAtuRV5b;nTAp|9$D!pH3Vt9hkoV=3jfBe&yJe=UclP3m00g_w*s;I+^OA%uf7PrkFUAq M(s=Q`1JAzv4^e`s6951J literal 0 HcmV?d00001 diff --git a/front/src/component/Button.tsx b/front/src/components/Button.tsx similarity index 93% rename from front/src/component/Button.tsx rename to front/src/components/Button.tsx index fce5fe4..6d5c995 100644 --- a/front/src/component/Button.tsx +++ b/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' diff --git a/front/src/component/Input.tsx b/front/src/components/Input.tsx similarity index 100% rename from front/src/component/Input.tsx rename to front/src/components/Input.tsx diff --git a/front/src/components/Logo.tsx b/front/src/components/Logo.tsx new file mode 100644 index 0000000..8278918 --- /dev/null +++ b/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 = { + color: logoColor, // 브랜드 블루 심볼 — 밝은 배경용 + white: logoWhite, // 화이트 심볼 — 어두운 배경용 +} + +// 심볼 높이에 맞춰 텍스트도 함께 스케일한다. +const sizes: Record = { + 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, '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 ( +

+ {withText + {withText && ( + + iMarket Korea + + )} +
+ ) +} + +export default Logo diff --git a/front/src/component/cn.ts b/front/src/components/cn.ts similarity index 100% rename from front/src/component/cn.ts rename to front/src/components/cn.ts diff --git a/front/src/component/index.ts b/front/src/components/index.ts similarity index 66% rename from front/src/component/index.ts rename to front/src/components/index.ts index 5221b7f..c47bd32 100644 --- a/front/src/component/index.ts +++ b/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'