osamhack2021 · dev-taewon-kim · Oct 16, 2021 · Oct 16, 2021 · Oct 16, 2021
diff --git a/WEB/frontend/package-lock.json b/WEB/frontend/package-lock.json
diff --git a/WEB/frontend/src/components/Modal/Header.js b/WEB/frontend/src/components/Modal/Header.js
@@ -6,44 +6,7 @@ import logo from '../../images/sub/logo_w.png';
 import logo_btn from '../../images/sub/prev_btn.png';
 
 function Header(props) {
-  let [userprofile, setUserprofile] = useState(false);
-  let [userPhoto, setUserPhoto] = useState();
-  let [currentUser_pk, setCurrentUser_pk] = useState();
 
-  useEffect(() => {
-    fetch('http://localhost:8000/user/current/', {
-      headers: {
-        Authorization: `JWT ${localStorage.getItem('token')}`,
-      },
-    })
-      .then((res) => res.json())
-      .then((json) => {
-        // 현재 유저 정보 받아왔다면, 로그인 상태로 state 업데이트 하고
-        if (json.id) {
-          //유저정보를 받아왔으면 해당 user의 프로필을 받아온다.
-        }
-        fetch(
-          'http://localhost:8000/user/auth/profile/' + json.id + '/update/',
-          {
-            method: 'PATCH',
-            headers: {
-              Authorization: `JWT ${localStorage.getItem('token')}`,
-            },
-          }
-        )
-          .then((res) => res.json())
-          .then((userData) => {
-            setUserPhoto(userData.photo);
-            setCurrentUser_pk(userData.user_pk);
-          })
-          .catch((error) => {
-            console.log(error);
-          });
-      })
-      .catch((error) => {
-        console.log(error);
-      });
-  }, [userPhoto]);
   const history = useHistory();
 
   return (
@@ -78,7 +41,7 @@ function Header(props) {
             </li>
           ) : (
             <li>
-              <Link onClick={props.handleLogout} to="/">
+              <Link onClick={localStorage.removeItem('token')} to="/">
                 로그 아웃
               </Link>
             </li>

diff --git a/WEB/frontend/src/components/Modal/LoginModal.js b/WEB/frontend/src/components/Modal/LoginModal.js
@@ -21,6 +21,12 @@ const LoginModal = (props) => {
   let [useremail, setUserEamil] = useState();
 
   const data = { username: username, password: userpassword, email: useremail };
+  let token = localStorage.getItem("token");
+
+
+if(token!=null){
+	history.push("/")
+}
 
   const handleNameChange = (e) => {
     setUsername(e.target.value);
@@ -81,38 +87,40 @@ const LoginModal = (props) => {
               onChange={handlePasswordChange}
             />
           </Box>
-          {/* onClick={(e)=>{
-                    e.preventDefault()
-                    fetch('/api/user/login/', {
-                    method: 'POST',
-                      headers: {
-                        'Content-Type': 'application/json'
-                      },
-                      body: JSON.stringify(data)
-                    })
-                    .then(res => res.json())
-                    .then(json => {
-                      if (json.token) {
-                        props.userHasAuthenticated(true, data.username, json.token);
-                        alert("환영합니다."+username+"님.")
-                        history.push("/");
-                        props.setModal(true)
-                        console.log(json)
-                      }else{
-                        alert("아이디 또는 비밀번호를 확인해주세요.")
-                      }
-                    })
-                    .catch(error => alert(error));
-                  }} */}
+          {/* */}
           <Link href="/presstrends" sx={{ textDecoration: 'none'}}>
             <Button
               type="submit"
               variant="contained"
               style={btnstyle}
               className="JoinLoign-button"
+
+              onClick={(e)=>{
+                e.preventDefault()
+                fetch('/api/user/login/', {
+                method: 'POST',
+                  headers: {
+                    'Content-Type': 'application/json'
+                  },
+                  body: JSON.stringify(data)
+                })
+                .then(res => res.json())
+                .then(json => {
+                  if (json.token) {
+                    props.userHasAuthenticated(true, data.username, json.token);
+                    alert("환영합니다."+username+"님.")
+                    history.push("/");
+                    props.setModal(true)
+                    console.log(json)
+                  }else{
+                    alert("아이디 또는 비밀번호를 확인해주세요.")
+                  }
+                })
+                .catch(error => alert(error));
+              }} 
             >
               로그인
-            </Button>
+            </Button >
           </Link>
           {/* <Typography>
             <br></br>

diff --git a/WEB/frontend/src/components/Modal/PasswordResetModal.js b/WEB/frontend/src/components/Modal/PasswordResetModal.js
@@ -12,7 +12,11 @@ const PasswordResetModal=(props)=>{
 
 
   const data = {password : userpassword,token : usertoken, }
+  let token = localStorage.getItem("token");
 
+  if(token!=null){
+    history.push("/")
+  }
 const handlePassword1Change = (e) => {
   setUserPassword(e.target.value)
 }

diff --git a/WEB/frontend/src/components/Modal/RegisterModal.js b/WEB/frontend/src/components/Modal/RegisterModal.js
@@ -8,14 +8,19 @@ import '../../css/LoginModal.css';
 const RegisterModal=(props)=>{
   let [JoinLoign,setJoinLogin] = useState('회원가입')
   const history = useHistory()
-
+  
 
   let [username, setUsername] = useState()
   let [userpassword, setUserPassword] = useState()
   let [userpasswordCheck, setUserPasswordCheck] = useState();
   let [useremail, setUserEamil] = useState()
 
   const data = {username : username, password : userpassword, email : useremail}
+  let token = localStorage.getItem("token");
+
+  if(token!=null){
+    history.push("/")
+  }
 
   const handleNameChange = (e) => {
     setUsername(e.target.value)
@@ -49,37 +54,39 @@ const RegisterModal=(props)=>{
           <TextField label='비밀번호' placeholder='비밀번호를 입력해 주세요.' type='password' fullWidth required onChange={handlePasswordChange}/>
           <TextField label='비밀번호 확인' placeholder='비밀번호를 다시 입력해 주세요.' type='password' fullWidth required onChange={handlePasswordCheckChange}/>
           <TextField label='이메일' placeholder='이메일을 입력해 주세요.' fullWidth required onChange={handleEmailChange}/>
-          {/* onClick={(e)=>{
-                  e.preventDefault()
-                  if(!useremail.indexOf("@")){
-                    alert("이메일 형식이 올바르지 않습니다.")
-                  }else if(userpassword !== userpasswordCheck){
-                    alert("비밀번호를 확인해 주세요.")
-                  }else{
-                    fetch('/api/user/register/', {
-                      method: 'POST',
-                      headers:{
-                        'Content-Type': 'application/json'
-                      },
-                      body: JSON.stringify(data)
-
-                    }).then(res => res.json())
-                    .then(json => {
-                      console.log(json)
-                      if (json.token) {
-                        props.userHasAuthenticated(true, data.username, json.token);
-                        history.push("/");
-                        props.setModal(true)
-                      }else{
-                        alert("사용불가능한 아이디입니다.")
-                      }
-                    })
-
-                    .catch(error => alert(error));
-                  }
-                  }
-                 } */}
-          <Button type='submit' color='primary' variant="contained" style={btnstyle} fullWidth className="JoinLoign-button"><Link href="/login">{JoinLoign}</Link></Button>
+          {/*  */}
+          <Button type='submit' color='primary' variant="contained" style={btnstyle} fullWidth className="JoinLoign-button"
+          onClick={(e)=>{
+            e.preventDefault()
+            if(!useremail.indexOf("@")){
+              alert("이메일 형식이 올바르지 않습니다.")
+            }else if(userpassword !== userpasswordCheck){
+              alert("비밀번호를 확인해 주세요.")
+            }else{
+              fetch('/api/user/register/', {
+                method: 'POST',
+                headers:{
+                  'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(data)
+
+              }).then(res => res.json())
+              .then(json => {
+                console.log(json)
+                if (json.token) {
+                  props.userHasAuthenticated(true, data.username, json.token);
+                  history.push("/");
+                  props.setModal(true)
+                }else{
+                  alert("사용불가능한 아이디입니다.")
+                }
+              })
+
+              .catch(error => alert(error));
+            }
+            }
+           }
+          ><Link href="/login">{JoinLoign}</Link></Button>
         <br /><br /><br /><br />
         <hr />
         <Divider>or</Divider>

diff --git a/WEB/frontend/src/pages/Dashboard.js b/WEB/frontend/src/pages/Dashboard.js
@@ -6,10 +6,17 @@ import WordCloud from '../components/Dashboard/WordCloud';
 import TrendsCard from '../components/Dashboard/TrendsCard';
 
 import { darkTheme, palette } from '../darkTheme';
-
+import { useHistory } from 'react-router';
 import { Grid } from '@mui/material';
 
 export default function Dashboard() {
+  const history = useHistory();
+  let token = localStorage.getItem("token");
+  if(token==null){
+    alert("로그인이 필요한 페이지 입니다.");
+    history.push("/login")
+  }
+
   return (
     <Grid container spacing={2}>
       <Grid item xs={12} sm={12} md={12} lg={12}>

diff --git a/WEB/frontend/src/pages/DetectionStatus.js b/WEB/frontend/src/pages/DetectionStatus.js
@@ -12,8 +12,15 @@ import { useRecoilValue } from 'recoil';
 import { searchState } from '../atoms/searchState';
 import useSearchInitEffect from '../hooks/useSearchInitEffect';
 import { appliedFilterListState } from '../atoms/appliedFilterMapState';
+import { useHistory } from 'react-router';
 
 export default function DetectionStatus() {
+  const history = useHistory();
+  let token = localStorage.getItem("token");
+  if(token==null){
+    alert("로그인이 필요한 페이지 입니다.");
+    history.push("/login")
+  }
   useSearchInitEffect(); // init
 
   const search = useRecoilValue(searchState);
@@ -31,7 +38,7 @@ export default function DetectionStatus() {
     positivity: 0,
     entities: {},
   });
-
+  
   const showDetailModal = (_id) => {
     const data = search.contents.filter((x) => x._id == _id).pop(0); // popping doesn't affect original array
     // console.log(

diff --git a/WEB/frontend/src/pages/RiskReport.js b/WEB/frontend/src/pages/RiskReport.js
@@ -9,10 +9,17 @@ import ThreatMediaCard from '../components/RiskReport/ThreatMediaCard';
 import PdfExportButton from '../components/RiskReport/PdfExportButton';
 import Graphs from '../components/RiskReport/Graphs';
 import ScrappedArticle from '../components/RiskReport/ScrappedArticle';
-
+import { useHistory } from 'react-router'
 import { darkTheme, palette } from '../darkTheme';
 
 const RiskReport = (props) => {
+  const history = useHistory();
+  let token = localStorage.getItem("token");
+  if(token==null){
+    alert("로그인이 필요한 페이지 입니다.");
+    history.push("/login")
+  }
+
   const [getCart, addCart] = useSessionStorage('riskoutShoppingCart');
   const [dateRange, setDateRange] = React.useState('all'); // for period select
   const [data, setData] = React.useState({});