fix: 이미지 크롭 에디터 핸들 디자인 갱신

[iOdiO89]

작업 요약

• 이미지 크롭 에디터의 크롭 박스와 핸들을 디자인 시안에 맞게 바꿨습니다.

작업 내용

• 모서리 핸들을 크롭 박스 바깥에 붙는 ㄱ자 브래킷으로 교체. 변 선과 변 가운데 핸들은 투명하게 두고 터치 영역만 남김
• 크롭 박스 테두리를 accent outline에서 base-50 1px border로 교체 (원형 크롭 포함)
• 점선 가이드는 드래그 중에만 노출. 리렌더를 피하려고 cropstart/cropend에서 data-cropping 속성을 직접 토글
• 바깥 브래킷이 잘리지 않도록 이미지 영역에 inset-5 여백 추가

스크린샷

Summary by CodeRabbit

• 개선 사항
  • 이미지 자르기 화면에 테두리와 모서리 조절 표시를 추가하고, 조작 중에만 점선 가이드가 나타나도록 개선했습니다.
  • 원형 자르기 화면의 테두리와 조절 표시를 원형 형태에 맞게 정리했습니다.
  • 드래그 중인 상태가 화면에 반영되며, 이미지 편집 영역의 여백이 조정되었습니다.

[vercel]

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

2 Skipped Deployments

Project	Deployment	Actions	Updated
piki	Skipped		Oct 10, 2026 10:33am UTC
piki-notify	Skipped		Oct 10, 2026 10:33am UTC

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

• Configuration used: Repository UI
• Review profile: CHILL
• Plan: Advanced
• Run ID: 0fdf66f0-38e6-4cf5-914a-2cb9b02cf0c5

---

📥 Commits

Reviewing files that changed from the base of the PR and between e2b45fa and 3ebc023.

---

📒 Files selected for processing (2)

• apps/web/src/components/common/image-crop-editor/imageCropEditor.css
• apps/web/src/components/common/image-crop-editor/index.tsx

---

Included review availability: This review used your included allowance. Your plan provides up to 1 included review per hour; 0 remain after this review.

---

---

📝 Walkthrough

Walkthrough

이미지 크롭 편집기에 드래그 상태 추적을 추가했습니다. 크롭 박스 테두리와 핸들 스타일을 변경하고, 원형 크롭 표시와 편집 영역 여백을 조정했습니다.

Changes

크롭 편집기

Layer / File(s)	Summary
드래그 상태 및 편집 영역 연결 apps/web/src/components/common/image-crop-editor/index.tsx	크롭 영역의 DOM 참조를 연결합니다. 드래그 시작 시 data-cropping을 설정하고, 드래그 종료 및 Cropper 정리 시 제거합니다. 편집 가능한 이미지 래퍼의 여백을 변경합니다.
크롭 박스 및 핸들 표시 apps/web/src/components/common/image-crop-editor/imageCropEditor.css	크롭 박스 테두리와 모서리 브래킷을 표시합니다. 드래그 중 점선 가이드를 표시하고, 원형 크롭에서 테두리를 원형으로 만들며 변 핸들을 숨깁니다.

Priority: ⬇️ Low

Estimated code review effort: 2 (Simple) | ~10 minutes

Change: Other

---

Merge Risk: ⚪ Minimal · up to 3ebc0

The crop-editor changes appear mergeable after normal checks.

Pre-merge checks | 4 | 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage		Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 1 functions across 1 files. (1 skipped: 1 …	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check		Check skipped - CodeRabbit’s high-level summary is enabled.
Title check		제목은 이미지 크롭 에디터의 핸들 디자인 변경을 명확하게 설명하며, PR의 주요 변경 사항과 일치합니다.
Linked Issues check		Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check		Check skipped because no linked issues were found for this pull request.

---

Full details: Docstring Coverage

Explanation

Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 1 functions across 1 files. (1 skipped: 1 unsupported.)

---

• Fix all pre-merge checks with AI

✨ Finishing Touches 💡 1

📝 Generate docstrings 💡

• Commit to this branch
• Create a new PR

---

---

🧪 Generate unit tests (beta)

• Commit to this branch
• Create a new PR

---

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Warning

Some tools did not complete. Review the errors below.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

apps/web/src/components/common/image-crop-editor/imageCropEditor.css

ESLint skipped: missing config or dependency (missing-dependency). The ESLint configuration references a package that is not available in the sandbox.

---

apps/web/src/components/common/image-crop-editor/index.tsx

ESLint skipped: the matched ESLint configuration already failed (missing-dependency).

---

---

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

• X
• Mastodon
• Reddit
• LinkedIn

---

_{Comment @coderabbitai help to get the list of available commands.}

[iOdiO89]

@coderabbitai review

[coderabbitai]

✅ Action performed

Review finished.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.