Skip to content

Commit

Permalink
[Feat] 백엔드 연결 및 백엔드에 맞추어 명칭 수정 #54
Browse files Browse the repository at this point in the history
  • Loading branch information
HyeongwooIM committed Apr 24, 2023
1 parent b9e5692 commit 1792a8f
Show file tree
Hide file tree
Showing 20 changed files with 969 additions and 83 deletions.
99 changes: 75 additions & 24 deletions src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,39 +1,90 @@
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import { BrowserRouter, BrowserRouter as Router, Route, Routes } from "react-router-dom";
import { useState, useEffect } from "react";
import { RecoilRoot, useRecoilState } from "recoil";
import {profileState} from "./utils/recoil/user"
import Main from './components/Main';
import { profileState } from "./utils/recoil/user";
import Main from "./components/Main";
import Login from "./components/login/Login";
import MyComment from "./components/myPage/MyPage";
import SubjectDetail from './components/subject_detail/SubjectDetail';
import SubjectDetail from "./components/subject_detail/SubjectDetail";
import IsLogged from "./components/login/IsLogged";
import Modal from "./components/modal/Modal";
import Empty from "./components/Error/Empty";
import { redirect } from "react-router-dom";
import { useNavigate } from 'react-router-dom';
import LoginCheck from "./components/login/LoginCheck";



const App = () => {
const baseUrl = `${process.env.REACT_APP_END_POINT}`;
const [isLogged, setIsLogged] = useState(true);
const [userInfo, setUserInfo] = useRecoilState(profileState)
// const navigate = useNavigate();
// const baseUrl = `${process.env.REACT_APP_END_POINT}`;
// const [isLogged, setIsLogged] = useState(false);
// const [userInfo, setUserInfo] = useRecoilState(profileState);
// const url = new URL(window.location.href);
// const href = url.href;
// const accessToken = href.split("token=")[1];
// useEffect(() => {
// if (accessToken) {
// localStorage.setItem("42ence-token", accessToken);
// setUserInfo({isLogin:true});
// console.log(userInfo.isLogin)
// navigate('/');
// // redirect(`${baseUrl}`);
// }
// else if (localStorage.getItem("42ence-token")) {
// setUserInfo({isLogin:true});
// console.log(userInfo.isLogin)
// navigate('/');
// redirect(`${baseUrl}`);
// }
// else if (isLogged) {
// fetch(`${baseUrl}/user/me`, {
// headers: {
// Authorization: `Bearer ${localStorage.getItem("42ence-token")}`,
// },
// })
// .then((res) => res.json())
// .then((data) => setUserInfo(data));
// console.log(userInfo.intraId);
// }
// else {
// setUserInfo({isLogin:false});

// }
// navigate('/login');
// redirect(`/login`);
// }, [userInfo.isLogin]);
// useEffect(()=> {
// if (localStorage.getItem("42ence-token"))
// {fetch(`${baseUrl}/user/me`, {
// headers: {
// Authorization: `Bearer ${localStorage.getItem("42ence-token")}`,
// },
// })
// .then((res) => res.json())
// .then((data) => setUserInfo(data));
// console.log(userInfo.intraId);
// }},[userInfo.isLogin])

useEffect(() => {
fetch(`${baseUrl}/user_me`)
.then((res) => res.json())
.then((data) => setUserInfo(data));
}, []);
// userInfo.isLogin === false ? <Login /> :
// const url = new URL(window.location.href);
// const href = url.href;
// const accessToken = href.split("token=")[1];

return (
<>
<Router>
<Routes>
<Route path="/" element={isLogged===false?<Login />:<Main />} />
{/* <Route path="subjectList" element={<Main />} /> */}
<Route path="login" element={<IsLogged/>} />
<Route path="/:circle/:sbj_name" element={<SubjectDetail/>} />
<Route path="/profile/:intraId" element={<MyComment/>} />
<Route path="/*" element={<Empty/>} />
</Routes>
</Router>
<Modal/>
<>
<Router>
<Routes>
<Route path="/" element={<LoginCheck />} />
<Route path="/main" element={<Main />} />
{/* <Route path="subjectList" element={<Main />} /> */}
<Route path="/login" element={<Login />} />
<Route path="/:circle/:sbj_name" element={<SubjectDetail />} />
<Route path="/profile/:intraId" element={<MyComment />} />
<Route path="/*" element={<Empty />} />
</Routes>
</Router>
<Modal />
</>
);
};
Expand Down
35 changes: 34 additions & 1 deletion src/components/Main.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,17 +10,50 @@ import RecentComment from "./RecentComment/RecentComment";
import { ReactComponent as Wekey42 } from "./42wekey.svg";
import PermIdentityIcon from '@mui/icons-material/PermIdentity';
import { Link } from "react-router-dom";
import { Navigate } from 'react-router-dom'


export default function Main() {
const [userInfo, setUserInfo] = useRecoilState(profileState)
const baseUrl = `${process.env.REACT_APP_END_POINT}`;
// const [isLogged, setIsLogged] = useState(false);
// const [userInfo, setUserInfo] = useRecoilState(profileState)

// useEffect(() => {
// fetch(`${baseUrl}/user/me`,{
// method : "POST",
// headers : {
// Authorization : `Bearer ${localStorage.getItem("access_token")}`
// }
// })
// .then((res) => res.json())
// .then((data) => setUserInfo(data));
// }, []);

// const url = new URL(window.location.href);
// const href = url.href;
// const accessToken = href.split("token=")[1];

// useEffect(() => {
// if (accessToken) {
// localStorage.setItem('42ence-token', accessToken);
// setIsLogged(true);
// // router.replace(`/`);
// }
// if (localStorage.getItem('42ence-token')) {
// setIsLogged(true);
// }
// setIsLogged(false);
// }, []);


return (
// Link to={`/${value.circle}_circle/${value.subject_name}`} className={styles.subjectCircle}>
<div className={styles.container}>
{userInfo.isLogin === false && <Navigate to="/login" replace={true}/>}
<div className={styles.headLine}>
<Wekey42 className={styles.logo}/>
<Link to={`/profile/${userInfo.intraId}`} className={styles.myProfile}><PermIdentityIcon className={styles.myProfile}/></Link>
<Link to={`/profile/${userInfo.intra_id}`} className={styles.myProfile}><PermIdentityIcon className={styles.myProfile}/></Link>

</div>
{/* <Menu
Expand Down
1 change: 1 addition & 0 deletions src/components/RecentComment/RecentComment.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@
}

.subjectName {
all:unset;
font-family: "SF Pro Display";
font-style: normal;
font-weight: 600;
Expand Down
20 changes: 13 additions & 7 deletions src/components/RecentComment/RecentComment.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,23 +3,29 @@ import styles from "./RecentComment.module.css";
import StarRateIcon from "@mui/icons-material/StarRate";
import { ReactComponent as EmptyStar } from "../../emptyStar.svg";
import {ConvertTime} from "../../hooks/ConvertTime";
import { Link } from "react-router-dom";


const baseUrl = `${process.env.REACT_APP_END_POINT}`;

interface recentComment {
subject: string;
subject_name: string;
circle:number;
star_rating: number;
comment: string;
time: string;
content: string;
create_time: string;
}

export default function RecentComment() {
const [recentCommentList, setRecentCommentList] = useState<recentComment[]>(
[]
);
useEffect(() => {
fetch(`${baseUrl}/recent_comment`)
fetch(`${baseUrl}/comment/recent`, {
headers: {
Authorization: `Bearer ${localStorage.getItem("42ence-token")}`,
},
})
.then((res) => res.json())
.then((data) => setRecentCommentList(data));
}, []);
Expand All @@ -36,15 +42,15 @@ export default function RecentComment() {
{recentCommentList.map((data, index) => (
<div key={index} className={styles.recentComment}>
<div className={styles.subjectStarRating}>
<div className={styles.subjectName}>{data.subject}</div>
<Link className={styles.subjectName} to={`"/${data.circle}/${data.subject_name}"`}>{data.subject_name}</Link>
<div >
<EmptyStar fill={"#FEDB22"} className={styles.star}/>
</div>
<div className={styles.starRating}>{`${data.star_rating}`}</div>
</div>
<div className={styles.comment}>{data.comment}</div>
<div className={styles.comment}>{data.content}</div>
<div className={styles.dateTime}>
{getTime(data.time)}
{getTime(data.create_time)}
</div>
</div>
))}
Expand Down
4 changes: 3 additions & 1 deletion src/components/login/IsLogged.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,12 @@ export default function IsLogged() {

useEffect(() => {
const url = new URL(window.location.href);
console.log(url);
const href = url.href;
if (!href) return;
const accessToken = href.split("code=")[1];
const accessToken = href.split("token=")[1];
if (accessToken == undefined) return;

fetch(`${baseUrl}/login`, {
method: "POST",
headers: { "Content-Type": "application/json" },
Expand Down
74 changes: 61 additions & 13 deletions src/components/login/Login.tsx
Original file line number Diff line number Diff line change
@@ -1,16 +1,64 @@
import { useLocation } from 'react-router-dom';
import { useEffect } from 'react';
import { ClassNames } from '@emotion/react';
import styles from './Login.module.css';
import { useLocation } from "react-router-dom";
import { useEffect } from "react";
import { ClassNames } from "@emotion/react";
import styles from "./Login.module.css";
import { ReactComponent as Wekey42 } from "../42wekey.svg";
import { useRecoilState } from "recoil";
import { profileState } from "../../utils/recoil/user";
import { redirect } from "react-router-dom";
import { useNavigate } from 'react-router-dom';

export default function Login(){
const loginUrl = 'https://api.intra.42.fr/oauth/authorize?client_id=u-s4t2ud-51653061ff64d007d7e3269016e85b84b88ea3acd89dabcb3370e475ea6810b8&redirect_uri=http%3A%2F%2Flocalhost%3A8080%2Flogin%2Foauth2%2Fcode%2Fseoul42&response_type=code';
export default function Login() {
const navigate = useNavigate();
const baseUrl = `${process.env.REACT_APP_END_POINT}`;
const loginUrl = `${baseUrl}/oauth2/authorization`;
const [userInfo, setUserInfo] = useRecoilState(profileState);
useEffect(()=> {
if (localStorage.getItem("42ence-token")) {
setUserInfo({ isLogin: true });
navigate('/main');
}
},[])

return (
<div className={styles.container}>
<Wekey42 className={styles.logo}/>
<a href={loginUrl} className={styles.loginBtn}>로그인</a>
</div>
);
};
return (
<div className={styles.container}>

<Wekey42 className={styles.logo} />
<a href={loginUrl} className={styles.loginBtn}>
로그인

</a>
</div>
);
}

// const url = new URL(window.location.href);
// const href = url.href;
// const accessToken = href.split("token=")[1];
// useEffect(() => {
// if (accessToken) {
// localStorage.setItem("42ence-token", accessToken);
// setUserInfo({isLogin:true});
// console.log(userInfo.isLogin)
// redirect(`${baseUrl}`);
// }
// if (localStorage.getItem("42ence-token")) {
// setUserInfo({isLogin:true});
// console.log(userInfo.isLogin)
// redirect(`${baseUrl}`);
// }
// setUserInfo({isLogin:false});
// if (isLogged) {
// fetch(`${baseUrl}/user/me`, {
// headers: {
// Authorization: `Bearer ${localStorage.getItem("42ence-token")}`,
// },
// })
// .then((res) => res.json())
// .then((data) => setUserInfo(data));
// console.log(userInfo.intraId);
// }
// }, [userInfo.isLogin]);
// useEffect(()=> {
// console.log(userInfo.isLogin)
// },[userInfo.isLogin])
56 changes: 56 additions & 0 deletions src/components/login/LoginCheck.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
import { useEffect, useState } from "react";
import { redirect, useNavigate } from "react-router";
import { useRecoilState } from "recoil";
import { profileState } from "../../utils/recoil/user";

export default function LoginCheck () {
const navigate = useNavigate();
const baseUrl = `${process.env.REACT_APP_END_POINT}`;
const [isLogged, setIsLogged] = useState(false);
const [userInfo, setUserInfo] = useRecoilState(profileState);
const url = new URL(window.location.href);
const href = url.href;
const accessToken = href.split("token=")[1];
useEffect(() => {
if (accessToken) {
localStorage.setItem("42ence-token", accessToken);
setUserInfo({isLogin:true});
console.log(userInfo.isLogin)
navigate('/main');
// redirect(`${baseUrl}`);
}
else if (localStorage.getItem("42ence-token")) {
setUserInfo({isLogin:true});
console.log(userInfo.isLogin)
navigate('/main');
redirect(`${baseUrl}`);
}
else if (isLogged) {
fetch(`${baseUrl}/user/me`, {
headers: {
Authorization: `Bearer ${localStorage.getItem("42ence-token")}`,
},
})
.then((res) => res.json())
.then((data) => setUserInfo(data));
}
else {
setUserInfo({isLogin:false});

}
navigate('/login');
redirect(`/login`);
}, []);
useEffect(()=> {
if (localStorage.getItem("42ence-token"))
{fetch(`${baseUrl}/user/me`, {
headers: {
Authorization: `Bearer ${localStorage.getItem("42ence-token")}`,
},
})
.then((res) => res.json())
.then((data) => setUserInfo(data));
console.log(userInfo.intra_id);
}},[])
return (<div></div>);
}
2 changes: 1 addition & 1 deletion src/components/menu/Menu.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import DehazeIcon from "@mui/icons-material/Dehaze";
import ArrowBackIosNewRoundedIcon from '@mui/icons-material/ArrowBackIosNewRounded';

interface intraId{
intraId:string;
intra_id?:string;
menuName:string;
}

Expand Down
Loading

0 comments on commit 1792a8f

Please sign in to comment.