search

gsainfoteam / ziggle-fe

https://ziggle.gistory.me
7 stars 2 forks source link

Refactor dark mode functionality and add system option #371

Closed enc2586 closed 1 week ago

enc2586 commented 1 month ago

리팩토링 이후 코드를 베이스로 재개발합니다: 이 브랜치 참조

Fixes #368

Summary by CodeRabbit

Summary by CodeRabbit

coderabbitai[bot] commented 1 month ago
📝 Walkthrough
📝 Walkthrough ## Walkthrough 이번 변경 사항은 다크 모드 관리 로직의 리팩토링, 새로운 세그먼트 제어 컴포넌트의 추가, 로컬 스토리지 사용을 통한 테마 저장 방식의 개선을 포함합니다. `useColorTheme` 훅이 업데이트되어 여러 테마 옵션을 지원하며, `InitClient` 컴포넌트가 시스템 색상 변경을 감지하도록 변경되었습니다. 전반적으로 사용자 인터페이스의 일관성과 사용성을 높이는 방향으로 진행되었습니다. ## Changes | 파일 경로 | 변경 요약 | |----------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------| | `src/app/[lng]/(common)/(common)/mypage/ChangeDarkModeBox.tsx` | `ChangeDarkModeBox` 컴포넌트의 다크 모드 관리 로직 리팩토링, 로컬 스토리지로 테마 저장 방식 변경, UI 컴포넌트를 세그먼트 제어로 전환. | | `src/app/[lng]/(common)/InitClient.tsx` | `InitClient` 컴포넌트에 `useColorTheme` 훅 추가, 시스템 색상 변경 감지를 위한 `useEffect` 훅 구현. | ## Sequence Diagram(s) ```mermaid sequenceDiagram participant User participant App participant LocalStorage participant ThemeManager User->>App: 선택한 테마 변경 App->>ThemeManager: 테마 업데이트 요청 ThemeManager->>LocalStorage: 새로운 테마 저장 LocalStorage-->>ThemeManager: 저장 완료 ThemeManager-->>App: 테마 업데이트 완료 App-->>User: UI 업데이트 ``` ## Assessment against linked issues | Objective | Addressed | Explanation | |------------------------------------------|-----------|--------------------------------------| | 다크 모드 토글을 세그먼트 제어로 변경 및 'System' 옵션 추가 (#368) | ✅ | | > > 🐇 변화의 바람이 불어와, > 어두운 밤도 밝게 비춰주네. > 세그먼트 버튼, 선택의 기쁨, > 다크 모드로 모두 함께 춤춰요! > 새로운 언어로 노래하니, > 우리 모두의 마음이 하나로 이어지네. > 🌙✨

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share - [X](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai) - [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai) - [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai) - [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code)
🪧 Tips ### Chat There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai): - Review comments: Directly reply to a review comment made by CodeRabbit. Example: - `I pushed a fix in commit , please review it.` - `Generate unit testing code for this file.` - `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 generate unit testing code for this file.` - `@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 generate unit testing code.` - `@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.` 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 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](https://docs.coderabbit.ai/guides/configure-coderabbit) 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](https://coderabbit.ai/docs) for detailed information on how to use CodeRabbit. - Join our [Discord Community](http://discord.gg/coderabbit) to get help, request features, and share feedback. - Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.
github-actions[bot] commented 1 month ago

Preview URL: https://ziggle-1fakl3ew6-2paperstars-projects.vercel.app

2paperstar commented 1 month ago

368 이슈랑 연관된 PR인데 #362 를 잘못 가리키고 있어 수정했습니다!

github-actions[bot] commented 1 month ago

Preview URL: https://ziggle-9enjapwos-2paperstars-projects.vercel.app

enc2586 commented 1 month ago

useLocalStorage의 구현 너무 좋은 것 같아요 👍👍!! 다만, 기존에는 쿠키로만 이루어진 구현이 localStorage와 혼용해서 사용하도록 한 이유를 알 수 있을까요?

https://github.com/gsainfoteam/ziggle-fe/pull/371#discussion_r1780467506 봇한테 먼저 답변해버려서.. 참고 부탁드려요!

2paperstar commented 1 month ago

useLocalStorage의 구현 너무 좋은 것 같아요 👍👍!! 다만, 기존에는 쿠키로만 이루어진 구현이 localStorage와 혼용해서 사용하도록 한 이유를 알 수 있을까요?

#371 (comment) 봇한테 먼저 답변해버려서.. 참고 부탁드려요!

확인했습니다!

github-actions[bot] commented 1 month ago

Preview URL: https://ziggle-ip0hjdo9w-2paperstars-projects.vercel.app

enc2586 commented 1 month ago

stackoverflow.com/a/56466334

이거 적용해보는게 어떨까요?

@2paperstar bfb68ed (#371) 이 커밋에 한번 적용해봤는데, SSR 때문인지 css classList에 'dark'를 추가하는 것만으론 배경과 일부 컴포넌트의 컬러가 바뀌지 않아요 ㅠㅠ

https://github.com/user-attachments/assets/94ab3aa5-1cf5-41b4-b5f9-fd58189f8b17

2paperstar commented 1 month ago

stackoverflow.com/a/56466334 이거 적용해보는게 어떨까요?

@2paperstar bfb68ed (#371) 이 커밋에 한번 적용해봤는데, SSR 때문인지 css classList에 'dark'를 추가하는 것만으론 배경과 일부 컴포넌트의 컬러가 바뀌지 않아요 ㅠㅠ

Untitled.video.-.Made.with.Clipchamp.1.mp4

그 일부 컴포넌트의 스타일 구현이 잘못된게 아닌가요?

github-actions[bot] commented 1 week ago

Preview URL: https://ziggle-229x6hqkj-2paperstars-projects.vercel.app

enc2586 commented 1 week ago

개발이 늦어지던 중 리팩토링이 완료되어, 바뀐 점이 많습니다. 리팩토링 완료된 코드를 베이스로 재개발합니다.

아래 브랜치를 참조하세요: https://github.com/gsainfoteam/ziggle-fe/tree/368-dark-mode-with-system-option