Merge pull request #44 from New-Syatte/ParkChoulMin/css

Park choul min/css
New-Syatte · Jun 18, 2024 · bf894fa · bf894fa
2 parents 099dd38 + 149d252
commit bf894fa
Show file tree

Hide file tree

Showing 13 changed files with 1,002 additions and 423 deletions.
diff --git a/src/app/(brand)/modern-masters/page.tsx b/src/app/(brand)/modern-masters/page.tsx
@@ -9,7 +9,6 @@ import SubTitleBox from "@/components/subTitleBox/SubTitleBox";
 import BrandSlider from "@/components/brandSlider/BrandSlider";
 import StoreSlider from "@/components/storeSlider/StoreSlider";
 import { getProducts } from "@/services/sanity/products";
-import { useState } from "react";
 
 const TITLE_BANNER_TEXT = `Modern Masters는 고급 특수 페인트를 제조하는 세계 최고의 회사입니다. 제품은 미국을 비롯한 다양한 국가의 4,000개 이상의 소매점에서 판매며, 회사의 제품 라인에는 건축가, 디자이너, 계약자, 그리고 장식 화가를 위해 특별히 제작된 다양한 제품이 포함되어 있습니다. Metallic Paint Collection, Metal Effects, 건축 텍스처, 테마 페인트, 블랙라이트 페인트, 유약, 광택제, 그리고 Crackles 등이 그 중에 속합니다. Modern Masters의 제품은 전 세계적으로 유명한 장소에서 사용되고 있습니다.`;
 const MODERN_MASTERS_INFO_TEXT_1 = `Modern Masters는 1960년대 초에 캘리포니아의 San Fernando Valley에서 시작된 회사로, 처음에는 Custom Paint & Chemical로 알려져 있었습니다. 주로 가구, 장식용 액세서리, 주거용 조명, 그리고 벽 장식용 코팅 제품을 생산했습니다. 회사는 최고 품질의 코팅을 제공하고 "지불한 만큼 얻는다"는 모토를 따르며 성장했습니다.`;
@@ -19,9 +18,7 @@ const MODERN_MASTERS_SERIES_TEXT = `모던마스터즈는 Colorfast, Decorative
 const MODERN_MASTERS_ARTWORK_TEXT = `모던마스터즈 페인트로 창조된 다채로운 작품들을 확인하세요. 고유한 텍스처와 색상으로 표현된 예술적인 아트워크를 확인할 수 있습니다.`;
 
 const Modernmasters = async () => {
-  const [activeBrandIndex, setActiveBrandIndex] = useState(0);
   const paintList = [];
-
   const products = await getProducts();
 
   const categorys = [
@@ -42,15 +39,6 @@ const Modernmasters = async () => {
     });
   }
 
-  const brandList = [];
-
-  for (let i = 1; i <= 5; ++i) {
-    brandList.push({
-      id: `brand${i}`,
-      img: `brand/modernmasters-img/modernmasters-brand_${i}.png`,
-    });
-  }
-
   return (
     <>
       {/* 최상단 배너 영역 */}
@@ -149,22 +137,8 @@ const Modernmasters = async () => {
         <div className="flex w-[860px] mt-[47px] mb-[64px] text-center mx-auto sm:w-full sm:text-[14px] sm:px-[35px]">
           {MODERN_MASTERS_SERIES_TEXT}
         </div>
-        <div className="flex justify-center gap-3 sm:gap-1 sm:px-[35px]">
-          {brandList.map((data, index) => (
-            <>
-              <div
-                className="flex w-[190px] border-[#000000] border-[1px]"
-                onClick={() => {
-                  setActiveBrandIndex(index);
-                }}
-              >
-                <img src={data.img} alt={`브랜드${index + 1}`} />
-              </div>
-            </>
-          ))}
-        </div>
-        <div className="flex justify-center mt-10 sm:mx-[35px]">
-          <BrandSlider activeBrandIndex={activeBrandIndex} />
+        <div className="flex justify-center sm:mx-[35px]">
+          <BrandSlider />
         </div>
       </div>
       {/* 아티스트 작품 */}

diff --git a/src/app/(education)/education/ApplicatorCard.tsx b/src/app/(education)/education/ApplicatorCard.tsx
@@ -4,7 +4,7 @@ import Image from "next/image";
 const ApplicatorCard = () => {
   return (
     <div className={"sm:w-32 w-56 flex flex-col justify-center items-center"}>
-      <div className={"sm:w-32 sm:h-28 w-56 h-48 relative mb-6"}>
+      <div className={"sm:w-32 sm:h-28 w-56 h-48 relative mb-3"}>
         <Image
           src={topbanner1}
           alt={"topbanner-01"}
@@ -15,7 +15,7 @@ const ApplicatorCard = () => {
       <div>
         <span
           className={
-            "text-black sm:text-[10px] text-md font-normal font-helvetica sm:leading-normal leading-[27px]"
+            "flex text-black sm:text-[10px] font-normal font-helvetica sm:mb-3"
           }
         >
           샤뜨 페인팅 세미나를 진행합니다. 메탈릭페인트 워크샵 등..

diff --git a/src/app/(education)/education/EduDesignCard.tsx b/src/app/(education)/education/EduDesignCard.tsx
@@ -1,6 +1,7 @@
 import aplicatior from "@/assets/education/aplicator.png";
 import master from "@/assets/education/master.png";
 import oneday from "@/assets/education/oneday.png";
+import Motion from "@/components/motion/Motion";
 
 import Image, { StaticImageData } from "next/image";
 
@@ -42,41 +43,53 @@ const EduDesignCard = ({ type }: EduDesignCardProps) => {
       break;
   }
 
+  const rightNumber = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        delay: 0.3,
+      },
+    },
+  };
+
   const { image, title, description, indexNumber } = src;
   return (
     <div className="flex flex-col">
-      <div className="sm:hidden flex h-44 items-end justify-end">
-        <span className="text-[120px] text-primaryBlue opacity-20 h-40">
-          {indexNumber}
-        </span>
-      </div>
-      <div className="flex flex-col w-[296px] sm:w-[150px] sm:h-[250px] h-[453px] shadow-2xl sm:shadow-none rounded-3xl bg-bgGray items-center justify-center sm:p-3 p-5 border border-tableBorderGray">
-        <div className="relative w-[257px] sm:w-[130px] h-[279px] sm:h-auto">
-          <Image
-            src={image}
-            sizes="100vw"
-            style={{ width: "100%", height: "auto" }}
-            alt={type}
-            className={"rounded-3xl"}
-          />
-        </div>
-        <div className={"flex flex-col items-center rounded-b-3xl z-10"}>
-          <span
-            className={
-              "sm:mt-4 mt-8 sm:text-base text-[32px] font-bold text-black font-GmarketSans"
-            }
-          >
-            {title}
-          </span>
-          <span
-            className={
-              "text-center sm:text-xs text-sm font-medium text-black w-[228px] sm:w-auto"
-            }
-          >
-            {description}
+      <Motion initial="hidden" whileInView="visible" variants={rightNumber}>
+        <div className="sm:hidden flex h-44 items-end justify-end">
+          <span className="text-[120px] text-primaryBlue opacity-20 h-40">
+            {indexNumber}
           </span>
         </div>
-      </div>
+      </Motion>
+        <div className="flex flex-col w-[296px] sm:w-[150px] sm:h-[250px] h-[453px] shadow-2xl sm:shadow-none rounded-3xl bg-bgGray items-center justify-center sm:p-3 p-5 border border-tableBorderGray">
+          <div className="relative w-[257px] sm:w-[130px] h-[279px] sm:h-auto">
+            <Image
+              src={image}
+              sizes="100vw"
+              style={{ width: "100%", height: "auto" }}
+              alt={type}
+              className={"rounded-3xl sm:rounded-2xl"}
+            />
+          </div>
+          <div className={"flex flex-col items-center rounded-b-3xl z-10"}>
+            <span
+              className={
+                "sm:mt-4 mt-8 sm:text-base text-[32px] font-bold text-black font-GmarketSans"
+              }
+            >
+              {title}
+            </span>
+            <span
+              className={
+                "text-center sm:text-xs text-sm font-medium text-black w-[228px] sm:w-auto"
+              }
+            >
+              {description}
+            </span>
+          </div>
+        </div>
     </div>
   );
 };

diff --git a/src/app/(education)/education/TopBanner.tsx b/src/app/(education)/education/TopBanner.tsx
@@ -1,34 +1,124 @@
+import Motion from "@/components/motion/Motion";
 import EduDesignCard from "./EduDesignCard";
 
 export default function TopBanner() {
+  const Number1 = {
+    hidden: { opacity: 0, y: 50 },
+    visible: {
+      y: 0,
+      opacity: 1,
+      transition: {
+        delay: 0.2,
+      },
+    },
+  };
+  const Number2 = {
+    hidden: { opacity: 0, y: 50 },
+    visible: {
+      y: 0,
+      opacity: 1,
+      transition: {
+        delay: 0.4,
+      },
+    },
+  };
+  const Number3 = {
+    hidden: { opacity: 0, y: 50 },
+    visible: {
+      y: 0,
+      opacity: 1,
+      transition: {
+        delay: 0.6,
+      },
+    },
+  };
+
+  const motionTop = {
+    hidden: { opacity: 0, y: 50 },
+    visible: {
+      y: 0,
+      opacity: 1,
+      transition: {
+        delay: 0.3,
+      },
+    },
+  };
+
+  const motionCenter = {
+    hidden: { opacity: 0, y: 50 },
+    visible: {
+      y: 0,
+      opacity: 1,
+      transition: {
+        delay: 0.5,
+      },
+    },
+  };
+
+  const motionBottom = {
+    hidden: { opacity: 0, y: 50 },
+    visible: {
+      y: 0,
+      opacity: 1,
+      transition: {
+        delay: 0.7,
+      },
+    },
+  };
+
+  const motionOperate = {
+    hidden: { opacity: 0, y: 50 },
+    visible: {
+      y: 0,
+      opacity: 1,
+      transition: {
+        delay: 0.9,
+      },
+    },
+  };
+
   return (
     <section className="flex justify-center items-center">
-      <div className="flex sm:flex-col justify-evenly items-center w-full sm:w-[84%] mb-24 p-36 sm:p-0 flex-wrap sm:flex-nowrap gap-11">
-        <div className={"w-[529px] sm:w-full mt-[93px] flex-shrink-0"}>
+      <div className="flex sm:flex-col justify-evenly items-center w-full sm:w-[84%] mb-24 px-36 pb-36 pt-20 sm:p-0 flex-wrap sm:flex-nowrap gap-11">
+        <div className={"w-[33.0625rem] sm:w-full mt-[0px] sm:mt-[80px] flex-shrink-0"}>
           <div className="sm:text-center text-left">
-            <p
-              className={
-                "sm:text-base text-xl font-garamond tracking-widest text-black"
-              }
+            <Motion initial="hidden" whileInView="visible" variants={motionTop}>
+              <p
+                className={
+                  "sm:text-base text-xl font-garamond tracking-widest text-black"
+                }
+              >
+                EDUCATION
+              </p>
+            </Motion>
+            <Motion
+              initial="hidden"
+              whileInView="visible"
+              variants={motionCenter}
             >
-              EDUCATION
-            </p>
-            <p
-              className={
-                "mt-[14px] sm:text-3xl text-6xl font-black text-black font-NotoSansKR"
-              }
-            >
-              교육소개
-            </p>
-          </div>
-          <div className="mt-[30px] mb-14 text-[#5b5b5b] sm:text-sm text-lg font-light sm:font-normal leading-[30px] sm:leading-normal">
-            <p>
-              창의적이고 특수한 기술을 활용하여 미술 작품이나 프로젝트를
-              창조하고자 하는 이들을 위한 훌륭한 기회를 제공합니다. 다양한
-              기법과 재료를 활용하여 특수한 효과와 아름다움을 창출하는 데 필요한
-              기술을 습득하고, 창의적인 작업을 펼칠 수 있습니다.
-            </p>
+              <p
+                className={
+                  "mt-[.875rem] sm:text-3xl text-6xl font-black text-black font-NotoSansKR"
+                }
+              >
+                교육소개
+              </p>
+            </Motion>
           </div>
+          <Motion
+            initial="hidden"
+            whileInView="visible"
+            variants={motionBottom}
+          >
+            <div className="mt-[1.875rem] mb-14 text-[#5b5b5b] sm:text-sm text-lg font-light sm:font-normal leading-[1.875rem] sm:leading-normal">
+              <p>
+                창의적이고 특수한 기술을 활용하여 미술 작품이나 프로젝트를
+                창조하고자 하는 이들을 위한 훌륭한 기회를 제공합니다. 다양한
+                기법과 재료를 활용하여 특수한 효과와 아름다움을 창출하는 데
+                필요한 기술을 습득하고, 창의적인 작업을 펼칠 수 있습니다.
+              </p>
+            </div>
+          </Motion>
           <div
             className={
               "sm:flex hidden justify-start items-center flex-wrap gap-3"
@@ -38,33 +128,51 @@ export default function TopBanner() {
             <EduDesignCard type="master" />
             <EduDesignCard type="oneday" />
           </div>
-          <div className={"flex flex-col flex-wrap w-[529px] sm:w-full gap-4"}>
-            <span
-              className={
-                "mt-6 w-[320px] sm:w-auto text-black text-[34px] sm:text-xl font-bold"
-              }
-            >
-              3개 클래스 운영
-            </span>
-            <span
+          <Motion
+            initial="hidden"
+            whileInView="visible"
+            variants={motionOperate}
+          >
+            <div
               className={
-                "sm:text-sm text-lg text-[#5b5b5b] font-light sm:font-normal sm:leading-normal leading-[30px]"
+                "flex flex-col flex-wrap w-[33.0625rem] sm:w-full gap-4"
               }
             >
-              샤뜨는 다양한 교육과정을 제공하여 학습자들이 전문 기술을 습득하고
-              성장할 수 있도록 지원하고 있습니다. 그 중에서도 주목받는
-              교육과정으로는 Aplicatior, Master, One Day 프로그램이 있습니다.
-            </span>
-          </div>
+              <span
+                className={
+                  "mt-6 w-[20rem] sm:w-auto text-black text-[2.125rem] sm:text-xl font-bold"
+                }
+              >
+                운영
+              </span>
+
+              <span
+                className={
+                  "sm:text-sm text-lg text-[#5b5b5b] font-light sm:font-normal sm:leading-normal leading-[1.875rem]"
+                }
+              >
+                샤뜨는 다양한 교육과정을 제공하여 학습자들이 전문 기술을
+                습득하고 성장할 수 있도록 지원하고 있습니다. 그 중에서도
+                주목받는 교육과정으로는 Aplicatior, Master, One Day 프로그램이
+                있습니다.
+              </span>
+            </div>
+          </Motion>
         </div>
         <div
           className={
             "sm:hidden flex space-x-9 sm:space-x-0 justify-start items-center flex-wrap gap-3"
           }
         >
-          <EduDesignCard type="aplicatior" />
-          <EduDesignCard type="master" />
-          <EduDesignCard type="oneday" />
+          <Motion initial="hidden" whileInView="visible" variants={Number1}>
+            <EduDesignCard type="aplicatior" />
+          </Motion>
+          <Motion initial="hidden" whileInView="visible" variants={Number2}>
+            <EduDesignCard type="master" />
+          </Motion>
+          <Motion initial="hidden" whileInView="visible" variants={Number3}>
+            <EduDesignCard type="oneday" />
+          </Motion>
         </div>
       </div>
     </section>