[sunwoo162]

개요 💡

로그인 화면이 작은 모바일 화면에서도 잘리지 않고 표시되도록 반응형 레이아웃을 적용합니다.

작업내용 ⌨️

• 로그인 카드의 고정 폭을 w-full max-w-110으로 변경
• 모바일 화면에서 카드와 OAuth 버튼의 내부 여백을 축소
• min-h-dvh와 반응형 콘텐츠 여백을 적용해 짧은 viewport에서도 세로 스크롤 가능하도록 보완
• 반응형 클래스 회귀 테스트 추가
• 로고, 색상, 문구, OAuth 인증 흐름과 네트워크 로직은 변경하지 않음

검증 ✅

• node --no-warnings --experimental-strip-types --test tests/*.test.mjs 통과 (5개)
• node_modules/.bin/biome lint . 통과
• node_modules/.bin/tsc --noEmit 통과
• NEXT_PUBLIC_API_URL=http://localhost:8080 node_modules/.bin/next build 통과
• git diff --check 통과

[vercel]

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

Project	Deployment	Actions	Updated
washer	Ready	Preview	Oct 26, 2026 10:49am UTC

[inryeok-bot]

변경사항과 관련 코드 경로를 확인했으며, 현재 수정이 필요한 문제는 발견하지 못했습니다.

[jjhhss100906]

확인했습니다! 고정 폭 w-110 → w-full max-w-110로 바꾸고 min-h-dvh까지 적용해주셔서 모바일에서 카드 잘리는 문제는 잘 해결될 것 같습니다 👍

몇 가지만 확인 부탁드립니다.

1. docs/superpowers/specs/2026-10-25-sign-in-responsive-design.md의 구현 결정에 "SignInForm 카드와 앱 다운로드 카드 모두 w-full max-w-110 패턴으로 통일한다"고 되어 있는데, 이번 diff에는 앱 다운로드 카드 관련 변경이 없는 것 같습니다. 의도적으로 범위에서 빠진 건지, 문서만 남은 건지 궁금합니다.
2. docs/superpowers/plans, docs/superpowers/specs 문서는 작업용 계획 문서로 보이는데, 저장소에 같이 커밋하는 게 의도하신 걸까요?
3. tests/sign-in-responsive.test.mjs가 소스의 클래스 문자열을 정규식으로 검사하다 보니(/px-4 py-6/, /sm:px-7 sm:py-10/ 등) 클래스 순서만 바뀌어도 깨질 수 있을 것 같습니다. 순서에 의존하지 않도록 클래스를 토큰 단위로 나눠서 포함 여부만 확인하는 방식은 어떨까요?

[sunwoo162]

작업 과정에서 사용한 내부 작업 계획·설계 문서가 실수로 PR에 포함된 것을 확인해 삭제했습니다. 기능 코드와 테스트에는 영향이 없으며, 혼선을 드려 죄송합니다. 이후에는 해당 작업 문서를 PR에 커밋하지 않겠습니다.

[sunwoo162]

리뷰 3번 피드백 반영했습니다.

tests/sign-in-responsive.test.mjs의 Tailwind 클래스 검사를 정규식 기반 문자열 비교에서 토큰 단위 포함 여부 검사로 변경해 클래스 순서가 바뀌어도 테스트가 깨지지 않도록 수정했습니다.

변경 후 테스트, TypeScript 검사, lint 모두 통과했고 9684431 커밋으로 push했습니다.

[sunwoo162]

리뷰 1번 답변드립니다.

앱 다운로드 카드는 기존부터 w-full max-w-110이 적용되어 있어 이번 diff에서는 별도 변경하지 않았습니다. 이번 작업 범위는 고정 폭으로 인해 모바일에서 잘리던 로그인 카드와 인증 레이아웃을 반응형으로 수정하는 것이었습니다.