From 113ad6a0f7653a692647173f29e3c8cb768c3cbe Mon Sep 17 00:00:00 2001 From: kimminna Date: Mon, 29 Jun 2026 15:16:42 +0900 Subject: [PATCH 01/19] =?UTF-8?q?chore(ui):=20timo-design-system=20?= =?UTF-8?q?=EC=9D=98=EC=A1=B4=EC=84=B1=20=EC=B6=94=EA=B0=80=20(#48)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Storybook 커스터마이징에 필요한 패키지 의존성을 추가했습니다 --- packages/timo-design-system/package.json | 2 ++ pnpm-lock.yaml | 6 ++++++ 2 files changed, 8 insertions(+) diff --git a/packages/timo-design-system/package.json b/packages/timo-design-system/package.json index 092c37b2..f4e8ab17 100644 --- a/packages/timo-design-system/package.json +++ b/packages/timo-design-system/package.json @@ -25,8 +25,10 @@ "@storybook/addon-essentials": "8.6.14", "@storybook/addon-interactions": "8.6.14", "@storybook/addon-links": "^8.6.14", + "@storybook/manager-api": "^8.6.14", "@storybook/react": "8.6.14", "@storybook/react-vite": "^8.6.14", + "@storybook/theming": "^8.6.14", "@tailwindcss/postcss": "^4.3.1", "@types/node": "^22.15.3", "@types/react": "19.2.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 85c8e050..13ec3601 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -172,12 +172,18 @@ importers: '@storybook/addon-links': specifier: ^8.6.14 version: 8.6.14(react@19.2.0)(storybook@8.6.14(prettier@3.7.4)) + '@storybook/manager-api': + specifier: ^8.6.14 + version: 8.6.14(storybook@8.6.14(prettier@3.7.4)) '@storybook/react': specifier: 8.6.14 version: 8.6.14(@storybook/test@8.6.14(storybook@8.6.14(prettier@3.7.4)))(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(storybook@8.6.14(prettier@3.7.4))(typescript@5.9.2) '@storybook/react-vite': specifier: ^8.6.14 version: 8.6.14(@storybook/test@8.6.14(storybook@8.6.14(prettier@3.7.4)))(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(rollup@4.62.2)(storybook@8.6.14(prettier@3.7.4))(typescript@5.9.2)(vite@8.1.0(@types/node@22.15.3)(esbuild@0.25.12)(jiti@2.7.0)(terser@5.48.0)(yaml@2.9.0)) + '@storybook/theming': + specifier: ^8.6.14 + version: 8.6.14(storybook@8.6.14(prettier@3.7.4)) '@tailwindcss/postcss': specifier: ^4.3.1 version: 4.3.1 From 29312b3016c5897f969084f1f75b35c232f1e68c Mon Sep 17 00:00:00 2001 From: kimminna Date: Mon, 29 Jun 2026 15:17:07 +0900 Subject: [PATCH 02/19] =?UTF-8?q?feat(ui):=20Storybook=20=EC=BB=A4?= =?UTF-8?q?=EC=8A=A4=ED=85=80=20=ED=85=8C=EB=A7=88=20=EB=B0=8F=20=EB=A7=A4?= =?UTF-8?q?=EB=8B=88=EC=A0=80=20=EC=84=A4=EC=A0=95=20=EC=B6=94=EA=B0=80=20?= =?UTF-8?q?(#48)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Storybook 커스텀 테마(theme.ts)를 추가했습니다 - 매니저 설정(manager.ts) 및 매니저 헤드(manager-head.html)를 추가했습니다 - 폰트 관련 타입 선언(typings.d.ts)을 추가했습니다 - preview.ts에 전역 설정을 업데이트했습니다 - 공용 에셋(public/)을 추가했습니다 --- .../.storybook/manager-head.html | 21 +++++++++ .../timo-design-system/.storybook/manager.ts | 7 +++ .../timo-design-system/.storybook/preview.ts | 23 +++++++++- .../timo-design-system/.storybook/theme.ts | 42 ++++++++++++++++++ .../.storybook/typings.d.ts | 1 + .../public/timo-logo/timo-logo.png | Bin 0 -> 9837 bytes 6 files changed, 92 insertions(+), 2 deletions(-) create mode 100644 packages/timo-design-system/.storybook/manager-head.html create mode 100644 packages/timo-design-system/.storybook/manager.ts create mode 100644 packages/timo-design-system/.storybook/theme.ts create mode 100644 packages/timo-design-system/.storybook/typings.d.ts create mode 100644 packages/timo-design-system/public/timo-logo/timo-logo.png diff --git a/packages/timo-design-system/.storybook/manager-head.html b/packages/timo-design-system/.storybook/manager-head.html new file mode 100644 index 00000000..e0495580 --- /dev/null +++ b/packages/timo-design-system/.storybook/manager-head.html @@ -0,0 +1,21 @@ + diff --git a/packages/timo-design-system/.storybook/manager.ts b/packages/timo-design-system/.storybook/manager.ts new file mode 100644 index 00000000..1d565afb --- /dev/null +++ b/packages/timo-design-system/.storybook/manager.ts @@ -0,0 +1,7 @@ +import { addons } from "@storybook/manager-api"; + +import { timoTheme } from "./theme"; + +addons.setConfig({ + theme: timoTheme, +}); diff --git a/packages/timo-design-system/.storybook/preview.ts b/packages/timo-design-system/.storybook/preview.ts index 10bd36ee..fdeec57e 100644 --- a/packages/timo-design-system/.storybook/preview.ts +++ b/packages/timo-design-system/.storybook/preview.ts @@ -1,7 +1,26 @@ +import React from "react"; + +import type { Preview } from "@storybook/react"; + import "../src/styles/globals.css"; -import type { Preview } from "@storybook/react-vite"; const preview: Preview = { + decorators: [ + (Story: () => React.ReactNode) => + React.createElement( + "div", + { + style: { + padding: "2rem", + display: "flex", + justifyContent: "center", + alignItems: "center", + minHeight: "120px", + }, + }, + React.createElement(Story), + ), + ], parameters: { controls: { matchers: { @@ -21,7 +40,7 @@ const preview: Preview = { styles: { width: "1280px", height: "900px" }, }, }, - defaultViewport: "desktop", + defaultViewport: "responsive", }, layout: "centered", backgrounds: { diff --git a/packages/timo-design-system/.storybook/theme.ts b/packages/timo-design-system/.storybook/theme.ts new file mode 100644 index 00000000..f8154c02 --- /dev/null +++ b/packages/timo-design-system/.storybook/theme.ts @@ -0,0 +1,42 @@ +import { create } from "@storybook/theming"; + +export const timoTheme = create({ + base: "light", + + brandImage: "/timo-logo/timo-logo.png", + brandTitle: "TIMO DESIGN SYSTEM", + brandUrl: "https://timo.kr", + brandTarget: "_blank", + + // 배경 + colorPrimary: "#74A0F8", + colorSecondary: "#8CB0F9", + + // UI + appBg: "#f5f5f5", + appContentBg: "#ffffff", + appPreviewBg: "#ffffff", + appBorderColor: "#e5e5e5", + appBorderRadius: 10, + + // 텍스트 + textColor: "#1f1f1f", + textMutedColor: "#757575", + textInverseColor: "#ffffff", + + // 툴바 + barTextColor: "#525252", + barHoverColor: "#8CB0F9", + barSelectedColor: "#74a0f8", + barBg: "#ffffff", + + // 인풋 + inputBg: "#ffffff", + inputBorder: "#e5e5e5", + inputTextColor: "#1f1f1f", + inputBorderRadius: 6, + + // 버튼 + buttonBg: "#f5f5f5", + buttonBorder: "#e5e5e5", +}); diff --git a/packages/timo-design-system/.storybook/typings.d.ts b/packages/timo-design-system/.storybook/typings.d.ts new file mode 100644 index 00000000..cbe652db --- /dev/null +++ b/packages/timo-design-system/.storybook/typings.d.ts @@ -0,0 +1 @@ +declare module "*.css"; diff --git a/packages/timo-design-system/public/timo-logo/timo-logo.png b/packages/timo-design-system/public/timo-logo/timo-logo.png new file mode 100644 index 0000000000000000000000000000000000000000..d2439a84ca2228b95756dbd7cb21e59296864a40 GIT binary patch literal 9837 zcmW++Wmp?s6D<^Xch>^Jr7ci+af-W332rIwQYc=aXrQy?XTu_oJe$7UF#M@4!Gq{8sW}KO;_jYLzmhp9T!&@0$Fszl`K(?Ry&{7G@T`; z)gk!PyDaxMlU`~KO0FB^H~Zj370Az~x%O@UuaP<0)D1put)r;fwR>FZVXC_~i_ zFM>sNle7t*G_M?F?cgWV`P`8Vs;9L%sW?iq^~C5@=Wm#+taSW#9Gm6qozS7sS)N?6 zoK&lwU!JOGl14ebZpE)6eMbAB?l-zwy@+=ZqHFEA_I5 zdE%HVJU4{v37wq7p_89OT>`NZcph>F9@?L6JiIO3tY697+d5n1)PXHuy<$oDC@ZDo zgLItjpFldFJ*2)yiN-gUw^eK9^N_AH_R5F{q>Bv6SXqie1%E1+9f*>BiDLQWz(q|* ztvY}7@aC66CiiQ?aXpc5_@6#1HZp;T8VXRWIg0X-)h>pjF!LIilQ+uNhgDARbM|N5 z+dtnP-*!FS1(y4@mwfIyeY!byHH#%hk1Kj*`Wp@e{4S(Xm%D5;r2zWJ2i1JYzl3z- zZ^RX=uv%)RWwQmC?cTh9Dd@bZY0NGj8=n*t6EnR{%neTuU3DMXUlP9|gmIg;H}Y%? zgR@~^o0p0zZXyME2kuD9l{i`ljJaO~umZ${||>c(-2eMXjJ^WiiNn3dHR zBXV+Ev}H2=;(bGQ^8K=z`@5c}06%|!vBQ&-g*%g7_d0W9W9q~Geb;so8>d|loE;Z+ zzi>zX7ybDC>q_zO@Y?S%SMJ^Q+e*sYvGiMa8@k_HUgHNrWAF#Am9(uUuE%J2oBQs; zcN{PA^&A z<~%zy)Bo`Jcsx{gRp{==A3ktw5Wm}ES~1&g1}uw$Hn=>DG3i|kwpg|vo!<1co0)oL zM9?nGhdE#_jm&^sNvB&$HN%~}UBi@{ZN@XA8*C>*oT*Any85QVUESR|rmZd^xcK;v zo}Qku>YGTwY+vbk5O!EC$j)x~Fa6^IC?u;+a-wh2aS`p1ii+y0uTSdo??D^xiQCzFUtwz`DVH7%zg`(KogUjt^H}

f&NhWa9DLSCLUmo6IG1N_ z*$i5*g1+reWW&C#?L40Ly!2*%?rsZv0U6)Tjg>?PIBd_#rI~syzLWU8uAP0}(E?fj zm~@4C#M4O9q#`kQyw(%kH}*r2Tv%9`d;4?$ek_B);Qi&UxuokRM7ihb__H^+dG}xS zfcXRgTxxgwK1$^&AUlVhF2r+G=Vg?u#$1Hd ze*T*LnVNpnRqU@1BZ$I}nJ`PSGCM3UT<&CV@6GXQm$8xM*x{PrVb!7Sct(@Wa;xhl zh1531Ne+Fu|1;G5+3i=oHFVXwkc@g$uga?u!fn^&};nuR$Z+kSk-$Hrj@tDUeK8Pm>edX;gDS+~#mW+ZR>UO{*)0~QY82Aw|O zY&(TRJLeN~=yRCimJ@;DA6HDH1)(IvBYtu0R=11o5l0SrwkS;oC(s^fXQbhmlk8l1 zQ#_4+nt{;IZ*iE?AcLNuKx}m!@wKI;2ZHDy43&8-yAxuk%R{)UoFZBQ*eksRqZ-0V ziB*;xiNNZ&#Sv-dLH9MMZM!+UL$Q>CnS>}CN|u&eYk`NxYwfYSsjKTFTi>1OBb#R| z*3bmZL3gk^b3^PTEM&-eq%dP341D!b#8eRhUYL|bw z20pDQi!5NkSovoyqnm-(*zRQRWYpf95di}SMh6iiy<_7!DO7G~T6m@^_&ptiS(M%c z<0^nruG?;!sSf8*4F$bm6|t)0;`sBwMg`ZqF_`QO2Lbhq;x=YM_wY2yiKyP*gOkOE z$m69ZWx(&Hi$PozT&OBCKAvnBVwne8R{biX%EUxPdCq?RI5n~kLghZR!sdV3W|y=# zt^*Dj$DX00U~fqGE?13af9Xot9F*O>LA&l7`cB`I&dc=3&D~T(_3tWfL5JWbL^i$h zb)bafn%H4bNb_Vwt$fL2Jn}#7N`sh&5VNa^&o3``=EOxA>5*T@mUN+TZ|yvcB(s0t zKRl#{2B%AIFHXWJHZWvObd+gGTDQ3Lt4YYRAf^-aFLy&VK_~9HkEqlillrs@n-*%D ze)Djdh3c6e*CF20=YxfX1$0Uar2bSeMW`C{uo4VfGK<1nPe^P%uCTHBp$W9o-eziQ zO5fPjgnM&!6~*!cbTzUYmX>F&T8rk^1RaSHUTt+PB*0!DVA{->#R6O}H93YGtHD=e z1FxnPcmof#b04s%n`Q)Zyksv8c)7mEGVA-3VBGt!J(@XG)nP3!>6-`6|D^{;l+MPF zrN}JHc@N>!ymPs1`fc`z#l@S;Q&{O5QGNA#5C{9|0?KPH1EeFo*c|vakb=tpx+4`D zGcQv_pBVv)ExP)66mm!-dryzI!HH?A6+oVbIWH+FzFY}v zrigQUrQ!nRkAu^IU9rs}gwnTn)gn%R7yu$DW+*;Ct};SGkQUF2MFA<%Fg`)n9PzS_ z`<+Z|%j~zGR{=pZ>Js-X%=NELKDVw9FYm74(u;W=1$cyv%bT9mzgrrIS8sjpZ9m@{ z+U-uEmqcz|xLpgDoIe`ndlUZ)`~4~C9exNo|E{JiYI)v#{JF9?Wi!KRs^S?u**}~2 zCv}d#SLN zNe;DQu-s=AEKJ(?eo8u-{XEdLF zSZS+6Qsv~?WE)OGCvzp~8SAE;Y;8;0R%hxR5V_P+@?o#g_37!U#^!y*U>Z2`Eq@}w zE~5>!A_|s6G$1`<)}tgIGaManq?45#v!}YdC5{m_$p}0Udn6qFj|{X`0{Fzm zX}rev%0mTg96D53q{w7VIWhP3V)KP9e@zt*>0`Gp!kV2eQ4&e)$%Wr`rng~<&e@$e zeF54O7+FD{yqqOC6dRzbK(_KY5>KUuH9tqkib@%#+LmVN5MgCz7MlXSpN4Z?U0v02 zf?==^LPC%kG>0#V>Cr|^&@ycU*D_#DZkc-vVGl{y07)XARb-NV@3321jXs#W&y%Y6 zb?0GqN2w@#BGptkjc%-CTq3*~GMV=iM{UR;2H-K8Oeh;7g^`|whfzdGH|_?bw*6T| zLj@9v{-MYcXCyjBST});)AQTVXJm6do zjCQngSKrsymtkNhPU3+sLtwbw{diJQ#4qrzW;6-dH0-t|r2!{of)1Y~IYv!68=8U^ z7Y&4^dDH&jEjqdlPVuk&;S12;1EJx z!ot}}ftPygUBuf9w1&>xOnX_SZao#6t_p`Iqu_t6+dQp#oy>}ZP?GpxC}6_|Ty07a-77kh0n{CR zCX_AzuW2f*R)-Tw*BL)MqS_dvV2Ops#we!ds4Iv~gai*1MPwnX8Qnnv-K(=|b?V|z z6ILT~Z{hG_i@|}=*narT%)xdATU|BNOEYd5w+ycol;Y!W1&*bvh9RAtoOtm@sug^F zT|a@s4=f^%Dhjt0T)=~NQD3n(eYPljzlYthoV({tDwm^ za3T&9 zM$;)}0RelZG8?^d4BnXxe+lb$(n03&T|95&)a3}CrQ86aFjF^Ui3xeNAc-WgtoYr05izGPVV zMrqVM$f^GqTzjRS=cCq#+HNoCS!H7~NgyAL94-HMQ}UTUP{0K&w$WFKS)kDi!%d*j z7Gvl42UuihXS;pvg-=`MV=|cqunp44Z21+rMhr?{amb$wNAo0$;NJST!Ey75B?>M4u}em0RB+J;8u7AkyySX61?PP^t1sb~7nkt>&-4TI^G zM3-5I8dP+NoNHK`Sk@V{j0=%0H7BWAN(1kC>sQvES?M#`lADr>Nv} zagYb57C$XrDgW8sHRafm6*;p2(2Bj|GX~~;5X#UP6qXRuH12M65$V`J5nfCo3hTv^ zytz9*y1ay$wDj4gKU<9B9^LT1B+!ca6>RdG`)r_sS$Vpyw7{O7jYT*X@YO^1!ALyh zw&neTz#Ee0!{Fz-f^^;DaXTAW&@=9Wgd-O7jNG4iJSJTLTVfG^lf4`wCcMV9drK$P{!S127FEY(RPJQ)L&3Jn#|&%RHXg<)UQMf!dBmE$j;! zHXU*>*=M8@{?0A8xsO{j+6m>RbOjCauZwA#f(&oo0`N}mm#$-n=@2_`!L&oofFhy% zxk5a4N85+1eW$@#%8(l=e~nyzl)n4F;=v#JCb!1ev1wCM{&uS}S2jo5aC38aMRIGMglgKv3<8r8u`P^uBwq!!E zKU3&$_hi<4%jTq%Ihg+4xEr%qDWZU1AIv+!M^gcB{&@e2z>PiI`7@2g)9;@Dty0G& zYqn&Pzdw`YsoS%7aLTEXyU~Es7EH~LJkU2X`*h=9$1)i7MC8d%8itr+9sH$z-|Z5} zRTnxmrK1h7{A>KX#*ikj4=s`MNVG}sNeIxumT5t_xDnTNTKm=vU-A#b7tf%rYj27~ zN*YfGN-TCo|Gj8pb^)dj0gv6sOlWwoH_w87*L~%GM&?<=h?EDC7^OXVg zF97i5H63vG`P5m$^V|KRPfdIYOKO( zyB4@Ya9=tV?L@%(Ru@cy4a^^bSJUDWa|Q1c^B@ujsqS{|=2!Ob{7iv&)2TDl-KhTW zJ=SAbb=rPD%*8owlKGNh$8cWcytIa+WNZEP>Bft1TwGG(j>KD@iCI255PY8P8*qv= zIlJ1_)^4ADVNJu|l6X(Ztce;}ed{dZkt1rM!ezmg`em5eR)fYga4yV%0!>}(xLZij zc7kTo*#w&Z!}A?3S)+PgWt>VndM6RkOruWE@BHwb6Fx=O1x`mu^~~ujMcx?h9T15y z7E7PI`(aY`H#au}ZDN*Y;&`7?jzcjFK{16D=&X>7IC^hmsl(&rRPJh&8&H5@I#1N_ zaW!2E0rV|WlgMxW+xcMz-G+^JgxJw#D@k2gh7@Vk38`vyN>T7k2C}7mo|Yza(8oV@ zRb&8z-Y6@?>>#PXG_o?w1o|gw#zYI!3NGXrxf;@d9teD63AO5xmVOCum2caN9UI{^ z6wxmk%E|-njO*Ng=DR3PjYwhE1rRe@HR-K1dpFWI9+Y6=&g9S_?t+&uOsYbID^3ug z+j7j);67S43K$)LsHIx=zhmDr^ zpKVP}t87tErDJTq9EpJ}h88iiH;iEQPua|^u=uv>q>FsJP|~75O46w+o8bt%ECn00 z*DFX8ONY_+VRkc6# zWWdQ}xg+)Rw+;R;DQH$p5gtIaC-CxVK#P_WDHj3~_({mgER9+Bmyn;5jSr{B{e7dg z93+O7li;%Jb`=_RhKP1>rEyEV+`yE5TaaOYLTWr3!n_>K0wsm6WEZ!`@_%Fejn@Dc z#I4c08rZU1RqR4gag*AkJ7o~zC#+j-Muq*+Yj;93C6(G@1KKg^y+gRkyIGl;AM0$* z*eo&7$-qTRgNQsjMI(ynOrrAPSLkTb6T;r#gfLI9y*fx+;nPp4Hlb^=9bAO7NJJKxartI! zHlGMR+}+&^c;0?V4Z7Qiq|~HTin6As;Gw7utL=bU^R!6t@e%m+-tsN`Y{ku)ExrCH zHrVCdiOn)Sc|&`QZm~5O7wZy11YAVt#yxG_!UOZQJDW+6#M{uv3osJsYp`QXAe?)g z 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 Date: Mon, 29 Jun 2026 15:17:51 +0900 Subject: [PATCH 03/19] =?UTF-8?q?feat(ui):=20Tag,=20PriorityIcon=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80=20(#4?= =?UTF-8?q?8)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Tag 컴포넌트를 구현했습니다 - PriorityIcon 컴포넌트를 구현했습니다 - 각 컴포넌트의 Storybook 스토리를 작성했습니다 - index.ts에 신규 컴포넌트 export를 등록했습니다 --- .../src/components/index.ts | 2 + .../priority-icon/PriorityIcon.stories.tsx | 40 ++++++++++++++ .../components/priority-icon/PriorityIcon.tsx | 23 ++++++++ .../src/components/tag/Tag.stories.tsx | 52 +++++++++++++++++++ .../src/components/tag/Tag.tsx | 43 +++++++++++++++ 5 files changed, 160 insertions(+) create mode 100644 packages/timo-design-system/src/components/priority-icon/PriorityIcon.stories.tsx create mode 100644 packages/timo-design-system/src/components/priority-icon/PriorityIcon.tsx create mode 100644 packages/timo-design-system/src/components/tag/Tag.stories.tsx create mode 100644 packages/timo-design-system/src/components/tag/Tag.tsx diff --git a/packages/timo-design-system/src/components/index.ts b/packages/timo-design-system/src/components/index.ts index ef907737..9ae8ca5a 100644 --- a/packages/timo-design-system/src/components/index.ts +++ b/packages/timo-design-system/src/components/index.ts @@ -1,2 +1,4 @@ export { Color } from "./color/Color"; export { Typography } from "./typography/Typography"; +export { Tag } from "./tag/Tag"; +export { PriorityIcon } from "./priority-icon/PriorityIcon"; diff --git a/packages/timo-design-system/src/components/priority-icon/PriorityIcon.stories.tsx b/packages/timo-design-system/src/components/priority-icon/PriorityIcon.stories.tsx new file mode 100644 index 00000000..430432f2 --- /dev/null +++ b/packages/timo-design-system/src/components/priority-icon/PriorityIcon.stories.tsx @@ -0,0 +1,40 @@ +import { PriorityIcon } from "./PriorityIcon"; + +import type { Meta, StoryObj } from "@storybook/react"; + +const meta = { + title: "Components/PriorityIcon", + component: PriorityIcon, + parameters: { + layout: "centered", + }, + argTypes: { + priority: { + control: "select", + options: ["매우중요", "중요", "보통", "낮음", "Disable"], + }, + }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const 매우중요: Story = { + args: { priority: "매우중요" }, +}; + +export const 중요: Story = { + args: { priority: "중요" }, +}; + +export const 보통: Story = { + args: { priority: "보통" }, +}; + +export const 낮음: Story = { + args: { priority: "낮음" }, +}; + +export const Disable: Story = { + args: { priority: "Disable" }, +}; diff --git a/packages/timo-design-system/src/components/priority-icon/PriorityIcon.tsx b/packages/timo-design-system/src/components/priority-icon/PriorityIcon.tsx new file mode 100644 index 00000000..abbe3a64 --- /dev/null +++ b/packages/timo-design-system/src/components/priority-icon/PriorityIcon.tsx @@ -0,0 +1,23 @@ +import { cn } from "../../lib"; + +export type Priority = "매우중요" | "중요" | "보통" | "낮음" | "Disable"; + +const PRIORITY_COLOR: Record = { + 매우중요: "bg-timo-red", + 중요: "bg-timo-orange", + 보통: "bg-timo-gray-600", + 낮음: "bg-timo-black", + Disable: "bg-timo-gray-500", +}; + +export interface PriorityIconProps { + priority: Priority; +} + +export const PriorityIcon = ({ priority = "매우중요" }: PriorityIconProps) => { + return ( +

+ ); +}; diff --git a/packages/timo-design-system/src/components/tag/Tag.stories.tsx b/packages/timo-design-system/src/components/tag/Tag.stories.tsx new file mode 100644 index 00000000..44ecb673 --- /dev/null +++ b/packages/timo-design-system/src/components/tag/Tag.stories.tsx @@ -0,0 +1,52 @@ +import { Tag } from "./Tag"; + +import type { Meta, StoryObj } from "@storybook/react"; + +const meta = { + title: "Components/Tag", + component: Tag, + parameters: { + layout: "centered", + }, + argTypes: { + variant: { + control: "select", + options: ["과제", "운동", "일상", "업무", "기타"], + }, + }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const 과제: Story = { + args: { variant: "과제" }, +}; + +export const 운동: Story = { + args: { variant: "운동" }, +}; + +export const 일상: Story = { + args: { variant: "일상" }, +}; + +export const 업무: Story = { + args: { variant: "업무" }, +}; + +export const 기타: Story = { + args: { variant: "기타" }, +}; + +export const AllVariants: Story = { + render: () => ( +
+ {(["과제", "운동", "일상", "업무", "기타"] as const).map((variant) => ( +
+ +
+ ))} +
+ ), +}; diff --git a/packages/timo-design-system/src/components/tag/Tag.tsx b/packages/timo-design-system/src/components/tag/Tag.tsx new file mode 100644 index 00000000..df67808b --- /dev/null +++ b/packages/timo-design-system/src/components/tag/Tag.tsx @@ -0,0 +1,43 @@ +import { cn } from "../../lib"; + +export type TagVariant = "과제" | "운동" | "일상" | "업무" | "기타"; + +const TAG_BG: Record = { + 과제: "bg-timo-yellow-300", + 운동: "bg-timo-green", + 일상: "bg-timo-blue-75", + 업무: "bg-timo-gray-900", + 기타: "bg-timo-gray-500", +}; + +const TAG_TEXT_COLOR: Record = { + 과제: "text-timo-black", + 운동: "text-white", + 일상: "text-white", + 업무: "text-white", + 기타: "text-timo-gray-800", +}; + +export interface TagProps { + variant?: TagVariant; +} + +export const Tag = ({ variant = "과제" }: TagProps) => { + return ( +
+ + {variant} + +
+ ); +}; From fc5c8528974112dd20e880196e311fcc0193297e Mon Sep 17 00:00:00 2001 From: kimminna Date: Mon, 29 Jun 2026 15:18:33 +0900 Subject: [PATCH 04/19] =?UTF-8?q?feat(ui):=20=ED=83=80=EC=9D=B4=ED=8F=AC?= =?UTF-8?q?=EA=B7=B8=EB=9E=98=ED=94=BC=20=ED=86=A0=ED=81=B0=20=EC=8B=A0?= =?UTF-8?q?=EA=B7=9C=20=ED=95=AD=EB=AA=A9=20=EC=B6=94=EA=B0=80=20(#48)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - headline-b-50, headline-m-26, headline-m-20 토큰을 추가했습니다 - Typography 컴포넌트의 샘플 텍스트를 실제 문구로 변경했습니다 --- packages/tailwind-config/tokens/typography.css | 16 ++++++++++++++++ .../src/components/typography/Typography.tsx | 2 +- 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/packages/tailwind-config/tokens/typography.css b/packages/tailwind-config/tokens/typography.css index 83e5b15e..d9656986 100644 --- a/packages/tailwind-config/tokens/typography.css +++ b/packages/tailwind-config/tokens/typography.css @@ -2,11 +2,22 @@ --font-pretendard: var(--font-family-pretendard), sans-serif; /* Headline */ + + --typo-size-headline-b-50: 50px; + --typo-line-height-headline-b-50: 1.5; + --typo-letter-spacing-headline-b-50: -0.03em; + --typo-font-weight-headline-b-50: 700; + --typo-size-headline-b-30: 30px; --typo-line-height-headline-b-30: 1.5; --typo-letter-spacing-headline-b-30: -0.03em; --typo-font-weight-headline-b-30: 700; + --typo-size-headline-m-26: 26px; + --typo-line-height-headline-m-26: 1.5; + --typo-letter-spacing-headline-m-26: -0.03em; + --typo-font-weight-headline-m-26: 500; + --typo-size-headline-b-24: 24px; --typo-line-height-headline-b-24: 1.5; --typo-letter-spacing-headline-b-24: -0.03em; @@ -22,6 +33,11 @@ --typo-letter-spacing-headline-b-20: -0.03em; --typo-font-weight-headline-b-20: 700; + --typo-size-headline-m-20: 20px; + --typo-line-height-headline-m-20: 1.5; + --typo-letter-spacing-headline-m-20: -0.03em; + --typo-font-weight-headline-m-20: 500; + --typo-size-headline-b-18: 18px; --typo-line-height-headline-b-18: 1.5; --typo-letter-spacing-headline-b-18: -0.03em; diff --git a/packages/timo-design-system/src/components/typography/Typography.tsx b/packages/timo-design-system/src/components/typography/Typography.tsx index d4c42514..6db0a831 100644 --- a/packages/timo-design-system/src/components/typography/Typography.tsx +++ b/packages/timo-design-system/src/components/typography/Typography.tsx @@ -18,7 +18,7 @@ export const Typography = ({ }} >
- 가나다라마 Aa + 계획 실행의 과정을 함께하는 Timo
Date: Mon, 29 Jun 2026 15:19:08 +0900 Subject: [PATCH 05/19] =?UTF-8?q?feat(root):=20Plop=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=A0=9C=EB=84=88=EB=A0=88=EC=9D=B4?= =?UTF-8?q?=ED=84=B0=EC=97=90=20=EC=8A=A4=ED=86=A0=EB=A6=AC=20=ED=85=9C?= =?UTF-8?q?=ED=94=8C=EB=A6=BF=20=EC=B6=94=EA=B0=80=20(#48)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 컴포넌트 생성 시 .stories.tsx 파일을 자동으로 생성하도록 추가했습니다 - component.stories.tsx.hbs 스토리 템플릿 파일을 추가했습니다 --- turbo/generators/config.ts | 8 +++++++- .../component/component.stories.tsx.hbs | 18 ++++++++++++++++++ .../templates/component/component.tsx.hbs | 2 +- 3 files changed, 26 insertions(+), 2 deletions(-) create mode 100644 turbo/generators/templates/component/component.stories.tsx.hbs diff --git a/turbo/generators/config.ts b/turbo/generators/config.ts index 4f51ea52..5b7ddcbb 100644 --- a/turbo/generators/config.ts +++ b/turbo/generators/config.ts @@ -22,10 +22,16 @@ export default function generator(plop: PlopTypes.NodePlopAPI): void { path: "packages/timo-design-system/src/components/{{kebabCase name}}/{{pascalCase name}}.tsx", templateFile: "templates/component/component.tsx.hbs", }, + { + type: "add", + path: "packages/timo-design-system/src/components/{{kebabCase name}}/{{pascalCase name}}.stories.tsx", + templateFile: "templates/component/component.stories.tsx.hbs", + }, { type: "append", path: "packages/timo-design-system/src/components/index.ts", - template: 'export { {{pascalCase name}} } from "./{{kebabCase name}}/{{pascalCase name}}";', + template: + 'export { {{pascalCase name}} } from "./{{kebabCase name}}/{{pascalCase name}}";', }, ], }); diff --git a/turbo/generators/templates/component/component.stories.tsx.hbs b/turbo/generators/templates/component/component.stories.tsx.hbs new file mode 100644 index 00000000..32aa5b0f --- /dev/null +++ b/turbo/generators/templates/component/component.stories.tsx.hbs @@ -0,0 +1,18 @@ +import { {{pascalCase name}} } from "./{{pascalCase name}}"; + +import type { Meta, StoryObj } from "@storybook/react"; + +const meta = { + title: "Components/{{pascalCase name}}", + component: {{pascalCase name}}, + parameters: { + layout: "centered", + }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: {}, +}; diff --git a/turbo/generators/templates/component/component.tsx.hbs b/turbo/generators/templates/component/component.tsx.hbs index d2beb1eb..5e80ae06 100644 --- a/turbo/generators/templates/component/component.tsx.hbs +++ b/turbo/generators/templates/component/component.tsx.hbs @@ -1,4 +1,4 @@ -interface {{pascalCase name}}Props { +export interface {{pascalCase name}}Props { className?: string; } From f66670951bb328c15282b76a61112a8e1cbf5e5a Mon Sep 17 00:00:00 2001 From: kimminna Date: Mon, 29 Jun 2026 15:32:38 +0900 Subject: [PATCH 06/19] =?UTF-8?q?fix(ci):=20Chromatic=20=ED=94=84=EB=A6=AC?= =?UTF-8?q?=EB=B7=B0=20=EB=A7=81=ED=81=AC=20=EC=B6=9C=EB=A0=A5=20=EC=98=A4?= =?UTF-8?q?=EB=A5=98=20=EC=88=98=EC=A0=95=20(#48)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - pnpm chromatic CLI는 storybookUrl·buildUrl을 step output으로 내보내지 않아 PR 코멘트의 링크가 빈 문자열로 렌더링되는 문제가 있었습니다 - chromaui/action 공식 액션으로 교체하여 step output이 올바르게 설정되도록 했습니다 - workingDir을 packages/timo-design-system으로 지정했습니다 --- .github/workflows/chromatic.yml | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml index c1e3862f..5e40ad92 100644 --- a/.github/workflows/chromatic.yml +++ b/.github/workflows/chromatic.yml @@ -38,9 +38,12 @@ jobs: - name: Publish to Chromatic id: chromatic - run: pnpm chromatic - env: - CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} + uses: chromaui/action@latest + with: + projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} + workingDir: packages/timo-design-system + onlyChanged: true + exitZeroOnChanges: true - name: Comment Storybook preview link on PR if: success() From 7a5c6b8ad6b701620dd5fe02f384595d18dd4e3c Mon Sep 17 00:00:00 2001 From: kimminna Date: Mon, 29 Jun 2026 15:38:04 +0900 Subject: [PATCH 07/19] =?UTF-8?q?feat(ui):=20=ED=83=80=EC=9D=B4=ED=8F=AC?= =?UTF-8?q?=EA=B7=B8=EB=9E=98=ED=94=BC=20=ED=86=A0=ED=81=B0=20=EC=8A=A4?= =?UTF-8?q?=ED=86=A0=EB=A6=AC=EC=97=90=20=EB=88=84=EB=9D=BD=20=ED=95=AD?= =?UTF-8?q?=EB=AA=A9=20=EC=B6=94=EA=B0=80=20(#48)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - headline-b-50, headline-m-26, headline-m-20 토큰을 TYPOGRAPHY_TOKENS에 추가했습니다 --- .../src/tokens/typography-token.ts | 21 +++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/packages/timo-design-system/src/tokens/typography-token.ts b/packages/timo-design-system/src/tokens/typography-token.ts index 05af721f..6b5e3101 100644 --- a/packages/timo-design-system/src/tokens/typography-token.ts +++ b/packages/timo-design-system/src/tokens/typography-token.ts @@ -7,6 +7,13 @@ export interface TypographyToken { } export const TYPOGRAPHY_TOKENS: TypographyToken[] = [ + { + token: "typo-headline-b-50", + size: "50px", + weight: "700", + lineHeight: "150%", + letterSpacing: "-0.03em", + }, { token: "typo-headline-b-30", size: "30px", @@ -14,6 +21,13 @@ export const TYPOGRAPHY_TOKENS: TypographyToken[] = [ lineHeight: "150%", letterSpacing: "-0.03em", }, + { + token: "typo-headline-m-26", + size: "26px", + weight: "500", + lineHeight: "150%", + letterSpacing: "-0.03em", + }, { token: "typo-headline-b-24", size: "24px", @@ -35,6 +49,13 @@ export const TYPOGRAPHY_TOKENS: TypographyToken[] = [ lineHeight: "150%", letterSpacing: "-0.03em", }, + { + token: "typo-headline-m-20", + size: "20px", + weight: "500", + lineHeight: "150%", + letterSpacing: "-0.03em", + }, { token: "typo-headline-b-18", size: "18px", From bb9f4fb6b05967c62f58d185bbbddaa26f26ac58 Mon Sep 17 00:00:00 2001 From: kimminna Date: Mon, 29 Jun 2026 15:42:52 +0900 Subject: [PATCH 08/19] =?UTF-8?q?fix(ui):=20Storybook=20=EB=8D=B0=EC=BD=94?= =?UTF-8?q?=EB=A0=88=EC=9D=B4=ED=84=B0=20Story=20=ED=83=80=EC=9E=85=20?= =?UTF-8?q?=EC=96=B4=EB=85=B8=ED=85=8C=EC=9D=B4=EC=85=98=20=EC=A0=9C?= =?UTF-8?q?=EA=B1=B0=20(#48)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - () => React.ReactNode로 수동 지정하면 Storybook의 args/context 타입이 손실됩니다 - preview: Preview 타입에서 PartialStoryFn로 자동 추론되도록 수정했습니다 --- packages/timo-design-system/.storybook/preview.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/timo-design-system/.storybook/preview.ts b/packages/timo-design-system/.storybook/preview.ts index fdeec57e..bb861596 100644 --- a/packages/timo-design-system/.storybook/preview.ts +++ b/packages/timo-design-system/.storybook/preview.ts @@ -6,7 +6,7 @@ import "../src/styles/globals.css"; const preview: Preview = { decorators: [ - (Story: () => React.ReactNode) => + (Story) => React.createElement( "div", { From 7fc87d00a6f55a64cbfcbd5ea9deccdbda6e940b Mon Sep 17 00:00:00 2001 From: kimminna Date: Mon, 29 Jun 2026 19:26:48 +0900 Subject: [PATCH 09/19] =?UTF-8?q?feat(ui):=20timo-blue-65=20=EC=83=89?= =?UTF-8?q?=EC=83=81=20=ED=86=A0=ED=81=B0=20=EC=B6=94=EA=B0=80=20(#48)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit timo-blue-65 신규 색상 토큰을 colors.css 및 color-token.ts에 추가했습니다. --- packages/tailwind-config/tokens/colors.css | 37 ++++++++++--------- .../src/tokens/color-token.ts | 1 + 2 files changed, 20 insertions(+), 18 deletions(-) diff --git a/packages/tailwind-config/tokens/colors.css b/packages/tailwind-config/tokens/colors.css index 1deec929..57342b37 100644 --- a/packages/tailwind-config/tokens/colors.css +++ b/packages/tailwind-config/tokens/colors.css @@ -1,21 +1,22 @@ @theme { - --color-timo-blue-50: #F1F6FE; - --color-timo-blue-75: #C6D8FC; - --color-timo-blue-100: #AEC8FB; - --color-timo-blue-200: #8CB0F9; - --color-timo-blue-300: #74A0F8; + --color-timo-blue-50: #f1f6fe; + --color-timo-blue-65: #dee9ff; + --color-timo-blue-75: #c6d8fc; + --color-timo-blue-100: #aec8fb; + --color-timo-blue-200: #8cb0f9; + --color-timo-blue-300: #74a0f8; - --color-timo-gray-300: #F5F5F5; - --color-timo-gray-500: #E6E8E8; - --color-timo-gray-600: #D8D8D8; - --color-timo-gray-700: #9F9F9F; - --color-timo-gray-800: #757575; - --color-timo-gray-900: #3F3F3F; + --color-timo-gray-300: #f5f5f5; + --color-timo-gray-500: #e6e8e8; + --color-timo-gray-600: #d8d8d8; + --color-timo-gray-700: #9f9f9f; + --color-timo-gray-800: #757575; + --color-timo-gray-900: #3f3f3f; - --color-timo-yellow-300: #F2FC9F; - - --color-timo-black: #121212; - --color-timo-red: #FF6650; - --color-timo-orange: #FFB157; - --color-timo-green: #9FDDA9; -} \ No newline at end of file + --color-timo-yellow-300: #f2fc9f; + + --color-timo-black: #121212; + --color-timo-red: #ff6650; + --color-timo-orange: #ffb157; + --color-timo-green: #9fdda9; +} diff --git a/packages/timo-design-system/src/tokens/color-token.ts b/packages/timo-design-system/src/tokens/color-token.ts index 819cde2f..dc68d03d 100644 --- a/packages/timo-design-system/src/tokens/color-token.ts +++ b/packages/timo-design-system/src/tokens/color-token.ts @@ -6,6 +6,7 @@ export interface ColorToken { export const COLOR_TOKENS: ColorToken[] = [ { name: "timo-blue-50", cssVar: "--color-timo-blue-50", value: "#F1F6FE" }, + { name: "timo-blue-65", cssVar: "--color-timo-blue-65", value: "#DEE9FF" }, { name: "timo-blue-75", cssVar: "--color-timo-blue-75", value: "#C6D8FC" }, { name: "timo-blue-100", cssVar: "--color-timo-blue-100", value: "#AEC8FB" }, { name: "timo-blue-200", cssVar: "--color-timo-blue-200", value: "#8CB0F9" }, From c03e4c57daa990f44ffee49bfa8aa9dddea92aa4 Mon Sep 17 00:00:00 2001 From: kimminna Date: Mon, 29 Jun 2026 23:41:18 +0900 Subject: [PATCH 10/19] =?UTF-8?q?feat(ui):=20timo-gray=20=EC=83=89?= =?UTF-8?q?=EC=83=81=20=ED=86=A0=ED=81=B0=20=EC=B6=94=EA=B0=80=20(#48)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/tailwind-config/tokens/colors.css | 2 +- packages/timo-design-system/src/tokens/color-token.ts | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/tailwind-config/tokens/colors.css b/packages/tailwind-config/tokens/colors.css index 57342b37..cbe01cde 100644 --- a/packages/tailwind-config/tokens/colors.css +++ b/packages/tailwind-config/tokens/colors.css @@ -18,5 +18,5 @@ --color-timo-black: #121212; --color-timo-red: #ff6650; --color-timo-orange: #ffb157; - --color-timo-green: #9fdda9; + --color-timo-gray: #bebebe; } diff --git a/packages/timo-design-system/src/tokens/color-token.ts b/packages/timo-design-system/src/tokens/color-token.ts index dc68d03d..1169fc6a 100644 --- a/packages/timo-design-system/src/tokens/color-token.ts +++ b/packages/timo-design-system/src/tokens/color-token.ts @@ -18,7 +18,6 @@ export const COLOR_TOKENS: ColorToken[] = [ { name: "timo-gray-700", cssVar: "--color-timo-gray-700", value: "#9F9F9F" }, { name: "timo-gray-800", cssVar: "--color-timo-gray-800", value: "#757575" }, { name: "timo-gray-900", cssVar: "--color-timo-gray-900", value: "#3F3F3F" }, - { name: "timo-yellow-300", cssVar: "--color-timo-yellow-300", @@ -27,5 +26,5 @@ export const COLOR_TOKENS: ColorToken[] = [ { name: "timo-black", cssVar: "--color-timo-black", value: "#121212" }, { name: "timo-red", cssVar: "--color-timo-red", value: "#FF6650" }, { name: "timo-orange", cssVar: "--color-timo-orange", value: "#FFB157" }, - { name: "timo-green", cssVar: "--color-timo-green", value: "#9FDDA9" }, + { name: "timo-gray", cssVar: "--color-timo-gray", value: "#BEBEBE" }, ]; From 543e408c9538c5ea7bb7c0053819361e815e9e27 Mon Sep 17 00:00:00 2001 From: kimminna Date: Mon, 29 Jun 2026 23:42:12 +0900 Subject: [PATCH 11/19] =?UTF-8?q?feat(ui):=20Tag=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=EB=A5=BC=20text=20prop=20=EA=B8=B0=EB=B0=98?= =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EC=88=98=EC=A0=95=ED=95=98=EA=B3=A0=20?= =?UTF-8?q?=EC=8A=A4=ED=86=A0=EB=A6=AC=20=EC=B6=94=EA=B0=80=20(#48)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/tag/Tag.stories.tsx | 38 +++--------------- .../src/components/tag/Tag.tsx | 40 +++---------------- 2 files changed, 10 insertions(+), 68 deletions(-) diff --git a/packages/timo-design-system/src/components/tag/Tag.stories.tsx b/packages/timo-design-system/src/components/tag/Tag.stories.tsx index 44ecb673..e118c3ba 100644 --- a/packages/timo-design-system/src/components/tag/Tag.stories.tsx +++ b/packages/timo-design-system/src/components/tag/Tag.stories.tsx @@ -9,9 +9,9 @@ const meta = { layout: "centered", }, argTypes: { - variant: { - control: "select", - options: ["과제", "운동", "일상", "업무", "기타"], + text: { + control: "text", + description: "태그에 표시될 텍스트", }, }, } satisfies Meta; @@ -19,34 +19,6 @@ const meta = { export default meta; type Story = StoryObj; -export const 과제: Story = { - args: { variant: "과제" }, -}; - -export const 운동: Story = { - args: { variant: "운동" }, -}; - -export const 일상: Story = { - args: { variant: "일상" }, -}; - -export const 업무: Story = { - args: { variant: "업무" }, -}; - -export const 기타: Story = { - args: { variant: "기타" }, -}; - -export const AllVariants: Story = { - render: () => ( -
- {(["과제", "운동", "일상", "업무", "기타"] as const).map((variant) => ( -
- -
- ))} -
- ), +export const Default: Story = { + args: { text: "과제" }, }; diff --git a/packages/timo-design-system/src/components/tag/Tag.tsx b/packages/timo-design-system/src/components/tag/Tag.tsx index df67808b..64cdfa1c 100644 --- a/packages/timo-design-system/src/components/tag/Tag.tsx +++ b/packages/timo-design-system/src/components/tag/Tag.tsx @@ -1,42 +1,12 @@ -import { cn } from "../../lib"; - -export type TagVariant = "과제" | "운동" | "일상" | "업무" | "기타"; - -const TAG_BG: Record = { - 과제: "bg-timo-yellow-300", - 운동: "bg-timo-green", - 일상: "bg-timo-blue-75", - 업무: "bg-timo-gray-900", - 기타: "bg-timo-gray-500", -}; - -const TAG_TEXT_COLOR: Record = { - 과제: "text-timo-black", - 운동: "text-white", - 일상: "text-white", - 업무: "text-white", - 기타: "text-timo-gray-800", -}; - export interface TagProps { - variant?: TagVariant; + text: string; } -export const Tag = ({ variant = "과제" }: TagProps) => { +export const Tag = ({ text = "과제" }: TagProps) => { return ( -
- - {variant} +
+ + {text}
); From 3d6ef63f6393af2282a138feb496b5dd58c67433 Mon Sep 17 00:00:00 2001 From: kimminna Date: Tue, 30 Jun 2026 00:29:52 +0900 Subject: [PATCH 12/19] =?UTF-8?q?fix(ui):=20Tag=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EB=82=B4=EB=B6=80=20=EA=B3=A0=EC=A0=95?= =?UTF-8?q?=EB=90=9C=20width=20=EC=86=8D=EC=84=B1=20=EC=A0=9C=EA=B1=B0=20?= =?UTF-8?q?=EB=B0=8F=20px=20=EC=86=8D=EC=84=B1=20=EC=B6=94=EA=B0=80=20(#48?= =?UTF-8?q?)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/timo-design-system/src/components/tag/Tag.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/timo-design-system/src/components/tag/Tag.tsx b/packages/timo-design-system/src/components/tag/Tag.tsx index 64cdfa1c..413b3b1e 100644 --- a/packages/timo-design-system/src/components/tag/Tag.tsx +++ b/packages/timo-design-system/src/components/tag/Tag.tsx @@ -2,9 +2,9 @@ export interface TagProps { text: string; } -export const Tag = ({ text = "과제" }: TagProps) => { +export const Tag = ({ text }: TagProps) => { return ( -
+
{text} From bbc9db2be25598de954d289b52646bb118fe179a Mon Sep 17 00:00:00 2001 From: kimminna Date: Wed, 1 Jul 2026 00:04:00 +0900 Subject: [PATCH 13/19] =?UTF-8?q?fix(ui):=20PriorityIcon=20priority=20prop?= =?UTF-8?q?=20=EA=B8=B0=EB=B3=B8=EA=B0=92=20=EC=A0=9C=EA=B1=B0=20(#48)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/priority-icon/PriorityIcon.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/timo-design-system/src/components/priority-icon/PriorityIcon.tsx b/packages/timo-design-system/src/components/priority-icon/PriorityIcon.tsx index abbe3a64..30cd8de6 100644 --- a/packages/timo-design-system/src/components/priority-icon/PriorityIcon.tsx +++ b/packages/timo-design-system/src/components/priority-icon/PriorityIcon.tsx @@ -14,7 +14,7 @@ export interface PriorityIconProps { priority: Priority; } -export const PriorityIcon = ({ priority = "매우중요" }: PriorityIconProps) => { +export const PriorityIcon = ({ priority }: PriorityIconProps) => { return (
Date: Wed, 1 Jul 2026 00:09:47 +0900 Subject: [PATCH 14/19] =?UTF-8?q?feat(ui):=20timo-gray-200=20=EC=83=89?= =?UTF-8?q?=EC=83=81=20=ED=86=A0=ED=81=B0=20=EC=B6=94=EA=B0=80=20(#48)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/tailwind-config/tokens/colors.css | 1 + packages/timo-design-system/src/tokens/color-token.ts | 1 + 2 files changed, 2 insertions(+) diff --git a/packages/tailwind-config/tokens/colors.css b/packages/tailwind-config/tokens/colors.css index cbe01cde..ae3ada7b 100644 --- a/packages/tailwind-config/tokens/colors.css +++ b/packages/tailwind-config/tokens/colors.css @@ -6,6 +6,7 @@ --color-timo-blue-200: #8cb0f9; --color-timo-blue-300: #74a0f8; + --color-timo-gray-200: #fbfbfb; --color-timo-gray-300: #f5f5f5; --color-timo-gray-500: #e6e8e8; --color-timo-gray-600: #d8d8d8; diff --git a/packages/timo-design-system/src/tokens/color-token.ts b/packages/timo-design-system/src/tokens/color-token.ts index 1169fc6a..ab0c8a8b 100644 --- a/packages/timo-design-system/src/tokens/color-token.ts +++ b/packages/timo-design-system/src/tokens/color-token.ts @@ -12,6 +12,7 @@ export const COLOR_TOKENS: ColorToken[] = [ { name: "timo-blue-200", cssVar: "--color-timo-blue-200", value: "#8CB0F9" }, { name: "timo-blue-300", cssVar: "--color-timo-blue-300", value: "#74A0F8" }, + { name: "timo-gray-200", cssVar: "--color-timo-gray-200", value: "#FBFBFB" }, { name: "timo-gray-300", cssVar: "--color-timo-gray-300", value: "#F5F5F5" }, { name: "timo-gray-500", cssVar: "--color-timo-gray-500", value: "#E6E8E8" }, { name: "timo-gray-600", cssVar: "--color-timo-gray-600", value: "#D8D8D8" }, From ff79f0180cc2cdd9a7894ef922b3e6cf14147e4b Mon Sep 17 00:00:00 2001 From: kimminna Date: Wed, 1 Jul 2026 00:14:53 +0900 Subject: [PATCH 15/19] =?UTF-8?q?feat(ui):=20headline-b-40=20=ED=83=80?= =?UTF-8?q?=EC=9D=B4=ED=8F=AC=EA=B7=B8=EB=9E=98=ED=94=BC=20=ED=86=A0?= =?UTF-8?q?=ED=81=B0=20=EC=B6=94=EA=B0=80=20(#48)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/tailwind-config/tokens/typography.css | 9 +++++++-- .../timo-design-system/src/tokens/typography-token.ts | 7 +++++++ 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/packages/tailwind-config/tokens/typography.css b/packages/tailwind-config/tokens/typography.css index d9656986..099da0d6 100644 --- a/packages/tailwind-config/tokens/typography.css +++ b/packages/tailwind-config/tokens/typography.css @@ -8,6 +8,11 @@ --typo-letter-spacing-headline-b-50: -0.03em; --typo-font-weight-headline-b-50: 700; + --typo-size-headline-b-40: 40px; + --typo-line-height-headline-b-40: 1.5; + --typo-letter-spacing-headline-b-40: -0.03em; + --typo-font-weight-headline-b-40: 700; + --typo-size-headline-b-30: 30px; --typo-line-height-headline-b-30: 1.5; --typo-letter-spacing-headline-b-30: -0.03em; @@ -17,7 +22,7 @@ --typo-line-height-headline-m-26: 1.5; --typo-letter-spacing-headline-m-26: -0.03em; --typo-font-weight-headline-m-26: 500; - + --typo-size-headline-b-24: 24px; --typo-line-height-headline-b-24: 1.5; --typo-letter-spacing-headline-b-24: -0.03em; @@ -106,4 +111,4 @@ line-height: --value(--typo-line-height-*); letter-spacing: --value(--typo-letter-spacing-*); font-weight: --value(--typo-font-weight-*); -} \ No newline at end of file +} diff --git a/packages/timo-design-system/src/tokens/typography-token.ts b/packages/timo-design-system/src/tokens/typography-token.ts index 6b5e3101..e0103cf6 100644 --- a/packages/timo-design-system/src/tokens/typography-token.ts +++ b/packages/timo-design-system/src/tokens/typography-token.ts @@ -14,6 +14,13 @@ export const TYPOGRAPHY_TOKENS: TypographyToken[] = [ lineHeight: "150%", letterSpacing: "-0.03em", }, + { + token: "typo-headline-b-40", + size: "40px", + weight: "700", + lineHeight: "150%", + letterSpacing: "-0.03em", + }, { token: "typo-headline-b-30", size: "30px", From 0e0fe8c377dd2c19d89eb1618ca164309578a70f Mon Sep 17 00:00:00 2001 From: kimminna Date: Wed, 1 Jul 2026 00:28:42 +0900 Subject: [PATCH 16/19] =?UTF-8?q?fix(ci):=20Chromatic=20buildScriptName=20?= =?UTF-8?q?=EC=98=B5=EC=85=98=20=EC=B6=94=EA=B0=80=20(#48)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .github/workflows/chromatic.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml index 5e40ad92..9ebd00fc 100644 --- a/.github/workflows/chromatic.yml +++ b/.github/workflows/chromatic.yml @@ -42,6 +42,7 @@ jobs: with: projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} workingDir: packages/timo-design-system + buildScriptName: build:storybook onlyChanged: true exitZeroOnChanges: true From 8e60a24a5fc0cafaba88748611025a68130990f1 Mon Sep 17 00:00:00 2001 From: kimminna Date: Wed, 1 Jul 2026 13:31:31 +0900 Subject: [PATCH 17/19] =?UTF-8?q?feat(design-system):=20PriorityIcon=20whi?= =?UTF-8?q?te=C2=B7blue=20=ED=83=80=EC=9E=85=20=EB=B0=8F=20=EC=8A=A4?= =?UTF-8?q?=ED=86=A0=EB=A6=AC=20=EA=B0=9C=EC=84=A0=20(#48)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../priority-icon/PriorityIcon.stories.tsx | 55 ++++++++++++++++++- .../components/priority-icon/PriorityIcon.tsx | 11 +++- 2 files changed, 63 insertions(+), 3 deletions(-) diff --git a/packages/timo-design-system/src/components/priority-icon/PriorityIcon.stories.tsx b/packages/timo-design-system/src/components/priority-icon/PriorityIcon.stories.tsx index 430432f2..8b5b7e5e 100644 --- a/packages/timo-design-system/src/components/priority-icon/PriorityIcon.stories.tsx +++ b/packages/timo-design-system/src/components/priority-icon/PriorityIcon.stories.tsx @@ -1,4 +1,4 @@ -import { PriorityIcon } from "./PriorityIcon"; +import { PriorityIcon, type Priority } from "./PriorityIcon"; import type { Meta, StoryObj } from "@storybook/react"; @@ -11,7 +11,7 @@ const meta = { argTypes: { priority: { control: "select", - options: ["매우중요", "중요", "보통", "낮음", "Disable"], + options: ["매우중요", "중요", "보통", "낮음", "Disable", "white", "blue"], }, }, } satisfies Meta; @@ -38,3 +38,54 @@ export const 낮음: Story = { export const Disable: Story = { args: { priority: "Disable" }, }; + +export const white: Story = { + args: { priority: "white" }, + parameters: { + backgrounds: { + default: "dark", + values: [ + { name: "light-gray", value: "#F5F5F5" }, + { name: "dark", value: "#333333" }, + { name: "white", value: "#FFFFFF" }, + ], + }, + }, +}; +export const blue: Story = { + args: { priority: "blue" }, +}; + +const ALL_PRIORITIES: Priority[] = [ + "매우중요", + "중요", + "보통", + "낮음", + "Disable", + "white", + "blue", +]; + +export const AllPriorities: Story = { + args: { priority: "매우중요" }, + parameters: { + backgrounds: { + default: "light-gray", + values: [ + { name: "light-gray", value: "#F5F5F5" }, + { name: "dark", value: "#333333" }, + { name: "white", value: "#FFFFFF" }, + ], + }, + }, + render: () => ( +
+ {ALL_PRIORITIES.map((priority) => ( +
+ + {priority} +
+ ))} +
+ ), +}; diff --git a/packages/timo-design-system/src/components/priority-icon/PriorityIcon.tsx b/packages/timo-design-system/src/components/priority-icon/PriorityIcon.tsx index 30cd8de6..83a235fb 100644 --- a/packages/timo-design-system/src/components/priority-icon/PriorityIcon.tsx +++ b/packages/timo-design-system/src/components/priority-icon/PriorityIcon.tsx @@ -1,6 +1,13 @@ import { cn } from "../../lib"; -export type Priority = "매우중요" | "중요" | "보통" | "낮음" | "Disable"; +export type Priority = + | "매우중요" + | "중요" + | "보통" + | "낮음" + | "Disable" + | "white" + | "blue"; const PRIORITY_COLOR: Record = { 매우중요: "bg-timo-red", @@ -8,6 +15,8 @@ const PRIORITY_COLOR: Record = { 보통: "bg-timo-gray-600", 낮음: "bg-timo-black", Disable: "bg-timo-gray-500", + white: "bg-white", + blue: "bg-timo-blue-300", }; export interface PriorityIconProps { From d8b48f4f2dda5d00bbd6725f965137419ebee0d0 Mon Sep 17 00:00:00 2001 From: kimminna Date: Wed, 1 Jul 2026 13:31:59 +0900 Subject: [PATCH 18/19] =?UTF-8?q?feat(design-system):=20Tag=20blue=20?= =?UTF-8?q?=EB=B2=A0=EB=A6=AC=EC=96=B8=ED=8A=B8=20=EC=B6=94=EA=B0=80=20?= =?UTF-8?q?=EB=B0=8F=20=EC=8A=A4=ED=86=A0=EB=A6=AC=20=EB=B0=98=EC=98=81=20?= =?UTF-8?q?(#48)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/tag/Tag.stories.tsx | 11 ++++++++++- .../src/components/tag/Tag.tsx | 18 +++++++++++++++--- 2 files changed, 25 insertions(+), 4 deletions(-) diff --git a/packages/timo-design-system/src/components/tag/Tag.stories.tsx b/packages/timo-design-system/src/components/tag/Tag.stories.tsx index e118c3ba..6e61d914 100644 --- a/packages/timo-design-system/src/components/tag/Tag.stories.tsx +++ b/packages/timo-design-system/src/components/tag/Tag.stories.tsx @@ -13,6 +13,11 @@ const meta = { control: "text", description: "태그에 표시될 텍스트", }, + variant: { + control: "select", + options: ["default", "blue"], + description: "태그 스타일 베리언트", + }, }, } satisfies Meta; @@ -20,5 +25,9 @@ export default meta; type Story = StoryObj; export const Default: Story = { - args: { text: "과제" }, + args: { text: "과제", variant: "default" }, +}; + +export const Blue: Story = { + args: { text: "과제", variant: "blue" }, }; diff --git a/packages/timo-design-system/src/components/tag/Tag.tsx b/packages/timo-design-system/src/components/tag/Tag.tsx index 413b3b1e..96e6efe3 100644 --- a/packages/timo-design-system/src/components/tag/Tag.tsx +++ b/packages/timo-design-system/src/components/tag/Tag.tsx @@ -1,11 +1,23 @@ +export type TagVariant = "default" | "blue"; + export interface TagProps { text: string; + variant?: TagVariant; } -export const Tag = ({ text }: TagProps) => { +export const Tag = ({ text, variant = "default" }: TagProps) => { + const isBlue = variant === "blue"; return ( -
- +
+ {text}
From 593863b442439e63efe0ea107b7abba9d38a409a Mon Sep 17 00:00:00 2001 From: kimminna Date: Wed, 1 Jul 2026 13:32:26 +0900 Subject: [PATCH 19/19] =?UTF-8?q?chore:=20coderabbit=20=EC=84=A4=EC=A0=95?= =?UTF-8?q?=20=EA=B3=B5=EB=B0=B1=20=EC=A0=95=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .coderabbit.yaml | 1 + 1 file changed, 1 insertion(+) diff --git a/.coderabbit.yaml b/.coderabbit.yaml index 12f2782d..d75ecae0 100644 --- a/.coderabbit.yaml +++ b/.coderabbit.yaml @@ -1,3 +1,4 @@ + language: "ko-KR" early_access: false