feature: 방 리스트

package.json

@@ -14,10 +14,13 @@
     "@types/react-redux": "^7.1.9",
     "@types/react-router-dom": "^5.1.5",
     "@types/redux-actions": "^2.6.1",
-    "comfortable-google-map-react-types": "^1.1.0",
+    "axios": "^0.20.0",
+    "comfortable-google-map-react-types": "^1.2.1",
     "jwt-decode": "^2.2.0",
     "node-sass": "^4.14.1",
+    "query-string": "^6.13.1",
     "react": "^16.13.1",
+    "react-cookie": "^4.0.3",
     "react-dom": "^16.13.1",
     "react-redux": "^7.2.1",
     "react-router-dom": "^5.2.0",
@@ -30,6 +33,7 @@
     "typescript": "^3.7.5"
   },
   "scripts": {
+    "build:tailwind": "tailwindcss build src/sass/tailwind.css -o src/sass/tailwind.output.css",
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
@@ -51,6 +55,7 @@
     ]
   },
   "devDependencies": {
-    "dotenv": "^8.2.0"
+    "dotenv": "^8.2.0",
+    "tailwindcss": "^1.8.3"
   }
 }

public/manifest.json

@@ -1,23 +1,7 @@
 {
   "short_name": "React App",
   "name": "Create React App Sample",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }
-  ],
+  "icons": [],
   "start_url": ".",
   "display": "standalone",
   "theme_color": "#000000",

src/API/baseApi.tsx

@@ -0,0 +1,8 @@
+import axios, { AxiosResponse, AxiosInstance } from "axios";
+
+const baseApi: AxiosInstance = axios.create({
+  baseURL: "https://jukbang.herokuapp.com/",
+  timeout: 3000,
+});
+
+export default baseApi;

src/API/room.tsx

@@ -0,0 +1,15 @@
+import axios, { AxiosResponse, AxiosInstance, AxiosError } from "axios";
+import baseApi from "./baseApi";
+
+export const getRoomList = (univId: number) =>
+  baseApi.get(`/rooms?univId=${univId}`);
+
+export const getRoomThumbnail = (roomId: number) =>
+  baseApi
+    .get(`/rooms/${roomId}/images/1`)
+    .then((response: AxiosResponse<string>) => {
+      return response;
+    })
+    .catch((error: AxiosError) => {
+      return "error";
+    });

src/components/routes.tsx

@@ -7,7 +7,7 @@ import SignUp from "../pages/auth/SignUp";
 import SignOut from "../pages/auth/SignOut";
 import UserProfile from "../pages/user/Profile/UserProfile";
 
-const Routes = () => {
+const Routes: React.FunctionComponent = () => {
   return (
     <Router>
       <Switch>

src/components/urls.tsx

@@ -1,8 +1,10 @@
 // room
 const home = "/home";
+const roomDetail = (roomId: number) => `/rooms/${roomId}`;
 
 export const roomUrl = {
   home,
+  roomDetail,
 };
 
 // admin

src/pages/room/interface.tsx

@@ -0,0 +1,21 @@
+export interface IRoom {
+  distance: number;
+  grade: number;
+  location: {
+    address: string;
+    lat: number;
+    lng: number;
+  };
+  price: {
+    adminExpenses: number;
+    deposit: number;
+    monthlyLease: number;
+  };
+  roomId: number;
+  roomInfo: {
+    floor: number;
+    layout: number;
+    roomName: string;
+    scale: number;
+  };
+}

src/pages/room/roomList/components/RoomCard.tsx

@@ -0,0 +1,44 @@
+import React, { useEffect, useState } from "react";
+import { IRoom } from "../../interface";
+import { getRoomThumbnail } from "../../../../API/room";
+import { AxiosPromise, AxiosResponse } from "axios";
+import defaultThumbnail from "../../../../img/defaultThumbnail.jpg";
+import "../../../../sass/tailwind.output.css";
+
+interface IProps {
+  room: IRoom;
+}
+
+const RoomCard: React.FunctionComponent<IProps> = (props) => {
+  const [thumbnail, setThumbnail] = useState<AxiosResponse | string | null>(
+    null
+  );
+
+  const roomThumbnail = async (roomId: number) => {
+    const thumbnail = await getRoomThumbnail(roomId);
+    setThumbnail(thumbnail);
+  };
+
+  useEffect(() => {
+    roomThumbnail(props.room.roomId);
+  }, []);
+
+  return (
+    <div>
+      <img
+        src={thumbnail === "error" ? defaultThumbnail : "정상url"}
+        alt="thumbnail"
+        className="w-full"
+      ></img>
+      <div className="bg-gray-500">{props.room.roomInfo.layout}</div>
+      <div className="bg-gray-500">{props.room.grade}점</div>
+      <div className="bg-gray-500">{Math.round(props.room.distance)}m</div>
+      <div className="bg-gray-500">{props.room.location.address}</div>
+      <div className="bg-gray-500">{props.room.roomInfo.floor}층</div>
+      <div className="bg-gray-500">보증금 : {props.room.price.deposit}원</div>
+      <div className="bg-gray-500">{props.room.roomInfo.scale} 평</div>
+    </div>
+  );
+};
+
+export default RoomCard;

src/pages/room/roomList/roomListContainer.tsx

@@ -1,11 +1,55 @@
 import React from "react";
 import RoomListPresenter from "./roomListPresenter";
-import NavBar from "../../../components/NavBar";
+import { getRoomList } from "../../../API/room";
+import { RouteComponentProps, withRouter } from "react-router-dom";
+import queryString from "query-string";
+import { IRoom } from "../interface";
+import GoogleMap, { IMarker } from "comfortable-google-map-react-types";
+
+interface IProps extends RouteComponentProps {}
+
+interface IState {
+  rooms: Array<IRoom>;
+  markers: Array<IMarker>;
+}
+
+class RoomListContainer extends React.Component<IProps, IState> {
+  state = {
+    rooms: [],
+    markers: [],
+  };
+
+  componentDidMount = async () => {
+    const { univId } = queryString.parse(this.props.location.search);
+    if (univId) {
+      const { data } = await getRoomList(parseInt(univId.toString()));
+      this.setState({
+        ...this.state,
+        rooms: data._embedded.rooms,
+      });
+      data._embedded.rooms.map((room: IRoom) => {
+        this.setState({
+          ...this.state,
+          markers: [
+            ...this.state.markers,
+            {
+              lat: room.location.lat,
+              lng: room.location.lng,
+            },
+          ],
+        });
+      });
+    }
+  };
 
-class RoomListContainer extends React.Component {
   render = () => {
-    return <RoomListPresenter />;
+    return (
+      <RoomListPresenter
+        rooms={this.state.rooms}
+        markers={this.state.markers}
+      />
+    );
   };
 }
 
-export default RoomListContainer;
+export default withRouter(RoomListContainer);

src/pages/room/roomList/roomListPresenter.tsx

@@ -1,24 +1,57 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import dotenv from "dotenv";
-import GoogleMap from "comfortable-google-map-react-types";
-import store from "../../../store";
+import GoogleMap, { IMarker } from "comfortable-google-map-react-types";
 import NavBar from "../../../components/NavBar";
+import "../../../sass/tailwind.output.css";
+import RoomCard from "./components/RoomCard";
+import { IRoom } from "../interface";
+import { roomUrl } from "../../../components/urls";
+import { Link } from "react-router-dom";
 
-const RoomListPresenter: React.FunctionComponent = () => {
+interface IProps {
+  rooms: Array<IRoom>;
+  markers: Array<IMarker>;
+}
+
+const RoomListPresenter: React.FunctionComponent<IProps> = (props) => {
   dotenv.config();
 
   return (
-    <div>
-      <NavBar></NavBar>
-      <GoogleMap
-        APIKEY={String(process.env.REACT_APP_GOOGLE_MAP_KEY)}
-        width={900}
-        height={500}
-        lat={37.496303}
-        lng={126.957266}
-        zoom={16}
-      ></GoogleMap>
-    </div>
+    <>
+      <div className="h-screen w-screen">
+        <NavBar></NavBar>
+        <div className="w-full h-full flex pt-16">
+          <div className="w-full h-full">
+            {props.markers.length == props.rooms.length ? (
+              <GoogleMap
+                APIKEY={String(process.env.REACT_APP_GOOGLE_MAP_KEY)}
+                width={"100%"}
+                height={"100%"}
+                lat={37.496303}
+                lng={126.957266}
+                zoom={16}
+                marker_list={props.markers}
+              ></GoogleMap>
+            ) : (
+              "error"
+            )}
+          </div>
+          <div className="container bg-green-200 max-w-3xl h-full">
+            <div className="flex flex-wrap">
+              {props.rooms.map((room) => {
+                return (
+                  <div className="w-1/3" key={room.roomId}>
+                    <Link to={roomUrl.roomDetail(room.roomId)}>
+                      <RoomCard room={room} />
+                    </Link>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
   );
 };
 

src/sass/common.sass

@@ -1,15 +1,13 @@
 //방향 변수
 $direct : ["left","right","top","bottom"]
 //색 변수 - 원하는 색 있으면 추가할 것.  ["색이름" : 색코드]
-$colors : ("white": #fff, "orange": #d9503e, "deep-pink": #fd9bbb, "mint":#4de0c2, "green":rgba(198, 248, 198, 0.692)) !global
-
+$colors : ("white": #fff, "orange": #d9503e, "deep-pink": #fd9bbb, "mint":#4de0c2, "green":rgba(198, 248, 198, 0.692), "light-green":#86ff97) !global
 
 //글자색 설정 ex) font-white 
 @mixin font-color($name, $color)
     .font-#{$name}
         color : $color
 
-
 //배경색 설정 ex) background-mint 
 @mixin background-color($name,$color)
     .background-#{$name}
@@ -21,7 +19,6 @@ $colors : ("white": #fff, "orange": #d9503e, "deep-pink": #fd9bbb, "mint":#4de0c
         border : 2px solid $color
         border-radius : 20px
 
-
 //기본버튼설정(앞 색깔 : 배경색, 뒤 : 폰트색)  ex) font-mint-white
 @mixin button($name,$color, $name2,$color2)
     .button-#{$name}-#{$name2}
@@ -65,16 +62,15 @@ $colors : ("white": #fff, "orange": #d9503e, "deep-pink": #fd9bbb, "mint":#4de0c
     @else
         .margin-#{$margin}
             margin : $margin*1%
-      
+
 //방향별로 마진주기  ex) margin-bottom-5
 @mixin margin-direct($direct, $margin, $px:false)
     @if $px == true
-         .margin-#{$direct}-#{$margin}px
+        .margin-#{$direct}-#{$margin}px
             margin-#{$direct} : $margin+px
     @else
         .margin-#{$direct}-#{$margin}
             margin-#{$direct} : $margin*1%
-
 
 //플랙스 컨테이너 ex)flex-column-container  혹은 flex-row-container  
 @mixin flex-container($direct)
@@ -83,7 +79,7 @@ $colors : ("white": #fff, "orange": #d9503e, "deep-pink": #fd9bbb, "mint":#4de0c
         flex-direction : $direct
         item
             flex-grow : 1
-        
+
 //일반 컨테이너    
 .container
     height : 100%
@@ -97,10 +93,10 @@ html, body
     margin : 0
     padding : 0
 
-form 
+form
     label
         font-size : 18px 
- 
+
     .radio-label
         width: 100%
         font-size : 12px  
@@ -114,24 +110,23 @@ form
 @include flex-container(row)
 
 @each $name, $color in $colors
-    @include border-color($name, $color) 
+    @include border-color($name, $color)
     @include background-color($name,$color)
     @include font-color($name, $color)
-    
+
 @each $name, $color in $colors
     @each $name2, $color2 in $colors
         @include button($name, $color, $name2, $color2)
 
 @for $i from 1 through 100
-    @include padding($i) 
+    @include padding($i)
     @include margin($i)
-    @include padding($i,true) 
+    @include padding($i,true)
     @include margin($i,true)
 
 @each $d in $direct
     @for $i from 1 through 100
         @include padding-direct($d, $i)
-        @include margin-direct($d, $i) 
+        @include margin-direct($d, $i)
         @include padding-direct($d, $i, true)
-        @include margin-direct($d, $i, true) 
-
+        @include margin-direct($d, $i, true)