어제 최종발표 때 받은 피드백에 따라서, 명함을 저장할 때 어떤 모임에서 교환한 것인지를 함께 저장하는 기능을 넣어보기로 했다. 그에 앞서 선행해야 할 작업이 바로 POST 요청의 위치를 바꾸는 것이었다. 사실 POST 요청 위치는 모임 등의 추가정보를 함께 저장하든 아니든 무조건 위치를 변경해야 한다고 생각했다.
상대방과 '툭' 주먹을 쳐서 교환하는 위와 같은 페이지가 나오기 전에 이미 POST 요청이 이루어져서 상대방과 명함이 교환된다는 것이 이상하다고 생각했기 때문이다. 미리 DB에 친구 관계 형성까지 되고나면, 주먹은 그냥 눈속임밖에 되지 않는다. 하지만 주먹을 치고나서야 nearby connection를 통해 상대방과 교환한 payload에서 추출해낸 id를 가지고 명함 수락 페이지로 넘어가고, 거기서 명함을 수락하게 한다면 '주먹인사'의 당위성이 생긴다. 상대방과 주먹인사를 하지 않으면 명함을 볼 수 없고, 그러면 명함을 저장할 수 없기에 교환이 제대로 이루어지지 않기 때문이다.
따라서 TOOK 교환과정의 로직을 다소 수정하고, 이를 Flutter에 반영하는 작업을 하였다.
이 명함은 다른 팀의 팀장인 친구 왕개미님이다 ... 😍 (우리 팀의 인기 명함)
이제는 주먹인사 후에 상대방의 명함이 도착했다는 메세지와 함께, 명함을 확인하도록 한다. 거기서 반가워요! 를 선택해야만 그때 POST 요청이 이루어지고, 성공하면 내 명함첩에 추가된다. 교환 직후 나오는 팝업창에서 '프로필 보기'를 선택하면 gif에 나타나듯이 마이페이지가 나오고, '나중에 보기'를 선택하면 명함첩으로 이동하게 된다.
툭으로 명함 교환 직후에 나오는 상대방의 프로필페이지에서는 DM 버튼을 누르면 채팅방은 생성되지만 에러가 난다. 왜 그런가 살펴보니, 채팅방 관리 API는 나-상대방, 상대방-나 의 연결정보(connection)가 각각 있다는 가정 하에 서로가 메세지를 몇 개나 읽지 않았는지 등의 정보를 용이하게 관리하도록 하였다. 하지만 채팅방 생성 로직에 결함이 있어서, 나-상대방 의 연결정보만 있어도 chatroom을 생성해주고 소켓방을 배정해주고 있었다.
따라서, 우선 BE 로직을 수정해주었다.
// chatroom.service.js // BE
chatroom = await chatrooms.findChatRoom(users);
// 여기서 chatroom을 못찾아서 비어있으면 생성해주기
if (chatroom != null) {
res.send(chatroom.id.toString()); // 참여할 채팅방 아이디만 돌려주면 되는경우
} else {
const connectionlist = await connections.findAllConnectionsIds(users);
if (connectionlist.length < 2) {
// 맞팔로우가 아닌 경우, 생성해주지 않도록 수정
res.send('0');
위와 같이 만약 나-상대방의 연결 정보만 있는 경우에는 채팅방을 생성해주지 않고 유효하지 않은 chatroom 아이디로 0을 내어주도록 하였다. Flutter에서는 이를 기반으로 채팅방에 입장할 수 있는지를 확인하게 수정했다. 그리고 일방적인 팔로우 관계인 경우엔 채팅방에 입장시키는 대신 메세지를 띄워주도록 했다.
// profile_page.dart // FE
if (chatroomID > 0) {
....
}
else{
errorDialog('명함이 서로 있어야 대화가 가능합니다 🙇🏻');
}
명함첩을 잘 나오게 해보려고 별별 패키지를 다 찾아보았다.
그 중 가장 마음에 드는 것은 VerticalCardPager 라는 것인데, 이렇게 생겼다.
다만 문제가 있는데, 우리의 명함은 사진만으로 이루어져 있지는 않다는 것이다.
그래서 자꾸 태그를 넣어놓은 Row에서 오버플로우가 나고 있다.
디자인적으론 워낙 괜찮아보여서 어떻게든 꼭 적용해보고 싶은데....