Feat/issue-16 (#25)

* Feat: Ocean Page 생성 및 카메라 클릭가능

* Feat: Ocean 페이지 디자인 구현

* Feat: Ocean 이미지 등록가능

BlueMosaic/src/pages/Mypage.tsx

@@ -6,7 +6,7 @@ import { Dashboard } from "../components/dashboard/dashboard"
 export const Mypage = () => {
 
   return(
-    <Wrapper backgroundImage={HomeSVG}>
+    <Wrapper backgroundImage={HomeSVG} style={{ backgroundSize: 'cover' }}>
       <Container>
         <Dashboard/>
       </Container>

BlueMosaic/src/pages/Ocean.tsx

@@ -1,6 +1,72 @@
+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";
+import { SmartphoneSVG } from "../components/SmartphoneSVG";
+import { useState } from "react"
+import imageUrl from "../assets/UploadBackground.jpg"
+
 export const Ocean = () => {
+  const [showSmartphone, setShowSmartphone] = useState(false);
+
+  const handleCircleClickParent = () => {
+    console.log('Circle clicked in parent!');
+    setShowSmartphone(true);
+  };
+
+  const handleClickParent = () => {
+    console.log('Circle clicked in parent!');
+
+  };
+
+  return(
+    <WaterWave imageUrl={ UploadBackGround } style={{ backgroundSize: 'cover' }}>
+      {({ pause, play }) => (
+              <Wrapper>
+                <Container>
+
+                { 
+                  showSmartphone ? (
+                    <SmartphoneWrapper>
+                      <SmartphoneSVG handleClickParent={handleClickParent} imageUrl={imageUrl} />
+                    </SmartphoneWrapper>
+                  ) : (
+                    <CamWrapper>
+                      <CamSVG handleCircleClickParent={handleCircleClickParent}/>
+                    </CamWrapper>
+                  )
+                }
+
+                </Container>
+              </Wrapper>
+            )}
+    </WaterWave>
+  )
+}
+
+const CamWrapper = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center; 
+
+  SmartphoneSVG {
+    width: 50%;
+    height: 50%;
+  }
+`
+
+const SmartphoneWrapper = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center; 
 
-  return(<>
-    Ocean
-  </>)
-}
+  CamSVG {
+    width: 40%;
+    height: 40%;
+  }
+`

BlueMosaic/src/pages/Signin.tsx

@@ -13,7 +13,7 @@ export const Signin = () => {
   };
 
   return(
-    <WaterWave imageUrl={LoginBackround}>
+    <WaterWave imageUrl={LoginBackround} style={{ backgroundSize: 'cover' }}>
       {({ pause, play }) => (
               <Wrapper>
                 <Container>

BlueMosaic/src/pages/Signup.tsx

@@ -47,7 +47,7 @@ export const Signup = () => {
   };
 
   return(
-    <WaterWave imageUrl={Signupbackground}>
+    <WaterWave imageUrl={Signupbackground} style={{ backgroundSize: 'cover' }}>
       {({ pause, play }) => (
               <Wrapper>
               <Container>