feat: 회원가입 하나로 합치기&약간의 수정 & 회원가입 버튼 연동

package.json

@@ -3,21 +3,34 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.10.6",
+    "@emotion/styled": "^11.10.6",
+    "@mui/icons-material": "^5.13.7",
+    "@mui/material": "^5.11.16",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.3.4",
+    "ci": "^2.2.0",
+    "crypto-js": "^4.1.1",
+    "date-fns": "^2.30.0",
     "http-proxy-middleware": "^2.0.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-i18next": "^12.2.0",
+    "react-icons": "^4.10.1",
+    "react-responsive": "^9.0.2",
+    "react-router-dom": "^6.11.1",
     "react-scripts": "5.0.1",
+    "styled-components": "^6.0.0-rc.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "deploy": "aws s3 sync ./build s3://suitcarrier-front --profile=INSIGHT_FRONT_S3+CF"
   },
   "eslintConfig": {
     "extends": [

src/App.js

@@ -1,21 +1,53 @@
-import './App.css';
-import React, {useEffect, useState} from 'react';
-import axios from 'axios';
+import "./App.css";
+import React, { useEffect, useState } from "react";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import axios from "axios";
+import SelfAuth from "./Page/SignUp/SelfAuth";
+import InputInfo from "./Page/SignUp/InputInfo";
+import MemberAgree from "./Page/SignUp/MemberAgree";
+import MemberSuccess from "./Page/SignUp/MemberSuccess";
+
+import LoginPage from "./Page/LoginPage";
+import KakaoLogin from "./Page/KaKaoLogin";
+import Auth from "./Page/Auth";
+import Profile from "./Page/Profile";
+import FindPw from "./Page/FindPw";
+import MainPage from "./Page/MainPage";
+import Sign from "./Page/Sign";
+import PhoneAuth from "./Page/SignUp/PhoneAuth";
 
 function App() {
-  const [hello, setHello] = useState('')
+  const [hello, setHello] = useState("");
+
+  //    useEffect(() => {
+  //        axios.get('http://localhost:8080/api/hello')
+  //        .then(response => setHello(response.data))
+  //        .catch(error => console.log(error))
+  //    }, []);
 
-   useEffect(() => {
-       axios.get('http://localhost:8080/api/hello')
-       .then(response => setHello(response.data))
-       .catch(error => console.log(error))
-   }, []);
+  return (
+    <div className="App">
+      <BrowserRouter>
+        <Routes>
+          <Route path="/" element={<MainPage />}></Route>
+          <Route path="/oauth/kakao/callback" element={<Auth />}></Route>
+          <Route path="/profile" element={<Profile />}></Route>
+          <Route path="/findPw" element={<FindPw />}></Route>
+          <Route path="/login" element={<LoginPage />}></Route>
 
-   return (
-       <div>
-           백엔드에서 가져온 데이터입니다: {hello}
-       </div>
-   );
+          {/* <Route path="/oauth/kakao/callback" element={<Auth />}></Route>
+        <Route path="/profile" element={<Profile />}></Route>
+        <Route path="/findPw" element={<FindPw />}></Route> */}
+          <Route path="/selfAuth" element={<SelfAuth />}></Route>
+          <Route path="/inputInfo" element={<InputInfo />}></Route>
+          <Route path="/memberAgree" element={<MemberAgree />}></Route>
+          <Route path="/memberSuccess" element={<MemberSuccess />}></Route>
+          <Route path="/sign" element={<Sign />}></Route>
+          <Route path="/phone" element={<PhoneAuth />}></Route>
+        </Routes>
+      </BrowserRouter>
+    </div>
+  );
 }
 
 export default App;

src/Components/bottom.js

@@ -0,0 +1,162 @@
+import styled from "styled-components";
+const Bottom1 = styled.div`
+  background-color: #007b59;
+  height: 700px;
+`;
+const SubTitle = styled.h2`
+  font-size: ${(props) => props.fontSize};
+  font-weight: ${(props) => props.fontWeight};
+  text-align: left;
+  color: white;
+`;
+const Div3 = styled.div`
+  padding: 144px;
+  padding-left: 50px;
+  display: flex;
+  justify-content: space-between;
+`;
+const Dis = styled.div`
+  padding-right: 80px;
+  font-weight: bold;
+  font-size: 60px;
+  color: white;
+  width: 582px;
+  align-items: end;
+  display: flex;
+  flex-direction: row;
+`;
+const IMG = styled.img`
+  width: 362px;
+  height: 362px;
+`;
+const LookBtn = styled.button`
+  font-size: 24px;
+  width: 198px;
+  height: 68px;
+  border: 1px solid white;
+  border-radius: 50px;
+  background-color: #007b59;
+  color: white;
+`;
+const Bottom2 = styled.div`
+  display: flex;
+  background-color: #eae9e4;
+  height: 380px;
+  width: 1920px;
+  padding-left: 42px;
+`;
+const Div4 = styled.div`
+  display: flex;
+  flex-direction: column;
+  text-align: left;
+  font-size: 24px;
+  font-weight: bold;
+  width: 80%;
+  white-space: nowrap;
+  overflow: visible;
+  text-overflow: ellipsis;
+`;
+const Div5 = styled.div`
+  margin-left: 10px;
+  margin-right: 86px;
+`;
+const Div6 = styled.div`
+  font-size: 28px;
+  align-items: end;
+  justify-content: end;
+  margin-right: 68px;
+  margin-bottom: 75px;
+  width: 40%;
+  display: flex;
+  text-align: right;
+  white-space: nowrap;
+  overflow: visible;
+  text-overflow: ellipsis;
+  & > img {
+    width: 204px;
+    height: 204px;
+  }
+`;
+const Bottom = () => {
+  return (
+    <div>
+      <Bottom1>
+        <div>
+          <Div3>
+            <div>
+              <SubTitle
+                fontSize="35px"
+                fontWeight="bold"
+                style={{ marginBottom: "22px" }}
+              >
+                SUIT CARRIER에 대해 더 알고 싶다면?
+              </SubTitle>
+              <SubTitle fontSize="28px" fontWeight="normal">
+                우리 집 창고 속 캐리어를, 우리 동네 캐리어로 !
+              </SubTitle>
+              <SubTitle fontSize="28px" fontWeight="normal">
+                공간 차지가 큰 캐리어를 SUIT CARRIER를 활용해보세요.
+              </SubTitle>
+              <SubTitle fontSize="28px" fontWeight="normal">
+                요즘 인기있는 캐리어 디자인, 사이즈를 확인해보세요
+              </SubTitle>
+              <div
+                style={{
+                  display: "flex",
+                  marginTop: "46px",
+                  width: "450px",
+                  justifyContent: "space-between",
+                }}
+              >
+                <LookBtn>케리어 둘러보기</LookBtn>
+                <LookBtn>CONTACT_US </LookBtn>
+              </div>
+            </div>
+            <div>
+              <Dis>
+                <IMG src="/Image/c_logo.png" alt="logo" />
+                SUIT-
+                <br />
+                CARRIER
+              </Dis>
+            </div>
+          </Div3>
+        </div>
+      </Bottom1>
+      <Bottom2>
+        <Div4>
+          <h2>Contact Us</h2>
+          gogoogle13@gmail.com
+          <div
+            style={{ display: "flex", marginTop: "20px", marginBottom: "35px" }}
+          >
+            Tel |
+            <Div5 style={{ lineHeight: "170%" }}>
+              010-1234-5678
+              <br />
+              02-1234-5678
+            </Div5>
+            <div style={{ display: "flex", flexDirection: "column" }}>
+              <div style={{ display: "flex", marginBottom: "14px" }}>
+                Fax |<Div5>010-1234-5678</Div5>
+              </div>
+              <div style={{ display: "flex" }}>
+                Lns |<Div5>@suit_carrier0703</Div5>
+              </div>
+            </div>
+            서울시 관악구 봉천동 100-3 (캐리어 빌딩)
+          </div>
+          E-mail | suitcarrier_@naver.com
+        </Div4>
+        <Div6>
+          <div style={{ marginRight: "27px" }}>
+            <h2>SUIT-CARRIER</h2>
+            우리 집 창고 속 캐리어를, 우리 동네 캐리어로 !
+          </div>
+          <img src="Image/logo.png" alt="로고" />
+        </Div6>
+      </Bottom2>
+    </div>
+  );
+};
+export default Bottom;

src/Components/cards.js

@@ -0,0 +1,63 @@
+import {
+    Card,
+    CardActions,
+    CardMedia,
+    IconButton,
+    Typography,
+  } from "@mui/material";
+  import Favorite from "@mui/icons-material/Favorite";
+
+  const Cards = () => {
+    return (
+      <Card width="307px">
+        <CardMedia
+          component="img"
+          height="215"
+          width="307px"
+          image="/Image/example.png"
+          alt="사진"
+        />
+        <div style={{ display: "flex", flexDirection: "column" }}>
+          <Typography
+            width="100%"
+            variant="body2"
+            color="text.secondary"
+            display="flex"
+            justifyContent="space-between"
+            alignItems="center"
+          >
+            <h2>성남시 분당구</h2>
+            <div style={{ display: "flex" }}>
+              <h3
+                style={{
+                  color: "#007B59",
+                  marginRight: "7px",
+                  fontSize: "16px",
+                }}
+              >
+                추천
+              </h3>
+              <h3 style={{ color: "#FF2E2E", fontSize: "16px" }}>HOT</h3>
+              <CardActions>
+                <IconButton style={{ padding: "0px" }}>
+                  <Favorite />
+                </IconButton>
+              </CardActions>
+            </div>
+          </Typography>
+          <div
+            style={{
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+            }}
+          >
+            <h3 style={{ fontSize: "20px" }}>3월 27일 ~ 4월 1일</h3>
+            <h5 style={{ fontSize: "16px" }}>35,000 원 / 박</h5>
+          </div>
+        </div>
+      </Card>
+    );
+  };
+  export default Cards;
+