Merge pull request #24 from New-Syatte/design-patch-#22

Design patch #22
New-Syatte · Apr 23, 2024 · 3a41b4c · 3a41b4c
2 parents de5eeb6 + a4a390f
commit 3a41b4c
Show file tree

Hide file tree

Showing 74 changed files with 558 additions and 427 deletions.
diff --git a/README.md b/README.md
@@ -1 +1,60 @@
-# Syatte
+<a href="https://syatt-deploy.vercel.app" target="_blank">![SYATT](https://github.com/New-Syatte/Syatte/assets/84277185/c3fce81b-e391-4bb3-a73b-73b8a2f3eb76)</a>
+
+## 소개
+
+**Syatt**는 **faux-painting**을 위한 **도구와 페인트**를 판매하고, 고객들에게 **최상의 교육 서비스**를 제공하는 회사입니다. 우리는 예술적인 표현을 통해 **집과 공간을 더 아름답게** 만들어 주는 데 전념하고 있습니다. Syatt는 **ModernMasters**와 **Midas Metall**의 **공식 수입처**로 **고품질의 제품**과 **전문적인 교육**을 통해 고객들이 자신만의 **창조적인 비전을 실현**할 수 있도록 지원합니다.
+
+## 🎈 1. 프로젝트 목표
+
+프로젝트의 목표는 **next.js**와 **tailwindcss**를 기반으로 한 웹 애플리케이션을 개발하는 것입니다. 이 애플리케이션은 **faux-painting** 도구와 페인트를 판매하고, 교육 서비스를 제공하는 **Syatt** 회사의 제품과 서비스를 소개합니다. 프로젝트의 목표는 다음과 같습니다:
+
+1. Syatt의 제품 카테고리와 개별 제품에 대한 상세 정보를 제공하는 **스토어** 페이지를 구현합니다.
+2. Syatt가 제공하는 교육 프로그램과 워크샵에 대한 정보를 담은 **교육** 페이지를 구현합니다.
+3. **Modern Masters**와 **Midas Metall**의 제품과 특징을 소개하는 **브랜드별 사이트** 페이지를 구현합니다.
+4. 유저의 주문내역과 교육 일정, 배송현황을 확인할 수 있는 **마이페이지**를 구현합니다.
+
+또한, 프로젝트에서는 **redux-toolkit**을 사용하여 상태 관리를 구현하고, **swr**을 활용하여 데이터를 가져오고 캐싱합니다. 마지막으로, headless CMS인 **sanity**를 사용하여 콘텐츠를 관리하고 배포는 **vercel**과 **github Actions**를 이용합니다.
+
+## 📑 2. 페이지 구성
+
+1. **홈**: Syatt의 주요 소개와 제품 카테고리에 대한 링크가 포함된 페이지입니다.
+2. **스토어**: 우리의 제품 카테고리와 개별 제품에 대한 상세 정보를 제공합니다. 각 제품은 설명과 함께 이미지로 시각적으로 보여집니다.
+3. **교육**: Syatt가 제공하는 교육 프로그램과 워크샵에 대한 정보를 담은 페이지입니다. 사용자는 예약과 강의 일정을 확인할 수 있습니다.
+4. **브랜드별 사이트**: Modern Masters와 Midas Metall의 제품과 특징을 소개하는 페이지입니다. 각 브랜드의 제품을 구매하고 관련 정보를 확인할 수 있습니다.
+5. **마이페이지**: 유저의 주문내역, 배송조회와 교육 일정을 확인할 수 있습니다.
+
+## ➕ 3. 기술 스택
+
+### 프론트엔드
+
+<img src="https://img.shields.io/badge/Nextjs13-black?style=for-the-badge&logo=next.js&logoColor=white">
+<img src="https://img.shields.io/badge/typescript-skyblue?style=for-the-badge&logo=typescript&logoColor=white">
+<img src="https://img.shields.io/badge/reduxtoolkit-orange?style=for-the-badge&logo=redux&logoColor=white">
+<img src="https://img.shields.io/badge/tailwindcss-blue?style=for-the-badge&logo=tailwindcss&logoColor=white">
+
+### 백엔드
+
+<img src="https://img.shields.io/badge/sanity-orange?style=for-the-badge&logo=sanity&logoColor=white">
+
+### 배포
+
+<img src="https://img.shields.io/badge/vercel-black?style=for-the-badge&logo=vercel&logoColor=white">
+<img src="https://img.shields.io/badge/github Actions-gray?style=for-the-badge&logo=github&logoColor=white">
+
+## 🔨 아키텍처
+![arc](https://github.com/New-Syatte/Syatte/assets/84277185/9a9b93e6-e5cf-401e-a666-54ecce68be4a)
+
+
+
+## 🎊배포 주소
+<a href="https://syatt-deploy.vercel.app" target="_blank">![SYATT](https://github.com/New-Syatte/Syatte/assets/84277185/c3fce81b-e391-4bb3-a73b-73b8a2f3eb76)</a>
+
+
+<br/>
+<br/>
+<br/>
+<br/>
+
+---
+
+#### 웹사이트를 통해 집에서 쉽게 faux-painting을 시도해보세요. Syatt가 여러분의 예술적인 여정을 함께 합니다.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -46,7 +46,6 @@
     "@types/react-dom": "^18.2.18",
     "@types/react-slick": "^0.23.13",
     "autoprefixer": "^10.4.16",
-    "daisyui": "^4.6.0",
     "encoding": "^0.1.13",
     "postcss": "^8.4.31",
     "tailwindcss": "^3.3.5"

diff --git a/src/app/(brand)/midas-metal/page.tsx → src/app/(brand)/midas-metall/page.tsx b/src/app/(brand)/midas-metal/page.tsx → src/app/(brand)/midas-metall/page.tsx
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={"flex flex-col justify-center items-start"}>
-      <div className={"w-60 h-56 relative"}>
+    <div className={"w-56 flex flex-col justify-center items-center"}>
+      <div className={"w-56 h-48 relative mb-6"}>
         <Image
           src={topbanner1}
           alt={"topbanner-01"}
@@ -18,9 +18,7 @@ const ApplicatorCard = () => {
             "text-black text-md font-normal font-['Helvetica'] uppercase leading-[27px]"
           }
         >
-          1.샤뜨 페인팅 세미나를 진행합니다.
-          <br />
-          메탈릭페인트 워크샵 등..
+          샤뜨 페인팅 세미나를 진행합니다. 메탈릭페인트 워크샵 등..
         </span>
       </div>
     </div>

diff --git a/src/app/(education)/education/EduDesignCard.tsx b/src/app/(education)/education/EduDesignCard.tsx
@@ -1,64 +1,72 @@
-import aplicatior from "@/assets/education/aplicator.jpg";
-import master from "@/assets/education/master.jpg";
-import oneday from "@/assets/education/oneday.jpg";
+import aplicatior from "@/assets/education/aplicator.png";
+import master from "@/assets/education/master.png";
+import oneday from "@/assets/education/oneday.png";
 
 import Image, { StaticImageData } from "next/image";
 
 interface EduDesignCardProps {
-  type: "applicator" | "master" | "oneday";
+  type: "aplicatior" | "master" | "oneday";
 }
 const EduDesignCard = ({ type }: EduDesignCardProps) => {
   const cardBoxStyle =
-    "flex flex-col w-[276px] shadow-2xl rounded-3xl shadow-2xl";
-  const cardStyle =
-    "bg-black-500 bg-black flex flex-col items-center rounded-b-3xl z-10";
-  const cardTitleStyle = "mt-6 text-[33px] font-bold text-white";
+    "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 "applicator":
+    case "aplicatior":
       src = {
         image: aplicatior,
-        title: "Applicator",
+        title: "Aplicatior",
         description: "실무에서 즉시 활용 가능한 역량을 강화할 수 있습니다.",
+        indexNumber: 1,
       };
       break;
     case "master":
       src = {
         image: master,
         title: "Master",
         description: "분야의 선두 주자로 발전 가능한 리더십 강화합니다.",
+        indexNumber: 2,
       };
       break;
     case "oneday":
       src = {
         image: oneday,
         title: "One Day",
         description: "빠르게 필요한 스킬 습득, 업무에 즉시 적용 가능합니다.",
+        indexNumber: 3,
       };
       break;
   }
-  const { image, title, description } = src;
+  const { image, title, description, indexNumber } = src;
   return (
-    <div className={cardBoxStyle}>
-      <div className={"h-[320px] relative rounded-t-3xl border-2"}>
-        <Image src={image} fill={true} alt={type} className={"rounded-t-3xl"} />
-      </div>
-      <div className={cardStyle}>
-        <span className={cardTitleStyle}>{title}</span>
-        <br />
-        <span
-          className={
-            "mb-6 text-center text-sm font-normal text-white w-[228px]"
-          }
-        >
-          {description}
+    <div className="flex flex-col">
+      <div className="h-44 flex 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>
+        <div className={cardStyle}>
+          <span className={cardTitleStyle}>{title}</span>
+          <span
+            className={"text-center text-sm font-medium text-black w-[228px]"}
+          >
+            {description}
+          </span>
+        </div>
+      </div>
     </div>
   );
 };

diff --git a/src/app/(education)/education/EduSection.tsx b/src/app/(education)/education/EduSection.tsx
diff --git a/src/app/(education)/education/EducationCard.tsx b/src/app/(education)/education/EducationCard.tsx
@@ -10,23 +10,19 @@ export default function EducationCard() {
   const ApplicatiorCards = [1, 2, 3, 4];
 
   return (
-    <div className={"w-4/6 border-2 mx-auto shadow-xl rounded-2xl mb-[82px]"}>
-      <div
-        className={
-          "flex items-center pt-7 px-14 space-x-44 bg-black rounded-t-2xl pb-10"
-        }
-      >
+    <div
+      className={
+        "w-[1163px] h-[533px] border-2 shadow-xl rounded-2xl p-12 mb-[82px] bg-white"
+      }
+    >
+      <div className={"flex items-end justify-between pb-6"}>
         <div className={"flex flex-col items-start justify-center"}>
-          <span
-            className={
-              "text-white text-[40px] font-bold font-['Helvetica'] leading-[68px]"
-            }
-          >
+          <span className={"text-black text-[40px] font-bold leading-[68px]"}>
             Aplicatior 교육패키지
           </span>
           <span
             className={
-              "w-[676px] text-white text-lg font-normal font-['Helvetica'] mt-1 leading-normal"
+              "w-[676px] text-black text-lg font-normal mt-1 leading-normal"
             }
           >
             실무 중심의 강력한 역량 강화를 위한 프로그램으로, 업계 수요를 반영한
@@ -37,10 +33,10 @@ export default function EducationCard() {
         <button
           onClick={handleClick}
           className={
-            "px-6 py-3 bg-blue-500 border-white border-2 text-center text-white text-2xl font-bold font-['Helvetica'] rounded-md"
+            "py-4 px-8 bg-primaryBlue border-white border-2 text-center text-white text-xl font-bold rounded-md whitespace-nowrap"
           }
         >
-          코스 신청하기
+          풀코스 신청하기
         </button>
       </div>
       <div