Feat: packagingOrders 컴포넌트 뷰 구현 및 prettier tailwind 플러그인 설치, 즐겨찾기 버튼 구현

[coco8j]

칸반 명

[APP] 📤송신자 - 매크로 행동 조합 화면 구현
[APP] 즐겨찾기 저장, 불러오기 버튼 구현

Mock up

구현 화면

해당 업무 리스트

조합화면 구현

• 행동지정에 따라 그에 맞는 적합한 체크박스가 나타나야한다
• 경로를 지정할 수 있어야 합니다.
• 행동을 지정할 수 있어야 합니다.
• 생성하기 행동일 경우 첨부하기 버튼이 보여야 합니다.
• 행동과 경로를 고르고 설정할 수 있는 버튼이 보여야 합니다.
• 행동들을 보낼수 있는 버튼이 있어야 합니다.
• 오른쪽에 저장된 행동과 경로, 첨부파일이 보여야 합니다.

즐겨찾기 기능 구현

⚠️ 해당 기능은 ‘로그인을 한’ 유저에게만 표시됩니다. ⚠️ 

• 서버에서 행동 정보를 받아오는 즐겨찾기 불러오기 버튼이 있어야 합니다.
• 서버로 행동 정보를 보내는 즐겨찾기에 추가 버튼이 있어야 합니다.

상세 기술

• 보내는 사람이 행동들을 조합하여 Package를 조합하는 화면에 대한 뷰 입니다.

참고사항

• 현재 동적인 부분은 Route 이외에 일절 구현되지 않았습니다.

• 경로선택의 경우, 파일 시스템을 이용한 접근이 필요하므로 '버튼' 타입으로 구현되어 있습니다.

• 즐겨찾기 버튼의 경우 BookmarkToolbar 라는 컴포넌트로, PackageOrders 하위로 생성되어 있습니다.

• tailwind 속성 정렬을 위해 prettier 플러그인을 설치하였습니다. 디펜던시를 다시 설치해 주시기 바랍니다.

npm install 

PR 체크 사항

주의 사항

• PR 크기는 300~500줄로 하되 최대 1000줄 미만으로 합니다.
• conflict를 모두 해결하고 PR을 올려주세요.

PR 전 체크리스트

• 가장 최신 브랜치를 pull 하였습니다.
• base 브랜치명을 확인하였습니다.
• 코드 컨벤션을 모두 확인하였습니다.
• 브랜치명을 확인하였습니다.
• 작업 중 dependency 변경사항이 있는 경우 안내해주세요!

리뷰 반영 사항

• svg 파일을 asset 으로 분리하였습니다.

[vlveqoo]

프리티어를 사용하니까 스타일 관련 코드들의 가독성이 확실히 높아졌네요! 좋은 도입제안이었다고 생각됩니다👍

[Farmer15]

여기서 value = "" 가 아무런 값이 안들어 있는데 해당 속성을 남겨주신 이유가 궁금합니다.🤔

[coco8j]

해당 <select> 태그를 제출했을 시, 서버로 전송되는 값은 선택된 <option>의 value 값입니다. 만약 value 속성이 명시되지 않았다면, <option> 태그 안에 적힌 텍스트가 서버로 전송됩니다. 반면, value 속성이 명시되었다면 해당 속성에 지정된 값이 서버로 전송됩니다.

저는 "행동을 선택해 주세요."라는 문구를 기본 안내문(placeholder)으로 사용하고자 했습니다. 따라서 value를 빈 문자열("")로 명시하였고, 유저가 이 기본값을 선택했을 경우 서버에서는 빈 값으로 이를 처리하게 됩니다. 이후 서버에서 유효성 검사를 통해 유저가 올바르지 않은 값을 제출했다는 점을 판단할 수 있게 됩니다.

이러한 이유로 이 방식을 사용하게 되었습니다. 🙂