From 735f7b07eb04e87bdc4ac2d6acd87553519f1c57 Mon Sep 17 00:00:00 2001 From: DICEPT Date: Mon, 17 Jun 2024 21:28:11 +0900 Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=ED=82=A4=ED=94=84=EB=A0=88?= =?UTF-8?q?=EC=9E=84=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- tailwind.config.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/tailwind.config.js b/tailwind.config.js index d1add7f..50ac2ee 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -15,6 +15,15 @@ module.exports = { colorBlack: "#222", colorRed: "#ff0000", }, + keyframes: { + slide: { + '100%': { transform: 'translateX(100%)' }, + '0%': { transform: 'translateX(-100%)' }, + }, + }, + animation: { + slide: 'slide 3s linear infinite', + }, height: { headerHeight: "80px", footerHeight: "400px", From 598e7ce57981c27358bdd973495ac2cfcdb7c917 Mon Sep 17 00:00:00 2001 From: DICEPT Date: Mon, 17 Jun 2024 21:29:47 +0900 Subject: [PATCH 2/3] =?UTF-8?q?feat:=20=EB=B3=80=ED=99=98=20=EC=86=8D?= =?UTF-8?q?=EB=8F=84=20=EC=A1=B0=EC=A0=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/globals.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/app/globals.css b/src/app/globals.css index 18ba0b6..7fc4fac 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -78,6 +78,7 @@ padding: 0; margin: 0; scroll-behavior: smooth; + transition: all 0.2s linear; } html { From 149d252e20df1324cb52af0d557b8c4834448c7a Mon Sep 17 00:00:00 2001 From: DICEPT Date: Mon, 17 Jun 2024 21:31:09 +0900 Subject: [PATCH 3/3] =?UTF-8?q?feat:=20=ED=94=84=EB=A0=88=EC=9D=B4?= =?UTF-8?q?=EB=A8=B8=20=EB=AA=A8=EC=85=98=20=EC=88=9C=EC=84=9C,=20?= =?UTF-8?q?=EC=9C=84=EC=B9=98=20=EC=88=98=EC=A0=95=20=EC=9E=91=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/(brand)/modern-masters/page.tsx | 30 +- .../(education)/education/ApplicatorCard.tsx | 4 +- .../(education)/education/EduDesignCard.tsx | 73 +++-- src/app/(education)/education/TopBanner.tsx | 190 +++++++++--- src/app/(education)/education/page.tsx | 239 ++++++++++----- src/app/(home)/BrandBox.tsx | 2 +- src/app/(home)/MainImagesLayout.tsx | 220 ++++++++++---- src/app/(home)/SectionTitle.tsx | 121 ++++++-- src/app/(home)/greetings/GreetingClient.tsx | 143 ++++----- src/app/(home)/page.tsx | 273 +++++++++++++----- src/components/brandSlider/BrandSlider.tsx | 120 ++++++-- 11 files changed, 992 insertions(+), 423 deletions(-) diff --git a/src/app/(brand)/modern-masters/page.tsx b/src/app/(brand)/modern-masters/page.tsx index 392c272..2877934 100644 --- 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 () => {
{MODERN_MASTERS_SERIES_TEXT}
-
- {brandList.map((data, index) => ( - <> -
{ - setActiveBrandIndex(index); - }} - > - {`브랜드${index -
- - ))} -
-
- +
+
{/* 아티스트 작품 */} diff --git a/src/app/(education)/education/ApplicatorCard.tsx b/src/app/(education)/education/ApplicatorCard.tsx index ea18d8a..9faf83b 100644 --- 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 (
-
+
{"topbanner-01"} {
샤뜨 페인팅 세미나를 진행합니다. 메탈릭페인트 워크샵 등.. diff --git a/src/app/(education)/education/EduDesignCard.tsx b/src/app/(education)/education/EduDesignCard.tsx index 9924ac4..498e2b1 100644 --- 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 (
-
- - {indexNumber} - -
-
-
- {type} -
-
- - {title} - - - {description} + +
+ + {indexNumber}
-
+ +
+
+ {type} +
+
+ + {title} + + + {description} + +
+
); }; diff --git a/src/app/(education)/education/TopBanner.tsx b/src/app/(education)/education/TopBanner.tsx index 6e3ae45..68cca16 100644 --- 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 (
-
-
+
+
-

+

+ EDUCATION +

+ + - EDUCATION -

-

- 교육소개 -

-
-
-

- 창의적이고 특수한 기술을 활용하여 미술 작품이나 프로젝트를 - 창조하고자 하는 이들을 위한 훌륭한 기회를 제공합니다. 다양한 - 기법과 재료를 활용하여 특수한 효과와 아름다움을 창출하는 데 필요한 - 기술을 습득하고, 창의적인 작업을 펼칠 수 있습니다. -

+

+ 교육소개 +

+
+ +
+

+ 창의적이고 특수한 기술을 활용하여 미술 작품이나 프로젝트를 + 창조하고자 하는 이들을 위한 훌륭한 기회를 제공합니다. 다양한 + 기법과 재료를 활용하여 특수한 효과와 아름다움을 창출하는 데 + 필요한 기술을 습득하고, 창의적인 작업을 펼칠 수 있습니다. +

+
+ -
- - 3개 클래스 운영 - - +
- 샤뜨는 다양한 교육과정을 제공하여 학습자들이 전문 기술을 습득하고 - 성장할 수 있도록 지원하고 있습니다. 그 중에서도 주목받는 - 교육과정으로는 Aplicatior, Master, One Day 프로그램이 있습니다. - -
+ + 운영 + + + + 샤뜨는 다양한 교육과정을 제공하여 학습자들이 전문 기술을 + 습득하고 성장할 수 있도록 지원하고 있습니다. 그 중에서도 + 주목받는 교육과정으로는 Aplicatior, Master, One Day 프로그램이 + 있습니다. + +
+
- - - + + + + + + + + +
diff --git a/src/app/(education)/education/page.tsx b/src/app/(education)/education/page.tsx index d6b5ee4..c160c16 100644 --- a/src/app/(education)/education/page.tsx +++ b/src/app/(education)/education/page.tsx @@ -3,91 +3,192 @@ import TopBanner from "@/app/(education)/education/TopBanner"; import EducationSlider from "./EducationSlider"; import EduProcessingCard from "@/app/(education)/education/EduProcessingCard"; import Button from "@/components/button/Button"; +import Motion from "@/components/motion/Motion"; export default async function Page() { // const edu: Edu[] = await getEdu(); + 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 motionSlid = { + hidden: { opacity: 0, y: 50 }, + visible: { + y: 0, + opacity: 1, + transition: { + delay: 0.9, + }, + }, + }; + + const container = { + hidden: { opacity: 0 }, + visible: { + opacity: 1, + transition: { + delay: 0.6, + duration: 1, + }, + }, + }; + return (
-
- - PACKAGE PROGRAM - - - 패키지 교육 과정 - - +
- 다양한 과정은 패키지로 교육 받으실 수 있습니다. Aplicatior, Master, - 그리고 -
One Day 등 다양한 프로그램이 운영되고 있습니다. - - -
- -
-
- + + PACKAGE PROGRAM + + + - SHORT COURSE - - + 패키지 교육 과정 + + + - 단과 교육 - - + 다양한 과정은 패키지로 교육 받으실 수 있습니다. Aplicatior, + Master, 그리고{" "}
+ One Day 등 다양한 프로그램이 운영되고 있습니다. + + + - 단과 교육은 짧은 기간 동안에도 효과적인 학습을 제공하는 - 프로그램으로, 명확한 목표를 가지고 집중적으로 학습하고자 하는 - 분들에게 적합합니다 - + +
-
-
+ +
+
+ + + SHORT COURSE + + + - - - - - - - - -
+ + 단과 교육 + + + + + 단과 교육은 짧은 기간 동안에도 효과적인 학습을 제공하는 프로그램으로,{" "}
+ 명확한 목표를 가지고 집중적으로 학습하고자 하는 분들에게 적합니다 + +
- +
+
+ + + + + + + + +
+
+
+ +
+
); diff --git a/src/app/(home)/BrandBox.tsx b/src/app/(home)/BrandBox.tsx index 8f3676f..eb72bd5 100644 --- a/src/app/(home)/BrandBox.tsx +++ b/src/app/(home)/BrandBox.tsx @@ -37,7 +37,7 @@ const BrandBox = ({ brand }: BrandBoxProps) => { return (
{ const isMobile = Mobile(); + const container = { + hidden: { opacity: 0 }, + visible: { + opacity: 1, + transition: { + delay: 0.2, + }, + }, + }; + const motionImg1 = { + hidden: { opacity: 0, y: 100 }, + visible: { + y: 0, + opacity: 1, + transition: { + delay: 0.4, + }, + }, + }; + const motionImg2 = { + hidden: { opacity: 0, x: -100 }, + visible: { + x: 0, + opacity: 1, + transition: { + delay: 0.5, + }, + }, + }; + const motionImg3 = { + hidden: { opacity: 0, y: -100 }, + visible: { + y: 0, + opacity: 1, + transition: { + delay: 0.6, + }, + }, + }; + const motionImg4 = { + hidden: { opacity: 0, x: 100 }, + visible: { + x: 0, + opacity: 1, + transition: { + delay: 0.7, + }, + }, + }; if (!isMobile) { return ( -
-
-
-
-
- main4 + +
+
+
+
+ +
+ main4 +
+
-
-
-
- main1 -
-
- main5 +
+ +
+ main1 +
+ + +
+ main5 +
+
-
-
-
- main2 +
+ +
+ main2 +
+ + +
+ main6 +
+
-
- main6 -
-
-
-
- main3 -
-
- main7 +
+ +
+ main3 +
+ + +
+ main7 +
+
-
+ ); } if (isMobile) { diff --git a/src/app/(home)/SectionTitle.tsx b/src/app/(home)/SectionTitle.tsx index e5600ed..d1d8100 100644 --- a/src/app/(home)/SectionTitle.tsx +++ b/src/app/(home)/SectionTitle.tsx @@ -1,4 +1,6 @@ +import Motion from "@/components/motion/Motion"; import ResponsiveDesc from "./ResponsiveDesc"; +import { delay } from "@reduxjs/toolkit/dist/utils"; interface SectionTitleProps { type: "syatt" | "brand" | "introduce" | "education"; @@ -53,6 +55,51 @@ const SectionTitle = ({ type, children }: SectionTitleProps) => { } const { title: mainTitle, subTitle, description } = content; + + 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 motionLine = { + hidden: { opacity: 0, x: 600 }, + visible: { + x: 0, + opacity: 1, + transition: { + delay: 0.9, + }, + }, + }; + return (
{ : "sm:flex flex-col justify-center items-center font-eng sm:mb-14 sm:w-auto w-[85%] block mb-0" } > -

- {mainTitle} -

-

- {subTitle} - {!isCenter && ( -
- )} -

-

- -

+ +

+ {mainTitle} +

+ + +

+ {subTitle} + {!isCenter && ( + +
+ + )} +

+ + + +

+ +

+ + {!isCenter && children}
{isCenter && children} diff --git a/src/app/(home)/greetings/GreetingClient.tsx b/src/app/(home)/greetings/GreetingClient.tsx index f6ea1c5..f6416a8 100644 --- a/src/app/(home)/greetings/GreetingClient.tsx +++ b/src/app/(home)/greetings/GreetingClient.tsx @@ -41,8 +41,7 @@ const GreetingClient = () => { transition: { when: "beforeChildren", duration: 0.5, - ease: "easeIn", - staggerChildren: 0.2, + staggerChildren: 0.1, delayChildren: 0.1, }, }, @@ -76,59 +75,72 @@ const GreetingClient = () => { "relative sm:text-5xl text-6xl before:content-[''] before:block before:w-2 before:h-2 before:rounded-full before:bg-slate-300 before:absolute before:top-0 before:left-1/2 before:-translate-y-[230%]"; return ( -
- -
-
- IDphoto +
+
+ +
+
+ IDphoto +
+

+ E-Mail : 이메일@gmail.com
Kakaotalk : @카카오톡ID +

-

- E-Mail : 이메일@gmail.com
Kakaotalk : @카카오톡ID -

-
-
-

CEO

-

- 이주연 -

-

- 샤 - 뜨와 - 함 - 께 - 하세요 -

-

- 모던마스터스는 세계 1위의 고급 페인트 공급사로서 메탈릭 페인트, - 부식효과 페인트, 건축 외부용 페인트, 테마 페인트, 블랙라이트 페인트, - 글레이즈, 바니쉬, 크랙클 페인트, 건축용 기능성 페인트, DIY, 건축용 - 도료, 장식용 페인트 등 수성 페인트 전문 업체입니다. -
-
- 모던마스터스는 세계 1위의 고급 페인트 공급사로서 메탈릭 페인트, - 부식효과 페인트, 건축 외부용 페인트, 테마 페인트, 블랙라이트 페인트, - 글레이즈, 바니쉬, 크랙클 페인트, 건축용 기능성 페인트, DIY, 건축용 - 도료, 장식용 페인트 등 수성 페인트 전문 업체입니다. -

-
- + + +
+

CEO

+

+ 이주연 +

+

+ 샤 + 뜨와 + 함 + 께 + 하세요 +

+

+ 모던마스터스는 세계 1위의 고급 페인트 공급사로서 메탈릭 페인트, + 부식효과 페인트, 건축 외부용 페인트, 테마 페인트, 블랙라이트 + 페인트, 글레이즈, 바니쉬, 크랙클 페인트, 건축용 기능성 페인트, + DIY, 건축용 도료, 장식용 페인트 등 수성 페인트 전문 업체입니다. +
+
+ 모던마스터스는 세계 1위의 고급 페인트 공급사로서 메탈릭 페인트, + 부식효과 페인트, 건축 외부용 페인트, 테마 페인트, 블랙라이트 + 페인트, 글레이즈, 바니쉬, 크랙클 페인트, 건축용 기능성 페인트, + DIY, 건축용 도료, 장식용 페인트 등 수성 페인트 전문 업체입니다. +

+
+ +
+ { { key={index} variants={li} whileHover={{ - scale: 1.1, + scale: 1.04, zIndex: 1, - transition: { duration: 0.3, ease: "easeInOut" }, + transition: { delay: 0 }, }} - className="sm:w-1/4 sm:h-auto w-60 h-40 rounded-md flex items-center justify-center border border-borderGray" + className="p-3 sm:p-1 sm:w-1/4 sm:h-auto w-40 rounded-md flex items-center justify-center bg-[#f2f2f2] border border-[#f2f2f2] cursor-pointer" > award {
{ >
{medias.map((media, index) => ( { alt="media" sizes="100vw" style={{ width: "100%", height: "auto" }} - className="rounded-[4px]" + className="rounded-[4px] cursor-pointer" /> ))} @@ -222,8 +235,8 @@ export default GreetingClient; const SemiTitle = ({ title, desc }: { title: string; desc: string }) => { return ( -
-
+
+

{title}

{desc}

diff --git a/src/app/(home)/page.tsx b/src/app/(home)/page.tsx index cd3faed..4f63fca 100644 --- a/src/app/(home)/page.tsx +++ b/src/app/(home)/page.tsx @@ -42,105 +42,246 @@ export default async function Home() { }, }; + const containerBox = { + hidden: { opacity: 0 }, + visible: { + opacity: 1, + transition: { + duration: 1, + ease: "easeIn", + }, + }, + }; + + const titleLeftMove = { + hidden: { opacity: 0, x: -100 }, + visible: { + x: 0, + opacity: 1, + transition: { + duration: 1, + ease: "easeIn", + }, + }, + }; + + const innerBoxTop = { + hidden: { opacity: 0, y: 100 }, + visible: { + y: 0, + opacity: 1, + transition: { + delay: 0.3, + }, + }, + }; + + const innerBoxBottom = { + hidden: { opacity: 0, y: 100 }, + visible: { + y: 0, + opacity: 1, + transition: { + delay: 0.4, + }, + }, + }; + const fadeIn = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { - duration: 1.5, + duration: 0.5, ease: "easeIn", }, }, }; + const motionTop = { + hidden: { opacity: 0, x: 50 }, + visible: { + x: 0, + opacity: 1, + transition: { + delay: 0.3, + }, + }, + }; + + const motionCenter = { + hidden: { opacity: 0, x: 50 }, + visible: { + x: 0, + opacity: 1, + transition: { + delay: 0.5, + }, + }, + }; + + const motionBottom = { + hidden: { opacity: 0, x: 50 }, + visible: { + x: 0, + opacity: 1, + transition: { + delay: 0.7, + }, + }, + }; + return ( <>
{/* 메인 배너 */} -
+
{/* 메인 */} - - - - - + {/* */} + + + + {/* */} {/* *****************회사소개***************** */} - + - -

- SYATT -

-

- 샤뜨 -

-

- 주식회사 샤뜨는 외단열 시스템의 현장 적용과 시공 감리를 - 체계적으로 진행하여 에너지 손실을 최소화하고 외단열 현장의 - 다양한 고객 요구를 충족시키기 위해 도전을 계속하고 있습니다. - 또한, 시간이 흐를수록 지속적인 따뜻함과 애착을 주는 나만의 - 포페인팅(Faux-Painting) 경험을 제공하고 교육하는 전문 - 업체입니다. 시대의 흐름과 사람들이 공감하며 자연스러운 - 아름다움을 느낄 수 있는 디자인을 추구하면서도, 오랜 경험과 - 샤뜨만의 노하우를 통해 여러분의 공간에 생기를 불어넣겠습니다. -

- + + + +

+ SYATT +

+ + +

+ 샤뜨 +

+ + +

+ 주식회사 샤뜨는 외단열 시스템의 현장 적용과 시공 감리를 + 체계적으로 진행하여 에너지 손실을 최소화하고 외단열 현장의 + 다양한 고객 요구를 충족시키기 위해 도전을 계속하고 있습니다. + 또한, 시간이 흐를수록 지속적인 따뜻함과 애착을 주는 나만의 + 포페인팅(Faux-Painting) 경험을 제공하고 교육하는 전문 + 업체입니다. 시대의 흐름과 사람들이 공감하며 자연스러운 + 아름다움을 느낄 수 있는 디자인을 추구하면서도, 오랜 경험과 + 샤뜨만의 노하우를 통해 여러분의 공간에 생기를 + 불어넣겠습니다. +

+ + + {/* *****************모던마스터즈 & 마이더스메탈소개***************** */} - + - - + + + + + + {/* 교육소개 */} - + -
-
- eduImg + +
+
+ eduImg +
+
+ +

+ RESERVATION +

+ + +

+ 교육 예약 +

+ + +

+ 샤뜨의 포페인팅 교육은 창의성을 끌어올리고 예술적 기술을 + 향상하고자 하는 분들을 위한 특별한 기회입니다. 전문 + 강사들이 안내하는 고품질의 교육 환경에서 참가자들은 나만의 + 독특한 포페인팅 기술을 습득하며, 예술적인 성장을 경험할 수 + 있습니다. 지금 예약하고 샤뜨의 예술적 여정에 참여하세요. +

+ + +
-
-

- RESERVATION -

-

- 교육 예약 -

-

- 샤뜨의 포페인팅 교육은 창의성을 끌어올리고 예술적 기술을 - 향상하고자 하는 분들을 위한 특별한 기회입니다. 전문 강사들이 - 안내하는 고품질의 교육 환경에서 참가자들은 나만의 독특한 - 포페인팅 기술을 습득하며, 예술적인 성장을 경험할 수 있습니다. - 지금 예약하고 샤뜨의 예술적 여정에 참여하세요. -

- -
-
+ {/* 하단 배너 */} -
- bottomBanner -

- SYATT -

-
+ +
+ bottomBanner +

+ SYATT +

+
+
); diff --git a/src/components/brandSlider/BrandSlider.tsx b/src/components/brandSlider/BrandSlider.tsx index ec796cb..1197d25 100644 --- a/src/components/brandSlider/BrandSlider.tsx +++ b/src/components/brandSlider/BrandSlider.tsx @@ -1,7 +1,7 @@ /* eslint-disable jsx-a11y/alt-text */ /* eslint-disable @next/next/no-img-element */ "use client"; -import React from "react"; +import React, { useEffect, useRef, useState } from "react"; import Slider from "react-slick"; import "slick-carousel/slick/slick.css"; import "slick-carousel/slick/slick-theme.css"; @@ -17,7 +17,7 @@ const slideData = [ "이 제품들은 다양한 표면에 적용이 가능하며, 브러시, 롤러, 스프레이와 같은 다양한 방법으로 손쉽게 사용할 수 있습니다. 또한, 이 제품은 몇 분만에 청동 및 구리 녹청의 특별하고 시대를 초월한 외관을 혹은 녹슨 철의 풍화된 효과를 창출해냅니다.", }, { - id: 1, + id: 2, content: "Slide2", imageUrl: "/brand/modernmasters-img/modernmasters-series_1.png", brandImgUrl: "/brand/modernmasters-img/modernmasters-brand-logo_2.png", @@ -26,7 +26,7 @@ const slideData = [ "이 제품들은 다양한 표면에 적용이 가능하며, 브러시, 롤러, 스프레이와 같은 다양한 방법으로 손쉽게 사용할 수 있습니다. 또한, 이 제품은 몇 분만에 청동 및 구리 녹청의 특별하고 시대를 초월한 외관을 혹은 녹슨 철의 풍화된 효과를 창출해냅니다.", }, { - id: 1, + id: 3, content: "Slide3", imageUrl: "/brand/modernmasters-img/modernmasters-series_1.png", brandImgUrl: "/brand/modernmasters-img/modernmasters-brand-logo_3.png", @@ -35,7 +35,7 @@ const slideData = [ "이 제품들은 다양한 표면에 적용이 가능하며, 브러시, 롤러, 스프레이와 같은 다양한 방법으로 손쉽게 사용할 수 있습니다. 또한, 이 제품은 몇 분만에 청동 및 구리 녹청의 특별하고 시대를 초월한 외관을 혹은 녹슨 철의 풍화된 효과를 창출해냅니다.", }, { - id: 1, + id: 4, content: "Slide4", imageUrl: "/brand/modernmasters-img/modernmasters-series_1.png", brandImgUrl: "/brand/modernmasters-img/modernmasters-brand-logo_4.png", @@ -44,7 +44,7 @@ const slideData = [ "이 제품들은 다양한 표면에 적용이 가능하며, 브러시, 롤러, 스프레이와 같은 다양한 방법으로 손쉽게 사용할 수 있습니다. 또한, 이 제품은 몇 분만에 청동 및 구리 녹청의 특별하고 시대를 초월한 외관을 혹은 녹슨 철의 풍화된 효과를 창출해냅니다.", }, { - id: 1, + id: 5, content: "Slide5", imageUrl: "/brand/modernmasters-img/modernmasters-series_1.png", brandImgUrl: "/brand/modernmasters-img/modernmasters-brand-logo_5.png", @@ -54,41 +54,105 @@ const slideData = [ }, ]; -const BrandSlider = (activeBrandIndex: any) => { +interface Slide { + id: number; + content: string; + imageUrl: string; + brandImgUrl: string; + features: string; + description: string; +} + +// const brandList = [ +// { +// id: `1`, +// img: `brand/modernmasters-img/modernmasters-brand_1.png`, +// }, +// { +// id: `2`, +// img: `brand/modernmasters-img/modernmasters-brand_2.png`, +// }, +// { +// id: `3`, +// img: `brand/modernmasters-img/modernmasters-brand_3.png`, +// }, +// { +// id: `4`, +// img: `brand/modernmasters-img/modernmasters-brand_4.png`, +// }, +// { +// id: `5`, +// img: `brand/modernmasters-img/modernmasters-brand_5.png`, +// }, +// ]; + +const BrandSlider = () => { + const sliderRef = useRef(null); + const settings = { - dots: true, + ref: sliderRef, + dots: false, + speed: 1000, infinite: true, slidesToShow: 1, slidesToScroll: 1, - // autoplay: true, - speed: 1000, autoplaySpeed: 5000, }; + const brandList: { id: string; img: string }[] = []; + + for (let i = 0; i <= 4; ++i) { + brandList.push({ + id: `brand${i + 1}`, + img: `brand/modernmasters-img/modernmasters-brand_${i + 1}.png`, + }); + } + + const goToSlide = (index: any) => { + if (sliderRef.current) { + sliderRef.current.slickGoTo(index); + } + }; + return ( -
- - {slideData.map(slide => ( -
-
-
- -
-
-
- -
-
- {slide.features} +
+
+ {brandList.map((data, index) => ( + <> +
+ {`브랜드${index goToSlide(index)} + /> +
+ + ))} +
+
+ + {slideData.map(slide => ( +
+
+
+
-
- {slide.description} +
+
+ +
+
+ {slide.features} +
+
+ {slide.description} +
-
- ))} - + ))} + +
); };