chore: client 디렉토리 구조 설정

.prettierrc

@@ -1,5 +1,6 @@
 {
   "arrowParens": "always",
   "printWidth": 250,
-  "singleQuote": true
+  "singleQuote": true,
+  "tabWidth": 2
 }

client/package.json

@@ -12,7 +12,9 @@
     "@types/react-dom": "^18.0.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.4.3",
     "react-scripts": "5.0.1",
+    "styled-components": "^5.3.6",
     "typescript": "^4.8.4",
     "web-vitals": "^2.1.4"
   },
@@ -39,5 +41,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@types/styled-components": "^5.1.26"
   }
 }

client/src/App.tsx

@@ -1,20 +1,17 @@
 import React from 'react';
-import logo from './logo.svg';
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import './App.css';
+import { GlobalStyle } from './components/common/GlobalStyle';
+import WelcomePage from './pages/WelcomePage';
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer">
-          Learn React
-        </a>
-      </header>
-    </div>
+    <Router>
+      <GlobalStyle />
+      <Routes>
+        <Route path="/" element={<WelcomePage />} />
+      </Routes>
+    </Router>
   );
 }
 

client/src/components/WelcomePage/LoginMenu/index.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import * as S from './style';
+
+const LoginMenu = () => {
+  return (
+    <>
+      <S.LoginContainer>"마요 WELCOME"</S.LoginContainer>
+    </>
+  );
+};
+
+export default LoginMenu;

client/src/components/WelcomePage/LoginMenu/style.ts

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+export const LoginContainer = styled.div`
+  width: 50.5rem;
+  height: 38.5 rem;
+  border: 1px solid #f1f1f1;
+  dixplay: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`;

client/src/components/common/GlobalStyle.ts

@@ -0,0 +1,10 @@
+import { createGlobalStyle } from 'styled-components';
+
+export const GlobalStyle = createGlobalStyle`
+  body {
+    background: rgba(0, 60, 165, 0.4);
+    background-size: 100% 586px;
+    place-items: center;
+    display:grid;
+  }
+`;

client/src/pages/WelcomePage.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import LoginMenu from '../components/WelcomePage/LoginMenu';
+
+const WelcomePage = () => {
+  return <LoginMenu />;
+};
+
+export default WelcomePage;