[roominus] 팀 프로젝트 4주차 - 주차별 회고(4)

~오쪼라고 단체사진~

// ThemeDetailPage 전체 코드

import { gql, useQuery } from "@apollo/client";
import { useRouter } from "next/router";
import { useEffect, useState } from "react";
import { useRecoilState } from "recoil";
import { userInfoState } from "../../../src/commons/store";
import ThemeCommentList from "../../../src/components/units/theme/comment/list/ThemeCommentList.container";
import ThemeCommentWrite from "../../../src/components/units/theme/comment/write/ThemeCommentWrite.container";
import ThemeDetail from "../../../src/components/units/theme/detail/ThemeDetail.container";

const FETCH_THEME_REVIEWS = gql`
  query fetchThemeReviews($themeId: String!) {
    fetchThemeReviews(themeId: $themeId) {
      id
      clear
      rank
      content
      createdAt
      star
      user {
        id
      }
    }
  }
`;

const FETCH_RESERVATIONS_USER = gql`
  query fetchReservationsUser($page: Float) {
    fetchReservationsUser(page: $page) {
      id
      reservation_date
      theme_menu {
        reservation_time
        theme {
          id
          title
        }
      }
    }
  }
`;

interface IFetchReservationData {
  theme_menu: {
    theme: {
      id: string;
    };
  };
}

interface IFetchThemeReviewsData {
  id: string;
  user: {
    id: string;
  };
}

export default function ThemeDetailPage() {
  const router = useRouter();

  const [isReviewer, setIsReviewer] = useState(true);

  const [userInfo] = useRecoilState(userInfoState);

  const { data } = useQuery(FETCH_RESERVATIONS_USER, {
    variables: {
      page: 1,
    },
  });

  const { data: fetchThemeReviews } = useQuery(FETCH_THEME_REVIEWS, {
    variables: {
      themeId: router.query.id,
    },
  });

  useEffect(() => {
    fetchThemeReviews?.fetchThemeReviews.filter(
      (el: IFetchThemeReviewsData) => el.user.id === userInfo.id
    ).length >= 1
      ? setIsReviewer(false)
      : setIsReviewer(true);

    // 댓글 작성한 적이 있으면 댓글 다는 권한 false로 변경

    if (
      data?.fetchReservationsUser.filter(
        (ele: IFetchReservationData) =>
          ele.theme_menu.theme?.id === router.query.id
      ).length === 0
    ) {
      setIsReviewer(false);
    }

    // 예약한 내역이 없으면 댓글 다는 권한 false로 변경

    if (!userInfo.id) setIsReviewer(false);

    // 비로그인 회원이면 권한 false로 변경
  }, [fetchThemeReviews?.fetchThemeReviews]);

  return (
    <>
      <ThemeDetail />
      {isReviewer && <ThemeCommentWrite />}
      <ThemeCommentList />
    </>
  );
}

디테일 페이지에서 reviewer일때만 후기(댓글) 작성칸이 나타나도록 했다. 

 

 

useEffect(() => {
    fetchThemeReviews?.fetchThemeReviews.filter(
      (el: IFetchThemeReviewsData) => el.user.id === userInfo.id
    ).length >= 1
      ? setIsReviewer(false)
      : setIsReviewer(true);

    // 댓글 작성한 적이 있으면 댓글 다는 권한 false로 변경

    if (
      data?.fetchReservationsUser.filter(
        (ele: IFetchReservationData) =>
          ele.theme_menu.theme?.id === router.query.id
      ).length === 0
    ) {
      setIsReviewer(false);
    }

    // 예약한 내역이 없으면 댓글 다는 권한 false로 변경

    if (!userInfo.id) setIsReviewer(false);

    // 비로그인 회원이면 권한 false로 변경
  }, [fetchThemeReviews?.fetchThemeReviews]);

 예약 정보랑 댓글 데이터를 가져온다.

거기서 user.id 를 뽑아와서 현재의 userInfo.id와 비교한다. 

나는 filter로 id가 같은지 비교해보고 그게 1 이상이면(같은 게 있다면) ... 으로 조건식을 만들었다.

 

 변수이름에 대해 무지할 때라서 el, ele 같은 이름을 썼다... 

예약 정보에 있는 테마들의 id와 현재 테마의 id(router.query.id)가 같은 게 있는지 확인하고 없다면 setIsReviewer(false) 해주었다. 

 

 로그인을 안 한 경우엔 간단하게 userInfo로 확인할 수 있다. 

댓글을 작성하거나 삭제 했을 때마다 검증이 필요하므로 의존성 배열에 fetchThemeReviews를 넣었다. 

 

---

 

기억나는게 검색 만든거랑, 이미 리뷰 쓴 사람/예약 안 한 사람/비회원 댓글 작성창 못 보게 하게 만든 건데...! 

후자는 좀 문제가 있다. 오늘 고치러 왔다. 하하하! 

 

 이번주에는 우선순위 3차였던 것들도 조금 하고, 퍼블리싱도 다듬고, 추가 기능도 넣었다.

정말 마무리하는 느낌의 주~ 퍼블리싱은 고쳐도 고쳐도 또 고칠게 나와서 힘들었다... orz 

이슈가 600개가 넘었다! 충격... 선배기수가 한 팀에서 300갠가 했던 것 같아서 그것도 많다~ 생각했는데 600까지 갈줄이야...

 

 금요일엔 우리 단체사진도 찍고 개인 사진도 다 찍었다. 멘토님이 강의실 한 번 빌려주셔서 한 시간 동안 완전 미친듯이 찍었다! 햇빛이 잘 들어서 너무 좋았다. 진짜 조명키고 찍은 거랑 차원이 달라서 너무너무 감사하고 있다. LOVE 사진 찍고 돌아와선 오랜만에 회의하고 비용 정산할 것도 적었다. 그리고! 내가 사진 찍어준대신 롤링페이퍼 해달라고 부탁드렸다. 그래서 다 같이 롤링페이퍼를 썼다~^ㅅ^ 귀여워귀여워! 그리고 지하에 '인생사진'에서 다 같이 사진 찍고 싶어서 그것도 찍었다. 여섯명이서 찍긴 힘들었지만... 아무튼 나는 진짜 우리팀이 너무 좋다! 행운이라고 생각한다. 이런 추억 남길 수 있음에 너무 감사하다. 

 

 새로고침하면 502 bad gateway가 뜨는 문제가 있는데... 클라우드 프론트나 로드밸런서 문제 같은데 배포는 진짜... ㅠㅠ 너무 도움 요청하고 싶다. 일단은 서버를 계속 열어두면 안 떠서 그렇게 돌아가고 있다. 배포 문제까지 딱 완벽하게 끝나길! 

 

 

 

 

+ ) 

 그리고 백엔드 서버 비용을 다 써서 다른 백엔드분 서버로 옮기느라 DB가 다 날아갔다. 전부 다시 올려아한다는... 슬픔...  그래도 일단 그 전에 gif들은 따두었다. 어서 데이터 올리고 댓글 부분 문제를 고치고 싶다!