Merge pull request #77 from DSM-PICK/feature/66-changeplace-connect-api

⚡️ :: (#66) 방과후 학교 층수에 따라 교실 띄우기

src/components/ClassList/ClassList.tsx

@@ -1,29 +1,35 @@
-import React, { useState, useEffect, useLayoutEffect } from "react";
+import React, { useState, useEffect } from "react";
 import { getAfterSchool, getMajorClub } from "../../utils/api/Afterschool";
-import { getLocationList } from "../../utils/api/Locationlist";
 import * as S from "./styles";
 const floorArr = ["4층", "3층", "2층", "기타"];
+interface PlaceType {
+  after_school_id?: number;
+  name: string;
+  teacher_name: string;
+  location_name: string;
+  floor: number;
+}
 const ClassList = () => {
   const [afterschool, setAfterschool] = useState<number>(1);
   const [floor, setFloor] = useState<number>(0);
 
+  const [place, setPlace] = useState<PlaceType[]>([
+    {
+      after_school_id: 0,
+      name: "",
+      teacher_name: "",
+      location_name: "",
+      floor: 0,
+    },
+  ]);
   useEffect(() => {
     setFloor(0);
     if (afterschool === 1) {
-      getAfterSchool().then((res) => console.log(res));
+      getAfterSchool().then((res) => setPlace(res.data));
     } else if (afterschool === 2) {
-      getMajorClub().then((res) => console.log(res));
+      getMajorClub().then((res) => setPlace(res.data));
     }
   }, [afterschool]);
-  useEffect(() => {}, [floor]);
-
-  useLayoutEffect(() => {
-    const token = localStorage.getItem("access_token");
-    if (!token) {
-      return;
-    }
-    getLocationList(token).then((res) => console.log(res.data));
-  }, []);
 
   const changeFloor = (index: number) => {
     setFloor(index);
@@ -42,12 +48,19 @@ const ClassList = () => {
             <S.FloorName
               key={i}
               onClick={() => changeFloor(i)}
-              select={floor === i}
+              select={floor !== i}
             >
               {floorname}
             </S.FloorName>
           ))}
         </S.Location>
+        <S.Location>
+          {place.map((pn, i) => (
+            <S.FloorName key={i} floor={floor !== pn.floor}>
+              {pn.location_name}
+            </S.FloorName>
+          ))}
+        </S.Location>
       </S.ClubLocationWrapper>
       <S.BtnWrapper>
         <S.BtnItem onClick={() => setAfterschool(1)} select={afterschool === 1}>

src/components/ClassList/styles.ts

@@ -1,5 +1,8 @@
 import styled from '@emotion/styled'
-
+interface FloorNameType {
+    select?:boolean;
+    floor?:boolean;
+}
 export const BtnContainer = styled.div`
     width: 350px;
     height: 600px;
@@ -39,13 +42,13 @@ export const Location = styled(ClubState)`
     box-sizing: border-box;
     padding: 40px 0;
     border:none;
-    
 `;
-export const FloorName = styled.span<{select:boolean}>`
-color: ${props=>props.select ? "black" : "#767676"};
-:hover{
-            cursor: pointer;
-        }
+export const FloorName = styled.span<FloorNameType>`
+    color: ${props=>props.select ? "#767676" : "black"};
+    :hover{
+        cursor: pointer;
+    }
+    display: ${props=>props.floor ? "none" : "block"}
 `
 export const BtnWrapper = styled.div`
     width: 80%;