데브코스 최종 프로젝트 - 17~18일차

 

17~18일차 - API 연결

 

API연결을 중점적으로 하고 날짜데이터 변경 및 자잘한 CSS style을 수정했다.

 

 

DetailSidebar 구현에 대한 고민,,

 

코스 상세페이지와 장소 상세페이지에는 좋아요/북마크/공유하기의 기능이 들어있는 동일한 Sidebar가 들어가는데

Sidebar에 해당하는 state를 페이지 단에서 관리를 하게 되면

각 페이지마다 likes, bookmarks에 대한 state를 관리해주어야 한다.

그리고 관련된 로직을 page 컴포넌트 안에 동일하게 중복적으로 작성을 해주어야 하는데

이 부분에 대한 고민을 하게 되었다.

 

 

✅ 선택한 방법

 

좋아요, 북마크와 관련된 값이 변경될 때 코스,장소 상세페이지의 메인 컨텐츠들에는

영향을 주지 않기 때문에 컴포넌트 안에서 API요청을 하고 state를 변경하기로 했다.

page단으로 올려버리면 중복 코드는 물론 좋아요/북마크 버튼을 누를 경우 관련된 하위 컴포넌트들까지

전부 리렌더링 되기 때문에 차라리 컴포넌트 내부에서 사용하는게 나을 것 같다고 생각했다.

 

const DetailSidebar = ({
  likes = 0,
  id,
  defaultLiked,
  defaultBookmarked,
  isLoggedIn,
  type
}: DetailSidebarProps) => {
  const [isLiked, setIsLiked] = useState(defaultLiked);
  const [isBookmarked, setIsBookmarked] = useState(defaultBookmarked);
  const [totalLikes, setTotalLikes] = useState(likes);
  const router = useRouter();

  const handleClickLike = async () => {
    if (!isLoggedIn) {
      router.push('/login');
      return;
    }

    const result = await LikeApi.like(id, type);
    setIsLiked(result.isLiked);
    setTotalLikes((oldLikes) => (result.isLiked ? oldLikes + 1 : oldLikes - 1));
  };

  const handleClickBookmark = async () => {
    if (!isLoggedIn) {
      router.push('/login');
      return;
    }
    const result = await BookmarkApi.bookmark(id, type);
    setIsBookmarked(result.isBookmarked);
  };

  useEffect(() => {
    setIsLiked(defaultLiked);
    setIsBookmarked(defaultBookmarked);
    // 로그인 유저의 데이터로 변경되었을 때를 위해 default값 감지
  }, [defaultLiked, defaultBookmarked]);

  
  //.. 생략

 

API 요청을 할 때 type값을 함께 보내줌으로써 place와 course의 데이터 요청을 나눌 수 있도록 하였다.

 

중복코드는 줄이게 되었지만 props로 관리해야 할 값이 늘었고 데이터 요청을 구분할 수 있는 API함수 또한

추가로 작성해야 했지만 감안하고 가기로 했다.

 

이후에 어떤 변수로 어떤 결과를 초래할 지는 아직 잘 모르겠지만 좀 더 나은 방법이 있다면 수정해 볼 예정이다.