Merge pull request #77 from play3step/feat/websocket-connect

Feat/websocket connect
play3step · Aug 31, 2024 · 572259d · 572259d
2 parents 754abcc + 7f95939
commit 572259d
Show file tree

Hide file tree

Showing 12 changed files with 451 additions and 142 deletions.
diff --git a/src/assets/user.svg b/src/assets/user.svg
diff --git a/src/components/EditPage/EditHeader.jsx b/src/components/EditPage/EditHeader.jsx
@@ -15,8 +15,16 @@ import ShareBtn from './PreviewSlide/atom/ShareBtn';
 import { meshyLoadingState } from '../../store/toolState';
 import Spinner from '../Modal/atom/Spinner';
 
-function EditHeader({ pageValue, setMenu, fullScreen, redo, undo }) {
-  const { addText } = useText();
+function EditHeader({
+  pageValue,
+  setMenu,
+  fullScreen,
+  redo,
+  undo,
+  socket,
+  code,
+}) {
+  const { sendText } = useText(socket, code);
   const is3dDisabled = pageValue.type !== '3d';
   const is2dDisabled = pageValue.type !== '2d';
   const setModal = useSetRecoilState(CreateModalState);
@@ -61,7 +69,10 @@ function EditHeader({ pageValue, setMenu, fullScreen, redo, undo }) {
       <CenterSection>
         {pageValue.type !== '3d' ? (
           <EditorBox>
-            <SvgIcon type="Text" onClick={is3dDisabled ? addText : undefined} />
+            <SvgIcon
+              type="Text"
+              onClick={is3dDisabled ? sendText : undefined}
+            />
             <SvgIcon
               type="Shape"
               onClick={() => (is3dDisabled ? setMenu(1) : null)}

diff --git a/src/components/EditPage/ItemListBox/2D/ShapeItem.jsx b/src/components/EditPage/ItemListBox/2D/ShapeItem.jsx
@@ -2,11 +2,11 @@ import styled from 'styled-components';
 import SvgLargeIcon from '../../atom/SvgLargeIcon';
 import useShapes from '../../../../hooks/AddItem/useShapes';
 
-function ShapeItem({ menuRef }) {
-  const { addShape } = useShapes();
+function ShapeItem({ menuRef, socket, code }) {
+  const { sendShape } = useShapes(socket, code);
 
   const handleAddShape = (shapeType) => () => {
-    addShape(shapeType);
+    sendShape(shapeType);
   };
 
   return (

diff --git a/src/components/ItemPage/ProjectCard.jsx b/src/components/ItemPage/ProjectCard.jsx
@@ -1,6 +1,7 @@
 import styled from 'styled-components';
 
 import { useNavigate } from 'react-router-dom';
+
 import { ReactComponent as Logo } from '../../assets/myPage/logo.svg';
 
 function ProjectCard({ data }) {
@@ -16,16 +17,16 @@ function ProjectCard({ data }) {
           src={data.thumbnailUrl}
           alt="이미지"
           style={{
-            width: '17.6vw',
-            height: '16.29vh',
+            width: '16.66vw',
+            height: '17.77vh',
+            display: 'flex',
           }}
         />
       ) : (
-        <Logo width="17.6vw" height="16.29vh" />
+        <Logo width="16.66vw" height="17.77vh" />
       )}
       <CardTextBox>
         <CardTitle>{data.name}</CardTitle>
-        <CardDate>{data.createdAt}</CardDate>
       </CardTextBox>
     </CardContainer>
   );
@@ -37,6 +38,8 @@ const CardContainer = styled.div`
   position: relative;
   width: 17.708vw;
   display: flex;
+  justify-content: center;
+  align-items: center;
   flex-direction: column;
   border: 1px solid rgba(0, 0, 0, 0.25);
   border-radius: 4px;
@@ -47,7 +50,7 @@ const CardContainer = styled.div`
 
 const CardTextBox = styled.div`
   width: 100%;
-  height: 8.407vh;
+  height: 5.18vh;
   padding: 0.625vw;
   border-top: 1px solid rgba(0, 0, 0, 0.25);
   line-height: 1.3vw;
@@ -56,6 +59,3 @@ const CardTextBox = styled.div`
 const CardTitle = styled.div`
   font-size: 0.7vw;
 `;
-const CardDate = styled.div`
-  font-size: 0.9vw;
-`;
diff --git a/src/components/Menu/atom/UserInfoBox.jsx b/src/components/Menu/atom/UserInfoBox.jsx
@@ -1,9 +1,18 @@
 import styled from 'styled-components';
+import { ReactComponent as User } from '../../../assets/user.svg';
 
 function UserInfoBox({ name, email }) {
   return (
     <Container>
-      <UserProfile />
+      <User
+        style={{
+          width: '1.979vw',
+          height: '1.979vw',
+          marginRight: '0.6vw',
+          borderRadius: '25px',
+          flexShrink: 0,
+        }}
+      />
       <RightBox>
         <UserName>{name}</UserName>
         <UserEmail>{email}</UserEmail>
@@ -21,14 +30,14 @@ const Container = styled.div`
   align-items: center;
 `;
 
-const UserProfile = styled.div`
-  width: 1.979vw;
-  height: 1.979vw;
-  border-radius: 25px;
-  background-color: gray;
-  margin-right: 1.25vw;
-  flex-shrink: 0;
-`;
+// const UserProfile = styled.img`
+//   width: 1.979vw;
+//   height: 1.979vw;
+//   border-radius: 25px;
+//   background-color: gray;
+//   margin-right: 1.25vw;
+//   flex-shrink: 0;
+// `;
 
 const RightBox = styled.div`
   display: flex;

diff --git a/src/hooks/AddItem/useImage.js b/src/hooks/AddItem/useImage.js
@@ -1,16 +1,16 @@
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { pageState, imageList } from '../../store/recoil';
+import { postFile } from '../../apis/Project/ProjectController';
 
-const useImage = () => {
+const useImage = (socket, code) => {
   const [imgValue, setImgValue] = useRecoilState(imageList);
   const pageData = useRecoilValue(pageState);
   const currentPageImages = imgValue[pageData] || [];
+  const randomX = 600 + (Math.random() * 60 - 30);
+  const randomY = 300 + (Math.random() * 60 - 30);
+  const imageCountInCurrentPage = currentPageImages.length;
 
   const addImage = (imgUrl) => {
-    const randomX = 600 + (Math.random() * 60 - 30);
-    const randomY = 300 + (Math.random() * 60 - 30);
-    const imageCountInCurrentPage = currentPageImages.length;
-
     const newImage = {
       x: randomX,
       y: randomY,
@@ -26,8 +26,37 @@ const useImage = () => {
     };
     setImgValue(updatedImages);
   };
+  const sendImage = async (file) => {
+    try {
+      const fileUrl = await postFile(file);
+      const imageData = {
+        saveType: 'saveImage',
+        editType: '0',
+        deleteType: '0',
+        roomId: code,
+        image: {
+          imageId: pageData,
+          pageId: pageData,
+          projecId: pageData,
+          id: `image${imageCountInCurrentPage + 1}`,
+          imageUri: fileUrl,
+          x: randomX,
+          y: randomY,
+          width: 300,
+          height: 300,
+        },
+      };
+      if (socket && socket.readyState === WebSocket.OPEN) {
+        socket.send(JSON.stringify(imageData));
+      } else {
+        console.error('WebSocket is not open');
+      }
+    } catch (error) {
+      console.error('Image upload failed', error);
+    }
+  };
 
-  return { imgValue, addImage };
+  return { imgValue, addImage, sendImage };
 };
 
 export default useImage;