[리액트 X 타입스크립트] 디즈니플러스 클론코딩

이번에는 리액트와 타입스크립트를 이용하여 디즈니플러스 클론코딩을 진행했습니다.

😎 Hostring url - https://disneyplusclone-c04df.web.app/

🛠 Tools

---

• 화면구성 (React with TypeScript, react-router-dom, styled-components)
• 상태관리 (Redux-toolkit)
• 프로젝트 셋팅 (create-react-app)
• 비동기 통신 (firebase)
• 형상관리 (git hub)

1.슬라이드 구현 (Carousel, react-slick 사용)

2. 로그인 (firebase google auth 사용) -> 로그인 후 Home으로 이동

3. Video 정보 렌더링 (firebase firestore에서 비동기 통신 후 redux 상태값에 저장 후 map 반복문 사용하여 출력, 상세페이지는 useParams를 사용하여 category와 video id 값을 받아와 find 함수 이용하여 출력)

4. 폴더 구조(이미지 파일과 비디오 파일은 정적으로 public 폴더 안에 넣었습니다)

---

유저 관리 코드

import { createSlice, PayloadAction } from "@reduxjs/toolkit";
import { RootState } from "../configStore";
type UserStateValue = string | null | undefined;

export interface UserState {
  name: UserStateValue;
  email: UserStateValue;
  photo: UserStateValue;
}
const initialState: UserState = {
  name: null,
  email: null,
  photo: null,
};

const userSlice = createSlice({
  name: "user",
  initialState,
  reducers: {
    setUserLoginDetails: (state, action: PayloadAction<UserState>) => {
      state.name = action.payload.name;
      state.email = action.payload.email;
      state.photo = action.payload.photo;
    },
    setSignOutState: (state) => {
      state.name = null;
      state.email = null;
      state.photo = null;
    },
  },
});

export const { setUserLoginDetails, setSignOutState } = userSlice.actions;

export const selectUserName = (state: RootState) => state.user.name;
export const selectUserEmail = (state: RootState) => state.user.email;
export const selectUserPhoto = (state: RootState) => state.user.photo;

export default userSlice.reducer;

코드 설명

1. firebase 로그인 성공시 setUserLoginDetails 함수 호출 -> useState에 넣기 -> 로그인 버튼 사라지고 Header에 유저 프로필 사진 출력

2. 로그아웃시 setSignUpState 호출 -> state null로 초기화

무비 관리 코드

import { RootState } from "./../configStore";
import { createSlice, PayloadAction } from "@reduxjs/toolkit";
export interface Movie {
  id: string;
  backgroundImg: string;
  cardImg: string;
  description: string;
  subTitle: string;
  title: string;
  titleImg: string;
  type: string;
}

interface MovieState {
  recommend: Movie[] | null;
  trending: Movie[] | null;
  new: Movie[] | null;
  original: Movie[] | null;
}

const initialState: MovieState = {
  recommend: null,
  trending: null,
  new: null,
  original: null,
};

const movieSlice = createSlice({
  name: "movie",
  initialState,
  reducers: {
    setMovies: (state, action: PayloadAction<MovieState>) => {
      state.recommend = action.payload.recommend;
      state.trending = action.payload.trending;
      state.new = action.payload.new;
      state.original = action.payload.original;
    },
  },
});
export const getRecommends = (state: RootState) => state.movies.recommend;
export const getTrendings = (state: RootState) => state.movies.trending;
export const getNews = (state: RootState) => state.movies.new;
export const getOriginals = (state: RootState) => state.movies.original;
export const getAllMovies = (state: RootState) => state.movies;
export default movieSlice.reducer;
export const { setMovies } = movieSlice.actions;

코드 설명

Home화면 진입시 useEffect에 firebase 통신하여 db 데이터 응답값 받아옴 -> dispatch(setMovies())를 하여 각 타입별로 state값 저장 -> 각 상황에 맞게 state별로 데이터 렌더링

---

감사합니다:)