진행 상황 공유
•
FE
◦
종승 : Planner Detail
▪
문제점 : 서버에서 날짜에 따라 필터링해서 하위 todo들을 가져오게 되는데 날짜를 변경하게 되면 어떤 todo가 해당 날짜의 하위 todo와 연결되는지 꼬일 수 있다
▪
현재 FE 에서 생각한 Plan Detail 로직
•
처음 여행 시작일, 종료일을 정하지 않고 시작
•
추가하기 누르면 뒤에 하나씩 늘어남
•
삭제는 가장 마지막 여행만 삭제됨
•
변경은 첫 번째 날짜만 변경 가능함
•
보이는 UI 화면에는 날짜가 적혀있지만 실제로는 (날짜와 상관없이) 제일 왼쪽(첫 번째 열)이 dateId1 부터 순서대로 추가(나열) 됨
◦
첫 번째 날짜를 변경하면 화면에 보이는 그 뒤 날짜들은 자동으로 + 1일씩 되지만
◦
dateId 는 그대로 첫 번째 날짜부터 1, 2, 3 으로 오름차순이며 변경되지 않음
•
dateId 로 전송되므로 서버에서는 날짜를 알 수 없음
◦
플래너 리스트를 조회할 때 서버에서는 어떻게 가져와서 보여줄 지 고민 필요
▪
BE 의 고민
•
Planner 시작할 때 정한 날짜를 웹소켓으로 연결하는게 어렵다
•
PlanDetail 에서 웹소켓으로 관리되는 날짜(start-date, end-date)를 어떻게 PlannerList의 rest api와 연동시킬 지
▪
예슬 : 날짜용 웹소켓을 새로 만들어서 시작 날짜, 종료 날짜 만 따로 실시간으로 보내고 → 데이터베이스에 저장되면→ 플래너 리스트 조회할 때에는 데이터베이스에서 rest api로 꺼내오는 방법 ?
◦
설화 : 모달
▪
Promise Modal은 성공 못함
▪
useModal() 커스텀 훅으로 분리
•
이유: modal open과 각 모달에 내려줄 데이터만 모달 상위 컴포넌트에서 관리하고
•
close 모달 등 모달 자체의 로직은 modal 컴포넌트 내부로 숨겨서 컴포넌트의 책임 분리
•
모달의 open, close를 전역 상태(recoil)로 관리해서 추후 중첩 모달 등이 생긴다면 관리가 용이하지 않을까 (예상)
▪
친구 추가 모달에서 친구 검색시, 체크 되어 있는 체크박스로 해당 친구가 추가된다는 표시는 보여주되, 체크를 해제할 수 없도록 막아둠
•
체크박스가 있는데 해제할 수 없는게 로직이 어색하다
•
카카오톡, 노션의 친구 초대 : 검색 → 해당 친구 클릭 (여러명 클릭 가능)→ 초대 버튼 클릭
•
체크박스가 해제된 상태로 submit(초대) 버튼을 누르면 submit 되지 않고 1명이상 선택해달라는 alert 이 뜨도록 하는 방법?
→ 친구 추가 모달과 플래너 추가 모달을 공통 모달 컴포넌트로 사용하려면 로직이 비슷해야 하는데 체크박스 유무에 따라 submit 버튼의 동작 방식이 달라지면 로직이 달라서 굳이 하나의 모달을 공통으로 쓰는게 의미있을까? 싶다
⇒ 친구 추가의 체크박스 빼기로
⇒ 친구 초대 모달 / 플래너 추가 모달의 로직이 다르니 차라리 두 모달을 분리하고, 친구 초대 모달의 체크박스 추가 (친구 검색 → 체크박스 클릭 → 초대하기 클릭)
◦
예슬 : 프로필
▪
axios instance에서 토큰 bear 글자 빠져서 추가함
▪
new FileReader() 로 프로필 이미지 미리보기 구현
▪
form data 객체에 파일 잘 들어갔는지 어떻게 확인할 수 있는지?
•
그냥 console.log(formdata)로는 안보이고 get 메서드를 사용해야 확인할 수 있음
•
console.log(formData.get(’지정한 이름’))
▪
프로필 이미지(file)와 닉네임(string) form data 에 append 해서 post 요청 보내는데 안 됨
•
각 파일을 blob 객체에 담아서 content-type 을 각각 지정해서 보내야 함