[FE] 서비스 메인 배너 디자인 수정(#538) (#549)

* feat: 서비스 로고 이미지 추가 * design: Header 디자인 수정 * design: 배너 디자인 수정 --------- Co-authored-by: 00kang <[email protected]>
woowacourse-teams · Oct 11, 2024 · cfff6c6 · cfff6c6
1 parent 5966096
commit cfff6c6
Show file tree

Hide file tree

Showing 8 changed files with 84 additions and 117 deletions.
diff --git a/frontend/src/assets/coreaLogo/coreaMainLogo.svg b/frontend/src/assets/coreaLogo/coreaMainLogo.svg
diff --git a/frontend/src/assets/index.ts b/frontend/src/assets/index.ts
@@ -22,3 +22,5 @@ export { default as frontendLogo } from "@/assets/logo/javascript-logo.svg";
 export { default as rank1 } from "@/assets/ranking/rank-1.svg";
 export { default as rank2 } from "@/assets/ranking/rank-2.svg";
 export { default as rank3 } from "@/assets/ranking/rank-3.svg";
+
+export { default as mainLogo } from "@/assets/coreaLogo/coreaMainLogo.svg";
diff --git a/frontend/src/components/common/header/Header.style.ts b/frontend/src/components/common/header/Header.style.ts
@@ -30,17 +30,18 @@ export const HeaderContainer = styled.header<{ $isMain: boolean }>`
 `;
 
 // 서비스 로고
-export const HeaderLogo = styled.button<{ $isMain: boolean }>`
-  font-family: "Moirai One", system-ui;
-  font-size: 3rem;
-  font-weight: 900;
-  color: ${({ theme, $isMain }) => ($isMain ? theme.COLOR.white : theme.COLOR.grey3)};
-
+export const HeaderLogo = styled.button`
+  display: flex;
+  gap: 0.8rem;
+  align-items: center;
   background: transparent;
 
-  ${media.small`
-    color: ${({ theme }) => theme.COLOR.black};
-  `}
+  span {
+    font-family: "Moirai One", system-ui;
+    font-size: 3rem;
+    font-weight: 900;
+    color: ${({ theme }) => theme.COLOR.grey4};
+  }
 `;
 
 // 네비게이션
@@ -58,11 +59,8 @@ export const HeaderItem = styled.li<{ $isMain: boolean }>`
 
   font: ${({ theme }) => theme.TEXT.large};
   font-family: "Do Hyeon", sans-serif;
-  color: ${({ theme, $isMain }) => ($isMain ? theme.COLOR.white : theme.COLOR.grey3)};
+  color: ${({ theme }) => theme.COLOR.grey3};
 
-  ${media.small`
-    color: ${({ theme }) => theme.COLOR.black};
-  `}
   transition: 0.3s;
 
   &:hover,

diff --git a/frontend/src/components/common/header/Header.tsx b/frontend/src/components/common/header/Header.tsx
@@ -42,8 +42,8 @@ const Header = () => {
 
   return (
     <S.HeaderContainer $isMain={isMain}>
-      <S.HeaderLogo $isMain={isMain} onClick={() => handlePage("/", "")}>
-        CoReA
+      <S.HeaderLogo onClick={() => handlePage("/", "")}>
+        <span>CoReA</span>
       </S.HeaderLogo>
       <S.HeaderNavBarContainer>
         {headerItems.map((item) => (

diff --git a/frontend/src/components/main/banner/Banner.style.ts b/frontend/src/components/main/banner/Banner.style.ts
@@ -2,29 +2,54 @@ import styled from "styled-components";
 import media from "@/styles/media";
 
 export const BannerContainer = styled.div`
-  position: relative;
-  z-index: -1;
-
   display: flex;
+  gap: 10rem;
   align-items: center;
   justify-content: center;
 
   width: 100vw;
   height: 400px;
-  margin: -113px calc(-50vw + 50%) 0;
+  margin: -113px calc(-50vw + 50%) 2rem;
 
   font-family: "Do Hyeon", sans-serif;
 
-  background: linear-gradient(to bottom, #ff7e5f, #feb47b, ${({ theme }) => theme.COLOR.white});
+  background: linear-gradient(to right, rgb(255 250 245 / 100%), rgb(230 230 255 / 100%));
 
   ${media.small`
     display:none;
   `}
+  ${media.medium`
+    gap: 1rem;
+  `};
+`;
+
+export const ImageWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  height: 100%;
+  margin-top: 65px;
+
+  img {
+    width: 20rem;
+  }
+
+  ${media.medium`
+    img {
+      width: 18rem;
+    }
+  `}
 `;
 
-export const BannerTextContainer = styled.p`
+export const BannerTextContainer = styled.div`
   display: flex;
   flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  height: 100%;
+  margin-top: 65px;
 `;
 
 export const BannerText = styled.p`
@@ -37,90 +62,16 @@ export const BannerText = styled.p`
 
   color: ${({ theme }) => theme.COLOR.white};
   text-shadow:
-    2px 2px 5px rgb(0 0 0 / 30%),
-    4px 4px 10px rgb(0 0 0 / 10%);
+    2px 2px 5px rgb(0 0 0 / 40%),
+    4px 4px 10px rgb(0 0 0 / 20%);
 
   span {
-    font: ${({ theme }) => theme.TEXT.large_bold};
+    font: ${({ theme }) => theme.TEXT.xLarge_bold};
   }
-`;
-
-export const BannerSubText = styled.p`
-  margin: 0 auto;
-  font: ${({ theme }) => theme.TEXT.large_bold};
-  color: ${({ theme }) => theme.COLOR.grey0};
-  text-align: center;
-
-  span {
-    font: ${({ theme }) => theme.TEXT.large_bold};
-  }
-`;
-
-export const Sunlight = styled.div`
-  position: absolute;
-  background: rgb(255 255 255 / 20%);
-  border-radius: 50%;
-
-  &.sun {
-    top: -70px;
-    right: -30px;
-
-    width: 150px;
-    height: 150px;
 
-    background: rgb(255 255 255 / 50%);
-    filter: blur(10px);
-    box-shadow: 0 0 60px 40px rgb(255 255 255 / 20%);
-  }
-
-  &.sunlight-1 {
-    top: -110px;
-    right: -70px;
-
-    width: 250px;
-    height: 250px;
-
-    background: rgb(255 255 255 / 20%);
-    filter: blur(10px);
-  }
-
-  &.sunlight-2 {
-    top: 75px;
-    right: 85px;
-
-    width: 40px;
-    height: 40px;
-
-    filter: blur(3px);
-  }
-
-  &.sunlight-3 {
-    top: 135px;
-    right: 135px;
-
-    width: 20px;
-    height: 20px;
-
-    filter: blur(2px);
-  }
-
-  &.sunlight-4 {
-    top: 170px;
-    right: 160px;
-
-    width: 60px;
-    height: 60px;
-
-    filter: blur(3px);
-  }
-
-  &.sunlight-5 {
-    top: 190px;
-    right: 170px;
-
-    width: 100px;
-    height: 100px;
-
-    filter: blur(5px);
-  }
+  ${media.medium`
+    span {
+      font: ${({ theme }) => theme.TEXT.large_bold};
+    }
+  `}
 `;
diff --git a/frontend/src/components/main/banner/Banner.tsx b/frontend/src/components/main/banner/Banner.tsx
@@ -1,18 +1,16 @@
 import CyclingClasses from "./CyclingClasses";
 import * as S from "@/components/main/banner/Banner.style";
+import { mainLogo } from "@/assets";
 
 const firstItems = ["코드", "개발자", "리뷰", "리뷰어", "리뷰이"];
 const secondItems = ["리뷰", "코드", "리뷰어", "개발자", "리뷰이"];
 
 const Banner = () => {
   return (
     <S.BannerContainer>
-      <S.Sunlight className="sun" />
-      <S.Sunlight className="sunlight-1" />
-      <S.Sunlight className="sunlight-2" />
-      <S.Sunlight className="sunlight-3" />
-      <S.Sunlight className="sunlight-4" />
-      <S.Sunlight className="sunlight-5" />
+      <S.ImageWrapper>
+        <img src={mainLogo} />
+      </S.ImageWrapper>
 
       <S.BannerTextContainer>
         <S.BannerText>
@@ -21,9 +19,6 @@ const Banner = () => {
           <CyclingClasses items={secondItems} speed={3700} />
           <span>를 연결합니다</span>
         </S.BannerText>
-        <S.BannerSubText>
-          주니어 개발자를 위한 <span>코드 리뷰 플랫폼</span>
-        </S.BannerSubText>
       </S.BannerTextContainer>
     </S.BannerContainer>
   );

diff --git a/frontend/src/components/main/banner/CyclingClasses.style.ts b/frontend/src/components/main/banner/CyclingClasses.style.ts
@@ -1,4 +1,5 @@
 import styled from "styled-components";
+import media from "@/styles/media";
 
 export const CyclingContainer = styled.div`
   overflow: hidden;
@@ -12,12 +13,12 @@ export const CyclingList = styled.ul`
   flex-direction: column;
   align-items: flex-end;
 
-  width: 140px;
-  height: 48px;
+  width: 160px;
+  height: 52px;
   padding: 0.2rem;
 
   font-family: "Do Hyeon", sans-serif;
-  font-size: 7.2rem;
+  font-size: 8rem;
 
   li {
     position: absolute;
@@ -39,4 +40,10 @@ export const CyclingList = styled.ul`
     opacity: 1;
     transition: all 1.3s;
   }
+
+  ${media.medium`
+    width: 120px;
+    height: 40px;
+    font-size: 6.4rem;
+  `}
 `;
diff --git a/frontend/src/components/main/banner/CyclingClasses.tsx b/frontend/src/components/main/banner/CyclingClasses.tsx
@@ -1,7 +1,12 @@
 import { useEffect, useState } from "react";
 import * as S from "@/components/main/banner/CyclingClasses.style";
 
-const CyclingClasses = ({ items, speed }: { items: string[]; speed: number }) => {
+interface CyclingClassesProps {
+  items: string[];
+  speed: number;
+}
+
+const CyclingClasses = ({ items, speed }: CyclingClassesProps) => {
   const [currentIndex, setCurrentIndex] = useState(0);
 
   useEffect(() => {
@@ -25,7 +30,7 @@ const CyclingClasses = ({ items, speed }: { items: string[]; speed: number }) =>
 
           return (
             <li key={index} className={className}>
-              "{item}"
+              {`"${item}"`}
             </li>
           );
         })}