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

Feat/front end camara page

frontend/package.json

@@ -7,10 +7,15 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.6.8",
     "gsap": "^3.12.5",
+    "localtunnel": "^2.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.3",
     "react-scripts": "5.0.1",
+    "react-slick": "^0.30.2",
+    "slick-carousel": "^1.8.1",
     "styled-components": "^6.1.8",
     "web-vitals": "^2.1.4"
   },

frontend/src/App.js

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

frontend/src/Routing.js

@@ -0,0 +1,24 @@
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+import App from "./App";
+import Camera from "./pages/Feature/camera";
+import Navbar from "./components/header/navbar";
+import Result from "./pages/Feature/result";
+import About from "./pages/about/about";
+
+function Routing() {
+  return (
+    <div>
+      <BrowserRouter>
+        <Navbar />
+        <Routes>
+          <Route path="/" element={<App />} />
+          <Route path="/camera" element={<Camera />} />
+          <Route path="/result" element={<Result />} />
+          <Route path="/about" element={<About />} />
+        </Routes>
+      </BrowserRouter>
+    </div>
+  );
+}
+
+export default Routing;

frontend/src/components/clickbutton.jsx

@@ -0,0 +1,84 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+import InformationModal from "./informationModal";
+
+// React 컴포넌트
+const ClickButton = () => {
+  const [modalOpen, setModalOpen] = useState(false);
+  const handleModalOpen = () => {
+    setModalOpen(true);
+  };
+  const handleModalClose = () => {
+    setModalOpen(false);
+  };
+
+  return (
+    <Container>
+      <Button onClick={handleModalOpen}>Click Me!</Button>
+      {modalOpen && <InformationModal onClose={handleModalClose} />}
+    </Container>
+  );
+};
+const Container = styled.div`
+  z-index: 80;
+  left: 45%;
+  top: 80%;
+  position: absolute;
+`;
+// Styled Components 정의
+const Button = styled.button`
+  position: relative;
+  display: inline-block;
+  cursor: pointer;
+  outline: none;
+  border: 0;
+  vertical-align: middle;
+  text-decoration: none;
+  font-size: inherit;
+  font-family: inherit;
+  font-weight: 600;
+  color: #382b22;
+  text-transform: uppercase;
+  padding: 1.25em 2em;
+  background: white;
+  border: 2px solid #000000;
+  border-radius: 0.75em;
+  transform-style: preserve-3d;
+  transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), background 150ms cubic-bezier(0, 0, 0.58, 1);
+
+  &::before {
+    position: absolute;
+    content: "";
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: #000000;
+    border-radius: inherit;
+    box-shadow: 0 0 0 2px #000000, 0 0.625em 0 0 white;
+    transform: translate3d(0, 0.75em, -1em);
+    transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), box-shadow 150ms cubic-bezier(0, 0, 0.58, 1);
+  }
+
+  &:hover {
+    background: #ffd166;
+    transform: translate(0, 0.25em);
+    &::before {
+      box-shadow: 0 0 0 2px #000000, 0 0.5em 0 0 white;
+      transform: translate3d(0, 0.5em, -1em);
+    }
+  }
+
+  &:active {
+    background: #ffd166;
+    transform: translate(0em, 0.75em);
+    &::before {
+      box-shadow: 0 0 0 2px #b18597, 0 0 #ffe3e2;
+      transform: translate3d(0, 0, -1em);
+    }
+  }
+`;
+
+export default ClickButton;

frontend/src/components/flowingCircle.jsx

@@ -0,0 +1,96 @@
+import React from "react";
+import styled, { keyframes } from "styled-components";
+
+import v2 from "../assets/v2.png";
+import v3 from "../assets/v3.png";
+import v4 from "../assets/v4.png";
+import v5 from "../assets/v5.png";
+import v6 from "../assets/v6.png";
+const slideAnimation = keyframes`
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(-50%);
+  }
+`;
+const BlackCircleContainer = styled.div`
+  width: 400px;
+  height: 400px;
+  position: absolute;
+  border-radius: 100%;
+  right: 10%;
+  top: 0;
+  z-index: 3;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+const BlackCircle = styled.div`
+  width: 400px;
+  height: 400px;
+  position: relative;
+  overflow: hidden;
+  border-radius: 100%;
+  background-color: black;
+`;
+const ImageBox = styled.div`
+  width: 582px;
+  height: 100%;
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: center;
+  align-items: center;
+  animation: ${slideAnimation} 5s linear infinite;
+`;
+const ImageWrapper = styled.div`
+  flex-shrink: 0;
+  width: 97px;
+  height: 87px;
+`;
+const Image = styled.img`
+  width: 100%;
+  height: 100%;
+`;
+const Slider = () => {
+  return (
+    <BlackCircleContainer>
+      <BlackCircle>
+        <ImageBox>
+          <ImageWrapper>
+            <Image src={v2} alt="v2" />
+          </ImageWrapper>
+          <ImageWrapper>
+            <Image src={v3} alt="v3" />
+          </ImageWrapper>
+          <ImageWrapper>
+            <Image src={v4} alt="v4" />
+          </ImageWrapper>
+          <ImageWrapper>
+            <Image src={v5} alt="v5" />
+          </ImageWrapper>
+          <ImageWrapper>
+            <Image src={v6} alt="v6" />
+          </ImageWrapper>
+          <ImageWrapper>
+            <Image src={v2} alt="v2" />
+          </ImageWrapper>
+          <ImageWrapper>
+            <Image src={v3} alt="v3" />
+          </ImageWrapper>
+          <ImageWrapper>
+            <Image src={v4} alt="v4" />
+          </ImageWrapper>
+          <ImageWrapper>
+            <Image src={v5} alt="v5" />
+          </ImageWrapper>
+          <ImageWrapper>
+            <Image src={v6} alt="v6" />
+          </ImageWrapper>
+        </ImageBox>
+      </BlackCircle>
+    </BlackCircleContainer>
+  );
+};
+
+export default Slider;

frontend/src/components/header/menubutton.jsx

@@ -1,76 +1,77 @@
-import React, { useState } from 'react';
-import styled from 'styled-components';
+import React, { useState } from "react";
+import styled from "styled-components";
 
-const Input = styled.input.attrs({ type: 'checkbox', id: 'menuicon' })`
+const Input = styled.input.attrs({ type: "checkbox", id: "menuicon" })`
   display: none;
 `;
-const LabelContainer = styled.div`  padding: 10px 20px;
+const LabelContainer = styled.div`
+  padding: 10px 20px;
 `;
 
-const Label = styled.label.attrs({ htmlFor: 'menuicon' })`
+const Label = styled.label.attrs({ htmlFor: "menuicon" })`
   display: block;
-  
+
   width: 40px;
   height: 30px;
   position: relative;
-  z-index: 2;
+  z-index: 200;
 `;
 
 const Sidebar = styled.div`
-  width:300px;
-  height:100%;
-  background:#222;
+  width: 300px;
+  height: 100%;
+  background: #222;
   position: fixed;
   top: 0;
-  right: ${props => props.isChecked ? '0' : '-300px'};
-  z-index: 1;
-  transition: all .35s;
+  right: ${(props) => (props.isChecked ? "0" : "-300px")};
+  z-index: 100;
+  transition: all 0.35s;
 `;
 
 const Span = styled.span`
   display: block;
   width: 40px;
   height: 6px;
   border-radius: 30px;
-  background-color: #9747FF;
+  background-color: #9747ff;
   position: absolute;
   transition: transform 0.3s, opacity 0.3s;
 `;
 
 const TopSpan = styled(Span)`
-  top: ${props => props.isChecked ? '50%' : '0'};
-  transform: translateY(-50%) ${props => props.isChecked ? 'rotate(45deg)' : 'none'};
+  top: ${(props) => (props.isChecked ? "50%" : "0")};
+  transform: translateY(-50%) ${(props) => (props.isChecked ? "rotate(45deg)" : "none")};
 `;
 
 const MiddleSpan = styled(Span)`
-  top:50%;
+  top: 50%;
   transform: translateY(-50%);
 `;
 
 const BottomSpan = styled(Span)`
-  bottom: ${props => props.isChecked ? '50%' : '0'};
-  transform: translateY(50%) ${props => props.isChecked ? 'rotate(-45deg)' : 'none'};
+  bottom: ${(props) => (props.isChecked ? "50%" : "0")};
+  transform: translateY(50%) ${(props) => (props.isChecked ? "rotate(-45deg)" : "none")};
 `;
 
 const StyledCheckbox = () => {
-  const [isChecked,setIsChecked] = useState(false);
+  const [isChecked, setIsChecked] = useState(false);
 
   const handleCheckboxChange = () => {
     setIsChecked(!isChecked);
-  }
+  };
 
   return (
     <>
-      <Sidebar isChecked={isChecked}/>
-      <Input checked={isChecked} onChange={handleCheckboxChange}/>
-      <LabelContainer>        
+      <Sidebar isChecked={isChecked} />
+      <Input checked={isChecked} onChange={handleCheckboxChange} />
+      <LabelContainer>
         <Label>
-        <TopSpan isChecked={isChecked} />
-        <MiddleSpan style={{opacity: isChecked ?0:1}}/>
-        <BottomSpan isChecked={isChecked}/>
-      </Label>  
+          <TopSpan isChecked={isChecked} />
+          <MiddleSpan style={{ opacity: isChecked ? 0 : 1 }} />
+          <BottomSpan isChecked={isChecked} />
+        </Label>
       </LabelContainer>
-          </>
+    </>
   );
 };