chore: 디렉토리 변경

issue #22

FE/package.json → client/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "FE",
+  "name": "client",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",

client/src/components/SearchList/index.jsx

@@ -0,0 +1,37 @@
+import React, { useState, useEffect } from 'react';
+import styled from 'styled-components';
+import SearchItem from './SearchItem';
+
+const SearchListDiv = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  margin-left: -15px;
+`;
+
+const SearchList = ({ data }) => {
+  const SET_NUMBER = 20;
+  const [startPoint, setStartPoint] = useState(0);
+  const [endPoint, setEndPoint] = useState(SET_NUMBER);
+  const [searchList, setSearchList] = useState(data.slice(startPoint, endPoint));
+
+  const test = () => {
+    return setStartPoint(startPoint + SET_NUMBER);
+  };
+
+  useEffect(() => {
+    setEndPoint(endPoint + SET_NUMBER);
+    setSearchList(searchList.concat(data.slice(startPoint, endPoint)));
+    console.log('endPoint 변경', startPoint, endPoint);
+  }, [startPoint]);
+
+  return (
+    <SearchListDiv>
+      {searchList.map((accommodation, index) => {
+        return <SearchItem key={index} contents={accommodation} width="25%" />;
+      })}
+      <button onClick={test}>더보기</button>
+    </SearchListDiv>
+  );
+};
+
+export default SearchList;

client/src/constants/url.js

@@ -0,0 +1,3 @@
+export const URL = {
+  API: 'http://ec2-13-209-173-230.ap-northeast-2.compute.amazonaws.com/api/',
+};

FE/src/containers/SearchListContainer.jsx → client/src/containers/SearchListContainer.jsx

@@ -1,9 +1,10 @@
-import React from 'react';
+import React, { useState } from 'react';
 import styled from 'styled-components';
 import useAsync from '../utils/useAsync';
 import { URL } from '../constants/url';
 import SearchItem from '../components/SearchList/SearchItem';
 import SearchTitle from '../components/SearchList/SearchTitle';
+import SearchList from '../components/SearchList';
 
 const SearchListWrapDiv = styled.div``;
 const SearchListInnerDiv = styled.div`
@@ -31,17 +32,19 @@ const SearchListContainer = () => {
   if (!data) return null;
 
   const { totalCount, priceDistribution, accommodations } = data.data;
-  console.log(data.data);
+
+  const searchListData = data.data.accommodations;
+  const searchListOption = {
+    items: 20,
+    preItems: 0,
+  };
+  console.log(searchListData.slice(searchListOption.preItems, searchListOption.items));
 
   return (
     <SearchListWrapDiv>
       <SearchListInnerDiv>
         <SearchTitle totalCount={totalCount} />
-        <SearchListDiv>
-          {accommodations.map(accommodation => {
-            return <SearchItem key={accommodation.accommodationId} contents={accommodation} width="20%" />;
-          })}
-        </SearchListDiv>
+        <SearchList data={accommodations} />
       </SearchListInnerDiv>
     </SearchListWrapDiv>
   );

FE/src/modules/date.js → client/src/modules/date.js

@@ -12,7 +12,7 @@ const initialState = {
   startDate: null,
   endDate: null,
   checkInDate: null,
-  cehckOutDate: null,
+  checkOutDate: null,
 };
 
 export default function date(state = initialState, action) {
@@ -31,10 +31,16 @@ export default function date(state = initialState, action) {
       let checkIn,
         checkOut = null;
       if (action.date.startDate) {
-        checkIn = `${action.date.startDate._d.getFullYear()}-${action.date.startDate._d.getMonth() + 1}-${action.date.startDate._d.getDate()}`;
+        const year = action.date.startDate._d.getFullYear();
+        const month = action.date.startDate._d.getMonth() + 1;
+        const day = action.date.startDate._d.getDate();
+        checkIn = `${year}-${('00' + month.toString()).slice(-2)}-${('00' + day.toString()).slice(-2)}`;
       }
       if (action.date.endDate) {
-        checkOut = `${action.date.endDate._d.getFullYear()}-${action.date.endDate._d.getMonth() + 1}-${action.date.endDate._d.getDate()}`;
+        const year = action.date.endDate._d.getFullYear();
+        const month = action.date.endDate._d.getMonth() + 1;
+        const day = action.date.endDate._d.getDate();
+        checkOut = `${year}-${('00' + month.toString()).slice(-2)}-${('00' + day.toString()).slice(-2)}`;
       }
       return {
         ...state,

FE/src/modules/index.js → client/src/modules/index.js

@@ -1,7 +1,13 @@
 import { combineReducers } from 'redux';
+import date from './date';
+import guest from './guest';
+import price from './price';
 import form from './form';
 
 const rootReducer = combineReducers({
+  date,
+  guest,
+  price,
   form,
 });
 

client/src/modules/price.js

@@ -0,0 +1,29 @@
+const SAVE = 'price/SAVE';
+const GET_PRICE_DISTRIBUTION = 'price/GET_PRICE_DISTRIBUTION';
+
+export const save = data => ({ type: SAVE, data });
+export const getPriceDistribution = data => ({ type: GET_PRICE_DISTRIBUTION, data });
+
+const initialState = {
+  priceMin: null,
+  priceMax: null,
+  priceDistribution: null,
+};
+
+export default function price(state = initialState, action) {
+  switch (action.type) {
+    case SAVE:
+      return {
+        ...state,
+        priceMin: action.data.priceMin,
+        priceMax: action.data.priceMax,
+      };
+    case GET_PRICE_DISTRIBUTION:
+      return {
+        ...state,
+        priceDistribution: action.data,
+      };
+    default:
+      return state;
+  }
+}