[DESIGN] 작은 화면 주요 UI 깨짐 대응#65
Conversation
| @@ -22,11 +25,13 @@ export interface FolderCardProps { | |||
| export function FolderCard({ | |||
There was a problem hiding this comment.
FolderCard - measure() 콜백에서 변수 섀도잉
// width prop이 컴포넌트 스코프에 존재
export function FolderCard({ folderName, urlCount, width, ... }) {
const cardWidth = width ?? DEFAULT_CARD_WIDTH;
const handleMorePress = () => {
moreRef.current?.measure((_fx, _fy, width, height, px, py) => {
// ↑ prop 'width'를 섀도잉!
onMorePress?.({ x: px, y: py, width, height });
});
};
현재는 콜백 내 width가 measure()가 반환한 측정 너비이므로 동작에는 문제없지만, TypeScript/ESLint에서 경고가 발생하고 향후 수정 시 혼란의 여지가 있습니다.
measuredWidth로 이름 수정을 제안 드립니다.
There was a problem hiding this comment.
피드백 감사합니다!
확인해보니 FolderCard 컴포넌트의 width prop과 measure() 콜백의 width 파라미터가 같은 이름을 사용하고 있었습니다.
현재 콜백 내부의 width는 measure()가 반환한 측정 너비라 동작에는 문제가 없지만, 컴포넌트 prop의 width와 의미가 달라 향후 수정 시 혼란을 줄 수 있다고 판단했습니다.
현재 프로젝트 lint 설정에서는 해당 섀도잉으로 경고가 발생하지는 않았지만, 가독성과 유지보수성을 위해 반영했습니다.
수정 내용은 다음과 같습니다.
measure() 콜백 파라미터 width → measuredWidth
measure() 콜백 파라미터 height → measuredHeight
onMorePress에 전달하는 anchor 값도 변경된 변수명을 사용하도록 수정
| "preview-device": { | ||
| "distribution": "internal", | ||
| "env": { | ||
| "EXPO_PUBLIC_API_BASE_URL": "http://192.168.0.12:8080" |
There was a problem hiding this comment.
eas.json에 개인 IP 하드코딩
이 IP는 해당 개발자 네트워크에서만 동작합니다.
다른 팀원이 그대로 사용하면 API 연결 실패합니다.
.env.local로 분리하거나, 주석으로 "사용 전 IP 변경 필요"를 명시해야 합니다.
개인 IP이기 때문에 코드에서 노출을 제외가 필요해 보입니다.
There was a problem hiding this comment.
피드백 감사합니다!
해당 값은 Android 실기기 preview 빌드에서 로컬 백엔드에 접근하기 위해 임시로 추가했던 개인 네트워크 IP였습니다.
말씀해주신 것처럼 이 IP는 제 로컬 네트워크에서만 유효하기 때문에, 다른 팀원이 동일한 profile로 빌드하면 API 연결이 실패할 수 있다고 판단했습니다. 또한 개인 네트워크 주소가 저장소에 남는 것도 적절하지 않다고 봤습니다.
따라서 eas.json의 preview-device profile에서 EXPO_PUBLIC_API_BASE_URL 하드코딩을 제거하고, EAS preview environment를 사용하도록 수정했습니다.
수정 내용은 다음과 같습니다.
preview-device:
- 기존: eas.json 내부 env에 개인 IP 직접 설정
- 변경: environment: "preview" 지정
이후 Android 실기기 preview 빌드에 필요한 API 주소는 저장소에 커밋하지 않고, EAS Environment Variables의 preview 환경에서 EXPO_PUBLIC_API_BASE_URL로 관리하도록 하겠습니다.
2 participants
Closes #40
개요
작은 화면 또는 세로 공간이 짧은 Android 환경에서 홈, 링크 추가, 검사 중, 검사 결과, 폴더 화면의 UI 요소가 과하게 크게 보이거나 하단 탭 바와 가까워지는 문제를 개선했습니다.
이번 작업에서는
useWindowDimensions()로 현재 화면의 폭과 높이를 확인한 뒤, 일정 기준보다 좁거나 짧은 화면에서는 compact 스타일을 적용하도록 구성했습니다. compact 상태에서는 타이틀 typography, 컴포넌트 간격, 카드 padding, 버튼 높이, 검사 결과 아이콘 크기 등을 줄여 주요 정보와 액션 버튼이 한 화면 안에서 더 안정적으로 보이도록 조정했습니다.또한
useBottomTabBarHeight()로 하단 탭 바 높이를 가져와 ScrollView와 검사 화면의 하단 padding에 반영했습니다. 이를 통해 작은 화면에서도 마지막 카드나 버튼이 탭 바에 가려지지 않고 충분한 여백을 확보하도록 처리했습니다.폴더 화면은 고정 카드 폭만 사용하지 않고, 실제 그리드 영역의 너비를
onLayout으로 측정한 뒤 사용 가능한 폭에 맞춰 폴더 카드 너비를 계산하도록 변경했습니다. 기본 2열 배치를 유지하되, 폭이 부족한 경우 카드 폭을 줄이고, 2열 유지가 어려운 화면에서는 카드가 화면 밖으로 넘치지 않도록 가용 너비를 사용하게 했습니다.공용 컴포넌트인
ResultStatusIcon,SectionHeader,FolderCard에는 compact 또는 width 옵션을 추가해 각 화면에서 작은 화면 대응을 일관되게 재사용할 수 있도록 보완했습니다.주요 구현 내용
FolderCard에 외부 width prop을 추가해 좁은 화면에서도 카드가 넘치지 않도록 처리SectionHeader에 compact 옵션 추가파일별 역할
app/(tabs)/(home)/index.tsx: 홈 화면 compact 폭 대응, 섹션/통계 영역 간격 축소, 하단 탭 여백 보정app/(tabs)/(home)/add-link.tsx: 링크 입력 화면의 타이틀, 입력창, 안내 박스 compact 스타일 적용app/(tabs)/(home)/scanning.tsx: 검사 중 화면의 애니메이션 크기, 상단 여백, 버튼 높이 조정app/(tabs)/(home)/scan-result.tsx: 안전 결과 화면 compact 레이아웃 적용app/(tabs)/(home)/scan-result-caution.tsx: 주의 결과 화면 compact 레이아웃 적용app/(tabs)/(home)/scan-result-block.tsx: 차단 결과 화면 compact 레이아웃 적용app/(tabs)/(folder)/index.tsx: 폴더 카드 그리드 너비 측정 및 하단 탭 여백 보정components/ui/folder-card.tsx: 폴더 카드 width prop 추가components/ui/result-status-icon.tsx: 큰 상태 아이콘의 compact 표시 옵션 추가components/ui/section-header.tsx: 작은 화면용 label typography 옵션 추가eas.json: preview 환경 API 주소와 실기기 preview 빌드 프로필 추가해결한 이슈 목록
ResultStatusIcon,SectionHeader,FolderCard컴포넌트에 작은 화면 대응 옵션 추가체크 사항
npm run lint통과참고사항
변경 전 사진은 issue에 있는 캡쳐를 참고 바랍니다!
#40
Screenshots or Video