diff --git a/css/common.css b/css/common.css index d469380..fc2c7b2 100644 --- a/css/common.css +++ b/css/common.css @@ -1,3 +1,12 @@ body { background-color: #1b1b1b; +} + +.blind { + position: absolute !important; + height: 1px; + width: 1px; + overflow: hidden; + clip: rect(1px 1px 1px 1px); + clip: rect(1px, 1px, 1px, 1px); } \ No newline at end of file diff --git a/css/review.css b/css/review.css index a97b5bb..d9dad33 100644 --- a/css/review.css +++ b/css/review.css @@ -1,4 +1,4 @@ -.review-wrap { +#reviewContainer { --title-color0: #ffffff; --title-color1: #dee1e9; --title-color2: #84868d; @@ -11,6 +11,8 @@ font-size: 15px; gap: 16px; margin-bottom: 30px; + position: relative; + z-index: 0; } #reviews .name { @@ -90,7 +92,7 @@ outline: none; } -.review-wrap { +#reviewContainer { max-width: 1240px; margin: 0 auto; padding: 3%; @@ -159,22 +161,136 @@ flex-shrink: 0; } -#writeReviewForm .text-input { - height: 38px; - background: none; - border: none; - color: var(--title-color1); +#reviewList .empty-review { + color: var(--title-color2); + padding: 0 0 80px; font-size: 15px; + line-height: 1.6; + text-align: center; +} + +.comment-util { + position: absolute; + top: 6px; + right: 0; + display: flex; + gap: 5px; + font-size: 12px; + z-index: 1; +} + +#reviews li { + position: relative; +} + +.comment-util li + li:before { + position: absolute; + top: 4px; + left: -3px; + content: ""; + width: 1px; + height: 10px; + background-color: #2f2f2f; +} + +.comment-util button { + color: inherit; + font-size: inherit; + padding: 2px 4px; +} + +#reviewContainer #popup { + position: fixed; + top: 0; + left: 0; + z-index: 100; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 50%); + display: flex; + align-items: center; + justify-content: center; +} + +#reviewContainer #modalForm { + background: var(--title-color0); + border-radius: 12px; + padding: 36px 22px 30px; + width: 350px; + position: relative; +} + +#reviewContainer #popup strong { + display: block; + margin-bottom: 20px; + font-size: 17px; + font-weight: 700; +} + +#reviewContainer #popup .modal-button { + background: #000000; + width: 100%; + color: var(--title-color0); + height: 46px; + font-size: 15px; + border-radius: 4px; + margin-top: 10px; + display: block; + font-weight: 500; +} + +button.close-button { + width: 35px; + height: 35px; + background: #eeeeee; + border-radius: 50%; + position: absolute; + top: 12px; + right: 12px; + cursor: pointer; +} + +button.close-button:before { + width: 14px; + height: 2px; + background: #555555; + border-radius: 2px; + position: absolute; + content: ''; + top: 50%; + margin-top: -1px; + margin-left: -7px; + transform: rotate(45deg); +} + +button.close-button:after { + width: 14px; + height: 2px; + background: #555555; + border-radius: 2px; + position: absolute; + content: ''; + top: 50%; + margin-top: -1px; + margin-left: -7px; + transform: rotate(-45deg); +} + + +.text-input { + height: 45px; + background: none; + color: #000000; border-radius: 4px; padding: 10px; flex-grow: 2; outline: none; + width: 100%; + border: 1px solid var(--title-color1); + font-size: 15px; } -#reviewContainer .empty-review { - color: var(--title-color2); - padding: 0 0 80px; - font-size: 15px; - line-height: 1.6; - text-align: center; +.text-input:not(:placeholder-shown) { + font: small-caption; + font-size: 34px; } \ No newline at end of file diff --git a/img/detail/star-fill.svg b/img/detail/star-fill.svg index 581deb8..3e6d5f4 100644 --- a/img/detail/star-fill.svg +++ b/img/detail/star-fill.svg @@ -1,3 +1,3 @@ -삭제하시겠어요? + + + + + `; + return modal; +}; + +export default useDeleteModal; \ No newline at end of file diff --git a/js/review/reviewForm/addReviewToLocalStorage.js b/js/review/reviewForm/utils.js similarity index 59% rename from js/review/reviewForm/addReviewToLocalStorage.js rename to js/review/reviewForm/utils.js index 003ab70..4a09b1d 100644 --- a/js/review/reviewForm/addReviewToLocalStorage.js +++ b/js/review/reviewForm/utils.js @@ -5,7 +5,7 @@ import { setDetailComments } from "../utils.js"; -const addReviewToLocalStorage = (values) => { +export const addReviewToLocalStorage = (values) => { const movieId = getMovieIdFromURL(); let comments = getDetailComments(); const {index, isExistingComments} = getExistingDetailComments({comments, movieId}); @@ -17,7 +17,6 @@ const addReviewToLocalStorage = (values) => { } setDetailComments(comments); - window.alert('작성이 완료되었어요'); }; const addNewComment = ({comments, movieId, values}) => [...comments, { movieId, results: [values] }]; @@ -28,4 +27,14 @@ const addCommentToExisting = ({comments, index, values}) => { return updatedComments; }; -export default addReviewToLocalStorage; \ No newline at end of file +const deleteReview = ({reviews, deleteIndex}) => reviews.filter((_, i) => i !== deleteIndex); + +export const deleteReviewToLocalStorage = (deleteIndex) => { + const movieId = getMovieIdFromURL(); + let comments = getDetailComments(); + const {index: currentMovieIndex} = getExistingDetailComments({comments, movieId}); + + comments[currentMovieIndex].results = deleteReview({reviews: comments[currentMovieIndex].results, deleteIndex}); + + setDetailComments(comments); +} \ No newline at end of file diff --git a/js/review/reviewForm/reviewFormSubmitHandler.js b/js/review/reviewForm/writeReviewHandler.js similarity index 65% rename from js/review/reviewForm/reviewFormSubmitHandler.js rename to js/review/reviewForm/writeReviewHandler.js index 507f479..0f854d0 100644 --- a/js/review/reviewForm/reviewFormSubmitHandler.js +++ b/js/review/reviewForm/writeReviewHandler.js @@ -1,8 +1,8 @@ -import addReviewToLocalStorage from "./addReviewToLocalStorage.js"; -import isValidReviewValues from "./isValidReviewValues.js"; -import {getUserInformation} from "../utils.js"; +import {addReviewToLocalStorage} from "./utils.js"; +import {isValidReviewValues} from "./isValidReviewValues.js"; +import {getUserInformation, notifyAndReload} from "../utils.js"; -const reviewFormSubmitHandler = () => { +const writeReviewHandler = () => { const form = document.querySelector('#writeReviewForm'); form.addEventListener('submit', function (e) { @@ -24,9 +24,8 @@ const reviewFormSubmitHandler = () => { if (!isValid) return; addReviewToLocalStorage(values); - - window.location.reload(); + notifyAndReload('작성이 완료되었어요'); }); }; -export default reviewFormSubmitHandler; \ No newline at end of file +export default writeReviewHandler; \ No newline at end of file diff --git a/js/review/reviewList/renderMovieReviews.js b/js/review/reviewList/renderMovieReviews.js index 91271db..ad7f61c 100644 --- a/js/review/reviewList/renderMovieReviews.js +++ b/js/review/reviewList/renderMovieReviews.js @@ -1,5 +1,8 @@ -const renderMovieReviews = (reviews = []) => { - const $wrap = document.querySelector('#reviewContainer'); +import getMovieReviews from "./getMovieReviews.js"; + +const renderMovieReviews = () => { + const reviews = getMovieReviews(); + const $wrap = document.querySelector('#reviewList'); if (reviews.length === 0) { $wrap.innerHTML = `
이 영화에 대한 감상평이 없어요
지금 작성하시면, 첫번째로 남기실 수 있어요 😆
`; @@ -8,14 +11,14 @@ const renderMovieReviews = (reviews = []) => { let html = ''; - reviews.forEach((result) => { - html += getReviewHtml(result); + reviews.forEach((result, index) => { + html += getReviewHtml(result, index); }); $wrap.innerHTML = ``; } -const getReviewHtml = (result) => { +const getReviewHtml = (result, index) => { return `
  • @@ -27,6 +30,10 @@ const getReviewHtml = (result) => {

    ${result.comment}

    +
    • `; diff --git a/js/review/utils.js b/js/review/utils.js index 5637dac..a3017dd 100644 --- a/js/review/utils.js +++ b/js/review/utils.js @@ -3,7 +3,7 @@ import {getLocalStorage, setLocalStorage} from "../utils/localStorage.js"; const LOCALSTORAGE_COMMENTS = 'comments'; const LOCALSTORAGE_USER_INFO = 'user-information'; -const TEST_VALUE = '123'; +const TEST_VALUE = '1234'; console.log('@@ TODO: 테스트 값 꼭 삭제하기'); export const getMovieIdFromURL = () => getUrlParamValue('movie_id') || TEST_VALUE; @@ -26,4 +26,9 @@ export const getUser = () => JSON.parse(getLocalStorage(LOCALSTORAGE_USER_INFO) export const getUserInformation = () => { const { username, password, imageUrl } = getUser(); return { username, password, imageUrl } -} \ No newline at end of file +} + +export const notifyAndReload = (message) => { + window.alert(message); + window.location.reload(); +}; \ No newline at end of file diff --git a/review.html b/review.html index 4b06dde..6035ea4 100644 --- a/review.html +++ b/review.html @@ -14,9 +14,9 @@ -
    +

    감상평

    -
    +

    평가하기

    @@ -44,6 +44,6 @@

    평가하기

    평가하기 -
    +
    \ No newline at end of file