From 0fc4a5a7d4f6f65bc2d2736d24c6b03043d98897 Mon Sep 17 00:00:00 2001 From: kookoo1130 Date: Thu, 31 Oct 2024 13:39:05 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20login=20&=20tutorial=20=ED=99=94?= =?UTF-8?q?=EB=A9=B4=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.css | 99 +++++++++++++++++++++++++++++++---------- src/App.js | 57 +++++++++++++++--------- src/pages/LoginPage.css | 40 +++++++++++++++++ src/pages/LoginPage.js | 96 +++++++++++++++++++++++++++++++++++++++ src/pages/MainPage.js | 13 ++++++ 5 files changed, 261 insertions(+), 44 deletions(-) create mode 100644 src/pages/LoginPage.css create mode 100644 src/pages/LoginPage.js create mode 100644 src/pages/MainPage.js diff --git a/src/App.css b/src/App.css index 74b5e05..dfb00bf 100644 --- 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 index 93c578b..4d79756 100644 --- 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 ( + + + + } /> + } /> + + + + ); +} +function App() { return ( -
-
- logo -

- 프론트 배포 완료. -

- - Learn React - -
-
+ + + {/* Router 내부에서 AnimatedRoutes를 렌더링 */} + + ); - } export default App; diff --git a/src/pages/LoginPage.css b/src/pages/LoginPage.css new file mode 100644 index 0000000..d5412af --- /dev/null +++ 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 new file mode 100644 index 0000000..b0f6270 --- /dev/null +++ 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 ( + +
+
+

My Music Note

+

시작하기

+ +
+ pencil +
+

작성 내용 기반 음악 생성

+

작성한 일기와 질문답변을 기반으로 적합한 음악이 생성됩니다.

+
+
+ +
+ sun +
+

우울증 자가진단

+

+ 우울감과 관련한 인지적, 정서적, 신체적 증상에 대한 검사를 할 수 + 있습니다. +

+
+
+ +
+ pill +
+

약 백과사전 & 복용 시간 알림이

+

+ 현재 복용 중인 약의 효과와 성분을 찾아보고, 복용 시간을 정하여 + 알려줍니다. +

+
+
+ + + +
+
+ + ); +} + +export default LoginPage; diff --git a/src/pages/MainPage.js b/src/pages/MainPage.js new file mode 100644 index 0000000..134ec42 --- /dev/null +++ b/src/pages/MainPage.js @@ -0,0 +1,13 @@ +// src/pages/MainPage.js +import React from "react"; + +function MainPage() { + return ( +
+

Welcome to the Main Page!

+

You have successfully logged in with Google.

+
+ ); +} + +export default MainPage;