Merge branch 'main' into feat-53-gradient

sprint6-part2 · May 15, 2024 · 2753ea4 · 2753ea4
2 parents 3c115da + 9c3fb52
commit 2753ea4
Show file tree

Hide file tree

Showing 11 changed files with 153 additions and 8 deletions.
diff --git a/index.html b/index.html
@@ -2,9 +2,47 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link
+      rel="icon"
+      type="image/svg+xml"
+      href="https://i.ibb.co/0V4VB3T/og-icon.png"
+    />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
+
+    <!-- Primary Meta Tags -->
+    <title>Fandom-K | 2팀</title>
+    <meta name="title" content="Fandom-K | 2팀" />
+    <meta name="author" content="6th code-It_Sprint Part2_Team2" />
+
+    <meta name="keywords" content="code-it, sprint, team2, Fandom-K" />
+    <meta
+      name="description"
+      content="FANDOM-K  내가 좋아하는 아이돌을 가장 쉽게 덕질하는 방법 | 코드잇 스프린트 6기 파트2 2팀의 팀프로젝트 입니다."
+    />
+
+    <!-- Open Graph -->
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="Fandom-K | 2팀" />
+    <meta
+      property="og:description"
+      content="FANDOM-K  내가 좋아하는 아이돌을 가장 쉽게 덕질하는 방법 | 코드잇 스프린트 6기 파트2 2팀의 팀프로젝트 입니다."
+    />
+    <meta
+      property="og:image"
+      content="https://i.ibb.co/rFXSh3N/2024-05-15-144817.png"
+    />
+
+    <!-- Twitter -->
+    <meta property="twitter:card" content="summary_large_image" />
+    <meta property="twitter:title" content="Fandom-K | 2팀" />
+    <meta
+      property="twitter:description"
+      content="FANDOM-K  내가 좋아하는 아이돌을 가장 쉽게 덕질하는 방법 | 코드잇 스프린트 6기 파트2 2팀의 팀프로젝트 입니다."
+    />
+    <meta
+      property="twitter:image"
+      content="https://i.ibb.co/rFXSh3N/2024-05-15-144817.png"
+    />
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/hooks/useScrollToTop.js b/src/hooks/useScrollToTop.js
@@ -0,0 +1,11 @@
+import { useEffect } from 'react';
+
+const useScrollToTop = () => {
+  useEffect(() => {
+    document.getElementById('root').scrollTo(0, 0);
+  }, []);
+
+  return null;
+};
+
+export default useScrollToTop;
diff --git a/src/hooks/useTitle.js b/src/hooks/useTitle.js
@@ -0,0 +1,12 @@
+import { useEffect, useState } from 'react';
+
+export function useTitle(initialTitle) {
+  const [title, setTitle] = useState(initialTitle);
+  const updateTitle = () => {
+    const htmlTitle = document.querySelector('title');
+    htmlTitle.innerText = title;
+  };
+
+  useEffect(updateTitle, [title]);
+  return setTitle;
+}
diff --git a/src/pages/LandingPage/components/index.jsx b/src/pages/LandingPage/components/index.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import styles from './styles.module.scss';
 import classNames from 'classnames';
+import { motion } from 'framer-motion';
 
 const Description = ({ backgroundImg, mainImg, title, mainText }) => {
   const text = classNames(styles.text, {
@@ -14,11 +15,33 @@ const Description = ({ backgroundImg, mainImg, title, mainText }) => {
         alt="아이돌 사진"
         className={styles.background_image}
       />
-      <div className={text}>
+      <motion.div
+        initial={{ opacity: 0, x: 50 }}
+        whileInView={{ opacity: 1, x: 0 }}
+        viewport={{ once: false }}
+        transition={{
+          ease: 'easeInOut',
+          duration: 2,
+          x: { duration: 1 },
+        }}
+        className={text}
+      >
         <span className={styles.title}>{title}</span>
         <p className={styles.main_text}>{mainText}</p>
-      </div>
-      <img src={mainImg} alt="사이트 캡쳐" className={styles.main_image} />
+      </motion.div>
+      <motion.img
+        initial={{ opacity: 0, x: -50 }}
+        whileInView={{ opacity: 1, x: 0 }}
+        viewport={{ once: false }}
+        transition={{
+          ease: 'easeInOut',
+          duration: 2,
+          x: { duration: 1 },
+        }}
+        src={mainImg}
+        alt="사이트 캡쳐"
+        className={styles.main_image}
+      />
     </section>
   );
 };

diff --git a/src/pages/LandingPage/index.jsx b/src/pages/LandingPage/index.jsx
@@ -11,10 +11,42 @@ import sectionImage1 from '@/assets/images/capture1.png';
 import sectionImage2 from '@/assets/images/capture2.png';
 import sectionImage3 from '@/assets/images/capture3.png';
 import { setStorage } from '@/utils/localStorage';
+import { useTitle } from '@/hooks/useTitle';
+import { motion } from 'framer-motion';
+import useScrollToTop from '@/hooks/useScrollToTop';
+import { useEffect } from 'react';
 
 const LadingPage = () => {
+  useTitle('FANDOM-K | Randing Page');
+  useScrollToTop();
   const navigate = useNavigate();
 
+  useEffect(() => {
+    const asciiArt = `
+  -------------------------------------------------------------------------------------------------
+  |                                                                                               |
+  |                      _____ ____  _____  ______    _____ _______                               |
+  |                     / ____/ __ \\|  __ \\|  ____|  |_   _|__   __|                              |         
+  |                     | |   | |  | | |  | | |__ ______| |    | |                                |                 
+  |                     | |   | |  | | |  | |  __|______| |    | |                                |                
+  |                     | |___| |__| | |__| | |____    _| |_   | |                                |                
+  |                    \\_____|\\____/|_____/|______|_| |_____|__|_|                                |               
+  |                      / ____|  __ \\|  __ \\|_   _| \\ | |__   __|                                |               
+  |                     | (___ | |__) | |__) | | | |  \\| |  | |                                   |                
+  |                      \\___ \\|  ___/|  _  /  | | | . \` |  | |                                   |
+  |                      ____) | |    | | \\ \\ _| |_| |\\  |  | |                                   |
+  |                     |_____/|_|__ _|_| _\\_\\_____|_|_\\_|__|_|       __  __   ___                |
+  |                       / /__   __| |  | | |__   __|  ____|   /\\   |  \\/  | |__ \\               |
+  |                      / /_  | |  | |__| |    | |  | |__     /  \\  | \\  / |    ) |              |
+  |                     | '_ \\ | |  |  __  |    | |  |  __|   / /\\ \\ | |\\/| |   / /               |
+  |                     | (_) || |  | |  | |    | |  | |____ / ____ \\| |  | |  / /_               |
+  |                      \\___/ |_|  |_|  |_|    |_|  |______/_/    \\_\\_|  |_| |____|              |
+  |                                                                                               |
+  ------------------------------------------------------------------------------------------------
+    `;
+    console.log(asciiArt);
+  }, []);
+
   const handleStartBtn = () => {
     setStorage('credit', 0);
     navigate('/list');
@@ -32,7 +64,17 @@ const LadingPage = () => {
             <div className={styles.logo}>
               <Logo width="100%" height="100%" />
             </div>
-            <img src={mainBackgroundImage} alt="아이돌 사진" />
+            <motion.img
+              initial={{ opacity: 0 }}
+              whileInView={{ opacity: 0.4 }}
+              viewport={{ once: false }}
+              transition={{
+                ease: 'easeInOut',
+                duration: 3,
+              }}
+              src={mainBackgroundImage}
+              alt="아이돌 사진"
+            />
           </div>
           <div className={styles.start_btn}>
             <CustomButton

diff --git a/src/pages/LandingPage/styles.module.scss b/src/pages/LandingPage/styles.module.scss
@@ -76,7 +76,7 @@
     position: absolute;
     width: 932px;
     height: 781px;
-    opacity: 50%;
+    opacity: 40%;
     z-index: 0;
 
     @media (max-width: $width-tablet) {
@@ -95,14 +95,17 @@
   }
 
   p {
+    margin-top: 45px;
     z-index: 1;
     @include font-base(white, 700, 26px, 31px);
     text-align: center;
 
     @media (max-width: $width-tablet) {
+      margin-top: 0;
       @include font-base(white, 700, 20px, 24px);
     }
     @media (max-width: $width-mobile) {
+      margin-top: 0;
       @include font-base(white, 400, 20px, 24px);
     }
 

diff --git a/src/pages/ListPage/MonthlyChart/components/ChartModal/index.jsx b/src/pages/ListPage/MonthlyChart/components/ChartModal/index.jsx
@@ -124,7 +124,7 @@ const ChartModal = ({ isOpen, closeModal, currentTab, setIsVote }) => {
                         clicked={selectedIdol === idol}
                       />
                       <div className={style.text}>
-                        <span>{idol.rank}</span>
+                        <span>{index + 1}</span>
                         <div className={style.name}>
                           <span>
                             {idol.group} {idol.name}

diff --git a/src/pages/ListPage/index.jsx b/src/pages/ListPage/index.jsx
@@ -4,8 +4,12 @@ import style from './styles.module.scss';
 import Credit from './Credit';
 import MonthlyChart from './MonthlyChart';
 import Footer from '@/components/Footer';
+import { useTitle } from '@/hooks/useTitle';
+import useScrollToTop from '@/hooks/useScrollToTop';
 
 const ListPage = () => {
+  useTitle('FANDOM-K | List Page');
+  useScrollToTop();
   return (
     <div className={style.container}>
       <main className={style.main}>

diff --git a/src/pages/MyPage/index.jsx b/src/pages/MyPage/index.jsx
@@ -11,8 +11,11 @@ import { debounce } from '@/utils/debounce';
 import { sortByItems } from '@/utils/sortItems';
 import { getStorage, setStorage } from '@/utils/localStorage';
 
+
 import useLoad from '@/hooks/useLoad';
 import { getIdolData } from '@/apis/getIdolData';
+import { useTitle } from '@/hooks/useTitle';
+import useScrollToTop from '@/hooks/useScrollToTop';
 
 const ITEM_COUNTS = 100;
 
@@ -23,6 +26,9 @@ const INITIAL_VALUE = {
 };
 
 const MyPage = ({ pageSize = ITEM_COUNTS, keyword = '' }) => {
+  useTitle('FANDOM-K | My Page');
+  useScrollToTop();
+
   const [idolList, setIdolList] = useState(INITIAL_VALUE);
   const [isLoading, loadingError, handleLoad] = useLoad(getIdolData);
   const [windowWidth, setWindowWidth] = useState(window.innerWidth);

diff --git a/src/pages/NotFoundPage/index.jsx b/src/pages/NotFoundPage/index.jsx
@@ -6,8 +6,12 @@ import Idol2 from '@/assets/images/newjeans.jpg';
 import Idol3 from '@/assets/images/seventeen.jpg';
 import Idol4 from '@/assets/images/aespa.jpg';
 import style from './styles.module.scss';
+import { useTitle } from '@/hooks/useTitle';
+import useScrollToTop from '@/hooks/useScrollToTop';
 
 const NotFoundPage = () => {
+  useTitle('FANDOM-K | Not Found Page');
+  useScrollToTop();
   const navigate = useNavigate();
 
   const idolList = [Idol1, Idol2, Idol3, Idol4];

diff --git a/src/pages/TestPage/index.jsx b/src/pages/TestPage/index.jsx
@@ -10,8 +10,10 @@ import ModalHeader from '@/components/Modal/components/ModalHeader';
 import Profile from '@/components/Profile';
 import LoadingError from '@/components/LoadingError';
 import Spinner from '@/assets/icons/Spinner';
+import { useTitle } from '@/hooks/useTitle';
 
 const TestPage = () => {
+  useTitle('FANDOM-K | Test Page');
   const [isOpen, openModal, closeModal] = useModal();
 
   return (