๊ธฐ์กด์ ๊ตฌํํ ์๋ก ํ๋ก์ ํธ์ Storybook์ ์ฌ์ฉํด ํ๋ก์ ํธ ์ธํฐํ์ด์ค๋ฅผ ๋์์ธ ์์คํ ์ผ๋ก ๋ณํํ๋ ์์ ์ ์งํํ๋ค.
Storybook ๋จผ์ ์ค์นํด์ผํ์ง๋ง ๊ทธ ๋ถ๋ถ์ ์ด์ ํ์ต์์ ๋์ผํ ๋ฐฉ์์ผ๋ก ์งํ๋์ด ๊ตณ์ด ์์ฑํ์ง ์์๋ค.
๊ธฐ์กด์ ํ๋ก์ ํธ์์ ์ฌ์ฉ ์ค์ธ ๋ชจ๋ UI ์์๋ค์ ์ ๋ฆฌํ๊ณ ๋ถ์ํ๋ ๊ณผ์ ์ด๋ค.
ํ๋ก์ ํธ์์ ์ฌ์ฉ๋ ๋ชจ๋ UI๋ฅผ ์บก์ฒํ๊ณ ์ด๋ฅผ ํ ๊ณณ์ ๋ชจ์๋๋ฉด ๋๋ค.
์๋ด ์ฌํญ์์๋ Google Slides๋๋ Keynote ์ฌ์ฉํ๋ผ๊ณ ๋์ ์์ด์ Google Slides๋ฅผ ํํ๋ค.
๊ทผ๋ฐ ์ด๋ ๊ฒ ํ๋๊ฒ ๋ง๋์ง ์๋ฌธ์ด ๋ ๋ค...
์ด๋ฐ ์์ผ๋ก ๊ฐ๊ฐ์ ์ปดํฌ๋ํธ์์ ์์ ์์ญ๊น์ง ์บก์ฒํด ๋ฐฐ์นํด ๋์๋ค.
Header, CardItem, Bookmark, Madal, ProductTablist ์ ๋๋ก ๋ถ๋ฆฌํด ๋์๋ค.
์ฌ์ค ํผ๊ทธ๋ง ์์
๊ณผ ํ์ฅ ๊ฐ๋ฅํ ์ปดํฌ๋ํธ ๊ฐ๋ฐ์ ํด์ผํ์ง๋ง...
์ด๋ฏธ ์๋ก ํ๋ก์ ํธ์์ ์งํํ๋ ๋ถ๋ถ์ด๊ธฐ๋ ํ๊ณ ๊ธ๋ก๋ง ๋์ ์์ด.. ์ดํด๊ฐ ๊ฐ์ง ์๋๋ค..
๋ ์ฒ๋ผ ํท๊ฐ๋ฆฌ๋ ๋ถ์ด ๋ฌธ์ํ์
จ๋๋ฐ
์๋ก์ด ๋์์ธ, ์คํ ๋ฆฌ๋ฅผ common ํด๋์ ๋ฃ์ด ๊ด๋ฆฌํ๊ณ ์ดํ ์ค์ ํ๋ก์ ํธ์ ์ ์ฉํ๋ฉด ๋๋ค๊ณ ํ์
จ๋ค.
๋์์ธ ์์คํ ์ ์์ ํ ๋ ์์ ๋จ์์์ ํฐ ๋จ์๋ก ์์ ์ ์งํํ๋ฉด ๋๋ค.
๋ ๋ญฃ๋ ๋ชจ๋ฅด๊ณ ๋ถ๋งํฌ ๋ฒํผ ๋ถํฐ ์งํ ํ๋ ๊ฑฐ ๊ฐ๋ค.
primary false/true๋ฅผ ์ค์ ํด๋ฆญ, ํด๋ฆญ ํ ์ ์คํ์ผ์ ๊ฐ๊ฐ ๋ถ๋ฆฌ์์ผฐ๋ค. (์ด๊ฒ ๋ง๋..?ใ ..)
import { AiFillStar } from "react-icons/ai";
import styled from "styled-components"
export const BookmarkBtnComponent = styled.button`
border: 0;
background-color: transparent;
font-size: 2rem;
display: flex;
align-items: center;
justify-content: center;
&:active .AiFillStar, &:focus .AiFillStar {
color: #FFD361;
}
>.AiFillStar {
filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3));
color: ${(props) => (props.primary ? "#FFD361" : "#dfdfdf")};
}
`
function BookMarkBtn({ primary, handleBookmarkToggle, isBookMark }) {
return (
<BookmarkBtnComponent primary={primary} onClick={handleBookmarkToggle}>
<AiFillStar className="AiFillStar" />
</BookmarkBtnComponent>
);
}
export default BookMarkBtn;
color: ${(props) => (props.primary ? "#FFD361" : "#dfdfdf")};
์์
props.primary ์ ๋ฌด์ ๋ฐ๋ผ์ ์์์ ๋ค๋ฅด๊ฒ ์ง์ ํด ์ฃผ์๋ค.
Primary, Secondary์ ๋ฐ๋ก ์ง์ ํด๋ ๋๊ธดํ์ง๋ง props๋ฅผ ์ด์ฉํ๋ฉด ์ข ๋ ๊ฐ๋จํ๊ฒ ์์ฑ ํ ์ ์๋ค.
import BookmarkBtn from './BookmarkBtn';
export default {
title: 'Atoms/BookmarkBtn', // ์คํ ๋ฆฌ ๋ถ๋ฅ ๋ฐ ์ปดํฌ๋ํธ ์ด๋ฆ
component: BookmarkBtn, // ํ
์คํธํ ์ปดํฌ๋ํธ(Button)
}
export const Primary = {
args: {
primary: true,
},
};
export const Secondary = {
args: {
primary: false,
},
};
์ฝ๋๋ฅผ ์์ฑํ๋๋ฐ ๋ต์ ์๋ค๊ณ ๋ณธ๋ค.
title: 'Atoms/BookmarkBtn'
๋
์คํ ๋ฆฌ ๋ถ์์ ์คํ ๋ฆฌ๋ฅผ ์ด๋ป๊ฒ ๋ถ๋ฆฌํ ๊ฑด์ง, ์ปดํฌ๋ํธ ์ด๋ฆ์ ๋ฌด์์ผ๋ก ์ง์์ง ์์ฑํ๋ค.
ํ๋จ์ Primary, Secondary์ ๋ํ ์์ฑ์ ์์ฑํด ์ฃผ๋ฉด ์๋์ผ๋ก 2๊ฐ์ง ๋ฒ์ ์ ์คํ์ผ์ด ์๊ธด๋ค.
์ด๋ ๊ฒ ์์
ํ๊ณ ๋ค์๋ ์๊ฐ์ด ์์ ๋จ์๋ก ์์
์ด ์ด๋ฃจ์ด์ ธ์ผ ํ๋ค๋ฉด
์์ด์ฝ, ๋ฒํผ, ํ
์คํธ ๋ฑ ๋ถํฐ ์งํ๋์ด์ผ ํ๋๊ฑฐ ์๋๊ฐ? ๋ผ๋ ์๊ฐ์ด ๋ค์๊ณ
๋ ํผ๋ฐ์ค ์คํ ๋ฆฌ๋ถ๋ ๊ทธ๋ ๊ฒ ๋์ ์์๋ค.
๋ถ๋ด๋ถ๋ด ์์ด์ฝ ๋ฆฌ์คํธ๋ฅผ ๋ง๋ค์ด ์ฃผ์๋ค.
์ฝ๋๋ ๋ ํผ๋ฐ์ค ์ฝ๋๋ฅผ ์ฐธ๊ณ ํด ์งํํด ์ฃผ์๋ค.
header์ nav๋ถ๋ถ๊ณผ ๋ถ๋งํฌ ๋ฒํผ์ ํ์ํ๋ค. ์๊ฐ๋ณด๋ค ์์ด์ฝ์ด ์์ง?์ ๋ง์ง ์์๊ฑฐ ๊ฐ๋ค.
import * as Icons from "react-icons/ai";
import { styled } from 'styled-components';
export const iconNames = [
'AiOutlineMenu',
'AiOutlineGift',
'AiOutlineStar',
'AiFillStar',
];
export const Icon = ({ icon, color, size, ...rest }) => {
const FeatherIcon = styled(Icons[icon])`
color: ${(props) => props.color || "#000"};
font-size: ${(props) => props.size || "2rem" };
`;
return <FeatherIcon size={size} color={color} {...rest} />;
};
import * as Icons from "react-icons/ai"
์ด๋ถ๋ถ์ด
import * as Icons from 'react-feather'
์ผ๋ก ๋์ด ์์๋ค.
react-feather
๊ตฌ๊ธ๋ง ํด๋ณด๋ ์์ด์ฝ์ด์๋ค.
๊ทธ๋ผ ์ด๋ถ๋ถ์ ๋ด๊ฐ ์ฌ์ฉํ๋ ์์ด์ฝ์ผ๋ก ๋ณ๊ฒฝํ๊ณ iconNamse
์ ๋ฆฌ์คํธ๋ ๊ฐ์ด ๋ณ๊ฒฝํ๋ฉฐ ๋์ง ์์๊น ํ๋ค. ๋คํํ ์ ๋
ธ์ถ ๋์๋ค.
.
.
.
export const Item = (args) => <Icon {...args} />;
Item.argTypes = {
icon: {
options: iconNames, // ์์ด์ฝ ์ด๋ฆ ์ต์
์ค์
control: { type: 'select' }, // ์ปจํธ๋กค ํ์
์ select๋ก ์ค์
},
์คํ ๋ฆฌ ํ์ผ ๊ฐ์ ๊ฒฝ์ฐ ๊ธฐ์กด ๋ ํผ๋ฐ์ค ์ฝ๋๋ฅผ ๊ฑฐ์ ๋ณต์ฌ/๋ถ์ด๊ธฐ ํ ์์ค์ด๋ผ...
๋์ iconNamse
๋ฆฌ์คํธ๋ ์ด๋ฐ์์ผ๋ก options: iconNames
์ผ๋ก ์ง์ ํด ์ฃผ๊ณ ํ์
์ select๋ก ํด์ฃผ๋ฉด ๋๋๊ฑฐ ๊ฐ๋ค.
storybook์ ๋ํด ์์ง ๋ฏธ์ํด ๊ตฌ๊ธ๋ง์ ํด๋ ์๊ฐ ๋ณด๋ค ์ ๋์ค์ง ์์๋ค.
๊ทธ๋์ ์ด๋ฐ์ ์ธํ
ํ๋๋ฐ๋ง 2์๊ฐ? ์ ๋ ๊ฑธ๋ ธ๋ค.
๋ํ ๋ด๊ฐ ํ๊ณ ์๋ ์์๊ฐ ๋ง๋์ง, ์ด๋ฐ์์ผ๋ก ํ๋๊ฒ ๋ง๋์ง? ์ด๋ฐ๊ฑธ ์ ์ ์์ด
๊ณ ๋ฏผํ๋๋ฐ ์๊ฐ ๋ญ๋น๋ฅผ ํ๊ธฐ๋ ํ๋ค.
๋คํํ ์ดํ ๋์ ์งํํ๋ค๊ณ ํ๋ค.
์คํ ๋ฆฌ๋ถ์ ๋ง๋ค์ด์ง ์ปคํฌ๋ํธ๋ก ์๋กํ๋ก์ ํธ์ ์ ์ฉํด ๋ณด๋ผ๊ณ ํ์ง๋ง...
๊ทธ๊ฑด ๋ ์ด๋ป๊ฒ ํ๋๊ฑฐ์ง...? ์์ง ๊ฐ ๊ธธ์ด ๋ฉ๋ค...