Skip to content

fix(css): 알림이 글자 몇 개 폭으로 접히던 문제 수정 - #101

Merged
jlc488 merged 1 commit into
mainfrom
fix/toast-width
Oct 19, 2026
Merged

jlc488 merged 1 commit into
mainfrom
fix/toast-width

Conversation

@jlc488

@jlc488 jlc488 commented Oct 19, 2026

Copy link
Copy Markdown
Contributor

무엇이 문제였나

Ark(Zag)는 알림을 알림 영역 안에 절대 위치로 놓습니다. 그런데 영역에는 흐름 안의 내용이 없어 폭이 0입니다. 알림이 그 폭에 맞춰 줄어들어, 한국어 문장이 몇 글자마다 줄바꿈되었습니다. Contract·Admin·Accounts에서 103px로 실측됐고, 세 앱은 지금 각자 임시 규칙으로 막고 있습니다.

무엇을 바꿨나

  • 알림 폭: 알림이 자기 글 폭을 가지고, 기존 360px 상한은 그대로입니다. 영역의 끝 모서리에 붙으며, 논리 속성이라 오른쪽에서 왼쪽으로 쓰는 문서에서도 맞습니다.
  • 긴 문자열: 끊을 곳 없는 주소나 식별자는 상자 안에서 줄을 바꿉니다.
  • 한국어 단어 줄바꿈은 넣지 않았습니다: D-030대로 각 제품이 자기 뿌리에서 정합니다.

확인

  • React·Solid 컴포넌트 예제에 긴 한국어 알림과 짧은 알림을 넣었습니다. 1280px·390px에서 폭, 화면 안쪽, 글 넘침을 재는 브라우저 테스트를 추가했습니다.
  • 수정 전에는 4건 모두 실패(폭 103px)했고, 수정 후 모두 통과했습니다.
  • 로컬에서 CI 단계를 모두 돌렸습니다. 카나리 미리보기 점검 하나만 이 Windows 컴퓨터에서 서버 시작이 5초 대기를 넘겨 실패했습니다. 직접 띄우면 3초 뒤 200으로 응답하며, 이번 변경(스타일과 테스트 예제)과는 관계가 없습니다.

다음

  • 배포 후 Contract·Admin·Accounts에서 DDS를 올리고 임시 규칙을 지웁니다.

Ark(Zag)는 알림을 알림 영역 안에 절대 위치로 놓는데, 영역에는 흐름 안의
내용이 없어 폭이 0이다. 그래서 알림이 그 폭에 맞춰 줄어들어 한국어 문장이
몇 글자마다 줄바꿈되었다(Contract·Admin·Accounts에서 실측 103px).

- 알림이 자기 글 폭을 갖고(최대 360px 상한 유지) 영역의 끝 모서리에 붙는다.
  논리 속성이라 오른쪽에서 왼쪽 문서에서도 맞다.
- 끊을 곳 없는 긴 문자열(주소, 식별자)은 상자 안에서 줄을 바꾼다.
- 한국어 단어 단위 줄바꿈은 dds.css에 넣지 않는다(D-030, 각 제품의 뿌리 규칙).
- React·Solid 컴포넌트 예제에 긴 알림을 넣고 1280·390px에서 폭·화면 안쪽·
  글 넘침을 재는 브라우저 테스트 추가(수정 전 4건 실패 확인).
@jlc488
jlc488 merged commit 4532626 into main Oct 19, 2026
2 checks passed
@jlc488
jlc488 deleted the fix/toast-width branch October 19, 2026 01:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant