Merge pull request #92 from 2024-hgu-ccd-one-in-christ/issue91

[FEAT] : 마우스 커서 변경
2024-hgu-ccd-one-in-christ · Oct 10, 2024 · 68d4fbd · 68d4fbd
2 parents 4b6c807 + ae44732
commit 68d4fbd
Show file tree

Hide file tree

Showing 20 changed files with 325 additions and 58 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -7,6 +7,7 @@ import Designers from "./pages/Designers";
 import Designer from "./pages/Designer";
 import Work from "./pages/Work";
 import About from "./pages/About";
+import CustomCursor from "./components/cursor/CustomCursor";
 
 const routeList = [
   {
@@ -45,7 +46,12 @@ const router = createBrowserRouter(
 );
 
 function App() {
-  return <RouterProvider router={router} />;
+  return (
+    <>
+      <CustomCursor />
+      <RouterProvider router={router} />
+    </>
+  );
 }
 
 export default App;
diff --git a/src/components/about/AboutMain.tsx b/src/components/about/AboutMain.tsx
@@ -1,6 +1,7 @@
 import aboutLogo from "../../assets/about/aboutLogo.png";
 import { motion } from "framer-motion";
 import { DOMAIN } from "../../constants/paths";
+import { useMousePosition } from "../cursor/Context";
 
 const draw = {
   hidden: { pathLength: 0, opacity: 0 },
@@ -18,24 +19,30 @@ const draw = {
 };
 
 const AboutMain = () => {
+  const { bigEnter, defaultEnter } = useMousePosition();
+
   return (
     <>
       <div
         className={`sm:hidden w-full md:w-[90%] mt-[163px] flex flex-col items-center text-primary-white mb-[176px]`}
       >
-        <img
-          src={aboutLogo}
-          className={`w-[774px] mt-[154px]`}
-          alt="about_logo"
-        />
+        <motion.image onMouseEnter={bigEnter} onMouseLeave={defaultEnter}>
+          <img
+            src={aboutLogo}
+            className={`w-[774px] mt-[154px]`}
+            alt="about_logo"
+          />
 
-        <p
-          className={`font-Menda_Medium text-[17px] sm:text-[12px] text-primary-white leading-[30px] sm:leading-[14px] mt-[16px] sm:mt-[20px]`}
-        >
-          SO IN CHRIST WE, FORM ONE BODY, BELONGS TO ALL THE OTHERS.
-        </p>
+          <p
+            className={`font-Menda_Medium text-[17px] sm:text-[12px] text-primary-white leading-[30px] sm:leading-[14px] mt-[16px] sm:mt-[20px]`}
+          >
+            SO IN CHRIST WE, FORM ONE BODY, BELONGS TO ALL THE OTHERS.
+          </p>
+        </motion.image>
 
-        <div
+        <motion.div
+          onMouseEnter={bigEnter}
+          onMouseLeave={defaultEnter}
           className={`w-full mt-[145px] flex justify-between text-[18px] font-Pretendard_Bold`}
         >
           <div className={`w-[300px] flex flex-col items-center`}>
@@ -50,14 +57,16 @@ const AboutMain = () => {
             <p>2024.10.21 - 10.28</p>
             <p>09:00 - 18:00</p>
           </div>
-        </div>
-        <div
+        </motion.div>
+        <motion.div
+          onMouseEnter={bigEnter}
+          onMouseLeave={defaultEnter}
           className={`flex flex-col items-center text-[20px] font-Pretendard_Regular mt-[260px]`}
         >
           <p>그리스도 안에서 한 몸이 되어 서로 지체가 되었느니라.</p>
           <p>So In Christ We, Form One Body, Belongs To All The Others.</p>
           <p>로마서 12:5</p>
-        </div>
+        </motion.div>
         <motion.svg
           width="300"
           height="350"
@@ -75,7 +84,9 @@ const AboutMain = () => {
             custom={2}
           />
         </motion.svg>
-        <div
+        <motion.div
+          onMouseEnter={bigEnter}
+          onMouseLeave={defaultEnter}
           className={`flex flex-col items-center font-Organetto_ExtBold text-[20px]`}
         >
           <p>자신의 능력과 성취에만 집중하여 서로 경쟁하는 사고방식에서</p>
@@ -93,7 +104,7 @@ const AboutMain = () => {
             서로 돕는 관계에 있으며, 함께 일함으로 써 공동체는 그리스도 안에서
             하나가 됩니다.
           </p>
-        </div>
+        </motion.div>
       </div>
       {/* 모바일 버전 */}
       <div

diff --git a/src/components/about/MainPoster.tsx b/src/components/about/MainPoster.tsx
@@ -1,17 +1,23 @@
 import Title from "./Title";
 import { DOMAIN } from "../../constants/paths";
+import { motion } from "framer-motion";
+import { useMousePosition } from "../cursor/Context";
 
 const MainPoster = () => {
+  const { bigEnter, defaultEnter } = useMousePosition();
+
   return (
-    <div
+    <motion.div
+      onMouseEnter={bigEnter}
+      onMouseLeave={defaultEnter}
       className={`w-full md:w-[90%] flex flex-col items-center mb-[219px] sm:mb-[144px]`}
     >
       <Title>MAIN POSTER</Title>
       <img
         src={`${DOMAIN}images/about/mainPoster.webp`}
         className={`w-[500px] sm:w-full`}
       />
-    </div>
+    </motion.div>
   );
 };
 

diff --git a/src/components/about/Professor.tsx b/src/components/about/Professor.tsx
@@ -1,21 +1,34 @@
 import { Professor as IProfessor } from "../../models/professor.model";
+import { useMousePosition } from "../cursor/Context";
+import { motion } from "framer-motion";
 
 interface Props {
   professor: IProfessor;
 }
 
 const Professor = ({ professor }: Props) => {
+  const { personEnter, smallEnter, defaultEnter } = useMousePosition();
+
   return (
     <div
       key={professor.id}
       className={`sm:w-[30%] md:w-[30%] flex flex-col gap-[7px]`}
     >
-      <img src={professor.imgSrc} className={`lg:w-[174px]`} alt="professor" />
-      <p
+      <motion.img
+        onMouseEnter={personEnter}
+        onMouseLeave={defaultEnter}
+        src={professor.imgSrc}
+        className={`lg:w-[174px]`}
+        alt="professor"
+      />
+
+      <motion.p
+        onMouseEnter={smallEnter}
+        onMouseLeave={defaultEnter}
         className={`font-Pretendard_Regular text-[20px] sm:text-[14px] text-primary-white`}
       >
         {professor.name}
-      </p>
+      </motion.p>
     </div>
   );
 };

diff --git a/src/components/about/Symbols.tsx b/src/components/about/Symbols.tsx
@@ -1,6 +1,7 @@
 import Title from "./Title";
-
+import { motion } from "framer-motion";
 import { DOMAIN } from "../../constants/paths";
+import { useMousePosition } from "../cursor/Context";
 
 const symbolInfo = [
   {
@@ -34,11 +35,17 @@ const symbolInfo = [
 ];
 
 const Symbols = () => {
+  const { bigEnter, middleEnter, defaultEnter } = useMousePosition();
+
   return (
     <>
       <div className={`hidden lg:block w-full mb-[374px]`}>
         <Title>SYMBOLS</Title>
-        <div className={`relative`}>
+        <motion.div
+          onMouseEnter={middleEnter}
+          onMouseLeave={defaultEnter}
+          className={`relative`}
+        >
           <img
             src={`${DOMAIN}${symbolInfo[0].imgSrc}`}
             className={`absolute top-[47px] left-[620px] w-[273px] hover:top-[77px]`}
@@ -75,9 +82,13 @@ const Symbols = () => {
           >
             {symbolInfo[3].symbol}
           </p>
-        </div>
+        </motion.div>
 
-        <div className={`mt-[858px] flex justify-between`}>
+        <motion.div
+          onMouseEnter={bigEnter}
+          onMouseLeave={defaultEnter}
+          className={`mt-[858px] flex justify-between`}
+        >
           {symbolInfo.map((item) => (
             <div
               className={`w-[289px] flex flex-col gap-[10px] text-[16px] text-primary-white hover:text-primary-orange`}
@@ -86,7 +97,7 @@ const Symbols = () => {
               <p className={`font-Pretendard_Regular`}>{item.info}</p>
             </div>
           ))}
-        </div>
+        </motion.div>
       </div>
       {/* 모바일 버전 */}
       <div

diff --git a/src/components/about/ThanksTo.tsx b/src/components/about/ThanksTo.tsx
@@ -1,13 +1,18 @@
 import { PROFESSOR } from "../../constants/professor";
+import { useMousePosition } from "../cursor/Context";
 import Professor from "./Professor";
+import { motion } from "framer-motion";
 import Title from "./Title";
 
 const ThanksTo = () => {
+  const { smallEnter, defaultEnter } = useMousePosition();
   return (
     <div
       className={`flex flex-col items-center md:w-[90%] sm:w-[90%] mb-[170px] lg:mb-[344px] `}
     >
-      <Title>THANKS TO</Title>
+      <motion.div onMouseEnter={smallEnter} onMouseLeave={defaultEnter}>
+        <Title>THANKS TO</Title>
+      </motion.div>
       <div className={`hidden lg:flex gap-[24px] mb-[47px]`}>
         {PROFESSOR.slice(0, 4).map((professor) => (
           <Professor professor={professor} />

diff --git a/src/components/common/Footer.tsx b/src/components/common/Footer.tsx
@@ -1,6 +1,13 @@
+import { useMousePosition } from "../cursor/Context";
+import { motion } from "framer-motion";
+
 const Footer = () => {
+  const { middleEnter, defaultEnter } = useMousePosition();
+
   return (
-    <div
+    <motion.div
+      onMouseEnter={middleEnter}
+      onMouseLeave={defaultEnter}
       className={`w-full border-t flex justify-center items-center py-[35px] sm:py-[20px]
 				text-[20px] md:text-[15px] sm:text-[10px]`}
     >
@@ -30,7 +37,7 @@ const Footer = () => {
           </p>
         </div>
       </div>
-    </div>
+    </motion.div>
   );
 };
 

diff --git a/src/components/common/Header.tsx b/src/components/common/Header.tsx
@@ -3,6 +3,8 @@ import Button from "../header/Button";
 import { PATHS } from "../../constants/paths";
 import { useState } from "react";
 import NavButtonMobile from "../header/NavButtonMobile";
+import { useMousePosition } from "../cursor/Context";
+import { motion } from "framer-motion";
 
 const button_list = [
   {
@@ -23,6 +25,7 @@ const button_list = [
 ];
 
 const Header = () => {
+  const { smallEnter, defaultEnter } = useMousePosition();
   const location = useLocation();
   const [toggleOpen, setToggleOpen] = useState(false);
 
@@ -34,7 +37,9 @@ const Header = () => {
 
   return (
     <>
-      <header
+      <motion.header
+        onMouseEnter={smallEnter}
+        onMouseLeave={defaultEnter}
         className={`z-[100] fixed top-0 w-full h-16 flex justify-center items-center ${
           toggleOpen ? "" : "md:border-b sm:border-b"
         } lg:backdrop-blur-sm md:bg-primary-black sm:bg-primary-black`}
@@ -72,7 +77,7 @@ const Header = () => {
             )}
           </div>
         </div>
-      </header>
+      </motion.header>
       {toggleOpen && (
         <div
           className={`lg:hidden fixed z-[100] w-full top-16 bg-primary-black border-b pb-2.5`}

diff --git a/src/components/common/PageInfo.tsx b/src/components/common/PageInfo.tsx
@@ -1,10 +1,17 @@
+import { useMousePosition } from "../cursor/Context";
+import { motion } from "framer-motion";
+
 interface Props {
   children: React.ReactNode;
 }
 
 const PageInfo = ({ children }: Props) => {
+  const { bigEnter, defaultEnter } = useMousePosition();
+
   return (
-    <div
+    <motion.div
+      onMouseEnter={bigEnter}
+      onMouseLeave={defaultEnter}
       className={`flex justify-center items-center
 		w-screen h-[99px] lg:fixed md:absolute sm:absolute z-50 top-16 bg-primary-white 
 		sm:w-[90%] sm:h-[63px] sm:mt-[19px]`}
@@ -14,7 +21,7 @@ const PageInfo = ({ children }: Props) => {
       >
         {children}
       </p>
-    </div>
+    </motion.div>
   );
 };