feat: login & tutorial 화면 기능 구현

My-Music-Note · Oct 31, 2024 · 0fc4a5a · 0fc4a5a
1 parent 5ac2953
commit 0fc4a5a
Show file tree

Hide file tree

Showing 5 changed files with 261 additions and 44 deletions.
diff --git a/src/App.css b/src/App.css
@@ -1,38 +1,89 @@
-.App {
+/* App.css */
+body,
+html {
+  margin: 0;
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    sans-serif;
+  background-color: #f8f8f8;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+}
+
+.app {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+}
+
+.container {
+  width: 100%;
+  max-width: 400px;
+  background-color: #ffffff;
+  padding: 30px;
+  border-radius: 20px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
   text-align: center;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
+h1 {
+  font-size: 24px;
+  margin-bottom: 5px;
+  font-weight: bold;
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
+h2 {
+  font-size: 20px;
+  margin: 10px 0 30px;
+  color: #333;
 }
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
+.feature {
   display: flex;
-  flex-direction: column;
   align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+  margin-bottom: 20px;
+}
+
+.feature img {
+  width: 40px;
+  height: 40px;
+  margin-right: 10px;
+}
+
+.feature h3 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: bold;
+  wordwrap: "break-word";
+}
+
+.feature p {
+  margin: 5px 0 0;
+  font-size: 14px;
+  color: #666;
+}
+
+.fade-enter {
+  opacity: 0;
+  transform: translateX(100%);
+}
+
+.fade-enter-active {
+  opacity: 1;
+  transform: translateX(0);
+  transition: opacity 300ms, transform 300ms;
 }
 
-.App-link {
-  color: #61dafb;
+.fade-exit {
+  opacity: 1;
+  transform: translateX(0);
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+.fade-exit-active {
+  opacity: 0;
+  transform: translateX(-100%);
+  transition: opacity 300ms, transform 300ms;
 }
diff --git a/src/App.js b/src/App.js
@@ -1,27 +1,44 @@
-import logo from './logo.svg';
-import './App.css';
+import React from "react";
+import {
+  BrowserRouter as Router,
+  Routes,
+  Route,
+  useLocation,
+} from "react-router-dom";
+import { GoogleOAuthProvider } from "@react-oauth/google";
+import { SwitchTransition, CSSTransition } from "react-transition-group";
+import LoginPage from "./pages/LoginPage";
+import MainPage from "./pages/MainPage";
+import "./App.css";
 
-function App() {
+function AnimatedRoutes() {
+  const location = useLocation();
+
+  return (
+    <SwitchTransition>
+      <CSSTransition
+        key={location.key}
+        timeout={300}
+        classNames="fade"
+        unmountOnExit
+      >
+        <Routes location={location}>
+          <Route path="/" element={<LoginPage />} />
+          <Route path="/main" element={<MainPage />} />
+        </Routes>
+      </CSSTransition>
+    </SwitchTransition>
+  );
+}
 
+function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          프론트 배포 완료.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <GoogleOAuthProvider clientId={process.env.REACT_APP_GOOGLE_CLIENT_ID}>
+      <Router>
+        <AnimatedRoutes /> {/* Router 내부에서 AnimatedRoutes를 렌더링 */}
+      </Router>
+    </GoogleOAuthProvider>
   );
-
 }
 
 export default App;
diff --git a/src/pages/LoginPage.css b/src/pages/LoginPage.css
@@ -0,0 +1,40 @@
+/* LoginPage.css */
+.login-container {
+  width: 100%;
+  max-width: 400px;
+  background-color: #ffffff;
+  padding: 30px;
+  border-radius: 20px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+  text-align: center;
+  margin: auto;
+  margin-top: 100px;
+}
+
+h1 {
+  font-size: 24px;
+  margin-bottom: 5px;
+  font-weight: bold;
+}
+
+h2 {
+  font-size: 20px;
+  margin: 10px 0 30px;
+  color: #333;
+}
+
+.google-login-button {
+  margin-top: 20px;
+  width: 100%;
+  height: 50px;
+  border: 1px solid #ddd;
+  border-radius: 10px;
+  color: #333;
+  font-weight: bold;
+  font-size: 16px;
+  background: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
diff --git a/src/pages/LoginPage.js b/src/pages/LoginPage.js
@@ -0,0 +1,96 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import { GoogleOAuthProvider, GoogleLogin } from "@react-oauth/google";
+import { jwtDecode } from "jwt-decode";
+import { useState } from "react";
+import "./LoginPage.css";
+
+function LoginPage() {
+  const navigate = useNavigate();
+  const [user, setUser] = useState(null);
+
+  const handleLoginSuccess = (credentialResponse) => {
+    const decoded = jwtDecode(credentialResponse.credential);
+    setUser(decoded);
+    // 로그인 성공 시 메인 화면으로 이동
+    navigate("/main");
+  };
+
+  const handleLoginFailure = (error) => {
+    console.error("Google 로그인 실패:", error);
+  };
+
+  return (
+    <GoogleOAuthProvider clientId={process.env.REACT_APP_GOOGLE_CLIENT_ID}>
+      <div className="app">
+        <div className="container">
+          <h1>My Music Note</h1>
+          <h2>시작하기</h2>
+
+          <div className="feature">
+            <img
+              src="https://em-content.zobj.net/source/apple/391/memo_1f4dd.png"
+              alt="pencil"
+            />
+            <div>
+              <h3>작성 내용 기반 음악 생성</h3>
+              <p>작성한 일기와 질문답변을 기반으로 적합한 음악이 생성됩니다.</p>
+            </div>
+          </div>
+
+          <div className="feature">
+            <img
+              src="https://em-content.zobj.net/source/apple/391/sun_2600-fe0f.png"
+              alt="sun"
+            />
+            <div>
+              <h3>우울증 자가진단</h3>
+              <p>
+                우울감과 관련한 인지적, 정서적, 신체적 증상에 대한 검사를 할 수
+                있습니다.
+              </p>
+            </div>
+          </div>
+
+          <div className="feature">
+            <img
+              src="https://em-content.zobj.net/source/apple/391/pill_1f48a.png"
+              alt="pill"
+            />
+            <div>
+              <h3>약 백과사전 & 복용 시간 알림이</h3>
+              <p>
+                현재 복용 중인 약의 효과와 성분을 찾아보고, 복용 시간을 정하여
+                알려줍니다.
+              </p>
+            </div>
+          </div>
+
+          <GoogleLogin
+            onSuccess={handleLoginSuccess}
+            onError={handleLoginFailure}
+            text="signin_with"
+            className="google-login-button"
+          />
+          <button
+            onClick={() => navigate("/main")}
+            style={{
+              marginTop: "20px",
+              width: "100%",
+              padding: "10px 20px",
+              backgroundColor: "#007bff",
+              color: "white",
+              border: "none",
+              borderRadius: "5px",
+              cursor: "pointer",
+            }}
+          >
+            비회원으로 로그인하기
+          </button>
+        </div>
+      </div>
+    </GoogleOAuthProvider>
+  );
+}
+
+export default LoginPage;
diff --git a/src/pages/MainPage.js b/src/pages/MainPage.js
@@ -0,0 +1,13 @@
+// src/pages/MainPage.js
+import React from "react";
+
+function MainPage() {
+  return (
+    <div style={{ textAlign: "center", padding: "50px" }}>
+      <h1>Welcome to the Main Page!</h1>
+      <p>You have successfully logged in with Google.</p>
+    </div>
+  );
+}
+
+export default MainPage;