모바일 텍스트 잘림 및 공고 폼 UI 개선

[yhaeul]

현상

기기별 화면 비율과 글꼴 렌더링 차이에 따라 일부 모바일 UI가 피그마와 다르게 표시되었습니다.

• 동아리 목록의 후기 필 텍스트 위아래가 잘림
• 최근 검색어 칩에서 g, j 등 영문 하강부가 잘림
• 동아리명, 한 줄 소개, 이름, 전화번호, 학번 등 단일 행 입력창의 텍스트가 잘리거나 위아래로 스크롤됨
• 정기 모임 시간이 09:0 / 0처럼 줄바꿈됨
• 활동 장소와 가입 절차 입력창의 높이 및 아이콘 배치가 피그마와 다름
• 모집 마감 문구의 폰트와 색상이 디자인과 다름
• 공고 등록 안내 문구가 의도하지 않게 3줄로 표시됨
• 동아리 후기 키워드 렌더링 시 중복 key 경고가 발생함

원인

• 글자 크기에는 가로 기반 ms, 컨테이너 높이와 lineHeight에는 세로 기반 vs를 혼용하고 있었습니다.
  • 화면 높이가 작은 기기에서는 lineHeight가 글자 크기보다 작아져 상하 영역이 잘릴 수 있었습니다.
• 후기 필과 최근 검색어 칩이 고정 높이를 사용해 기기별 폰트 메트릭 차이를 수용하지 못했습니다.
• 단일 행 TextInput에 큰 세로 패딩과 고정 높이가 함께 적용됐고, 명시적인 폰트 및 lineHeight 설정이 없었습니다.
• 정기 모임 시간 드롭다운의 너비가 시간 문자열을 한 줄로 표시하기에 부족했습니다.
• 활동 장소와 가입 절차 입력창에서 아이콘까지 테두리 내부에 포함되어 피그마와 다른 크기와 구조가 만들어졌습니다.
• 공고 등록 안내 문구의 강제 줄바꿈 위치보다 먼저 자동 줄바꿈이 발생했습니다.
• 후기 키워드 객체를 문자열 key에 사용하면서 여러 항목이 동일한 [object Object] key를 생성했습니다.

수정 결과

텍스트 잘림 개선

• 후기 필과 최근 검색어 칩의 고정 height를 minHeight로 변경했습니다.
• 글자 크기, lineHeight, 세로 여백을 ms 기준으로 통일했습니다.
• 최근 검색어 칩은 전체 24px 높이를 유지하면서 lineHeight를 14px로 확보해 영문 하강부가 잘리지 않도록 했습니다.
• 기존 색상, 가로 여백, 테두리와 말줄임 동작은 유지했습니다.

단일 행 입력창 개선

• 입력창 전용 textInputMedium typography를 공통 정의했습니다.
• Pretendard Medium 16px 및 24px lineHeight를 명시했습니다.
• 기본 세로 패딩을 제거하고 텍스트를 수직 중앙 정렬했습니다.
• Android 기본 폰트 패딩을 제거했습니다.
• 고정 높이를 최소 높이로 변경해 기기별 폰트 메트릭 차이를 수용하도록 했습니다.

공고 폼 개선

• 정기 모임 시간 드롭다운 너비를 76px에서 90px로 늘리고 한 줄 표시를 보장했습니다.
• 활동 장소와 가입 절차 아이콘을 입력창 테두리 외부로 이동했습니다.
• 해당 입력창을 피그마 기준 높이 40px, Pretendard Medium 14px, lineHeight 24px로 조정했습니다.
• 모집 마감 문구를 Semibold 20px 및 보라색으로 변경했습니다.
• 공고 등록 안내 문구의 줄바꿈 위치를 조정해 다음과 같이 안정적으로 2줄로 표시되도록 했습니다.

공고는 언제든 동아리 관리 → 공고 관리
  탭에서 수정/등록 가능해요

기타

• 후기 키워드의 React key를 고유한 keyword.id로 변경해 중복 key 경고를 제거했습니다.

스크린샷 (선택)

구분	Before	After
동아리 후기 필
단일 행 입력창
공고 등록 폼 (1)
공고 등록 폼 (2)
공고 등록 안내 문구
최근 검색어 칩

체크

• 정상 동작 확인
• UI 깨짐 없음
• 콘솔 에러 없음