✨ Feat: 메인 가져와서 List 페이지 디자인 작업

sprint6-part2 · May 8, 2024 · 60ad500 · 60ad500
2 parents 60bedb9 + 45e4cfa
commit 60ad500
Show file tree

Hide file tree

Showing 28 changed files with 647 additions and 99 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
   "dependencies": {
     "axios": "^1.6.8",
     "classnames": "^2.5.1",
+    "framer-motion": "^11.1.8",
     "node-sass": "^9.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

diff --git a/src/components/Carousel/index.jsx b/src/components/Carousel/index.jsx
@@ -1,12 +1,13 @@
 /* eslint-disable react/forbid-prop-types */
-import { useState, Children } from 'react';
+import { useState, Children, useEffect } from 'react';
 import Slider from 'react-slick';
 import 'slick-carousel/slick/slick.css';
 import 'slick-carousel/slick/slick-theme.css';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import styles from './styles.module.scss';
 import Arrow from '@/assets/icons/Arrow';
+import { debounce } from '@/utils/debounce';
 
 const CarouselArrow = ({ onClick, longArrow, hidden }) => {
   const arrowClass = classNames(styles.arrow, {
@@ -29,13 +30,30 @@ const CarouselArrow = ({ onClick, longArrow, hidden }) => {
 const Carousel = ({ children, customSettings, isLongArrow = false }) => {
   const [currentIndex, setCurrentIndex] = useState(0);
   const childCount = Children.count(children);
+  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
 
   const handleSlideChange = (index) => {
     setCurrentIndex(index);
   };
 
+  const handleResize = () => {
+    setWindowWidth(window.innerWidth);
+  };
+
+  useEffect(() => {
+    const debouncedResize = debounce(handleResize, 200);
+    window.addEventListener('resize', debouncedResize);
+    return () => {
+      window.removeEventListener('resize', debouncedResize);
+    };
+  }, []);
+
   const isFirstSlide = currentIndex === 0;
-  const isLastSlide = childCount === currentIndex + customSettings.slidesToShow;
+  const isLastSlide =
+    windowWidth < 1000
+      ? childCount ===
+        currentIndex + customSettings.responsive[0].settings.slidesToShow
+      : childCount === currentIndex + customSettings.slidesToShow;
 
   const settings = {
     prevArrow: <CarouselArrow longArrow={isLongArrow} hidden={isFirstSlide} />,

diff --git a/src/components/Carousel/styles.module.scss b/src/components/Carousel/styles.module.scss
@@ -5,7 +5,7 @@
 
   width: 40px;
   height: 78.33px;
-  margin-inline: 20px;
+  margin-inline: 15px;
   border-radius: 6.67px;
 
   background-color: #1b1b1b;
@@ -37,32 +37,19 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  text-align: center;
 }
 
 :global {
   .slick-list {
-    width: 95%;
+    width: 100%;
   }
   .slick-slide > div {
-    margin: 0 24px;
+    margin: 0 12px;
   }
 
-  @media (max-width: 1200px) {
+  @media (max-width: 1000px) {
     .slick-slide > div {
-      margin: 0 18px;
-    }
-  }
-
-  @media (max-width: 900px) {
-    .slick-slide > div {
-      margin: 0 15px;
-    }
-  }
-
-  @media (max-width: 500px) {
-    .slick-slide > div {
-      margin: 0 12px;
+      margin: 0 8px;
     }
   }
 }
diff --git a/src/components/Modal/components/ModalHeader/index.jsx b/src/components/Modal/components/ModalHeader/index.jsx
@@ -1,8 +1,8 @@
 import React from 'react';
-import ModalCloseButton from '@/assets/icons/ModalCloseButton';
-import style from '@/components/Modal/components/ModalHeader/styles.module.scss';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import style from './styles.module.scss';
+import ModalCloseButton from '@/assets/icons/ModalCloseButton';
 
 /**
  * 모달 헤더 컴포넌트
@@ -24,11 +24,7 @@ const ModalHeader = ({ title, onClose }) => {
 
 ModalHeader.propTypes = {
   title: PropTypes.string,
-  onClose: PropTypes.object.isRequired,
-};
-
-ModalHeader.defaultProps = {
-  title: '모달',
+  onClose: PropTypes.func.isRequired,
 };
 
 export default ModalHeader;
diff --git a/src/components/Modal/components/ModalHeader/styles.module.scss b/src/components/Modal/components/ModalHeader/styles.module.scss
@@ -1,23 +1,13 @@
-$titleColor: #f7f7f8;
-
-@mixin font-color($color, $weight, $size, $lineHeight) {
-  font: {
-    family: Pretendard;
-    weight: $weight;
-    size: $size;
-  }
-  line-height: $lineHeight;
-  color: $color;
-}
+@import '../../../../styles/';
 
 .container {
   display: flex;
   width: 100%;
   justify-content: flex-end;
   > h2 {
-    @include font-color($titleColor, 600, 18px, 21.48px);
+    @include font-base($color-white, 600, 18px, 21.48px);
   }
-  > .headerCloseButton {
+  > .closeButton {
     cursor: pointer;
   }
   &.titleActive {

diff --git a/src/components/Modal/components/ModalMobileHeader/index.jsx b/src/components/Modal/components/ModalMobileHeader/index.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
-import BackButton from '@/assets/icons/BackButton';
-import style from '@/components/Modal/components/ModalMobileHeader/styles.module.scss';
 import PropTypes from 'prop-types';
+import style from './styles.module.scss';
+import BackButton from '@/assets/icons/BackButton';
 
 /**
  * 모달 헤더 컴포넌트 (특정 페이지용)
@@ -18,12 +18,8 @@ const ModalMobileHeader = ({ title, onClose }) => {
 };
 
 ModalMobileHeader.propTypes = {
-  title: PropTypes.string,
-  onClose: PropTypes.object.isRequired,
-};
-
-ModalMobileHeader.defaultProps = {
-  title: '모달',
+  title: PropTypes.string.isRequired,
+  onClose: PropTypes.func.isRequired,
 };
 
 export default ModalMobileHeader;
diff --git a/src/components/Modal/components/ModalMobileHeader/styles.module.scss b/src/components/Modal/components/ModalMobileHeader/styles.module.scss
@@ -1,22 +1,12 @@
-$titleColor: #f7f7f8;
-
-@mixin font-color($color, $weight, $size, $lineHeight) {
-  font: {
-    family: Pretendard;
-    weight: $weight;
-    size: $size;
-  }
-  line-height: $lineHeight;
-  color: $color;
-}
+@import '../../../../styles/';
 
 .container {
   display: flex;
   width: 100%;
   justify-content: space-between;
   flex-direction: row-reverse;
   > h2 {
-    @include font-color($titleColor, 600, 18px, 21.48px);
+    @include font-base($color-white, 600, 18px, 21.48px);
     display: flex;
     flex-grow: 3;
     justify-content: center;

diff --git a/src/components/Modal/index.jsx b/src/components/Modal/index.jsx
@@ -1,6 +1,7 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
 import style from '@/components/Modal/styles.module.scss';
+import { motion, AnimatePresence } from 'framer-motion';
 
 /**
  * 프로필 사진 컴포넌트
@@ -10,13 +11,22 @@ import style from '@/components/Modal/styles.module.scss';
  */
 
 const Modal = ({ isOpen, onClose, children }) => {
-  // isBig은 임시로 둔 변수입니다.
-  // 추후에 크기에 따른 값을 설정할 때, 사용할 예정입니다.
+  const Ref = useRef(null);
+
+  const handleBackDrop = (e) => {
+    return e.target === Ref.current && onClose();
+  };
 
   return (
-    <div>
+    <AnimatePresence>
       {isOpen && (
-        <div className={style.modalBackDrop} onClick={onClose}>
+        <motion.div
+          className={style.modalBackDrop}
+          onClick={onClose}
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+        >
           <div
             className={style.modalView}
             onClick={(e) => {
@@ -25,20 +35,16 @@ const Modal = ({ isOpen, onClose, children }) => {
           >
             {children}
           </div>
-        </div>
+        </motion.div>
       )}
-    </div>
+    </AnimatePresence>
   );
 };
 
 Modal.propTypes = {
-  isOpen: PropTypes.bool,
+  isOpen: PropTypes.bool.isRequired,
   onClose: PropTypes.object.isRequired,
   children: PropTypes.object.isRequired,
 };
 
-Modal.defaultProps = {
-  isOpen: false,
-};
-
 export default Modal;
diff --git a/src/components/Modal/styles.module.scss b/src/components/Modal/styles.module.scss
@@ -1,10 +1,4 @@
-$closeButtonColor: #828282;
-$white: #fff;
-
-@mixin button-color($color) {
-  background-color: transparent;
-  color: $color;
-}
+@import '../../styles/';
 
 .modalBackDrop {
   z-index: 1; //위치지정 요소
@@ -18,6 +12,7 @@ $white: #fff;
   left: 0;
   right: 0;
   bottom: 0;
+  z-index: 999;
 }
 
 .modalView {
@@ -26,7 +21,7 @@ $white: #fff;
   flex-direction: column;
   border-radius: 8px;
   padding: 24px 32px 16px;
-  background-color: #181d26;
+  background-color: $color-black-100;
   // 하기 두 값은 테스트 값이므로 삭제해도 무관
   // width: 96dvw;
   // height: 96dvh;

diff --git a/src/constants/carouselSetting.js b/src/constants/carouselSetting.js
@@ -14,10 +14,17 @@ export const listPageSettings = {
 
   // 반응형
   responsive: [
+    {
+      breakpoint: 1000,
+      settings: {
+        slidesToShow: 3,
+        slidesToScroll: 1.5,
+      },
+    },
     {
       breakpoint: TABLET_WIDTH,
       settings: {
-        slidesToShow: 2.3,
+        slidesToShow: 2.2,
         slidesToScroll: 1,
         arrows: false,
         autoplay: false,

diff --git a/src/pages/ListPage/Credit/index.jsx b/src/pages/ListPage/Credit/index.jsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import styles from './styles.module.scss';
+import CreditIcon from '@/assets/icons/Credit';
+
+const Credit = () => {
+  return (
+    <section className={styles.container}>
+      <div className={styles.credit}>
+        <span>내 크래딧</span>
+        <div className={styles.creditInfo}>
+          <CreditIcon />
+          <span>36,000</span>
+        </div>
+      </div>
+      <div>
+        <button className={styles.charge}>충전하기</button>
+      </div>
+    </section>
+  );
+};
+
+export default Credit;