์ผ๋จ ๊ณ์ ์งํ์ ํ์ง๋ง... ๋ชจ๋ฅด๊ฒ ๋ค.. ์ด๊ฒ ๋ง๋..?
๊ฒฐ๋ก ๋ง ๋งํ์๋ฉด ์์งํ ๋ง์ด ์งํํ์ง ๋ชปํ๋ค.
๋ํ ์ด๊ฒ ๋ง๋? ์ถ๊ธฐ๋ ํ๋ค. ๊ทธ๋์ ๊ฐ๋ตํ๊ฒ๋ง ์์ฑํ๋ ค๊ณ ํ๋ค.
Logo.js
import logoimg from '../../img/logo.svg'
import { Logo } from "../../styled/headerStyle"
export function LogoComponent() {
return (
<Logo><img src={logoimg} alt="logo" />Coz Shopping</Logo>
)
}
export default LogoComponent;
Logo.stories.js
import logoimg from '../../img/logo.svg'
import { Logo } from "../../styled/headerStyle"
export function LogoComponent() {
return (
<Logo><img src={logoimg} alt="logo" />Coz Shopping</Logo>
)
}
export default LogoComponent;
์ฌ์ค ๋ก๊ณ ์ "Coz Shopping" ๋ถ๋ถ์ label๋ก ๋ฐ๊ฟ
์คํ ๋ฆฌ๋ถ์ ์ต์
์ ์ถ๊ฐํด ์ฃผ๋ ค๊ณ ํ์ผ๋... ์๊ฐ ๋ณด๋ค ์ ๋์ง ์์๊ณ
์ด๋ ํ ๊ตฌ์กฐ๋ก ์งํํด์ผํ๋์ง ๊ฐ์ด ์กํ์ง ์์์... ์ผ๋จ ํจ์ค
ImgCard.js
import * as pruductData from "../../api/pruductData"
export function ImgCard({}) {
return (
<Section>
<div className="img-box">
<img src='https://images.unsplash.com/photo-1617363020293-62faac14783d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80' />
</div>
</Section>
)
}
export default ImgCard;
ImgCard.stories.js
import ImgCrad from './ImgCrad'
export default {
title: 'Atoms/ImgCrad', // ์คํ ๋ฆฌ ๋ถ๋ฅ ๋ฐ ์ปดํฌ๋ํธ ์ด๋ฆ
component: ImgCrad, // ํ
์คํธํ ์ปดํฌ๋ํธ(Button)
}
export const Primary = () => <ImgCrad />;
Primary.arg = {
}
icon ์ฒ๋ผ selectbox๋ฅผ ๋ง๋ค์ด ์ฌ์ง์ ๋ค๋ฅด๊ฒ ํํํ๋ ค๊ณ ํ๋ค..
ํ๋ ๊ทธ ๋ํ ์ ๋๋ก ์ด๋ฃจ์ด์ง์ง ์์๊ณ ์๊ฐ์ด ๋ณ๋ก ๋จ์ง๋ ์์๋ค..
๊ทธ๋ ๊ฒ ์ด๋ฒ ๊ณผ์ ๋ฅผ ํ๊ธด ํ์ง๋ง ์ด๊ฒ ํ ๊ฑด๊ฐ..? ์ ๋๋ก ํ๋ค.ใ
story book์ ์๋ฆฌ๋ง ์ ๋๋ก ์๋ค๋ฉด ํ ์ ์์ ๊ฑฐ ๊ฐ์ง๋ง
๊ทธ ์์๋ด๋๋ฐ์ ์๊ฐ์ด ์ข ๊ฑธ๋ฆด ๊ฒ ๊ฐ์๋ค.
์ฌ๋ด์ด์ง๋ง ๋ค๋ฅธ ๋ถ ์๊ธฐ ๋ค์ด๋ณด๋ ๊ทธ๋ ๊ฒ ์ค์ํ์ง ์๋ค๊ณ ํ๋ค.
ํ์ง๋ง ์ฌ์ฉํ๋ ๊ธฐ์
์ ์ทจ์
์ ํ๊ฑฐ๋ ๋ฑ ํ์๋ก ํ ๋๋ ๋ถ๋ช
์๊ธธ ์ ์๋ค.
๊ทธ ๋ ์ ๋๋ก ๋ฐฐ์๋ ๋ฆ์ง ์์๋ค ์๊ฐํ๊ณ
sroty book์ ์ด๋ฐ์์ผ๋ก ์งํ๋๋ ๊ตฌ๋ ์ ๋๋ง ํ์
ํด๋ ๊ด์ฐฎ์ง ์์๊น ์ถ๋ค.