refactor: components/study 내 컴포넌트 파일에 불필요한 tailwind css 대치#120
refactor: components/study 내 컴포넌트 파일에 불필요한 tailwind css 대치#120KwonDeaGeun merged 6 commits intodevelopfrom
Conversation
There was a problem hiding this comment.
Pull request overview
components/study 영역에서 인라인 Tailwind 유틸리티를 분리해, 재사용 가능한 컴포넌트 스타일 CSS로 옮기는 리팩터링입니다.
Changes:
StudyConfirmationDialog/StudyFormContent의 버튼/레이아웃 스타일을study-dialog.css로 분리ApplicationCard및 내부 Dialog 스타일을application-card.css로 분리- 전역
src/index.css에서 신규 컴포넌트 CSS 파일들을 import 하도록 연결
Reviewed changes
Copilot reviewed 6 out of 7 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| src/styles/components/study-dialog.css | 스터디 다이얼로그/폼 관련 공통 클래스 추가 |
| src/styles/components/application-card.css | 지원서 카드 및 지원서 보기 다이얼로그 관련 클래스 추가 |
| src/index.css | 신규 컴포넌트 CSS import 추가 및 포맷팅 정리 |
| src/components/study/StudyFormContent.tsx | 인라인 Tailwind → 추출된 클래스 적용 |
| src/components/study/StudyConfirmationDialog.tsx | 인라인 Tailwind → 추출된 클래스 적용 |
| src/components/study/ApplicationCard.tsx | 인라인 Tailwind → 추출된 클래스 적용 |
| package-lock.json | lockfile 일부 변경 |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
Warning Rate limit exceeded
⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. Walkthrough스터디 신청서 카드와 관련 다이얼로그·폼 컴포넌트의 마크업과 클래스명이 재구성되고, 상태 배지와 다이얼로그의 로딩/에러 UI가 CSS 기반 스타일로 전환되었습니다. 새로운 Tailwind 기반 CSS 모듈 두 개가 추가되어 스타일이 분리되었습니다. Changes
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. 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}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In `@src/components/study/ApplicationCard.tsx`:
- Around line 88-97: The phone row in ApplicationCard uses inline Tailwind
classes instead of the component's CSS module; update the phone markup in the
ApplicationCard component to use the same CSS module classes as the student
number row (e.g., replace the div with className="mt-1 flex items-center
text-gray-500 text-sm" and the phone icon span with module classes) so it uses
application-contact-info and application-contact-icon (or the appropriate module
class names) consistent with application-name and the 학번 row.
- Around line 41-42: The handler handleLoadApplicationText is re-requesting when
the API returns an empty string because applicationReason is initialized to ""
and the guard uses truthiness; change applicationReason's initial state to null
and update the guard to check specifically for null (e.g., if (applicationReason
!== null) return) so an empty string from the API won't trigger repeated
fetches, and update the Textarea's value binding to safely display an empty
string when applicationReason is null/undefined (e.g., use the value expression
that falls back to "" when applicationReason is null).
🧹 Nitpick comments (4)
src/styles/components/study-dialog.css (1)
36-86: 버튼 스타일의 공통 속성을 추출하여 중복을 줄이세요.
dialog-btn-cancel,dialog-btn-confirm,form-btn-cancel,form-btn-submit네 클래스가position: relative,min-width: 120px,overflow: hidden,transition-property를 동일하게 반복하고 있습니다. 공통 베이스 클래스를 만들면 유지보수성이 향상됩니다.또한,
rgb(37 99 235),rgb(229 231 235)등 하드코딩된 색상값 대신 Tailwind 테마 변수나 디자인 토큰을 사용하는 것이 디자인 시스템 일관성에 좋습니다.♻️ 공통 속성 추출 예시
+ .dialog-btn-base { + position: relative; + min-width: 120px; + overflow: hidden; + transition-property: color, background-color, border-color; + } + .dialog-btn-cancel { - position: relative; - min-width: 120px; - overflow: hidden; - transition-property: color, background-color, border-color; background-color: rgb(229 231 235); color: rgb(55 65 81); }이후 JSX에서
dialog-btn-base dialog-btn-cancel형태로 조합하거나,@layer components에서 공통 클래스를 정의할 수 있습니다.src/styles/components/application-card.css (2)
50-52:.dialog-content클래스명이 너무 일반적입니다.
.dialog-content는 Radix Dialog의 내부 요소나 다른 다이얼로그 컴포넌트와 이름이 충돌할 가능성이 있습니다.application-dialog-content와 같이 컴포넌트 스코프를 반영한 네이밍을 권장합니다.dialog-info-box,dialog-info-row등 다른dialog-접두사 클래스들도 마찬가지입니다.
101-103:sm:max-w-2xl이max-w-2xl과 동일하여 중복입니다..dialog-max-width { - `@apply` max-w-2xl sm:max-w-2xl; + `@apply` max-w-2xl; }src/components/study/ApplicationCard.tsx (1)
100-102: Line 100에도 인라인 Tailwind가 남아있습니다.
flex items-center space-x-3가 CSS 모듈 클래스로 추출되지 않았습니다. PR 목적에 맞게 별도 클래스로 정의하는 것을 고려하세요.
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@src/components/study/ApplicationCard.tsx`:
- Around line 100-102: The inline Tailwind classes "flex items-center space-x-3"
in ApplicationCard.tsx should be moved to a CSS module to match the PR goal; add
a new class (e.g., .application-status-section) to application-card.css that
applies those Tailwind utilities (e.g., using `@apply` flex items-center
space-x-3) and then replace the div wrapper around
getStatusBadge(application.status) in ApplicationCard.tsx to use the new CSS
module class instead of the inline string; ensure imports of the CSS module
remain correct so getStatusBadge rendering is unchanged.
Summary by CodeRabbit
업데이트 사항
스타일
리팩터