Chore : css 테일윈드로 마이그레이션 , 크리티컬 css 적용

[manNomi]

관련 이슈

• resolves: #이슈 번호

작업 내용

크리티컬 css 적용

특이 사항

리뷰 요구사항 (선택)

• 실제 성능 측정 테스트 필요

[coderabbitai]

🚀 Walkthrough

이번 풀 리퀘스트는 Critical CSS 처리 방식의 현대화와 CSS 모듈에서 Tailwind로의 마이그레이션을 포괄합니다. 구체적으로는:

1. 의존성 업데이트: critters를 beasties로 변경하고 빌드 스크립트 수정
2. 새로운 scripts/critical-css.js 파일 추가로 Beasties를 이용한 자동화된 Critical CSS 처리
3. src/app/layout.tsx에서 인라인 CSS 대폭 제거 및 타입 강화 (Kakao: any → Kakao: unknown)
4. 여러 점수 검색 및 홈 화면 컴포넌트에서 CSS 모듈을 Tailwind 인라인 클래스로 전환
5. 5개의 CSS 모듈 파일 삭제 및 src/styles/globals.css를 Tailwind 레이어 구조로 재구성

변경사항은 빌드 최적화와 스타일 관리 일관성에 초점을 맞추고 있습니다.

---

🎯 Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~35 minutes

세부 검토 포인트:

• scripts/critical-css.js: 새로운 Beasties 기반 스크립트의 오류 처리 로직, 파일 순회 안정성, 및 예외 상황 대응 확인 필요
• src/app/university/application/ScoreSearchBar.tsx & ScoreSearchField.tsx: CSS 모듈 제거 후 Tailwind 마이그레이션의 완전성 검증 및 UI 일관성 확인
• CSS 모듈 파일 삭제: 5개 파일의 삭제로 인한 참조 누락 확인 (import 제거 여부, 컴포넌트에서의 클래스 매핑 완료 여부)
• src/styles/globals.css: Tailwind 레이어 적용이 기존 스타일 상속에 미치는 영향 및 .score-table 새로운 클래스의 의도 확인
• 타입 변경: Window.Kakao의 any → unknown 변경이 기존 Kakao API 사용부와의 호환성

---

💡 Suggested reviewers

• wibaek

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	설명이 매우 미흡합니다. 주요 작업 내용은 한 줄로만 기술되었고, 관련 이슈 번호가 명시되지 않았으며, 변경사항의 구체적 내용이 거의 없습니다.	관련 이슈 번호를 명시하고, 크리티컬 CSS 적용 과정(Beasties 도입, CSS 모듈 제거, Tailwind 마이그레이션 등), 영향받는 파일 목록, 그리고 성능 테스트 항목을 구체적으로 작성해주세요.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Title check	✅ Passed	The title directly addresses the main changes: CSS 마이그레이션 (Tailwind migration) and 크리티컬 CSS 적용 (critical CSS application), which align with the substantial file modifications and build script updates in the changeset.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (3)

src/styles/globals.css (1)

5-56: 2) Tailwind @layer 구조와 score-table 스타일링이 잘 정리되었습니다.

1. base/components 레이어로 html/body와 .score-table 스타일을 나눠서 전역 스타일 구조가 훨씬 읽기 좋아졌습니다.
2. html에서는 var(--font-pretendard)를, body에서는 다시 system-ui 계열 폰트를 지정해서 실제로는 폰트 클래스가 우선 적용되지만 규칙이 다소 중복되어 보입니다.
3. 나중에 보는 사람이 헷갈리지 않도록, 필요 없다면 body 쪽 font-family를 정리해서 폰트 정의를 한곳으로 모으는 것도 가볍게 고려할 만합니다.

src/app/university/application/ScoreSearchBar.tsx (1)

6-25: 5) ScoreSearchBar 이벤트 흐름이 직관적이지만, onClick 중복 실행만 한 번 체크해 보면 좋겠습니다.

1. 입력창·버튼 스타일을 Tailwind로 옮긴 부분은 구조가 단순하고 기존 디자인 의도도 잘 유지되고 있습니다.
2. 다만 form에 onClick과 onSubmit이 모두 걸려 있어서 버튼 클릭이나 Enter 입력 시 onClick과 searchHandler가 같이 실행될 수 있습니다.
3. 기존에도 같은 패턴이었다면 그대로 두셔도 되지만, onClick에서 상태 변경이나 네비게이션을 한다면 중복 호출이 아닌지 실제 화면에서 한 번만 확인해 주세요.
4. 만약 중복이 문제라면 검색 트리거를 onSubmit=searchHandler 한 군데에서만 처리하도록 단순화하는 것도 선택지입니다.

scripts/critical-css.js (1)

1-68: 6) Beasties 기반 크리티컬 CSS 스크립트 구조가 명확하고 견고합니다.

1. NEXT_BUILD_DIR와 SERVER_APP_DIR 상수, 그리고 재귀적인 findHtmlFiles로 .next/server/app 이하 HTML을 모아 오는 흐름이 단순하면서도 디렉터리가 없을 때는 경고만 남기고 조용히 빠져나와서 안전합니다.
2. Beasties 인스턴스를 한 번만 생성해 각 HTML에 beasties.process(html)를 적용하는 패턴은 공식 README에서 제시하는 사용 예와도 잘 맞습니다. (npmjs.com)
3. path: NEXT_BUILD_DIR와 publicPath: "/_next/" 조합 덕분에 /_next/static/...에 있는 Next 빌드 CSS 파일들을 올바르게 찾아갈 수 있어, 기존 critters 기반 워크플로우를 자연스럽게 대체할 수 있을 것 같습니다. (npmjs.com)
4. 파일 단위 try/catch로 개별 HTML 처리 실패는 로그만 남기고 계속 진행하고, 최상위에서만 치명적인 예외를 process.exit(1)로 처리하는 구조라 빌드 안정성 면에서도 합리적입니다.
5. 다만 현재는 .next/server/app 하위 HTML만 대상으로 하기 때문에, 나중에 next export나 다른 출력 디렉터리를 병행하게 되면 해당 경로도 추가로 탐색하도록 확장할 여지는 있습니다.
6. 빌드 시간이 많이 민감하지 않다면 fs.readFileSync/fs.writeFileSync를 fs.promises 기반 비동기 I/O로 바꿔 보는 것도 소소한 개선 포인트입니다.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 57e2592 and 3cd8140.

📒 Files selected for processing (17)

• package.json (2 hunks)
• scripts/critical-css.js (1 hunks)
• src/app/layout.tsx (2 hunks)
• src/app/university/application/ScoreSearchBar.tsx (1 hunks)
• src/app/university/application/ScoreSearchField.tsx (1 hunks)
• src/app/university/application/score-search-bar.module.css (0 hunks)
• src/app/university/application/score-search-field.module.css (0 hunks)
• src/app/university/score/score-search-bar.module.css (0 hunks)
• src/app/university/score/score-search-field.module.css (0 hunks)
• src/app/university/score/score-sheets.module.css (0 hunks)
• src/components/home/NewsCards.tsx (0 hunks)
• src/components/home/search/home-search.module.css (0 hunks)
• src/components/home/search/search-input-interest.module.css (0 hunks)
• src/components/home/search/search-input-test.module.css (0 hunks)
• src/components/home/search/search-test-tab.module.css (0 hunks)
• src/components/login/signup/signup.module.css (0 hunks)
• src/styles/globals.css (1 hunks)

💤 Files with no reviewable changes (11)

• src/components/home/search/search-input-test.module.css
• src/components/home/search/home-search.module.css
• src/components/home/NewsCards.tsx
• src/components/home/search/search-test-tab.module.css
• src/components/login/signup/signup.module.css
• src/app/university/application/score-search-bar.module.css
• src/app/university/score/score-sheets.module.css
• src/app/university/score/score-search-field.module.css
• src/app/university/score/score-search-bar.module.css
• src/app/university/application/score-search-field.module.css
• src/components/home/search/search-input-interest.module.css

🧰 Additional context used

🧠 Learnings (1)

📓 Common learnings

Learnt from: manNomi
Repo: solid-connection/solid-connect-web PR: 242
File: src/components/ui/TabSelector.tsx:10-11
Timestamp: 2025-08-12T09:41:44.182Z
Learning: manNomi prefers to keep reusable UI components simple and focused on core functionality rather than adding many features. They don't want to over-engineer flexible/reusable UI components at the initial stage.

Learnt from: manNomi
Repo: solid-connection/solid-connect-web PR: 245
File: src/components/mentor/MentorChatCard/index.tsx:17-21
Timestamp: 2025-08-24T11:14:34.297Z
Learning: manNomi prefers not to receive accessibility suggestions or recommendations during code reviews.

Learnt from: manNomi
Repo: solid-connection/solid-connect-web PR: 245
File: src/api/auth/client/usePostLogout.ts:17-33
Timestamp: 2025-08-24T11:13:08.477Z
Learning: manNomi prefers to prioritize user experience over perfect state consistency in auth flows. Specifically, in logout scenarios, they prefer to keep tokens intact on API failure to avoid forcing users to re-login, even if it means temporary UI state inconsistency.

Learnt from: manNomi
Repo: solid-connection/solid-connect-web PR: 245
File: src/api/auth/client/useDeleteUserAccount.ts:17-27
Timestamp: 2025-08-24T11:11:40.758Z
Learning: manNomi prefers optimistic navigation in auth-related flows (like account deletion) to prevent race conditions where token clearing before navigation could cause intermediate redirects to login page due to pending async requests failing.

Learnt from: manNomi
Repo: solid-connection/solid-connect-web PR: 242
File: src/types/mentor.ts:70-73
Timestamp: 2025-08-12T04:07:04.134Z
Learning: manNomi prefers using Korean labels directly in enum values (e.g., MentorTab.MY_MENTEE = "나의 멘티") over separating enum keys from UI labels for efficiency and intuitiveness, considering scalability concerns as excessive for their current project needs.

🔇 Additional comments (3)

package.json (1)

10-31: 1) 빌드 스크립트와 Beasties 의존성 추가가 잘 맞물려 있습니다.

1. "next build && node scripts/critical-css.js"로 Next 빌드 직후 크리티컬 CSS까지 한 번에 처리돼서 플로우가 단순합니다.
2. scripts/critical-css.js에서 Beasties를 직접 사용하므로 dependencies에 beasties를 추가한 것도 일관된 설정입니다.
3. CI·배포 환경에서 이 빌드 스크립트가 문제 없이 돌아가는지만 실제 빌드 한 번으로 확인해 주시면 좋겠습니다.

src/app/university/application/ScoreSearchField.tsx (1)

3-16: 3) ScoreSearchField의 Tailwind 마이그레이션과 동작이 자연스럽습니다.

1. keyWords를 버튼으로 렌더링하고 onClick에서 setKeyWord(keyWord)를 호출하는 흐름이 직관적이고 기존 UX를 잘 유지합니다.
2. 버튼에 type="button"을 명시해서 상위 폼 submit과 섞이지 않도록 한 점도 좋습니다.
3. setKeyWord 파라미터명을 _keyWord로 바꾼 것은 타입 선언상의 이름만 달라진 것이라, 외부 API를 깨지 않으면서 의도도 충분히 전달됩니다.

src/app/layout.tsx (1)

22-45: 4) RootLayout의 폰트 설정과 Window.Kakao 타입 강화가 깔끔합니다.

1. localFont에 display: "swap"을 명시해서 초기 로딩 시 폰트 플래시를 줄이고, preload 링크와도 잘 어울리는 설정입니다.
2. Window.Kakao를 더 좁은 타입(unknown)으로 선언해 두면 실제 사용하는 쪽에서 타입 가드를 강제할 수 있어 런타임 안전성이 올라갑니다.
3. head에 있던 인라인 CSS를 걷어내고 전역 스타일·빌드 타임 크리티컬 CSS로 넘긴 구조도 이번 PR의 목표와 잘 맞습니다.