최종 팀 프로젝트 30일차

1. 오늘 한 일

• 스크럼 회의 + 디자이너 전체회의
• 멘토링 준비
• stomp를 통한 웹소켓 (채팅방 리스트 CSS 완료)
• hotfix 사항들 정리(navigate 이슈, 폰트, 채팅방 리스트 정상 작동 구현 완료)
• Jira 관리 통한 팀원 진도 체크

  오늘까지 반영사항은 깃허브 finalProject에 merge함

1. 스크럼 회의 + 디자이너 회의 + 성능 측정 특강

• 스크럼회의(14:00)

  • FE : (역할 재분배 후 작업 시작) 웹소켓 이용한 트러블슈팅 해결 및 채팅방 CSS 완료(채팅리스트만 나오면 됨), 코드 인스턴스화 완료, 금일 중 프론트엔드 2차 최종머지 후 도메인 구매 예정 + 테일윈드 50~60%이상 진행 중, 코드 인스턴스화(프라이싱 인풋)
  • BE : 웹소켓 채팅방 완료, 토큰 만료되었을 때 어떻게 처리할지(채팅방 레디스는 이후 고려사항) + CI 됐고 CD오늘 저녁 중~내일 아침 중 완료 예정, api최적화 웹소켓 붙이고 작동해보기 ⇒ 머지 한 번 하기 + 쿼리최적화, 코드 리팩토링 진행 중(시스템 아웃 코드 제거) + 코드리팩토링, 자료 찾아보는 중
  • 협조사항 : 멘토링 준비, 토큰 만료 시 어떻게 재발급 받을지 방법 논의(만료되었을 시 로그아웃시키고 로그인화면으로 보내거나 갱신)

• 디자이너 전체회의(19:30)

  • 카드 뉴스 수정 완료
  • 배너 2안 추가 버전
  • 판매자만 볼 수 있는 판매중 표시
  • 판매중 모달 수정
  • 채팅 / 채팅리스트 구현
  • 토큰만 ⇒ 만료되었을 때 로그인으로 보내기. 따로 디자인 X
  • 이의제기는 채팅 추후에 필요 없다 판단 시 제거

2. 멘토링 준비

• 백 / 프 이번주 한 일, 질문 사항, 기술적 추가 사항 정리

3. stomp를 통한 웹소켓 (채팅방 구현 완료 / 채팅방 CSS 완료)

- ***트러블슈팅 : 채팅방을 새로 개설한 다음 아무 말도 안 치고 나갔을 때 채팅방 리스트 전체가 보이지 않는 현상

⇒ 조건부 렌더링으로 length > 0일 때 보이게 하고 아닐 때(채팅방이 정상적이지 않을 때) 아예 null 처리를 해주는 방식으로 설정***```javascript

(chatList.jsx)
// 채팅방 list
<Div onClick={(e) => e.stopPropagation()}>
        {Room !== undefined &&
          Room !== [] &&
          Room.map((item, i) => {
            return (
              <div key={i}>
                {item.chatList.length > 0 ? (<>
                // 조건이 0보다 커야만, 즉 채팅이 있어야만 채팅방이 개설되는 로직
                <RoomList onClick={() => onClickChatting(item)}>
                  <Profile>
                <div><img src={item.postUserAvatarUrl} style={{ width: 44, height: 44, borderRadius:"50%"}}/></div>
               <div>
                
               <div>{item.postUserNickname} <Time>{item.chatList[item.chatList.length-1].sendDate}</Time></div>
                <Message>
                {item.chatList[item.chatList.length-1].message}
                // 스몰 이슈: 
                {/* 대화의 맨 마지막만 가지고 오는 로직이면 위와 같이 진행하면 됨 */}
                </Message>                
                </div>
                </Profile>
                <SellImg>
                {item.image !== undefined && (
                <>
                <img src={item.image.imgUrl} style={{ width: 44, height: 44}} />
                </>)}
                </SellImg>
                </RoomList>
                </>): null}
              </div>
            );
          })}

      </Div>

4. hotfix 사항들 정리(navigate 이슈, 폰트, 채팅방 리스트 정상 작동 구현 완료)

• navigate 이슈 : 아무때나 뒤로가기가 되어서 원하는 위치에 갈 수 있도록 이동 라우터 변경
• 폰트 :

- 트러블슈팅 : font가 적용이 안 되었다는 팀원의 헬프 요청

=> 전역에 먹히는 font.css를 만든 다음 적용해주고 안 먹히는 버튼 같은 경우는 inline style로 적용했다.

• 채팅방 리스트 정상 작동 구현 완료 등

5. chatting 코드 인스턴스화

(Apis.js)
// 채팅
  CreateRoomAX: (payload) => token.post(`/api/chat/room`, payload),

  GetRoomListAX: () => token.get(`/api/chat/roomList`),

  GetInitialChatListAX: (payload) => token.post(`/api/chat/roomInfo`, payload),
    // 위에서 토큰 관련 코드를 모두 선언해준 다음 아래서는 이와 같이 메소드와 경로를 설정해준다.

(ChattingSlice.js)
// 방만드는 코드
export const __CreateRoom = createAsyncThunk(
  "/chat/__CreateRoom",
  async (payload, thunkAPI) => {
    try {
      // const response = await axios.post(`${process.env.REACT_APP_SERVER}/api/chat/room`, payload.postId,
      const response = await Apis.CreateRoomAX(
        payload);
      return thunkAPI.fulfillWithValue(response.data);
    } catch (error) {
      return thunkAPI.rejectWithValue(error.response.data);
    }
  }
);
// 방리스트
export const __getRoomList = createAsyncThunk(
  "/chat/__getRoomList",
  async (payload, thunkAPI) => {
    try {
      const response = await Apis.GetRoomListAX();
      return thunkAPI.fulfillWithValue(response.data);
    } catch (error) {
      return thunkAPI.rejectWithValue(error.response.data);
    }
  }
);

// 메인 채팅 화면
export const __getinitialChatList = createAsyncThunk(
  "/chat/__getInitialChatList",
  async (payload, thunkAPI) => {
    try {
      const response = await Apis.GetInitialChatListAX(payload);
      return thunkAPI.fulfillWithValue(response.data);
    } catch (error) {
      return thunkAPI.rejectWithValue(error.response.data);
    }
  }
);

slice Thunk 부분이 한결 더 가벼워진다.

6. Jira 관리 통한 팀원 진도 체크

• 백엔드보다는 이제 프론트 관리가 필요

2. 느낀 점

• 웹소켓 디자인이 모두 나와서 해결이 되었다.
• CSS도 잘 되어서 다행이다. 디자인과 많이 유사해졌다.

3. 익일 할 일

• 멘토링(10:00~10:30)
• 배포 후 2차 QA(특히 아이폰 및 사파리 업로드 이슈)
• 팀원 진도 체크(프론트엔드)
• 도메인 사기 및 적용