diff --git a/src/App.tsx b/src/App.tsx index 3d3fa1e..d4849e7 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -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 ? : + // const url = new URL(window.location.href); + // const href = url.href; + // const accessToken = href.split("token=")[1]; return ( - <> - - - :
} /> - {/* } /> */} - } /> - } /> - } /> - } /> - - - + <> + + + } /> + } /> + {/* } /> */} + } /> + } /> + } /> + } /> + + + ); }; diff --git a/src/components/Main.tsx b/src/components/Main.tsx index bf480c3..03ec613 100644 --- a/src/components/Main.tsx +++ b/src/components/Main.tsx @@ -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}>
+ {userInfo.isLogin === false && }
- +
{/* { - fetch(`${baseUrl}/recent_comment`) + fetch(`${baseUrl}/comment/recent`, { + headers: { + Authorization: `Bearer ${localStorage.getItem("42ence-token")}`, + }, + }) .then((res) => res.json()) .then((data) => setRecentCommentList(data)); }, []); @@ -36,15 +42,15 @@ export default function RecentComment() { {recentCommentList.map((data, index) => (
-
{data.subject}
+ {data.subject_name}
{`${data.star_rating}`}
-
{data.comment}
+
{data.content}
- {getTime(data.time)} + {getTime(data.create_time)}
))} diff --git a/src/components/login/IsLogged.tsx b/src/components/login/IsLogged.tsx index 05be09c..35c4517 100644 --- a/src/components/login/IsLogged.tsx +++ b/src/components/login/IsLogged.tsx @@ -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" }, diff --git a/src/components/login/Login.tsx b/src/components/login/Login.tsx index f44508a..befcd6d 100644 --- a/src/components/login/Login.tsx +++ b/src/components/login/Login.tsx @@ -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 ( -
- - 로그인 -
- ); -}; \ No newline at end of file + return ( + + ); +} + +// 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]) diff --git a/src/components/login/LoginCheck.tsx b/src/components/login/LoginCheck.tsx new file mode 100644 index 0000000..c0a8cfc --- /dev/null +++ b/src/components/login/LoginCheck.tsx @@ -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 (
); +} \ No newline at end of file diff --git a/src/components/menu/Menu.tsx b/src/components/menu/Menu.tsx index 85e269e..9ed63f1 100644 --- a/src/components/menu/Menu.tsx +++ b/src/components/menu/Menu.tsx @@ -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; } diff --git a/src/components/modal/CommentEditModal.module.css b/src/components/modal/CommentEditModal.module.css new file mode 100644 index 0000000..e1c38b9 --- /dev/null +++ b/src/components/modal/CommentEditModal.module.css @@ -0,0 +1,307 @@ +.title { + font-family: "Pretendard"; + font-style: normal; + font-weight: 600; + font-size: 18px; + line-height: 21px; + margin-top: 20px; + width: 100%; + color: #222222; + display: flex; + justify-content: right; +} +.titleName { + margin-left: auto; + margin-right: auto; +} + +.closeBtn { +} + +.margin { + margin-bottom: 0.3rem; + font-family: "Pretendard"; + font-style: normal; + font-weight: 600; + font-size: 15px; + line-height: 18px; +} +.divisionLine { + border-bottom: 1.5px solid #eeeeee; + /* margin-top: 0.7rem; */ + margin-bottom: 16px; + margin-left: auto; + margin-right: auto; + width: 95%; +} + +.Q { + font-family: "Reem Kufi Ink"; + font-style: normal; + font-weight: 700; + font-size: 18px; + line-height: 27px; + color: #396ff9; +} + +.boxmargin { + margin-bottom: 1rem; +} +.inlinetext { + display: inline-block; + padding-top: 0.3rem; +} +.flex { + display: flex; + flex-direction: row; +} +.submit { + text-align: center; + width: 100%; + margin-top: 1em; +} + +.subjectTitle { + display: flex; + flex-direction: column; + margin-right: auto; + margin-top: 16px; + margin-bottom: 16px; +} +.circle { + color: #a7a7a7; + font-family: "SF Pro Display"; + font-style: normal; + font-weight: 600; + font-size: 13px; + line-height: 16px; +} +.subjectName { + font-family: "SF Pro Display"; + font-style: normal; + font-weight: 600; + font-size: 22px; + line-height: 26px; +} + +.contentBox { + width: 100%; +} + +.back { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.4); + display: flex; + justify-content: center; + align-items: center; +} + +.front { + width: 100%; + height: 100%; + background-color: white; + display: flex; + flex-direction: column; + /* justify-content: center; */ + align-items: center; + padding: 20px; + overflow-y: auto; +} + +.answerBox { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(30%, auto)); + justify-items: stretch; + align-content: space-between; + gap: 3%; + width: 100%; + margin-bottom: 53px; +} + +.selectAnswer { + background: #f6f9ff; + border: 1px solid #396ff9; + border-radius: 5px; + font-family: "Pretendard"; + font-style: normal; + font-weight: 600; + font-size: 12px; + line-height: 14px; + color: #396ff9; + display: flex; + cursor: pointer; + align-items: center; + justify-content: center; + margin-bottom: 2%; + height: 2.5rem; +} + +.answer { + background: #f9f9f9; + border-radius: 5px; + font-family: "Pretendard"; + font-style: normal; + font-weight: 600; + font-size: 12px; + line-height: 14px; + margin-bottom: 2%; + color: #686868; + display: flex; + cursor: pointer; + align-items: center; + justify-content: center; + height: 2.5rem; + border: none; +} +.submitBtn { + all: unset; + width: 100%; + height: 50px; + text-align: center; + font-family: "Inter"; + font-style: normal; + font-weight: 600; + font-size: 16px; + line-height: 19px; + + color: #ffffff; + background: #396ff9; + border-radius: 10px; +} + +.inputString { + width: 98%; + height: 6rem; + text-align: inherit; +} +.star { + margin-right: 0.25rem; +} + +/* .myform fieldset{ + display: inline-block; 하위 별점 이미지들이 있는 영역만 자리를 차지함. + direction: rtl; 이모지 순서 반전 + border: 0; 필드셋 테두리 제거 +} */ + +/* .myform :hover { + fill: red; +} */ + +.starRate input[type="radio"] { + opacity: 0; + position: absolute; + left: -9999px; +} + +.starRate fieldset { + border: 0; +} + +.starRating { + display: flex; + justify-content: center; + align-items: center; +} + +.limitWord { + width: 96%; + height: 2rem; + text-align: right; + margin-right: 5px; + margin-top: -1.6rem; + font-family: "Pretendard"; + font-style: normal; + font-weight: 500; + font-size: 10px; + line-height: 12px; + color: #C6C6C6; +} + + +.announce{ + font-family: 'Pretendard'; +font-style: normal; +font-weight: 500; +font-size: 10px; +line-height: 12px; +color: #ADADAD; +margin-right: auto; +margin-bottom: 30px; +} +/* .myform input[type=radio]:checked ~ label{ + text-shadow: 0 0 0 #a00; 마우스 클릭 체크 +} */ + +/* .myform label{ + font-size: 3em; 이모지 크기 + color: transparent; 기존 이모지 컬러 제거 + text-shadow: 0 0 0 #f0f0f0; 새 이모지 색상 부여 +} */ +/* .myform :hover{ + text-shadow: 0 0 0 #a00; 마우스 호버 +} */ +/* .myform label:hover ~ label{ + fill: #a7a7a7; + text-shadow: 0 0 0 #a00; 마우스 호버 뒤에오는 이모지들 +} */ + +/* .myform fieldset legend{ + text-align: left; +} */ +/* +export const ModalDimmer = styled.div` + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.4); + display: flex; + justify-content: center; + align-items: center; +`; +export const ModalBody = styled.div` + display: flex; + flex-direction: column; + max-width: 800px; + max-height: 600px; + min-width: 300px; + min-height: 100px; + background-color: #ffffff; + border: 1px solid #cbcbcb; + border-radius: 10px; +`; +export const ModalTitle = styled.div` + padding: 1rem; + font-weight: bold; + font-size: large; + border-bottom: 1px solid #cbcbcb; +`; +export const ModalContents = styled.div` + padding: 1rem; + border-bottom: 1px solid #cbcbcb; +`; +export const ModalFooter = styled.div` + display: flex; + flex-direction: row; +`; +export const ModalButton = styled.button` + background: none; + border: none; + width: 100%; + height: 52px; + font-weight: bold; + :hover { + opacity: 50%; + transition: 0.5s; + } +`; + +export const ModalButtonWithBorder = styled(ModalButton)` + border-right: 1px solid #cbcbcb; +`; */ diff --git a/src/components/modal/CommentEditModal.tsx b/src/components/modal/CommentEditModal.tsx new file mode 100644 index 0000000..25ecbb8 --- /dev/null +++ b/src/components/modal/CommentEditModal.tsx @@ -0,0 +1,346 @@ +import styles from "./CommentInputModal.module.css"; +import { useState, useEffect } from "react"; +import { useRecoilState } from "recoil"; +import ClearIcon from "@mui/icons-material/Clear"; +import { modal, modalState } from "../../utils/recoil/modal"; +import { ReactComponent as EmptyStar } from "../../emptyStar.svg"; + +const baseUrl = `${process.env.REACT_APP_END_POINT}`; + +interface subject { + subject: string; +} + +export default function CommentInputModal() { + const [star_rating, setRating] = useState(0); + const [time_taken, setElapsed] = useState(""); + const [amount_study, setAmountStudy] = useState(""); + const [difficulty, setDiffi] = useState(""); + const [bonus, setBonus] = useState(""); + const [content, setContent] = useState(""); + const [isSubmit, setIsSubmit] = useState(false); + const [isCommentModal, setIsCommentModal] = useRecoilState(modal); + const [rate, setRate] = useState(0); + + const time_taken_data = [ + { id: 0, content: "일주일 이하", value: "a_week" }, + { id: 1, content: "1~2주 이내", value: "tow_week" }, + { id: 2, content: "3~4주 이내", value: "three_week" }, + { id: 3, content: "1개월 이상", value: "a_month" }, + { id: 4, content: "3개월 이상", value: "three_month" }, + ]; + + const difficulty_data = [ + { id: 0, content: "쉬워요", value: "easy" }, + { id: 1, content: "보통이에요", value: "normal" }, + { id: 2, content: "어려워요", value: "hard" }, + ]; + + const amount_study_data = [ + { id: 0, content: "적은 편이에요", value: "low" }, + { id: 1, content: "보통이에요", value: "middle" }, + { id: 2, content: "많은 편이에요", value: "high" }, + ]; + // > + // 안 했어요 + // 하긴 했어요 + // 다 했어요 + + const bonus_data = [ + { id: 0, content: "안 했어요", value: "no" }, + { id: 1, content: "하긴 했어요", value: "little" }, + { id: 2, content: "다 했어요", value: "complete" }, + ]; + + // const history = useHistory(); + // useEffect(() => { + // console.log(content); + // }, [content]); + + useEffect(() => { + if (isSubmit) { + setIsSubmit(false); + } + time_taken && + amount_study && + difficulty && + bonus && + content.length >= 10 && + star_rating && + setIsSubmit(true); + }, [time_taken, amount_study, difficulty, bonus, content, star_rating]); + + useEffect(() => { + document.body.style.overflow = "hidden"; + }, []); + function handleChangeTakeTime(i: number) { + setElapsed(time_taken_data[i].value); + } + + function handleChangeAmountStudy(i: number) { + setAmountStudy(amount_study_data[i].value); + } + + function handleChangeDifficulty(i: number) { + setDiffi(difficulty_data[i].value); + } + + function handleChangeBonus(i: number) { + setBonus(bonus_data[i].value); + } + + const onClickSubmit = () => { + if (isSubmit) { + fetch(`${baseUrl}/comments/`, { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ + intraid: "sooyang", + sbj_name: isCommentModal.commentInput?.subjectName, + star_rating, + time_taken, + difficulty, + amount_study, + bonus, + content, + }), + }).then((res) => { + if (res.ok) { + alert("후기가 작성되었습니다."); + document.body.style.overflow = "unset"; + // history.push("/"); + } + }); + setIsCommentModal({ modalName: null }); + } else { + alert("내용을 확인해주세요"); + } + }; + + function onCancleButton() { + document.body.style.overflow = "unset"; + setIsCommentModal({ modalName: null }); + } + + const StarRating = () => { + const [hovered, setHovered] = useState(false); + return ( +
+
+
+ + + + + + + + + + +
+
+
+ ); + }; + + return ( +
+
+
+
리뷰 작성
+
+ +
+
+
+ + {isCommentModal.commentInput?.circle}Circle + + + {" "} + {isCommentModal.commentInput?.subjectName} + +
+
+
+
+ Q. 과제를 해결하는데 얼마나 + 걸리셨나요? +
+
+ {time_taken_data.map((data, i) => ( + + ))} +
+
+
+
+ Q. 난이도는 어땠나요? +
+
+ {difficulty_data.map((data, i) => ( + + ))} +
+
+
+
+ Q. 과제 해결을 위해 공부한 양은 + 얼마나 되나요? +
+
+ {amount_study_data.map((data, i) => ( + + ))} +
+
+
+
+ Q. 보너스를 해결하셨나요? +
+
+ {bonus_data.map((data, i) => ( + + ))} +
+
+
+
+ Q. 평점과 자세한 후기를 + 남겨주실래요? +
+ + + + +
{content.length} / 1000자
+
+ • 등록한 리뷰는 수정할 수 있어요. +
+ +
+ <> +
+
+ ); +} diff --git a/src/components/myPage/MyPage.tsx b/src/components/myPage/MyPage.tsx index afecbe7..93a8de3 100644 --- a/src/components/myPage/MyPage.tsx +++ b/src/components/myPage/MyPage.tsx @@ -23,7 +23,7 @@ export default function MyComment() { const [unreviewedNumber, setUnreviewedNumber] = useState(0); const { intraId } = useParams(); - const menuName = userState.intraId === intraId ? "마이페이지" : "프로필"; + const menuName = userState.intra_id === intraId ? "마이페이지" : "프로필"; const baseUrl = `${process.env.REACT_APP_END_POINT}`; @@ -82,7 +82,7 @@ export default function MyComment() { return (
- +
{menuName === "마이페이지" && } @@ -96,7 +96,7 @@ export default function MyComment() { : styles.tabBtnNo } > - {userState.intraId === intraId ? "작성 가능한 리뷰" : "완료한 과제"} + {userState.intra_id === intraId ? "작성 가능한 리뷰" : "완료한 과제"}
{/*
diff --git a/src/components/rank/SubjectRankContent.tsx b/src/components/rank/SubjectRankContent.tsx index 63ee45b..fdcf5c3 100644 --- a/src/components/rank/SubjectRankContent.tsx +++ b/src/components/rank/SubjectRankContent.tsx @@ -2,24 +2,32 @@ import styles from "./SubjectRankContent.module.css"; import StarRateIcon from "@mui/icons-material/StarRate"; import { Link } from "react-router-dom"; import { ReactComponent as EmptyStar } from "../../emptyStar.svg"; +import { useEffect } from "react"; + interface SubjectRankType { - subject_name: String; - value: Number | String; + subject_name: string; circle: Number; + star_rating: Number; } interface SubjectRank { - title: String; - subject: SubjectRankType[]; + title: string; + rank: SubjectRankType[]; } + + export default function SubjectRankContent(props: SubjectRank) { + useEffect(()=>{ + console.log(props.rank) + console.log(props.rank) + },[]); return (
- {props.subject?.map((value, i) => ( + {props.rank?.map((value, i) => (
{i + 1}
@@ -37,12 +45,12 @@ export default function SubjectRankContent(props: SubjectRank) { {/* */}
-
{`${value.value}`}
+
{`${value.star_rating.toFixed(1)}`}
- + {/* */}
{params.sbj_name}
diff --git a/src/components/subject_index/SubjectIndex.tsx b/src/components/subject_index/SubjectIndex.tsx index f1b4484..b0ea363 100644 --- a/src/components/subject_index/SubjectIndex.tsx +++ b/src/components/subject_index/SubjectIndex.tsx @@ -5,12 +5,12 @@ import { Link } from "react-router-dom"; const baseUrl = `${process.env.REACT_APP_END_POINT}`; interface SubjectCircle { + info: String; subject_name: String; - subject_info: String; } interface SubjectList { circle: Number; - subject: SubjectCircle[]; + subject_info: SubjectCircle[]; } export default function PdfIndex() { @@ -19,7 +19,11 @@ export default function PdfIndex() { const [selectCircle, setSelectCircle] = useState(0); useEffect(() => { - fetch(`${baseUrl}/subject_list`) + fetch(`${baseUrl}/subject/list`, { + headers: { + Authorization: `Bearer ${localStorage.getItem("42ence-token")}`, + }, + }) .then((res) => res.json()) .then((data) => setSubjectList(data)); }, []); @@ -43,13 +47,13 @@ export default function PdfIndex() { ))}
- {subjectList[selectCircle]?.subject.map((subject, i) => ( + {subjectList[selectCircle]?.subject_info.map((subject, i) => (
{subject.subject_name}
-
{subject.subject_info}
+
{subject.info}
diff --git a/src/components/user/UserProfile.tsx b/src/components/user/UserProfile.tsx index e284ada..8b6ce40 100644 --- a/src/components/user/UserProfile.tsx +++ b/src/components/user/UserProfile.tsx @@ -14,7 +14,7 @@ export default function UserProfile() { const [userInfo, setUserInfo] = useRecoilState(profileState); useEffect(() => { - fetch(`${baseUrl}/user_status`) + fetch(`${baseUrl}/user/status`) .then((res) => res.json()) .then((data) => setUserStatus(data)); }, []); @@ -28,8 +28,8 @@ export default function UserProfile() { return (
-
{`${userInfo?.intraId}님`}
-
{`레벨 ${userInfo.user_level}`}
+
{`${userInfo?.intra_id}님`}
+
{`레벨 ${userInfo.level}`}
{/* */}
diff --git a/src/db/data.json b/src/db/data.json index 354112b..aaed961 100644 --- a/src/db/data.json +++ b/src/db/data.json @@ -154,7 +154,7 @@ "subject": [ { "subject_name": "libft", - "subject_info": "라이브러리를 만들어보자!" + "info": "라이브러리를 만들어보자!" } ] }, diff --git a/src/index.tsx b/src/index.tsx index dd8be11..a1b4bb6 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -6,14 +6,16 @@ import reportWebVitals from "./reportWebVitals"; import Modal from "./components/modal/Modal"; import { RecoilRoot } from "recoil"; -const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement); +const root = ReactDOM.createRoot( + document.getElementById("root") as HTMLElement +); root.render( - - + // + - - + + // ); reportWebVitals(); diff --git a/src/utils/recoil/modal.ts b/src/utils/recoil/modal.ts index 617df54..7fd1719 100644 --- a/src/utils/recoil/modal.ts +++ b/src/utils/recoil/modal.ts @@ -1,8 +1,24 @@ import { atom } from "recoil"; -import {Comment} from "../../components/subject_detail/PrintComment" + type ModalName = null | `CommentInput` | "CommentEdit"; +export interface Comment { + id: number; + like_num: number; + intra_id: string; + circle: number; + user_level: number; + subject_name: string; + content: string; + star_rating: number; + time_taken: string; + isComment: boolean; + difficulty: string; + bonus: string; + amount_study: string; + update_time: string; +} export interface ModalType { isModal: Boolean; title?: ModalName; diff --git a/src/utils/recoil/user.ts b/src/utils/recoil/user.ts index 7ca67c7..4381f1e 100644 --- a/src/utils/recoil/user.ts +++ b/src/utils/recoil/user.ts @@ -1,15 +1,17 @@ import { atom } from 'recoil'; interface userProfile{ - intraId: string; - user_level: number; + isLogin: boolean; + intra_id?: string; + level?: number; } export const profileState = atom({ key: `profileState/`, default: { - intraId: "null", - user_level: 0, + isLogin: false, + intra_id: "null", + level: 0, }, });