[작업일지] 2025.01.22(수) - 채팅 화면 MVVM패턴으로 변경, 디자인 개선

오늘 목표

- 현재 MV로 구현된 채팅방, 목록 페이지 -  MV VM 패턴으로 분리하기
- 채팅방 화면 디테일 - 키보드가 나오거나 입력한 뒤 최근 메시지가 제일 아래에 보이도록 설정

- 상품 등록화면 디자인 개선

- 홈 메인화면 디자인 개선

 

내일 목표

- 백 마이바티스 연결해서 JSON 쏴주기

- JSON 클래스로 변환해서 화면에 출력하기

 

상품 등록 페이지 디자인 개선

채팅방 추가된 기능

- 키보드 외의 화면 터치나 드래그 시 키보드 자동으로 내려감

ListView.builder(

                  // 리스트를 드래그하면 키보드가 내려가도록 하는 코드
                  keyboardDismissBehavior:
                      ScrollViewKeyboardDismissBehavior.onDrag,
                  controller: _scrollController,
                  itemCount: room.messages.length,
                  itemBuilder: (context, index) {
                    final message = room.messages[index];
                    final isMyMessage = message.sender_id == myId;

                    return Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 16.0),
                      child: Row(
                        mainAxisAlignment: isMyMessage
                            ? MainAxisAlignment.end
                            : MainAxisAlignment.start,
                        children: [
                          _buildMessageTimestamp(
                              isMyMessage, message.created_at),
                          SizedBox(width: isMyMessage ? 5 : 0),
                          _buildMessageContainer(
                              isMyMessage, message.message, context),
                          SizedBox(width: !isMyMessage ? 5 : 0),
                          _buildMessageTimestamp(
                              !isMyMessage, message.created_at),
                        ],
                      ),
                    );
                  },
                )

- 키보드가 올라오면 최신메시지가 보이도록 함

오늘 느낀점

모바일 개발에서 사용자 UI 가 굉장히 중요하다는 점과 생각해야할 부분이 많다는 것을 느꼈음