);
}
-
-// const Image = styled.div`
-// width: 100%;
-// height: 100%;
-// background-image: url(https://vignette.wikia.nocookie.net/blogclan-2/images/b/b9/Random-image-15.jpg/revision/latest?cb=20160706220047);
-// background-size: 100% 100%;
-// `;
-// const MemoBox = styled.div`
-// width: 160px;
-// height: 160px;
-// background-color: yellow;
-// border-radius: 15px;
-// `;
diff --git a/src/Page/NewSticky.js b/src/page/RollingPaper/NewSticky.js
similarity index 92%
rename from src/Page/NewSticky.js
rename to src/page/RollingPaper/NewSticky.js
index 44c8bd6..355919d 100644
--- a/src/Page/NewSticky.js
+++ b/src/page/RollingPaper/NewSticky.js
@@ -1,11 +1,11 @@
import styled from 'styled-components';
import React, { useState, useRef } from 'react';
import Draggable from 'react-draggable';
-import './Active.css';
+import '../../style/Active.css';
export default function NewSticky({ skickyUrl, setCoor }) {
const nodeRef = useRef(null);
- const [position, setPosition] = useState({ x: 0, y: 0 });
+ const [position, setPosition] = useState({ x: 70, y: 70 });
const [Opacity, setOpacity] = useState(false);
diff --git a/src/Page/Rolling.js b/src/page/RollingPaper/Rolling.js
similarity index 90%
rename from src/Page/Rolling.js
rename to src/page/RollingPaper/Rolling.js
index cac4f71..b2100e8 100644
--- a/src/Page/Rolling.js
+++ b/src/page/RollingPaper/Rolling.js
@@ -5,33 +5,33 @@ import { FcExpand, FcCancel } from 'react-icons/fc';
import { useNavigate, useLocation } from 'react-router-dom';
import styled from 'styled-components';
import axios from 'axios';
-import Loading from './Loading';
-
-import image1 from '../Image/image1.png';
-import image2 from '../Image/image2.png';
-import image3 from '../Image/image3.png';
-import image4 from '../Image/image4.png';
-import image5 from '../Image/image5.png';
-import PhotoModal from './PhotoModal';
+import Loading from '../../component/Loading';
+
+import image1 from '../../assets/image/image1.png';
+import image2 from '../../assets/image/image2.png';
+import image3 from '../../assets/image/image3.png';
+import image4 from '../../assets/image/image4.png';
+import image5 from '../../assets/image/image5.png';
+import PhotoModal from '../PhotoModal';
import Memo from './RollingMemo';
import Sticky from './RollingSticky';
import Photo from './RollingPhoto';
-import NewPhoto from './NewPhoto';
import NewMemo from './newMemo';
import NewSticky from './NewSticky';
+import NewPhoto from './NewPhoto';
-import pencilicon from '../Image/pencilicon.png';
-import galleryicon from '../Image/galleryicon.png';
-import memoicon from '../Image/memoicon.svg';
-import usericon from '../Image/usericon.png';
-import StickerModal from './StickerModal';
+import pencilicon from '../../assets/image/pencilicon.png';
+import galleryicon from '../../assets/image/galleryicon.png';
+import memoicon from '../../assets/image/memoicon.svg';
+import usericon from '../../assets/image/usericon.png';
+import StickerModal from '../StickerModal';
import 'react-toastify/dist/ReactToastify.css';
-import userback from '../Image/userbackimg.png';
+import userback from '../../assets/image/userbackimg.png';
-import './snow.css';
+import '../../style/snow.css';
-import KakaoShare from './KakaoShare';
+import KakaoShare from '../../component/KakaoShare';
const backBaseUrl = process.env.REACT_APP_BACKEND_URL;
@@ -243,23 +243,18 @@ function Rolling() {
try {
const item = await axios.get(`${backBaseUrl}/api/v1/papers/${paperId}/`);
// ###관리자로 로그인 돼있을 경우 IsAdmin활성화!#######
- // console.log(item.data);
if (item.data.user === localStorage.getItem('id')) {
setIsAdmin(true);
- // console.log('hihihihihihi');
}
// /###########################
- console.log('폴링 중입니다!!!!!!!!!!!');
setItems(item.data);
setLength(
item.data.memo.length +
item.data.image.length +
item.data.sticker.length,
);
- // console.log(backgroundImg);
} catch (e) {
// 서버에서 받은 에러 메시지 출력
- console.log('FailGet');
}
};
@@ -293,9 +288,7 @@ function Rolling() {
}
}, []);
- useEffect(() => {
- console.log(memoData);
- }, [memoData]);
+ useEffect(() => {}, [memoData]);
const openPhotoModal = useCallback(() => setIsPhotoOpen(true), []); // 사진 모달창 열기
const closePhotoModal = useCallback(() => setIsPhotoOpen(false), []); // 사진 모달창 닫기
const openStickyModal = useCallback(() => setIsStickyOpen(true), []); // 스티커 모달창 열기
@@ -314,7 +307,6 @@ function Rolling() {
password: '1',
})
.then(() => {
- console.log('delete!!!!!!!!!!!!!!');
setDeleteAction(true);
});
}, []);
@@ -324,7 +316,6 @@ function Rolling() {
password: '1',
})
.then(() => {
- console.log('delete!!!!!!!!!!!!!!');
setDeleteAction(true);
});
}, []);
@@ -335,7 +326,6 @@ function Rolling() {
password: '1234',
})
.then(() => {
- console.log('delete!!!!!!!!!!!!!!');
setDeleteAction(true);
});
}, []);
@@ -350,20 +340,16 @@ function Rolling() {
return;
}
- console.log(memoData);
-
try {
await axios.post(
`${backBaseUrl}/api/v1/papers/${paperId}/memos`,
memoData,
);
- console.log('successSave!!!!');
setIsMemo(false); // 메모기능 비활성화
setIsActive(false); // 수정기능 비활성화
} catch (e) {
// 서버에서 받은 에러 메시지 출력
- console.log(e);
}
};
@@ -383,12 +369,10 @@ function Rolling() {
rotate: 30,
});
- console.log('successSticky!!!!');
setIsSticky(false); // 스티커 기능 비활성화
setIsActive(false); // 수정 기능 비활성화
} catch (e) {
// 서버에서 받은 에러 메시지 출력
- console.log(e);
}
};
@@ -398,11 +382,9 @@ function Rolling() {
setIsPhoto(false); // 사진기능 비활성화
setIsActive(false); // 수정기능 비활성화
setPhoto('');
- console.log(photo.image_id);
HandlePhotoDelete(photo.image_id);
return;
}
- console.log(photo);
// if (photo === '') {
// setIsPhoto(false); // 사진기능 비활성화
// setIsActive(false); // 수정기능 비활성화
@@ -410,7 +392,6 @@ function Rolling() {
setLoading(true);
- console.log('start Resizing');
axios
.post(`${backBaseUrl}/api/v1/papers/${paperId}/xyphotos`, {
image_id: photo.image_id,
@@ -422,15 +403,12 @@ function Rolling() {
height: coor.height2,
})
.then(() => {
- console.log('successPhoto!!!!');
setIsPhoto(false); // 사진 기능 비활성화
setIsActive(false); // 수정 기능 비활성화
setPhoto('');
setLoading(false);
})
.catch(() => {
- console.log(photo.image_id);
- console.log('fail save photo');
setLoading(true);
});
};
@@ -442,10 +420,8 @@ function Rolling() {
`${backBaseUrl}/api/v1/papers/${paperId}/`,
);
// ###관리자로 로그인 돼있을 경우 IsAdmin활성화!#######
- // console.log(item.data);
if (item.data.user === localStorage.getItem('id')) {
setIsAdmin(true);
- // console.log('hihihihihihi');
}
// /###########################
setItems(item.data);
@@ -455,23 +431,18 @@ function Rolling() {
item.data.sticker.length,
);
bgimage(item.data.paper_url);
- // console.log(backgroundImg);
} catch (e) {
// 서버에서 받은 에러 메시지 출력
- console.log('FailGet');
}
setDeleteAction(false);
};
getMemos();
}, [isActive, deleteAction]);
- // console.log(backgroundImg);
const parentFunction = positon => {
setCoor(positon);
- // console.log(coor);
};
- // console.log(items.image);
// 스티커?메모지?사진? 확인해주고 어떤 것이 새로 생겨서 움직일 것인지 정해주는 함수
function isItem() {
return isMemo ? (
diff --git a/src/Page/RollingMemo.js b/src/page/RollingPaper/RollingMemo.js
similarity index 77%
rename from src/Page/RollingMemo.js
rename to src/page/RollingPaper/RollingMemo.js
index f932597..5b3040b 100644
--- a/src/Page/RollingMemo.js
+++ b/src/page/RollingPaper/RollingMemo.js
@@ -2,11 +2,7 @@
import styled from 'styled-components';
import React, { useState, useRef } from 'react';
import Draggable from 'react-draggable';
-import DeleteBtn from '../Component/DeleteBtn';
-// import axios from 'axios';
-
-// import axios from 'axios';
-// const backBaseUrl = process.env.REACT_APP_BACKEND_URL;
+import DeleteBtn from '../../component/DeleteBtn';
export default function App({ list, isAdmin, HandleMemoDelete }) {
const nodeRef = useRef(null);
@@ -23,7 +19,6 @@ export default function App({ list, isAdmin, HandleMemoDelete }) {
// password,
} = list;
- // console.log(list);
// eslint-disable-next-line no-unused-vars
const [position, setPosition] = useState({ x: 0, y: 0 });
@@ -36,25 +31,9 @@ export default function App({ list, isAdmin, HandleMemoDelete }) {
const handleStart = () => {
setOpacity(true);
};
- // const paperId = localStorage.getItem('paperId');
const handleEnd = async () => {
setOpacity(false);
- // try {
- // // ###############새로운 api들어와야 함!!!!!!!!!!!!!!!!!!!!!!!!########
- // await axios.post(`${backBaseUrl}/api/v1/papers/${paperId}/memos`, {
- // content,
- // nickname,
- // font,
- // password,
- // color,
- // font_color,
- // xcoor,
- // ycoor,
- // });
- // } catch (e) {
- // console.log('error!!!!!!!!!!!');
- // }
};
return (
diff --git a/src/Page/RollingPhoto.js b/src/page/RollingPaper/RollingPhoto.js
similarity index 74%
rename from src/Page/RollingPhoto.js
rename to src/page/RollingPaper/RollingPhoto.js
index a4f469e..ff7e020 100644
--- a/src/Page/RollingPhoto.js
+++ b/src/page/RollingPaper/RollingPhoto.js
@@ -2,11 +2,10 @@
import React, { useState } from 'react';
import ResizableRect from 'react-resizable-rotatable-draggable';
-import DeleteBtn from '../Component/DeleteBtn';
+import DeleteBtn from '../../component/DeleteBtn';
export default function NewPhoto({ list, isAdmin, HandlePhotoDelete }) {
const { image_url, xcoor, ycoor, rotate, width, height, image_id } = list;
- // console.log(list);
// eslint-disable-next-line no-unused-vars
const [position, setPosition] = useState({
width2: width,
@@ -15,41 +14,7 @@ export default function NewPhoto({ list, isAdmin, HandlePhotoDelete }) {
left2: ycoor,
rotate2: rotate,
});
- // console.log(position);
- // console.log(setPosition);
- // const handleDrag = (deltaX, deltaY) => {
- // setPosition(prevState => ({
- // ...prevState,
- // top2: position.top2 + deltaY,
- // left2: position.left2 + deltaX,
- // }));
- // // console.log(position);
- // };
-
- // const handleResize = style => {
- // // eslint-disable-next-line no-shadow
- // let { top, left, width, height } = style;
- // top = Math.round(top);
- // left = Math.round(left);
- // width = Math.round(width);
- // height = Math.round(height);
- // setPosition(prevState => ({
- // ...prevState,
- // width2: width,
- // top2: top,
- // height2: height,
- // left2: left,
- // }));
- // // console.log(position);
- // };
- // const handleRotate = rotateAngle2 => {
- // setPosition(prevState => ({
- // ...prevState,
- // rotate2: rotateAngle2,
- // }));
- // // console.log(position);
- // };
return (
{isAdmin ? (
@@ -64,7 +29,6 @@ export default function NewPhoto({ list, isAdmin, HandlePhotoDelete }) {
rotate: `${rotate}deg`,
position: 'absolute',
zIndex: 1,
- // border: '1px solid black',
}}
alt=""
/>
@@ -75,9 +39,7 @@ export default function NewPhoto({ list, isAdmin, HandlePhotoDelete }) {
left: xcoor,
top: ycoor,
position: 'absolute',
- // border: '1px solid black',
rotate: `${rotate}deg`,
- // zIndex: 0,
}}
>
{
try {
setFiles(await axios.get(`${backBaseUrl}/api/v1/papers/sticker_list`));
- console.log(files);
- console.log('filesget');
} catch (e) {
console.log(e);
}
diff --git a/src/Page/Onlog.js b/src/page/Welcome/Onlog.js
similarity index 98%
rename from src/Page/Onlog.js
rename to src/page/Welcome/Onlog.js
index 21ada08..fa5fa86 100644
--- a/src/Page/Onlog.js
+++ b/src/page/Welcome/Onlog.js
@@ -1,7 +1,7 @@
import React, { useCallback, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import styled from 'styled-components';
-import Modal from './Login';
+import Modal from '../Login';
const TopPosition = styled.div`
/* background-color: #fcedb0; */
diff --git a/src/Page/Outlog.js b/src/page/Welcome/Outlog.js
similarity index 100%
rename from src/Page/Outlog.js
rename to src/page/Welcome/Outlog.js
diff --git a/src/Page/Welcome.js b/src/page/Welcome/Welcome.js
similarity index 89%
rename from src/Page/Welcome.js
rename to src/page/Welcome/Welcome.js
index ec90467..c39f856 100644
--- a/src/Page/Welcome.js
+++ b/src/page/Welcome/Welcome.js
@@ -2,18 +2,18 @@
import React, { useState, useEffect, useCallback } from 'react';
import styled from 'styled-components';
import { useNavigate } from 'react-router-dom';
-import Modal from './Login';
+import Modal from '../Login';
// import HandMotion from './handMotion';
-import './welcome.css';
-import './button.css';
+import '../../style/welcome.css';
+import '../../style/button.css';
import OnLog from './Onlog';
import Outlog from './Outlog';
-import background from '../Image/welcome1.png';
-import logo from '../Image/newlogo.png';
-import back from '../Image/welcome3.png';
-import down from '../Image/down.png';
+import background from '../../assets/image/welcome1.png';
+import logo from '../../assets/image/newlogo.png';
+import back from '../../assets/image/welcomedown.png';
+import down from '../../assets/image/down.png';
const UpBtn = styled.button`
display: inline;
@@ -49,8 +49,8 @@ const RollITLogo = styled.div`
`;
const BackImg = styled.div`
height: 100vh;
- background-color: #ffcdcd;
- background-size: 68rem 43rem;
+ background-color: #ffd7e9;
+ background-size: 53rem 38rem;
background-repeat: no-repeat;
background-position: center;
background-image: url(${back});
diff --git a/src/Page/Active.css b/src/style/Active.css
similarity index 100%
rename from src/Page/Active.css
rename to src/style/Active.css
diff --git a/src/Page/Background.css b/src/style/Background.css
similarity index 65%
rename from src/Page/Background.css
rename to src/style/Background.css
index d8048c3..7d73c66 100644
--- a/src/Page/Background.css
+++ b/src/style/Background.css
@@ -1,5 +1,5 @@
body .register {
- background: url(../Image/welcome1.png);
+ background: url(../assets/image/welcome1.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
@@ -11,7 +11,7 @@ body .register {
}
body .mypage {
- background: url(../Image/welcome1.png);
+ background: url(../assets/image/welcome1.png);
/* width: 100vw; */
background-repeat: no-repeat;
background-size: cover;
@@ -22,26 +22,12 @@ body .mypage {
height: 100vh;
} */
-body .login {
- background: url(../Image/sketchbookLogin.png);
- background-repeat: no-repeat;
- background-color: #fcedb0;
- background-size: cover;
- background-size: 90rem 50rem;
- background-position: center;
-}
-@media screen and (max-width: 63rem) {
- body .login {
- background-size: 50rem 40rem;
- }
-}
-
body .filepond--root,
.filepond--root {
height: 30rem;
background-color: white;
margin: auto;
- border-color: #FFD7E3;
+ border-color: #ffd7e3;
border-width: 10px;
border-style: dashed;
border-radius: 25px;
@@ -49,7 +35,7 @@ body .filepond--root,
body .filepond--drop-label {
height: 29rem;
background-color: white;
- background-image: url(../Image/upload.png);
+ background-image: url(../assets/image/upload.png);
background-position: center;
background-repeat: no-repeat;
diff --git a/src/Page/Loading.css b/src/style/Loading.css
similarity index 100%
rename from src/Page/Loading.css
rename to src/style/Loading.css
diff --git a/src/Page/Mypage.css b/src/style/Mypage.css
similarity index 100%
rename from src/Page/Mypage.css
rename to src/style/Mypage.css
diff --git a/src/Page/button.css b/src/style/button.css
similarity index 100%
rename from src/Page/button.css
rename to src/style/button.css
diff --git a/src/Page/snow.css b/src/style/snow.css
similarity index 100%
rename from src/Page/snow.css
rename to src/style/snow.css
diff --git a/src/Page/welcome.css b/src/style/welcome.css
similarity index 86%
rename from src/Page/welcome.css
rename to src/style/welcome.css
index 89c7c51..77489dd 100644
--- a/src/Page/welcome.css
+++ b/src/style/welcome.css
@@ -13,19 +13,17 @@
}
.topBtn {
- background-image: url(../Image/down.png);
+ background-image: url(../assets/image/down.png);
background-size: cover;
margin-left: 12.5rem;
- position: absolute;
+ position: absolute;
bottom: 2rem;
- width: 5rem;
+ width: 5rem;
height: 5rem;
border-radius: 100%;
cursor: pointer;
}
-
-
@keyframes handmove {
0% {
transform: rotate(0deg) translateY(0px);