feat(style): 공통 스타일 패키지 추가

[ohprettyhak]

🌍 이슈 번호

• feat(ui): 공통 컴포넌트 시스템 구현 #405

✅ 작업 내용

• 관객 앱과 매니저 앱에서 같은 디자인 토큰과 유틸리티 함수를 공유할 수 있도록 스타일링 패키지를 분리했어요.

[gemini-code-assist]

Summary of Changes

Hello @ohprettyhak, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

이 Pull Request는 관객 앱과 매니저 앱 간의 디자인 일관성과 코드 재사용성을 높이기 위해 공통 스타일 패키지(@hcc/style)를 도입하는 것을 목표로 합니다. 이를 위해 기존의 분산된 스타일 관련 파일과 의존성을 통합하고, 프로젝트의 린팅 및 포매팅 도구를 Biome으로 전환하며, Tailwind CSS를 채택했습니다. 또한, API 상호작용을 위한 새로운 @hcc/api-base 패키지를 도입하여 전반적인 아키텍처를 개선했습니다. 이 변경사항들은 두 애플리케이션의 UI 컴포넌트와 로직에 대한 광범위한 리팩토링을 포함하며, 코드베이스의 유지보수성과 확장성을 크게 향상시킬 것입니다.

Highlights

• 공통 스타일 패키지 도입: 관객 앱과 매니저 앱 간에 디자인 토큰과 유틸리티 함수를 공유하기 위한 @hcc/style이라는 새로운 공통 스타일 패키지가 생성되었습니다.
• 스타일 관련 파일 및 의존성 통합: 기존에 각 애플리케이션에 분산되어 있던 스타일 관련 파일과 의존성(예: @vanilla-extract/css, @hcc/styles)이 제거되고, 새로운 공통 스타일 패키지로 통합되었습니다.
• Biome으로의 린팅/포매팅 도구 전환: 프로젝트의 린팅 및 포매팅 도구가 ESLint와 Prettier에서 Biome으로 전환되었습니다. 이는 package.json 스크립트 및 설정 파일 변경(예: .prettierrc, eslint.config.js 제거, biome.json 추가)을 통해 확인할 수 있습니다.
• Tailwind CSS 도입: 두 애플리케이션 모두 Tailwind CSS를 도입하여 스타일링 방식에 큰 변화가 있었습니다. 이는 postcss.config.mjs 및 globals.css 파일 추가와 package.json의 의존성 변경으로 나타납니다.
• 새로운 API 베이스 패키지 도입: API 상호작용을 표준화하기 위해 @hcc/api-base라는 새로운 패키지가 추가되었습니다. 이는 기존 @hcc/api 패키지의 기능을 대체하며, ky 라이브러리를 기반으로 합니다.
• 대규모 UI 및 로직 리팩토링: 매니저 앱과 관객 앱에서 사용되던 많은 UI 컴포넌트, 페이지, 유틸리티 함수, React Query 훅 등이 제거되거나 재구성되었습니다. 이는 새로운 스타일 및 API 아키텍처에 맞춰 대규모 리팩토링이 진행되었음을 시사합니다.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in issue comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

안녕하세요. 공통 스타일을 위한 @hcc/style 패키지 추가 작업 리뷰입니다. 관객 앱과 매니저 앱에서 중복되던 스타일 코드를 공통 패키지로 분리하여 재사용성을 높이고 유지보수를 용이하게 만드신 점이 좋습니다. 전체적인 리팩토링 방향은 훌륭하며, 코드 품질을 더욱 향상시키기 위해 몇 가지 개선점을 제안드립니다. 자세한 내용은 각 파일의 주석을 확인해주세요.