[react]FITPET:バインド寮詳細表示API

1. HotelService.jsにgetHotelAbout()を追加します。

import axios from 'axios';

export default class HotelService {
// 호텔 리스트
  static async getHotelList(page) {
    const response = await axios.get(`/api/lodging/list/?nowPage=${page}`);
    return response;
  }

  // 호텔 상세보기 (객실 정보)
  static async getHotelAbout(hotelId) {
    const response = await axios.get(`/api/lodging/${hotelId}`);
    return response;
  }
}

2. hotelAbout.jsでのreduce、action、sagaの管理

import { call, put, takeEvery } from '@redux-saga/core/effects';
import HotelService from '../../services/HotelService';
import { hotelListFail, hotelListSaga, hotelListStart } from './hotelList';

// namespace
const namespace = 'fitpet/hotelAbout';

// action types
const START = namespace + '/START';
const SUCCESS = namespace + '/SUCCESS';
const FAIL = namespace + '/FAIL';

// initiall state
const initalState = { hotelAbout: [], error: null };

// reducer
export default function hotelAbout(state = initalState, action) {
  switch (action.type) {
    case START:
      return { hotelAbout: [], errer: null };

    case SUCCESS:
      return { ...state, hotelAbout: action.hotelAbout };

    case FAIL:
      return { ...state, error: action.error };

    default:
      return state;
  }
}

// action creators
export const hotelAboutStart = () => ({ type: START });
export const hotelAboutSuccess = (hotelAbout) => ({
  type: SUCCESS,
  hotelAbout,
});

export const hotelAboutFail = (error) => ({ type: FAIL, error });

// saga
const HOTEL_ABOUT_SAGA = namespace + '/HOTEL_ABOUT_SAGA';

export function* hotelAboutSaga(action) {
  try {
    yield put(hotelListStart());
    const response = yield call(HotelService.getHotelAbout);
    yield put(hotelAboutSuccess(response.data));
  } catch (error) {
    yield put(hotelListFail(error));
  }
}

// watch saga
export function* watchHotelList() {
  yield takeEvery(HOTEL_ABOUT_SAGA, hotelListSaga);
}

import React, { useCallback } from 'react';
import { useEffect } from 'react';
import { useSelector } from 'react-redux';
import { useDispatch } from 'react-redux';
import HotelAbout from '../components/hotel/hotel_about/HotelAbout';
import { closeRoomDetail, openRoomDetail } from '../redux/modules/modal';

const HotelAboutContainer = () => {
  const dispatch = useDispatch();
  const roomDetailOpen = useSelector((state) => state.modal.roomDetailOpen);
  **const hotelaboutInfo = useSelector(
    (state) => state.hotelAbout.hotelaboutInfo,
  );**

  // 객실 상세 창 열기
  const showRoomDetail = useCallback(() => {
    dispatch(openRoomDetail());
  }, [dispatch, roomDetailOpen]);

  // 객실 상세 창 닫기
  const hideRoomDetail = useCallback(() => {
    dispatch(closeRoomDetail());
  }, [dispatch]);

  useEffect(() => {
    if (roomDetailOpen) {
      document.body.style.cssText = `
      position:fixed;
      top: -${window.scrollY}px;
      overflow-y: scroll;
      width: 100%;
    `;
    }

    return () => {
      const scrollY = document.body.style.top;
      document.body.style.cssText = '';
      window.scrollTo(window.scrollY, parseInt(scrollY || '0', 10) * -1);
    };
  }, [roomDetailOpen]);

  return (
    <HotelAbout
      **hotelaboutInfo={hotelaboutInfo}**
      showRoomDetail={showRoomDetail}
      roomDetailOpen={roomDetailOpen}
      hideRoomDetail={hideRoomDetail}
    />
  );
};

export default HotelAboutContainer;