'Pick' 리스트

관심있는 영화를 모아둘 수 있다.
편의상 여기선 '찜' 기능이라고 부르겠다.

세부 기능

• pick함에 영화 데이터를 추가
• pick한 영화 목록을 모아서 조회
• pick함에서 영화 데이터 삭제
• pick함에 추가된 영화와 아닌 영화 아이콘 구분

고민

1. 찜 데이터는 어디 저장되어야 할까

처음엔 막연하게 movie에 찜 여부값을 추가하면 될까 싶었는데 말도 안되는 생각이었다. 찜 데이터는 유저마다 달라지는데 movie데이터는 모든 유저에게 동일하게 보여야 하는 데이터이기 때문이다. 만약 처음 생각처럼 movie데이터가 찜 값을 가지고 있다면 A유저가 찜 한 영화인데 B유저에게도 찜이 됐다고 나오는 불상사가 생긴다.

그래서 데이터베이스에 따로 저장하기로 했다.

/picks/유저ID/영화ID

경로는 이런식으로 설정해서 유저별로 찜 데이터가 나누어지도록 했다.

2. 영화의 찜 여부 조회

쇼핑몰에서의 '찜' 기능 처럼 영화 목록이 조회될 때 찜 아이콘이 표시되고, 아이콘이 클릭할때마다 찜 여부가 토글 되도록 만들고 싶었다.

그러려면 영화 정보가 나타날 때 찜 정보도 함께 출력되어야 하기 때문에 두 데이터를 조합하는 로직을 어떻게 짜야할지가 고민이었다.

생각한 방법은 이렇다.

1. 개별 영화 정보를 가져올 때
2. 유저가 가진 모든 찜 데이터를 가져온다
3. 찜 데이터를 순회하면서 영화id에 해당하는 값이 있는지 찾는다.
4. 찾은 결과를 리덕스의 찜 state에 업데이트시킨다.

이렇게하면 영화의 찜 여부에 따라 영화 정보를 출력하는 ui를 다르게 보여줄 수 있고, 찜 페이지에서 조회될 모든 찜 데이터를 가져오는 것 까지 한번에 해결 가능하다.

구현

pick-action

// 전체 찜 영화 가져오기
export const getPickFetch = (userUid) => {
  return (dispatch) => {
    getPick(userUid, (movies) => dispatch(pickAction.get(movies)));
  };
};

// 찜 추가
export const addPickFetch = (userUid, movie) => {
  return () => {
    addPick(userUid, { ...movie, pickDate: new Date().getTime() });
  };
};

// 찜 제거
export const removePickFetch = (userUid, movieId) => {
  return () => {
    removePick(userUid, movieId);
  };
};

pick-slice

firebase의 onvalue API를 사용했기때문에 리덕스 리듀서에서는 add, remove기능이 필요없다.

import { createSlice } from "@reduxjs/toolkit";

export const pickSlice = createSlice({
  name: "pick",
  initialState: { pick: [] },
  reducers: {
    get: (state, action) => {
      if (action.payload) {
        state.pick = Object.values(action.payload);
      } else {
        state.pick = [];
      }
    },
  },
});

export const pickAction = pickSlice.actions;

fireabse

// 데이터베이스에 pick 저장
export const addPick = (userId, movie) => {
  set(ref(db, `/picks/${userId}/${movie.id}`), movie);
};

// 데이터베이스에서pick 데이터 들고오기
export const getPick = (userUid, callback) => {
  const pickRef = ref(db, `/picks/${userUid}`);
  onValue(pickRef, (snapshot) => {
    callback(snapshot.val());
  });
};

// pick 데이터 삭제
export const removePick = (userUid, movieId) => {
  remove(ref(db, `/picks/${userUid}/${movieId}`));

구현화면

• 찜 여부에 따라 달라지는 아이콘
  
• 전체 찜 갯수
  
• 찜 조회 페이지