🔧 리나리아, 스토리북 설정 #18

leesangb · 2023-05-04T16:59:35Z

변경 내용

linaria 추가
스토리북 7로 업그레이드
디자인 토큰으로 최소한의 테마 구성

체크리스트

백엔드 선배포
Playwright 테스트 케이스 작성
Jest Hook 테스트 케이스 작성
Storybook 테스트 케이스 작성

📸 스크린샷

기타사항

🤚🏻 코드리뷰 하는 방법

🪧 [개발 공통 코드리뷰 가이드]

✎ Code Review Manner

지적이 아닌 질문하기
- 원작하신분이 몰라서 그렇게 한게 아니라 그랬을 수 밖에 없는 상황일 수 있습니다
- 위험하다고 판단시 request change
다른 방법에 대해 제안하기
- 이 때 본인이 생각한 것과 너무 다른 경우 request change
예시코드를 작성하여 댓글로 달기
리뷰 마무리
- 무플 방지! 고생한 사우에게 고생했다 한마디 남기는 게 좋습니다 (LGTM 강추)

✎ Pn Rule

Pn
- P1 : 꼭 반영해주세요 (Request changes)
- P2 : 적극적으로 고려해주세요 (Request changes)
- P3 : 웬만하면 반영해 주세요 (Comment)
- P4 : 반영해도 좋고 넘어가도 좋습니다 (Approve)
- P5 : 그냥 사소한 의견입니다 (Approve)
Pn Resolve
- P1, P2, P3는 리뷰어가 Resolve 합니다
- P4, P5는 리뷰어가 아니더라도 Resolve 할 수 있습니다
- Pn 표시가 없을 경우 P5로 봅니다

✎ PR Title Rule

PR에 배포일 표기가 필요한 경우
```
  # <gitmoji> PR 제목
```

✎ Comment Rule

Comment의 Resolve 처리
- 최초 Comment를 작성한 사람이 처리

✎ Merge Rule

PR 머지는 리뷰어가 해주도록 합니다.

leesangb · 2023-05-04T17:01:09Z

.storybook/main.ts

+import type { StorybookConfig } from "@storybook/nextjs";
+import MiniCssExtractPlugin, { Configuration } from "mini-css-extract-plugin";
+
+const withLinaria = (config: Configuration) => {


리나리아용 웹팩 설정하는 부분입니다
바벨로더와 리나리아 웹팩로더 모두 설정해줘야하고 css 로더도 설정해줘야 합니다

리나리아 스토리북 설정이 복잡하네여 고생하셨습니다 🙇‍♂️

leesangb · 2023-05-04T17:01:45Z

.storybook/preview.tsx

+    (Story) => {
+      const isDark = useDarkMode();
+
+      useEffect(() => {


스토리북에서 다크/라이트모드 변경하는 부분 입니다

스토리북 자체 색상이 변경되지 않는건 스토리북 7에 이슈가 있다고 하네요
참고: storybookjs/storybook#21798

ㅇㅎ.. 테마 변경 대응도 해주셔서 감사합니다.

leesangb · 2023-05-04T17:03:23Z

app/ThemeSwitcher.tsx

+"use client";
+
+// FIXME: temporary solution
+export const ThemeSwitcher = () => {


테마 토글 하는 임시용 컴포넌트 입니다. layout에 테스트 용도로 추가했습니다. 추후에 삭제 할 예정입니다.

src/components/button/Button.stories.tsx

leesangb · 2023-05-04T17:05:10Z

src/mds/style.linaria.global.ts

+import { commonThemeVar, darkThemeVar, lightThemeVar, theme } from "@/mds/theme";
+import { css } from "@linaria/core";
+
+export const globals = css`


linaria의 global css입니다.
next-with-linaria 패키지에서 네이밍 컨벤션이 있기 때문에 파일명을 이렇게 지었습니다

참고: https://github.com/dlehmhus/next-with-linaria#global-styles-restrictions

테마를 className으로 구분하는 군여 😅

leesangb · 2023-05-04T17:05:50Z

src/mds/theme.ts

+
+//region Types
+
+interface ModePalette {


디자인 시스템이 없어 임시로 만든 라이트/다크 모드 팔레트 타입입니다

leesangb · 2023-05-04T17:07:48Z

src/mds/theme.ts

+//region ThemeVar
+export const lightThemeVar = toCssVar({ palette: light });
+export const darkThemeVar = toCssVar({ palette: dark });
+export const commonThemeVar = toCssVar({ palette: common, font: { family: global.fontFamily.KR.value } });


해당 값들을 글로벌 css에 추가하면 이런식으로 나옵니다

leesangb · 2023-05-04T17:08:55Z

tsconfig.json

@@ -18,6 +18,7 @@
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
+    "baseUrl": ".",


baseUrl이 빠져있어서 @/xxx import할 때 문제가 됐었습니다.

leesangb · 2023-05-04T17:12:51Z

src/mds/theme.ts

+  }
+};
+
+export const theme: Theme = (<T extends object>({


styled로 컴포넌트 만들 때 쓸 테마 객체입니다

leesangb · 2023-05-04T17:35:04Z

src/mds/theme.ts

+  };
+}
+
+type ColorKey = "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900";


그레이 색상은 50, 75, 1000도 있습니다

Doodream

👍 고생하셨습니당

Doodream · 2023-05-07T10:20:56Z

.storybook/main.ts

+import type { StorybookConfig } from "@storybook/nextjs";
+import MiniCssExtractPlugin, { Configuration } from "mini-css-extract-plugin";
+
+const withLinaria = (config: Configuration) => {


리나리아 스토리북 설정이 복잡하네여 고생하셨습니다 🙇‍♂️

Doodream · 2023-05-07T10:21:47Z

.storybook/preview.tsx

+    (Story) => {
+      const isDark = useDarkMode();
+
+      useEffect(() => {


ㅇㅎ.. 테마 변경 대응도 해주셔서 감사합니다.

Doodream · 2023-05-07T10:23:28Z

src/mds/style.linaria.global.ts

+import { commonThemeVar, darkThemeVar, lightThemeVar, theme } from "@/mds/theme";
+import { css } from "@linaria/core";
+
+export const globals = css`


테마를 className으로 구분하는 군여 😅

Doodream · 2023-05-07T10:34:11Z

src/mds/theme.ts

+    });
+  };
+
+  flattenRec(obj, "");


prefix가 무조건 ""인데 flattenRec에 prefix 인수를 만든이유가 있을까요?

이전 저장소에 해당 코드에 대한 주석이 있는데, 객체를 펼치는 과정에서 초기에만 빈 문자열을 넣는 것 같아요!

이후에는 재귀로 돌면서 다중 객체의 key 값들을 넣는 듯 합니다.

넵넵 나무님이 말씀해주신대로 재귀로 채워지는 문자열입니다

Doodream · 2023-05-07T10:49:17Z

src/mds/theme.ts

+      )
+    }),
+    {}
+  ) as Colors


p5 음 .. global.json 파일을 객체로 변환해서 ts 파일로 만드는 스크립트를 돌리고
해당 객체를 기반으로 as const 해서 readable 타입을 만들어 써서 global 토큰 타입을 만드는 건 어떨까요?
그럼 저렇게 Colors 라고 부정확한 타입을 alias하지 않아도 될 것 같아요.

Colors 타입 자체가 global.color의 key값을 타입으로 읽어오는데 괜찮지 않을까요?

@Doodream 그러면 style dictionary를 써서 json을 ts로 변환한다는걸 말씀하신건가요?
as Colors로 사용하는건 저도 조금 걸리긴합니다... reduce로 타입 추론을 제대로 못해서 만들어진 타입은 Record<string, Record<ColorKey, string>>이지만 실제로는 저 타입이 맞아요... 임시로 이렇게 해두고 더 좋은 방법이 있다면 그때 변경하겠습니다

ixio0330

리나리아 세팅, 스토리북 설정에 디자인 시스템 적용까지,, 정말 고생 많으셨습니다. 🙏

leesangb added 7 commits May 5, 2023 00:51

📦 storybook7 업그레이드

366bb27

📦 linaria 추가

d6edcb3

🔧 linaria 스토리북 + next 설정

93a56e5

♻️ 버튼 storybook7 형식으로 리팩토링

d68b2a1

📦 디자인 토큰 생성

2cc3737

✨ 디자인 토큰으로 테마 생성

1d256f7

💩 테마 변경 코드 추가

ec7931c

leesangb added the pending 로컬 개발 진행중 입니다. label May 4, 2023

leesangb commented May 4, 2023

View reviewed changes

Doodream approved these changes May 7, 2023

View reviewed changes

ixio0330 approved these changes May 9, 2023

View reviewed changes

leesangb merged commit 8e2c869 into main May 10, 2023

ixio0330 assigned leesangb Jun 22, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

🔧 리나리아, 스토리북 설정 #18

🔧 리나리아, 스토리북 설정 #18

leesangb commented May 4, 2023

leesangb May 4, 2023

Doodream May 7, 2023

leesangb May 4, 2023 •

edited

Loading

Doodream May 7, 2023

leesangb May 4, 2023 •

edited

Loading

leesangb May 4, 2023 •

edited

Loading

Doodream May 7, 2023

leesangb May 4, 2023

leesangb May 4, 2023 •

edited

Loading

leesangb May 4, 2023

leesangb May 4, 2023 •

edited

Loading

leesangb May 4, 2023 •

edited by ixio0330

Loading

Doodream left a comment

Doodream May 7, 2023

Doodream May 7, 2023

Doodream May 7, 2023

Doodream May 7, 2023

ixio0330 May 9, 2023

leesangb May 10, 2023

Doodream May 7, 2023

ixio0330 May 9, 2023

leesangb May 10, 2023

ixio0330 left a comment


		//region Types

		interface ModePalette {

🔧 리나리아, 스토리북 설정 #18

🔧 리나리아, 스토리북 설정 #18

Conversation

leesangb commented May 4, 2023

변경 내용

체크리스트

📸 스크린샷

기타사항

🤚🏻 코드리뷰 하는 방법

✎ Code Review Manner

✎ Pn Rule

✎ PR Title Rule

✎ Comment Rule

✎ Merge Rule

Choose a reason for hiding this comment

Choose a reason for hiding this comment

leesangb May 4, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

leesangb May 4, 2023 • edited Loading

Choose a reason for hiding this comment

leesangb May 4, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

leesangb May 4, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

leesangb May 4, 2023 • edited Loading

Choose a reason for hiding this comment

leesangb May 4, 2023 • edited by ixio0330 Loading

Choose a reason for hiding this comment

Doodream 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

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

ixio0330 left a comment

Choose a reason for hiding this comment

leesangb May 4, 2023 •

edited

Loading

leesangb May 4, 2023 •

edited

Loading

leesangb May 4, 2023 •

edited

Loading

leesangb May 4, 2023 •

edited

Loading

leesangb May 4, 2023 •

edited

Loading

leesangb May 4, 2023 •

edited by ixio0330

Loading