Line Entry 서비스에 React Styled-Component를 이용하여 Atomic Design 방법론을 적용한 사례를 발표합니다.

1. Line Entry의
Atomic Design 적용기
& ,

2. 목 차
Atomic Design 을 도입한 이유
Atomic Design 의 5단계
Atomic Design 적용하기
Atomic Design 의 효율을 높이기 위한 방법
작업 후기

3. Atomic Design을 도입한 이유

4. 기존의 마크업 방식
AtomicDesign을 도입한 이유
컴포넌트 단위의 마크업

5. AtomicDesign을 도입한 이유
기준

6. ㅁㅁㅁㅁ
) ,( .
Atomic Design
AtomicDesign을 도입한 이유

7. Atomic Design의 5단계

8. ATOMS
label
input[type=“text”]
button
AtomicDesign의 5단계

9. MOLECULES
AtomicDesign의 5단계

10. ORGANISM
AtomicDesign의 5단계

11. TEMPLATES
AtomicDesign의 5단계

12. PAGES
AtomicDesign의 5단계

13. Atomic Design적용하기

14. ATOMS MODULES TEMPLATES
AtomicDesign적용하기

15. ATOMS
AtomicDesign적용하기

16. web
components
atom1
index.js
index.stories.js
…
module1
index.js
…
index.stories.js
atoms
modules
templates
AtomicDesign적용하기

17. Atomic Design

18. . -
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
const Button = styled.button`
width: 160px;
height: 60px;
background-color: ${(props) => props.theme.$default_green};
border-radius: 8px;
border: 1px solid ${(props) => props.theme.$default_green};
font-size: 20px;
font-weight: bold;
color: ${(props) => props.theme.$default_green};
line-height: 56px;
&:hover {
border-color: #03cf5d;
color: #fff;
}
`;
)
AtomicDesign 효율 높이기
1 Styled-Component(함수형 컴포넌트)

19. - . 1 2
$(props) => props.cancel && `
backgrkound-color: #666;
color: #666;
&:hover {
border-color: #666;
}
`;
const WrapButton = (props) => {
const { children } = props;
return (
<Button {...props}>{children}</Button>
);
};
export default WrapButton;
).
AtomicDesign 효율 높이기
<WrapButton>저장하기</WrapButton>
<WrapButton cancel>취소하기</WrapButton>
. - . ).
Styled-Component(함수형 컴포넌트)

20. 3
const Button = styled.button`
background-color: ${(props) => props.BgColor ? props.BgColor : '#333’};
...
`;
const FormBtnBox = (props) => {
const { BgColor, children } = props;
return (
<Button BgColor={BgColor}>{children}</Button>
);
};
export default FormBtnBox;
)-
AtomicDesign 효율 높이기
<FormBtnBox BgColor="#03cf5d">저장하기</FormBtnBox>
<FormBtnBox>취소하기</FormBtnBox>
-. - )-
1 Styled-Component(함수형 컴포넌트)

21. 4 -1
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import breakpoint from 'styled-components-breakpoint';
const ModalDsc = styled.p`
display: block;
text-align: center;
font-size: 24px;
color: ${(props) => props.theme.gray1};
line-height: 40px;
${breakpoint('tablet')`
font-size: 15px;
line-height: 26px;
`}
`;
)
AtomicDesign 효율 높이기
. Styled-Component(함수형 컴포넌트)

22. )1 G
const theme = {
breakpoints {
tablet: 768,
},
default_green: '#03cf5d',
default_gray: '#333',
...
};
...
export default theme;
1 ).)
AtomicDesign 효율 높이기
import React from 'react';
import { ThemeProvider, createGlobalStyle } from 'styled-components';
import theme from './theme';
const withGlobalStyles = (storyFn) => {
return (
<ThemeProvider theme={theme}>
<React.Fragment>
{storyFn()}
</React.Fragment>
</ThemeProvider>
);
};
export default withGlobalStyles;
1 1 )
Styled-Component(함수형 컴포넌트)

23. Styled-Component(함수형 컴포넌트)
1
import { configure, addDecorator } from '@storybook/react';
import withGlobalStyle from '../src/styles/WithGlobalStyle';
const req = require.context(
'../src/components',
true,
/.stories.(js|jsx)$/,
);
function loadStories() {
req.keys().forEach(filename => {
req(filename)
})
};
addDecorator(withGlobalStyle);
configure(loadStories, module);
1./ .. . )
AtomicDesign 효율 높이기

24. 2 ) I
AtomicDesign 효율 높이기
) Storybook의 사용

25. AtomicDesign 효율 높이기
storiesOf('Atoms/CommonModalTextareaBox', module)
.add('기본', () => <CommonModalTextareaBox />)
.add('포커스 상태', () => <CommonModalTextareaBox focus={true} />)
.add('에러 메시지', () => <CommonModalTextareaBox error={'한글자 이상 적어주세요.'} />)
...
);
12/ //- /.) 1
Storybook의 사용

26. ) Storybook의 사용
2 - .
AtomicDesign 효율 높이기
Official Addons Info Addon

27. - Storybook의 사용
)2 3 .
AtomicDesign 효율 높이기

29. I
I
.
<WrapperStyle>
<HeaderBoxWrapStyle>
<Header {...props} />
</HeaderBoxWrapStyle>
<ContainerBoxStyle>
<ContentBoxStyle>
<ContentInner />
</ContentBoxStyle>
</ContainerBoxStyle>
<FooterBoxWrapStyle>
<Footer />
</FooterBoxWrapStyle>
</WrapperStyle>
U J

30. const DownloadBtnStyle = styled.a`
display: block;
width: 130px;
height: 100px;
background-color: ${(props) => props.theme.default_green};
text-align: center;
color: #fff;
span {
font-size: 12px;
letter-spacing: -0.12;
line-height: 18px;
}
`;
L
c t . 6
l
l
a R , 6
S 6
E E . e 6

31. !