Atomic Design Storybook - boostcamp-2020/Project12-B-Slack-Web GitHub Wiki
Atomic Designμ λμ νκ² λ μ΄μ
μ¬λμ ꡬννλ©΄μ νλ‘ν μ΄λ―Έμ§λ λ©μμ§, μ λ ₯μ°½ λ± μΌκ΄λ λμμΈμ μ»΄ν¬λνΈλ€μ΄ λ§λ€κ³ μκ°νμ΅λλ€. λν μ¬μ¬μ© κ°λ₯ν μ»΄ν¬λνΈλ₯Ό λ§λ€λ©΄ λΆνμν μ½λ μ€λ³΅μ μ€μ΄κ³ , κ°λ° μμ°μ±μ λμΌ μ μλ€κ³ νλ¨νκΈ° λλ¬Έμ Atomic Designμ λμ νκΈ°λ‘ νμ΅λλ€.
Atomic Designμ΄λ?
Atomic Designμ΄λ μμκ° κ²°ν©ν΄μ λΆμκ° λλ κ²μ²λΌ λ¨κ³λ₯Ό λλ μμ μ»΄ν¬λνΈλ₯Ό λ§λ€κ³ , κ·Έκ²λ€μ κ²°ν©ν΄ μ‘°κΈ λ ν° λ¨μμ λ·°λ₯Ό λ§λλ λ°©λ²λ‘ μ΄λ©°, 5κ°μ ꡬλΆλ λ¨κ³κ° μμ΅λλ€.
μΆμ²: https://brunch.co.kr/@ultra0034/63
| Atoms(μμ)
μμλ λ¬Όμ§μ κΈ°λ³Έ κ΅¬μ± μμλ‘, label, input, buttonκ³Ό κ°μ HTML tagμ λλ€.
| Molecules(λΆμ)
λΆμλ μμλ€μ΄ ν¨κ» κ²°ν©ν κ²μ΄λ©°, νν©λ¬Όμ κ°μ₯ μμ κΈ°λ³Έλ¨μμ λλ€. λΆμλ€μ κ·Έ μ체μ νΉμ±μ΄ μμ΅λλ€.
| Organisms(μ 기체)
μ 기체λ λΉκ΅μ 볡μ‘νλ©° μΈν°νμ΄μ€μμ ꡬλΆλ μμμ νμ±νλ μλ‘ κ²°ν©λμ΄ μλ λΆμ κ·Έλ£Ήμ λλ€.
| Templates
ν νλ¦Ώμ μ£Όλ‘ νμ΄μ§λ₯Ό ꡬμ±νκΈ° μν΄ μλ‘ λ¬ΆμΈ μ 기체 κ·Έλ£ΉμΌλ‘ ꡬμ±λλ©°, λμμΈ νμΈ λ° λ μ΄μμ λμμ λ³Ό μ μμ΅λλ€.
| Pages
νμ΄μ§λ ν νλ¦Ώμ νΉμ μΈμ€ν΄μ€λ‘, μ¬μ©μκ° λ³΄λ λμμΈμ μ ννκ³ κ΅¬μ²΄μ μΌλ‘ ꡬνν©λλ€.
Storybook
Atomic Design / Storybook λμ κ³Όμ
| FE λλ ν°λ¦¬ ꡬ쑰
리μ‘νΈλ₯Ό μ¬μ©ν΄μ λ¨μΌ νμ΄μ§ μ ν리μΌμ΄μ
(SPA)μ ꡬννλλ°, Atomic Designμ μ μ©ν΄ κ³μΈ΅ ꡬ쑰λ₯Ό κΈ°λ°μΌλ‘ μ»΄ν¬λνΈλ₯Ό μμ±νκΈ° μν΄μ atoms
- molecules
- organisms
- templates
- pages
λ‘ FE λλ ν°λ¦¬ ꡬ쑰λ₯Ό μ‘μμ΅λλ€.
client
βββ env
βββ public
β βββ imgs
βββ src
βββ common
β βββ constants
β βββ socket
β β βββ emits
β β βββ types
β βββ store
β β βββ actions
β β βββ reducers
β β βββ sagas
β β βββ types
β βββ theme
β βββ utils
βββ components
β βββ atoms
β βββ molecules
β βββ organisms
β βββ templates
βββ pages
βββ shared
| Atomic Designμ κ° λ¨κ³λ₯Ό λλλ κΈ°μ€μ λν κ³ λ―Ό
μ²μμλ Atomic Designμ λμ νμ λ μ΄λ€ κΈ°μ€μ κ°μ§κ³ κ° λ¨κ³λ₯Ό λλ μ ꡬνν΄μΌ ν μ§ κ³ λ―Όνμμ΅λλ€.
νμ΄μ§λ³λ‘ νμν μ»΄ν¬λνΈλ€μ λλλ κ² μ’κ² λ€κ³ νλ¨μ ν΄μ μ±ν λ°© νμ΄μ§, μ±λ 리μ€νΈ νμ΄μ§ λ± νλ©΄ λ¨μλ‘ μꡬμ¬νμ λ¨Όμ λλκ³ , κ·Έ μμμ μ±λ κ²μμ°½κ³Ό μ±λ 리μ€νΈ λ± λ³΄μ΄λ νΌμ§λ§ν λ¨μλ‘ Organismsλ₯Ό μ νμ΅λλ€.
μ ν΄μ§ Organismsλ₯Ό ꡬμ±νκ³ μλ μ»΄ν¬λνΈλ€μ μκ² λλ μ Atomsλ€μ λ¨Όμ ꡬννκ³ , Atomsλ€μ΄ λͺ¨μ¬μ Moleculesκ° λκ³ , Moleculesκ° λͺ¨μ¬μ Organismsκ° λλλ‘ κΈ°μ€μ μ‘μμ΅λλ€.
| ex) ActiveProfileImg μ»΄ν¬λνΈκ° λ§λ€μ΄μ§λ κ³Όμ
ActiveProfileImg μ»΄ν¬λνΈλ Side Barμ DM λͺ©λ‘κ³Ό νλ©΄ μ°μΈ‘ μλ¨ λ‘κ·ΈμΈλ μ¬μ©μμ μνλ₯Ό λνλ΄λ λΆλΆμ μ¬μ©λλ μ»΄ν¬λνΈμ
λλ€.
λ¨Όμ `atoms`μ κ°μ₯ κ°λ¨ν ActiveLight μ»΄ν¬λνΈμ ProfileImg μ»΄ν¬λνΈ κ΅¬ννμ΅λλ€.
/* client\src\components\atoms\ProfileImg\ProfileImg.tsx */
import React from 'react';
import styled from 'styled-components';
import Logo from '@imgs/logo.png';
import { color } from '@theme/index';
interface ProfileImgProps {
size?: 'small' | 'medium' | 'large';
isHover?: boolean;
src?: string;
}
// μλ΅
const ProfileImg: React.FC<ProfileImgProps> = ({ size = 'medium', isHover = false, src = Logo, ...props }) => {
return (
<ProfileImgContainter size={size} isHover={isHover} {...props}>
<Img size={size} isHover={isHover} src={src}></Img>
</ProfileImgContainter>
);
};
export { ProfileImg, ProfileImgProps };
ꡬνν μ»΄ν¬λνΈμ λμμΈμ Storybookμ ν΅ν΄ μ½κ² νμΈνκΈ° μν΄ ActiveLight.storiesμ ProfileImg.stories μμ±νμΌλ©°, μ΄λ₯Ό ν΅ν΄ κ° μ»΄ν¬λνΈμ λμμΈμ μμ νλ©΄μ ν¨μ¨μ μΌλ‘ κ°λ°μ νμ΅λλ€.
/* client\src\components\atoms\ProfileImg\ProfileImg.stories.tsx */
import React from 'react';
import { Story, Meta } from '@storybook/react/types-6-0';
import { ProfileImg, ProfileImgProps } from './ProfileImg';
export default {
title: 'atom/ProfileImg',
component: ProfileImg
} as Meta;
const Template: Story<ProfileImgProps> = (args) => <ProfileImg {...args} />;
export const LargeProfileImg = Template.bind({});
LargeProfileImg.args = {
size: 'large'
};
export const MediumProfileImg = Template.bind({});
MediumProfileImg.args = {
size: 'medium'
};
export const SmallProfileImg = Template.bind({});
SmallProfileImg.args = {
size: 'small'
};
ꡬνλ ActiveLight μ»΄ν¬λνΈμ ProfileImg μ»΄ν¬λνΈλ₯Ό νμ©ν΄μ molecules
μ ActiveProfileImg μ»΄ν¬λνΈλ₯Ό ꡬννμ΅λλ€. λ§μ°¬κ°μ§λ‘ ActiveProfileImg.storiesμ μμ±ν΄ Storybookμ ν΅ν΄ λμμΈ μμ λ° ν
μ€νΈλ₯Ό μ§ννμ΅λλ€.
λλ μ
μ²μμλ Atomic Designμ κ° λ¨κ³λ₯Ό μ΄λ€ κΈ°μ€μΌλ‘ λλ μΌ ν μ§ κ³ λ―Όμ΄ λ§μλλ°, μ§μ κ°μ₯ μμ μ»΄ν¬λνΈλΆν° μ μνκ³ , μ μλ μ»΄ν¬λνΈλ€μ ν©μ³μ λ ν° λ·°λ₯Ό ꡬμ±νλ κ³Όμ μμ λΈλ‘μ 쑰립ν΄λκ°λ― ν©μ³κ°λ κ³Όμ μ΄ μ¬λ―Έμκ² λκ»΄μ‘μ΅λλ€.
λν, λͺ¨λ¬μ°½μ΄λ λ²νΌκ³Ό κ°μ΄ 곡ν΅μΌλ‘ μ¬μ©λλ μ»΄ν¬λνΈλ€μ λ§λ€μ΄ μ¬μ¬μ©ν¨μΌλ‘μ¨ μ½λ μ€λ³΅μ μ€μ΄κ³ μμ°μ±μ λμΌ μ μμμΌλ©°, Storybook λν Atomsλ Molecules κ°μ μμ λ¨μμ μ»΄ν¬λνΈλ€μ μ μν λ λ§μ λμμ΄ λμμ΅λλ€.
λ§μΉλ©°
Atomic Designμ λμ νλ©΄μ νλ©΄ μ 체μμλΆν° μλλ‘ λ΄λ €κ°λ©° λμμΈμ μ€κ³νλ κΈ°μ‘΄ λ°©μκ³Όλ λ€λ₯΄κ² μμ μ»΄ν¬λνΈλΆν° μ μν¨μΌλ‘μ¨ ν¨μ¬ 체κ³μ μΌλ‘ νμ΄μ§λ₯Ό ꡬνν μ μμμ΅λλ€. λν Reactκ° μ»΄ν¬λνΈλ₯Ό κΈ°λ°μΌλ‘ νλ€ λ³΄λ Atomic Designκ³Ό μ μ΄μΈλ¦°λ€κ³ μκ°νμ΅λλ€.
ννΈμΌλ‘ Atomic Designμ κ° λ¨κ³λ₯Ό μ΄λ€ κΈ°μ€μΌλ‘ λλ μΌ ν μ§ κ³ λ―Όνλ©΄μ κΌ 5λ¨κ³κ° μλλλΌλ νλ‘μ νΈμ κ·λͺ¨λ νμμ λ°λΌμ λ¨κ³λ₯Ό μ€μ¬μ μ¬μ©ν΄λ³Ό μ μμ κ² κ°λ€λ μκ°μ΄ λ€μμ΅λλ€. μ€μ λ‘ κΈ°μ μμλ Atomic Designμ λΆλΆμ μΌλ‘ λμ ν΄ νλ‘μ νΈμ λ§κ² μ λ΅μ μΌλ‘ λ¨κ³λ₯Ό λλλ κ²½μ°κ° μλ€κ³ λ€μμ΅λλ€.
Atomic Designμ μ₯μ μ μ΅λνμΌλ‘ κ°μ Έκ°κΈ° μν΄ μ΄λ»κ² νλ©΄ μ¬μ¬μ© κ°λ₯ν μ»΄ν¬λνΈλ₯Ό λ§λ€ μ μμμ§, λ¨κ³λ μ΄λ»κ² λλ μΌ ν μ§ κ³ λ―Όν μ μμλ μ’μ μκ°μ΄μμΌλ©°, μμΌλ‘ Atomic Designμ μ μ©ν΄μΌ ν μΌμ΄ μλ€λ©΄ μ΄λ² νλ‘μ νΈλ₯Ό νλ©΄μ λκΌλ κ³ λ―Όμ΄ λ§μ λμμ΄ λλ¦¬λΌ μκ°λ©λλ€.