[Feature/BAR-49] 디자인 시스템 반영 #13

miro-ring · 2023-12-23T16:13:09Z

Summary

구현 내용 및 작업한 내역을 요약해서 적어주세요

6298128 b8118a3 import 순서 정리를 위한 린트 반영
7a5bad4 font, color에 대한 디자인 시스템 반영
fc4c2fd 629c3f4 불필요하다고 느껴지는 부분들 반영

To Reviewers

import { style } from '@vanilla-extract/css';

import { sprinkles } from '@/src/styles/sprinkles.css';
import { theme } from '@/src/styles/theme.css';

export const a = sprinkles({
  fontSize: '40/Title/Bold',
  color: 'Blue/Dark',
});

export const b = style([
  sprinkles({
    fontSize: '40/Title/Bold',
  }),
  {
    color: theme.colors.Yellow,
  },
]);

사용 예제 입니다. color의 경우 color, backgroundColor 이외에서도 사용될 수 있을 것으로 예상되어 전역 var로도 설정하였습니다.

fc4c2fd 629c3f4
해당 두 커밋에 대해서는 논의가 필요한데요!
일단 개인적인 생각을 반영해서 PR 작성해보았습니다.

cursor pointer와 같이 단순한 유틸 CSS 함수는 사용되지 않을 것 같아 제거했습니다.
지난번 논의에서처럼 Grid와 Flex의 style과 관련된 요소는 반드시 className을 통해 넘어오도록 변경하였습니다. (Flex에 대한 스토리는 확인을 위해 재작성해두었습니다.)
grid와 flex를 위한 CSS 내용들이 굳이 sprinkles에 포함되지 않아도 된다고 생각해서 제거하였습니다.
width, height 등에 쓰일 px 값들은 예측할 수 없는 요소라 판단되어 sprinkles에서 제거하였습니다.

요 4가지 지점에 대해 의논해보면 좋을 것 같습니다 ㅎㅎ

How To Test

Flex에 대한 스토리북 확인이 필요합니다.
디자인 시스템에 대한 내용이 잘 반영되었는지 확인이 필요합니다.

github-actions · 2023-12-23T16:14:11Z

🚀 storybook: https://65808d663dd3d83a46e24b57-ovblyccwjm.chromatic.com/

dmswl98

수고하셨습니다~!
추가로 common 폴더를 foundation으로 변경해주실 수 있나요?

dmswl98 · 2023-12-24T10:21:32Z

src/components/common/Flex/Flex.stories.tsx

-    <Flex
-      align="center"
-      justify="center"
-      gap="10px"
-      marginX="50px"
-      paddingX="10px"
-      paddingY="10px"
-    >


이렇게 작성했던 이유는

불필요하게 css.ts 파일 내에서 단순하게 반복적으로 작성해야하는 flex, grid에 대한 스타일 정의를 줄일 수 있다는 것
-> 이전에는 styles/utils.ts에 정의된 스타일 믹신들을 사용해 중복을 줄였다면 이런 방식으로도 사용되더라고요.

이렇게 작성하면 스타일 프로퍼티와 스타일 프로퍼티의 값이 모두 타입 추론이 되므로 vanilla-extract를 잘 활용하는 방법 중 하나이기 때문이었어요. (현업에서 vanilla-extract를 이렇게 사용하신다고 들었어요!)

className으로 스타일 속성을 받는다고 하면 SCSS와 별다를게 없어 보이네요.
그래서 이대로 사용하는 것은 어떤가요?

이러한 코드 스타일은 여기에서도 확인하실 수 있어요!

@dmswl98
flex와 grid를 위한 sprinkle이 필요하다면 이를 되살리는 부분에 대해서는 찬성입니다!
다만 width, padding들을 위해 모든 px 값을 토큰으로 관리하는 것은 피하는게 좋지 않을까 하는 생각입니다.

또한 이 형태로 사용했을 때 스타일 정의가 줄어들 지에 대해 생각해보았을 때 크게 줄어드는 부분은 없지 않을까 생각했습니다.
스타일 정의를 줄이기 위해 return문 내부에 CSS 코드를 작성해야한다면, 이에 대해서는 개인적으로 반대 의견을 가지고 있습니다.

dmswl98 · 2023-12-24T10:27:20Z

src/components/common/Flex/style.css.ts

+export const flex = style({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  rowGap: '10px',
+  columnGap: '10px',
+  margin: '0 80px',
+  padding: '10px',
+});


Suggested change

export const flex = style({

display: 'flex',

alignItems: 'center',

justifyContent: 'center',

rowGap: '10px',

columnGap: '10px',

margin: '0 80px',

padding: '10px',

});

import * as utils from '@/src/styles/utils.css.ts';

export const flex = style(

[

utils.flexCenter

],

{

rowGap: '10px',

columnGap: '10px',

margin: '0 80px',

padding: '10px',

});

이렇게 미리 정의된 유틸을 사용하면 단순하게 반복되는 스타일 속성들을 줄일 수 있어요!

miro-ring · 2023-12-26T16:07:23Z

@wonjin-dev @dmswl98
95129e9
Grid, Flex 컴포넌트 제거하였습니다!

dmswl98

수고하셨습니다!

dmswl98 · 2023-12-26T17:17:03Z

src/styles/tokens.ts

 export const GRID_ITEMS_ALIGNMENT = ['stretch', 'start', 'center', 'end'];

 export const GRID_CELL = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];


이 부분도 제거 부탁드려요!

bdbf4dd
리뷰 감사합니다!! 요걸 남겨둿엇네요 ㅎㅎ.. 해당 커밋에서 제거했습니다.

dmswl98 · 2023-12-26T17:19:05Z

src/styles/tokens.ts

+    '"Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif',
+};
+
+export const FONT_SIZE = {


FONT_SIZE 대신 TYPOGRAPHY로 변경하는 건 어떨까요?

cfa98ae
해당 커밋에서 반영해보았습니다. 감사합니다 ㅎㅎ

miro-ring · 2023-12-27T14:00:41Z

@wonjin-dev
시간 괜찮으실 때 확인 한번 부탁드립니다! ㅎㅎ

wonjin-dev

👍🏼 고생하셨습니당 ~!

miro-ring added 6 commits December 24, 2023 00:47

feat: import 순서 정리

6298128

feat: grid, flex에서 style 관련된 요소는 모두 className을 통해 들어오도록 변경

629c3f4

feat: 파일명 변경

2746fd0

feat: 폰트와 color에 대한 디자인 시스템 반영

7a5bad4

feat: 불필요 부분 모두 제거

fc4c2fd

feat: lint 추가 반영

b8118a3

miro-ring self-assigned this Dec 23, 2023

miro-ring requested review from wonjin-dev and dmswl98 as code owners December 23, 2023 16:13

dmswl98 changed the title ~~[Feature/Bar-49] 디자인 시스템 반영~~ [Feature/BAR-49] 디자인 시스템 반영 Dec 24, 2023

dmswl98 reviewed Dec 24, 2023

View reviewed changes

feat: Grid, Flex 컴포넌트 제거

95129e9

dmswl98 approved these changes Dec 26, 2023

View reviewed changes

miro-ring added 3 commits December 27, 2023 22:50

refactor: 변수명 변경

cfa98ae

feat: 사용하지 않는 토큰 제거

bdbf4dd

feat: font, color 수정 부분 반영

d38f37e

wonjin-dev approved these changes Dec 27, 2023

View reviewed changes

miro-ring merged commit 8c6b82e into main Dec 27, 2023

miro-ring deleted the feature/BAR-49 branch December 27, 2023 18:59

dmswl98 added the feature label Jan 8, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Feature/BAR-49] 디자인 시스템 반영 #13

[Feature/BAR-49] 디자인 시스템 반영 #13

miro-ring commented Dec 23, 2023 •

edited by dmswl98

Loading

github-actions bot commented Dec 23, 2023

dmswl98 left a comment

dmswl98 Dec 24, 2023

miro-ring Dec 25, 2023

dmswl98 Dec 24, 2023

miro-ring commented Dec 26, 2023

dmswl98 left a comment

dmswl98 Dec 26, 2023

miro-ring Dec 27, 2023

dmswl98 Dec 26, 2023

miro-ring Dec 27, 2023

miro-ring commented Dec 27, 2023

wonjin-dev left a comment

		export const GRID_ITEMS_ALIGNMENT = ['stretch', 'start', 'center', 'end'];

		export const GRID_CELL = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];

[Feature/BAR-49] 디자인 시스템 반영 #13

[Feature/BAR-49] 디자인 시스템 반영 #13

Conversation

miro-ring commented Dec 23, 2023 • edited by dmswl98 Loading

Summary

To Reviewers

How To Test

github-actions bot commented Dec 23, 2023

dmswl98 left a comment

Choose a reason for hiding this comment

dmswl98 Dec 24, 2023

Choose a reason for hiding this comment

miro-ring Dec 25, 2023

Choose a reason for hiding this comment

dmswl98 Dec 24, 2023

Choose a reason for hiding this comment

miro-ring commented Dec 26, 2023

dmswl98 left a comment

Choose a reason for hiding this comment

dmswl98 Dec 26, 2023

Choose a reason for hiding this comment

miro-ring Dec 27, 2023

Choose a reason for hiding this comment

dmswl98 Dec 26, 2023

Choose a reason for hiding this comment

miro-ring Dec 27, 2023

Choose a reason for hiding this comment

miro-ring commented Dec 27, 2023

wonjin-dev left a comment

Choose a reason for hiding this comment

miro-ring commented Dec 23, 2023 •

edited by dmswl98

Loading