fix(web): 비밀번호 변경 페이지 확인 버튼 overflow 수정

[manNomi]

작업 내용

• /my/password 하단 고정 CTA 래퍼를 fixed + left/right + w-full 구조로 정리했습니다.
• 내부 컨테이너를 mx-auto w-full max-w-app px-5로 감싸서 버튼 폭이 앱 컨테이너를 넘지 않도록 수정했습니다.
• 버튼 활성/비활성, step 전환, 제출 로직은 변경하지 않았습니다.

확인

• pre-push 훅에서 ci:check 및 next build 통과
• 수정 파일: apps/web/src/app/my/password/_ui/PasswordContent/index.tsx

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
solid-connection-web	Ready	Preview, Comment	May 7, 2026 2:27pm

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
solid-connect-web-admin	Skipped		May 7, 2026 2:27pm

[coderabbitai]

요약

이 PR은 비밀번호 변경 화면의 하단 고정 액션 영역을 스타일 및 레이아웃 관점에서 개선합니다. 고정 컨테이너에 right-0을 추가하여 우측 정렬을 명확히 하고, py-4 패딩을 적용합니다. 내부에는 mx-auto w-full max-w-app px-5를 갖춘 래퍼를 도입하여 반응형 최대 너비를 제어합니다. 단계별 버튼(확인/변경하기)의 기능과 동작은 유지되며, 클래스명 포맷팅만 개선됩니다.

변경사항 상세

1. 고정 액션 영역 컨테이너 리팩토링

   • fixed bottom-0 left-0 right-0 클래스에 우측 정렬(right-0)을 명시
   • py-4 패딩 추가로 상하 여백 확보
   • 내부 래퍼 컨테이너 신규 추가: mx-auto w-full max-w-app px-5

2. 버튼 기능 유지

   • 단계별 type 속성 유지 (step 0: "확인", step 1: "변경하기")
   • onClick/submit 핸들러 동일
   • disabled 조건 로직 변경 없음
   • 클래스명 포맷팅만 여러 줄로 개선

코드 검토 노력도

🎯 1 (Trivial) | ⏱️ ~3 분

추천 검토자

• wibaek
• enunsnv

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	PR 제목이 변경 내용과 완벽하게 일치합니다. 비밀번호 변경 페이지의 확인 버튼 overflow 문제 수정이라는 핵심 변경사항을 명확하고 간결하게 설명하고 있습니다.
Description check	✅ Passed	PR 설명이 필수 섹션인 '관련 이슈'는 누락되어 있으나, '작업 내용'과 '확인' 섹션이 충분히 작성되어 변경사항이 명확합니다. 주요 내용은 포함되어 있습니다.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ 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 chore/setup-worktree-20260504

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 Microsoft Presidio Analyzer (2.2.362)

apps/web/src/app/my/password/_ui/PasswordContent/index.tsx

Microsoft Presidio Analyzer failed to scan this file

Tip

💬 Introducing Slack Agent: The best way for teams to turn conversations into code.

Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.

• Generate code and open pull requests
• Plan features and break down work
• Investigate incidents and troubleshoot customer tickets together
• Automate recurring tasks and respond to alerts with triggers
• Summarize progress and report instantly

Built for teams:

• Shared memory across your entire org—no repeating context
• Per-thread sandboxes to safely plan and execute work
• Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get started

---

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 and usage tips.}

[coderabbitai]

🧹 Nitpick comments (1)

apps/web/src/app/my/password/_ui/PasswordContent/index.tsx (1)

109-110: ⚡ Quick win

1. 버튼 overflow 수정이 적절하게 적용되었습니다. 하지만 fixed 요소의 위치 지정 방식을 개선하면 더 명확해집니다.

max-w-app로 내부 컨테이너를 감싼 구조는 버튼이 앱 컨테이너를 넘지 않도록 하는 핵심 수정사항으로 잘 구현되었습니다.

다만 Line 109에서 bottom-0과 함께 mb-20을 사용하고 있는데, fixed 요소에서 이 조합은 bottom-20과 동일한 효과를 내지만 의도가 덜 명확합니다.

♻️ 더 명확한 위치 지정 방식 제안

-        <div className="fixed bottom-0 left-0 right-0 mb-20 w-full py-4">
+        <div className="fixed bottom-20 left-0 right-0 w-full py-4">
           <div className="mx-auto w-full max-w-app px-5">

참고: left-0 right-0이 이미 전체 너비를 차지하므로 w-full은 선택적이지만, 명시적으로 표현하기 위해 유지해도 무방합니다.

🤖 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 `@apps/web/src/app/my/password/_ui/PasswordContent/index.tsx` around lines 109
- 110, 현재 fixed 요소의 클래스 문자열 "fixed bottom-0 left-0 right-0 mb-20 w-full py-4"은
bottom-0과 mb-20을 함께 사용해 의도가 불분명하므로, 명확하게 위치를 지정하도록 mb-20을 제거하고 대신 "bottom-20"을
사용해 "fixed bottom-20 left-0 right-0 w-full py-4"로 변경하세요; 내부 컨테이너 클래스 "mx-auto
w-full max-w-app px-5"는 그대로 두어 버튼이 앱 컨테이너 너비를 넘지 않도록 유지합니다.

🤖 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.

Nitpick comments:
In `@apps/web/src/app/my/password/_ui/PasswordContent/index.tsx`:
- Around line 109-110: 현재 fixed 요소의 클래스 문자열 "fixed bottom-0 left-0 right-0 mb-20
w-full py-4"은 bottom-0과 mb-20을 함께 사용해 의도가 불분명하므로, 명확하게 위치를 지정하도록 mb-20을 제거하고 대신
"bottom-20"을 사용해 "fixed bottom-20 left-0 right-0 w-full py-4"로 변경하세요; 내부 컨테이너
클래스 "mx-auto w-full max-w-app px-5"는 그대로 두어 버튼이 앱 컨테이너 너비를 넘지 않도록 유지합니다.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 55185e3f-b705-41ff-9018-a808610d48eb

📥 Commits

Reviewing files that changed from the base of the PR and between 5e6e9eb and ef03b47.

📒 Files selected for processing (1)

• apps/web/src/app/my/password/_ui/PasswordContent/index.tsx