[feat] 웹 UI 크기 조정#327
Merged
Hidden character warning
The head ref may contain hidden characters: "326-feat-\uc6f9-ui-\ud06c\uae30-\uc870\uc815"
Merged
Conversation
Contributor
Walkthrough이 PR은 웹 애플리케이션의 UI 크기 및 간격을 정리하는 스타일링 작업과 누락된 클럽 카테고리 값을 보완합니다. 먼저 CLUB_CATEGORY에 SOCIAL_SERVICE, EXHIBITION_CREATION, ETC 항목을 추가하고 해당 색상 매핑을 정의합니다. 로고 네비게이션을 react-router-dom의 Link로 전환하고, 홈, 대학별 동아리 목록, 동아리 상세 페이지 전반의 Tailwind 클래스를 조정하여 텍스트 크기, 간격, 반응형 레이아웃을 개선합니다. ClubDetail의 표시 필드를 description에서 topic으로 변경합니다. 관련 가능성 있는 PR
🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
🧹 Nitpick comments (5)
apps/web/src/constants/club.ts (1)
10-10: ⚡ Quick win인라인 색상 대신 디자인 토큰 사용 권장.
text-[#7c3aed]는 임의 값(arbitrary value)입니다.@konect/design-tokens의 토큰을 우선 사용해주세요. (기존PERFORMANCE의text-[#cd3bf6]도 동일 케이스라 함께 정리하면 좋습니다.)As per coding guidelines: "Use CSS export from
@konect/design-tokensfor design tokens, prioritized over inline values".🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/web/src/constants/club.ts` at line 10, The mapping for CLUB_CATEGORY.EXHIBITION_CREATION (and the similar PERFORMANCE entry) uses an arbitrary inline color string 'text-[`#7c3aed`]' which violates the design-token rule; replace these inline classes with the corresponding CSS export from `@konect/design-tokens` (import the token and use its class/name instead of the hex arbitrary value) and update the club category map entries (e.g., the values for CLUB_CATEGORY.EXHIBITION_CREATION and CLUB_CATEGORY.PERFORMANCE) to reference the design token constants.apps/web/src/components/UniversityClubSidebar/index.tsx (2)
17-17: 💤 Low value디자인 토큰 확인 권장
sm:rounded-[20px]와 같은 임의 값 사용 전에@konect/design-tokens에서 해당 border-radius 값이 정의되어 있는지 확인하세요. 디자인 시스템에 정의된 값을 사용하면 일관성이 유지됩니다.As per coding guidelines: Use CSS export from
@konect/design-tokensfor design tokens, prioritized over inline valuesAlso applies to: 27-27
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/web/src/components/UniversityClubSidebar/index.tsx` at line 17, The section in UniversityClubSidebar uses an arbitrary rounded value ("sm:rounded-[20px]") — verify `@konect/design-tokens` for the appropriate border-radius token and replace the inline value with the design-token export (import the CSS/token from `@konect/design-tokens` and apply that token for the small-breakpoint rounded style); update both occurrences (the className on the <section> and the other instance noted) so the component uses the canonical token instead of a hardcoded value.
22-22: 💤 Low value디자인 토큰의 커스텀 타이포그래피 확인 권장
text-[13px]는 Tailwind 기본 스케일에 없는 값입니다.@konect/design-tokens에 커스텀 타이포그래피 유틸리티가 정의되어 있다면 해당 시맨틱 클래스를 사용하는 것이 좋습니다.As per coding guidelines: Use CSS export from
@konect/design-tokensfor design tokens, prioritized over inline values; Prioritize semantic typography utilities (e.g.,text-h1,text-body1) over generic utilities🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/web/src/components/UniversityClubSidebar/index.tsx` at line 22, The p element in UniversityClubSidebar uses a hardcoded utility class text-[13px] which bypasses our design tokens; replace this with the semantic typography utility from `@konect/design-tokens` (import the package's CSS export/utility classes) and apply the appropriate semantic class (e.g., text-bodyX or text-small as defined by the token set) to the element rendering {clubCount}개 동아리, removing the inline size utility so the component uses the canonical design-token typography.apps/web/src/components/Breadcrumb/index.tsx (1)
17-17: ⚡ Quick win임의 값 대신 시맨틱 타이포그래피 유틸리티 사용 권장
sm:text-[16px]대신sm:text-base를 사용하는 것이 좋습니다. Tailwind의 기본 스케일에서text-base는 16px이며, 코딩 가이드라인에서 시맨틱 유틸리티를 우선 권장합니다.♻️ 권장 수정
- className="text-text-400 flex items-center gap-3 text-sm leading-8 font-semibold sm:gap-3.5 sm:text-[16px] sm:leading-10" + className="text-text-400 flex items-center gap-3 text-sm leading-8 font-semibold sm:gap-3.5 sm:text-base sm:leading-10"As per coding guidelines: Use workspace package imports with
@konect/*naming; Prioritize semantic typography utilities (e.g.,text-h1,text-body1) over generic utilities🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/web/src/components/Breadcrumb/index.tsx` at line 17, Replace the arbitrary utility sm:text-[16px] in the Breadcrumb component's className with the semantic Tailwind utility sm:text-base (or, if your design system defines semantic tokens, use the appropriate semantic class such as text-body1/text-base) inside the Breadcrumb component (look for the className string in index.tsx); also ensure any local imports follow workspace package naming conventions (use `@konect/`* where applicable) when updating related style tokens.apps/web/src/components/RecentClubCard/index.tsx (1)
19-20: ⚡ Quick win임의 값 대신 시맨틱 타이포그래피 유틸리티 사용 권장
text-[14px]는text-sm으로,text-[12px]는text-xs로 대체할 수 있습니다. Tailwind 기본 스케일의 시맨틱 유틸리티를 사용하면 일관성과 유지보수성이 향상됩니다.♻️ 권장 수정
- <span className="block truncate text-[14px] leading-10 font-semibold text-black">{club.name}</span> - <span className="flex min-w-0 items-center gap-2 text-[12px] leading-6"> + <span className="block truncate text-sm leading-10 font-semibold text-black">{club.name}</span> + <span className="flex min-w-0 items-center gap-2 text-xs leading-6">As per coding guidelines: Prioritize semantic typography utilities (e.g.,
text-h1,text-body1) over generic utilities🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/web/src/components/RecentClubCard/index.tsx` around lines 19 - 20, Replace the arbitrary pixel classes in the RecentClubCard component: change the span rendering the club name (the element containing {club.name}) to use Tailwind semantic utility text-sm instead of text-[14px], and change the metadata/info span (the second span with gap-2) to use text-xs instead of text-[12px]; update those className values in the RecentClubCard JSX so the component uses semantic typography utilities rather than hard-coded pixel classes.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@apps/web/src/components/Breadcrumb/index.tsx`:
- Line 17: Replace the arbitrary utility sm:text-[16px] in the Breadcrumb
component's className with the semantic Tailwind utility sm:text-base (or, if
your design system defines semantic tokens, use the appropriate semantic class
such as text-body1/text-base) inside the Breadcrumb component (look for the
className string in index.tsx); also ensure any local imports follow workspace
package naming conventions (use `@konect/`* where applicable) when updating
related style tokens.
In `@apps/web/src/components/RecentClubCard/index.tsx`:
- Around line 19-20: Replace the arbitrary pixel classes in the RecentClubCard
component: change the span rendering the club name (the element containing
{club.name}) to use Tailwind semantic utility text-sm instead of text-[14px],
and change the metadata/info span (the second span with gap-2) to use text-xs
instead of text-[12px]; update those className values in the RecentClubCard JSX
so the component uses semantic typography utilities rather than hard-coded pixel
classes.
In `@apps/web/src/components/UniversityClubSidebar/index.tsx`:
- Line 17: The section in UniversityClubSidebar uses an arbitrary rounded value
("sm:rounded-[20px]") — verify `@konect/design-tokens` for the appropriate
border-radius token and replace the inline value with the design-token export
(import the CSS/token from `@konect/design-tokens` and apply that token for the
small-breakpoint rounded style); update both occurrences (the className on the
<section> and the other instance noted) so the component uses the canonical
token instead of a hardcoded value.
- Line 22: The p element in UniversityClubSidebar uses a hardcoded utility class
text-[13px] which bypasses our design tokens; replace this with the semantic
typography utility from `@konect/design-tokens` (import the package's CSS
export/utility classes) and apply the appropriate semantic class (e.g.,
text-bodyX or text-small as defined by the token set) to the element rendering
{clubCount}개 동아리, removing the inline size utility so the component uses the
canonical design-token typography.
In `@apps/web/src/constants/club.ts`:
- Line 10: The mapping for CLUB_CATEGORY.EXHIBITION_CREATION (and the similar
PERFORMANCE entry) uses an arbitrary inline color string 'text-[`#7c3aed`]' which
violates the design-token rule; replace these inline classes with the
corresponding CSS export from `@konect/design-tokens` (import the token and use
its class/name instead of the hex arbitrary value) and update the club category
map entries (e.g., the values for CLUB_CATEGORY.EXHIBITION_CREATION and
CLUB_CATEGORY.PERFORMANCE) to reference the design token constants.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: db895994-8b4f-4d3f-a8e9-a4f841f53565
📒 Files selected for processing (9)
apps/web/src/apis/common/club.tsapps/web/src/components/Breadcrumb/index.tsxapps/web/src/components/RecentClubCard/index.tsxapps/web/src/components/UniversityClubSidebar/index.tsxapps/web/src/constants/club.tsapps/web/src/layout/Header/index.tsxapps/web/src/pages/ClubDetail/index.tsxapps/web/src/pages/Home/index.tsxapps/web/src/pages/UniversityClubList/index.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
✨ 요약
😎 해결한 이슈
Summary by CodeRabbit
릴리스 노트
새로운 기능
스타일 개선