feat: 데스크톱 최적화 레이아웃 적용#576
Open
manNomi wants to merge 21 commits into
Open
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
2 Skipped Deployments
|
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
WalkthroughEstimated code review effort🎯 5 (Critical) | ⏱️ ~120 minutes 🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 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 |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 50190331ae
ℹ️ 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".
|
|
||
| <div className="fixed bottom-0 left-0 right-0 w-full bg-white pb-14"> | ||
| <div className="mx-auto w-full max-w-app px-5"> | ||
| <div className="mx-auto w-full max-w-app px-5 md:max-w-none"> |
There was a problem hiding this comment.
On md+ this footer still uses the full-viewport left-0 right-0 wrapper, but this change removes the 600px cap, so the CTA starts at x=0 and sits underneath the fixed 88px desktop rail (z-40). Unlike the other bottom bars in this commit that add md:left-[88px] md:w-[calc(100%-88px)], the mentor application steps will have the left side of the button obscured/misaligned on desktop; shift the wrapper to the content area before expanding it.
Useful? React with 👍 / 👎.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 6
🤖 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.
Inline comments:
In
`@apps/university-web/src/app/university/`[homeUniversity]/[id]/_ui/UniversityDetail/index.tsx:
- Line 23: The fallback background in UniversityDetail should be made darker to
preserve readability for the white overlay UI. Update the placeholder styling in
UniversityDetail/index.tsx where the background container is defined, replacing
the current bg-blue-100 with a dark neutral or gradient-based fallback that
matches the university background image guideline and keeps overlaid text
legible during loading/fallback states.
In `@apps/web/src/app/`(home)/_ui/PopularUniversitySection/index.tsx:
- Around line 33-34: The md skeleton in PopularUniversitySection does not match
the loaded card height, causing layout shift on desktop. Update the loading
placeholder in the same component so its md height matches the actual card
height used after load (the h-40 card), keeping the existing width and styling
consistent to reduce CLS.
In
`@apps/web/src/app/my/apply-mentor/_components/InterestCountriesScreen/index.tsx`:
- Line 133: The fixed CTA wrapper in InterestCountriesScreen is missing the
desktop offset, so on md+ it can slide under the left rail; update the
sticky/fixed container alongside the max-w change so it applies the same 88px
left offset at desktop sizes. Use the existing wrapper in
InterestCountriesScreen and the CTA container classes around the bottom action
area to keep the button region aligned with the main content instead of the
rail.
In `@apps/web/src/app/my/apply-mentor/_components/StudyStatusScreen/index.tsx`:
- Line 83: The fixed desktop bottom area in StudyStatusScreen is missing the md+
left offset, so its outer container still overlaps the left navigation rail when
the inner wrapper uses md:max-w-none. Update the fixed outer wrapper in the
StudyStatusScreen component to add the required 88px desktop offset while
keeping the current left-0/right-0 behavior on smaller screens, so the
sticky/fixed footer aligns correctly on md and above.
In `@apps/web/src/app/my/apply-mentor/_components/UniversityScreen/index.tsx`:
- Line 206: The fixed bottom button container in UniversityScreen still spans
the full viewport on md+ because only the width cap was removed, so it collides
with the left rail. Update the wrapper around the fixed action area in the
UniversityScreen component to keep the md:max-w-none change but also apply the
desktop left offset/padding used by other screens, so the sticky/fixed controls
are positioned relative to the content column instead of the full viewport.
In `@apps/web/src/app/my/password/_ui/PasswordContent/index.tsx`:
- Line 110: The fixed bottom button area in PasswordContent still ignores the
desktop rail offset, so on md+ it can overlap the 88px left rail even though the
inner width expands with md:max-w-none. Update the outer fixed wrapper in
PasswordContent (the container around the button/footer area) to apply the same
md+ left offset/spacing used by other desktop rail-aligned layouts, keeping the
button aligned to the main content area without changing its mobile behavior.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 95f23d43-64cb-41c5-a519-eb929b95c803
📒 Files selected for processing (39)
apps/university-web/src/app/university/[homeUniversity]/[id]/_ui/UniversityDetail/_ui/TitleSection.tsxapps/university-web/src/app/university/[homeUniversity]/[id]/_ui/UniversityDetail/index.tsxapps/university-web/src/app/university/[homeUniversity]/_ui/RegionFilter.tsxapps/university-web/src/app/university/[homeUniversity]/_ui/SearchBar.tsxapps/university-web/src/app/university/[homeUniversity]/_ui/UniversityListContent.tsxapps/university-web/src/app/university/[homeUniversity]/page.tsxapps/university-web/src/components/layout/GlobalLayout/index.tsxapps/university-web/src/components/layout/GlobalLayout/ui/BottomNavigation/index.tsxapps/university-web/src/components/layout/GlobalLayout/ui/DesktopNavigation/index.tsxapps/university-web/src/components/layout/PathBasedNavigation/index.tsxapps/university-web/src/components/layout/TopDetailNavigation.tsxapps/university-web/src/components/ui/TopLogoBar/index.tsxapps/university-web/src/components/university/UniversityCards/index.tsxapps/web/src/app/(home)/_ui/FindLastYearScoreBar/index.tsxapps/web/src/app/(home)/_ui/HomeActionLinks/index.tsxapps/web/src/app/(home)/_ui/HomeUniversitySearchSection/index.tsxapps/web/src/app/(home)/_ui/NewsSection/index.tsxapps/web/src/app/(home)/_ui/PopularUniversitySection/_ui/PopularUniversityCard.tsxapps/web/src/app/(home)/_ui/PopularUniversitySection/index.tsxapps/web/src/app/(home)/page.tsxapps/web/src/app/community/[boardCode]/PostWriteButton.tsxapps/web/src/app/community/[boardCode]/[postId]/CommentInput.tsxapps/web/src/app/community/[boardCode]/[postId]/modify/PostModifyForm.tsxapps/web/src/app/my/apply-mentor/_components/InterestCountriesScreen/index.tsxapps/web/src/app/my/apply-mentor/_components/StudyStatusScreen/index.tsxapps/web/src/app/my/apply-mentor/_components/UniversityScreen/index.tsxapps/web/src/app/my/password/_ui/PasswordContent/index.tsxapps/web/src/app/sign-up/email/EmailSignUpForm.tsxapps/web/src/app/university/application/_components/ApplicationBottomActionBar.tsxapps/web/src/app/university/score/ScoreScreen.tsxapps/web/src/app/university/score/submit/gpa/GpaSubmitForm.tsxapps/web/src/app/university/score/submit/language-test/LanguageTestSubmitForm.tsxapps/web/src/components/layout/GlobalLayout/index.tsxapps/web/src/components/layout/GlobalLayout/ui/BottomNavigation/index.tsxapps/web/src/components/layout/GlobalLayout/ui/DesktopNavigation/index.tsxapps/web/src/components/layout/PathBasedNavigation/index.tsxapps/web/src/components/layout/TopDetailNavigation.tsxapps/web/src/components/ui/TopLogoBar/index.tsxapps/web/src/components/university/UniversityCards/index.tsx
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (3)
apps/web/src/app/(home)/_ui/HomeDesktopView/index.tsx (1)
187-195: 🩺 Stability & Availability | 🔵 Trivial | ⚡ Quick win1. 뉴스 카드 이미지에는
fallbackSrc가 빠져 있어요.같은 파일의 추천/전체 학교 카드 이미지(120, 155번째 줄)는 모두
fallbackSrc로 깨진 이미지를 막아주고 있는데, 뉴스 이미지만 홀로 안전망 없이 외부news.imageUrl을 그대로 받고 있어요. 외부 URL이 끊기거나 404가 나면 카드 한 칸이 휑하게 비어 보일 수 있으니, 일관성과 안정성을 위해 폴백을 채워주면 좋겠습니다.🤖 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/app/`(home)/_ui/HomeDesktopView/index.tsx around lines 187 - 195, The news card image rendered in HomeDesktopView’s Image usage is missing a fallbackSrc, unlike the nearby recommendation/all-school card images, so add the same fallback handling to this Image component. Update the Image props used for news.imageUrl to include an appropriate fallbackSrc so broken or missing external image URLs still render a safe placeholder and stay consistent with the other cards.apps/web/src/app/(home)/_ui/HomeDesktopView/HomeDesktopEntryPanel.tsx (1)
85-99: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value1. 안쪽
contentdiv의key는 살짝 멋쩍게 남아 있어요.리스트 항목으로 실제 렌더되는 요소는
UniversityZoneLink/Link이고, 거기에 이미key={href}가 잘 붙어 있어요. 88번째 줄의contentdiv에 있는key는 배열 컨텍스트가 아니라 아무 역할도 하지 못하니, 정리해두면 의도가 더 또렷해집니다.♻️ 제안 diff
const content = ( <div - key={href} className={clsx("flex h-full min-h-32 flex-col justify-between rounded-lg p-4", colorClassName)} >🤖 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/app/`(home)/_ui/HomeDesktopView/HomeDesktopEntryPanel.tsx around lines 85 - 99, The inner content div in HomeDesktopEntryPanel’s actionLinks map is carrying a redundant key even though the actual rendered list item is UniversityZoneLink/Link and already uses key={href}. Remove the key from the content div and keep the list key only on the component returned from the map so the intent stays clear and the JSX structure is cleaner.apps/university-web/src/app/university/[homeUniversity]/[id]/_ui/UniversityDetail/index.tsx (1)
18-26: 🚀 Performance & Scalability | 🔵 Trivial1. 모바일/데스크톱 분기를 조건부 렌더링으로 바꾸기
md:hidden/hidden md:block은 화면상으로만 숨길 뿐, 두 트리 모두 마운트됩니다. 이 구조에서는UniversityBtns,InfoSection,MapSection같은 하위 컴포넌트가 중복 생성되므로, 뷰포트에 따라 한쪽만 렌더링하는 쪽이 낫습니다.🤖 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/university-web/src/app/university/`[homeUniversity]/[id]/_ui/UniversityDetail/index.tsx around lines 18 - 26, The UniversityDetail view currently mounts both mobile and desktop trees using CSS visibility classes, so convert this split in UniversityDetail/index.tsx to true conditional rendering based on viewport or breakpoint state. Update the UniversityDetailMobile and UniversityDetailDesktop usage so only one branch is rendered at a time, preventing duplicate creation of shared child components like UniversityBtns, InfoSection, and MapSection. Keep the branch selection logic close to the existing university/koreanName props wiring so the component remains easy to locate and maintain.
🤖 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.
Inline comments:
In
`@apps/university-web/src/app/university/`[homeUniversity]/[id]/_ui/UniversityDetail/index.tsx:
- Line 134: The fixed “0회 파견” label in UniversityDetail is currently being shown
for every university even though the University type/API does not provide a
dispatch count yet. Update the UniversityDetail component to stop hardcoding
this value: either remove the display entirely until real data is available or
route it through a clearly separated temporary placeholder path so it is not
mistaken for actual data. Use the UniversityDetail JSX and any related
University typing/data-mapping code to find the spot and keep the UI aligned
with the available API fields.
In `@apps/web/src/app/`(home)/page.tsx:
- Around line 117-136: The responsive split in the home page should be changed
from always-rendered hidden DOM to conditional mounting so only the active
branch exists. Update the main page component around the mobile section and
HomeDesktopView to render either the mobile or desktop branch based on viewport,
instead of keeping both with md:hidden/hidden md:block. This will prevent hidden
next/image instances, especially the priority images used by
PopularUniversitySection and HomeDesktopView, from loading unnecessarily.
---
Nitpick comments:
In
`@apps/university-web/src/app/university/`[homeUniversity]/[id]/_ui/UniversityDetail/index.tsx:
- Around line 18-26: The UniversityDetail view currently mounts both mobile and
desktop trees using CSS visibility classes, so convert this split in
UniversityDetail/index.tsx to true conditional rendering based on viewport or
breakpoint state. Update the UniversityDetailMobile and UniversityDetailDesktop
usage so only one branch is rendered at a time, preventing duplicate creation of
shared child components like UniversityBtns, InfoSection, and MapSection. Keep
the branch selection logic close to the existing university/koreanName props
wiring so the component remains easy to locate and maintain.
In `@apps/web/src/app/`(home)/_ui/HomeDesktopView/HomeDesktopEntryPanel.tsx:
- Around line 85-99: The inner content div in HomeDesktopEntryPanel’s
actionLinks map is carrying a redundant key even though the actual rendered list
item is UniversityZoneLink/Link and already uses key={href}. Remove the key from
the content div and keep the list key only on the component returned from the
map so the intent stays clear and the JSX structure is cleaner.
In `@apps/web/src/app/`(home)/_ui/HomeDesktopView/index.tsx:
- Around line 187-195: The news card image rendered in HomeDesktopView’s Image
usage is missing a fallbackSrc, unlike the nearby recommendation/all-school card
images, so add the same fallback handling to this Image component. Update the
Image props used for news.imageUrl to include an appropriate fallbackSrc so
broken or missing external image URLs still render a safe placeholder and stay
consistent with the other cards.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: d2e358f8-9cbe-41de-9297-40c83f4770b9
📒 Files selected for processing (12)
apps/university-web/src/app/university/[homeUniversity]/[id]/_ui/UniversityDetail/index.tsxapps/university-web/src/app/university/[homeUniversity]/_ui/UniversityListContent.tsxapps/web/src/app/(home)/_ui/HomeDesktopView/HomeDesktopEntryPanel.tsxapps/web/src/app/(home)/_ui/HomeDesktopView/index.tsxapps/web/src/app/(home)/_ui/PopularUniversitySection/index.tsxapps/web/src/app/(home)/page.tsxapps/web/src/app/my/apply-mentor/_components/InterestCountriesScreen/index.tsxapps/web/src/app/my/apply-mentor/_components/StudyStatusScreen/index.tsxapps/web/src/app/my/apply-mentor/_components/UniversityScreen/index.tsxapps/web/src/app/my/password/_ui/PasswordContent/index.tsxapps/web/src/app/university/application/_components/ApplicationBottomActionBar.tsxapps/web/src/app/university/score/ScoreScreen.tsx
✅ Files skipped from review due to trivial changes (5)
- apps/web/src/app/my/apply-mentor/_components/UniversityScreen/index.tsx
- apps/web/src/app/university/score/ScoreScreen.tsx
- apps/web/src/app/my/apply-mentor/_components/StudyStatusScreen/index.tsx
- apps/web/src/app/(home)/_ui/PopularUniversitySection/index.tsx
- apps/web/src/app/my/password/_ui/PasswordContent/index.tsx
🚧 Files skipped from review as they are similar to previous changes (3)
- apps/web/src/app/my/apply-mentor/_components/InterestCountriesScreen/index.tsx
- apps/web/src/app/university/application/_components/ApplicationBottomActionBar.tsx
- apps/university-web/src/app/university/[homeUniversity]/_ui/UniversityListContent.tsx
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 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.
Inline comments:
In `@apps/web/src/app/my/_ui/MyProfileContent/index.tsx`:
- Around line 392-400: `DesktopMenuItem` currently renders a button whenever
`href` is missing, even if `onClick` is undefined, which creates a
clickable-looking but inert control. Update the render logic in
`DesktopMenuItem` to branch on interactivity: keep the `Link` path for `href`,
render a `button` only when `onClick` exists, and otherwise fall back to a
non-interactive container for `content`. Use the existing `href`, `onClick`, and
`content` props to locate the conditional render block.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 75689eab-512a-462a-88a3-898aab0db16e
📒 Files selected for processing (1)
apps/web/src/app/my/_ui/MyProfileContent/index.tsx
manNomi
force-pushed
the
feat/desktop-mode-poc
branch
from
b328df9 to
4fbdf35
Compare
manNomi
force-pushed
the
feat/desktop-mode-poc
branch
from
6892a44 to
4fbdf35
Compare
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.
관련 이슈
작업 내용
/university/[homeUniversity]/[id]는dynamicParams = false로 유지해 생성된 정적 상세 경로만 제공합니다./university,/university/search,/university/[homeUniversity],/university/[homeUniversity]/search의 데스크톱 카드/검색/필터 화면을 모바일 흐름과 분리했습니다./university/[homeUniversity]/[id]상세 페이지를 데스크톱 전용 hero, 본문, sticky 요약 패널 구조로 제작했습니다.5로 낮췄습니다.Desktop*/Mobile*view entrypoint로 분리검증
pnpm --filter @solid-connect/university-web run ci:check통과UNIVERSITY_TERM_ID=1 NEXT_PUBLIC_UNIVERSITY_TERM_ID=1 pnpm --filter @solid-connect/university-web run build통과pnpm --filter @solid-connect/university-web run build는 기본 환경에서 전체 대학 목록 API 500(executeWithLock) 때문에/university/[homeUniversity]/[id]SSG page data 수집 단계에서 실패하는 것을 확인했습니다.http://localhost:3001/universityhttp://localhost:3001/university/searchUNIVERSITY_TERM_ID=1dev 환경에서http://localhost:3001/university/inha/1432zoom=5적용 확인pnpm --filter @solid-connect/web run ci:check통과UNIVERSITY_WEB_DOMAIN=http://localhost:3001 pnpm --filter @solid-connect/web run build통과참고