Develop

src/components/layout/gameRoomHeader/GameRoomHeader.tsx

@@ -1,7 +1,6 @@
 import iconExit from "@assets/images/icon_close.svg";
-import { NavLink, useNavigate, useParams } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 import { Flex, StyledHeader, TextButton } from "./GameRoomHeaderStyle";
-
 import { useSocketStore } from "../../../store/useSocketStore";
 
 export default function GameRoomHeader() {
@@ -20,12 +19,10 @@ export default function GameRoomHeader() {
   return (
     <>
       <StyledHeader>
-        <NavLink to="/">
-          <Flex onClick={() => onClickOut(roomId)}>
-            <img src={iconExit} alt="게임방 나가기" />
-            <TextButton>나가기</TextButton>
-          </Flex>
-        </NavLink>
+        <Flex onClick={() => onClickOut(roomId)}>
+          <img src={iconExit} alt="게임방 나가기" />
+          <TextButton>나가기</TextButton>
+        </Flex>
       </StyledHeader>
     </>
   );

src/components/ui/card/chatting/Chatting.tsx

@@ -1,10 +1,5 @@
-import ChatInputBox from "../../chatInput/ChatInputBox";
 import * as S from "./ChattingStyle";
-// import { Socket } from "socket.io-client";
-
-// export interface IChattingProps {
-//   socket: Socket | null;
-// }
+import ChatInputBox from "../../chatInput/ChatInputBox";
 
 export default function ChattingBox() {
   return (

src/components/ui/card/chatting/ChattingStyle.ts

@@ -4,6 +4,7 @@ export const chat = styled.div`
   position: relative;
   width: 390px;
   height: 390px;
+  padding: 20px;
   border-radius: 12px;
   border: 1px solid var(--color-gray-999);
   box-shadow: 1px 1px 3px 0px #00000080;
@@ -15,8 +16,7 @@ export const chat = styled.div`
 `;
 
 export const chatInputBoxContainer = styled.div`
-  position: absolute;
-  bottom: 20px;
-  padding: 0 10px;
-  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
 `;

src/components/ui/chatInput/ChatInputBox.tsx

@@ -1,10 +1,21 @@
 import Button from "../button/Button";
 import * as S from "./chatInputStyle";
-// import { IChattingProps } from "../card/chatting/Chatting";
-// import { useEffect, useState } from "react";
+import { useSocketStore } from "@store/useSocketStore";
+import { useEffect } from "react";
 // import { useParams } from "react-router-dom";
 
 export default function ChatInputBox() {
+  const { socket } = useSocketStore();
+
+  useEffect(() => {
+    if (!socket) {
+      console.error("Socket is not connected.");
+      return;
+    }
+  }, []);
+
+  console.log("🚀 Socket:", socket);
+
   //   const [message, setMessage] = useState("");
   //   const params = useParams();
   //   const roomId = Number(params.id);
@@ -26,23 +37,26 @@ export default function ChatInputBox() {
   //   };
 
   return (
-    <S.chatInputBox>
-      <S.chatInput
-        type="text"
-        placeholder="상대방과 채팅을 나눌 수 있습니다."
-        // value={message}
-      ></S.chatInput>
-      <S.buttonBox>
-        <Button
-          size="xs"
-          bgcolor="green"
-          textcolor="black"
-          type="button"
-          //   onClick={onClickSendMessage}
-        >
-          전송
-        </Button>
-      </S.buttonBox>
-    </S.chatInputBox>
+    <>
+      <S.chatLog></S.chatLog>
+      <S.chatInputBox>
+        <S.chatInput
+          type="text"
+          placeholder="상대방과 채팅을 나눌 수 있습니다."
+          // value={message}
+        ></S.chatInput>
+        <S.buttonBox>
+          <Button
+            size="xs"
+            bgcolor="green"
+            textcolor="black"
+            type="button"
+            //   onClick={onClickSendMessage}
+          >
+            전송
+          </Button>
+        </S.buttonBox>
+      </S.chatInputBox>
+    </>
   );
 }

src/components/ui/chatInput/chatInputStyle.ts

@@ -1,5 +1,12 @@
 import styled from "styled-components";
 
+export const chatLog = styled.div`
+  flex-grow: 1;
+  font-size: 14px;
+  max-height: 290px;
+  overflow-y: scroll;
+`;
+
 export const chatInput = styled.input`
   width: 100%;
   flex-grow: 1;
@@ -24,4 +31,5 @@ export const chatInputBox = styled.div`
   width: 100%;
   display: flex;
   gap: 10px;
+  height: 100%;
 `;

src/components/ui/circleBackground/circleBackgroundStyle.ts

@@ -47,7 +47,10 @@ const MovingYellow = keyframes`
     transform: translate(260%, 320%);
   }
 `;
-export const Wrapper = styled.div``;
+export const Wrapper = styled.div`
+  max-height: 600px;
+  overflow: hidden;
+`;
 
 export const CircleGreen = styled.div`
   position: absolute;

src/components/ui/modal/Modal.tsx

@@ -1,26 +1,9 @@
 import ModalPortal from "./ModalPortal";
-import FirstSelect from "../modalContents/FirstSelect";
-import MakeRoom from "../modalContents/MakeRoom";
-import BigDeck from "../bigDeck/BigDeck";
 import { useModalStore } from "../../../store/useModalStore";
 import { Inside, ModalFrame, Overlay } from "./modalStyle";
-import GuessNumber from "../selectionNumber/GuessNumber";
 import { useEffect } from "react";
 import { useModal } from "@hooks/useModal";
-import TurnWaiting from "../modalContents/TurnWaiting";
-import GameWaiting from "../modalContents/GameWaiting";
-import SelectTurn from "../modalContents/SelectTurn";
-
-const modalComponents: Record<string, React.ReactNode> = {
-  firstSelect: <FirstSelect />,
-  makeRoom: <MakeRoom />,
-  myTurn: <BigDeck />,
-  guessNumber: <GuessNumber />,
-  selectWhiteBlack: <BigDeck />,
-  turnWaiting: <TurnWaiting />,
-  gameWaiting: <GameWaiting />,
-  selectTurn: <SelectTurn />,
-};
+import { modalComponents } from "./modalComponent";
 
 export default function Modal() {
   const { showModal, currentModal, modalColor } = useModalStore();

src/components/ui/modal/modalComponent.tsx

@@ -0,0 +1,17 @@
+import FirstSelect from "../modalContents/FirstSelect";
+import MakeRoom from "../modalContents/MakeRoom";
+import BigDeck from "../bigDeck/BigDeck";
+import TurnWaiting from "../modalContents/TurnWaiting";
+import GameWaiting from "../modalContents/GameWaiting";
+import Alert from "../modalContents/Alert";
+
+export const modalComponents: Record<string, React.ReactNode> = {
+  firstSelect: <FirstSelect />,
+  makeRoom: <MakeRoom />,
+  selectWhiteBlack: <BigDeck />,
+  turnWaiting: <TurnWaiting />,
+  gameWaiting: <GameWaiting />,
+  GamrRoomJoinConfirm: (
+    <Alert message="개임 방 만들기는 로그인 후 가능합니다." />
+  ),
+};

src/components/ui/modalContents/Alert.tsx

@@ -0,0 +1,31 @@
+import Button from "../button/Button";
+import { useModal } from "@hooks/useModal";
+import { Container, Message } from "./alertStyle";
+
+interface IAlertConfirmProps {
+  message: string;
+}
+
+export default function Alert({ message }: IAlertConfirmProps) {
+  const { closeModal } = useModal();
+
+  const onClickCancel = () => {
+    closeModal();
+  };
+
+  return (
+    <Container>
+      <Message>{message}</Message>
+      <Button
+        type="button"
+        size="md"
+        textcolor="black"
+        bgcolor="green"
+        width="200px"
+        onClick={onClickCancel}
+      >
+        확인
+      </Button>
+    </Container>
+  );
+}

src/components/ui/modalContents/alertStyle.ts

@@ -0,0 +1,18 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  gap: 50px;
+`;
+
+export const Message = styled.p`
+  font-size: 20px;
+  word-wrap: break-word;
+  max-width: 400px;
+  line-height: 1.7rem;
+  text-align: center;
+`;

src/components/ui/profile/Profile.tsx

@@ -1,9 +1,10 @@
 import * as S from "./profileStyle";
+import myProfileImage from "@assets/images/image_profile_01.svg";
 
 export default function Profile({ nickname }: IprofileProps) {
   return (
     <S.container>
-      <S.avatar></S.avatar>
+      <S.avatar src={myProfileImage} alt="내 프로필 이미지" />
       <S.nameBox>
         <S.nickname>{nickname}</S.nickname>
       </S.nameBox>

src/pages/game/GameRoom.tsx

@@ -351,7 +351,7 @@ export default function GameRoom() {
         <ChattingBox />
       </S.leftContainer>
       <S.centerContainer>
-        <S.guideBox></S.guideBox>
+        <S.otherPlayerDeck></S.otherPlayerDeck>
         <S.otherPlayerDeck>
           {opponentColor?.map((deck, index) => (
             <BackDeck

src/pages/game/gameRoomList.tsx

@@ -17,9 +17,15 @@ export default function GameRoomList() {
   const { openModal } = useModal();
   const { data: gameRooms } = useGetGameRoomList();
   console.log("gameRooms✅", gameRooms);
+  const accessToken = localStorage.getItem("accessToken");
+  console.log(accessToken);
 
   const onClickModalOpen = () => {
-    openModal("makeRoom", "white");
+    if (!accessToken || accessToken === null) {
+      openModal("GamrRoomJoinConfirm", "white");
+    } else {
+      openModal("makeRoom", "white");
+    }
   };
 
   return (

src/pages/game/gameRoomStyle.ts

@@ -14,43 +14,31 @@ export const leftContainer = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  background-color: yellow;
+  gap: 30px;
 `;
 
 export const centerContainer = styled.div`
   height: 100%;
   width: 100%;
-  background-color: green;
+  flex-grow: 1;
   position: relative;
 `;
 
 export const rightContainer = styled.div`
-  margin-right: 77px;
-  padding-bottom: 44px;
   width: 390px;
-  height: 100%;
   display: flex;
   gap: 40px;
   flex-direction: column;
-  justify-content: end;
-  background-color: blue;
+  justify-content: space-between;
 `;
 
 export const myDeckBox = styled.div`
   display: flex;
   justify-content: end;
   width: 100%;
   height: 90px;
+  flex-grow: 1;
   gap: 11px;
-  background-color: purple;
-`;
-
-export const guideBox = styled.div`
-  width: 100%;
-  height: 60px;
-  display: flex;
-  flex-direction: center;
-  background-color: red;
 `;
 
 export const otherPlayerDeck = styled.div`
@@ -59,12 +47,10 @@ export const otherPlayerDeck = styled.div`
   height: 90px;
   display: flex;
   gap: 12px;
-  background-color: aqua;
 `;
 
 export const selectNumberBox = styled.div`
   margin-top: 40px;
   width: 100%;
   height: 229px;
-  background-color: black;
 `;

src/pages/home/homeStyle.ts

@@ -10,12 +10,14 @@ const basicStyle = css`
 
 export const HomeContainer = styled.div`
   width: 100%;
+  min-width: 600px;
   height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: 30px;
+  flex-shrink: 0;
 `;
 
 export const NavWrapper = styled.nav`