[ jin-Pro ] LoginPage / RegisterPage / Button.tsx / Input.tsx #28
Conversation
|
1번 질문에 대해서
|
저도 해당하는 방법을 찾아봤었는데 사진과 같이 간단한 코드에서는 오히려 알아보기도 쉽고 좋은데 여러줄이 되거나 하면 어떤 구조로 되어있는 지 알기 어려워 보여서 저는 변수를 통해 설정해주는 것이 좋다고 생각했습니다. |
|
1번 질문에 대하여 BEM구조에 대해 찾아보았는데 저희가 사용하는 아토믹 디자인과 같이 사용하면 좋을 것 같다는 생각이 들었습니다. 2번에 대한 질문이 정확하게 이해가 되지 않습니다. |
=> 이렇게 짧다면 코드는 짧아지겠지만 가독성이 좋은지는 잘 모르겠습니당 |
|
|
1번 질문에 대해서 저도 2줄 이상의 css 코드는 변수로 행해주는 것이 좋다고 생각합니다. |
|
|
||
| function App() { | ||
| return ( | ||
| <> | ||
| <Global styles={reset} /> | ||
| <LogInPage /> | ||
| <Switch> |
There was a problem hiding this comment.
Global 안에 각 페이지가 있는게 더 자연스럽지 않나요?
상관없는 건가요>
|
|
||
| {!code && ( | ||
| <div css={SocialLoginButtonContainerStyle}> | ||
| <Button type="Long" color="#000000"> |
There was a problem hiding this comment.
이 부분 다른 파일 (Molecules) 또는 Organism으로 분리하는게 좋을 거 같음
|
|
||
| <div css={ButtonContainerStyle}> | ||
| <Link to="/register"> | ||
| <Button type="Small">회원가입</Button> |
| <div css={IdContainerStyle}> | ||
| <Input placeholder="ID" autoComplete="off" /> | ||
| <Button type="Small"> 중복 체크 </Button> | ||
| </div> |
There was a problem hiding this comment.
[label - input] 부분이 많이 중복되는거 같은데 분리해서 재활용하는 것도 좋아보임
고민
1번
inline으로 css 를 넣어주기 위해
emotion/css 를 사용하여
를 많이 사용하였습니다.
그러다보니 코드가 너무 두꺼워지는 것 같아서 불편합니다.
혹시 Style을 따로 담아두는 파일을 생성하여 BEM 구조 처럼 변수명을 설정해서 관리해주는게 좋을까요??
2번
기본적으로 Atomic 디자인은
Atom >> Molecules >> Organism >> Template >> Page
로 구성이 되어있는데
RegisterPage와 LoginPage같은 경우
Atom 들로 나열되어있는데 이것들을 재사용성이 없어도 가독성을 위해서 Molecules >> Organism >> Template 단계를 거치는게 나을까요??
굳이 3 단계를 거치지 않더라도 하나의 단계를 추가해주어서 가독성을 위해 간결하게 정리하는게 나을까요??