Feature/#91: 대기방 리스트 화면 UI 구현 및 서버 연결

app/(nav)/home/page.tsx

@@ -5,14 +5,15 @@ import { HomePageWrapper } from '@/app/commonPage.styles';
 import Button from '@/components/Common/Button/Button';
 import EnterArrowIcon from '@/styles/Icon/Home/EnterArrowIcon.svg';
 import UserCharacter from '@/components/Layout/Home/Character/UserCharacter';
-import { useState } from 'react';
 import { useCharacterState } from '@/hooks/character/useCharacterState';
 
+import { useState } from 'react';
+import Link from 'next/link';
+
 const Home = () => {
   const [isBottomSheetOpen, setIsBottomSheetOpen] = useState(false);
   const { character: selectedCharacter, setCharacter: setSelectedCharacter } =
     useCharacterState({});
-
   return (
     <>
       <HomePageWrapper>
@@ -29,12 +30,14 @@ const Home = () => {
             setIsBottomSheetOpen={setIsBottomSheetOpen}
             isBottomSheetOpen={isBottomSheetOpen}
           />
-          <Button
-            label="방 입장하기"
-            icon={EnterArrowIcon}
-            buttonHeight="long"
-            $iconPosition="right"
-          />
+          <Link href="/waitingRoomList">
+            <Button
+              label="방 입장하기"
+              icon={EnterArrowIcon}
+              buttonHeight="long"
+              $iconPosition="right"
+            />
+          </Link>
         </BottomWrapper>
       </HomePageWrapper>
     </>

app/(nav)/waitingRoomList/page.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import TopBar from '@/components/Common/TopBar/TopBar';
+import { WaitingRoomListPageWrapper } from '@/app/commonPage.styles';
+import { RoomButtonGrid, ListTitle, SubTitle } from './waitingRoomList.styles';
+import { RefreshIcon } from '@/components/Common/RoomButton/WaitingRoomListIcon';
+import useGetWaitingRoomList from '@/hooks/waitingRoomList/useGetWaitingRoomList';
+import DotLoadingSpinner from '@/components/Common/LoadingSpinner/DotLoadingSpinner';
+import RoomButtonList from '@/components/Common/RoomButton/RoomButtonList';
+
+const WaitingRoomList = () => {
+  const { waitingRoomList, isLoading, fetchWaitingRoomList } =
+    useGetWaitingRoomList();
+
+  return (
+    <>
+      <TopBar NavType="default" label="대기방" />
+      <WaitingRoomListPageWrapper>
+        <SubTitle>
+          <ListTitle>참여 가능한 방</ListTitle>
+          <RefreshIcon onClick={fetchWaitingRoomList} />
+        </SubTitle>
+        <RoomButtonGrid>
+          {isLoading ? (
+            <DotLoadingSpinner color="white" />
+          ) : (
+            <RoomButtonList waitingRoomList={waitingRoomList} />
+          )}
+        </RoomButtonGrid>
+      </WaitingRoomListPageWrapper>
+    </>
+  );
+};
+
+export default WaitingRoomList;

app/(nav)/groupList/groupList.styles.ts → app/(nav)/waitingRoomList/waitingRoomList.styles.ts

@@ -4,20 +4,18 @@ export const SubTitle = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 20px 8px 8px 8px;
+  padding: 20px 0 8px 0;
 `;
 
 export const ListTitle = styled.h2`
   font-size: 16px;
   font-weight: 700;
-  padding: 8px 0px;
+  line-height: 150%;
 `;
 
 export const RoomButtonGrid = styled.div`
   display: grid;
   place-items: center;
-  /* padding-left: 16px; */
-  grid-template-columns: repeat(2, 1fr);
-  gap: 16px;
-  width: 100%;
+  grid-template-columns: repeat(1, 1fr);
+  gap: 8px;
 `;

app/api/waitingRoomList/route.ts

@@ -0,0 +1,16 @@
+import { API_URL_CONFIG } from '@/config/apiEndPointConfig';
+import axiosInstance from '@/lib/axios';
+import { NextResponse } from 'next/server';
+
+export async function GET() {
+  try {
+    const res = await axiosInstance.get(API_URL_CONFIG.GAME.WAITING_ROOM_LIST);
+    return NextResponse.json(res.data);
+  } catch (error) {
+    console.error(error);
+    return NextResponse.json(
+      { error: 'Failed to fetch data' },
+      { status: 500 }
+    );
+  }
+}

app/commonPage.styles.ts

@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import BackgroundImage from '@styles/Image/WaitingRoomList/Background_FullHill.png';
 import colors from '@/styles/color/palette';
 
 export const PageWrapper = styled.div`
@@ -14,3 +15,20 @@ export const HomePageWrapper = styled.div`
   background: linear-gradient(180deg, #fff 10%, #cabeff 100%);
   /* background-color: ${colors.purple[90]}; */
 `;
+
+export const WaitingRoomListPageWrapper = styled.div`
+  width: 100%;
+  height: 100%;
+  min-height: calc(100vh - 40px);
+  padding: 0 16px 100px 16px;
+  background-color: rgba(202, 228, 255, 1);
+  background-image: url(${BackgroundImage.src});
+  background-size: 100% auto;
+  background-repeat: no-repeat;
+  background-position: center bottom;
+  background-attachment: fixed;
+
+  @media screen and (min-width: 430px) {
+    background-size: 430px auto;
+  }
+`;

components/Common/LoadingSpinner/DotLoadingSpinner.styles.ts

@@ -22,10 +22,11 @@ export const DotContainer = styled.div`
   margin: auto;
 `;
 
-export const Dot = styled.div`
+export const Dot = styled.div<{ $color: 'white' | 'gray' }>`
   width: 11px;
   height: 11px;
-  background-color: ${colors.gray[90]};
+  background-color: ${({ $color }) =>
+    $color === 'white' ? colors.etc.white : colors.gray[90]};
   border-radius: 50%;
   animation: ${fadeInOut} 1.5s infinite ease-in-out;
 

components/Common/LoadingSpinner/DotLoadingSpinner.tsx

@@ -1,11 +1,15 @@
 import { DotContainer, Dot } from './DotLoadingSpinner.styles';
 
-const DotLoadingSpinner = () => {
+type COLOR = 'white' | 'gray';
+interface DotLoadingSpinnerProps {
+  color?: COLOR;
+}
+const DotLoadingSpinner = ({ color = 'gray' }: DotLoadingSpinnerProps) => {
   return (
     <DotContainer>
-      <Dot />
-      <Dot />
-      <Dot />
+      <Dot $color={color} />
+      <Dot $color={color} />
+      <Dot $color={color} />
     </DotContainer>
   );
 };

components/Common/NavBar/NavBar.tsx

@@ -25,14 +25,14 @@ const NavBar = () => {
   useEffect(() => {
     // URL에서 '/' 다음 경로를 추출해서 가져오기
     const path = pathname.split('/')[1];
-    setSelected(path === 'groupList' ? 'home' : path);
+    setSelected(path === 'waitingRoomList' ? 'home' : path);
   }, [pathname]);
 
   return (
     <Nav>
       <Link href="/home" passHref>
         <NavItem onClick={() => setSelected('home')}>
-          {selected === 'home' || selected === 'groupList' ? (
+          {selected === 'home' || selected === 'waitingRoomList' ? (
             <HomeColorIcon />
           ) : (
             <HomeIcon />

components/Common/RoomButton/RoomButton.styles.ts

@@ -1,44 +1,68 @@
 import styled from 'styled-components';
-// import CardBackground from '@/styles/Icon/CardBackGround.png';
+import colors from '@/styles/color/palette';
 
-export const RoomButtonWrapper = styled.div<{ $backgroundImage: string }>`
-  width: 163px;
-  height: 139px;
+export const RoomButtonWrapper = styled.div`
+  width: 100%;
+  height: 50px;
   border-radius: 12px;
-  background-image: url(${(props) => props.$backgroundImage});
-`;
+  background-color: ${colors.etc.white};
+  padding: 13px 20px;
 
-export const RoomButtonLayout = styled.div`
-  height: calc(100% - 0.2rem);
-  padding: 20px;
-  flex-direction: column;
+  display: flex;
+  flex-direction: row;
   justify-content: space-between;
-`;
+  align-items: center;
 
-export const RoomTitle = styled.div`
-  margin-bottom: 2px;
-  color: #fdf8ff;
   font-size: 14px;
-  font-weight: 700;
+  font-weight: 400;
   line-height: 150%;
-  padding-bottom: 2px;
 `;
 
-export const RoomPerson = styled.div`
+export const RoomButtonHeader = styled.div`
   display: flex;
   flex-direction: row;
   align-items: center;
-  gap: 2px;
-  color: #fdf8ff;
-  font-size: 12px;
-  font-weight: 400;
+  gap: 12px;
 `;
 
-export const PersonCount = styled.div`
-  color: #fdf8ff;
-  font-size: 12px;
-  font-weight: 400;
-  padding-top: 10px;
+export const RoomButtonContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  height: 24px;
+  gap: 6px;
+`;
+
+export const Round = styled.div<{ $round: number }>`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  width: 24px;
+  border-radius: 4px;
+
+  color: ${colors.etc.white};
+  background-color: ${(props) =>
+    props.$round === 3
+      ? '#AE6B00'
+      : props.$round === 2
+        ? '#42C700'
+        : '#FFBF00'};
+  backdrop-filter: blur(2px);
 `;
 
-export const PersonBox = styled.div``;
+export const Participant = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: 3.5px;
+  width: 44px;
+
+  color: ${colors.etc.white};
+  border-radius: 4px;
+  background: rgba(118, 119, 119, 0.5);
+  backdrop-filter: blur(2px);
+
+  padding-left: 7.5px;
+  padding-right: 6px;
+`;