shadcn/ui에서 공통 컴포넌트 install

[swgivenchy]

🔸 작업 내용

#99

• shadcn/ui에서 공통 컴포넌트(accordion, badge, button, input, popover, progress)를 manual install 하였습니다.
• 각 컴포넌트의 사용 방법에 대한 storybook코드를 작성하였습니다.

🔸 고민 했던 부분

• 현재 사용중인 next의 react는 react 19의 types를 사용중이나. shadcn/ui에서 참조하는 @types/react의 경우 다른 버전을 참조하여 타입 에러가 발생하였습니다.

• 프로젝트 루트에서 package.json을 수정하여 @types/react의 버전을 동일 버전으로 강제하도록 설정 변경하여 문제를 해결하였습니다.

    "pnpm": {
      "overrides": {
        "@types/react": "^19",
        "@types/react-dom": "^19"
      }
    },

🔸 참고

- button

- badge

- accordion

- input

- popover

- progress

[github-actions]

🚀 Storybook 링크: https://695a584a971db5ba962b1ac6-afzzsryigh.chromatic.com/

[github-actions]

🚀 Storybook 링크: https://695a584a971db5ba962b1ac6-ihgimyauyc.chromatic.com/

[AYEOOON]

[swgivenchy]

👍 추가로 리뷰어 자동 할당해주는 CODEOWNERS 파일도 추가하였습니당...!

[AYEOOON]

👍 추가로 리뷰어 자동 할당해주는 CODEOWNERS 파일도 추가하였습니당...!

awesome 👍

[rwaeng]

👍필요한 공통 컴포넌트 설치까지! 감사합니다~

[kimjihyo]

혹시 shadcn/ui 추가하실 때 pnpm dlx shadcn@latest init 실행하셨나요? 보통 shadcnui 초기화하면 생기는 components.json 파일이 안보여서 질문드립니다!

[swgivenchy]

혹시 shadcn/ui 추가하실 때 pnpm dlx shadcn@latest init 실행하셨나요? 보통 shadcnui 초기화하면 생기는 components.json 파일이 안보여서 질문드립니다!

CLI install 방식이 아닌 Manual install방식으로 컴포넌트를 추가하였습니다!
필요 라이브러리를 직접 설치하고, shadcn/ui의 컴포넌트 코드를 복붙하는 식으로 진행하였습니다.
Manual install 방식을 통해 추후 스타일 변경에 더욱 용이하게 진행하고자 하였습니다.
이에 따라 CLI설치시 초기화되는 설정파일인 components.json을 굳이 추가하지 않았습니다!

[kimjihyo]

혹시 shadcn/ui 추가하실 때 pnpm dlx shadcn@latest init 실행하셨나요? 보통 shadcnui 초기화하면 생기는 components.json 파일이 안보여서 질문드립니다!

CLI install 방식이 아닌 Manual install방식으로 컴포넌트를 추가하였습니다! 필요 라이브러리를 직접 설치하고, shadcn/ui의 컴포넌트 코드를 복붙하는 식으로 진행하였습니다. Manual install 방식을 통해 추후 스타일 변경에 더욱 용이하게 진행하고자 하였습니다. 이에 따라 CLI설치시 초기화되는 설정파일인 components.json을 굳이 추가하지 않았습니다!

오 너무 좋습니다!! ㅎㅎ 제가 브랜치 풀 받아서 아래 옵션없이 실행해봤을 때 문제가 없어 보였는데 혹시 어떤 에런지 공유 가능하실까요?

  "pnpm": {
    "overrides": {
      "@types/react": "^19",
      "@types/react-dom": "^19"
    }
  },

[swgivenchy]

혹시 shadcn/ui 추가하실 때 pnpm dlx shadcn@latest init 실행하셨나요? 보통 shadcnui 초기화하면 생기는 components.json 파일이 안보여서 질문드립니다!

CLI install 방식이 아닌 Manual install방식으로 컴포넌트를 추가하였습니다! 필요 라이브러리를 직접 설치하고, shadcn/ui의 컴포넌트 코드를 복붙하는 식으로 진행하였습니다. Manual install 방식을 통해 추후 스타일 변경에 더욱 용이하게 진행하고자 하였습니다. 이에 따라 CLI설치시 초기화되는 설정파일인 components.json을 굳이 추가하지 않았습니다!

오 너무 좋습니다!! ㅎㅎ 제가 브랜치 풀 받아서 아래 옵션없이 실행해봤을 때 문제가 없어 보였는데 혹시 어떤 에런지 공유 가능하실까요?

  "pnpm": {
    "overrides": {
      "@types/react": "^19",
      "@types/react-dom": "^19"
    }
  },

[{
	"resource": "/Users/junho/programming/boostcamp/malmanhae/apps/web/src/components/button/button.tsx",
	"owner": "typescript",
	"code": "2322",
	"severity": 8,
	"message": "'{ ref?: Ref<HTMLButtonElement> | undefined; key?: Key | null | undefined; disabled?: boolean | undefined; form?: string | undefined; formAction?: string | ((formData: FormData) => void | Promise<...>) | undefined; ... 287 more ...; className: string; }' 형식은 'ClassAttributes<HTMLButtonElement>' 형식에 할당할 수 없습니다.\n  'ref' 속성의 형식이 호환되지 않습니다.\n    'import(\"/Users/junho/programming/boostcamp/malmanhae/apps/web/node_modules/.pnpm/@[email protected]/node_modules/@types/react/index\").Ref<HTMLButtonElement> | undefined' 형식은 'React.Ref<HTMLButtonElement> | undefined' 형식에 할당할 수 없습니다.\n      '(instance: HTMLButtonElement | null) => void | (() => VoidOrUndefinedOnly)' 형식은 'Ref<HTMLButtonElement> | undefined' 형식에 할당할 수 없습니다.\n        '(instance: HTMLButtonElement | null) => void | (() => VoidOrUndefinedOnly)' 형식을 '(instance: HTMLButtonElement | null) => void | (() => VoidOrUndefinedOnly)' 형식에 할당할 수 없습니다. 이름이 같은 2개의 서로 다른 형식이 있지만 서로 관련은 없습니다.\n          'void | (() => VoidOrUndefinedOnly)' 형식을 'void | (() => VoidOrUndefinedOnly)' 형식에 할당할 수 없습니다. 이름이 같은 2개의 서로 다른 형식이 있지만 서로 관련은 없습니다.\n            '() => VoidOrUndefinedOnly' 형식은 'void | (() => VoidOrUndefinedOnly)' 형식에 할당할 수 없습니다.\n              '() => VoidOrUndefinedOnly' 형식을 '() => VoidOrUndefinedOnly' 형식에 할당할 수 없습니다. 이름이 같은 2개의 서로 다른 형식이 있지만 서로 관련은 없습니다.\n                'VoidOrUndefinedOnly' 형식을 'VoidOrUndefinedOnly' 형식에 할당할 수 없습니다. 이름이 같은 2개의 서로 다른 형식이 있지만 서로 관련은 없습니다.\n                  '{ [UNDEFINED_VOID_ONLY]: never; }' 형식은 'VoidOrUndefinedOnly' 형식에 할당할 수 없습니다.",
	"source": "ts",
	"startLineNumber": 49,
	"startColumn": 6,
	"endLineNumber": 49,
	"endColumn": 10,
	"origin": "extHost1"
}]

해당 에러에 대한 메시지였습니다!
저도 해당 부분 지우고 다시 해봤더니 되길래 왜 되지? 하고 AI에게 질문하였습니다.
button 컴포넌트를 생성할 당시 @radix-ui/react-slot를 설치하여 사용했는데 이때 단독 설치 되었고, 해당 패키지의 버전이 기록된 pnpm-lock.yaml에서 peer dependency로 다른 react 버전이 등록되어 해당 문제가 발생했던 것 같습니다!
이후 override 부분을 작성한 후 pnpm install을 실행했을 때 override에 맞춰 pnpm-lock.yaml이 작성되었고, 그로 인해 이후 해당 부분을 지워도 문제가 안생긴다고 합니다...!

100% 정확한 답변은 아닙니다. 새롭게 프로젝트를 파서 다시 진행해보니 또 정상적으로 나와서 일시적으로 나왔던 에러같기도 하고요...! pnpm-lock.yaml을 그때 제대로 확인했어야 했는데 문제 해결에 급급해서 override 방법을 찾고 바로 적용해서 문제를 해결해버린게 아쉽네요,,,

[kimjihyo]

@swgivenchy 아 이런 문제가 있었군요.. !! 자세하게 공유해주셔서 정말 감사합니다! 해결하는데 쉽지 않았을탠데 고생 많으셨습니다 !! 아무튼 잘 돼서 다행이네요

[dltnwjd308]

👍 초기 세팅 잘해주셔서 감사합니다!