docs: Document Serok UI design philosophy and values #29
Conversation
새로 추가된 문서: - philosophy.mdx: Serok UI의 설계 철학과 의사결정 배경 - customization.mdx: CSS 커스터마이징 통합 가이드 이 문서들은 Serok UI가 "더하는 가치"에 집중합니다: - Design Philosophy: README의 핵심 철학을 문서 사이트로 이동 - Customization Guide: 분산된 CSS 커스터마이징 내용을 한 곳에 통합 React Spectrum이 이미 잘 해놓은 것은 문서화하지 않고, Serok UI만의 가치(한국어 문서, 복사-붙여넣기 방식, 실용적 예제)를 강조합니다.
Summary of ChangesHello @SimYunSup, I'm Gemini Code Assist1! 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! 이 PR은 Serok UI의 핵심 가치와 사용 편의성을 높이기 위해 두 가지 중요한 문서를 추가합니다. 첫 번째 문서는 Serok UI의 디자인 철학을 명확히 하여, React Spectrum과 같은 검증된 기술을 활용하고 동아리 프로젝트의 현실적인 제약 속에서 효율성을 추구하는 배경을 설명합니다. 두 번째 문서는 Serok UI 컴포넌트의 CSS 커스터마이징에 대한 포괄적인 가이드로, React Spectrum 변수와 Serok UI 고유의 변수를 활용하는 방법, 일반적인 실수 방지, 접근성 고려사항 등을 실용적인 예제와 함께 제시합니다. 이를 통해 사용자들이 Serok UI를 프로젝트에 맞게 효과적으로 활용하고 확장할 수 있도록 돕는 것이 목표입니다. Highlights
Using Gemini Code AssistThe 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 by creating a comment using either
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 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
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
Serok UI의 설계 철학과 CSS 커스터마이징 가이드를 문서화하는 좋은 PR입니다. 문서 내용이 전반적으로 매우 상세하고 명확하여 사용자가 Serok UI의 지향점과 사용법을 이해하는 데 큰 도움이 될 것 같습니다. 특히 philosophy.mdx는 프로젝트의 기술적 선택 배경을 설득력 있게 설명하고 있어 인상적입니다. customization.mdx 파일에서는 몇 가지 개선점을 발견하여 코멘트를 남겼습니다. 주로 문서의 핵심 원칙과 예제 코드 사이의 일관성을 높이는 것에 대한 제안입니다. 전반적으로 훌륭한 문서 추가 작업이라고 생각합니다.
| .serok-tabs { | ||
| /* 선택 표시 색상 변경 */ | ||
| --spectrum-tabs-selection-indicator-color: #10b981; | ||
| } | ||
|
|
||
| .serok-tabs [role="tab"]:hover { | ||
| background-color: #d1fae5; /* 연한 녹색 */ | ||
| color: #059669; | ||
| } | ||
|
|
||
| .serok-tabs [aria-selected="true"] { | ||
| color: #10b981; | ||
| } |
There was a problem hiding this comment.
좋은 예제입니다만, 문서의 기본 원칙 중 하나인 '하드코딩된 색상 사용 지양'과 일치하지 않는 부분이 있습니다. 예제에서 #d1fae5, #059669, #10b981 와 같은 색상 값을 직접 사용하고 있습니다.
이 가이드의 다른 부분에서 권장하는 것처럼, React Spectrum의 시맨틱 변수(예: --spectrum-positive-color-*)나 Serok의 provider 색상 변수(예: --serok-green-*)를 사용하면 문서의 일관성을 높이고 사용자에게 더 좋은 예시를 제공할 수 있습니다.
.serok-tabs {
/* 선택 표시 색상 변경 */
--spectrum-tabs-selection-indicator-color: var(--spectrum-positive-color-700);
}
.serok-tabs [role="tab"]:hover {
background-color: var(--spectrum-positive-color-100); /* 연한 녹색 */
color: var(--spectrum-positive-color-800);
}
.serok-tabs [aria-selected="true"] {
color: var(--spectrum-positive-color-700);
}
| @media (prefers-color-scheme: dark) { | ||
| .serok-button[data-variant="primary"] { | ||
| background: #0ea5e9; | ||
| color: white; | ||
| } | ||
|
|
||
| .serok-button[data-variant="secondary"] { | ||
| background: #475569; | ||
| color: #e2e8f0; | ||
| } | ||
| } |
There was a problem hiding this comment.
다크 모드 예제에서 하드코딩된 색상 값(#0ea5e9, #475569, #e2e8f0)이 사용되었습니다. 이 또한 문서의 전반적인 원칙과 일치하지 않습니다.
--serok-blue-*나 --serok-gray-* 같은 provider 색상 변수를 사용하면 더 일관성 있고 유지보수하기 좋은 코드가 될 것입니다.
다음과 같이 변수를 사용하도록 수정하는 것을 제안합니다.
@media (prefers-color-scheme: dark) {
.serok-button[data-variant="primary"] {
background: var(--serok-blue-700);
color: white;
}
.serok-button[data-variant="secondary"] {
background: var(--serok-gray-700);
color: var(--serok-gray-100);
}
}
| .dark .serok-button[data-variant="primary"] { | ||
| background: #0ea5e9; | ||
| color: white; | ||
| } | ||
|
|
||
| .dark .serok-button[data-variant="secondary"] { | ||
| background: #475569; | ||
| color: #e2e8f0; | ||
| } |
There was a problem hiding this comment.
클래스 기반 다크 모드 예제에서도 하드코딩된 색상 값이 사용되었습니다. 문서의 일관성을 위해 이 부분도 provider 색상 변수를 사용하도록 수정하는 것이 좋습니다.
다음과 같이 변경하는 것을 제안합니다.
.dark .serok-button[data-variant="primary"] {
background: var(--serok-blue-700);
color: white;
}
.dark .serok-button[data-variant="secondary"] {
background: var(--serok-gray-700);
color: var(--serok-gray-100);
}
새로 추가된 문서:
이 문서들은 Serok UI가 "더하는 가치"에 집중합니다:
React Spectrum이 이미 잘 해놓은 것은 문서화하지 않고,
Serok UI만의 가치(한국어 문서, 복사-붙여넣기 방식, 실용적 예제)를 강조합니다.