Merge pull request #44 from kookmin-sw/feat/FrontEnd_CamaraPage

Feat/front end camara page

frontend/package.json

@@ -18,6 +18,7 @@
     "react-webcam": "^7.2.0",
     "slick-carousel": "^1.8.1",
     "styled-components": "^6.1.8",
+    "styled-reset": "^4.5.2",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

frontend/src/App.js

@@ -1,9 +1,10 @@
-// import Navbar from "./components/header/navbar";
 import MainPage from "./pages/mainPage";
+import GlobalStyle from "./styles/GlobalStyle";
 
 function App() {
   return (
     <div className="App">
+      <GlobalStyle />
       <MainPage />
     </div>
   );

frontend/src/components/flowingLogo.jsx

@@ -0,0 +1,57 @@
+import React from "react";
+import styled, { keyframes } from "styled-components";
+import Logo from "../assets/LogoV2.png";
+
+const slideAnimation = keyframes`
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(-50%);
+  }
+`;
+
+const LogosContainer = styled.div`
+  margin-top: 5rem;
+  width: 100%;
+  height: 130px;
+  background-color: black;
+  display: flex;
+  align-items: center;
+  position: relative;
+  overflow: hidden;
+`;
+
+const ImageBox = styled.div`
+  display: flex;
+  background-color: #33b0ff;
+  width: calc(277px * 20); /* Adjust according to the number of images times 2 */
+  animation: ${slideAnimation} 20s linear infinite; /* Double the animation duration */
+`;
+
+const ImageWrapper = styled.div`
+  flex-shrink: 0;
+  width: 277px;
+  height: 86px;
+`;
+
+const Image = styled.img`
+  width: 100%;
+  height: 100%;
+`;
+
+const FlowingLogo = () => {
+  return (
+    <LogosContainer>
+      <ImageBox>
+        {Array.from({ length: 20 }).map((_, index) => (
+          <ImageWrapper key={index}>
+            <Image src={Logo} alt={`logo ${(index % 10) + 1}`} />
+          </ImageWrapper>
+        ))}
+      </ImageBox>
+    </LogosContainer>
+  );
+};
+
+export default FlowingLogo;

frontend/src/components/header/menubutton.jsx

@@ -22,10 +22,15 @@ const Sidebar = styled.div`
   height: 100%;
   background: #222;
   position: fixed;
+  color: white;
+  font-size: 1.2rem;
   top: 0;
   right: ${(props) => (props.isChecked ? "0" : "-300px")};
   z-index: 100;
   transition: all 0.35s;
+  justify-content: center;
+  align-items: center;
+  display: flex;
 `;
 
 const Span = styled.span`
@@ -62,7 +67,7 @@ const StyledCheckbox = () => {
 
   return (
     <>
-      <Sidebar isChecked={isChecked} />
+      <Sidebar isChecked={isChecked}>ㅁㄴㅇㄹ</Sidebar>
       <Input checked={isChecked} onChange={handleCheckboxChange} />
       <LabelContainer>
         <Label>

frontend/src/components/informationModal.jsx

@@ -31,7 +31,7 @@ const InformationModal = ({ onClose }) => {
         <CloseButton onClick={onClose} alt="close">
           <AniXbutton onClick />
         </CloseButton>
-        <ModalH2>성별</ModalH2>
+        <CreateImageLabel>성별</CreateImageLabel>
         <GenderRadioGroup>
           <GenderRadioInput
             type="radio"
@@ -60,7 +60,7 @@ const InformationModal = ({ onClose }) => {
         <ModalH3>생성형 이미지를 받아보기 위해서는</ModalH3>
 
         <ModalH3>8분 정도의 시간이 소요됩니다.</ModalH3>
-        <ModalH2>이메일 주소</ModalH2>
+        <CreateImageLabel>이메일 주소</CreateImageLabel>
         <EmailLabel>
           <EmailInput value={email} onChange={handleEmailChange} />
         </EmailLabel>
@@ -114,24 +114,31 @@ const CloseButton = styled.button`
 `;
 const CreateImageLabel = styled.label`
   font-size: 24px;
-  font-weight: bold;
+  margin-top: 2rem;
   display: flex;
+  align-items: center;
   width: 100%;
   margin-bottom: 0.5rem;
 `;
 const GenderRadioGroup = styled.div`
   display: flex;
   align-items: center;
+  flex-direction: row;
+  height: 35px;
+  /* background-color: blue; */
+  /* justify-content: center; */
 `;
 
 const GenderRadioInput = styled.input`
   display: none;
   width: 1.5rem;
+  margin-left: 2rem;
+  margin-bottom: 4px;
   height: 1.5rem;
   &:checked + label::before {
     content: "";
     font-size: 1.2rem;
-    margin: 3px 3px 3px 4px;
+    /* margin: 3px 3px 3px 3px; */
     background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/%3e%3c/svg%3e");
     background-color: #9747ff;
     background-size: 100% 100%;
@@ -144,7 +151,8 @@ const GenderRadioInput = styled.input`
 const GenderRadioLabel = styled.label`
   cursor: pointer;
   position: relative;
-  padding-left: 35px;
+  padding-left: 30px;
+  padding-right: 20px;
   font-size: 1.2rem;
 
   &::before {
@@ -178,8 +186,9 @@ const CreateImageButton = styled.input.attrs({ type: "checkbox" })`
   height: 1.5rem;
   border: 1.5px solid gainsboro;
   border-radius: 0.35rem;
-  margin-left: 10px;
-  margin-top: 10px;
+  margin-left: 20px;
+  /* margin-bottom: ; */
+  /* margin-top: 10px; */
   &:checked {
     border-color: transparent;
     background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/%3e%3c/svg%3e");

frontend/src/components/waveAnimation.jsx

@@ -0,0 +1,73 @@
+import React from "react";
+import styled, { keyframes } from "styled-components";
+
+const waveAnimation = keyframes`
+  0% {
+    margin-left: 0;
+  }
+  100% {
+    margin-left: -1600px;
+  }
+`;
+
+const swellAnimation = keyframes`
+  0%, 100% {
+    transform: translate3d(0,-25px,0);
+  }
+  50% {
+    transform: translate3d(0,5px,0);
+  }
+`;
+
+// Styled-components
+const MainContainer = styled.div`
+  width: 100%;
+  height: 50vh;
+`;
+const Container = styled.div`
+  position: relative;
+  height: 100%;
+  /* width: 100%; */
+  background: radial-gradient(ellipse at center, rgba(255, 254, 234, 1) 0%, rgba(255, 254, 234, 1) 35%, #b7e8eb 100%);
+  overflow: hidden;
+`;
+
+const Ocean = styled.div`
+  height: 5%;
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  background: #33b0ff;
+`;
+
+const Wave = styled.div`
+  background: url("/wave2.svg") repeat-x;
+  position: absolute;
+  top: -198px;
+  width: 6400px;
+  height: 198px;
+  animation: ${waveAnimation} 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
+  transform: translate3d(0, 0, 0);
+
+  &:nth-of-type(2) {
+    top: -175px;
+    animation: ${waveAnimation} 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) -0.125s infinite,
+      ${swellAnimation} 7s ease -1.25s infinite;
+    opacity: 1;
+  }
+`;
+
+// React component
+const WaveAnimation = () => (
+  <MainContainer>
+    <Container>
+      <Ocean>
+        <Wave />
+        <Wave />
+      </Ocean>
+    </Container>
+  </MainContainer>
+);
+
+export default WaveAnimation;

frontend/src/index.js

@@ -3,10 +3,12 @@ import ReactDOM from "react-dom/client";
 import "./index.css";
 import reportWebVitals from "./reportWebVitals";
 import Routing from "./Routing";
+import GlobalStyle from "./styles/GlobalStyle";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
   <React.StrictMode>
+    <GlobalStyle />
     <Routing />
   </React.StrictMode>
 );

frontend/src/pages/Feature/camera.jsx

@@ -17,9 +17,9 @@ function Camera() {
   const navigate = useNavigate();
   const location = useLocation();
   const { email, gender, createImageChecked } = location.state;
-  console.log(email);
-  console.log(gender);
-  console.log(createImageChecked);
+  // console.log(email);
+  // console.log(gender);
+  // console.log(createImageChecked);
   const videoConstraints = {
     width: 1000,
     height: 720,
@@ -59,15 +59,12 @@ function Camera() {
       gan_permission: createImageChecked,
     };
 
-    formdata.append(
-      "data",
-      new Blob([JSON.stringify(data)], { type: "application/json" })
-    );
+    formdata.append("data", new Blob([JSON.stringify(data)], { type: "application/json" }));
     formdata.append("file", base64ToFile(imageSrc, "test.jpg"));
 
     // .post("https://onyou.loca.lt/start", formdata)
     await axios
-      .post("http://localhost:8080/start", formdata)
+      .post("https://onyou.loca.lt/start", formdata)
       .then((response) => {
         setIsLoading(false);
         console.log(response.data);
@@ -86,15 +83,10 @@ function Camera() {
         height={720}
         screenshotFormat="image/jpeg"
         width={1280}
-        videoConstraints={videoConstraints}
-      >
+        videoConstraints={videoConstraints}>
         {({ getScreenshot }) => (
           <>
-            <ImageButton
-              src={CameraBtn}
-              alt="Capture"
-              onClick={() => CapturePhoto(getScreenshot)}
-            />
+            <ImageButton src={CameraBtn} alt="Capture" onClick={() => CapturePhoto(getScreenshot)} />
             <FaceRectangle />
           </>
         )}