최종 팀 프로젝트 21일차

1. 오늘 한 일

• 스크럼 회의 & 발표자료 제출 & 리드미 초안 작성
• 프론트엔드 간 Merge 후 CSS 안 되는 기능 재분배 및 Jira 정리
• (개인) 게시글 무한 스크롤 적용
• 배포 확인
• jira 등 팀원 체크

1. 스크럼 회의 & 발표자료 제출 & 리드미 초안 작성

• 스크럼 회의(14:00)

  • FE : 마이페이지 리디자인 + 디자이너 논의도 같이 하기(+버튼, 디테일 좋아요 위치, 도형 최대한 비슷하게, 검색/로그인/댓글 프레스로 되게 + 1000의 자리 찍히기 + 추천순/최신순 나누기) + 무한스크롤 손보기(되는데까지) + 메인페이지 리디자인, 소개페이지, 소셜로그인 배포용, 소셜로그아웃 + 로그인 회원가입 리디자인 진행중
  • BE : 에러로그 슬랙에 쏘는 것 진행중 + 웹소켓 진행 예정 + 댓글 사용자 프로필 띄우기 + CI/CD 진행중 + 에러 핸들러 작성(왜 안 된건지 뜰 것) + 기본가격 조사(오후 중 마무리 예정)
  • 협의사항 : 내일은 일찍 자기 + 회고록 토요일에 작성하는거 있음

• 리드미 완성은 중간발표 이후 ~ 최종 발표 전
  => 트러블 슈팅 등 안 들어간 내용 위주로 정리할 것

2. 프론트엔드 간 Merge 후 CSS 안 되는 기능 재분배 및 Jira 정리

• 역할 재분장 : Jira 업데이트 완료
  - 무한스크롤
  - 상품상세정보 버튼 눌렀을 시 안 보이는 것 + 소셜로그인/아웃
  - CSS 갈무리

3. (개인) 게시글 무한 스크롤 적용

(PostList.jsx)
const PostList = ({ posts, detail, __getDetail, state, setState }) => {
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const params = useParams();

  const onClickHandler = (data) => {
    dispatch(__getDetail(data));
    navigate(`${detail}/${data}`);
  };

  
  const [page, setPage] = useState(0); //페이지수
  const [loading, setLoading] = useState(false);
  const [ref, inView] = useInView();
/**  서버에서 아이템을 가지고 오는 함수 */
const obj = {
  page : page,
  state: state,
}
const getItems = useCallback(async () => {
  //의존하는 값(deps)들이 바뀌지 않는 한 기존 함수를 재사용할 수 있습니다.
  dispatch(__getAddPost(obj));
}, [page, params]);

// `getItems` 가 바뀔 때 마다 함수 실행
useEffect(() => {
  getItems();
}, [getItems]);
  useEffect(() => {
    setState({ ...state, pageNumber: page });
  }, [page]);

  

  useEffect(() => {
    // 사용자가 마지막 요소를 보고 있고, 로딩 중이 아니라면
    if (inView && !loading) {
      setPage((prevState) => prevState + 1);
    }
  }, [inView, loading]);

  useEffect(() => {
    setPage(0);
  }, [params]);
  
  ...
  ...
  
        <div ref={ref}></div>
      <Div></Div>
  // 바뀌는 파트 찾아서 ref 걸기. Div는 공간 만들기용

(PostsSlice.jsx)
export const __getAddPost = createAsyncThunk(
  "posts/__getAddPost",
  async (payload, thunkAPI) => {
    console.log(payload)
    try {

      const data = await axios.get(
        `${process.env.REACT_APP_SERVER}/api/post/${payload.state.paramObj}?page=${payload.page}&size=${payload.state.pageSize}&sort=${payload.state.postSort},DESC`,
        //백엔드에서 받아온 uri 맞춰주기

        {
          headers: {
            "Content-Type": `application/json`,
            Access_Token: accessToken,
            Refresh_Token: refreshToken,
            "Cache-Control": "no-cache",
          },
        }
      );
      const obj =  {
        payload: payload.page,
        data: data.data.content
      }
      // obj로 받아서 fulfill 시켜주기
      return thunkAPI.fulfillWithValue(obj);
    } catch (error) {
      return thunkAPI.rejectWithValue(error);
    }
  }
);

...
...

 [__getAddPost.fulfilled]: (state, action) => {
      state.isLoading = false;
      if(action.payload.payload === 0) {
        state.posts.splice(0)
        state.posts.push(...action.payload.data)

      }else{
        state.posts.push(...action.payload.data)
      }
   // 페이지 값이 0이 되게 하고 계속 반복되도록 한 로직 

4. 배포 확인

• 배포 후 소셜로그인/로그아웃 등 잘 되지 않는 부분, 무한스크롤 등 확인 => 크게 이상 없었음, 로그아웃 실패만 지속적으로 확인

5. jira 등 팀원 체크

• 많은 테스크 중 우선순위 위주로 완료 사항 지속 확인 => 기능 구현은 많이 끝냄(거의 추가구현만 남음)
• 디자인 완성 => 개인 CSS는 최대한 유사하게 작업 완료
• 배포도 4와 같이 완료

2. 느낀 점

• 배포 후 제대로 되는 것이 관건이다라는 것.. 생각보다 쉽지 않다.
• 무한스크롤 이번에 잘 익혀둔 것 같다.

3. 익일 할 일

• QA 지속
• LightHouse 측정
• 발표자료 피드백 질의응답 정리