[FE-Refactor] 모노레포 설정

[dioo1461]

#️⃣ 연관된 이슈>

• close [Feature] 모노레포 구축 관련 조사 + 패키지화 #377

📝 작업 내용> 이번 PR에서 작업한 내용을 간략히 설명해주세요(이미지 첨부 가능)

• 앱의 하위 레벨 모듈(utils, hooks, etc.)을 @endolphin/core 패키지로 분리했습니다.

  • import { clsx } from '@endolphin/core/utils' 와 같이 사용할 수 있도록 했습니다.

  // package.json
    "exports": {
      "./utils": "./dist/src/utils/index.js",
      "./hooks": "./dist/src/hooks/index.js",
      "./constants": "./dist/src/constants/index.js",
      "./types": "./dist/src/types/index.js"
    },

• @endolphin/theme 패키지는 소비자 앱이 vanilla extract를 사용하는 것을 상정하므로, tsc로 빌드해서 타입 선언만을 생성하고 css 번들링 및 주입 책임은 소비자 앱에 맡기도록 했습니다. 그러므로 소비자 앱 측에서 개발 서버를 실행할 때, @vanilla-extract/esbuild-plugin 플러그인을 이용해 theme 패키지를 따로 처리하여 css를 생성 및 프로젝트에 주입해주어야 합니다. 이에 따라 client 앱의 vite.config.js에 아래 옵션을 추가하였습니다.

  import { vanillaExtractPlugin as veEsbuildPlugin } from '@vanilla-extract/esbuild-plugin';
  ...
  optimizeDeps: {
    esbuildOptions: {
      plugins: [veEsbuildPlugin({ runtime: true })],
    },
  },

• 커스텀 date, time 클래스를 @endolphin/date-time 패키지로 분리했습니다.

• 분리 가능한 컴포넌트들은 tsup으로 번들링하여 vanilla extract에 의존하지 않는 별개의 @endolphin/ui 패키지로 분리하고, client 앱이 이를 참조하도록 했습니다.

• 캘린더, 데이트피커 또한 별개의 @endolphin/calendar 패키지로 분리했습니다. 최신화해야 할 부분이 남아있긴 한데, 이미 PR이 상당히 크기 때문에 별개 PR로 분리해서 작업하겠습니다,,

🙏 여기는 꼭 봐주세요! > 리뷰어가 특별히 봐주었으면 하는 부분이 있다면 작성해주세요

• frontend 루트에 있는 endolphin.code-workspace 파일을 클릭하면 아래 이미지와 같이 "Open Workspace" 버튼이 에디터에 뜨고, 이걸 클릭하면 새로운 환경에서 에디터가 열립니다!

• frontend 루트에 있는 mkcert 폴더와 .env.local 을 apps/client 로 옮겨주셔야 합니다!

• 현재 mkcert 파일이 apps/client 에 생성되므로 server에서 해당 경로를 참조하도록 하였는데, mkcert를 frontend 루트에 두는 게 더 나을까 하는 생각도 듭니다.

• PR이 굉장히 커졌는데요.. 일단 제가 놓친 부분이 없다면 서비스 상 모든 ui 및 기능이 문제없이 동작하는 것을 확인했습니다..!

[coderabbitai]

Important

Review skipped

More than 25% of the files skipped due to max files limit. The review is being skipped to prevent a low-quality review.

93 files out of 295 files are above the max files limit of 100. Please upgrade to Pro plan to get higher limits.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

---

Note

🎁 Summarized by CodeRabbit Free

Your organization is on the Free plan. CodeRabbit will generate a high-level summary and a walkthrough for each pull request. For a comprehensive line-by-line review, please upgrade your subscription to CodeRabbit Pro by visiting https://app.coderabbit.ai/login.

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Explain this complex logic.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai explain this code block.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and explain its main purpose.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Join our Discord community for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[hamo-o]

너무 수고 많으셨습니다...

1. endolphinCalendar와 endolphinDateTime은 일관성을 위해 calendar, date-time으로 바꾸는 건 어떨까요? (폴더명)
2. tsconfig.tsbuildinfo 파일은 삭제하고 .gitignore에 추가해도 될 것 같습니다. (첫 빌드 돌리면 자동으로 생기므로)
3. tsup.config.bundled_*.mjs도 마찬가지로 삭제하고 .gitignore에 추가해도 될 것 같아요.

[hamo-o]

🚀🚀🚀