Merge pull request #35 from New-Syatte/mobile-responsive-#25

Mobile responsive #25
New-Syatte · Apr 29, 2024 · 3757a89 · 3757a89
2 parents 609edfb + 80cd799
commit 3757a89
Show file tree

Hide file tree

Showing 49 changed files with 1,023 additions and 593 deletions.
diff --git a/next.config.js b/next.config.js
@@ -1,7 +1,12 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   images: {
-    domains: ["cdn.sanity.io"],
+    domains: [
+      "cdn.sanity.io",
+      "k.kakaocdn.net",
+      "lh3.googleusercontent.com",
+      "phinf.pstatic.net",
+    ],
     deviceSizes: [320, 420, 768, 1024, 1200],
     imageSizes: [16, 32, 48, 64, 96, 128, 256, 512],
   },

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
     "@sanity/image-url": "^1.0.2",
     "@tosspayments/payment-sdk": "^1.6.1",
     "@tosspayments/payment-widget-sdk": "^0.10.1",
+    "@types/react-responsive": "^8.0.8",
     "axios": "^1.6.7",
     "dayjs": "^1.11.10",
     "eslint": "8.41.0",
@@ -30,7 +31,9 @@
     "react-dom": "18.2.0",
     "react-icons": "^4.12.0",
     "react-loader-spinner": "^5.3.4",
+    "react-portal": "^4.2.2",
     "react-redux": "^8.0.5",
+    "react-responsive": "^10.0.0",
     "react-simple-star-rating": "^5.1.7",
     "react-slick": "^0.30.1",
     "react-toastify": "^9.1.3",

diff --git a/src/app/(auth)/signin/page.tsx b/src/app/(auth)/signin/page.tsx
@@ -22,7 +22,7 @@ export default async function SignInPage({
   const providers = (await getProviders()) ?? redirect("/");
 
   return (
-    <section className="flex justify-center pt-20">
+    <section className="flex justify-center pt-20 pb-52">
       <Signin providers={providers} callbackUrl={callbackUrl ?? "/"} />
     </section>
   );

diff --git a/src/app/(brand)/midas-metall/page.tsx b/src/app/(brand)/midas-metall/page.tsx
@@ -8,7 +8,6 @@ import YouTubeVideo from "@/components/youTubeVideo/YouTubeVideo";
 import SubTitleBox from "@/components/subTitleBox/SubTitleBox";
 // import BrandSlider from "@/components/brandSlider/BrandSlider";
 import StoreSlider from "@/components/storeSlider/StoreSlider";
-import { useState } from "react";
 import ProductInfoList from "@/components/productInfoList/ProductInfoList";
 import { getProducts } from "@/services/sanity/products";
 
@@ -18,7 +17,7 @@ const MIDASMETALL_INFO_TEXT_2 = `뿐만 아니라, Thuringia Newspaper Group의
 const MIDASMETALL_INFO_TEXT_3 = `이어진 2010년에는 튀링겐 창립자상에서 성공적인 젊은 기업 부문에서 3위를 차지하여 지속적인 성장과 혁신적인 업적을 선보이고 있습니다. 마이다스 메탈은 훌륭한 품질과 혁신적인 디자인을 바탕으로 꾸준한 성공을 이루어내고 있습니다.`;
 const MIDASMETALL_ARTWORK_TEXT = `마이다스 메탈 페인트로 창조된 다채로운 작품들을 확인하세요. 고유한 텍스처와 색상으로 표현된 예술적인 아트워크를 확인할 수 있습니다.`;
 
-const MidasMETALL = async() => {
+const MidasMETALL = async () => {
   // const [activeBrandIndex, setActiveBrandIndex] = useState(0);
   const paintList = [];
 
@@ -42,18 +41,6 @@ const MidasMETALL = async() => {
     });
   }
 
-  const opts = {
-    height: "315",
-    width: "560",
-    playerVars: {
-      autoplay: 1,
-    },
-  };
-
-  const onReady = (event: any) => {
-    console.log("동영상 플레이어가 준비되었습니다.");
-  };
-
   return (
     <>
       {/* 최상단 배너 영역 */}
@@ -101,7 +88,7 @@ const MidasMETALL = async() => {
             alt={"상단 페인트 이미지"}
           />
         </div>
-        <div className="flex w-full my-auto px-auto z-10">
+        <div className="flex w-full my-auto px-auto sm:pb-10 z-10">
           <div className="flex flex-col">
             <div className="flex text-[20px] font-[GmarketSans] sm:text-[20px] sm:mx-auto">
               MIDAS METALL
@@ -122,8 +109,8 @@ const MidasMETALL = async() => {
             </div>
           </div>
         </div>
-        <div className="flex w-full justify-center my-auto z-10">
-          <div className="flex rounded-lg overflow-hidden mt-[100px] sm:mx-[35px]">
+        <div className="flex w-full justify-center items-center my-auto z-10">
+          <div className="w-2/3">
             <YouTubeVideo urlId={"03mGS92FB50"} />
           </div>
         </div>

diff --git a/src/app/(brand)/modern-masters/page.tsx b/src/app/(brand)/modern-masters/page.tsx
@@ -8,14 +8,8 @@ import YouTubeVideo from "@/components/youTubeVideo/YouTubeVideo";
 import SubTitleBox from "@/components/subTitleBox/SubTitleBox";
 import BrandSlider from "@/components/brandSlider/BrandSlider";
 import StoreSlider from "@/components/storeSlider/StoreSlider";
-// import { categorys } from "@/constants/categorys";
 import { getProducts } from "@/services/sanity/products";
 import { useState } from "react";
-import Heading from "@/components/heading/Heading";
-import CategoryToSearchLink from "@/app/(product)/store/CategoryToSearchLink";
-import ProductsByCategory from "@/app/(product)/store/ProductsByCategory";
-import ProductBanner from "@/app/(product)/store/ProductBanner";
-import URLS from "@/constants/urls";
 
 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로 알려져 있었습니다. 주로 가구, 장식용 액세서리, 주거용 조명, 그리고 벽 장식용 코팅 제품을 생산했습니다. 회사는 최고 품질의 코팅을 제공하고 "지불한 만큼 얻는다"는 모토를 따르며 성장했습니다.`;
@@ -57,18 +51,6 @@ const Modernmasters = async () => {
     });
   }
 
-  const opts = {
-    height: "315",
-    width: "560",
-    playerVars: {
-      autoplay: 1,
-    },
-  };
-
-  const onReady = (event: any) => {
-    console.log("동영상 플레이어가 준비되었습니다.");
-  };
-
   return (
     <>
       {/* 최상단 배너 영역 */}
@@ -150,8 +132,8 @@ const Modernmasters = async () => {
             </div>
           </div>
         </div>
-        <div className="flex w-full justify-center my-auto z-10">
-          <div className="flex rounded-lg overflow-hidden mt-[100px] sm:mx-[35px]">
+        <div className="flex w-full justify-center items-center my-auto z-10">
+          <div className="w-2/3">
             <YouTubeVideo urlId={"qj5TKQbbRYg"} />
           </div>
         </div>

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

diff --git a/src/app/(education)/education/EduDesignCard.tsx b/src/app/(education)/education/EduDesignCard.tsx
@@ -8,18 +8,13 @@ interface EduDesignCardProps {
   type: "aplicatior" | "master" | "oneday";
 }
 const EduDesignCard = ({ type }: EduDesignCardProps) => {
-  const cardBoxStyle =
-    "flex flex-col w-[296px] h-[453px] shadow-2xl rounded-3xl shadow-2xl bg-bgGray items-center justify-center p-5 border border-tableBorderGray";
-  const cardStyle = "flex flex-col items-center rounded-b-3xl z-10";
-  const cardTitleStyle =
-    "mt-8 text-[32px] font-bold text-black font-GmarketSans";
-
   let src = {
     image: {} as StaticImageData,
     title: "",
     description: "",
     indexNumber: null as number | null,
   };
+
   switch (type) {
     case "aplicatior":
       src = {
@@ -46,22 +41,37 @@ const EduDesignCard = ({ type }: EduDesignCardProps) => {
       };
       break;
   }
+
   const { image, title, description, indexNumber } = src;
   return (
     <div className="flex flex-col">
-      <div className="h-44 flex items-end justify-end">
+      <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={cardBoxStyle}>
-        <div className="relative w-[257px] h-[279px]">
-          <Image src={image} fill alt={type} className={"rounded-3xl"} />
+      <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={cardStyle}>
-          <span className={cardTitleStyle}>{title}</span>
+        <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 text-sm font-medium text-black w-[228px]"}
+            className={
+              "text-center sm:text-xs text-sm font-medium text-black w-[228px] sm:w-auto"
+            }
           >
             {description}
           </span>

diff --git a/src/app/(education)/education/EduProcessingCard.tsx b/src/app/(education)/education/EduProcessingCard.tsx
@@ -3,15 +3,34 @@ import Edu01 from "@/assets/education/edu-0.jpg";
 
 export default function EduProcessingCard() {
   return (
-    <section className={ "w-[255px] mb-[60px]" }>
-      <div className={ "w-[255px] h-[220px] relative" }>
-        <Image src={ Edu01 } alt={ "교육과정-01" } fill={ true } />
+    <section className={"sm:w-[150px] w-[255px] sm:mb-6 mb-[60px]"}>
+      <div className={"sm:w-full sm:h-auto w-[255px] h-[220px] relative"}>
+        <Image
+          src={Edu01}
+          alt={"교육과정-01"}
+          sizes="100vw"
+          style={{ width: "100%", height: "auto" }}
+        />
       </div>
-      <div className={'flex items-center justify-start'}>
-        <span className={ "bg-amber-200 rounded-lg px-2 py-1 flex justify-center items-center mt-4 text-xs text-yellow-600" }>모집중</span>
+      <div className={"flex items-center justify-start"}>
+        <span
+          className={
+            "bg-amber-200 rounded-lg px-2 py-1 flex justify-center items-center mt-4 text-xs text-yellow-600"
+          }
+        >
+          모집중
+        </span>
       </div>
-      <p className={ "mt-[13px] w-[255px] text-black text-lg font-normal font-['Helvetica'] uppercase leading-[27px]" }>샤뜨 페인팅 세미나를 진행합니다. 메탈릭 페인트 워크샵 등 ...</p>
-      <p className={ "mt-[13px] text-lg text-gray-400" }>2023.3.1 ~ 2023.6.28</p>
+      <p
+        className={
+          "sm:mt-2 mt-[13px] w-full text-black sm:text-xs text-lg font-normal font-helvetica sm:leading-normal leading-[27px]"
+        }
+      >
+        샤뜨 페인팅 세미나를 진행합니다. 메탈릭 페인트 워크샵 등 ...
+      </p>
+      <p className={"sm:mt-2 mt-[13px] sm:text-[9px] text-lg text-gray-400"}>
+        2023.3.1 ~ 2023.6.28
+      </p>
     </section>
   );
 }