์ค๋ฌด์ ๋ฐ๋ก ์ ์ฉํ๋ ์คํ ๋ฆฌ๋ถ๊ณผ UI ํ ์คํธ
์คํ ๋ฆฌ๋ถ ํ์ฉ๋ฒ A to Z. ์คํ ๋ฆฌ๋ถ์ ๋ชจ๋ ๊ฒ์ ๋ณด์ฌ๋๋ฆฝ๋๋ค
์๊ฐ์ 570๋ช
๋์ด๋ ์ด๊ธ
์๊ฐ๊ธฐํ ๋ฌด์ ํ

- ๋ฏธํด๊ฒฐ
์คํ ๋ฆฌ๋ถ์ ๋ํด์
์๋ ํ์ธ์. ์ข์ ๊ฐ์ ๊ฐ์ฌํฉ๋๋ค.๊ฐ์๋ฅผ ๋ฃ๋ค ๋ณด๋ Storybook๊ณผ Chromatic์ด์ปดํฌ๋ํธ ๊ฒ์ฆ๊ณผ ํ์ ์ ๋์์ด ๋๋ค๋ ์ ์ ์ดํดํ ์ ์์์ต๋๋ค.
reacttypescripttailwindcssstorybookui-testingJEOUNG WOOYOUNG
ใป
2๋ฌ ์
0
38
1
- ๋ฏธํด๊ฒฐ
Storybook 10์์ argTypes์ action ์ค์ ์
์๋ ํ์ธ์! ๊ฐ์ ์ค์ต ๋์ค ์ค์ ๋ฐฉ์๊ณผ ๊ด๋ จํ์ฌ ๊ถ๊ธํ ์ ์ด ์๊ฒจ ์ง๋ฌธ ๋๋ฆฝ๋๋ค.๊ฐ์์์๋ argTypes ์์ onClick
reacttypescripttailwindcssstorybookui-testingCoi
ใป
2๋ฌ ์
0
59
1
- ํด๊ฒฐ
storybook setup
node -v : 24vite react.tsstorybook 10v---<p style=
reacttypescripttailwindcssstorybookui-testingCoi
ใป
2๋ฌ ์
0
67
2
- ๋ฏธํด๊ฒฐ
์ค๋ฌด ์ ์ฉ ๊ด๋ จํด์ ์ง๋ฌธ์ด ์์ต๋๋ค!
๊ฐ์๋ฅผ ๋ฃ๊ณ ์ค๋ฌด์ ์ด๋ป๊ฒ ์ ์ฉํด๋ณผ์ ์์๊น ์๊ฐํ๋ค๋ณด๋ ๊ถ๊ธํ ์ ๋ค์ด ์์ด์ ์ง๋ฌธ ๋จ๊น๋๋ค!<p style="text-al
reacttypescripttailwindcssstorybookui-testingdydgus0421
ใป
5๋ฌ ์
0
48
2
- ํด๊ฒฐ
storybook ํ๋ก์ ํธ ์ธํ ์ค ๊ถ๊ธํ ์ ์ด ์์ต๋๋ค.
๋ง์ฝ ํ์ฌ์์ Next.js๋ก ํ๋ก์ ํธ๋ฅผ ์งํํ๊ณ ์๋ค๊ณ ๊ฐ์ ํ ๋, storybook์ Next.js ํ๋ก์ ํธ ๋ด์์ ์ธํ ํ๋ ๊ฒ๋ณด๋ค ์์ ๋ค๋ฅธ ํ๋ก์ ํธ ๋๋ ํ ๋ฆฌ๋ก ๋ง๋๋ ๊ฒ ๋์ ๊ฒ ๊ฐ๋ค๋ ์๊ฐ์ด ๋๋๋ฐ, ์ด๋ป๊ฒ ์
reacttypescripttailwindcssstorybookui-testing์์์
ใป
8๋ฌ ์
0
108
2
- ํด๊ฒฐ
์คํ ๋ฆฌ๋ถ ํ ์คํธ์ ๋ํ ์ง๋ฌธ
๊ฐ์ ์ค ์คํ ๋ฆฌ๋ถ์ด ํ ์คํธ๋ฅผ ์ํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ผ๊ณ ๋ง์ํ์ ๋ถ๋ถ์ด ์๋๋ฐ์,์คํ ๋ฆฌ๋ถ ํ ์คํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ yarn pnp์ ์์กด์ฑ ๊ฐ์ ์ถฉ๋์ด ์๋ ๊ฒ์ผ๋ก ๋ณด์ ๋๋ค. <p styl
reacttypescripttailwindcssstorybookui-testing๊น๋ํ
ใป
9๋ฌ ์
0
84
2
- ๋ฏธํด๊ฒฐ
tailwind 4.x ๋ฒ์ ๋ณ๊ฒฝ๋ CSS ์ถ์ถ(?) ์ปค๋งจ๋
๊ฐ์์ ์๋ ์ปค๋งจ๋๊ฐ ์ฌ์ฉ๋์ง ์์์ ์ด๊ณณ ์ ๊ณณ ๋์๋ค๋๋ค๊ฐ ๋ฐ๊ฒฌํ๋ค์ npx @tailwindcss/cli -i ./src/index.css -o ./src/output
reacttypescripttailwindcssstorybookui-testingํ์ ํ
ใป
์ผ ๋ ์
1
195
2
- ๋ฏธํด๊ฒฐ
์คํ ๋ฆฌ๋ถ ํ ๋ง์ ๋ํด ์ง๋ฌธ ๋๋ฆฝ๋๋ค.
ํผ๋ธ๋ฆฌ์ ๋ก ์ผํ๊ณ ์๋๋ฐ..์ค์ ํ๋ ๋ถ๋ถ์ด ๋ น๋ก์น ์์ ์ด๋ ๊ฒ ์ง๋ฌธ๋๋ฆฝ๋๋ค.์ ๊ฐ ํ๊ณ ์ ํ๋ ๊ฒ์ ๋ผ์ดํธ,๋คํฌ ํ ๋ง์ ์ฃผ์ ์ปฌ๋ฌ์ ๊ธฐํ ์์๋ฑ์ ๋ณ๊ฒฝํ๋ ค๊ณ ํ๋๋ฐ์..css ๋ณ์ ์ฒ๋ฆฌ
reacttypescripttailwindcssstorybookui-testingjaiyah
ใป
์ผ ๋ ์
0
143
2
- ํด๊ฒฐ
ํ ์ผ์๋๋ฅผ ์์ฐ๊ณ ์คํ์ผ ์ปดํฌ๋ํธ๋ง ์ฌ์ฉํ๋ ํ๊ฒฝ์์๋์?
ํ ์ผ์๋๋ฅผ ์์ฐ๊ณ ์คํ์ผ ์ปดํฌ๋ํธ๋ง ์ฌ์ฉํ๋ ํ๊ฒฝ์์๋์? ํ ์ผ์๋๋ก ํ๊ฒฝ์ ํ ์ ํ๋๊ฒ ๋ง์๊น์??
reacttypescripttailwindcssstorybookui-testing๋ฉ๋ฆฌ์๋์จ
ใป
์ผ ๋ ์
0
138
2
- ๋ฏธํด๊ฒฐ
[์ง๋ฌธ x ๊ณต์ ์ฉ] tailwind v4.0 ์ผ๋ก ๊ฐ์๋ ๋ค๋ฅผ ๋ (import ๋ค๋ฆ, tailwind.config.js ์์ด์ง ๋ฑ)
๊ฐ์๋ ๋ค๋ฅธ ๋ถ๋ถ 1. tailwind ์ค์น ์ปค๋งจ๋: ์ปค๋งจ๋๊ฐ ๊ฐ๋จํด์ก์ด์.npm install tailwindcss @tailwindcss/vite <st
reacttypescripttailwindcssstorybookui-testing์ค์ผ์ผ
ใป
์ผ ๋ ์
6
450
2
- ํด๊ฒฐ
react-toastify ๋ฅผ storybook์ ์ถ๋ ฅ ์ํค๊ธฐ
react-toastify๋ฅผ ์ฌ์ฉํ์๋ ๊ฒฝ์ฐ storybook์์ ์ถ๋ ฅํ๋๋ฐ ๊ณค๋ํจ์ ๊ฒช๋ ๋ถ๋ค์ด ๊ณ์ค ๊ฑฐ ๊ฐ์ ์๋ฌธ์๋ต ์ฌ๋ ค๋ก๋๋ค! package.json<p
reacttypescripttailwindcssstorybookui-testingreact-toastify๋ฐฐ์ฐฌ
ใป
0
168
1
- ํด๊ฒฐ
react์์ modal & portal ์ฌ์ฉ์ ์๋ ์ด๋ป๊ฒ ์์ฑํด์ผ๋ ๊น์
๊ฐ์react-modal ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ๊ณ ์๋ค๊ฐ Storybook์ ๋ฑ๋กํ์ฌ ๊ด๋ฆฌํ๊ณ ์ถ์ด์ ์์ฑํ๋๋ฐ ์๋์ ๊ฐ์ด ์ปดํฌ๋ํธ๋ฅผ ์์ฑํ๋ค๊ฐ ์คํ ๋ฆฌ๋ถ ํ๋ฉด์์์๋ฌ๊ฐ ๋ฐ์
reacttypescripttailwind-cssstorybookui-testingmodalportalreact-modalroot๋ฐฐ์ฐฌ
ใป
0
360
3
- ๋ฏธํด๊ฒฐ
tsconfig
<img src="https://cdn.inflearn.com/public/files/posts/2bc01848-a73e-4ad0-b3f2-22c2cdff4af6/2cf73498-6626-45ce-b117-89a7da8e33d5.png" media-type="img"
reacttypescripttailwind-cssstorybookui-testingjaehong2782
ใป
0
172
1
- ๋ฏธํด๊ฒฐ
vite ์ด๊ธฐ์ค์
์๋ ํ์ธ์ ๊ฐ๋ฐ์๋.vite์ด๊ธฐ์ค์ ํ ๋ "Select a variant" ์ค์ ์์typescript+ SWC๋์ typescript๋ฅผ ํ๋ ์ด์ ๊ฐ ๋ญ๊ฐ์?์ต๊ทผ์ vite๋ฅผ ์ฌ์ฉํ๋ฉด์ ๊ฒ์์ ํ ๊ฒฐ๊ณผ ๋ณดํต react์์ ์ฌ์ฉํ๋
reacttypescripttailwind-cssstorybookui-testingEunwoo
ใป
0
332
2
- ๋ฏธํด๊ฒฐ
์คํ ๋ฆฌ ๋ด args์์ ์๋ฌ๊ฐ ๋ฐ์ํฉ๋๋ค.
์๋ ํ์ธ์, ์ผ๋จ ์ดํดํ๊ธฐ ์ฝ๊ฒ ๊ฐ์ ๋ง๋ค์ด์ฃผ์ ์ ๊ฐ์ฌ๋๋ฆฐ๋ค๋ ๋ง์๋๋ฆฌ๊ณ ์ถ์ต๋๋ค.ํ์ฌ next app router์์ ์งํ์ค์ธ๋ฐ์, primary๋ผ๋ ์คํ ๋ฆฌ๋ฅผ ์์ฑํ๊ณ , ๊ทธ ๋ด์ ์ฌ์ฉํ๋ Props๋ค์ ์ถ๊ฐํ์์ต๋๋ค. ๋ค๋ง ๊ฐ์(Def
reacttypescripttailwind-cssstorybookui-testingaustin-verse
ใป
0
195
2
- ํด๊ฒฐ
Nextjs์์ tailwind๋ฅผ ์ฌ์ฉํ ๋
Tailwind ๊ฟํ ์๋ ค์ฃผ์๋ฉด์ ์ฌ์ ์ ์ ์ํ css๋ค์ nextjs ํ๋ก์ ํธ๋ฅผ ์ฌ์ฉํ๋ฉด tailwind๋ฅผ ์ง์ํ๋ ๋น๋ํ ๋ ์คํ์ผ์ ํฌํจ ์ํด๋๋ ๊ฒ ๊ฐ๋ค ๋ผ๊ณ ๋ง์ํ์ ๋ถ๋ถ์ด ์ ์ดํด๊ฐ ์๋์ด์ ์ง๋ฌธ ๋๋ฆฝ๋๋ค...ใ ใ ์ด๋ป
reacttypescripttailwind-cssstorybookui-testing๊น์์ธ
ใป
0
265
2
- ํด๊ฒฐ
์ ๊ณตํด์ฃผ์๋ Figma ์์ ์ฝ๋๊ฐ ๊ฐ์์ ๋ฌ๋ผ ๊ธ ๋จ๊น๋๋ค!
Figma์์ mono100 ์ ์์์ฝ๋๊ฐ #f1f1f1 ์ด ์๋ #f52c50 ์ผ๋ก ์ค์ ๋์ด ์์ต๋๋ค. ํ์ธ๋ถํ๋๋ฆฝ๋๋ค...! <img src="https://cd
reacttypescripttailwind-cssstorybookui-testingmiho2582
ใป
0
131
2
- ํด๊ฒฐ
Visual Test
์คํ ๋ฆฌ๋ถ ์์ฒด์ Action ํญ ์ค๋ฅธ์ชฝ์ Visual Test๋ผ๋ ํญ์ด ์๋๊ฑธ ํ์ธํ์ต๋๋ค. ๊ฐ์์ ๊ฐ์ ๋ด์ฉ์ ๊ธฐ๋ฅ์ธ๊ฐ ํด์ ์ฌ์ญค๋ด ๋๋ค! ๊ฐ์ ๊ธฐ๋ฅ์ธ๋ฐ ์ข
reacttypescripttailwind-cssstorybookui-testing๊น์์ธ
ใป
1
118
1
- ํด๊ฒฐ
NavigationBar ๋ฐฐ๊ฒฝ์
NavigationBar ๊ฐ์๋ฅผ ์์ฒญํ์ต๋๋ค.๋ฐฐ๊ฒฝ์์ ์์ฑํ์ง ์์ผ์๋๋ฐ ๊ทธ๋ ๊ฒ ํ์ ์ด์ ๊ฐ ์์ผ์ ๊ฐ์?
reacttypescripttailwind-cssstorybookui-testing๊น์์ธ
ใป
0
120
1
- ํด๊ฒฐ
defaultValue ์ง๋ฌธ ๋๋ฆฝ๋๋ค!
IconButton์ ๊ฒฝ์ฐ alt์๋ง defaultValue๋ฅผ ์์ฑํ์๋๋ฐ iconPath๋ ์์ฑํ์ง ์์ผ์๋ ํน๋ณํ ์ด์ ๊ฐ ์์ผ์ ๊ฐ์?์ด๋ค ๊ธฐ์ค์ผ๋ก defaultValue ์์ฑ ์ฌ๋ถ๋ฅผ ํ๋จํ์๋์ง๋ ๊ถ๊ธํฉ๋๋ค!
reacttypescripttailwind-cssstorybookui-testing๊น์์ธ
ใป
0
116
1






