로그인 상태/라운지 참여여부

src/components/lounge/LoungeDemoData.ts

@@ -8,39 +8,39 @@ const TestDoor: TestDoorType[] = [
   { userNum: 2, userName: '유라' },
   { userNum: 3, userName: '소연' },
   { userNum: 4, userName: '수진' },
-  { userNum: 5, userName: '예빈' },
-  { userNum: 6, userName: '연빈' },
-  { userNum: 7, userName: '민철' },
-  { userNum: 8, userName: '민정' },
-  { userNum: 9, userName: '재민' },
-  { userNum: 10, userName: '성연' },
-  { userNum: 11, userName: '한조' },
-  { userNum: 12, userName: '호랑이' },
-  { userNum: 13, userName: '사자' },
-  { userNum: 14, userName: '코끼리' },
-  { userNum: 15, userName: '토끼' },
-  { userNum: 16, userName: '고양이' },
-  { userNum: 17, userName: '강아지' },
-  { userNum: 18, userName: '거북이' },
-  { userNum: 19, userName: '다람쥐다람쥐다람쥐' },
-  { userNum: 20, userName: '앵무새' },
-  { userNum: 21, userName: 'ㅇㅇ' },
-  { userNum: 22, userName: 'ㅎㅎ' },
-  { userNum: 23, userName: 'ㄱㄱ' },
-  { userNum: 24, userName: 'ㅁㅁ' },
-  { userNum: 25, userName: 'ㄴㄴ' },
-  { userNum: 26, userName: 'ㄷㄷ' },
-  { userNum: 27, userName: 'ㅂㅂ' },
-  { userNum: 28, userName: 'ㅠㅠ' },
-  { userNum: 29, userName: 'ㅊㅊ' },
-  { userNum: 30, userName: 'ㅌㅌ' },
-  { userNum: 31, userName: 'ㅋㅋ' },
-  { userNum: 32, userName: 'ㅈㅈ' },
-  { userNum: 33, userName: 'ㄹㄹ' },
-  { userNum: 34, userName: 'ㅕㅕ' },
-  { userNum: 35, userName: 'ㅡㅡ' },
-  { userNum: 36, userName: 'ㅔㅔ' },
-  { userNum: 37, userName: 'ㅍㅍ' },
+  // { userNum: 5, userName: '예빈' },
+  // { userNum: 6, userName: '연빈' },
+  // { userNum: 7, userName: '민철' },
+  // { userNum: 8, userName: '민정' },
+  // { userNum: 9, userName: '재민' },
+  // { userNum: 10, userName: '성연' },
+  // { userNum: 11, userName: '한조' },
+  // { userNum: 12, userName: '호랑이' },
+  // { userNum: 13, userName: '사자' },
+  // { userNum: 14, userName: '코끼리' },
+  // { userNum: 15, userName: '토끼' },
+  // { userNum: 16, userName: '고양이' },
+  // { userNum: 17, userName: '강아지' },
+  // { userNum: 18, userName: '거북이' },
+  // { userNum: 19, userName: '다람쥐다람쥐다람쥐' },
+  // { userNum: 20, userName: '앵무새' },
+  // { userNum: 21, userName: 'ㅇㅇ' },
+  // { userNum: 22, userName: 'ㅎㅎ' },
+  // { userNum: 23, userName: 'ㄱㄱ' },
+  // { userNum: 24, userName: 'ㅁㅁ' },
+  // { userNum: 25, userName: 'ㄴㄴ' },
+  // { userNum: 26, userName: 'ㄷㄷ' },
+  // { userNum: 27, userName: 'ㅂㅂ' },
+  // { userNum: 28, userName: 'ㅠㅠ' },
+  // { userNum: 29, userName: 'ㅊㅊ' },
+  // { userNum: 30, userName: 'ㅌㅌ' },
+  // { userNum: 31, userName: 'ㅋㅋ' },
+  // { userNum: 32, userName: 'ㅈㅈ' },
+  // { userNum: 33, userName: 'ㄹㄹ' },
+  // { userNum: 34, userName: 'ㅕㅕ' },
+  // { userNum: 35, userName: 'ㅡㅡ' },
+  // { userNum: 36, userName: 'ㅔㅔ' },
+  // { userNum: 37, userName: 'ㅍㅍ' },
 ];
 
 export default TestDoor;

src/components/lounge/LoungeDoor.tsx

@@ -1,18 +1,43 @@
 import styled from 'styled-components';
+import { useState, useEffect } from 'react';
+import Axios from '~lib/axios';
 
-import TestDoor from '~components/lounge/LoungeDemoData';
 import FloorNumber from '~components/lounge/FloorDemoData';
 
+type RoomInfo = {
+  userId: string;
+  userName: string;
+};
+
 const LoungeDoor = () => {
+  const [roomsList, setRoomsList] = useState<RoomInfo[]>([]);
+
+  const roomsLoading = async () => {
+    try {
+      const roomRes = await Axios.get(`/api/lounges/sgIG8L`, {
+        withCredentials: true,
+      });
+      setRoomsList(roomRes.data.data.roomData);
+      return roomsList;
+    } catch (err) {
+      console.log('test');
+    }
+  };
+
+  useEffect(() => {
+    roomsLoading();
+  }, []);
+
   return (
-    <LoungeFloor>
+    <LoungeFloor roomsLength={roomsList?.length}>
       <Doors>
-        {TestDoor.slice(0)
+        {roomsList
+          .slice(0)
           .reverse()
-          .map(door => (
-            <LoungeDoors key={door.userNum}>
+          .map(room => (
+            <LoungeDoors key={room.userName}>
               <NameSpace>
-                <RoomName>{door.userName}</RoomName>
+                <RoomName>{room.userName}</RoomName>
               </NameSpace>
               <Knob />
             </LoungeDoors>
@@ -32,16 +57,20 @@ const LoungeDoor = () => {
 
 const LoungeFloor = styled.div`
   position: relative;
-  bottom: -5px;
+
+  /* 라운지 개인 방이 4개 이하인 경우에 붕 뜸 현상 > margin-top 속성 필요.. */
+  margin-top: ${props => (props.roomsLength <= 4 ? '320px' : '0')};
 `;
 
 const Doors = styled.div`
   display: grid;
-  row-gap: 100px;
+  position: relative;
   grid-template-rows: 1fr;
   grid-template-columns: repeat(4, 1fr);
-  place-items: center;
+  z-index: 3;
   width: 950px;
+  row-gap: 100px;
+  place-items: center;
 `;
 
 const LoungeDoors = styled.div`
@@ -92,6 +121,7 @@ const FloorWrap = styled.div`
   position: absolute;
   bottom: -20px;
   flex-direction: column;
+  z-index: 0;
 `;
 
 const FloorNumContainer = styled.div`

src/components/lounge/NameBoard.tsx

@@ -1,14 +1,33 @@
 import styled from 'styled-components';
+import { useState, useEffect } from 'react';
+import Axios from 'axios';
 
 const NameBoard = () => {
+  const [loungeName, setLoungeName] = useState<string>('');
+
+  const settingLoungeName = async () => {
+    try {
+      const res = await Axios.get(`https://api.liontown.city/api/lounges/sgIG8L`, {
+        withCredentials: true,
+      });
+      setLoungeName(res.data.data.loungeName.name);
+    } catch (err) {
+      console.log('error');
+    }
+  };
+
+  useEffect(() => {
+    settingLoungeName();
+  }, []);
+
   return (
     <BoardContainer>
       <StickContainer>
         <BoardStick />
         <BoardStick />
       </StickContainer>
       <GroupBoard>
-        <GroupName>멋쟁이사자처럼 명지대</GroupName>
+        <GroupName>{loungeName}</GroupName>
       </GroupBoard>
     </BoardContainer>
   );

src/pages/lounge/index.tsx → src/pages/lounge/[id].tsx

@@ -1,20 +1,68 @@
 import styled from 'styled-components';
+import { useRouter } from 'next/router';
+import { useQuery } from '@tanstack/react-query';
 import { useState, useEffect, useRef } from 'react';
 import { scrollTo } from 'seamless-scroll-polyfill';
+import Axios from '~lib/axios';
+import { getCookie } from '~lib/Cookie';
 
 import DoorBottom from '~components/icons/DoorBottom.svg';
 import NameBoard from '~components/lounge/NameBoard';
 import FloorButton from '~components/lounge/FloorButton';
 import LoungeDoor from '~components/lounge/LoungeDoor';
 import NavBar from '~components/NavBar';
 
+import { useAppDispatch } from '~/store';
+import { showNotice } from '~store/modules/notice';
+import Notice from '~components/Notice/Notice';
+
 const LoungeHome = () => {
+  const router = useRouter();
   const [currentFloor, setCurrentFloor] = useState<number>(0);
   const floorRef = useRef<HTMLDivElement>(null);
+  const dispatch = useAppDispatch();
   // 0: 9-10F / 1: 7-8F / 2: 5-6F / 3: 3-4F / 4: 1-2F
   const totalFloor = 4;
 
-  //
+  const returnMessage = () => {
+    dispatch(showNotice('로그인 혹은 회원가입을 진행해주세요!'));
+  };
+
+  const returnLoungeSelect = () => {
+    dispatch(showNotice('라운지 생성을 먼저 진행해주세요!'));
+    console.log('returnLoungeSelect 실행완료');
+  };
+
+  // 로그인 O 상태, 라운지 소속일 때 / 라운지 소속이 아닐 때
+  const statusVerify = async () => {
+    try {
+      // 선택한 라운지 정보 -> {id} 부분에 임시로 값 넣음 : sgIG8L로 테스트 가능
+      const selectLounge = await Axios.get(`/api/lounges/sgIG8L`, {
+        withCredentials: true,
+      });
+
+      // 해당 라운지가 없는 경우 라운지 생성페이지로 보내기
+      if (selectLounge.status === 404) {
+        router.push('/lounge-select');
+        returnLoungeSelect();
+        setTimeout(() => returnLoungeSelect(), 2000);
+      }
+    } catch (err) {
+      // console.log 없앨 예정 ..
+      console.log('error');
+    }
+  };
+
+  // 로그인 하지 않은 상태로 라운지 진입시
+  useEffect(() => {
+    if (getCookie('jwt')) {
+      router.push('/sign-in');
+      returnMessage();
+    } else {
+      statusVerify();
+    }
+  }, []);
+
   const handleScrollUp = () => {
     if (currentFloor === 0) {
       setCurrentFloor(totalFloor);
@@ -49,6 +97,7 @@ const LoungeHome = () => {
     <LoungeBg>
       <NameBoard />
       <ListBottomContainer>
+        <Notice />
         <Bottom>
           <FloorLine />
           <BottomContainer>
@@ -83,8 +132,11 @@ const ListBottomContainer = styled.div`
 
 const LoungeFloor = styled.div`
   margin-bottom: 0;
+  margin-bottom: -20px;
   width: 975px;
-  height: 535px;
+
+  /* height: 535px; */
+  height: 555px;
   overflow: hidden;
 `;