Refactor/home universitylist#218
Merged
manNomi merged 3 commits intosolid-connection:mainfrom Aug 3, 2025
Merged
Conversation
|
Caution Review failedThe pull request is closed. Walkthrough
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20분
Suggested reviewers
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (8)
✨ Finishing Touches
🧪 Generate unit tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. 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)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
src/api/university/server/getSearchUniversityList.ts (1)
19-19: 주석 업데이트가 필요합니다.코드는 올바르게 변경되었지만, 주석에서 여전히 이전 경로를 참조하고 있습니다.
다음과 같이 주석을 업데이트해주세요:
- * - 기본 경로: /univ-apply-infos/search + * - 기본 경로: /universities/searchsrc/app/_home/_ui/NewsSection/index.tsx (1)
11-11: 불필요한 async 키워드를 제거해주세요컴포넌트 내에서
await를 사용하지 않으므로async키워드가 필요하지 않습니다.다음과 같이 수정해주세요:
-const NewsSection = async ({ newsList }: NewsSectionProps) => ( +const NewsSection = ({ newsList }: NewsSectionProps) => (
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (9)
src/api/university/client/useGetRecommendedUniversity.ts(1 hunks)src/api/university/server/getRecommendedUniversity.ts(1 hunks)src/api/university/server/getSearchUniversityList.ts(1 hunks)src/app/_home/_ui/NewsSection/index.tsx(1 hunks)src/app/_home/_ui/NewsSection/skeleton/index.tsx(1 hunks)src/app/_home/_ui/UniversityList/index.tsx(1 hunks)src/app/_home/index.tsx(2 hunks)src/components/university/UniversityCards/skeleton/index.tsx(1 hunks)src/utils/serverFetchUtil.ts(1 hunks)
🧰 Additional context used
🧠 Learnings (1)
📓 Common learnings
Learnt from: manNomi
PR: solid-connection/solid-connect-web#206
File: src/app/page.tsx:54-78
Timestamp: 2025-08-02T11:39:34.468Z
Learning: manNomi는 Next.js의 서버/클라이언트 컴포넌트와 Script 컴포넌트 동작 방식에 대해 처음 접하는 개념이었지만, 설명을 듣고 빠르게 이해하고 올바르게 구현했습니다. 새로운 기술적 개념을 학습하는 것에 열린 자세를 보입니다.
Learnt from: manNomi
PR: solid-connection/solid-connect-web#195
File: src/app/mento/_components/MentorPageTabs/_components/MentorDropDown/index.tsx:21-31
Timestamp: 2025-07-20T09:46:19.818Z
Learning: In TypeScript projects, manNomi prefers simpler solutions over complex type safety measures when the added complexity outweighs the benefits, especially for controlled components with statically defined enum values.
🧬 Code Graph Analysis (1)
src/app/_home/_ui/NewsSection/index.tsx (2)
src/types/news.ts (1)
News(1-7)public/svgs/index.ts (1)
IconSpeaker(50-50)
🔇 Additional comments (10)
src/utils/serverFetchUtil.ts (1)
118-118: 프로덕션 API 엔드포인트 정상 동작 확인프로덕션 API 엔드포인트의 정상 동작이 확인되었습니다.
아래 변경 사항 및 테스트 결과를 참고해주세요.
- 변경 내역 확인:
- BASE URL이 스테이징(https://www.stage.solid-connection.com)에서 프로덕션(https://api.solid-connection.com)으로 업데이트되었습니다.
- 가용성 테스트 결과:
- /universities/recommend → 200 OK
- /universities/search → 200 OK
- 추가 확인 사항:
- 환경 변수(.env 등)에 새로운 BASE URL이 반영되었는지 최종 확인 부탁드립니다.
위 사항이 모두 반영되면 배포 준비가 완료됩니다.
src/components/university/UniversityCards/skeleton/index.tsx (1)
1-44: 훌륭한 스켈레톤 컴포넌트 구현입니다!다음과 같은 좋은 설계 원칙들이 잘 적용되었습니다:
- 성능 최적화:
animate-pulse를 사용한 부드러운 로딩 애니메이션- 유연성:
count,style,className프롭으로 재사용성 확보- 레이아웃 안정성: 실제 카드와 동일한 높이(91px)로 CLS 방지
- 시각적 일관성: 썸네일, 텍스트 라인, 화살표 영역이 실제 컴포넌트 구조와 일치
PR 목표인 LCP 개선과 CLS 방지에 정확히 부합하는 구현입니다.
src/api/university/client/useGetRecommendedUniversity.ts (1)
12-12: API 엔드포인트 변경이 일관성 있게 적용되었습니다.클라이언트 사이드 API 호출이 새로운
/universities/recommend엔드포인트로 올바르게 업데이트되었습니다. 다른 API 파일들과의 일관성을 유지하고 있어 좋습니다.src/api/university/server/getSearchUniversityList.ts (1)
23-23: API 엔드포인트 변경이 올바르게 적용되었습니다.서버 사이드 검색 API가 새로운
/universities/search엔드포인트로 정확히 업데이트되었습니다.src/api/university/server/getRecommendedUniversity.ts (1)
6-6: API 엔드포인트 구조 개선이 완료되었습니다.서버 사이드 추천 대학 API가 새로운
/universities/recommend엔드포인트로 업데이트되어, 전체 대학 관련 API의 일관성 있는 구조 개선이 완료되었습니다.src/app/_home/_ui/UniversityList/index.tsx (1)
18-21: 동적 임포트 구현이 완벽합니다! 🚀
- 성능 최적화:
ssr: false설정으로 초기 LCP 후보에서 제외하여 페이지 로드 성능이 향상됩니다- 로딩 상태 관리:
UniversityCardsSkeleton을 통해 CLS를 방지하고 시각적 안정성을 보장합니다- 코드 분할: 컴포넌트를 동적으로 로드하여 번들 크기를 최적화합니다
PR 목표와 완벽하게 일치하는 구현입니다.
src/app/_home/_ui/NewsSection/skeleton/index.tsx (1)
1-12: 스켈레톤 컴포넌트 구현이 훌륭합니다! ✨
- CLS 방지: 고정된 높이(
h-[100px])로 레이아웃 시프트를 완전히 방지합니다- 일관된 디자인:
bg-k-50과animate-pulse로 프로젝트의 디자인 시스템과 일치합니다- 구조적 일치: 실제 뉴스 섹션의 구조(제목 + 3개 아이템)와 정확히 매칭됩니다
로딩 상태에서 사용자 경험을 크게 개선하는 구현입니다.
src/app/_home/index.tsx (2)
14-17: 모듈화와 성능 최적화가 완벽하게 구현되었습니다! 🎯
- 관심사 분리: 뉴스 렌더링 로직을 별도 컴포넌트로 추출하여 코드 가독성이 향상되었습니다
- 일관된 패턴: UniversityCards와 동일한 동적 임포트 패턴을 적용하여 일관성을 유지합니다
- 성능 향상: SSR 비활성화로 초기 로드 성능이 개선됩니다
기존 인라인 렌더링에서 모듈화된 컴포넌트로의 전환이 매우 깔끔합니다.
83-83: 컴포넌트 사용이 간결하고 명확합니다! 👍복잡한 인라인 렌더링 로직이 단순한 컴포넌트 호출로 대체되어 코드가 훨씬 읽기 쉬워졌습니다.
src/app/_home/_ui/NewsSection/index.tsx (1)
18-38: 뉴스 렌더링 로직이 훌륭하게 구현되었습니다! 🌟
- 보안 처리:
target="_blank"와rel="noreferrer"로 외부 링크 보안이 적절히 처리되었습니다- 이미지 최적화:
loading="lazy"로 네트워크 리소스를 절약합니다- 접근성: 이미지
alt속성에 뉴스 제목을 사용하여 접근성을 향상시켰습니다- 타입 안전성:
News타입을 올바르게 사용하여 타입 안전성을 보장합니다깔끔하고 효율적인 뉴스 섹션 구현입니다.
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.
관련 이슈
resolves: #이슈번호
작업 내용
NewsSection 컴포넌트를
dynamic()으로 코드 스플리팅하여 렌더 타이밍 조절SSR 미적용(
ssr: false)을 통해 초기 LCP 후보에서 제외고정 높이 Skeleton을 사용해 CLS 방지
특이 사항
IntersectionObserver기반 렌더링까지 고려할 수 있습니다.