[fix] 모바일 카테고리 버튼 양쪽에 생기는 여백을 제거한다#904
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning
|
| Cohort / File(s) | 변경 요약 |
|---|---|
반응형 스타일 리팩토링 frontend/src/pages/MainPage/components/CategoryButtonList/CategoryButtonList.styles.ts |
하드코딩된 미디어 쿼리를 @/styles/mediaQuery의 중앙화된 미디어 쿼리 헬퍼(${media.mobile}, ${media.mini_mobile}, ${media.tablet})로 대체. 패딩, 마진, 크기, 폰트 크기 등을 다양한 중단점에서 조정 |
프로덕션 호스트명 검증 frontend/src/utils/initSDK.ts |
단일 프로덕션 URL 확인을 PRODUCTION_HOSTNAMES 배열 기반 호스트명 검증으로 변경. isProductionHost 플래그를 사용하여 Mixpanel 비활성화 여부 결정 |
테스트 시간대 표기 정규화 frontend/src/utils/parseRecruitmentPeriod.test.ts, frontend/src/utils/recruitmentPeriodParser.test.ts |
테스트 예상값의 ISO 날짜 문자열에 UTC 표시(Z)를 추가하여 명시적 UTC 타임스탬프로 업데이트 (예: 2024-03-20T14:00:00 → 2024-03-20T14:00:00Z) |
Estimated code review effort
🎯 2 (Simple) | ⏱️ ~12 minutes
- CategoryButtonList.styles.ts: 미디어 쿼리 헬퍼로의 일관된 패턴 대체 검토
- initSDK.ts: 호스트명 배열 구성 및 조건 로직 검증
- 테스트 파일들: UTC 형식 변경 유효성 확인
Possibly related issues
- [fix] MOA-392 모바일 카테고리 버튼 양쪽에 생기는 여백을 제거한다 #890: CategoryButton의 모바일 중단점 스타일 패딩/마진 조정으로 모바일 카테고리 버튼 여백 제거 요구사항 직접 해결
Possibly related PRs
- [refactor] 모바일 활동사진 UI 그리드 형태로 수정 및 반응형 개선 작업 #554: 동일하게 하드코딩된 CSS 미디어 쿼리를 중앙화된 미디어 쿼리 헬퍼(
${media.mobile},${media.tablet})로 대체하는 스타일 리팩토링 패턴 - [fix] Mixpanel 활성 호스트에 www 도메인 추가 #876:
initSDK.ts의 프로덕션 URL 확인 로직을PRODUCTION_HOSTNAMES배열 기반 호스트명 검증으로 변경하는 동일한 코드 수준의 변경 - [feature] 모집 상태 보기 기능을 제거하고 중앙동아리 태그를 이동한다 #759:
@/styles/mediaQuery모듈의 브레이크포인트 및 미디어 쿼리 헬퍼 내보내기를 추가/업데이트하여 이 PR의 중앙화된 미디어 쿼리 사용을 직접 지원
Suggested labels
✨ Feature
Suggested reviewers
- seongje973
- lepitaaar
- seongwon030
- oesnuj
Pre-merge checks and finishing touches
❌ Failed checks (2 warnings)
| Check name | Status | Explanation | Resolution |
|---|---|---|---|
| Out of Scope Changes check | initSDK.ts와 테스트 파일들의 변경 사항이 모바일 카테고리 버튼 여백 제거라는 linked issue 목표와 직접적인 관련이 없습니다. | initSDK.ts의 hostname 검증 로직 변경과 테스트 파일의 UTC 타임스탐프 변경 사항은 별도 이슈로 분리하거나, 해당 변경이 필요한 이유를 문서화해야 합니다. | |
| Docstring Coverage | Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. | You can run @coderabbitai generate docstrings to improve docstring coverage. |
✅ Passed checks (3 passed)
| Check name | Status | Explanation |
|---|---|---|
| Description Check | ✅ Passed | Check skipped - CodeRabbit’s high-level summary is enabled. |
| Linked Issues check | ✅ Passed | 변경 사항이 MOA-392 이슈의 목표인 모바일 카테고리 버튼의 좌우 여백 제거 요구사항을 충족하고 있습니다. |
| Title check | ✅ Passed | PR 제목이 변경 사항의 주요 목적과 일치합니다. 모바일 카테고리 버튼의 양쪽 여백 제거라는 핵심 변경 내용을 명확하게 요약합니다. |
✨ Finishing touches
- 📝 Generate docstrings
🧪 Generate unit tests (beta)
- Create PR with unit tests
- Post copyable unit tests in a comment
- Commit unit tests in branch
feature/#890-remove-mobile-category-button-padding-MOA-392
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 @coderabbitai help to get the list of available commands and usage tips.
suhyun113
changed the title
![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)
frontend/src/pages/MainPage/components/CategoryButtonList/CategoryButtonList.styles.ts (2)
10-24: 네거티브 마진 기법으로 PR 목표를 달성했지만, 매직 넘버를 상수로 추출하세요.부모 컨테이너 패딩을 상쇄하는 네거티브 마진 접근법은 올바르지만,
20px와10px값이 여러 곳에서 반복됩니다. 코딩 가이드라인에 따라 이러한 값을 명명된 상수로 추출하면 유지보수성과 명확성이 향상됩니다.파일 상단에 상수를 정의하세요:
const PARENT_PADDING_MOBILE = 20; const PARENT_PADDING_MINI_MOBILE = 10;그런 다음 스타일에 적용하세요:
${media.mobile} { background-color: white; position: sticky; top: 56px; z-index: 1; - margin: 0px -20px; - padding: 6px 20px 12px; + margin: 0px -${PARENT_PADDING_MOBILE}px; + padding: 6px ${PARENT_PADDING_MOBILE}px 12px; } ${media.mini_mobile} { - margin: -10px -10px; - padding: 16px 10px 12px; + margin: -${PARENT_PADDING_MINI_MOBILE}px -${PARENT_PADDING_MINI_MOBILE}px; + padding: 16px ${PARENT_PADDING_MINI_MOBILE}px 12px; }Based on learnings, 매직 넘버를 명명된 상수로 교체해야 합니다.
67-70: 태블릿 미디어 쿼리에서 중복된 font-size 선언을 제거하세요.Line 68의
font-size: 14px는 Line 60의 기본값과 동일하여 불필요합니다.다음과 같이 수정하세요:
${media.tablet} { - font-size: 14px; margin-top: 10px; }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Jira integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (4)
frontend/src/pages/MainPage/components/CategoryButtonList/CategoryButtonList.styles.ts(4 hunks)frontend/src/utils/initSDK.ts(3 hunks)frontend/src/utils/parseRecruitmentPeriod.test.ts(1 hunks)frontend/src/utils/recruitmentPeriodParser.test.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
frontend/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (frontend/.cursorrules)
frontend/**/*.{ts,tsx,js,jsx}: Replace magic numbers with named constants for clarity
Replace complex/nested ternaries withif/elseor IIFEs for readability
Assign complex boolean conditions to named variables for explicit meaning
Avoid hidden side effects; functions should only perform actions implied by their signature (Single Responsibility Principle)
Use unique and descriptive names for custom wrappers/functions to avoid ambiguity
Define constants near related logic or ensure names link them clearly to avoid silent failures
Break down broad state management into smaller, focused hooks/contexts to reduce coupling
Files:
frontend/src/pages/MainPage/components/CategoryButtonList/CategoryButtonList.styles.tsfrontend/src/utils/initSDK.tsfrontend/src/utils/parseRecruitmentPeriod.test.tsfrontend/src/utils/recruitmentPeriodParser.test.ts
frontend/**/*.{ts,tsx}
📄 CodeRabbit inference engine (frontend/.cursorrules)
Use consistent return types for similar functions/hooks
Files:
frontend/src/pages/MainPage/components/CategoryButtonList/CategoryButtonList.styles.tsfrontend/src/utils/initSDK.tsfrontend/src/utils/parseRecruitmentPeriod.test.tsfrontend/src/utils/recruitmentPeriodParser.test.ts
🧠 Learnings (1)
📚 Learning: 2025-11-25T14:08:23.234Z
Learnt from: CR
Repo: Moadong/moadong PR: 0
File: frontend/.cursorrules:0-0
Timestamp: 2025-11-25T14:08:23.234Z
Learning: Applies to frontend/**/*.{ts,tsx,js,jsx} : Replace magic numbers with named constants for clarity
Applied to files:
frontend/src/pages/MainPage/components/CategoryButtonList/CategoryButtonList.styles.ts
🧬 Code graph analysis (2)
frontend/src/pages/MainPage/components/CategoryButtonList/CategoryButtonList.styles.ts (1)
frontend/src/styles/mediaQuery.ts (1)
media(8-14)
frontend/src/utils/recruitmentPeriodParser.test.ts (1)
frontend/src/utils/recruitmentPeriodParser.ts (1)
parseRecruitmentDateString(3-17)
🔇 Additional comments (7)
frontend/src/utils/recruitmentPeriodParser.test.ts (1)
6-6: LGTM! 테스트 기대값이 UTC 타임존을 명시적으로 표현합니다.ISO 8601 형식의 'Z' 접미사를 추가하여 파서가 UTC로 반환하는 Date 객체와 정확히 일치하도록 테스트 기대값을 개선했습니다.
Also applies to: 12-12
frontend/src/utils/parseRecruitmentPeriod.test.ts (1)
8-9: LGTM! UTC 타임존 표기가 명시적입니다.다른 테스트 파일과 일관되게 'Z' 접미사를 사용하여 UTC 타임존을 명확히 표현했습니다.
frontend/src/utils/initSDK.ts (2)
15-18: LGTM! 호스트명 기반 프로덕션 감지 로직이 명확합니다.URL 전체가 아닌 호스트명만 확인하는 방식으로 개선되어 더 명확하고 유지보수가 용이합니다.
5-5: No changes needed. ThePRODUCTION_HOSTNAMESconstant correctly lists the production domains where Mixpanel should be active. No other subdomains (api, app, admin, etc.) are used in the production environment.frontend/src/pages/MainPage/components/CategoryButtonList/CategoryButtonList.styles.ts (3)
2-2: LGTM! 중앙화된 미디어 쿼리 헬퍼를 사용합니다.하드코딩된 미디어 쿼리를 중앙화된 유틸리티로 교체하여 일관성과 유지보수성을 개선했습니다.
36-38: LGTM! 모바일에서 버튼 패딩을 제거합니다.모바일 화면에서 공간 효율성을 위해 버튼 패딩을 적절히 제거했습니다.
49-56: LGTM! 이미지 크기가 반응형으로 조정됩니다.화면 크기에 따라 이미지 크기를 점진적으로 줄이는 것은 적절한 반응형 디자인 접근법입니다.
frontend/src/pages/MainPage/components/CategoryButtonList/CategoryButtonList.styles.ts
Show resolved
Hide resolved
suhyun113
deleted the
feature/#890-remove-mobile-category-button-padding-MOA-392
branch
2 participants
#️⃣연관된 이슈
📝작업 내용
핵심 변경사항
변경 목적
모바일 화면에서 스크롤 시 카테고리 버튼 영역이
sticky로 상단에 고정될 때, 양쪽에 불필요한 좌우 여백(20px)이 생기는 문제가 있었습니다.문제 원인
PageContainer는 페이지 내 모든 콘텐츠를 일정 패딩 안에 배치하기 위한 레이아웃 컨테이너모바일에서도 이 패딩이 유지되기 때문에, 내부에 위치한 카테고리 버튼 영역도 패딩이 적용된 것입니다.
=>
sticky가 적용될 때는 일반 콘텐츠처럼 안쪽으로 들어가지 않아야 자연스럽습니다.해결
부모 컨테이너를 수정하거나, 카테고리 버튼만 예외를 두는 방식 중 고민했습니다.
부모 컨테이너(
PageContainer)의 패딩을 건드리지 않기PageContainer는 공통 레이아웃이기 때문에 패딩을 제거하면 다른 컴포넌트(탭 버튼, 카드리스트 등)에 영향을 줍니다. 따라서 내부 컴포넌트들 각각에 패딩을 줘야하여 번거롭고 부모 패딩을 유지하는 것이 더 안전하다고 판단하였습니다.카테고리 버튼 영역만 예외적으로 처리하기
모바일에서만
PageContainer의패딩을 제거하기 위해 자식 컴포넌트(CategoryButtonContainer)에서 가로 방향 음수 마진을 적용했습니다. 음수 마진을 지양하고 싶었지만, 모바일에서만sticky속성을 적용해야하는 특이한 경우였기 때문에, 음수 마진으로 제거 후, 패딩을 주는 것이 더 이해하기 편하다고 생각했습니다.그 외 수정사항
중점적으로 리뷰받고 싶은 부분(선택)
논의하고 싶은 부분(선택)
🫡 참고사항
Summary by CodeRabbit
새로운 기능
기타
✏️ Tip: You can customize this high-level summary in your review settings.