From 9f135f61a81d4c1151b054f6cadb226c6f3621a4 Mon Sep 17 00:00:00 2001 From: DingX2 Date: Tue, 20 Feb 2024 03:22:22 +0900 Subject: [PATCH 1/3] =?UTF-8?q?Feat:=20Ocean=20Page=20=EC=83=9D=EC=84=B1?= =?UTF-8?q?=20=EB=B0=8F=20=EC=B9=B4=EB=A9=94=EB=9D=BC=20=ED=81=B4=EB=A6=AD?= =?UTF-8?q?=EA=B0=80=EB=8A=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- BlueMosaic/src/components/CamSVG.tsx | 244 +++++++++++++++++++++++++++ BlueMosaic/src/pages/Mypage.tsx | 2 +- BlueMosaic/src/pages/Ocean.tsx | 41 ++++- BlueMosaic/src/pages/Signin.tsx | 2 +- BlueMosaic/src/pages/Signup.tsx | 2 +- 5 files changed, 284 insertions(+), 7 deletions(-) create mode 100644 BlueMosaic/src/components/CamSVG.tsx diff --git a/BlueMosaic/src/components/CamSVG.tsx b/BlueMosaic/src/components/CamSVG.tsx new file mode 100644 index 0000000..d2f98f6 --- /dev/null +++ b/BlueMosaic/src/components/CamSVG.tsx @@ -0,0 +1,244 @@ +import React from 'react'; + +export const CamSVG = () => { + const handleCircleClick = () => { + console.log('Circle clicked!'); + }; + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/BlueMosaic/src/pages/Mypage.tsx b/BlueMosaic/src/pages/Mypage.tsx index f9cb72e..e287587 100644 --- a/BlueMosaic/src/pages/Mypage.tsx +++ b/BlueMosaic/src/pages/Mypage.tsx @@ -6,7 +6,7 @@ import { Dashboard } from "../components/dashboard/dashboard" export const Mypage = () => { return( - + diff --git a/BlueMosaic/src/pages/Ocean.tsx b/BlueMosaic/src/pages/Ocean.tsx index 3dc0ef5..694e523 100644 --- a/BlueMosaic/src/pages/Ocean.tsx +++ b/BlueMosaic/src/pages/Ocean.tsx @@ -1,6 +1,39 @@ +import styled from "@emotion/styled" +import { Wrapper, Container, DivCenterContainter } from "../styles/Layout" +import UploadBackGround from "../assets/UploadBackground.jpg" +import WaterWave from 'react-water-wave'; +import { CamSVG } from "../components/CamSVG"; + export const Ocean = () => { - return(<> - Ocean - ) -} \ No newline at end of file + const handleClick= (event) => { + event.preventDefault(); + }; + + return( + + {({ pause, play }) => ( + + + + + + + + )} + + ) +} + +const CamWrapper = styled.div` + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + + img { + width: 50%; + height: 50%; + } +` \ No newline at end of file diff --git a/BlueMosaic/src/pages/Signin.tsx b/BlueMosaic/src/pages/Signin.tsx index 920b1b6..b44a602 100644 --- a/BlueMosaic/src/pages/Signin.tsx +++ b/BlueMosaic/src/pages/Signin.tsx @@ -13,7 +13,7 @@ export const Signin = () => { }; return( - + {({ pause, play }) => ( diff --git a/BlueMosaic/src/pages/Signup.tsx b/BlueMosaic/src/pages/Signup.tsx index 19edfa9..6a88212 100644 --- a/BlueMosaic/src/pages/Signup.tsx +++ b/BlueMosaic/src/pages/Signup.tsx @@ -47,7 +47,7 @@ export const Signup = () => { }; return( - + {({ pause, play }) => ( From a55544b9c18b453a6c370dbf8ff6b531d319d672 Mon Sep 17 00:00:00 2001 From: DingX2 Date: Tue, 20 Feb 2024 04:06:44 +0900 Subject: [PATCH 2/3] =?UTF-8?q?Feat:=20Ocean=20=ED=8E=98=EC=9D=B4=EC=A7=80?= =?UTF-8?q?=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- BlueMosaic/src/assets/Cam.svg | 234 ++++++++++++++++++++ BlueMosaic/src/components/CamSVG.tsx | 10 +- BlueMosaic/src/components/SmartphoneSVG.tsx | 189 ++++++++++++++++ BlueMosaic/src/pages/Ocean.tsx | 46 +++- 4 files changed, 465 insertions(+), 14 deletions(-) create mode 100644 BlueMosaic/src/assets/Cam.svg create mode 100644 BlueMosaic/src/components/SmartphoneSVG.tsx diff --git a/BlueMosaic/src/assets/Cam.svg b/BlueMosaic/src/assets/Cam.svg new file mode 100644 index 0000000..fc04c9f --- /dev/null +++ b/BlueMosaic/src/assets/Cam.svg @@ -0,0 +1,234 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/BlueMosaic/src/components/CamSVG.tsx b/BlueMosaic/src/components/CamSVG.tsx index d2f98f6..4e247ab 100644 --- a/BlueMosaic/src/components/CamSVG.tsx +++ b/BlueMosaic/src/components/CamSVG.tsx @@ -1,12 +1,8 @@ -import React from 'react'; -export const CamSVG = () => { - const handleCircleClick = () => { - console.log('Circle clicked!'); - }; +export const CamSVG = ({ handleCircleClickParent }) => { return ( - + @@ -65,7 +61,7 @@ export const CamSVG = () => { - + diff --git a/BlueMosaic/src/components/SmartphoneSVG.tsx b/BlueMosaic/src/components/SmartphoneSVG.tsx new file mode 100644 index 0000000..eb6fbb3 --- /dev/null +++ b/BlueMosaic/src/components/SmartphoneSVG.tsx @@ -0,0 +1,189 @@ + +export const SmartphoneSVG = ({ handleClickParent }) => { + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/BlueMosaic/src/pages/Ocean.tsx b/BlueMosaic/src/pages/Ocean.tsx index 694e523..6f4435e 100644 --- a/BlueMosaic/src/pages/Ocean.tsx +++ b/BlueMosaic/src/pages/Ocean.tsx @@ -3,21 +3,40 @@ import { Wrapper, Container, DivCenterContainter } from "../styles/Layout" import UploadBackGround from "../assets/UploadBackground.jpg" import WaterWave from 'react-water-wave'; import { CamSVG } from "../components/CamSVG"; +import { SmartphoneSVG } from "../components/SmartphoneSVG"; +import { useState } from "react" export const Ocean = () => { + const [showSmartphone, setShowSmartphone] = useState(false); - const handleClick= (event) => { - event.preventDefault(); + const handleCircleClickParent = () => { + console.log('Circle clicked in parent!'); + setShowSmartphone(true); + }; + + const handleClickParent = () => { + console.log('Circle clicked in parent!'); + }; return( - + {({ pause, play }) => ( - - - + + { + showSmartphone ? ( + + + + ) : ( + + + + ) + } + )} @@ -32,8 +51,21 @@ const CamWrapper = styled.div` justify-content: center; align-items: center; - img { + SmartphoneSVG { width: 50%; height: 50%; } +` + +const SmartphoneWrapper = styled.div` + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + + CamSVG { + width: 40%; + height: 40%; + } ` \ No newline at end of file From 8e70e14be50841f252960d39a652dd934c6b6b0e Mon Sep 17 00:00:00 2001 From: DingX2 Date: Tue, 20 Feb 2024 04:09:56 +0900 Subject: [PATCH 3/3] =?UTF-8?q?Feat:=20Ocean=20=EC=9D=B4=EB=AF=B8=EC=A7=80?= =?UTF-8?q?=20=EB=93=B1=EB=A1=9D=EA=B0=80=EB=8A=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- BlueMosaic/src/components/SmartphoneSVG.tsx | 5 +++-- BlueMosaic/src/pages/Ocean.tsx | 3 ++- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/BlueMosaic/src/components/SmartphoneSVG.tsx b/BlueMosaic/src/components/SmartphoneSVG.tsx index eb6fbb3..82f1a9c 100644 --- a/BlueMosaic/src/components/SmartphoneSVG.tsx +++ b/BlueMosaic/src/components/SmartphoneSVG.tsx @@ -1,5 +1,5 @@ -export const SmartphoneSVG = ({ handleClickParent }) => { +export const SmartphoneSVG = ({ handleClickParent, imageUrl }) => { return ( @@ -45,7 +45,8 @@ export const SmartphoneSVG = ({ handleClickParent }) => { - +{/* */} + diff --git a/BlueMosaic/src/pages/Ocean.tsx b/BlueMosaic/src/pages/Ocean.tsx index 6f4435e..d6f5e2e 100644 --- a/BlueMosaic/src/pages/Ocean.tsx +++ b/BlueMosaic/src/pages/Ocean.tsx @@ -5,6 +5,7 @@ import WaterWave from 'react-water-wave'; import { CamSVG } from "../components/CamSVG"; import { SmartphoneSVG } from "../components/SmartphoneSVG"; import { useState } from "react" +import imageUrl from "../assets/UploadBackground.jpg" export const Ocean = () => { const [showSmartphone, setShowSmartphone] = useState(false); @@ -28,7 +29,7 @@ export const Ocean = () => { { showSmartphone ? ( - + ) : (