Merge pull request #5 from AutoDevLog/develop

Design: Login Page
AutoDevLog · May 19, 2024 · 38b57d7 · 38b57d7
2 parents 4cb4b35 + 6111c0a
commit 38b57d7
Show file tree

Hide file tree

Showing 14 changed files with 2,413 additions and 1,844 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -7,6 +7,7 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.6.8",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-responsive": "^10.0.0",

diff --git a/src/App.js b/src/App.js
@@ -1,23 +1,37 @@
-import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
-import Main from "./pages/main/main";
-import Login from "./pages/login/login"
+import React from 'react';
+import { BrowserRouter as Router, Route, Routes, Navigate } from 'react-router-dom';
+import { AuthProvider, AuthContext } from './contexts/AuthContext';
+import Main from './pages/main/Main';
+import Login from './pages/login/Login';
+import MainHome from './pages/home/Home'
+import VelogPage from './pages/VelogPage/VelogPage';
 import './App.css';
-import styled from "styled-components";
+import styled from 'styled-components';
 
 function App() {
   return (
-    <Body>
-      <Router>
-        <Routes>
-          <Route path="/" element={<Main />} />
-          <Route path="/login" element={<Login />} />
-        </Routes>
-      </Router>
-    </Body>
+    <AuthProvider>
+      <Body>
+        <Router>
+          <Routes>
+            <Route path="/" element={<Main />} />
+            <Route path="/login" element={<Login />} />
+            <Route path="/home" element={<PrivateRoute><MainHome /></PrivateRoute>} />
+            <Route path="/velog" element={<VelogPage />} />
+          </Routes>
+        </Router>
+      </Body>
+    </AuthProvider>
   );
 }
 
+const PrivateRoute = ({ children }) => {
+  const { isAuthenticated } = React.useContext(AuthContext);
+  return isAuthenticated ? children : <Navigate to="/login" />;
+};
+
 export default App;
 
 const Body = styled.div`
-`;
+  /* 스타일을 여기에 추가합니다 */
+`;
diff --git a/src/componets/VelogIntergration/VelogIntergration.js b/src/componets/VelogIntergration/VelogIntergration.js
@@ -0,0 +1,59 @@
+import React, { useState, useContext } from 'react';
+import { Link } from "react-router-dom";
+import { useNavigate } from 'react-router-dom';
+import { AuthContext } from '../../contexts/AuthContext';
+import * as styles from './VelogIntergration.styles';
+
+const VelogIntegration = () => {
+    const [username, setUsername] = useState('');
+    const [password, setPassword] = useState('');
+    const [error, setError] = useState('');  // 에러 메시지를 저장하는 상태
+    const { login } = useContext(AuthContext);
+    const navigate = useNavigate();
+
+    const handleLogin = (e) => {
+      e.preventDefault();
+      console.log('handleLogin called');
+      // ID와 PW 검증 로직
+      if (username === 'Admin' && password === '1234') {
+        const token = 'dummy-token'; // 실제 로그인 로직에서 토큰 받아오기
+        console.log('Login successful, navigating to /home');
+        login(token, username);
+        navigate("/home");
+      } else {
+        setError('아이디 또는 비밀번호가 잘못되었습니다.');
+        console.log('Login failed');  // 에러 메시지 설정
+      }
+    };
+
+    return (
+      <styles.Container>
+        <styles.HeaderContainer>
+        <Link to="/home" style={{ textDecoration: 'none', color: 'inherit' }}>
+          <styles.HeaderTitle>Home</styles.HeaderTitle>
+          </Link>
+        </styles.HeaderContainer>
+        <styles.BodyContainer>
+          <styles.BodyContentContainer>
+            <styles.FormContainer onSubmit = {handleLogin}>
+              <styles.FormTitle>Velog 계정 연동</styles.FormTitle>
+              <styles.Input 
+                type="text" 
+                placeholder="Velog 이메일" 
+                value={username} 
+                onChange={(e) => setUsername(e.target.value)} 
+              />
+              <styles.ButtonContainer>
+                <styles.Button type="submit">계정 연동 이메일 보내기</styles.Button>
+              </styles.ButtonContainer>
+            </styles.FormContainer>
+          </styles.BodyContentContainer>
+        </styles.BodyContainer>
+        <styles.FooterContainer>
+          footer
+        </styles.FooterContainer>
+      </styles.Container>
+    );
+};
+
+export default VelogIntegration;
diff --git a/src/componets/VelogIntergration/VelogIntergration.styles.js b/src/componets/VelogIntergration/VelogIntergration.styles.js
@@ -0,0 +1,99 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  margin: 0 auto;
+  height: 100vh; /* 전체 화면 높이를 차지하도록 설정 */
+`;
+
+export const HeaderContainer = styled.div`
+  background-color: #ffffff;
+  margin: 0 auto;
+  max-width: 50%;
+`;
+
+export const HeaderTitle = styled.h4`
+  text-align: right;
+`;
+
+export const BodyContainer = styled.div`
+  padding: 20px;
+  background-color: #EDF1F5;
+  height: calc(100% - 100px); /* 헤더와 푸터를 제외한 높이 계산 (예: 헤더와 푸터 각각 50px) */
+`;
+
+export const BodyContentContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%; /* 부모 컨테이너의 전체 높이를 차지 */
+`;
+
+export const FormContainer = styled.form`
+  background-color: white;
+  padding: 20px;
+  border-radius: 30px;
+  width: 50%; /* 전체 비율의 50% */
+  height: 50%; /* 세로 높이의 50% */
+  display: flex;
+  flex-direction: column; /* 수직 정렬 */
+  justify-content: center;
+  align-items: center;
+`;
+
+export const FormTitle = styled.h1`
+  text-align: left;
+`;
+
+export const FormText = styled.p`
+  text-align: left;
+`;
+
+export const Input = styled.input`
+  width: 80%;
+  background-color: #EDF1F5;
+  padding: 10px;
+  margin: 10px 0;
+  border-radius: 4px;
+  border: 0.3px solid #ccc;
+  box-sizing: border-box; /* 입력 필드의 최대 너비 (선택 사항) */
+`;
+
+export const ErrorText = styled.p`
+  color: red;
+  margin-top: 10px;
+  text-align: center;
+`;
+
+export const ButtonContainer = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 20px;
+`;
+
+export const Button = styled.button`
+  padding: 10px 50px;
+  border-radius: 4px;
+  border: none;
+  background-color: white;
+  color: black;
+  cursor: pointer;
+  font-weight: bold;
+  border: 0.3px solid #ccc;
+  margin-left: 10px;
+
+  &:hover {
+    background-color: #EDF1F5;
+  }
+`;
+
+export const FooterContainer = styled.div`
+  height: 50px; /* 푸터 높이 설정 */
+  background-color: white;
+  text-align: center;
+  padding: 10px;
+  position: fixed; /* 절대 위치에서 고정 위치로 변경 */
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  margin: 0; /* 여백 제거 */
+`;
diff --git a/src/contexts/AuthContext.js b/src/contexts/AuthContext.js
@@ -0,0 +1,41 @@
+// AuthContext.js
+import React, { createContext, useState, useEffect } from 'react';
+
+// Create the AuthContext
+export const AuthContext = createContext();
+
+// AuthProvider component
+export const AuthProvider = ({ children }) => {
+  const [isAuthenticated, setIsAuthenticated] = useState(false);
+  const [nickname, setNickname] = useState('');
+
+  useEffect(() => {
+    // Check if there is a token in localStorage
+    const token = localStorage.getItem('token');
+    const storedNickname = localStorage.getItem('nickname');
+    if (token === 'dump-token' || process.env.NODE_ENV === 'development') {
+      setIsAuthenticated(true);
+      setNickname(storedNickname)
+    }
+  }, []);
+
+  const login = (token, nickname) => {
+    localStorage.setItem('token', token);
+    localStorage.setItem('nickname', nickname);
+    setIsAuthenticated(true);
+    setNickname(nickname);
+  };
+
+  const logout = () => {
+    localStorage.removeItem('token');
+    localStorage.removeItem('nickname');
+    setIsAuthenticated(false);
+    setNickname('');
+  };
+
+  return (
+    <AuthContext.Provider value={{ isAuthenticated,nickname, login, logout }}>
+      {children}
+    </AuthContext.Provider>
+  );
+};
diff --git a/src/pages/VelogPage/VelogPage.js b/src/pages/VelogPage/VelogPage.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import VelogIntegration from '../../componets/VelogIntergration/VelogIntergration';
+import * as styles from './VelogPage.styles';
+
+const VelogPage = () => {
+  return (
+    <styles.Container>
+      <VelogIntegration />
+    </styles.Container>
+  );
+};
+
+export default VelogPage;
diff --git a/src/pages/VelogPage/VelogPage.styles.js b/src/pages/VelogPage/VelogPage.styles.js
@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  padding: 20px;
+`;
diff --git a/src/pages/home/Home.js b/src/pages/home/Home.js
@@ -0,0 +1,83 @@
+import React, { useContext, useState } from "react";
+import { Link } from "react-router-dom";
+import { AuthContext } from "../../contexts/AuthContext";
+import * as styles from "./Home.styles";
+
+function Home() {
+  const [issue, setIssue] = useState('');
+  const [inference, setInference] = useState('');
+  const [solution, setSolution] = useState('');
+  const [result, setResult] = useState('');
+
+  const { nickname } = useContext(AuthContext)
+
+  const handleGenerate = () => {
+    // 결과를 생성하는 로직 처리
+    setResult('결과 값이 나옵니다.');
+  };
+
+  const handleReset = () => {
+    setIssue('');
+    setInference('');
+    setSolution('');
+    setResult('');
+  };
+
+  return (
+    <styles.Container>
+      <styles.HeaderContainer>
+      <Link to="/velog" style={{ textDecoration: 'none', color: 'inherit' }}>
+      <styles.HeaderTitle style= {{paddingRight: '20px'}}>Velog 연동</styles.HeaderTitle>
+      </Link>
+        <Link to="/login" style={{ textDecoration: 'none', color: 'inherit' }}>
+          <styles.HeaderTitle>로그아웃</styles.HeaderTitle>
+        </Link>
+      </styles.HeaderContainer>
+      <styles.BodyContainer>
+        <styles.BodyContentContainer>
+        <styles.BodyTitle>
+            AudoDevLog
+        </styles.BodyTitle>
+        <styles.BodyText>
+            { nickname } 님 안녕하세요 
+            {'\n'} 오늘 하루 공부 한걸 작성해보세요
+        </styles.BodyText>
+        </styles.BodyContentContainer>
+      </styles.BodyContainer>
+      <styles.FormContainer>
+        <styles.FormTitle>키워드</styles.FormTitle>
+        <styles.FormText>키워드를 입력하세요</styles.FormText>
+          <styles.FormTitle>ISSUE</styles.FormTitle>
+          <styles.Input
+            type="text"
+            value={issue}
+            onChange={(e) => setIssue(e.target.value)}
+          />
+          <styles.FormTitle>INFERENCE</styles.FormTitle>
+          <styles.Input
+            type="text"
+            value={inference}
+            onChange={(e) => setInference(e.target.value)}
+          />
+          <styles.FormTitle>SOLUTION</styles.FormTitle>
+          <styles.Input
+            type="text"
+            value={solution}
+            onChange={(e) => setSolution(e.target.value)}
+          />
+        <styles.ButtonContainer>
+          <styles.Button onClick={handleGenerate}>생성하기</styles.Button>
+        </styles.ButtonContainer>
+        <styles.ResultBox>
+        <styles.BodyText>{result}</styles.BodyText>
+        </styles.ResultBox>
+        <styles.ButtonContainer>
+            <styles.Button onClick={handleReset}>다시 생성하기</styles.Button>
+            <styles.Button style={{ marginLeft: "10px" }}>전송하기</styles.Button>
+        </styles.ButtonContainer>
+      </styles.FormContainer>
+    </styles.Container>
+  );
+}
+
+export default Home;