Merge pull request #264 from tukcomCD2024/Frontend#263

Frontend/디자인 수정

frontend/src/Component/Auth/AuthPage.js

@@ -1,7 +1,6 @@
 import React, { useEffect } from "react";
 import styled from "styled-components";
-import veryBigEye from "../../image/veryBigEye.gif";
-import book1 from "../../image/book1.gif";
+import book from "../../image/book.gif";
 import { useNavigate } from "react-router-dom";
 
 function AuthPage() {
@@ -14,8 +13,10 @@ function AuthPage() {
   return (
     <FlexContainer>
       <ImageWrapper>
-        <BigEyeImage src={veryBigEye} alt="Very Big Eye" />
-        <BookImage src={book1} alt="Book" />
+        <BookImage src={book} alt="Book" />
+        <CommentWrapper>
+          <p>Let's Share with me!!</p>
+        </CommentWrapper>
       </ImageWrapper>
       <AuthBox>
         <ToMain>
@@ -34,16 +35,24 @@ const FlexContainer = styled.div`
   display: flex;
   align-items: stretch;
   height: 100vh;
-  background-color: #f5f5f5;
+  // background-color: #FFFFE0;
 `;
 
 const ImageWrapper = styled.div`
   flex: 3;
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: #ddd;
-  position: relative; /* 이를 relative로 설정 */
+  background-color: #FFFFE0;
+  position: relative; 
+`;
+
+const CommentWrapper = styled.div`
+  width: 50%;
+  margin-top: 30%;
+  font-size: 25px;
+  font-weight: 600;
+  color: #FF8C00;
 `;
 
 const AuthBox = styled.div`
@@ -65,7 +74,6 @@ const ToMain = styled.div`
 
 const LoginBtn = styled.button`
   width: 100%;
-
   background-color: #0064ff;
   color: #ffffff;
   border: 1px solid #000000;
@@ -101,10 +109,10 @@ const SignupBtn = styled.button`
 const BigEyeImage = styled.img`
   width: 300px;
   height: auto;
-  position: absolute; /* 이 이미지를 absolute로 설정 */
-  left: 50%; /* 중앙 정렬을 위해 */
-  top: 48%; /* 중앙 정렬을 위해 */
-  transform: translate(-50%, -50%); /* 정확히 중앙에 위치하도록 조정 */
+  position: absolute; 
+  left: 50%; 
+  top: 48%; 
+  transform: translate(-50%, -50%);
 
   @media screen and (max-width: 768px) {
     flex-direction: column;
@@ -114,12 +122,12 @@ const BigEyeImage = styled.img`
 `;
 
 const BookImage = styled.img`
-  width: 600px;
+  width: 53%;
   height: auto;
-  position: absolute; /* 이 이미지도 absolute로 설정 */
-  left: 50%; /* 중앙 정렬을 위해 */
-  top: 40%; /* 중앙 정렬을 위해 */
-  transform: translate(-50%, -50%); /* 정확히 중앙에 위치하도록 조정 */
+  position: absolute;
+  left: 50%; 
+  top: 40%; 
+  transform: translate(-50%, -50%) rotate(20deg);
 
   @media screen and (max-width: 768px) {
     display: none;

frontend/src/Component/Note/NotePage.js

@@ -4,8 +4,8 @@ import styled, { keyframes, css } from "styled-components";
 import OrganizationInfoModal from "./organizationInfo/organizationInfo";
 import OrganizationContainer from "../Organization/Organization_Web";
 import ImagetoBackend from "../Utils/imageToBackend";
-import noneImage from "../../image/NoneImage2.png";
-import defaultImage from "../../image/defaultNote2.png";
+import noneImage from "../../image/NoneImage.png";
+import defaultImage from "../../image/defaultNote.png";
 import backgroundImage from "../../image/organizationBackgroundImage.png";
 import AddNoteIcon from "../../image/addNote.svg";
 import toastr from "toastr";
@@ -177,7 +177,7 @@ function NotePage() {
                     return {
                       id: note.id,
                       name: note.title,
-                      image: note.noteImageUrl,
+                      image: note.noteImageUrl == "http~" ? defaultImage : note.noteImageUrl,
                       organizationId: id,
                       pageId: pageData[0].pageId,
                     };

frontend/src/Component/Page/Page.js

@@ -38,7 +38,7 @@ import { isWeb, checkLocalStorage } from "./utils/initMobileWebView"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faLeftLong, faRightLong, faSquarePlus, faTrashCan, faList, faGear } from "@fortawesome/free-solid-svg-icons";
 import { cursorColors } from "../Utils/cursorColor"
-import defaultNoteImage from "../../image/defaultNote2.png";
+import defaultNoteImage from "../../image/defaultNote.png";
 import LoadingScreen from "../Utils/LoadingScreen";
 
 function Page() {

frontend/src/Component/Page/ProseMirror_css/ProseMirror.css

@@ -344,7 +344,7 @@ img.ProseMirror-separator {
 }
 #editor,
 .editor {
-  background-image: url('/src/image/note_paper\(8\).svg');
+  background-image: url('/src/image/note_paper.svg');
   background-size: 83% 260%;
   background-repeat: no-repeat; 
   background-position: 16vw -7vw; 

frontend/src/Component/Page/utils/editor/noteSettingModal.js

@@ -6,7 +6,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faTrashCan } from "@fortawesome/free-solid-svg-icons";
 import toastr from "toastr";
 import "toastr/build/toastr.css";
-import defaultNoteImage from "../../../../image/defaultNote2.png";
+import defaultNoteImage from "../../../../image/defaultNote.png";
 
 const NoteSettingModal = ({
     modalOpen,