[ADD] Stitches 설치 및 커스텀 버튼 생성 #2

seongminn · 2023-07-27T09:09:43Z

📌 이슈 번호

close [ADD] Stitches를 설치하고 적용한다. #1

✨ 구현한 내용

@stitches/react 설치
globalCss 함수로 글로벌 스타일 적용
- next.js 초기세팅 시 제공하는 global.css의 내용을 그대로 사용하였음
custom button 컴포넌트 생성

📝 논의사항

theme 관련 내용은 추후 디자인 가이드가 결정되면 createStitches 함수를 통해 정의할 수 있을 것 같습니다.
button의 스타일을 지정할 때, variants에 따른 스타일을 각 variants 선언부에서 각각 지정하는 것이 좋을지(1), 혹은 default variants의 스타일을 정의한 뒤 optional한 variants는 스타일을 덮어씌우는 게 좋을지(2) 궁금합니다!

// ex. (1)

export const Button = styled('button', {
  variants: {
    color: {
      primary: {
        backgroundColor: '#bcabfc',
        color: '#222',
      },
      secondary: {
        backgroundColor: '#fff',
        color: '#a792fc',
      },
    },
  },

  defaultVariants: {
    color: 'primary',
  },
});

// ex. (2)

export const Button = styled('button', {
 backgroundColor: '#bcabfc',
 color: '#222',

 variants: {
   color: {
     primary: {},
     secondary: {
       backgroundColor: '#fff',
       color: '#a792fc',
     },
   },
 },

 defaultVariants: {
   color: 'primary',
 },
});

jeongnaehyeok

저는 2번의 경우가 좋다고 생각합니다. 기본 CSS를 기반으로 variant를 확장해가야 한다고 생각하기 떄문입니다.

src/pages/_app.tsx

src/styles/Home.module.css

src/styles/GlobalStyles.tsx

src/pages/index.tsx

src/components/common/Button/index.tsx

jeongnaehyeok · 2023-07-27T13:38:44Z

_document에 stiches ssr 설정도 추가해주세요

https://stitches.dev/docs/server-side-rendering

- 필요없는 대괄호 사용 제거 - size variants 옵션의 가독성 향상을 위해 줄임말 제거 - 관심사 분리를 위해 스타일 코드와 컴포넌트 코드를 분리

추후 디자인 시스템이 결정됨에 따라 config 옵션을 보완할 예정입니다.

seongminn · 2023-07-27T17:38:27Z

_document에 stiches ssr 설정도 추가해주세요

https://stitches.dev/docs/server-side-rendering

세세한 리뷰 너무 감사드립니다. 가볍게 생각했던 것들을 다시 확인하면서 많이 배우네요😊 리뷰 남겨주신 내용 바탕으로 수정하고 커밋 했습니다! 부족한 부분이 있으면 말씀해주세요!!

궁금한 점이 있습니다!

stitches에서 theme을 정의하고 사용하는 방법이 궁금합니다.
- stitches.config.ts 파일에서 stitches config 객체를 생성할 때 인자로 theme을 넘겨주고, 해당 객체의 styled 함수를 import 해서 사용하는 방법
- stitches.config.ts 파일에서 stitches config 객체를 생성하고, 해당 객체의 createTheme 함수를 통해 정의한 뒤 StitchesProvider 컴포넌트를 사용하는 방법
stitches.config 파일을 root 디렉토리에 생성해서 절대 경로로 접근이 불가능합니다. 이런 경우에는 stitches.config 파일을 src 디렉토리 내부로 이동시키는 것이 좋을까요? config라는 디렉토리를 생성하고 그 안에서 관리하는 것은 어떨지 생각해보았습니다!

@jeongnaehyeok

jeongnaehyeok · 2023-07-29T01:06:21Z

_document에 stiches ssr 설정도 추가해주세요
https://stitches.dev/docs/server-side-rendering

세세한 리뷰 너무 감사드립니다. 가볍게 생각했던 것들을 다시 확인하면서 많이 배우네요😊 리뷰 남겨주신 내용 바탕으로 수정하고 커밋 했습니다! 부족한 부분이 있으면 말씀해주세요!!

궁금한 점이 있습니다!

stitches에서 theme을 정의하고 사용하는 방법이 궁금합니다.

stitches.config.ts 파일에서 stitches config 객체를 생성할 때 인자로 theme을 넘겨주고, 해당 객체의 styled 함수를 import 해서 사용하는 방법

stitches.config.ts 파일에서 stitches config 객체를 생성하고, 해당 객체의 createTheme 함수를 통해 정의한 뒤 StitchesProvider 컴포넌트를 사용하는 방법

stitches.config 파일을 root 디렉토리에 생성해서 절대 경로로 접근이 불가능합니다. 이런 경우에는 stitches.config 파일을 src 디렉토리 내부로 이동시키는 것이 좋을까요? config라는 디렉토리를 생성하고 그 안에서 관리하는 것은 어떨지 생각해보았습니다!

@jeongnaehyeok

공통 스타일을 관리하기 위해서 config를 사용하는 것은 해당 예시처럼 stitches.config.ts 파일을 생성하고, 해당 파일을 import 하는 방식으로 사용하면 좋을 것 같습니다.
root에 생성해서 관리하고 싶으시다면, tsconfig.json에서 새로운 절대경로를 정의하시면됩니다. 추가로 src/styles로 이동시키는 것도 하나의 방법입니다.

jeongnaehyeok

파일 구조는 한번에 정리해서 오늘중으로 제안드리겠습니다

jeongnaehyeok · 2023-07-29T01:35:08Z

src/components/common/Button/style.tsx

@@ -0,0 +1,52 @@
+import { styled, VariantProps } from '@stitches/react';
+
+export const StyledButton = styled('button', {


Suggest: StyledButton을 쓰는 것은 앞으로 명명지을 때 좋은 방향은 아닌 것 같습니다. 그래서 2가지 제안을 드립니다.

Stitches Component를 Component로 사용하기 위해 import 해올때는, S로 전체 import 해서 사용한다.

import * as S from './style';

Component를 감싸는 Stitches Component에는 -Styled 또는 -Base를 뒤에 붙이는 것을 추천드립니다.

export const ButtonStyled = styled('button', { // ... }

Suggest: StyledButton을 쓰는 것은 앞으로 명명지을 때 좋은 방향은 아닌 것 같습니다. 그래서 2가지 제안을 드립니다.

Stitches Component를 Component로 사용하기 위해 import 해올때는, S로 전체 import 해서 사용한다.

import S from './style';

Component를 감싸는 Stitches Component에는 -Styled 또는 -Base를 뒤에 붙이는 것을 추천드립니다.

export const ButtonStyled = styled('button', { // ... }

확인했습니다. 1, 2번 모두 적용하여 수정하겠습니다!

추가로, style.tsx 파일에서 다음과 같이 미리 정의한 컴포넌트의 VariantsType을 export 하는 것에 대해서는 어떻게 생각하시나요? style 관련 파일에서 type을 export 하는 것이 관심사를 올바르게 분리하지 못한 것일 수 있다고 생각하여 질문드립니다!

export type ButtonVariantsType = VariantProps<typeof Button>;

아래와 같이 type.ts를 분리하는 것이 좋아보입니다.

// type.ts import { ComponentProps } from "react"; import { Button } from "./style"; export type ButtonProps = ComponentProps<typeof Button>;

그래서 파일 정리를 하자면, 각 Component의 하위에는 4개의 파일이 존재할 것 같습니다.

ComopnentName ├── index.stories.tsx # UI Component에서 필요로 합니다. ├── index.tsx # Component를 가지고 있는 파일입니다. ├── style.ts # Stitches Component를 작업하는 파일입니다. └── type.ts # 해당 Component의 Type을 모아두는 파일입니다.

src/components/common/Button/style.tsx

src/pages/_document.tsx

jeongnaehyeok · 2023-07-29T04:41:07Z

font가 적용되지 않은 것 같아요.
아래와 같은 오류가 발생하는데, 같이 확인해주실 수 있으신가요?

- error Failed to download `Noto Sans KR` from Google Fonts. Using fallback font instead.

seongminn · 2023-07-29T08:25:17Z

공통 스타일을 관리하기 위해서 config를 사용하는 것은 해당 예시처럼 stitches.config.ts 파일을 생성하고, 해당 파일을 import 하는 방식으로 사용하면 좋을 것 같습니다.

root에 생성해서 관리하고 싶으시다면, tsconfig.json에서 새로운 절대경로를 정의하시면됩니다. 추가로 src/styles로 이동시키는 것도 하나의 방법입니다.

stitches.config 파일에서 createStitches 함수로 공통 스타일을 정의하는 것을 말씀하시는 거군요! 확인했습니다. 대략적인 디자인 시스템이 결정되면 해당 방법으로 공통 스타일을 관리하도록 하겠습니다!
src/styles로 이동시켜도 되는군요! config 와 관련한 파일이라 styles 디렉토리에 위치하는 게 적절하지 않다고 생각했는데, 스타일 라이브러리의 config 파일이니까 본질은 스타일 관련이라 생각할 수 있을 것 같네요. 그러면 styles 디렉토리로 이동시키겠습니다!

seongminn · 2023-07-29T09:42:26Z

font가 적용되지 않은 것 같아요. 아래와 같은 오류가 발생하는데, 같이 확인해주실 수 있으신가요?
- error Failed to download `Noto Sans KR` from Google Fonts. Using fallback font instead.

제 환경에서는 정상적으로 작동해서 에러가 발생한 줄 몰랐네요ㅠㅠ 혹시 어떤 상황에서 에러가 발생하는지 말씀해주실 수 있을까요?
아래는 구글링하다 nextjs 레포지터리의 issues 중 관련 이슈를 발견하여 첨부합니다! 해당 이슈에서는 node 버전을 최신 lts로 변경 후 .next 파일을 제거하여 문제를 해결했다는 답글이 보이네요.

vercel/next.js#45080

seongminn · 2023-07-29T09:53:31Z

Question: globalStyles.ts의 globalCss 함수 역시 stitches.config.ts의 stitches config 객체로부터 가져오는 것이 어떨지 궁금합니다.
createStitches 함수를 이용하여 google font를 공통 스타일로 정의하고 globalStyles에서 사용할 수 있도록 한다면, 생성한 Font 객체를 전역적으로 사용할 수 있을 것 같아서입니다!

// stitches.config.ts
const notoSansKr = Noto_Sans_KR({
  subsets: ['latin'],
  weight: ['400', '500', '700'],
});

export const { globalCss, getCssText } = createStitches({
  theme: {
    fonts: {
      notoSansKr: `${notoSansKr.style.fontFamily}`,
    },
  },
});

// globalStyles.ts
export const globalStyles = globalCss({
  '*': {
    boxSizing: 'border-box',
    padding: 0,
    margin: 0,
    fontFamily: '$notoSansKr',
  },
});

jeongnaehyeok · 2023-07-29T14:34:43Z

font가 적용되지 않은 것 같아요. 아래와 같은 오류가 발생하는데, 같이 확인해주실 수 있으신가요?
- error Failed to download `Noto Sans KR` from Google Fonts. Using fallback font instead.
제 환경에서는 정상적으로 작동해서 에러가 발생한 줄 몰랐네요ㅠㅠ 혹시 어떤 상황에서 에러가 발생하는지 말씀해주실 수 있을까요? 아래는 구글링하다 nextjs 레포지터리의 issues 중 관련 이슈를 발견하여 첨부합니다! 해당 이슈에서는 node 버전을 최신 lts로 변경 후 .next 파일을 제거하여 문제를 해결했다는 답글이 보이네요.

vercel/next.js#45080

node 버전은 20으로 올리니 해당 이슈 해결되긴 합니다. 혹시 node version 어떤거 사용하시나요?

jeongnaehyeok · 2023-07-29T14:36:28Z

Question: globalStyles.ts의 globalCss 함수 역시 stitches.config.ts의 stitches config 객체로부터 가져오는 것이 어떨지 궁금합니다. createStitches 함수를 이용하여 google font를 공통 스타일로 정의하고 globalStyles에서 사용할 수 있도록 한다면, 생성한 Font 객체를 전역적으로 사용할 수 있을 것 같아서입니다!
// stitches.config.ts
const notoSansKr = Noto_Sans_KR({
  subsets: ['latin'],
  weight: ['400', '500', '700'],
});

export const { globalCss, getCssText } = createStitches({
  theme: {
    fonts: {
      notoSansKr: `${notoSansKr.style.fontFamily}`,
    },
  },
});

// globalStyles.ts
export const globalStyles = globalCss({
  '*': {
    boxSizing: 'border-box',
    padding: 0,
    margin: 0,
    fontFamily: '$notoSansKr',
  },
});

해당 부분 길어질 것 같으니 같이 내일 이야기 하시죠!!

jeongnaehyeok · 2023-07-29T14:37:32Z

처음 핏을 맞추는 거라 리뷰가 길어지는데, 조금만 더 같이 화이팅 하시죠!!

seongminn · 2023-07-29T15:53:31Z

node 버전은 20으로 올리니 해당 이슈 해결되긴 합니다. 혹시 node version 어떤거 사용하시나요?

v18.16.1 사용 중입니다. 버전 변경할 때만 해도 가장 최신 LTS였는데, 확인해보니 지금은 v18.17.0이 최신 LTS네요!

--

Question: globalStyles.ts의 globalCss 함수 역시 stitches.config.ts의 stitches config 객체로부터 가져오는 것이 어떨지 궁금합니다. createStitches 함수를 이용하여 google font를 공통 스타일로 정의하고 globalStyles에서 사용할 수 있도록 한다면, 생성한 Font 객체를 전역적으로 사용할 수 있을 것 같아서입니다!
// stitches.config.ts
const notoSansKr = Noto_Sans_KR({
  subsets: ['latin'],
  weight: ['400', '500', '700'],
});

export const { globalCss, getCssText } = createStitches({
  theme: {
    fonts: {
      notoSansKr: `${notoSansKr.style.fontFamily}`,
    },
  },
});

// globalStyles.ts
export const globalStyles = globalCss({
  '*': {
    boxSizing: 'border-box',
    padding: 0,
    margin: 0,
    fontFamily: '$notoSansKr',
  },
});
해당 부분 길어질 것 같으니 같이 내일 이야기 하시죠!!

알겠습니다. 세세한 리뷰 덕분에 세팅만 했을 뿐인데도 시야가 넓어지는 듯합니다! 감사해요 내혁님!!

seongminn · 2023-07-29T16:37:48Z

실수로 PR 닫아버려서 reopen 했습니다 죄송해요ㅠㅠ

말씀해주신 내용 반영해서 수정하고 커밋했습니다! @jeongnaehyeok

…측하기 쉽게 수정

seongminn · 2023-07-30T12:32:24Z

논의한 부분 수정해서 push 했습니다!

@jeongnaehyeok

seongminn added 3 commits July 27, 2023 16:39

[ADD] @stitches/react를 설치한다.

5800036

[STYLE] globalCss 함수로 global style 적용

b856a31

[ADD] 커스텀 버튼 컴포넌트 생성

a08794b

seongminn added the 🐢 성민 label Jul 27, 2023

seongminn self-assigned this Jul 27, 2023

seongminn requested a review from jeongnaehyeok July 27, 2023 09:12

jeongnaehyeok reviewed Jul 27, 2023

View reviewed changes

seongminn added 6 commits July 28, 2023 01:12

[DEL] 사용하지 않는 css 파일 및 import 제거

119412f

[RENAME] global style 파일명 변경

ab2eedd

[CHORE] global style을 컴포넌트 형태가 아닌 함수 형태로 적용

4676303

[REFACTOR]: custom button 컴포넌트 리펙토링

a017b05

- 필요없는 대괄호 사용 제거 - size variants 옵션의 가독성 향상을 위해 줄임말 제거 - 관심사 분리를 위해 스타일 코드와 컴포넌트 코드를 분리

[ADD] stitches config 파일 생성

c788508

추후 디자인 시스템이 결정됨에 따라 config 옵션을 보완할 예정입니다.

[CHORE] Stitches의 getCssText 함수를 통한 SSR 설정

72ab112

jeongnaehyeok reviewed Jul 29, 2023

View reviewed changes

[MOVE] stitches.config.ts를 src/styles 디렉토리로 이동

2ae3a19

[RENAME] 제시된 Stitches Component 네이밍 컨벤션을 반영하여 이름 수정

eeb789c

seongminn requested a review from jeongnaehyeok July 29, 2023 10:03

seongminn added 2 commits July 30, 2023 01:20

[REFACTOR] Button Component 타입을 type.ts에서 관리하여 관심사를 분리

27ff61f

[CHORE] default variants를 기본 css로 수정

28bcede

seongminn closed this Jul 29, 2023

seongminn reopened this Jul 29, 2023

seongminn added 2 commits July 30, 2023 21:22

[CHORE] 글꼴을 stitches config 파일에서 전역으로 관리

aaa5083

[CHORE] stitches config의 styled 함수 사용 및 Button 컴포넌트의 default props를 예…

316aef0

…측하기 쉽게 수정

[DEL] 사용하지 않는 stitches config 파일 제거

d2c6b74

jeongnaehyeok approved these changes Aug 1, 2023

View reviewed changes

seongminn merged commit 28cf836 into main Aug 2, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[ADD] Stitches 설치 및 커스텀 버튼 생성 #2

[ADD] Stitches 설치 및 커스텀 버튼 생성 #2

seongminn commented Jul 27, 2023 •

edited

Loading

jeongnaehyeok left a comment

jeongnaehyeok commented Jul 27, 2023

seongminn commented Jul 27, 2023 •

edited

Loading

jeongnaehyeok commented Jul 29, 2023 •

edited

Loading

jeongnaehyeok left a comment

jeongnaehyeok Jul 29, 2023 •

edited

Loading

seongminn Jul 29, 2023

jeongnaehyeok Jul 29, 2023 •

edited

Loading

jeongnaehyeok commented Jul 29, 2023

seongminn commented Jul 29, 2023

seongminn commented Jul 29, 2023

seongminn commented Jul 29, 2023 •

edited

Loading

jeongnaehyeok commented Jul 29, 2023

jeongnaehyeok commented Jul 29, 2023

jeongnaehyeok commented Jul 29, 2023

seongminn commented Jul 29, 2023

seongminn commented Jul 29, 2023 •

edited

Loading

seongminn commented Jul 30, 2023 •

edited

Loading

		@@ -0,0 +1,52 @@
		import { styled, VariantProps } from '@stitches/react';

		export const StyledButton = styled('button', {

[ADD] Stitches 설치 및 커스텀 버튼 생성 #2

[ADD] Stitches 설치 및 커스텀 버튼 생성 #2

Conversation

seongminn commented Jul 27, 2023 • edited Loading

📌 이슈 번호

✨ 구현한 내용

📝 논의사항

jeongnaehyeok left a comment

Choose a reason for hiding this comment

jeongnaehyeok commented Jul 27, 2023

seongminn commented Jul 27, 2023 • edited Loading

jeongnaehyeok commented Jul 29, 2023 • edited Loading

jeongnaehyeok left a comment

Choose a reason for hiding this comment

jeongnaehyeok Jul 29, 2023 • edited Loading

Choose a reason for hiding this comment

seongminn Jul 29, 2023

Choose a reason for hiding this comment

jeongnaehyeok Jul 29, 2023 • edited Loading

Choose a reason for hiding this comment

jeongnaehyeok commented Jul 29, 2023

seongminn commented Jul 29, 2023

seongminn commented Jul 29, 2023

seongminn commented Jul 29, 2023 • edited Loading

jeongnaehyeok commented Jul 29, 2023

jeongnaehyeok commented Jul 29, 2023

jeongnaehyeok commented Jul 29, 2023

seongminn commented Jul 29, 2023

seongminn commented Jul 29, 2023 • edited Loading

seongminn commented Jul 30, 2023 • edited Loading

seongminn commented Jul 27, 2023 •

edited

Loading

seongminn commented Jul 27, 2023 •

edited

Loading

jeongnaehyeok commented Jul 29, 2023 •

edited

Loading

jeongnaehyeok Jul 29, 2023 •

edited

Loading

jeongnaehyeok Jul 29, 2023 •

edited

Loading

seongminn commented Jul 29, 2023 •

edited

Loading

seongminn commented Jul 29, 2023 •

edited

Loading

seongminn commented Jul 30, 2023 •

edited

Loading