Feat/mobile responsive (#33)

* feat : 메인페이지 skeleton UI 추가 * feat : scroll 관련 기능 편집 * fix : 빌드 오류 수정 * fix : 누락된 scroll handler 추가 * fix : preventScroll 임시 주석처리
wafflestudio21-5 · Feb 1, 2024 · 368d420 · 368d420
1 parent 8ed60ae
commit 368d420
Show file tree

Hide file tree

Showing 38 changed files with 341 additions and 151 deletions.
diff --git a/src/components/CommentCard.module.scss b/src/components/CommentCard.module.scss
@@ -145,7 +145,9 @@
       font-weight: 400;
       color: $pink;
       cursor: pointer;
+      border-radius: 4px;
     }
+
     button:disabled {
       color: rgba(255, 47, 110, 0.5);
       cursor: default;

diff --git a/src/components/CommentPageWriteModal.tsx b/src/components/CommentPageWriteModal.tsx
@@ -8,6 +8,8 @@ import { defaultResponseHandler } from "../apis/custom";
 import { CommentType, ReplyType } from "../type";
 import { updateCommentRequest } from "../apis/comment";
 import autoSave from "../utils/autoSave";
+import usePreventScroll from "../hooks/usePreventScroll";
+import useHandlePopState from "../hooks/useHandlePopState";
 
 export type CommentPageWriteModalStateType =
   | { type: "updateComment"; targetComment: CommentType }
@@ -37,28 +39,28 @@ export default function CommentPageWriteModal({
     modalType === "updateReply"
       ? "edit"
       : modalType === "updateComment"
-        ? "comment"
-        : "reply";
+      ? "comment"
+      : "reply";
   const autoSaveId =
     modalType === "updateReply"
       ? currentModalState.targetReply.id
       : modalType === "updateComment"
-        ? currentModalState.targetComment.movie.movieCD
-        : commentId;
+      ? currentModalState.targetComment.movie.movieCD
+      : commentId;
   const autoSavedText = autoSave.get(myId!, mode, autoSaveId!); //모달은 로그인을 했고, id의 코멘트가 있을 때 뜬다
   const [hasSpoiler, setHasSpoiler] = useState<boolean | null>(
     modalType === "updateComment"
       ? currentModalState.targetComment.has_spoiler
-      : null,
+      : null
   );
   const [contentInput, setContentInput] = useState(
     autoSavedText != null
       ? autoSavedText
       : modalType === "updateReply"
-        ? currentModalState.targetReply.content
-        : modalType === "updateComment"
-          ? currentModalState.targetComment.content
-          : "",
+      ? currentModalState.targetReply.content
+      : modalType === "updateComment"
+      ? currentModalState.targetComment.content
+      : ""
   );
 
   const [doSave, setDoSave] = useState(false);
@@ -71,6 +73,10 @@ export default function CommentPageWriteModal({
     autoSave.set(myId!, mode, autoSaveId!, s); //모달은 로그인을 했고, id의 코멘트가 있을 때 뜬다
   };
 
+  usePreventScroll();
+  useHandlePopState(() => {
+    setCurrentModal(null);
+  });
   return (
     <Modal
       onClose={() => {
@@ -141,7 +147,7 @@ export default function CommentPageWriteModal({
                       postCreateReply(
                         parseInt(commentId),
                         accessToken,
-                        contentInput,
+                        contentInput
                       )
                         .then(defaultResponseHandler)
                         .then((data: ReplyType) => {
@@ -156,7 +162,7 @@ export default function CommentPageWriteModal({
                       putUpdateReply(
                         currentModalState.targetReply.id,
                         accessToken,
-                        contentInput,
+                        contentInput
                       )
                         .then(defaultResponseHandler)
                         .then((data: ReplyType) => {
@@ -175,7 +181,7 @@ export default function CommentPageWriteModal({
                         parseInt(commentId),
                         accessToken,
                         contentInput,
-                        hasSpoiler,
+                        hasSpoiler
                       )
                         .then(defaultResponseHandler)
                         .then(() => {

diff --git a/src/components/CommonAuthModalStyle.module.scss b/src/components/CommonAuthModalStyle.module.scss
@@ -12,14 +12,46 @@
   .signupModalBox,
   .loginModalBox {
     width: 375px;
-
     background-color: white;
     border-radius: 10px;
     display: flex;
     flex-direction: column;
     padding: 35px 0;
     position: relative;
 
+    @media (max-width: 500px) {
+      padding: 0;
+      width: 100vw;
+      height: 100vh;
+      border-radius: 0px;
+      h2 {
+        margin-bottom: 40px;
+      }
+
+      .divisionLine {
+        margin-top: 60px;
+      }
+    }
+
+    .cancelButtonContainer {
+      width: 100%;
+      height: 44px;
+      display: flex;
+      align-items: center;
+      padding: 0 16px;
+      button {
+        cursor: pointer;
+        width: 24px;
+        height: 24px;
+        background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICAgIDxnIGZpbGw9IiNGRjJGNkUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgdHJhbnNmb3JtPSJyb3RhdGUoNDUgMTIgMTIpIj4KICAgICAgICA8cmVjdCB3aWR0aD0iMiIgaGVpZ2h0PSIxOCIgeD0iMTEiIHk9IjMiIHJ4PSIxIi8+CiAgICAgICAgPHJlY3Qgd2lkdGg9IjE4IiBoZWlnaHQ9IjIiIHg9IjMiIHk9IjExIiByeD0iMSIvPgogICAgPC9nPgo8L3N2Zz4K");
+        background-color: inherit;
+        border: none;
+      }
+      @media (min-width: 500px) {
+        display: none;
+      }
+    }
+
     .watchaPediaLogo {
       width: 70%;
       margin: 0 auto;
@@ -86,6 +118,7 @@ form {
 
     input {
       flex-grow: 1;
+
       border: none;
       background-color: inherit;
       font-size: 16px;
@@ -99,6 +132,7 @@ form {
     .inputClearIcon {
       width: 24px;
       height: 24px;
+
       background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICAgIDxwYXRoIGZpbGw9IiNBMEEwQTAiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTEyLjIwOCAxMS40TDkuMzggOC41N2wtLjgwOS44MDkgMi44MjkgMi44MjgtMi44MjkgMi44MjguODA5LjgwOSAyLjgyOC0yLjgyOSAyLjgyOCAyLjgyOS44MDktLjgwOS0yLjgyOS0yLjgyOCAyLjgyOS0yLjgyOC0uODA5LS44MDktMi44MjggMi44Mjl6TTEyIDIwYTggOCAwIDEgMSAwLTE2IDggOCAwIDAgMSAwIDE2eiIvPgo8L3N2Zz4K");
       background-repeat: no-repeat;
       cursor: pointer;
@@ -109,6 +143,9 @@ form {
         height: 24px;
         margin-left: 24px;
         background-repeat: no-repeat;
+        @media (max-width: 500px) {
+          margin-left: 10px;
+        }
       }
       .validIcon {
         background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMSAxKSI+CiAgICAgICAgPGNpcmNsZSBjeD0iMTEiIGN5PSIxMSIgcj0iMTAuNSIgc3Ryb2tlPSIjMEZDM0I5Ii8+CiAgICAgICAgPHBhdGggZmlsbD0iIzBGQzNCOSIgZD0iTTkuMzkgMTIuODM5bDUuNjU2LTUuNjU3YTEgMSAwIDEgMSAxLjQxNCAxLjQxNGwtNi4zNjQgNi4zNjRhLjk5Ny45OTcgMCAwIDEtMS40MTQgMGwtMi44MjgtMi44MjhhMSAxIDAgMSAxIDEuNDE0LTEuNDE0bDIuMTIxIDIuMTJ6Ii8+CiAgICA8L2c+Cjwvc3ZnPgo=");

diff --git a/src/components/Content.module.scss b/src/components/Content.module.scss
@@ -57,10 +57,13 @@
       width: 280px;
       height: 400px;
       margin-bottom: 30px;
-      transition:
-        width 0.3s,
-        height 0.3s;
+      border-radius: 5px;
+      transition: width 0.3s, height 0.3s;
+      transition: transform 0.2s ease-in-out;
 
+      &:hover {
+        transform: scale(1.03);
+      }
       @media (max-width: #{$medium-screen + 100}) {
         width: 200px;
         height: 280px;

diff --git a/src/components/Content.tsx b/src/components/Content.tsx
@@ -292,12 +292,14 @@ function ContentComments({ content }: { content: MovieType }) {
         <h2>
           코멘트 <span className={styles.commentCount}>{commentsLength}+</span>
         </h2>
-        <Link
-          to={`/contents/${content.movieCD}/comments`}
-          className={styles.moreComments}
-        >
-          더보기
-        </Link>
+        {commentsLength !== 0 && (
+          <Link
+            to={`/contents/${content.movieCD}/comments`}
+            className={styles.moreComments}
+          >
+            더보기
+          </Link>
+        )}
       </header>
       <div className={styles.commentGridCon}>
         <ul className={styles.commentsGrid}>

diff --git a/src/components/ContentList.module.scss b/src/components/ContentList.module.scss
@@ -1,5 +1,31 @@
 @import "../utils/common.module.scss";
 
+@keyframes skeleton-gradient {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@mixin skeleton-gradient {
+  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+  background-size: 200% 100%;
+  animation: skeleton-gradient 2s infinite;
+}
+.skeletonBox {
+  @include skeleton-gradient;
+}
+
 .contentListCarousel {
   .contentList {
     max-width: $max-screen;
@@ -60,10 +86,18 @@
               overflow: hidden;
               aspect-ratio: 0.6862;
               background-color: $light-gray;
+
               .poster {
                 width: 100%;
                 height: 100%;
+                opacity: 1;
+                transition: transform 0.3s ease-in-out;
+                animation: fadeIn 0.3s ease-in-out;
+              }
+              .poster:hover {
+                transform: scale(1.04);
               }
+
               .rank {
                 position: absolute;
                 top: 6px;
@@ -73,7 +107,7 @@
                 line-height: 27px;
                 font-size: 16px;
                 background-color: rgba(0, 0, 0, 0.77);
-                color: rgb(255, 255, 255);
+                color: white;
                 letter-spacing: normal;
                 border-radius: 4px;
                 font-weight: 700;
@@ -94,6 +128,13 @@
                 white-space: nowrap;
                 overflow: hidden;
                 text-overflow: ellipsis;
+                position: relative;
+                .skeletonBox {
+                  position: absolute;
+                  width: 55%;
+                  height: 100%;
+                  border-radius: 5px;
+                }
               }
 
               .movieYearCountry {
@@ -102,6 +143,13 @@
                 font-size: 14px;
                 font-weight: 400;
                 line-height: 21px;
+                position: relative;
+                .skeletonBox {
+                  position: absolute;
+                  width: 60%;
+                  height: 100%;
+                  border-radius: 5px;
+                }
               }
 
               .movieRating {
@@ -133,6 +181,13 @@
                 height: 15px;
                 margin-top: 2px;
               }
+              .ratingSkeletonBox {
+                position: relative;
+                top: 3px;
+                width: 40%;
+                height: 15px;
+                border-radius: 5px;
+              }
             }
           }
         }