Skip to content

[Fix/#102] PWA에서 챗봇 입력창을 누르면 화면이 확대되는 문제 수정 #103

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
xeoxxn wants to merge 1 commit into from
Closed

[Fix/#102] PWA에서 챗봇 입력창을 누르면 화면이 확대되는 문제 수정 #103

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 5 additions & 2 deletions src/features/chat/components/ChatInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,11 @@ interface ChatInputProps {
// 비활성 회색(#e1e2e4) 전송 버튼)와 state=Active(nodeId 1770:61488, 입력 있음: 검정 텍스트 +
// 파란(primary) 전송 버튼)를 입력값 유무로 토글한다. WDS `TextField`는 box-shadow +
// backdrop-blur(32px)가 기본이라 Figma의 flat 배경(그림자 없음)과 달라 재사용하지 않는다.
// 텍스트 스타일(15px/0.0096em)은 WDS Typography의 body2 값을 그대로 따랐다 — Typography
// 텍스트 스타일(0.0096em)은 WDS Typography의 body2 값을 그대로 따랐다 — Typography
// 컴포넌트 자체는 자기 태그를 렌더링해서 네이티브 input에는 못 씌운다.
// 글자 크기만 body2(15px)가 아니라 16px이다: iOS Safari는 focus된 입력 요소의 computed
// font-size가 16px 미만이면 화면을 자동 확대하는데, standalone PWA에서는 확대된 배율이
// 원래대로 돌아오지 않아 화면이 커진 채로 남는다. 16px은 그 확대를 막는 하한선이다.
// disabled(코드리뷰 지적 반영): 봇 응답을 기다리는 동안 또 보내면 앞선 응답 타이머가 취소돼
// 그 메시지에 대한 응답이 영영 안 온다 — 응답이 올 때까지 입력 자체를 막는다.
const ChatInput = forwardRef<HTMLInputElement, ChatInputProps>(
Expand All @@ -29,7 +32,7 @@ const ChatInput = forwardRef<HTMLInputElement, ChatInputProps>(
}}
>
<input
className="min-w-0 flex-1 bg-transparent text-[0.9375rem] text-label-normal leading-[1.375rem] tracking-[0.0096em] placeholder:text-label-assistive focus:outline-none"
className="min-w-0 flex-1 bg-transparent text-base text-label-normal leading-[1.375rem] tracking-[0.0096em] placeholder:text-label-assistive focus:outline-none"
disabled={disabled}
onChange={(event) => onChange(event.target.value)}
placeholder="Stream AI에게 무엇이든 물어보세요"
Expand Down
Loading