💄 편지 작성 - 완료 UI

ding-co commented 1 year ago

📎 이슈번호

83

📃 변경사항

[x] 편지 작성 - 완료 UI
[x] MVP 단계에서 빠지는 디자인 정리
[x] completed01, 02 두 개의 쿼리 파라미터를 이용한 라우터 분리
[x] util 함수 제작 및 사용
- src/utils/date.ts - getDateTimeFormat
- src/utils/LetterWrite.ts - getDeletedHTMLTagesFromString
[x] 커스텀 훅 제작 및 사용 (src/components/features/LetterWrite/InputRecipient/Hooks/index.ts - useTextLengthPixel)
[x] recoil store 변경 (lastSentence 추가, situation 데이터 형식 id만 설정)
[x] completed01 -> completed02 넘어가는 사이 setTimeout 걸어서 progress 화면을 모달 형식처럼 보여주면서 처리
[x] 공통 스타일 적용, 디자인 import theme 리팩토링, 불필요 스타일 정리
[x] Slider 컴포넌트 goToAction 추가
[x] 전반적인 플로우 및 로직 수정, 정리
[x] 상황 UI - 템플릿 이미지, 설명 수정 및 추가

📌 중점적으로 볼 부분

CompletedForm01 컴포넌트 (src/components/features/LetterWrite/InputRecipient/Forms/CompletedForm01.tsx)
CompletedForm02 컴포넌트 (src/components/features/LetterWrite/InputRecipient/Forms/CompletedForm02.tsx)
LetterWriteCompleted 컴포넌트 (src/components/features/LetterWrite/InputRecipient/Loadings/LetterCompletedProgress.tsx)

🎇 스크린샷

https://user-images.githubusercontent.com/80014673/210162047-fb4e66fb-7358-4b02-b982-5a59dabcb525.mov

💫 기타사항

✔ 체크리스트

[x] 브랜치 전략에 맞는 브랜치에 PR을 올리고 있습니다. (master/main이 아닙니다.)
[x] 커밋 메세지를 컨벤션에 맞추었습니다.
[x] 변경 후 코드는 컴파일러/브라우저 warning/error 가 발생시키지 않습니다.
[x] 변경 후 코드는 기존의 테스트를 통과합니다.
[x] 테스트 추가가 필요한지 검토해보았고, 필요한 경우 테스트를 추가했습니다.
[x] docs 수정이 필요한지 검토해보았고, 필요한 경우 docs를 수정했습니다.

ding-co commented 1 year ago

Screenshot 2023-01-01 at 2 42 52 PM

@Dongkyuuuu @numeru @KimGaeun0806

이 부분 작업할 때 개인적으로 퍼블리싱으로 떠오르지 않아서 시간이 좀 걸렸습니다. input이 focus 되지 않았을 때는 길게 기본적인 width를 가지고 placeholder가 있으며 focus를 하는 순간 줄어들어서 텍스트를 입력하면 그것에 맞게 가변적으로 늘어나는 디자인입니다.

css 만으로는 컨트롤 하기 쉽지 않다고 생각하여 커스텀 훅을 하나 만들었습니다. (src/components/features/LetterWrite/InputRecipient/Hooks/index.ts - useTextLengthPixel) 화면에 보이지 않게 span 태그를 하나 만들어서 그 span 태그에 텍스트 (사용자가 입력하는 한마디)를 넣어서 그 텍스트의 offsetWidth를 구합니다. 그러면 텍스트에 대한 width를 구할 수 있습니다. 그리고 return 할 때 span을 삭제해서 무제한 생성되는 것을 방지합니다. (하나만 생성되고 페이지 바뀌면 사라짐)

가변적으로 고정 px 같은 css로 처리하기 애매했던 점이 영어나 한글 같은 경우 고정폭에 대한 길이가 서로 달라서 js로 width를 계산한다음 css로 처리하였습니다.

하지만 width가 정확히 맞지 않는데 쌍 따옴표 사이 간격이 글자 수가 늘어날수록 조금 벌어집니다. 이런 이슈가 있지만..

혹시 한번 보시고 더 좋은 방법이나 현재 width 간격 늘어나는 것에 대한 개선 방안이 있으시면 말씀해주세요!

Dongkyuuuu commented 1 year ago

input focus일때 width: fit-content 처리는 안되는 걸까요?

ding-co commented 1 year ago

input focus일때 width: fit-content 처리는 안되는 걸까요?

해봤었는데 잘 안되더라구요.. input 같은 경우에는 상위 요소에 따라 기본적으로 100%가 먹을 것이고, 바깥 div에 걸어도 input까지 영향이 안가네요. (자식들 width: inherit나 100% 해도요..)

혹시 시간 되시면 한 번 해주시면 감사드리겠습니다.

depromeet / ggogeet-client