Merge pull request #4 from Toy2-Team3/KAN-13--feature/layout/login

로그인 및 회원가입 레이아웃을 구현한다.
KDT1-FE · Nov 9, 2023 · 7a45af2 · 7a45af2
2 parents d438ca0 + 25486b3
commit 7a45af2
Show file tree

Hide file tree

Showing 12 changed files with 948 additions and 64 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -1,5 +1,5 @@
 {
-  "singleQuote": true,
+  "singleQuote": false,
   "semi": true,
   "useTabs": false,
   "tabWidth": 2,

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -6,9 +6,11 @@
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
     "react": "^18.2.0",
+    "react-datepicker": "^4.21.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.18.0",
     "react-scripts": "5.0.1",
+    "recoil": "^0.7.7",
     "styled-components": "^6.1.0",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
@@ -20,6 +22,7 @@
     "eject": "react-scripts eject"
   },
   "devDependencies": {
+    "@types/react-datepicker": "^4.19.2",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
     "eslint": "^8.48.0",

diff --git a/public/index.html b/public/index.html
@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta name="description" content="toy2 team3" />
-    <title>Toy2 Team3</title>
+    <title>SWEETY | make youre life sweet</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,43 +1,61 @@
-import './App.css';
-import { ThemeProvider } from 'styled-components';
-import theme from '../src/styles/theme';
+import "./App.css";
+import { ThemeProvider } from "styled-components";
+import theme from "../src/styles/theme";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
-import NavigationBar from './components/NavigationBar';
-import HomePage from './pages/HomePage';
-import CommunityPage from './pages/CommunityPage';
-import ChatPage from './pages/chatting/index';
-import MyPage from './pages/MyPage';
-import styled from 'styled-components';
+import NavigationBar from "./components/NavigationBar";
+import HomePage from "./pages/HomePage";
+import CommunityPage from "./pages/CommunityPage";
+import ChatPage from "./pages/chatting/index";
+import MyPage from "./pages/MyPage";
+import styled from "styled-components";
+import StartPage from "./components/login/StartPage";
+import SignUpSpecific from "./components/login/SignUpSpecific";
+import Login from "./components/login/Login";
+import SignUpIDPW from "./components/login/SignUpIDPW";
+import { useRecoilState } from "recoil";
+import { loginState } from "./recoil/atoms";
 
 function App() {
-  return (
+  const [login] = useRecoilState(loginState);
+  return login ? (
     <ThemeProvider theme={theme}>
       <BrowserRouter>
-        <div className="App" style={{display: 'flex'}}>
+        <div className="App" style={{ display: "flex" }}>
           <NavigationBar></NavigationBar>
           <PageWrap>
             <Routes>
-              <Route path="/" element={<HomePage/>} /> 
-              <Route path="/community" element={<CommunityPage/>} /> 
-              <Route path="/chat" element={<ChatPage/>} /> 
-              <Route path="/mypage" element={<MyPage/>} /> 
+              <Route path="/" element={<HomePage />} />
+              <Route path="/community" element={<CommunityPage />} />
+              <Route path="/chat" element={<ChatPage />} />
+              <Route path="/mypage" element={<MyPage />} />
             </Routes>
           </PageWrap>
         </div>
-      </BrowserRouter>  
+      </BrowserRouter>
+    </ThemeProvider>
+  ) : (
+    <ThemeProvider theme={theme}>
+      <BrowserRouter>
+        <Routes>
+          <Route path="/startPage" element={<StartPage />} />
+          <Route path="/signup1" element={<SignUpIDPW />} />
+          <Route path="/signup2" element={<SignUpSpecific theme={theme} />} />
+          <Route path="/login" element={<Login />} />
+        </Routes>
+      </BrowserRouter>
     </ThemeProvider>
   );
 }
 
 const PageWrap = styled.div`
-  flex: 1; 
+  flex: 1;
   margin-left: 300px;
 
-  ${props => props.theme.response.tablet} {
+  ${(props) => props.theme.response.tablet} {
     margin-left: 100px;
   }
 
-  ${props => props.theme.response.mobile} {
+  ${(props) => props.theme.response.mobile} {
     margin-left: 0;
     margin-bottom: 120px;
   }