Skip to content

반응형 수정 및 리팩토링#447

Merged
HA-SEUNG-JEONG merged 6 commits into
developfrom
fix/responsive
Mar 25, 2026
Merged

반응형 수정 및 리팩토링#447
HA-SEUNG-JEONG merged 6 commits into
developfrom
fix/responsive

Conversation

@HA-SEUNG-JEONG

@HA-SEUNG-JEONG HA-SEUNG-JEONG commented Mar 25, 2026

Copy link
Copy Markdown
Contributor

🌱 연관된 이슈

☘️ 작업 내용

  • 모바일 화면서 MoreMenu, 1:1 스터디 매칭 토글, 알림, 프로필 사진 안 보이던 문제 수정
  • 멘토스터디 상세 페이지에서 onSettled 적용으로 일관성 유지
  • 스터디 생성/수정 모달 내 컴포넌트 이름을 직관적으로 변경
  • 스터디 소개 부분에서 maxLength가 안 보이던 부분 수정

🍀 참고사항

스크린샷 (선택)

스크린샷 2026-03-25 13 17 38 스크린샷 2026-03-25 13 17 10 스크린샷 2026-03-25 13 17 04 스크린샷 2026-03-25 13 16 58

Summary by CodeRabbit

릴리스 노트

  • 새로운 기능

    • 모바일 메뉴에 사용자 프로필 빠른 접근 추가
    • 모바일 메뉴의 스터디 매칭 토글 표시 개선
  • 버그 수정

    • 폼 검증 실패 시 오류 알림 표시
    • 누락된 데이터에 대한 공지사항 표시 개선
    • 공지사항 드롭다운 반응형 레이아웃 개선
  • 스타일

    • 랜딩 페이지 레이아웃 및 간격 최적화
    • 데스크톱과 모바일의 반응형 디자인 개선
    • 전반적인 타이포그래피 및 여백 조정

@HA-SEUNG-JEONG HA-SEUNG-JEONG self-assigned this Mar 25, 2026
@vercel

vercel Bot commented Mar 25, 2026

Copy link
Copy Markdown

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

Project Deployment Actions Updated (UTC)
study-platform-client-dev Error Error Mar 25, 2026 4:43am

@coderabbitai

coderabbitai Bot commented Mar 25, 2026

Copy link
Copy Markdown
📝 Walkthrough

Walkthrough

랜딩 페이지 레이아웃과 타이포그래피 조정, 테마 간격 토큰 추가, 헤더 및 모바일 메뉴 드로어 스타일 업데이트, 사용자 이미지 prop 추가, 그룹 스터디 폼 컴포넌트 이름 변경 및 유효성 검사 개선, 알림 드롭다운 및 목록 처리 개선, 프리미엄 스터디 상세 페이지 레이아웃 조정.

Changes

코호트 / 파일(s) 요약
랜딩 페이지 및 테마 토큰
src/app/(landing)/page.tsx, src/app/global.css
영웅 섹션의 세로 패딩 증가(md:py-[80px]md:py-1000), 제목 및 단락 레이아웃 개선, 배너 높이 증가(h-[120px]h-1500), 섹션 패딩 일관성 업데이트(md:py-[120px]md:py-1500), max-w-study-content 토큰 적용. CSS에 --spacing-800, --spacing-1000, --spacing-1500 간격 토큰 추가.
헤더 및 모바일 메뉴
src/components/common/layout/home-header.tsx, src/components/common/layout/mobile-menu-drawer.tsx
헤더 배경 및 패딩 업데이트(bg-white py-[11px]bg-background-default py-125), 커스텀 max-w-1496 유틸리티 적용. 모바일 드로어에 선택적 userImg prop 추가, 로그인 상태에서 알림 드롭다운 조건부 렌더링, 1:1 스터디 매칭 토글 섹션 추가, gap 유틸리티 값 조정.
알림 및 스터디 매칭
src/components/common/modals/notification-dropdown.tsx, src/components/lists/notification-list.tsx, src/components/home/study-matching-toggle.tsx
알림 ID 누락 시 조기 반환 가드 추가, 드롭다운 반응형 너비(w-[520px]w-[min(520px,calc(100vw-32px))]), 정렬 및 충돌 감지 개선. 알림 목록의 필드 누락 처리(notification.id ?? index), 조건부 날짜 포매팅. 스터디 매칭 토글에 showLabel prop 추가, 조건부 레이블 표시.
그룹 스터디 폼 및 단계
src/components/forms/group-study-form.tsx, src/components/forms/group-study-steps/group-study-step-*.tsx
step 컴포넌트 이름 변경(Step1OpenGroupStudyGroupStudyStepBasicInfo 등), 유효성 검사 실패 시 토스트 통합(showToast 활용), Stepper 레이아웃/타이포그래피 스타일링 개선. 단계별 컴포넌트에서 maxLength 제약 추가(제목 100자, 요약 200자), 객체 URL 생성 및 정리 개선, 타입 전용 import 사용.
프리미엄 스터디 상세 페이지
src/components/pages/premium-study-detail-page.tsx
고정 너비(w-[1164px]) → 반응형(w-full max-w-study-content px-400), cn(...) 유틸리티로 className 구성 개선, 선택적 체이닝 제거, onSettled에서 confirmAction 초기화로 성공/오류 모두 처리.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

Poem

🐰 탭탭 탭탭 —
여백을 재정렬하고, 제목을 가다듬네,
모바일 드로어는 사진을 품고,
알림 목록은 안전히 처리하며,
폼은 길이를 재고 토스트로 말하네! ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (2 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed PR 제목 '반응형 수정 및 리팩토링'은 PR의 주요 목적과 변경 사항을 정확히 반영하고 있습니다. 모바일 반응형 이슈 수정, 컴포넌트 리팩토링, 상태 관리 통합 등 전체 변경 사항을 포괄적으로 설명합니다.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch fix/responsive

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

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

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (2)
src/components/common/layout/home-header.tsx (1)

57-59: Arbitrary value 사용 검토 필요

border-[0.5px]text-[7.5px]는 Tailwind arbitrary value입니다. 자주 사용되는 값이라면 global.css에 커스텀 유틸리티로 정의하는 것을 권장합니다.

♻️ 제안: 커스텀 유틸리티 정의
/* global.css에 추가 */
`@utility` border-half {
  border-width: 0.5px;
}

`@utility` text-beta-badge {
  font-size: 7.5px;
}
-          <span className="rounded-full border-[0.5px] border-border-default px-75 py-25 text-center text-[7.5px] leading-normal font-medium">
+          <span className="rounded-full border-half border-border-default px-75 py-25 text-center text-beta-badge leading-normal font-medium">

As per coding guidelines: "Forbidden: Tailwind arbitrary values (e.g., p-[4px], w-[320px]). Use only project custom design tokens."

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/components/common/layout/home-header.tsx` around lines 57 - 59, The span
in home-header.tsx uses Tailwind arbitrary values `border-[0.5px]` and
`text-[7.5px]`; define project custom utilities in global.css (e.g.,
`border-half` for 0.5px border-width and `text-beta-badge` for 7.5px font-size)
and replace those arbitrary classes in the span's className with the new utility
class names (update the element that renders the BETA badge accordingly).
src/components/common/modals/notification-dropdown.tsx (1)

66-70: Arbitrary value 사용 검토 필요

w-[min(520px,calc(100vw-32px))]는 Tailwind arbitrary value입니다. 코딩 가이드라인에 따르면 프로젝트 커스텀 디자인 토큰만 사용해야 합니다.

복잡한 반응형 계산이 필요한 경우, global.css에 새로운 유틸리티를 정의하는 것을 권장합니다:

♻️ 제안: 커스텀 유틸리티 정의
/* global.css에 추가 */
`@utility` w-dropdown-responsive {
  width: min(520px, calc(100vw - 32px));
}
-        className="shadow-2 rounded-100 border-border-default bg-background-default w-[min(520px,calc(100vw-32px))] border"
+        className="shadow-2 rounded-100 border-border-default bg-background-default w-dropdown-responsive border"

As per coding guidelines: "Forbidden: Tailwind arbitrary values (e.g., p-[4px], w-[320px]). Use only project custom design tokens."

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/components/common/modals/notification-dropdown.tsx` around lines 66 - 70,
The component uses a Tailwind arbitrary width value in DropdownMenuContent's
className ("w-[min(520px,calc(100vw-32px))]"), which violates the project rule
against arbitrary values; fix it by adding a custom utility in global.css
(define a responsive width utility, e.g., w-dropdown-responsive, using width:
min(520px, calc(100vw - 32px)) within the project's utilities layer) and then
replace the arbitrary token in DropdownMenuContent's className with that new
utility (remove the w-[...] arbitrary string and use the custom utility class
name).
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@src/components/common/layout/home-header.tsx`:
- Around line 57-59: The span in home-header.tsx uses Tailwind arbitrary values
`border-[0.5px]` and `text-[7.5px]`; define project custom utilities in
global.css (e.g., `border-half` for 0.5px border-width and `text-beta-badge` for
7.5px font-size) and replace those arbitrary classes in the span's className
with the new utility class names (update the element that renders the BETA badge
accordingly).

In `@src/components/common/modals/notification-dropdown.tsx`:
- Around line 66-70: The component uses a Tailwind arbitrary width value in
DropdownMenuContent's className ("w-[min(520px,calc(100vw-32px))]"), which
violates the project rule against arbitrary values; fix it by adding a custom
utility in global.css (define a responsive width utility, e.g.,
w-dropdown-responsive, using width: min(520px, calc(100vw - 32px)) within the
project's utilities layer) and then replace the arbitrary token in
DropdownMenuContent's className with that new utility (remove the w-[...]
arbitrary string and use the custom utility class name).

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 2faf0f4d-60c5-4536-9910-08143f633be9

📥 Commits

Reviewing files that changed from the base of the PR and between 0c060c7 and 95414ea.

📒 Files selected for processing (12)
  • src/app/(landing)/page.tsx
  • src/app/global.css
  • src/components/common/layout/home-header.tsx
  • src/components/common/layout/mobile-menu-drawer.tsx
  • src/components/common/modals/notification-dropdown.tsx
  • src/components/forms/group-study-form.tsx
  • src/components/forms/group-study-steps/group-study-step-application.tsx
  • src/components/forms/group-study-steps/group-study-step-basic-info.tsx
  • src/components/forms/group-study-steps/group-study-step-introduction.tsx
  • src/components/home/study-matching-toggle.tsx
  • src/components/lists/notification-list.tsx
  • src/components/pages/premium-study-detail-page.tsx

@HA-SEUNG-JEONG HA-SEUNG-JEONG merged commit 7cce796 into develop Mar 25, 2026
10 of 11 checks passed
@HA-SEUNG-JEONG HA-SEUNG-JEONG deleted the fix/responsive branch March 25, 2026 04:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant