[feature] 활동사진 편집 탭 모바일 화면 구현 - #1842
Conversation
조기 반환 전으로 이동
…으로 전환 - PhotoEditTab에서 useDevice 분기 제거 → desktop-only - PhotoEditTabMobile props 제거, useOutletContext 직접 호출 → 독립화 - AdminRoutes에서 photo-edit 라우트를 AdminTabAdapter로 감쌈
- photo/admin-tab-adapter-pattern.md → photo/mobile.md로 리네임 - info/mobile.md, intro/mobile.md 구조 설명을 AdminTabAdapter 패턴으로 업데이트
|
Claude encountered an error after 8s —— View job I'll analyze this and get back to you. |
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (1)
Walkthrough모바일 관리자 사진 편집 경로를 Changes모바일 관리자 편집
Estimated code review effort: 3 (Moderate) | ~20 minutes Possibly related issues
Possibly related PRs
Suggested labels: Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 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 |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a mobile-specific version of the activity photo editing tab (PhotoEditTabMobile), updates the admin routing to use AdminTabAdapter for responsive rendering, refactors hardcoded colors to use theme colors in PhotoEditTab.styles.ts, and updates relevant documentation. The review feedback correctly identifies that Mixpanel page view tracking (useTrackPageView) is missing in the new mobile component and suggests adding it to maintain parity with the desktop version.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
| import { ADMIN_EVENT } from '@/constants/eventName'; | ||
| import { MAX_FILE_COUNT } from '@/constants/uploadLimit'; | ||
| import useMixpanelTrack from '@/hooks/Mixpanel/useMixpanelTrack'; |
There was a problem hiding this comment.
모바일 화면에서도 페이지 뷰 분석을 정확히 추적하기 위해 useTrackPageView 훅과 PAGE_VIEW 상수를 임포트해야 합니다. 데스크탑 버전(PhotoEditTab.tsx)과 동일하게 Mixpanel 페이지 뷰 이벤트를 전송할 수 있도록 추가해 주세요.
| import { ADMIN_EVENT } from '@/constants/eventName'; | |
| import { MAX_FILE_COUNT } from '@/constants/uploadLimit'; | |
| import useMixpanelTrack from '@/hooks/Mixpanel/useMixpanelTrack'; | |
| import { ADMIN_EVENT, PAGE_VIEW } from '@/constants/eventName'; | |
| import { MAX_FILE_COUNT } from '@/constants/uploadLimit'; | |
| import useMixpanelTrack from '@/hooks/Mixpanel/useMixpanelTrack'; | |
| import useTrackPageView from '@/hooks/Mixpanel/useTrackPageView'; |
| const PhotoEditTabMobile = () => { | ||
| const navigate = useNavigate(); | ||
| const trackEvent = useMixpanelTrack(); | ||
| const clubDetail = useOutletContext<ClubDetail>(); |
There was a problem hiding this comment.
모바일 환경에서 활동 사진 수정 탭에 진입했을 때 Mixpanel에 페이지 뷰 이벤트를 기록할 수 있도록 useTrackPageView(PAGE_VIEW.PHOTO_EDIT_PAGE) 호출을 추가해 주세요.
| const PhotoEditTabMobile = () => { | |
| const navigate = useNavigate(); | |
| const trackEvent = useMixpanelTrack(); | |
| const clubDetail = useOutletContext<ClubDetail>(); | |
| const PhotoEditTabMobile = () => { | |
| const navigate = useNavigate(); | |
| const trackEvent = useMixpanelTrack(); | |
| useTrackPageView(PAGE_VIEW.PHOTO_EDIT_PAGE); | |
| const clubDetail = useOutletContext<ClubDetail>(); |
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: 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 @.github/workflows/harry-review.yml:
- Around line 66-69: Restrict the Claude `allowedTools` configuration in the
workflow to only the required `Bash(git diff:*)` and `Bash(git log:*)` commands
instead of the broad `Bash(git*)` pattern. Update the `actions/checkout@v4` step
to set `persist-credentials: false`.
🪄 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: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: b0463b3b-d27b-4102-93bc-cf99bd00b11d
📒 Files selected for processing (1)
.github/workflows/harry-review.yml
| show_full_output: true | ||
| claude_args: | | ||
| --model claude-opus-4-8 | ||
| --allowedTools mcp__github_inline_comment__create_inline_comment,Bash(git diff:*),Bash(git log:*) | ||
| --allowedTools Read,mcp__github_inline_comment__create_inline_comment,Bash(git*) |
There was a problem hiding this comment.
🔒 Security & Privacy | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
sed -n '1,140p' .github/workflows/harry-review.ymlRepository: Moadong/moadong
Length of output: 5885
🏁 Script executed:
rg -n "allowedTools|Bash\\(git\\*\\)|actions/checkout@v4|persist-credentials" -S .github/workflows . -g '*.yml' -g '*.yaml' -g '*.md'Repository: Moadong/moadong
Length of output: 1916
🏁 Script executed:
sed -n '130,230p' .github/workflows/harry-review.ymlRepository: Moadong/moadong
Length of output: 4516
🏁 Script executed:
python3 - <<'PY'
from pathlib import Path
import re
text = Path('.github/workflows/harry-review.yml').read_text()
for m in re.finditer(r'--allowedTools\s+([^\n]+)', text):
print(m.group(1))
PYRepository: Moadong/moadong
Length of output: 249
🌐 Web query:
anthropic claude code action allowedTools Bash(git*) glob command pattern
💡 Result:
In Claude Code, the Bash tool supports fine-grained permission control using glob pattern matching within the allowedTools (or permissions.allow) configuration [1][2][3]. Key behavior and syntax for Bash tool patterns include: Wildcard Support: You can use the * wildcard in any position (beginning, middle, or end) to match sequences of characters, including spaces [1][3]. For example, Bash(git *) matches any git command, while Bash(git * main) restricts access to commands like git checkout main or git merge main [1][3]. Equivalency of Suffixes: The :* suffix at the end of a pattern is functionally equivalent to a space followed by a wildcard [1][3]. For instance, Bash(ls:*) matches the same commands as Bash(ls *) [1][3]. Space Sensitivity: The presence or absence of a space significantly changes the matching logic [1][3]. A pattern like Bash(ls *) (with a space) matches ls -la but not lsof, whereas Bash(ls*) (without a space) matches both ls -la and lsof [1][3]. Configuration and Security: - Permissions: You can define allow and deny lists in your settings or via CLI flags [1][2][3]. Explicit deny rules always take precedence [4]. - CLI/SDK Usage: When configuring tools via --allowedTools in the CLI or SDK, it is recommended to wrap the patterns in quotes (e.g., --allowedTools "Bash(git:*)") to prevent shell parsing errors that could collapse complex rules into unrestricted access [5][6]. - Best Practices: It is safer to limit the scope of Bash execution by using specific patterns (e.g., Bash(git:*)) rather than broad patterns like Bash(*) [7]. Note that for security, content-scoped rules (e.g., Bash(git push *)) will still force a permission prompt even if a base Bash rule is otherwise allowed [4].
Citations:
- 1: https://code.claude.com/docs/en/permissions
- 2: https://code.claude.com/docs/en/tools-reference.md
- 3: https://code.claude.com/docs/en/permissions.md
- 4: https://code.claude.com/docs/en/sandboxing
- 5: fix(parse-sdk-options): prevent shell-quote from collapsing unquoted Bash(X:*) rules to bare Bash anthropics/claude-code-action#1350
- 6: fix(agent): register built-in tools from --allowedTools anthropics/claude-code-action#1267
- 7: https://github.com/anthropics/claude-code/blob/main/plugins/plugin-dev/skills/command-development/SKILL.md
🏁 Script executed:
rg -n "persist-credentials|git diff|Bash\\(git|allowedTools|checkout" docs .github/workflows/harry-review.yml -SRepository: Moadong/moadong
Length of output: 1623
.github/workflows/harry-review.yml:32,69 Bash(git*) 범위를 줄이고 checkout 자격 증명도 끄는 게 좋아요
Bash(git*)는 git fetch, git clone, git config까지 열어 두어서 리뷰에 필요한 git diff/git log보다 훨씬 넓어요. 이 job의 actions/checkout@v4에는 persist-credentials: false도 없어서 Git 인증정보가 워크스페이스에 남습니다. Bash(git diff:*), Bash(git log:*)처럼 최소 허용으로 줄이고 checkout 자격 증명도 끄는 편이 안전해요.
🤖 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 @.github/workflows/harry-review.yml around lines 66 - 69, Restrict the Claude
`allowedTools` configuration in the workflow to only the required `Bash(git
diff:*)` and `Bash(git log:*)` commands instead of the broad `Bash(git*)`
pattern. Update the `actions/checkout@v4` step to set `persist-credentials:
false`.
| display: flex; | ||
| flex-direction: column; |
There was a problem hiding this comment.
이런건 그냥 하나의 공통 스타일 컴포넌트로 만드는것도 좋을 것 같아요
There was a problem hiding this comment.
말씀하신 대로 이번 작업 사항의 모든 파일에서 거의 동일한 MobileContainer가 있네요. 다만 padding-bottom, 값도 탭마다 조금씩 다르고, 위 스타일이 어드민 전체에서 워낙 많이 사용되는거 같아서 공통화 기준을 어떻게 세워야할지 고민이 필요할 것 같습니다.
추가해뒀습니다! 1a3f965 |
2 participants
#️⃣연관된 이슈
#1839
📝작업 내용
구현 내용
활동사진 편집 탭(
photo-edit)의 모바일 화면을 구현하고,AdminTabAdapter패턴으로 데스크탑/모바일 분기를 통일했습니다.PhotoEditTabMobile구현 — 활동사진 추가·삭제·드래그 정렬 (모바일 레이아웃)PhotoEditTabdesktop-only화 —useDevice분기 제거AdminRoutes에서photo-edit을AdminTabAdapter로 감싸 라우트 레벨에서 분기화면 케이스
🫡 참고사항
refactor/#1840-add-admin-tab-router-MOA-1046(AdminTabAdapter 도입 PR)Summary by CodeRabbit
새 기능
개선 사항