๐Ÿ  home

์•ˆ๋…•ํ•˜์„ธ์š”! ์ €๋Š” ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž ๋ฏผ์„ ์˜ค์ž…๋‹ˆ๋‹ค.
์ด ๊ณต๊ฐ„์€ ์ œ๊ฐ€ ๊ณต๋ถ€ํ•˜๊ณ  ๊ฒฝํ—˜ํ•œ ๋‚ด์šฉ์„ ๊ธฐ๋กํ•˜๊ณ , ๋‚˜์ค‘์˜ ๋‚˜์™€ ๋ˆ„๊ตฐ๊ฐ€์—๊ฒŒ ๋„์›€์ด ๋˜๊ธธ ๋ฐ”๋ผ๋Š” ๋งˆ์Œ์œผ๋กœ ์šด์˜๋˜๊ณ  ์žˆ์–ด์š”.

๐Ÿ’ก ์ด ๋ธ”๋กœ๊ทธ๋Š” ๋‹จ์ˆœํ•œ ๊ธฐ๋ก์„ ๋„˜์–ด,
์‹ค์ œ ํ”„๋กœ์ ํŠธ์—์„œ ๊ฒช์€ ๋ฌธ์ œ ํ•ด๊ฒฐ ๊ณผ์ •, ์ƒˆ๋กญ๊ฒŒ ๋ฐฐ์šด ๊ธฐ์ˆ ,
ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž๋กœ ์„ฑ์žฅํ•ด๊ฐ€๋Š” ์—ฌ์ •์„ ๋‹ด๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.


๐ŸŽฏ ๋ธ”๋กœ๊ทธ ์šด์˜ ์›์น™

๋ธ”๋กœ๊ทธ ๋ชฉํ‘œ

โœ”๏ธ ๋‚ด ์–ธ์–ด๋กœ ์ •๋ฆฌํ•˜๊ธฐ โ€“ ๋‚ด๊ฐ€ ์ดํ•ดํ•œ ๋ฐฉ์‹๋Œ€๋กœ ๊ธฐ๋กํ•˜๊ธฐ
โœ”๏ธ ์ง€์†์ ์ธ ์„ฑ์žฅ ๊ธฐ๋ก โ€“ ์ž‘๊ฒŒ๋ผ๋„ ๋งค์ผ/๋งค์ฃผ ๋ฌด์–ธ๊ฐ€๋ฅผ ๊ธฐ๋กํ•˜๊ธฐ
โœ”๏ธ ์‹ค๋ฌด์— ๋ฐ”๋กœ ์จ๋จน์„ ์ˆ˜ ์žˆ๋„๋ก โ€“ ๋ณต๋ถ™์ด ๊ฐ€๋Šฅํ•œ ์ฝ”๋“œ, ์‹ค์ œ ํ•ด๊ฒฐํ•œ ๋ฌธ์ œ ์œ„์ฃผ


๐Ÿงฑ ์‹ค๋ฌด ๊ธฐ๋ฐ˜ ์ปดํฌ๋„ŒํŠธ ์ œ์ž‘ ๊ธฐ๋ก

  • Title, Header, Footer, Input, Card ๋“ฑ ์‹ค๋ฌด ์Šคํƒ€์ผ๋กœ ์ง์ ‘ ๊ตฌํ˜„
  • Vanilla Extract + tailwind-variants ์กฐํ•ฉ์„ ํ™œ์šฉํ•œ ๋””์ž์ธ ์‹œ์Šคํ…œ ์ ์šฉ
  • darkTheme, themeContract, vars๋ฅผ ํ†ตํ•œ ๋‹คํฌ๋ชจ๋“œ ์ „ํ™˜ ์‹œ์Šคํ…œ ๊ตฌํ˜„
  • Jest, React Testing Library๋ฅผ ํ™œ์šฉํ•œ ์ปดํฌ๋„ŒํŠธ ํ…Œ์ŠคํŠธ ์ž๋™ํ™” ์ ์šฉ

๐Ÿ’ก ๋ชจ๋“  ์ปดํฌ๋„ŒํŠธ๋Š” ์žฌ์‚ฌ์šฉ์„ฑ, ํ™•์žฅ์„ฑ, ํƒ€์ž… ์•ˆ์ „์„ฑ์„ ๊ณ ๋ คํ•ด ์„ค๊ณ„ํ–ˆ์Šต๋‹ˆ๋‹ค.


๐Ÿ“Œ ์‹œ์ž‘ํ•˜๊ธฐ ์ข‹์€ ๊ธ€

์ถ”์ฒœ ์‹œ์ž‘๊ธ€

๐Ÿ™Œ ํ•จ๊ป˜ ์„ฑ์žฅํ•ด์š”

ํ‹€๋ ค๋„ ๊ดœ์ฐฎ์•„์š”.
๊ธฐ๋กํ•˜๊ณ , ๋Œ์•„๋ณด๊ณ , ๊ณ ์น˜๊ณ , ๋˜ ๋‚˜์•„๊ฐ€๋Š” ๊ฒƒ์ด ๊ฐœ๋ฐœ์ž์˜ ๊ธธ์ด๋‹ˆ๊นŒ์š”.


๐Ÿ“ฌ ์—ฐ๋ฝํ•˜๊ธฐ