[Feat] 디자인 시스템 초안 작성 #24

Kimsj912 · 2022-12-05T15:32:58Z

close #14

💡 개요

📝 작업 내용

theme파일(color, fontWeight, fontSize 등을 관리) 생성
Example 컴포넌트( 스타일 파일, 컴포넌트 파일, index파일, 스토리북파일) 세트 생성

‼️ 주의 사항

Example 컴포넌트는 예시용이기 때문에 추후에 삭제가 필요합니다.
GlobalStyle로 관리하기보다는 reset.css가 더 간결하고 깔끔하게 관리될 것 같아 reset.css로 관리하게 변경하였습니다. 의견있으시면 언제든지 코멘트 남겨주세요

🔗 참고자료

hwookim

고생하셨습니다! 😄
몇가지 코멘트 남겨뒀으니 확인 부탁드려요~~

.eslintrc.js

src/styles/theme.ts

hwookim

머지하기 전에 Exmple 컴포넌트가 _app.page.tsx에만 안남도록 해주시면 감사하겠습니다!

Kimsj912 · 2022-12-07T14:27:02Z

넵 제거해서 올려뒀습니다!! 확인해주시고 approve 눌러주세용!

KIMSEUNGGYU

수고하셨습니다~~

src/components/Example/Example.style.tsx

src/components/Example/Example.tsx

Kimsj912 · 2022-12-25T16:04:19Z

2022-12-26 기준으로 피그마에 올라와 있는 디자인 특징들 다시 추가해서 올렸습니다 👍

hwookim

크리스마스였는데도,,, 고생하셨습니다 수정님! 😭
몇가지 리뷰 남겼으니 확인 부탁드립니다!

src/styles/reset.css

src/styles/theme.ts

hwookim · 2022-12-26T00:56:10Z

src/styles/theme.ts

+    sm: '10px', // card item
+    md: '20px', // card
+    lg: '16px', // hashtag


md보다 lg가 더 작네요?? 👀

Select button의 경우에는 8px이기도 하고, Toggle button은 100px이고...
이 경우에는 관리하기 보다는 각각 파일에서 지정해주는 게 더 효율적일 것 같다는 생각이 듭니다!

스토리북에 Color 하고 fontSize 별 typography 스토리북도 있으면 좋을거 같아요! (너무 바쁘시면 추후에 도입해도 괜찮을거 같긴합니다, 제가 해도 괜찮구요!)

[참고]

https://storybook.js.org/docs/react/writing-docs/doc-block-colorpalette

hwookim · 2022-12-26T00:59:39Z

src/components/Example/Example.tsx

+    <div>
+      <StyledButton>{title}</StyledButton>
+    </div>


어차피 예시긴 하지만,,
div로 감쌀 의미가 있을까요? 🤔

ㅋㅋㅋㅋ 그러네요! <></>로 수정하겠습니다

아예 아무것도 감싸지 않는 편이 좋을 것 같습니다!

KIMSEUNGGYU

고생하셨습니다~ 👍👏
저도 몇가지 리뷰 남겼습니다.
홧팅!

KIMSEUNGGYU · 2022-12-26T04:39:08Z

src/components/Example/Example.style.tsx

@@ -0,0 +1,25 @@
+import styled from '@emotion/styled';
+
+import theme from '../../styles/theme';


theme 를 제대로 적용했으면 props 로 theme 를 가져와야 하는데 지금은 theme 를 import 하는 구조인 거 같아요!
한번 확인해주세요!!

themeProvider 로 감싸서 처리하는거 같아요

https://emotion.sh/docs/theming

아직까진 동적 테마를 사용하지 않기 때문에 상관은 없긴 할텐데,
만약 다크모드같은게 별도로 개발된다면 필요할지도 모르겠습니다.
다만 우리 사이트는 기본적으로 어두운 색 베이스고 디자이너도 고려하지 않기 때문에 필수적으로 적용할 필요는 없어보이긴 하네요 👀

stackoverflow에도 비슷한 논의가 하나 있네요.

말씀하신 방법은 props로 접근해야하기 때문에 조금 더 길어진다는 단점이 생기긴 합니다.
저는 import 방식도 충분히 괜찮다고 생각해요!

저도 themeProvider가 나쁘진 않지만 import방식이 현재에는 좀 더 편리한것 같아요

src/components/Example/Example.tsx

KIMSEUNGGYU · 2022-12-26T04:42:19Z

src/styles/theme.ts

+    sm: '10px', // card item
+    md: '20px', // card
+    lg: '16px', // hashtag


스토리북에 Color 하고 fontSize 별 typography 스토리북도 있으면 좋을거 같아요! (너무 바쁘시면 추후에 도입해도 괜찮을거 같긴합니다, 제가 해도 괜찮구요!)

[참고]

https://storybook.js.org/docs/react/writing-docs/doc-block-colorpalette

…m-2-FE into feat/014-design-system-draft

Kimsj912 · 2023-01-01T06:41:01Z

머지까지 완료했습니다! 다들 한번씩 확인해주세요 @KIMSEUNGGYU @hwookim

hwookim

크리스마스에 새해까지 고생하십니다 수정님!

.storybook/preview.js

src/pages/_app.page.tsx

hwookim · 2023-01-01T07:34:55Z

src/pages/_app.page.tsx

+import '../styles/common.css';
+import '../styles/reset.css';


Suggested change

import '../styles/common.css';

import '../styles/reset.css';

import '../styles/reset.css';

import '../styles/common.css';

reset보다는 common이 우선적으로 적용되어야하니 순서를 바꿔야할 것 같습니다!

src/components/Example/Example.style.tsx

src/styles/theme.ts

hwookim · 2023-01-01T09:23:45Z

src/pages/_app.tsx

+import '@/styles/common.css';
+import '@/styles/reset.css';


import 문 관련 prettier 때문에 무조건 common이 앞에 오게 되는군요... 😢
일단 현재는 이렇게 작업하고 추후 import관련 prettier를 제거하거나 해야겠네요....
@KIMSEUNGGYU 혹시 방법 아실까요?

관련 PR이 fork된 레포에는 한 번 머지된 적이 있었네요.

.prettierrc.js의 importOrder부분을 수정하면 대응할 수 있어보입니다.

importOrder: ['^@mocks/(.*)$', '@src/styles/reset.css', '@src/styles/common.css', '^@src/(.*)$', '^[./]'],

다만 이렇게하면 한 줄 공백이 생기긴 하네요... 🤔

맞아요ㅠㅠ import 순서 규칙을 통해 해결할 수 있지만, 그러면 공백이 생겨서.. importOrder prettier 를 제거하는것도 괜찮을수도 있겠네요 ㅎㅎ

KIMSEUNGGYU

연말 및 새해 동안 고생하셨습니다!!! 👍

KIMSEUNGGYU · 2023-01-01T10:33:02Z

src/pages/_app.tsx

+import '@/styles/common.css';
+import '@/styles/reset.css';


맞아요ㅠㅠ import 순서 규칙을 통해 해결할 수 있지만, 그러면 공백이 생겨서.. importOrder prettier 를 제거하는것도 괜찮을수도 있겠네요 ㅎㅎ

KIMSEUNGGYU · 2023-01-01T10:33:50Z

src/styles/theme.ts

@@ -0,0 +1,57 @@
+const theme = {


와우!! 너무 좋아졌네요!! 굿굿굿!! 👍👍

Kimsj912 · 2023-01-01T11:25:37Z

지금까지 피드백 반영하여 커밋 올렸습니다!! @KIMSEUNGGYU @hwookim

hwookim

마지막으로 하나만 확인해주시면 감사하겠습니다.
고생 많으셨습니다 수정님! 😢

hwookim · 2023-01-01T14:18:42Z

src/pages/_app.page.tsx

+import 'src/styles/common.css';
+import 'src/styles/reset.css';


여전히 common보단 reset이 우선순위로 되겠네요.
이전 리뷰 확인해서 적용해주시고 그 뒤에 머지해주세요.

Kimsj912 added 7 commits December 4, 2022 05:04

[chore] 윈도우에서 cr prettier와 eslint 충돌 오류 해결

0867c90

fix: fix window eslint error

d62b620

feat: Add GlobalStyle

6e56aad

feat: Add global theme

8a54370

feat: Add theme

5ac80e4

feat: Add Example Component

cd77a79

feat: Remove GlobalStyle

69f1851

Kimsj912 added the ✨ feature 기능 개발 label Dec 5, 2022

Kimsj912 self-assigned this Dec 5, 2022

Kimsj912 requested review from KIMSEUNGGYU and hwookim as code owners December 5, 2022 15:32

hwookim requested changes Dec 6, 2022

View reviewed changes

.eslintrc.js Outdated Show resolved Hide resolved

src/styles/theme.ts Outdated Show resolved Hide resolved

src/styles/theme.ts Outdated Show resolved Hide resolved

Kimsj912 changed the title ~~Feat/014 design system draft~~ [Feat] 디자인 시스템 초안 작성 Dec 6, 2022

Kimsj912 added 3 commits December 6, 2022 19:02

fix: Image src missing 오류 해결

eb91bd5

refactor: eslint ban-ts-comment 제거

349542c

refactor: change theme fontsize small name into sm

c6022b7

hwookim approved these changes Dec 7, 2022

View reviewed changes

refactor: Remove Example from _app.page.tsx

b7595e0

KIMSEUNGGYU reviewed Dec 7, 2022

View reviewed changes

src/components/Example/Example.style.tsx Show resolved Hide resolved

src/components/Example/Example.tsx Outdated Show resolved Hide resolved

KIMSEUNGGYU approved these changes Dec 7, 2022

View reviewed changes

Kimsj912 added 3 commits December 25, 2022 22:45

props 제거

5db0a66

Example Style Update

e03dab3

design system upgrade

8af1870

Kimsj912 requested review from KIMSEUNGGYU and hwookim December 25, 2022 16:05

hwookim requested changes Dec 26, 2022

View reviewed changes

KIMSEUNGGYU reviewed Dec 26, 2022

View reviewed changes

common.css로 파일 분리

68113ed

Kimsj912 added 4 commits January 1, 2023 15:12

theme 변경

315e093

div 대신 <> 를 사용하도록 수정

eb988a4

inerface 명 ~~Props 방식으로 사용하도록 변경

30fcdf1

Merge branch 'develop' of https://github.com/YAPP-Github/21st-Web-Tea…

b0b9ff0

…m-2-FE into feat/014-design-system-draft

Kimsj912 added 2 commits January 1, 2023 15:49

package-lock.json 머지 오류 해결

485d6ff

Example.tsx 괄호 정리

3b16da8

hwookim requested changes Jan 1, 2023

View reviewed changes

Kimsj912 added 2 commits January 1, 2023 17:37

border-radius 제거

b3cb6aa

app_page.tsx 제거 및 style import 피드백 반영

928bb4a

hwookim reviewed Jan 1, 2023

View reviewed changes

KIMSEUNGGYU approved these changes Jan 1, 2023

View reviewed changes

Kimsj912 added 2 commits January 1, 2023 20:24

절대 경로로 이동후 app.page.tsx로 이동

11bc8a1

Merge

b0cd9cc

hwookim approved these changes Jan 1, 2023

View reviewed changes

reset이 common보다 먼저오도록 수정

b501ae9

Kimsj912 merged commit 780928c into develop Jan 1, 2023

Kimsj912 deleted the feat/014-design-system-draft branch January 1, 2023 14:25

hwookim restored the feat/014-design-system-draft branch January 2, 2023 12:15

hwookim mentioned this pull request Jan 2, 2023

[feat] 디자인 시스템 구현 #27

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Feat] 디자인 시스템 초안 작성 #24

[Feat] 디자인 시스템 초안 작성 #24

Kimsj912 commented Dec 5, 2022 •

edited by hwookim

hwookim left a comment

hwookim left a comment

Kimsj912 commented Dec 7, 2022

KIMSEUNGGYU left a comment

Kimsj912 commented Dec 25, 2022 •

edited

hwookim left a comment

hwookim Dec 26, 2022

KIMSEUNGGYU Dec 26, 2022

hwookim Dec 26, 2022

Kimsj912 Jan 1, 2023

hwookim Jan 1, 2023

KIMSEUNGGYU left a comment

KIMSEUNGGYU Dec 26, 2022

hwookim Dec 26, 2022

Kimsj912 Jan 1, 2023

KIMSEUNGGYU Dec 26, 2022

Kimsj912 commented Jan 1, 2023

hwookim left a comment

hwookim Jan 1, 2023

hwookim Jan 1, 2023

hwookim Jan 1, 2023 •

edited

KIMSEUNGGYU Jan 1, 2023

KIMSEUNGGYU left a comment

KIMSEUNGGYU Jan 1, 2023

KIMSEUNGGYU Jan 1, 2023

Kimsj912 commented Jan 1, 2023

hwookim left a comment

hwookim Jan 1, 2023

		@@ -0,0 +1,25 @@
		import styled from '@emotion/styled';

		import theme from '../../styles/theme';

		import 'src/styles/common.css';
		import 'src/styles/reset.css';

[Feat] 디자인 시스템 초안 작성 #24

[Feat] 디자인 시스템 초안 작성 #24

Conversation

Kimsj912 commented Dec 5, 2022 • edited by hwookim

💡 개요

📝 작업 내용

‼️ 주의 사항

🔗 참고자료

hwookim left a comment

Choose a reason for hiding this comment

hwookim left a comment

Choose a reason for hiding this comment

Kimsj912 commented Dec 7, 2022

KIMSEUNGGYU left a comment

Choose a reason for hiding this comment

Kimsj912 commented Dec 25, 2022 • edited

hwookim left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

KIMSEUNGGYU left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Kimsj912 commented Jan 1, 2023

hwookim left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hwookim Jan 1, 2023 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

KIMSEUNGGYU left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Kimsj912 commented Jan 1, 2023

hwookim left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Kimsj912 commented Dec 5, 2022 •

edited by hwookim

Kimsj912 commented Dec 25, 2022 •

edited

hwookim Jan 1, 2023 •

edited