Merge pull request #72 from codeit-maso/feature/Yun

✨ feat: 모달 스크롤바 구현 및 반응형 구현

Author: Yun-Jinwoo

src/assets/styles/variables.scss

@@ -47,6 +47,7 @@ $surface: #f6f8ff;
 $font-size-10: 1rem;
 $font-size-12: 1.2rem;
 $font-size-14: 1.4rem;
+$font-size-15: 1.5rem;
 $font-size-16: 1.6rem;
 $font-size-18: 1.8rem;
 $font-size-20: 2rem;

src/components/Card/Card.jsx

@@ -5,6 +5,13 @@ import plus from '../../assets/images/plus.svg';
 import Badge from '../Badge/Badge';
 import styles from './Card.module.scss';
 
+const fontFamilyMap = {
+  'Noto Sans': '"Noto Sans", sans-serif',
+  Pretendard: '"Pretendard", sans-serif',
+  나눔명조: '"Nanum Myeongjo", serif',
+  '나눔손글씨 손편지체': '"Nanum Sonpyeonji Ce", cursive',
+};
+
 export default function Card({
   id,
   image,
@@ -28,15 +35,9 @@ export default function Card({
   function clickDelete(e) {
     e.stopPropagation();
     if (confirm('정말 삭제하시겠어요?')) {
-      onDelete?.(id);
+      onDelete?.(id, recipientId);
     }
   }
-  const fontFamilyMap = {
-    'Noto Sans': '"Noto Sans", sans-serif',
-    Pretendard: '"Pretendard", sans-serif',
-    나눔명조: '"Nanum Myeongjo", serif',
-    '나눔손글씨 손편지체': '"Nanum Sonpyeonji Ce", cursive',
-  };
 
   return (
     <article

src/components/Card/Card.module.scss

@@ -99,3 +99,30 @@
     color: $gray-400;
   }
 }
+
+@media (max-width: 1248px) {
+  .card {
+    width: inherit;
+  }
+}
+
+@media (max-width: 1024px) {
+  .card {
+    height: 284px;
+  }
+}
+
+@media (max-width: 768px) {
+  .card {
+    height: 230px;
+
+    &__body {
+      .card__content {
+        -webkit-line-clamp: 2;
+        line-clamp: 2;
+        word-break: break-word;
+        @include font-15-regular;
+      }
+    }
+  }
+}

src/components/Modal/Modal.jsx

@@ -4,11 +4,19 @@ import Badge from '../Badge/Badge';
 import Button from '../common/Button';
 import styles from './Modal.module.scss';
 
+const fontFamilyMap = {
+  'Noto Sans': '"Noto Sans", sans-serif',
+  Pretendard: '"Pretendard", sans-serif',
+  나눔명조: '"Nanum Myeongjo", serif',
+  '나눔손글씨 손편지체': '"Nanum Sonpyeonji Ce", cursive',
+};
+
 export default function Modal({
   image,
   sender,
   relationship,
   children,
+  font,
   createdAt,
   onClose,
 }) {
@@ -35,7 +43,10 @@ export default function Modal({
         </header>
         <div className={styles['modal__body']}>
           <div className={styles['modal__content']}>
-            <div dangerouslySetInnerHTML={{ __html: sanitizedHTML }} />
+            <div
+              style={{ fontFamily: fontFamilyMap[font] }}
+              dangerouslySetInnerHTML={{ __html: sanitizedHTML }}
+            />
           </div>
         </div>
         <div className={styles['modal__footer']}>

src/components/Modal/Modal.module.scss

@@ -81,8 +81,17 @@
   }
 
   &__body {
-    width: 500px;
     height: 240px;
+    overflow-y: auto;
+  }
+
+  &__body::-webkit-scrollbar {
+    width: 4px;
+  }
+
+  &__body::-webkit-scrollbar-thumb {
+    background-color: $gray-300;
+    border-radius: 4px;
   }
 
   &__content {
@@ -100,3 +109,9 @@
     align-self: center;
   }
 }
+
+@media (max-width: 768px) {
+  .modal {
+    width: calc(100% - 48px);
+  }
+}

src/components/common/Button.module.scss

@@ -1,7 +1,6 @@
 @use '../../assets/styles/variables.scss' as *;
 
 .button {
-  max-width: 720px;
   width: 100%;
   height: 56px;
   padding: 14px 24px;
@@ -52,7 +51,7 @@
   }
 
   &--delete {
-    max-width: 92px;
+    width: inherit;
     height: 39px;
     padding: 7px 16px;
     border-radius: 6px;
@@ -62,15 +61,24 @@
   @media (min-width: 768px) and (max-width: 1023px) {
     &--primary,
     &--delete {
-      max-width: 720px;
+      min-width: 720px;
     }
   }
 
   @media (max-width: 767px) {
     &,
     &--primary,
     &--delete {
-      max-width: 320px;
+      min-width: 320px;
+    }
+  }
+}
+
+@media (max-width: 1024px) {
+  .button {
+    &--delete {
+      width: 100%;
+      height: 55px;
     }
   }
 }

src/components/common/FormInput.module.scss

@@ -69,7 +69,7 @@
 
   @media (max-width: 767px) {
     & {
-      max-width: 320px;
+      min-width: 320px;
     }
   }
 }

src/components/layout/Header/Header.jsx

@@ -1,5 +1,5 @@
-import { Link } from 'react-router-dom';
-import { useLocation } from 'react-router-dom';
+import { Link, useLocation } from 'react-router-dom';
+import { useState, useEffect } from 'react';
 import styles from './Header.module.scss';
 import logo from '../../../assets/images/rolling-logo.svg';
 
@@ -9,6 +9,23 @@ export default function Header() {
   const location = useLocation();
   const isLocation = showButton.includes(location.pathname);
 
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    function handleResize() {
+      setIsMobile(window.innerWidth <= 768);
+    }
+
+    handleResize();
+    window.addEventListener('resize', handleResize);
+
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  if (isMobile && !isLocation) {
+    return null;
+  }
+
   return (
     <>
       <header className={styles.header}>

src/pages/CreateRecipient/CreateRecipient.jsx

@@ -166,13 +166,17 @@ export default function CreateRecipient() {
           </ul>
         )}
       </div>
-      <Button
-        type="button"
-        onClick={handleButtonClick}
-        disabled={!value.trim()}
-      >
-        생성하기
-      </Button>
+
+      <div className={styles['create-page__create-button']}>
+        <Button
+          type="button"
+          onClick={handleButtonClick}
+          disabled={!value.trim()}
+        >
+          생성하기
+        </Button>
+      </div>
+
     </div>
   );
 }

src/pages/CreateRecipient/CreateRecipient.module.scss

@@ -3,7 +3,7 @@
 .create-page {
   display: flex;
   flex-direction: column;
-  margin: 57px auto;
+  margin: 57px auto 0;
   max-width: 720px;
   gap: 50px;
 
@@ -58,7 +58,7 @@
     .create-page__color--green {
       position: relative;
       width: 168px;
-      height: 168px;
+      aspect-ratio: 1 / 1;
       border: 1px solid rgba(0, 0, 0, 0.08);
       border-radius: 16px;
       list-style: none;
@@ -105,7 +105,7 @@
     .create-page__image--4 {
       position: relative;
       width: 168px;
-      height: 168px;
+      aspect-ratio: 1 / 1;
       border-radius: 16px;
       list-style: none;
       overflow: hidden;
@@ -136,3 +136,44 @@
     }
   }
 }
+
+@media (max-width: 1024px) {
+  .create-page {
+    position: relative;
+    min-height: calc(100vh - 57px - 65px);
+    &__create-button {
+      width: 100%;
+      position: absolute;
+      bottom: 24px;
+    }
+  }
+}
+
+// 모바일 (768px 이하)
+@media (max-width: 768px) {
+  .create-page {
+    margin: 50px 20px 0;
+
+    &__input-section {
+      width: 100%;
+    }
+    &__color-list,
+    &__image-list {
+      flex-wrap: wrap;
+      justify-content: center;
+      gap: 12px;
+      padding-bottom: calc(82px + 56px);
+
+      .create-page__color--beige,
+      .create-page__color--purple,
+      .create-page__color--blue,
+      .create-page__color--green,
+      .create-page__image--1,
+      .create-page__image--2,
+      .create-page__image--3,
+      .create-page__image--4 {
+        width: calc((100% - 12px) / 2);
+      }
+    }
+  }
+}