✨ 편지 작성 - 플로우 설계 및 구현 (1-2, 5)

[ding-co]

📎 이슈번호

• 33

📃 변경사항

• 편지 작성 라우트 플로우 설계 및 구현
• 편지 작성 1-2, 5 구현 완료

📌 중점적으로 볼 부분

• 편지 작성 플로우
• 편지 작성 1-2, 5에 해당하는 컴포넌트

🎇 스크린샷

💫 기타사항

• 새로고침 시 데이터 저장을 위해 로컬 스토리지도 고려하고 있습니다.

✔ 체크리스트

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

[ding-co]

초반에 라우트 변경 없이 하려고 삽질하다가 라우트를 쿼리 스트링으로 구분하는게 나을 것 같아서 수정하여 커밋이 많습니다.

[ding-co]

작업하면서 만들어두신 컴포넌트 수정, 네브바 item 요소나 types 등 몇 가지 추가한 것들이 많아서 리뷰해주시면 재빠르게 리팩토링하고 merge 진행하겠습니다. PR Merge를 늦추면 나중에 충돌날 가능성도 커질 것 같습니다.

[KimGaeun0806]

icon파일들 이름 형식을 통일해야겠네용.. 다들 조금씩 다르게 쓰시는 것 같아요

[ding-co]

[공통 컴포넌트 변경사항]

• TagButton: margin collapse로 인해서 여러 태그가 있을 때 border로 active 상태를 표시하면 요소들이 서로 밀리는 경향이 있어서 내부에 태그를 하나 만들어서 position: absolute로 감쌌습니다.
• TopNavigation
  • 내부에 atoms 폴더 명으로 NavBar item으로 쓰이는 컴포넌트들을 만들어 두었습니다.
  • TopNavigation 컴포넌트의 height를 고정하였습니다. 네브바를 제외한 하위 main 태그 요소들에 대한 height를 계산하기 위함입니다.
• Input
  • 페이지 부분적으로 크기나 스타일 다른 것이 있어서 사용하는 페이지에서 커스텀 wrapper 태그를 만들어 감싸서 height를 inherit로 추가했습니다.
• Button
  • 버튼 컴포넌트의 props로 html 기본 인터페이스 상속을 받아 추가 속성을 처리하였습니다.
  • 커서 포인터, 정렬, 자간, disabled 디자인을 추가하였습니다.
• BottomButton
  • BottomButton의 경우 fixed, width: 100%, bottom: 0 으로 고정되어 있는데 디자인 상으로 맨 아래에서 조금 떨어져 있고, position: fixed 의 경우 부모 태그와의 관계가 끊겨서 width가 100%를 줘도 상대적으로 먹지를 않습니다. 그래서 양쪽 패딩이 16px씩 있으므로 calc으로 계산하여 고정시켰습니다. 그리고 추가적으로 커서 포인터, 자간 등 스타일을 추가했습니다.

[numeru]

넵 만든 공통 컴포넌트들 차차 storybook 에 추가하겠습니다!