✨ 트러플 로그인 화면 ui 구현 (#15)

Author: woohm402

apps/truffle-webclient/package.json

@@ -10,13 +10,15 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "styled-components": "^5.3.9"
   },
   "devDependencies": {
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
+    "@types/styled-components": "^5.1.26",
     "@vitejs/plugin-react-swc": "^3.0.0",
-    "typescript": "^4.9.3",
+    "typescript": "^5.0.3",
     "vite": "^4.2.0"
   }
 }

apps/truffle-webclient/src/App.css

@@ -1,35 +1,19 @@
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
-import './App.css'
+import { createGlobalStyle } from "styled-components";
+import { LoginPage } from "./pages/LoginPage";
 
 function App() {
-  const [count, setCount] = useState(0)
-
   return (
-    <div className="App">
-      <div>
-        <a href="https://vitejs.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://reactjs.org" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
-    </div>
-  )
+    <>
+      <GlobalStyle />
+      <LoginPage />
+    </>
+  );
 }
 
-export default App
+export default App;
+
+const GlobalStyle = createGlobalStyle`
+  body {
+    margin: 0;
+  }
+`;

apps/truffle-webclient/src/App.tsx

@@ -1,10 +1,9 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App'
-import './index.css'
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import { StrictMode } from "react";
 
-ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
-  <React.StrictMode>
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+  <StrictMode>
     <App />
-  </React.StrictMode>,
-)
+  </StrictMode>
+);

apps/truffle-webclient/src/assets/react.svg

@@ -0,0 +1,53 @@
+import styled, { createGlobalStyle } from "styled-components";
+
+export const LoginPage = () => {
+  return (
+    <Wrapper>
+      <Left />
+      <Right>
+        <LoginButton>LOG IN VIA GITHUB</LoginButton>
+      </Right>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div`
+  display: flex;
+  height: 100vh;
+`;
+
+const Left = styled.div`
+  flex: 1;
+  background-image: url("https://avatars.slack-edge.com/2023-01-09/4602907042359_26481362e89cf34f3794_192.jpg");
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+`;
+
+const Right = styled.div`
+  width: max(25%, 300px);
+  background-color: #f5f5f5;
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 200px 20px;
+`;
+
+const LoginButton = styled.button`
+  background-color: #000;
+  color: #fff;
+  border: none;
+  padding: 20px 30px;
+  border-radius: 5px;
+  font-size: 16px;
+  font-weight: bold;
+  margin-top: 20px;
+  cursor: pointer;
+  transition: 0.2s;
+
+  &:hover {
+    background-color: #333;
+    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
+  }
+`;