feat: 스카이스캐너형 데스크톱 레이아웃 적용

[manNomi]

관련 이슈

• stacked on: feat: 데스크톱 최적화 레이아웃 적용 #576

작업 내용

• Oh My Design을 설치하고 Skyscanner를 레이아웃 참고 기준으로만 명시한 DESIGN.md와 동기화 설정을 추가했습니다.
• Solid Connection의 기존 색상, Pretendard 서체, 아이콘, 컴포넌트 스타일은 유지한 채 web과 university-web의 데스크톱 내비게이션을 동일한 상단형 구조로 전환했습니다.
• 홈, 마이, 멘토, 커뮤니티, 지원자 현황, 성적 입력 등 apps/web의 전체 사용자 화면을 1280px 중심 레이아웃과 작업별 보조 패널 구조로 정리했습니다.
• 대학 선택, 인하대·경희대 목록, 일반·소속학교 검색, 대학 상세 등 apps/university-web의 모든 페이지 템플릿에도 같은 1280px 작업 무대와 고정 보조 패널 간격을 적용했습니다.
• 대학 지원 상세 화면에 데스크톱 전용 정보·지원자·요약 레이아웃을 추가하고 기존 모바일 UI는 그대로 유지했습니다.
• 중복된 멘토 채널 데이터에서 발생하던 React key 경고를 제거했습니다.

Web 데스크톱 전체 화면

Web 모바일 회귀 검수

University 데스크톱 전체 템플릿

University 모바일 회귀 검수

특이 사항

• 이 PR은 기존 데스크톱 POC PR feat: 데스크톱 최적화 레이아웃 적용 #576 위에 쌓인 스택 PR입니다. 병합 순서는 feat: 데스크톱 최적화 레이아웃 적용 #576 이후입니다.
• Oh My Design의 대용량 로컬 스킬 카탈로그는 저장소에 커밋하지 않고, 디자인 계약과 에이전트 동기화 파일만 포함했습니다.
• 가상화된 대학 목록은 full-page 타일링 시 중복 캡처 아티팩트가 생겨 실제 1440x1000 viewport 이미지로 검수했습니다.
• 테스트 계정에 해당 학교 지원 데이터가 없어 지원 상세의 성공 상태는 API 데이터로 재현하지 못했고, not-found 상태와 레이아웃 분기까지 검수했습니다.

검증

• pnpm --filter @solid-connect/web run ci:check
• pnpm --filter @solid-connect/university-web run ci:check
• web 프로덕션 빌드: 36/36 페이지 생성
• university-web 프로덕션 빌드: 186/186 페이지 생성
• Playwright web: 데스크톱 36개 route state (1440x1000), 모바일 3개 route state (390x844)
• Playwright university: 데스크톱 8개 route state로 전체 5개 페이지 템플릿 검수, 모바일 5개 route state로 전체 템플릿 회귀 검수
• 모든 캡처에서 가로 오버플로 0, 깨진 이미지 0
• university 모바일 5개 상태에서 데스크톱 내비게이션 미노출 및 기존 하단 내비게이션 유지
• 브라우저 콘솔 오류 재검수 완료

리뷰 요구사항 (선택)

• Skyscanner의 시각 요소가 아닌 정보 구조만 참고했고 Solid Connection의 색상·타이포·컴포넌트가 두 앱에서 유지됐는지 확인 부탁드립니다.
• web과 university-web 사이의 상단 내비게이션, 1280px 콘텐츠 폭, 고정 보조 패널 사용성이 일관적인지 중점 확인 부탁드립니다.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
solid-connect-university-web	Ready	Preview, Comment	Jul 14, 2026 4:18am
solid-connect-web-admin	Ready	Preview, Comment	Jul 14, 2026 4:18am
solid-connection-web	Ready	Preview, Comment	Jul 14, 2026 4:18am

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: aa57d12e-0e01-4350-8e69-f8d215dcea0c

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/skyscanner-layout-poc

---

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.}

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 745dd7a421

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[chatgpt-codex-connector]

Add anchor offset for sticky desktop nav

With this new 72px sticky desktop header, in-page anchors can now land underneath the nav. For example, the desktop Terms TOC links to sections that still only use scroll-mt-8 in TermsSectionList, so clicking a 목차 item positions the section title inside the header area instead of below it. Please add a desktop scroll margin/offset that accounts for the new header height.

Useful? React with 👍 / 👎.