Merge branch 'dev' of https://github.com/kSideProject/kpring into fea…

…t/update-profile

auth/.gitignore

@@ -38,3 +38,6 @@ out/
 
 ### Kotlin ###
 .kotlin
+
+### api docs ###
+/src/main/resources/static/openapi3.yaml

auth/build.gradle.kts

@@ -84,7 +84,7 @@ jib {
     image = "eclipse-temurin:21-jre"
   }
   to {
-    image = "localhost:5000/auth-application"
+    image = "youdong98/kpring-auth-application"
     setAllowInsecureRegistries(true)
     tags = setOf("latest")
   }

chat/.gitignore

@@ -38,3 +38,6 @@ out/
 
 ### Kotlin ###
 .kotlin
+
+### api docs ###
+/src/main/resources/static/openapi3.yaml

core/src/main/kotlin/kpring/core/chat/chat/dto/request/ChatType.kt

@@ -5,7 +5,7 @@ enum class ChatType(val type: String) {
   Server("Server"),
   ;
 
-  override fun toString(): String  {
+  override fun toString(): String {
     return type
   }
 }

front/.gitignore

@@ -21,3 +21,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+Chart.lock

front/src/components/Layout/Header.tsx

@@ -16,8 +16,7 @@ const Header = () => {
   const DRAWER_WIDTH = 240; // 오른쪽 사이드바 넓이
   const [open, setOpen] = useState(false); // 사이드바 열고 닫힌 상태
   const [openDrawer, setOpenDrawer] = useState<string | null>(null); // 메세지 또는 친구 사이드바 상태
-  const IsChatRoomShow = useChatRoomStore(state=>state.isChatRoomShow);
-
+  const IsChatRoomShow = useChatRoomStore((state) => state.isChatRoomShow);
 
   // 오른쪽 사이드바 오픈 핸들러
   const handleDrawerOpen = (sidebar: string) => {
@@ -88,27 +87,25 @@ const Header = () => {
         anchor="right"
         open={openDrawer === "message"}>
         <MessageRightSideBar close={handleDrawerClose} />
-
-      </Drawer>
       </Drawer>
 
       <Drawer
-      sx={{
-        width: DRAWER_WIDTH,
-        flexShrink: 0,
-        "& .MuiDrawer-paper": {
+        sx={{
           width: DRAWER_WIDTH,
-          backgroundColor: "#2A2F4F",
-          color: "white"
-        }, 
-      }}
-      variant="persistent"
-      anchor="right"
-      open={IsChatRoomShow}>
-      <ChatRoomSideBar />
-    </Drawer>
+          flexShrink: 0,
+          "& .MuiDrawer-paper": {
+            width: DRAWER_WIDTH,
+            backgroundColor: "#2A2F4F",
+            color: "white",
+          },
+        }}
+        variant="persistent"
+        anchor="right"
+        open={IsChatRoomShow}>
+        <ChatRoomSideBar />
+      </Drawer>
     </header>
   );
 };
 
-export default Header;
+export default Header;

front/src/components/Layout/LeftSideBar.tsx

@@ -13,26 +13,30 @@ import AddIcon from "@mui/icons-material/Add";
 import { useState } from "react";
 import { serverData } from "../../utils/fakeData";
 import ServerInfoSidebar from "./ServerInfoSidebar";
+import CreateServerForm from "../Server/CreateServerForm";
+import useModal from "../../hooks/Modal";
+import ModalComponent from "../Modal/ModalComponent";
 
 const LeftSideBar = () => {
   const DRAWER_WIDTH = 88; // 왼쪽 서버 사이드바 넓이
-  const [open, setOpen] = useState(false); // 서버 인포 사이드바 열
+  const [openServerInfo, setOpenServerInfo] = useState(false); // 서버 인포 사이드바 열기
+  const { isOpen, openModal } = useModal();
   const [serverId, setServerId] = useState("");
 
   // 왼쪽 멤버 사이드바 오픈 핸들러
   const handleDrawerOpen = (id: string) => {
-    setOpen(true);
+    setOpenServerInfo((openServerInfo) => !openServerInfo);
     setServerId(id);
   };
 
   // 왼쪽 멤버 사이드바 닫기 핸들러
   const handleDrawerClose = () => {
-    setOpen(false);
+    setOpenServerInfo((openServerInfo) => !openServerInfo);
   };
 
   return (
     <Box sx={{ position: "absolute" }}>
-      {/* <Drawer
+      <Drawer
         variant="permanent"
         sx={{
           width: DRAWER_WIDTH,
@@ -45,7 +49,7 @@ const LeftSideBar = () => {
         <List sx={{ display: "flex", flexDirection: "column" }}>
           <ListItem alignItems="center">
             <ListItemButton>
-              <AddIcon></AddIcon>
+              <AddIcon onClick={openModal}></AddIcon>
             </ListItemButton>
           </ListItem>
           <Divider />
@@ -71,13 +75,16 @@ const LeftSideBar = () => {
           })}
         </List>
       </Drawer>
-      <Drawer open={open} variant="persistent">
+      <Drawer open={openServerInfo} variant="persistent">
         <ServerInfoSidebar
-          open={open}
+          open={openServerInfo}
           close={handleDrawerClose}
           serverID={serverId}
         />
-      </Drawer> */}
+      </Drawer>
+      <ModalComponent isOpen={isOpen}>
+        <CreateServerForm></CreateServerForm>
+      </ModalComponent>
     </Box>
   );
 };

front/src/components/Layout/MemberList.tsx

@@ -1,33 +1,32 @@
 import { List } from "@mui/material";
 import MemberListItem from "./MemberListItem";
-import MemberProfile from "../Profile/MemberProfile";
 import React from "react";
 import { Member } from "../../types/layout";
+import ModalComponent from "../Modal/ModalComponent";
+import Profile from "../Profile/Profile";
+import useModal from "../../hooks/Modal";
 
-interface MemberListProps{
-    memberList: Member[]
+interface MemberListProps {
+  memberList: Member[];
 }
 
 // TODO : 오른쪽 사이드바 멤버 리스트
-const MemberList : React.FC<MemberListProps> = ({memberList}) => {
-    const [openProfile, setOpenProfile] = React.useState(false);
-    const handleProfileOpen = () => setOpenProfile(true);
-    const handleProfileClose = () => setOpenProfile(false);
+const MemberList: React.FC<MemberListProps> = ({ memberList }) => {
+  const { isOpen, openModal, closeModal } = useModal();
 
-    return (
+  return (
     <>
-        <List className="overflow-auto scrollbar-hide">
-            {memberList.map(member=>(
-                <MemberListItem member={member} handleProfileOpen = {handleProfileOpen}/>
-            ))}     
-        </List>
-        <MemberProfile
-            openModal={openProfile}
-            closeModal={handleProfileClose}
-        ></MemberProfile>
+      <List className="overflow-auto scrollbar-hide">
+        {memberList.map((member) => (
+          <MemberListItem member={member} handleProfileOpen={openModal} />
+        ))}
+      </List>
+      <ModalComponent isOpen={isOpen}>
+        {/* TODO: API연결되면 props로 유저정보 내려주기 */}
+        <Profile closeModal={closeModal} />
+      </ModalComponent>
     </>
+  );
+};
 
-  )
-}
-
-export default MemberList
+export default MemberList;

front/src/components/Layout/ServerInfoSidebar.tsx

@@ -10,16 +10,20 @@ import {
   ListItemText,
   Button,
   styled,
+  Modal,
 } from "@mui/material";
 import { serverData } from "../../utils/fakeData";
-import MemberProfile from "../Profile/MemberProfile";
+import MemberProfile from "../Profile/Profile";
 import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
 import { useNavigate } from "react-router-dom";
 import FavoriteStar from "../Home/FavoriteStar";
+import ModalComponent from "../Modal/ModalComponent";
+import useModal from "../../hooks/Modal";
+import Profile from "../Profile/Profile";
 
 const ServerInfoSidebar: React.FC<ServerInforProps> = ({
   close,
-  open,
+  // open,
   serverID,
 }) => {
   const DrawerHeader = styled("div")(({ theme }) => ({
@@ -29,11 +33,8 @@ const ServerInfoSidebar: React.FC<ServerInforProps> = ({
     ...theme.mixins.toolbar,
     justifyContent: "flex-start",
   }));
-
-  const [openProfile, setOpenProfile] = React.useState(false);
-  const handleOpen = () => setOpenProfile(true);
-  const handleClose = () => setOpenProfile(false);
   const navigate = useNavigate();
+  const { isOpen, openModal, closeModal } = useModal();
 
   return (
     <>
@@ -50,7 +51,7 @@ const ServerInfoSidebar: React.FC<ServerInforProps> = ({
           .map((member) => {
             return (
               <ListItem>
-                <ListItemAvatar onClick={handleOpen}>
+                <ListItemAvatar onClick={openModal}>
                   <Badge
                     color="success"
                     variant="dot"
@@ -67,9 +68,9 @@ const ServerInfoSidebar: React.FC<ServerInforProps> = ({
             );
           })}
       </List>
-      <MemberProfile
-        openModal={openProfile}
-        closeModal={handleClose}></MemberProfile>
+      <ModalComponent isOpen={isOpen}>
+        <Profile closeModal={closeModal} />
+      </ModalComponent>
     </>
   );
 };

front/src/components/Map/ServerMap.tsx

@@ -2,6 +2,7 @@ import { forwardRef, useEffect, useLayoutEffect, useRef } from "react";
 import { EventBus } from "./EventBus";
 import { ServerMapProps, ServerMapTypes } from "../../types/server";
 import EnterServer from "./main";
+import VideoCallBoxList from "../VideoCall/VideoCallBoxList";
 
 // 서버를 생성하고 관리하는 컴포넌트
 // forwardRef를 사용해 부모 컴포넌트로부터 ref를 전달 받음
@@ -99,7 +100,9 @@ export const ServerMap = forwardRef<ServerMapTypes, ServerMapProps>(
           <div id="drag" className="cursor-pointer">
             드래그
           </div>
+          <VideoCallBoxList/>
         </div>
+
       </div>
     );
   }

front/src/components/Modal/ModalComponent.tsx

@@ -0,0 +1,21 @@
+import { Box, Modal } from "@mui/material";
+import React, { ReactNode } from "react";
+import { modalStyle } from "../../types/modal";
+
+interface ModalComponentProps {
+  children: ReactNode;
+  isOpen: boolean;
+}
+
+const ModalComponent = ({ children, isOpen }: ModalComponentProps) => {
+  return (
+    <Modal
+      open={isOpen}
+      aria-labelledby="parent-modal-title"
+      aria-describedby="parent-modal-description">
+      <Box sx={modalStyle}>{children}</Box>
+    </Modal>
+  );
+};
+
+export default ModalComponent;

front/src/components/Profile/Profile.tsx

@@ -0,0 +1,17 @@
+import { Avatar, Button, Typography } from "@mui/material";
+
+interface ProfileProps {
+  closeModal: () => void;
+}
+
+const Profile = ({ closeModal }: ProfileProps) => {
+  return (
+    <>
+      <Avatar></Avatar>
+      <Typography id="keep-mounted-madal-title">User Name</Typography>
+      <Button onClick={closeModal}>닫기</Button>
+    </>
+  );
+};
+
+export default Profile;

front/src/components/Server/CreateServerForm.tsx

@@ -0,0 +1,42 @@
+import { Button, FormControl, Input, Select } from "@mui/material";
+
+import React from "react";
+import useModal from "../../hooks/Modal";
+import { Label } from "@mui/icons-material";
+import axios from "axios";
+
+const CreateServerForm = () => {
+  const { closeModal, openModal } = useModal();
+
+  const onSubmitHandler = async () => {};
+
+  return (
+    <div>
+      <h2>새로운 서버 생성</h2>
+      <form onSubmit={onSubmitHandler}>
+        <label>서버이름</label>
+        <Input type="text" required />
+
+        {/* <FormControl defaultValue="" required>
+          <Label>서버이름</Label>
+          <Input />
+        </FormControl>
+
+        <FormControl defaultValue="">
+          <Label>카테고리</Label>
+          <Select
+            defaultValue={"personal"}
+            id="named-select"
+            name="demo-select">
+            <option value="personal">개인</option>
+            <option value="game">게임</option>
+            <option value="study">학습</option>
+          </Select>
+        </FormControl> */}
+        <button type="submit">서버생성</button>
+      </form>
+    </div>
+  );
+};
+
+export default CreateServerForm;