feat: add clsx, twMerge and cva to make css easier

[hee-suh]

Issue Number

#2

Description

구현 내용 및 작업한 내용

• css를 간편하게 하기 위해 clsx, twMerge, cva를 추가하였습니다.
• clsx, twMerge를 cn으로 유틸화했습니다.
• cn을 storybook에 적용해보았습니다.
• rsc와 ssr에서 cva가 정상 작동하는지 확인하였습니다.

To Reviewers

PR을 볼 때 주의깊게 봐야하거나 말하고 싶은 점

• cva, cn을 적용한 button.tsx 위주로 보시면 될 것 같습니다.
• rsc와 ssr에서 css가 정상 작동하는지 테스트하는 김에 Suspense를 추가했습니다.
  따라서 Suspense와 관련된 다음 부분은 주의 깊게 보지 않으셔도 될 것 같습니다.
  • spinner.tsx, loading-indicator.tsx는 Suspense의 fallback으로 사용합니다.
  • data.ts는 <Suspense> 안에 들어갈 컴포넌트의 data fetch를 위해 만들었습니다.
  • error 처리를 해주지 않으면 빌드 시에 prerender error가 발생하여 에러 처리를 해주었습니다. (error.tsx는 빌드 에러와는 상관 없는데 에러 처리하는 김에 추가해줬습니다)
    Cf. https://stackoverflow.com/questions/71002100/nextjs-prerender-error-works-fine-in-dev-breaks-in-build
• 개발 서버를 실행하면 다음과 같은 화면이 나옵니다.
  
  

Checklist

PR 등록 전 확인한 것

• 올바른 타켓 브랜치를 설정하였는가
• PR 제목은 포맷과 내용 둘 다 알맞게 작성되었는가 (e.g., feat: add login page)
• Description에 PR을 구체적으로 설명했는가

[poiu694]

Although cva is a tiny library, it's best to use in a SSR/SSG environment – your user probably doesn't need this JavaScript, especially for static components.

https://cva.style/docs/getting-started/variants#creating-variants 에서 언급한 부분인데 SSR/SSG에 사용하기 좋다고 되어있긴 하네요~!

---

a regular dependency (dependencies). Since the code is executed at runtime by the consumer. If you use SSR/SSG you could probably prevent this code from running on the client, but it would still run on the server at runtime/build time, respectively.

joe-bell/cva#200 (comment) 요 부분도 discussion에 있어용

but there's no harm in moving that to a server-side/static function if you're concerned

joe-bell/cva#83 (comment)

[Pridesd]

고생 많이 하셨습니다.

[poiu694]