ant-design-korea / ant-design

์—”ํ„ฐํ”„๋ผ์ด์ฆˆ๊ธ‰ UI ๋””์ž์ธ ์–ธ์–ด ๋ฐ React UI ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ
https://ant.design
MIT License
14 stars 25 forks source link

[blog] Component-level CSS-in-JS ๋ฒˆ์—ญ #11

Closed idealHyun closed 1 month ago

idealHyun commented 1 month ago

๐Ÿš€ Todo

  1. CN ํŒŒ์ผ ์‚ญ์ œ
  2. EN ์ ‘๋ฏธ์‚ฌ ์‚ญ์ œ
  3. Component-level CSS-in-JS ๋ฒˆ์—ญ

๐Ÿ“ Summary

[Ant Design 5.0๊ณผ "component level" CSS-in-JS ์†”๋ฃจ์…˜]

๐Ÿ” ๊ณ ๋ฏผํ–ˆ๋˜ ๋ถ€๋ถ„

github-actions[bot] commented 1 month ago

Prepare preview

github-actions[bot] commented 1 month ago

๐Ÿ‘ Visual-Regression Diff Building... โณ

This PR is under visual-regression-diff building, please wait for the result.

lolWK commented 1 month ago

"component level"์€ ๊ฐ•์กฐํ•˜๊ณ  ์‹ถ์€ ํ•˜๋‚˜์˜ ๊ธฐ์ˆ ์ ์ธ ์šฉ์–ด์ธ ๊ฒƒ ๊ฐ™์•„ ์˜์–ด๋ฅผ ์œ ์ง€ํ•˜์˜€์Šต๋‹ˆ๋‹ค.

์ €๋Š” ์œ ์ง€ํ•˜๋Š” ๊ฒŒ ์ข‹์€ ๊ฒƒ ๊ฐ™์•„์š”

๋ณธ๋ฌธ์—์„œ ๋‚˜์˜ค๋Š” component๋“ค์€ ์ปดํฌ๋„ŒํŠธ๋กœ ๋ฒˆ์—ญํ•˜์—ฌ ์ ์—ˆ๋Š”๋ฐ ์˜์–ด๋กœ ํ†ต์ผํ•˜๋Š” ๊ฒƒ์ด ์ข‹์„์ง€, ์ด๋Œ€๋กœ ์œ ์ง€ํ•˜๋Š”๊ฒŒ ์ข‹์„์ง€ ์˜๊ฒฌ ์ฃผ์‹œ๋ฉด ๊ฐ์‚ฌํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

component๋Š” ์ปดํฌ๋„ŒํŠธ ํ•œ๊ธ€๋กœ ์ ์€๊ฒŒ ๋” ์ข‹์€ ๊ฒƒ ๊ฐ™์•„์š”!

๋ณธ๋ฌธ์— ๋‚˜์˜ค๋Š” ์ปดํฌ๋„ŒํŠธ ์Šคํƒ€์ผ์ด ์ปดํฌ๋„ŒํŠธ์˜ ๊ธฐ๋ณธ์ ์ธ ์Šคํƒ€์ผ์˜ ๊ตฌ์กฐ๋ฅผ ์˜๋ฏธํ•˜๋Š” ๊ฒƒ ๊ฐ™์€๋ฐ ๋‹ค๋ฅธ ๋ถ„๋“ค์€ ์ปดํฌ๋„ŒํŠธ ์Šคํƒ€์ผ์ด๋ผ๋Š” ์šฉ์–ด์— ์žˆ์–ด์„œ ์•ˆ ํ—ท๊ฐˆ๋ฆฌ์‹œ๋Š”์ง€ ๊ถ๊ธˆํ•˜๊ณ , ์ž˜๋ชป ๋ฒˆ์—ญํ•œ ๋ถ€๋ถ„์ด ์žˆ๋‹ค๋ฉด ๋ง์”€๋ถ€ํƒ๋“œ๋ฆฝ๋‹ˆ๋‹ค!

์ €๋Š” ์‚ฌ์‹ค ๊ธ€ ๋‚ด์šฉ์ด ๋ง‰ ์—„์ฒญ๋‚˜๊ฒŒ ์ž˜ ์ดํ•ด๊ฐ€ ๋˜์ง„ ์•Š์ง€๋งŒ,, ์ปดํฌ๋„ŒํŠธ ์Šคํƒ€์ผ์€ ์ €๋Š” ํ•ด๋‹น ์ปดํฌ๋„ŒํŠธ ๋‚ด์— ์ž‘์„ฑ๋œ style๋กœ ์ดํ•ดํ–ˆ์Šต๋‹ˆ๋‹ค.

์ž˜ ์ฝ์—ˆ์Šต๋‹ˆ๋‹ค. ์ด ํŒŒํŠธ ๋ถ€๋ถ„ ๋ฉ˜ํ† ๋‹˜์ด ์™„์ „ ์–ด๋ ค์šด ๊ธ€์ด๋ผ๊ณ  ์–˜๊ธฐํ•ด์ฃผ์…จ์—ˆ์—ˆ๋Š”๋ฐ.. ์ˆ˜๊ณ ํ•˜์…จ์–ด์š”!