Merge branch 'feat-53-gradient' of https://github.com/sprint6-part2/f…

…andom-k into feat-53-gradient
sprint6-part2 · May 15, 2024 · 51fbebf · 51fbebf
2 parents 0dc2d82 + 2753ea4
commit 51fbebf
Show file tree

Hide file tree

Showing 38 changed files with 845 additions and 74 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/apis/postVotes.js b/src/apis/postVotes.js
@@ -0,0 +1,13 @@
+import { baseAxios } from './api';
+import { votesErrorMessage } from '@/constants/errorMessage';
+
+export const postVotes = async (idolId) => {
+  try {
+    const response = await baseAxios.post('/votes', {
+      idolId,
+    });
+    return response.data;
+  } catch (error) {
+    throw new Error(votesErrorMessage);
+  }
+};
diff --git a/src/apis/putContribute.js b/src/apis/putContribute.js
@@ -0,0 +1,13 @@
+import { baseAxios } from './api';
+import { contributeErrorMessage } from '@/constants/errorMessage';
+
+export const putContribute = async (id, amount) => {
+  try {
+    const response = await baseAxios.put(`/donations/${id}/contribute`, {
+      amount,
+    });
+    return response.data;
+  } catch (error) {
+    throw new Error(contributeErrorMessage);
+  }
+};
diff --git a/src/assets/images/capture1.png b/src/assets/images/capture1.png
diff --git a/src/assets/images/capture2.png b/src/assets/images/capture2.png
diff --git a/src/assets/images/capture3.png b/src/assets/images/capture3.png
diff --git a/src/assets/images/girls_generation.svg b/src/assets/images/girls_generation.svg
diff --git a/src/assets/images/github.png b/src/assets/images/github.png
diff --git a/src/assets/images/nct.svg b/src/assets/images/nct.svg
diff --git a/src/assets/images/newjeans2.svg b/src/assets/images/newjeans2.svg
diff --git a/src/assets/images/redvelvet.png b/src/assets/images/redvelvet.png
diff --git a/src/components/Carousel/styles.module.scss b/src/components/Carousel/styles.module.scss
@@ -1,3 +1,8 @@
+@import '../../styles/';
+
+$color-arrow: #373737;
+$color-arrow-hover: #2f2f2f;
+
 .arrow {
   display: flex;
   align-items: center;
@@ -8,11 +13,15 @@
   margin-inline: 15px;
   border-radius: 6.67px;
 
-  background-color: #1b1b1b;
+  background-color: $color-arrow;
   opacity: 0.8;
   transition: opacity 0.5s ease;
 
   cursor: pointer;
+
+  &:hover {
+    background-color: $color-arrow-hover;
+  }
 }
 
 .longArrow {

diff --git a/src/components/Footer/index.jsx b/src/components/Footer/index.jsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import GithubLogo from '@/assets/images/github.png';
+import style from './styles.module.scss';
+
+const Footer = () => {
+  return (
+    <footer className={style.footer}>
+      <span>
+        @ Codeit <span>2024, Inc.</span>
+      </span>
+      <span>
+        <span>6기 2조 </span>Fandom-K
+      </span>
+      <div>
+        <img
+          src={GithubLogo}
+          width={20}
+          onClick={() =>
+            window.open('https://github.com/sprint6-part2/fandom-k')
+          }
+        />
+        <span>GitHub</span>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;
diff --git a/src/components/Footer/styles.module.scss b/src/components/Footer/styles.module.scss
@@ -0,0 +1,42 @@
+@import '../../styles/';
+
+.footer {
+  max-width: 1360px;
+  margin: 0 auto;
+  text-align: center;
+  padding-block: 50px;
+
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+
+  @include font-base(white, 400, 15px, 26px);
+  letter-spacing: 0.5px;
+  opacity: 60%;
+
+  > div {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    img {
+      margin-bottom: 4px;
+    }
+  }
+
+  @media (max-width: 500px) {
+    font-size: 13px;
+
+    > span {
+      > span {
+        display: none;
+      }
+    }
+
+    > div {
+      span {
+        display: none;
+      }
+    }
+  }
+}
diff --git a/src/constants/errorMessage.js b/src/constants/errorMessage.js
@@ -1 +1,3 @@
 export const loadingErrorMessage = '로딩에 실패하였습니다 \n다시 시도해주세요';
+export const contributeErrorMessage = '후원에 실패하였습니다';
+export const votesErrorMessage = '투표에 실패하였습니다';
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
@@ -0,0 +1,49 @@
+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, {
+    [styles.end]: title === '이달의 아티스트',
+  });
+  return (
+    <section className={styles.description_section}>
+      <div className={styles.background_gradient} />
+      <img
+        src={backgroundImg}
+        alt="아이돌 사진"
+        className={styles.background_image}
+      />
+      <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>
+      </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>
+  );
+};
+
+export default Description;
diff --git a/src/pages/LandingPage/components/styles.module.scss b/src/pages/LandingPage/components/styles.module.scss
@@ -0,0 +1,115 @@
+@import '../../../styles/';
+
+$color-yellow-title: #d2c030;
+
+.description_section {
+  width: 100%;
+  height: 1200px;
+  position: relative;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 60px;
+
+  @media (max-width: $width-tablet) {
+    height: 744px;
+    gap: 47px;
+  }
+  @media (max-width: $width-mobile) {
+    height: 812px;
+    gap: 66px;
+  }
+}
+
+.background_gradient {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+
+  background: radial-gradient(
+    50% 50% at 50% 50%,
+    rgba(2, 0, 14, 0) 0%,
+    rgba(2, 0, 14, 0.180099) 37.5%,
+    rgba(2, 0, 14, 0.5) 79.5%,
+    #02000e 100%
+  );
+}
+.background_image {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+  opacity: 20%;
+
+  @media (max-width: $width-tablet) {
+    width: 744px;
+  }
+  @media (max-width: $width-mobile) {
+    width: 375px;
+  }
+}
+
+.main_image {
+  z-index: 3;
+  width: 320px;
+  height: 694px;
+
+  @media (max-width: $width-tablet) {
+    width: 200px;
+    height: 434px;
+  }
+  @media (max-width: $width-mobile) {
+    width: 240px;
+    height: 520px;
+  }
+}
+
+.text {
+  z-index: 3;
+  width: 100%;
+  margin-top: 160px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+
+  @media (max-width: $width-tablet) {
+    margin-top: 74px;
+  }
+  @media (max-width: $width-mobile) {
+    align-items: flex-start;
+    padding: 0 12px;
+
+    &.end {
+      align-items: flex-end;
+      p {
+        text-align: right;
+      }
+    }
+  }
+
+  span {
+    @include font-base($color-yellow-title, 500, 16px, 19px);
+
+    @media (max-width: $width-mobile) {
+      @include font-base($color-yellow-title, 500, 14px, 17px);
+    }
+  }
+
+  p {
+    white-space: pre-wrap;
+    @include font-base(white, 700, 24px, 29px);
+    text-align: center;
+
+    @media (max-width: $width-tablet) {
+      @include font-base(white, 500, 16px, 24px);
+    }
+
+    @media (max-width: $width-mobile) {
+      @include font-base(white, 500, 20px, 24px);
+      text-align: start;
+    }
+  }
+}