refactor: Home Page 애니메이션 추가 및 코드 정리

KMU-WINK · Sep 19, 2024 · 9d3eded · 9d3eded
1 parent d5e9108
commit 9d3eded
Show file tree

Hide file tree

Showing 7 changed files with 166 additions and 93 deletions.
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@svgr/webpack": "^8.1.0",
+    "aos": "^3.0.0-beta.6",
     "cheerio": "^1.0.0",
     "framer-motion": "^11.5.4",
     "jodit-react": "^4.1.2",
@@ -32,6 +33,7 @@
     "@commitlint/config-conventional": "^19.2.2",
     "@eslint/js": "^9.8.0",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
+    "@types/aos": "^3.0.7",
     "@types/cheerio": "^0.22.35",
     "@types/eslint-config-prettier": "^6.11.3",
     "@types/eslint__js": "^8.42.3",

diff --git a/src/app/about-us/_components/ActivicyCard/index.tsx b/src/app/about-us/_components/ActivicyCard/index.tsx
diff --git a/src/app/about-us/we/page.tsx b/src/app/about-us/we/page.tsx
@@ -1,28 +1,34 @@
 'use client';
 
-import React from 'react';
+import React, { useEffect } from 'react';
 
 import Image from 'next/image';
 import Link from 'next/link';
-import ActivityCard from '@/app/about-us/_components/ActivicyCard';
 
-import AboutUsImage1 from '@/public/about-us/we/image 25.png';
-import AboutUsImage2 from '@/public/about-us/we/image 24.png';
-import AboutUsImage3 from '@/public/about-us/we/aboutus_1.jpeg';
+import { ActivityCard } from '@/component';
+
 import AboutUsImage4 from '@/public/about-us/we/aboutus_0.jpeg';
+import AboutUsImage3 from '@/public/about-us/we/aboutus_1.jpeg';
+import AboutUsImage2 from '@/public/about-us/we/image 24.png';
+import AboutUsImage1 from '@/public/about-us/we/image 25.png';
+
+import AOS from 'aos';
 
 const AboutUsWePage = () => {
+  useEffect(() => {
+    AOS.init({
+      once: true,
+    });
+  }, []);
+
   return (
     <>
       <div className="relative flex flex-col justify-center items-center min-h-[calc(100vh-65px)] bg-wink-100 overflow-hidden gap-8">
         <div className="absolute bottom-[15vh] left-1/2 w-[300vw] h-[300vw] bg-white rounded-[45%] animate-rotate"></div>
         <div className="absolute bottom-[12vh] left-1/2 w-[300vw] h-[300vw] bg-white rounded-[47%] opacity-50 animate-rotate"></div>
 
         <h1 className="z-10 text-center font-semibold text-3xl md:text-5xl md:leading-[64px]">
-
-          <span className="font-regular text-2xl md:text-5xl mb-8">
-            나만의 서비스. 기획. 개발
-          </span>
+          <span className="font-regular text-2xl md:text-5xl mb-8">나만의 서비스. 기획. 개발</span>
           <br />
           우리 안의 새로운 물결 WINK
         </h1>
@@ -32,19 +38,24 @@ const AboutUsWePage = () => {
         </p>
       </div>
       <div className="bg-wink-100 min-h-96 flex gap-8 justify-center">
-        <div>
+        <div data-aos="fade-right" data-aos-easing="ease-out" data-aos-duration="700">
           <h1 className="font-medium text-xl md:text-2xl">
             자꾸만 눈이 가는
             <br />
             멋진 모습
           </h1>
           <div className="flex justify-center pt-4">
-            <Image src={AboutUsImage1} alt="thumbnail" width={300} />
+            <Image src={AboutUsImage1} alt="thumbnail" width={300} className="rounded-3xl" />
           </div>
         </div>
-        <div>
+        <div
+          data-aos="fade-left"
+          data-aos-easing="ease-out"
+          data-aos-duration="1000"
+          data-aos-delay="1000"
+        >
           <div className="flex justify-center pb-4">
-            <Image src={AboutUsImage2} alt="thumbnail" width={300} />
+            <Image src={AboutUsImage2} alt="thumbnail" width={300} className="rounded-3xl" />
           </div>
           <h1>
             국민대학교 소프트웨어융합대학의
@@ -58,51 +69,53 @@ const AboutUsWePage = () => {
       <div className="bg-gradient-to-b from-wink-100 to-white h-32 md:h-64"></div>
       <div className="flex justify-center">
         <div className="max-w-2xl flex flex-col">
-          <h1 className="font-medium text-2xl md:text-4xl">
-            안녕하세요. 우리는 WINK 입니다.
-          </h1>
-          <div className="flex justify-center pt-4">
-            <Image src={AboutUsImage3} alt="thumbnail" width={672} />
+          <div data-aos="fade-bottom" data-aos-easing="ease-out" data-aos-duration="700">
+            <h1 className="font-medium text-2xl md:text-4xl">안녕하세요. 우리는 WINK 입니다.</h1>
+            <div className="flex justify-center pt-4">
+              <Image src={AboutUsImage3} alt="thumbnail" width={672} className="rounded-3xl" />
+            </div>
           </div>
 
-          <h1 className="font-medium text-2xl md:text-4xl pt-14">
-            우리는 어떤 길을 <br /> 걸어왔을까요?{' '}
-          </h1>
-          <div>
-            <ActivityCard
-              imageSrc={AboutUsImage4}
-              title="윙커톤"
-              description="서로의 우정이 두터워지는 무박 2 일 해커톤 여정"
-              description2="부원들과 함께 밤을 새며 새로운 서비스를 만들었어요. 지난 대회에서는 1 등을 차지했습니다."
-              isImageRight={false}
-            />
-          </div>
-          <div>
-            <ActivityCard
-              imageSrc={AboutUsImage4}
-              title="윙커톤"
-              description="서로의 우정이 두터워지는 무박 2 일 해커톤 여정"
-              description2="부원들과 함께 밤을 새며 새로운 서비스를 만들었어요. 지난 대회에서는 1 등을 차지했습니다."
-              isImageRight
-            />
-          </div>
-          <div>
-            <ActivityCard
-              imageSrc={AboutUsImage4}
-              title="윙커톤"
-              description="서로의 우정이 두터워지는 무박 2 일 해커톤 여정"
-              description2="부원들과 함께 밤을 새며 새로운 서비스를 만들었어요. 지난 대회에서는 1 등을 차지했습니다."
-              isImageRight={false}
-            />
-          </div>
-          <div>
-            <ActivityCard
-              imageSrc={AboutUsImage4}
-              title="윙커톤"
-              description="서로의 우정이 두터워지는 무박 2 일 해커톤 여정"
-              description2="부원들과 함께 밤을 새며 새로운 서비스를 만들었어요. 지난 대회에서는 1 등을 차지했습니다."
-              isImageRight
-            />
+          <div data-aos="fade-bottom" data-aos-easing="ease-out" data-aos-duration="700">
+            <h1 className="font-medium text-2xl md:text-4xl pt-14">
+              우리는 어떤 길을 <br /> 걸어왔을까요?{' '}
+            </h1>
+            <div data-aos="fade-right" data-aos-easing="ease-out" data-aos-duration="700">
+              <ActivityCard
+                image={AboutUsImage4}
+                title="윙커톤"
+                description1="서로의 우정이 두터워지는 무박 2 일 해커톤 여정"
+                description2="부원들과 함께 밤을 새며 새로운 서비스를 만들었어요. 지난 대회에서는 1 등을 차지했습니다."
+                isImageRight={false}
+              />
+            </div>
+            <div data-aos="fade-left" data-aos-easing="ease-out" data-aos-duration="700">
+              <ActivityCard
+                image={AboutUsImage4}
+                title="윙커톤"
+                description1="서로의 우정이 두터워지는 무박 2 일 해커톤 여정"
+                description2="부원들과 함께 밤을 새며 새로운 서비스를 만들었어요. 지난 대회에서는 1 등을 차지했습니다."
+                isImageRight={true}
+              />
+            </div>
+            <div data-aos="fade-right" data-aos-easing="ease-out" data-aos-duration="700">
+              <ActivityCard
+                image={AboutUsImage4}
+                title="윙커톤"
+                description1="서로의 우정이 두터워지는 무박 2 일 해커톤 여정"
+                description2="부원들과 함께 밤을 새며 새로운 서비스를 만들었어요. 지난 대회에서는 1 등을 차지했습니다."
+                isImageRight={false}
+              />
+            </div>
+            <div data-aos="fade-left" data-aos-easing="ease-out" data-aos-duration="700">
+              <ActivityCard
+                image={AboutUsImage4}
+                title="윙커톤"
+                description1="서로의 우정이 두터워지는 무박 2 일 해커톤 여정"
+                description2="부원들과 함께 밤을 새며 새로운 서비스를 만들었어요. 지난 대회에서는 1 등을 차지했습니다."
+                isImageRight={true}
+              />
+            </div>
           </div>
         </div>
       </div>

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -12,6 +12,9 @@ import { WinkApiApplication } from '@/api';
 
 import '@/style/globals.css';
 
+import 'aos/dist/aos.css';
+import 'aos/dist/aos.css';
+
 interface RootLayoutProps {
   children: React.ReactNode;
 }
@@ -21,7 +24,7 @@ const HIDE_FOOTER_PATHS = ['/auth', '/admin'];
 const RootLayout = ({ children }: RootLayoutProps) => {
   const pathname = usePathname();
 
-  const hideFooter = HIDE_FOOTER_PATHS.some(path => pathname.startsWith(path));
+  const hideFooter = HIDE_FOOTER_PATHS.some((path) => pathname.startsWith(path));
 
   return (
     <html lang="ko">

diff --git a/src/component/ActivityCard.tsx b/src/component/ActivityCard.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+
+import Image, { StaticImageData } from 'next/image';
+
+interface ActivityCardProps {
+  image: StaticImageData;
+  title: string;
+  description1: string;
+  description2: string;
+  isImageRight: boolean;
+}
+
+export const ActivityCard: React.FC<ActivityCardProps> = ({
+  image,
+  title,
+  description1,
+  description2,
+  isImageRight,
+}) => {
+  return (
+    <div className={`flex ${isImageRight ? 'flex-row-reverse' : 'flex-row'} items-center my-8`}>
+      <div className="w-1/2">
+        <Image
+          src={image}
+          alt={title}
+          width={500}
+          height={300}
+          className="object-cover rounded-3xl"
+        />
+      </div>
+      <div className="w-1/2 px-6">
+        <h3 className="text-lg font-medium text-blue-500 mb-4">{title}</h3>
+        <p className="font-medium text-xl mb-4">{description1}</p>
+        <p className="font-medium text-[#6B7684]">{description2}</p>
+      </div>
+    </div>
+  );
+};
diff --git a/src/component/index.ts b/src/component/index.ts
@@ -1,3 +1,4 @@
+export * from './ActivityCard';
 export * from './AdminSideBar';
 export * from './Button';
 export * from './Carousel';

diff --git a/yarn.lock b/yarn.lock
@@ -1715,6 +1715,11 @@
   resolved "https://registry.yarnpkg.com/@trysound/sax/-/sax-0.2.0.tgz#cccaab758af56761eb7bf37af6f03f326dd798ad"
   integrity sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==
 
+"@types/aos@^3.0.7":
+  version "3.0.7"
+  resolved "https://registry.yarnpkg.com/@types/aos/-/aos-3.0.7.tgz#81c60dde68d67b7ea941a37ec3638b88ac90001c"
+  integrity sha512-sEhyFqvKauUJZDbvAB3Pggynrq6g+2PS4XB3tmUr+mDL1gfDJnwslUC4QQ7/l8UD+LWpr3RxZVR/rHoZrLqZVg==
+
 "@types/cheerio@^0.22.35":
   version "0.22.35"
   resolved "https://registry.yarnpkg.com/@types/cheerio/-/cheerio-0.22.35.tgz#0d16dc1f24d426231c181b9c31847f673867595f"
@@ -2069,6 +2074,15 @@ anymatch@~3.1.2:
     normalize-path "^3.0.0"
     picomatch "^2.0.4"
 
+aos@^3.0.0-beta.6:
+  version "3.0.0-beta.6"
+  resolved "https://registry.yarnpkg.com/aos/-/aos-3.0.0-beta.6.tgz#75148e3be4bb1add53f5a1828623bf82b67691e9"
+  integrity sha512-VLWrpq8bfAWcetynVHMMrqdC+89Qq/Ym6UBJbHB4crIwp3RR8uq1dNGgsFzoDl03S43rlVMK+na3r5+oUCZsYw==
+  dependencies:
+    classlist-polyfill "^1.2.0"
+    lodash.debounce "^4.0.8"
+    lodash.throttle "^4.1.1"
+
 arg@^5.0.2:
   version "5.0.2"
   resolved "https://registry.yarnpkg.com/arg/-/arg-5.0.2.tgz#c81433cc427c92c4dcf4865142dbca6f15acd59c"
@@ -2399,6 +2413,11 @@ chokidar@^3.5.3:
   optionalDependencies:
     fsevents "~2.3.2"
 
+classlist-polyfill@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/classlist-polyfill/-/classlist-polyfill-1.2.0.tgz#935bc2dfd9458a876b279617514638bcaa964a2e"
+  integrity sha512-GzIjNdcEtH4ieA2S8NmrSxv7DfEV5fmixQeyTmqmRmRJPGpRBaSnA2a0VrCjyT8iW8JjEdMbKzDotAJf+ajgaQ==
+
 classnames@^2.2.5:
   version "2.5.1"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.5.1.tgz#ba774c614be0f016da105c858e7159eae8e7687b"
@@ -4173,6 +4192,11 @@ lodash.startcase@^4.4.0:
   resolved "https://registry.yarnpkg.com/lodash.startcase/-/lodash.startcase-4.4.0.tgz#9436e34ed26093ed7ffae1936144350915d9add8"
   integrity sha512-+WKqsK294HMSc2jEbNgpHpd0JfIBhp7rEV4aqXWqFr6AlXov+SlcgB1Fv01y2kGe3Gc8nMW7VA0SrGuSkRfIEg==
 
+lodash.throttle@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
+  integrity sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==
+
 lodash.uniq@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
@@ -5120,7 +5144,16 @@ string-convert@^0.2.0:
   resolved "https://registry.yarnpkg.com/string-convert/-/string-convert-0.2.1.tgz#6982cc3049fbb4cd85f8b24568b9d9bf39eeff97"
   integrity sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A==
 
-"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -5209,7 +5242,14 @@ string.prototype.trimstart@^1.0.8:
     define-properties "^1.2.1"
     es-object-atoms "^1.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -5634,7 +5674,16 @@ word-wrap@^1.2.5:
   resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.5.tgz#d2c45c6dd4fbce621a66f136cbe328afd0410b34"
   integrity sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
+wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==