From 34de63b25d428d6a9367bf45516adac4e0d668c7 Mon Sep 17 00:00:00 2001
From: gracefulBrown <brown@woowahan.com>
Date: Tue, 5 Apr 2022 17:05:28 +0900
Subject: [PATCH] feature(banner)

---
 frontend/src/configs/bannerList.tsx | 66 ++++++++++++++++++-----------
 frontend/src/constants/color.js     | 20 +++++++++
 2 files changed, 61 insertions(+), 25 deletions(-)

diff --git a/frontend/src/configs/bannerList.tsx b/frontend/src/configs/bannerList.tsx
index a446d991a..e75beeb4c 100644
--- a/frontend/src/configs/bannerList.tsx
+++ b/frontend/src/configs/bannerList.tsx
@@ -2,49 +2,65 @@ import { BannerType } from '../components/Banner/Banner';
 import { COLOR } from '../constants';
 
 import prologIcon from '../assets/images/prolog-banner-image.png';
-import wootecoIcon from '../assets/images/woteco-logo.png';
+import reportIcon from '../assets/images/report.png';
+import rssIcon from '../assets/images/rss.png';
 
 // TODO: textContents Template Literal로 변경
 const bannerList: BannerType[] = [
   {
-    backgroundColor: COLOR.DARK_BLUE_800,
-    sideImageUrl: prologIcon,
+    backgroundColor: COLOR.RED_200,
+    sideImageUrl: reportIcon,
     textContents: (
-      <>
-        <br />
-        <p>내가 안다고 생각한게 진짜 아는걸까?🧐</p>
-        <p>
-          <strong>학습로그</strong>를 작성하며 메타인지를 경험해보세요!
-        </p>
-        <h2>PROLOG</h2>
-      </>
+        <>
+          <p>셀프체크시트는 이제 그만!</p>
+          <h2>리포트 기능 오픈 </h2>
+        </>
     ),
-    reverse: false,
-    sideImagePadding: 0,
+    reverse: true,
+    showMoreLink: 'https://dev.prolog.techcourse.co.kr/studylogs/2171',
+    showMoreLinkText: '자세히 알아보기',
+    sideImagePadding: 10,
+  },  {
+    backgroundColor: COLOR.LIGHT_BLUE_300,
+    textContents: (
+        <>
+          <p>인기있는 학습로그에 도전!</p>
+          <h2>인기있는 학습로그 오픈 🎉</h2>
+        </>
+    ),
+    showMoreLink: 'https://dev.prolog.techcourse.co.kr/studylogs/2171',
+    showMoreLinkText: '자세히 알아보기',
+    sideImagePadding: 10,
   },
   {
-    backgroundColor: COLOR.WHITE,
-    sideImageUrl: wootecoIcon,
+    backgroundColor: COLOR.LIGHT_GRAY_50,
+    sideImageUrl: rssIcon,
     textContents: (
       <>
-        <p>자기주도 학습 ∙ 현장중심 경험 ∙ 깊이있는 협업</p>
-        <h2>우아한테크코스</h2>
+        <p>학습로그도 슬랙으로 확인하세요~~</p>
+        <h2>RSS 기능 오픈 🎉</h2>
       </>
     ),
-    reverse: true,
-    showMoreLink: 'https://woowacourse.github.io/',
-    showMoreLinkText: '알아보러가기',
+    reverse: false,
+    showMoreLink: 'https://dev.prolog.techcourse.co.kr/studylogs/2171',
+    showMoreLinkText: '자세히 알아보기',
     sideImagePadding: 10,
   },
   {
-    backgroundColor: COLOR.RED_600,
+    backgroundColor: COLOR.DARK_BLUE_800,
+    sideImageUrl: prologIcon,
     textContents: (
-      <>
-        <h2>(환) 우아한테크코스 4기🥳 (영)</h2>
-        <p>4기 크루 드루와 드루와~~</p>
-      </>
+        <>
+          <br />
+          <p>내가 안다고 생각한게 진짜 아는걸까?🧐</p>
+          <p>
+            <strong>학습로그</strong>를 작성하며 메타인지를 경험해보세요!
+          </p>
+          <h2>PROLOG</h2>
+        </>
     ),
     reverse: false,
+    sideImagePadding: 0,
   },
 ];
 
diff --git a/frontend/src/constants/color.js b/frontend/src/constants/color.js
index b77c2ac6d..bcd3c24b2 100644
--- a/frontend/src/constants/color.js
+++ b/frontend/src/constants/color.js
@@ -22,6 +22,26 @@ const COLOR = {
   LIGHT_BLUE_800: '#579bca',
   LIGHT_BLUE_900: '#4490c4',
 
+  GREEN_100: '#C8E6C9',
+  GREEN_200: '#A5D6A7',
+  GREEN_300: '#81C784',
+  GREEN_400: '#66BB6A',
+  GREEN_500: '#4CAF50',
+  GREEN_600: '#43A047',
+  GREEN_700: '#388E3C',
+  GREEN_800: '#2E7D32',
+  GREEN_900: '#1B5E20',
+
+  YELLOW_100: '#FFF9C4',
+  YELLOW_200: '#FFF59D',
+  YELLOW_300: '#FFF176',
+  YELLOW_400: '#FFEE58',
+  YELLOW_500: '#FFEB3B',
+  YELLOW_600: '#FDD835',
+  YELLOW_700: '#FBC02D',
+  YELLOW_800: '#F9A825',
+  YELLOW_900: '#F57F17',
+
   DARK_BLUE_300: '#3275a9',
   DARK_BLUE_400: '#2c6796',
   DARK_BLUE_500: '#265a82',