diff --git a/index.html b/index.html index 63013d5..86512d5 100644 --- a/index.html +++ b/index.html @@ -18,7 +18,7 @@ - 왓챠피디아 - 영화, 책, TV 프로그램 추천 및 평가 서비스 + 와플피디아 - 영화 평가 서비스
diff --git a/src/apis/content.ts b/src/apis/content.ts index 25192df..ffd43d8 100644 --- a/src/apis/content.ts +++ b/src/apis/content.ts @@ -8,12 +8,21 @@ export async function getContentListRequest( order: string, accessToken?: string, ) { - if (!accessToken) return fetch(`${BASE_API_URL}/contents?order=${order}`); + const headers: HeadersInit = accessToken + ? { + Authorization: "Bearer " + accessToken, + } + : {}; + + if (order === "box-office") + return fetch(`${BASE_API_URL}/contentTest/movies/boxoffice/update/`, { + method: "GET", + headers: headers, + }); + return fetch(`${BASE_API_URL}/contents?order=${order}`, { method: "GET", - headers: { - Authorization: "Bearer " + accessToken, - }, + headers: headers, }); } diff --git a/src/apis/user.ts b/src/apis/user.ts index 2fa9ba1..581e4b7 100644 --- a/src/apis/user.ts +++ b/src/apis/user.ts @@ -100,3 +100,15 @@ export async function putUpdateWatchingState( }), }); } + +export async function deleteWatchingState( + state_id: number, + accessToken: string +) { + return fetch(`${BASE_API_URL}/contents/states/${state_id}`, { + method: "DELETE", + headers: { + Authorization: `Bearer ${accessToken}`, + }, + }); +} diff --git a/src/components/CommentCard.tsx b/src/components/CommentCard.tsx index 43e4907..1428ad9 100644 --- a/src/components/CommentCard.tsx +++ b/src/components/CommentCard.tsx @@ -23,7 +23,7 @@ export default function CommentCard({ comment }: { comment: CommentType }) { > - {comment.rating.rate} + {comment.rating.rate.toFixed(1)} )} diff --git a/src/components/CommonAuthModalStyle.module.scss b/src/components/CommonAuthModalStyle.module.scss index 60e058a..678cb80 100644 --- a/src/components/CommonAuthModalStyle.module.scss +++ b/src/components/CommonAuthModalStyle.module.scss @@ -9,14 +9,15 @@ justify-content: center; align-items: center; - .modalBox { + .signupModalBox, + .loginModalBox { width: 375px; - height: 580px; + background-color: white; border-radius: 10px; display: flex; flex-direction: column; - padding-top: 35px; + padding: 35px 0; position: relative; .watchaPediaLogo { @@ -24,6 +25,7 @@ margin: 0 auto; transform: scale(0.7); } + h2 { font-size: 17px; text-align: center; diff --git a/src/components/Content.module.scss b/src/components/Content.module.scss index 1500fd9..8cbd43b 100644 --- a/src/components/Content.module.scss +++ b/src/components/Content.module.scss @@ -57,9 +57,7 @@ width: 280px; height: 400px; margin-bottom: 30px; - transition: - width 0.3s, - height 0.3s; + transition: width 0.3s, height 0.3s; @media (max-width: #{$medium-screen + 100}) { width: 200px; @@ -233,7 +231,6 @@ align-items: center; width: 100%; height: 100%; - cursor: pointer; img { width: 56px; diff --git a/src/components/Content.tsx b/src/components/Content.tsx index 6d954f2..ab2cee0 100644 --- a/src/components/Content.tsx +++ b/src/components/Content.tsx @@ -5,12 +5,7 @@ import profileDefault from "../assets/user_default.jpg"; import StarRating from "./StarRating"; import CommentCard from "./CommentCard"; -import { - CommentsResType, - CommentType, - MovieType, - MyStateResType, -} from "../type"; +import { CommentsResType, CommentType, MovieType } from "../type"; import { MyStateType } from "../type"; import { Link } from "react-router-dom"; @@ -19,7 +14,11 @@ import { getCommentListRequest } from "../apis/comment"; import MyCommentBox from "./MyCommentBox"; import WritingModal from "./WritingModal"; import { useAuthContext } from "../contexts/authContext"; -import { postCreateWatchingState, putUpdateWatchingState } from "../apis/user"; +import { + deleteWatchingState, + postCreateWatchingState, + putUpdateWatchingState, +} from "../apis/user"; function ContentHeader({ content }: { content: MovieType }) { const backGroundStyle = { @@ -53,37 +52,47 @@ function ContentHeader({ content }: { content: MovieType }) { function ContentPanel({ content, setContent, + + refetchContent, }: { content: MovieType; setContent: (content: MovieType) => void; + refetchContent: () => void; + }) { const [currentModal, setCurrentModal] = useState< "updateComment" | "createComment" | null >(null); - const [myRate, setMyRate] = useState(content.my_rate); + + const [myRate, setMyRate] = useState(content.my_rate ?? null); const { accessToken } = useAuthContext(); - const [myState, setMyState] = useState( - content.my_state ?? null, - ); + const myState = content.my_state ?? null; + + const setMyStateHandler = (targetState: MyStateType) => { if (!accessToken) return; - if (content.my_state === null && targetState !== null) + if (!targetState) + return ( + content.my_state && + deleteWatchingState(content.my_state.id, accessToken).then(() => { + refetchContent(); + }) + ); + + if (content.my_state === null) return postCreateWatchingState(content.movieCD, accessToken, targetState) .then(defaultResponseHandler) - .then((myState) => { - setMyState(myState); + .then(() => { + refetchContent(); }); - return ( - content.my_state && - putUpdateWatchingState(content.my_state.id, accessToken, targetState) - .then(defaultResponseHandler) - .then((myState) => { - setMyState(myState); - }) - ); + return putUpdateWatchingState(content.my_state.id, accessToken, targetState) + .then(defaultResponseHandler) + .then(() => { + refetchContent(); + }); }; const rateStr = [ "평가하기", @@ -104,7 +113,7 @@ function ContentPanel({
영화 포스터 -
평점 그래프
+ {/*
평점 그래프
*/}