Conversation
- font-size 16->20으로 변경 - hover 효과 삭제
- 44px -> 60px
- 65px->94px
seongwon030
requested review from
lepitaaar,
oesnuj,
seongje973 and
suhyun113
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning
|
| 코호트 / 파일(들) | 변경 요약 |
|---|---|
ClubApplyButton 스타일 변경frontend/src/pages/ClubDetailPage/components/ClubApplyButton/ClubApplyButton.styles.ts |
ApplyButton 스타일 업데이트: 배경색 #3a3a3a → #ff7543, 높이 44px → 50px, 폰트 크기 16px → 20px, 폰트 웨이트 500 → 700; 호버 스타일 제거; Separator(styled.span) 새로 추가 및 export |
ClubApplyButton 사용처 변경frontend/src/pages/ClubDetailPage/components/ClubApplyButton/ClubApplyButton.tsx |
인라인 <span> 구분자 제거 후 Styled.Separator로 교체하여 렌더링; 조건부 렌더링 로직·흐름은 불변 |
ClubDetailFooter 스타일 수정frontend/src/pages/ClubDetailPage/components/ClubDetailFooter/ClubDetailFooter.styles.ts |
ClubDetailFooterContainer에서 명시적 height 스타일 제거(기존 고정 높이 삭제) |
ShareButton 아이콘 및 스타일링 변경frontend/src/pages/ClubDetailPage/components/ShareButton/ShareButton.tsxfrontend/src/pages/ClubDetailPage/components/ShareButton/ShareButton.styles.ts |
아이콘 자산 share_filled_icon.svg → share_icon.svg로 변경; <img> 대신 Styled.ShareButtonIcon(export된 styled.img, width/height 50px) 사용으로 교체 |
예상 코드 리뷰 난이도
🎯 2 (Simple) | ⏱️ ~10분
- 확인 권장 항목:
- ApplyButton의 새로운 크기/타이포 값이 디자인 가이드와 일치하는지
Separator의 마진/보더가 인라인 레이아웃에 미치는 영향- Share 아이콘 교체 후 이미지 경로/렌더링(50x50) 및 시각적 표시 확인
Possibly related issues
- MOA-295: 상세페이지 푸터 디자인 변경 — 푸터 버튼 색상 변경 및 공유 버튼 이미지 변경 요구와 일치하므로 연관 가능
- [feature] MOA-295 상세페이지 푸터 디자인 변경 #794 — 푸터 UI(공유 버튼 이미지 및 푸터 높이) 수정 항목과 직접 연관
Possibly related PRs
- [feature] 공유버튼을 카카오톡 이미지로 변경한다 #597 — ShareButton의 아이콘 자산 및 렌더링 방식 변경과 코드 레벨에서 중복 영역 존재
- [release] v1.0.8 #595 — ClubDetailPage의 ShareButton 관련 변경(아이콘/렌더링)과 관련
- [release] v1.1.0 #676 — ClubApplyButton 및 ShareButton 관련 스타일/아이콘 변경을 포함한 PR로 연관성 있음
Suggested labels
✨ Feature
Suggested reviewers
- seongje973
- lepitaaar
- oesnuj
Pre-merge checks and finishing touches
❌ Failed checks (1 warning)
| Check name | Status | Explanation | Resolution |
|---|---|---|---|
| Out of Scope Changes check | ClubDetailFooter에서 높이 속성 제거와 ApplyButton의 hover 스타일 제거 등 일부 변경이 MOA-295의 체크리스트에 명시되지 않았습니다. | MOA-295의 요구사항 범위에 포함되지 않은 변경사항들(높이 제거, hover 스타일 제거 등)의 필요성을 명확히 하거나 별도 이슈로 분리하는 것을 권장합니다. |
✅ Passed checks (4 passed)
| Check name | Status | Explanation |
|---|---|---|
| Description Check | ✅ Passed | Check skipped - CodeRabbit’s high-level summary is enabled. |
| Title check | ✅ Passed | PR 제목은 푸터 디자인 변경이라는 주요 변경사항을 명확하게 요약하고 있으며, 변경사항과 직접 관련이 있습니다. |
| Linked Issues check | ✅ Passed | PR의 모든 변경사항이 MOA-295의 요구사항을 충족합니다: 지원하기 버튼 색상 변경 (#ff7543), 높이 증가, 공유 버튼 이미지 변경이 완료되었습니다. |
| Docstring Coverage | ✅ Passed | No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. |
✨ 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/#794-detail-footer-ui-fix-MOA-295
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.
![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 (4)
frontend/src/pages/ClubDetailPage/components/ClubDetailFooter/ClubDetailFooter.styles.ts (1)
7-7: 매직 넘버를 명명된 상수로 교체 권장높이 값
94px이 하드코딩되어 있습니다. 코딩 가이드라인에 따라 매직 넘버는 명명된 상수로 교체하는 것이 좋습니다. 이렇게 하면 향후 디자인 변경 시 유지보수가 용이해지고, 값의 의도가 명확해집니다.파일 상단에 상수를 정의하는 것을 고려해보세요:
import styled from 'styled-components'; + +const FOOTER_HEIGHT = 94; export const ClubDetailFooterContainer = styled.div` position: sticky; bottom: 0; width: 100%; - height: 94px; + height: ${FOOTER_HEIGHT}px; z-index: 100;frontend/src/pages/ClubDetailPage/components/ShareButton/ShareButton.tsx (1)
57-57: 매직 넘버를 명명된 상수로 교체 권장이미지의 너비와 높이 값
60이 하드코딩되어 있습니다. 코딩 가이드라인에 따라 이러한 값들을 명명된 상수로 추출하면 가독성과 유지보수성이 향상됩니다. 특히 이 값이 ClubApplyButton의 높이(60px)와 일치하므로, 공통 상수로 관리하면 디자인 일관성을 유지하기 더 쉬워집니다.파일 상단에 상수를 정의하는 것을 고려해보세요:
const MOADONG_BASE_URL = 'https://www.moadong.com/club/'; const DEFAULT_IMAGE_URL = 'https://avatars.githubusercontent.com/u/200371900?s=200&v=4'; +const SHARE_ICON_SIZE = 60; const ShareButton = ({ clubId }: ShareButtonProps) => {- <img src={ShareIcon} width={60} height={60} alt='카카오톡 공유' /> + <img src={ShareIcon} width={SHARE_ICON_SIZE} height={SHARE_ICON_SIZE} alt='카카오톡 공유' />frontend/src/pages/ClubDetailPage/components/ClubApplyButton/ClubApplyButton.styles.ts (2)
20-28: 버튼 스타일의 매직 넘버를 명명된 상수로 교체 권장ApplyButton의 여러 스타일 값들이 하드코딩되어 있습니다:
- 배경색
#ff7543- 높이
60px- 폰트 크기
20px- 폰트 굵기
700코딩 가이드라인에 따라 이러한 디자인 값들을 명명된 상수로 추출하면 다음과 같은 이점이 있습니다:
- 디자인 시스템의 일관성 유지
- 향후 디자인 변경 시 유지보수 용이
- 값의 의도와 용도가 명확해짐
파일 상단에 디자인 토큰을 정의하는 것을 고려해보세요:
import styled from 'styled-components'; + +const APPLY_BUTTON_BG_COLOR = '#ff7543'; +const APPLY_BUTTON_HEIGHT = 60; +const APPLY_BUTTON_FONT_SIZE = 20; +const APPLY_BUTTON_FONT_WEIGHT = 700; export const ApplyButtonContainer = styled.div`export const ApplyButton = styled.button` display: flex; align-items: center; justify-content: center; border: none; border-radius: 10px; cursor: pointer; transition: transform 0.2s ease-in-out; - background-color: #ff7543; + background-color: ${APPLY_BUTTON_BG_COLOR}; padding: 10px 40px; width: 517px; - height: 60px; - font-size: 20px; + height: ${APPLY_BUTTON_HEIGHT}px; + font-size: ${APPLY_BUTTON_FONT_SIZE}px; font-style: normal; - font-weight: 700; + font-weight: ${APPLY_BUTTON_FONT_WEIGHT}; color: #fff;
41-46: Separator의 매직 넘버를 명명된 상수로 교체 권장Separator 컴포넌트의 스타일 값들(
8px,12px)이 하드코딩되어 있습니다. 코딩 가이드라인에 따라 이러한 값들을 명명된 상수로 추출하면 가독성과 유지보수성이 향상됩니다.+const SEPARATOR_MARGIN = 8; +const SEPARATOR_HEIGHT = 12; + export const Separator = styled.span` - margin: 0 8px; + margin: 0 ${SEPARATOR_MARGIN}px; border-left: 1px solid #787878; - height: 12px; + height: ${SEPARATOR_HEIGHT}px; display: inline-block; `;
📜 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 ignored due to path filters (3)
frontend/src/assets/images/icons/kakaotalk_sharing_btn_small.pngis excluded by!**/*.pngfrontend/src/assets/images/icons/share_filled_icon.svgis excluded by!**/*.svgfrontend/src/assets/images/icons/share_icon.svgis excluded by!**/*.svg
📒 Files selected for processing (4)
frontend/src/pages/ClubDetailPage/components/ClubApplyButton/ClubApplyButton.styles.ts(2 hunks)frontend/src/pages/ClubDetailPage/components/ClubApplyButton/ClubApplyButton.tsx(1 hunks)frontend/src/pages/ClubDetailPage/components/ClubDetailFooter/ClubDetailFooter.styles.ts(1 hunks)frontend/src/pages/ClubDetailPage/components/ShareButton/ShareButton.tsx(2 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
frontend/**/*.{ts,tsx}
📄 CodeRabbit inference engine (frontend/.cursorrules)
frontend/**/*.{ts,tsx}: Replace magic numbers with named constants for clarity.
Replace complex or nested ternary operators with if/else statements or IIFEs for readability.
Assign complex boolean conditions to named variables.
Use consistent return types for similar functions and hooks.
Avoid hidden side effects; functions should only perform actions implied by their signature (Single Responsibility Principle).
Use unique, descriptive names for custom wrappers and functions to avoid ambiguity.
Define constants near related logic or ensure names link them clearly.
Files:
frontend/src/pages/ClubDetailPage/components/ClubDetailFooter/ClubDetailFooter.styles.tsfrontend/src/pages/ClubDetailPage/components/ClubApplyButton/ClubApplyButton.styles.tsfrontend/src/pages/ClubDetailPage/components/ClubApplyButton/ClubApplyButton.tsxfrontend/src/pages/ClubDetailPage/components/ShareButton/ShareButton.tsx
frontend/**/*.tsx
📄 CodeRabbit inference engine (frontend/.cursorrules)
frontend/**/*.tsx: Abstract complex logic/interactions into dedicated components or higher-order components (HOCs).
Separate significantly different conditional UI/logic into distinct components.
Colocate simple, localized logic or use inline definitions to reduce context switching.
Choose field-level or form-level cohesion based on form requirements.
Break down broad state management into smaller, focused hooks or contexts.
Use component composition instead of props drilling.
Files:
frontend/src/pages/ClubDetailPage/components/ClubApplyButton/ClubApplyButton.tsxfrontend/src/pages/ClubDetailPage/components/ShareButton/ShareButton.tsx
🔇 Additional comments (2)
frontend/src/pages/ClubDetailPage/components/ClubApplyButton/ClubApplyButton.styles.ts (1)
12-39: 호버 스타일 제거 검증 필요ApplyButton의 호버 상태 스타일이 제거된 것으로 보입니다(AI 요약에 따르면). 의도적인 변경인지 확인이 필요합니다. 호버 효과는 사용자에게 버튼이 상호작용 가능함을 시각적으로 알려주는 중요한 피드백입니다.
현재
transition: transform 0.2s ease-in-out은 남아있지만 실제로 transform을 변경하는 호버 스타일이 없어 이 transition이 사용되지 않고 있습니다.다음을 확인해주세요:
- 호버 스타일 제거가 디자인 의도에 맞는지 확인
- 제거가 의도적이라면, 사용되지 않는
transition속성도 함께 제거하는 것을 고려frontend/src/pages/ClubDetailPage/components/ClubApplyButton/ClubApplyButton.tsx (1)
59-59: LGTM! 스타일드 컴포넌트 사용으로 개선인라인 span을 전용
Styled.Separator컴포넌트로 교체한 것은 좋은 리팩토링입니다. 스타일 관리의 일관성이 향상되고, 코드의 가독성이 개선되었습니다.
lepitaaar
left a comment
lepitaaar
left a comment
There was a problem hiding this comment.
푸터 디자인 변경 너무좋은거같습니다! 바뀐디자인이 훨씬 눈에 잘띄는거 같아요!
frontend/src/pages/ClubDetailPage/components/ClubApplyButton/ClubApplyButton.tsx
Show resolved
Hide resolved
suhyun113
left a comment
suhyun113
left a comment
There was a problem hiding this comment.
바뀐 버튼이 눈에 더 잘 보이고 좋네요!
그런데 디자인보다 버튼이 좀 커보이는 것 같아서 수정하면 좋을 것 같아요~
수고하셨습니다!!
oesnuj
left a comment
oesnuj
left a comment
There was a problem hiding this comment.
큼직하니 모니터로 보면 딱이네요!
근데 노트북으로 보면 살짝 버튼이 큰 느낌도 있긴 합니다 ㅎㅎ
수고 많으셨습니다~
| <img src={ShareIcon} width={60} height={60} alt='카카오톡 공유' /> | ||
| </Styled.ShareButtonContainer> |
There was a problem hiding this comment.
img에 width={60} height={60}를 인라인으로 주는 대신 styled-components로 관리하는 건 어떨까요?
추가로 SVG가 이미 60px로 만들어진 것 같은데 추가로 크기를 지정하는 이유가 있었나용?
There was a problem hiding this comment.
styled-components로 일관성을 유지하는 것이 더 나아보이네요!
크기를 지정한 이유는 따로 이미지 파일을 찾지 않아도 코드에서 찾을 수 있을 것 같아서 추가했어요.
frontend/src/pages/ClubDetailPage/components/ClubApplyButton/ClubApplyButton.tsx
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
frontend/src/pages/ClubDetailPage/components/ShareButton/ShareButton.styles.ts (1)
9-12: [선택사항] 매직 넘버를 상수로 추출하는 것을 고려해보세요.아이콘 크기(50px)가 다른 곳에서도 사용되거나 일관성이 필요한 경우, 상수로 추출하는 것이 유지보수에 도움이 될 수 있습니다.
예시:
+const SHARE_ICON_SIZE = '50px'; + export const ShareButtonIcon = styled.img` - width: 50px; - height: 50px; + width: ${SHARE_ICON_SIZE}; + height: ${SHARE_ICON_SIZE}; `;코딩 가이드라인에 따름
📜 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/ClubDetailPage/components/ClubApplyButton/ClubApplyButton.styles.ts(2 hunks)frontend/src/pages/ClubDetailPage/components/ClubDetailFooter/ClubDetailFooter.styles.ts(0 hunks)frontend/src/pages/ClubDetailPage/components/ShareButton/ShareButton.styles.ts(1 hunks)frontend/src/pages/ClubDetailPage/components/ShareButton/ShareButton.tsx(2 hunks)
💤 Files with no reviewable changes (1)
- frontend/src/pages/ClubDetailPage/components/ClubDetailFooter/ClubDetailFooter.styles.ts
🚧 Files skipped from review as they are similar to previous changes (1)
- frontend/src/pages/ClubDetailPage/components/ClubApplyButton/ClubApplyButton.styles.ts
🧰 Additional context used
📓 Path-based instructions (2)
frontend/**/*.{ts,tsx}
📄 CodeRabbit inference engine (frontend/.cursorrules)
frontend/**/*.{ts,tsx}: Replace magic numbers with named constants for clarity.
Replace complex or nested ternary operators with if/else statements or IIFEs for readability.
Assign complex boolean conditions to named variables.
Use consistent return types for similar functions and hooks.
Avoid hidden side effects; functions should only perform actions implied by their signature (Single Responsibility Principle).
Use unique, descriptive names for custom wrappers and functions to avoid ambiguity.
Define constants near related logic or ensure names link them clearly.
Files:
frontend/src/pages/ClubDetailPage/components/ShareButton/ShareButton.styles.tsfrontend/src/pages/ClubDetailPage/components/ShareButton/ShareButton.tsx
frontend/**/*.tsx
📄 CodeRabbit inference engine (frontend/.cursorrules)
frontend/**/*.tsx: Abstract complex logic/interactions into dedicated components or higher-order components (HOCs).
Separate significantly different conditional UI/logic into distinct components.
Colocate simple, localized logic or use inline definitions to reduce context switching.
Choose field-level or form-level cohesion based on form requirements.
Break down broad state management into smaller, focused hooks or contexts.
Use component composition instead of props drilling.
Files:
frontend/src/pages/ClubDetailPage/components/ShareButton/ShareButton.tsx
🧠 Learnings (2)
📓 Common learnings
Learnt from: seongwon030
Repo: Moadong/moadong PR: 195
File: frontend/src/pages/AdminPage/AdminPage.tsx:7-7
Timestamp: 2025-03-19T05:18:07.818Z
Learning: AdminPage.tsx에서 현재 하드코딩된 클럽 ID('67d2e3b9b15c136c6acbf20b')는 로그인 기능 구현 후 동적으로 가져오는 방식으로 수정될 예정입니다.
Learnt from: seongwon030
Repo: Moadong/moadong PR: 744
File: frontend/src/pages/ClubDetailPage/components/ClubApplyButton/ClubApplyButton.tsx:47-48
Timestamp: 2025-09-21T02:23:27.796Z
Learning: ClubApplyButton 컴포넌트에서 ShareButton은 항상 렌더링되어야 하므로 정적 import를 사용하는 것이 적절함. 동적 import는 불필요함.
📚 Learning: 2025-09-21T02:23:27.796Z
Learnt from: seongwon030
Repo: Moadong/moadong PR: 744
File: frontend/src/pages/ClubDetailPage/components/ClubApplyButton/ClubApplyButton.tsx:47-48
Timestamp: 2025-09-21T02:23:27.796Z
Learning: ClubApplyButton 컴포넌트에서 ShareButton은 항상 렌더링되어야 하므로 정적 import를 사용하는 것이 적절함. 동적 import는 불필요함.
Applied to files:
frontend/src/pages/ClubDetailPage/components/ShareButton/ShareButton.styles.tsfrontend/src/pages/ClubDetailPage/components/ShareButton/ShareButton.tsx
🔇 Additional comments (1)
frontend/src/pages/ClubDetailPage/components/ShareButton/ShareButton.tsx (1)
4-4: 좋은 개선입니다!이전 리뷰 피드백을 반영하여 인라인 스타일 대신 styled-components를 사용하도록 변경한 점이 좋습니다. 아이콘 자산도 새로운 디자인에 맞게 교체되었고, 접근성(alt text)도 유지되고 있습니다.
Also applies to: 57-57
4 participants
#️⃣연관된 이슈
📝작업 내용
변경 전
변경 후
중점적으로 리뷰받고 싶은 부분(선택)
논의하고 싶은 부분(선택)
🫡 참고사항
Summary by CodeRabbit
릴리스 노트
새로운 기능
스타일