feat : 홈 캐러셀 구현

Ubinquitous · Ubinquitous · commit 388c79e59f94 · 2023-11-21T13:00:25.000+09:00
diff --git a/package.json b/package.json
@@ -48,6 +48,7 @@
     "react-d3-radar": "^1.0.0-rc6",
     "react-dom": "18.2.0",
     "react-infinite-scroll-component": "^6.1.0",
+    "react-responsive-carousel": "^3.2.23",
     "react-scroll-horizontal": "^1.6.6",
     "react-slick": "^0.29.0",
     "react-spinner": "^0.2.7",
@@ -74,7 +75,7 @@
     "@types/graphql": "^14.5.0",
     "@types/jest": "^29.2.4",
     "@types/react-beautiful-dnd": "^13.1.3",
-    "@types/react-slick": "^0.23.10",
+    "@types/react-slick": "^0.23.12",
     "@typescript-eslint/parser": "^5.43.0",
     "autoprefixer": "^10.4.13",
     "babel-plugin-styled-components": "^2.1.4",
diff --git a/public/mockServiceWorker.js b/public/mockServiceWorker.js
@@ -2,7 +2,7 @@
 /* tslint:disable */
 
 /**
- * Mock Service Worker (1.3.1).
+ * Mock Service Worker (1.3.2).
  * @see https://github.com/mswjs/msw
  * - Please do NOT modify this file.
  * - Please do NOT serve this file on production.
diff --git a/src/assets/images/banner/banner1.png b/src/assets/images/banner/banner1.png
diff --git a/src/assets/images/banner/banner2.png b/src/assets/images/banner/banner2.png
diff --git a/src/assets/images/banner/banner3.png b/src/assets/images/banner/banner3.png
diff --git a/src/assets/images/banner/banner4.svg b/src/assets/images/banner/banner4.svg
@@ -0,0 +1,79 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="_레이어_2" data-name="레이어 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1049.34 424.18">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #f47a35;
+      }
+
+      .cls-2 {
+        fill: #221e1f;
+      }
+
+      .cls-3 {
+        fill: #f15a28;
+      }
+
+      .cls-4, .cls-5 {
+        fill: #ffc20c;
+      }
+
+      .cls-4, .cls-6 {
+        stroke: #2e2310;
+      }
+
+      .cls-4, .cls-6, .cls-7 {
+        stroke-miterlimit: 10;
+      }
+
+      .cls-4, .cls-7 {
+        stroke-width: 8px;
+      }
+
+      .cls-8 {
+        fill: #2f2004;
+      }
+
+      .cls-6 {
+        fill: none;
+        stroke-linecap: round;
+        stroke-width: 6px;
+      }
+
+      .cls-7 {
+        fill: #fff;
+        stroke: #2f2004;
+      }
+    </style>
+  </defs>
+  <g id="Layer_1" data-name="Layer 1">
+    <g>
+      <g>
+        <g>
+          <path class="cls-4" d="m186.62,403.29c-86.64-2.08-153.4-54.68-168.68-149.88-7.17-44.64,16.11-111.95,44.09-143.24,32.7-36.57,71.45-61.3,124.59-61.3"/>
+          <path class="cls-4" d="m186.62,403.29c86.64-2.08,153.4-54.68,168.68-149.88,7.17-44.64-16.11-111.95-44.09-143.24-32.7-36.57-71.45-61.3-124.59-61.3"/>
+        </g>
+        <path class="cls-7" d="m186.4,420.18c-32.31,0-65-7.31-94.4-22.88-48.99-25.95-66.88-62.79-77.93-95.41-11.86-35.06-10-86.46-9.91-88.63.13-3.32,2.07-6.31,5.05-7.79,2.98-1.48,6.53-1.21,9.26.7,21.26,14.9,45.02,31.29,54.94,37.76l49.66-39.34c3.18-2.52,7.66-2.62,10.95-.26l53.96,38.77,51.45-38.19c3.25-2.4,7.68-2.39,10.91.05l50.49,38.19,52.4-37.25c2.59-1.84,5.95-2.2,8.87-.94,2.91,1.25,4.96,3.94,5.41,7.08.4,2.83,9.44,70-16.92,119.56-29.85,56.11-96.13,88.57-164.17,88.57Z"/>
+        <ellipse class="cls-8" cx="233.77" cy="148.69" rx="9.86" ry="17.1" transform="translate(-1.41 295.13) rotate(-64.37)"/>
+        <ellipse class="cls-8" cx="139.47" cy="148.69" rx="17.1" ry="9.86" transform="translate(-50.6 74.97) rotate(-25.63)"/>
+        <g>
+          <ellipse class="cls-3" cx="186.61" cy="169.19" rx="11.45" ry="6.34"/>
+          <ellipse class="cls-3" cx="186.65" cy="175.53" rx="11.45" ry="6.34"/>
+        </g>
+        <path class="cls-6" d="m190.49,94.74c-1.12-1.41-19.7-25.7-9.22-54.72,7.25-20.07,25.52-34.43,47.07-37.02"/>
+        <g>
+          <ellipse class="cls-1" cx="105.56" cy="169.19" rx="19.11" ry="9.62"/>
+          <ellipse class="cls-1" cx="267.74" cy="169.19" rx="19.11" ry="9.62"/>
+        </g>
+      </g>
+      <g>
+        <path class="cls-5" d="m417.01,302.84c-4.49-1.95-7.96-4.67-10.4-8.15-2.44-3.48-3.66-7.5-3.66-12.06,0-3.38.88-7.52,2.64-12.4l34.38-88.77c3.19-8.14,7.83-14.4,13.92-18.8,6.09-4.39,13.04-6.59,20.85-6.59s14.86,2.2,20.95,6.59c6.09,4.39,10.73,10.66,13.92,18.8l34.38,88.77c1.76,5.14,2.64,9.28,2.64,12.4,0,4.56-1.22,8.58-3.66,12.06-2.44,3.48-5.91,6.2-10.4,8.15-3.12,1.37-6.32,2.05-9.57,2.05-4.62,0-8.9-1.46-12.84-4.39-3.94-2.93-6.85-7-8.74-12.21l-2.25-6.64h-48.54l-2.44,6.64c-1.76,5.08-4.61,9.12-8.54,12.11-3.94,2.99-8.29,4.49-13.04,4.49-3.26,0-6.45-.68-9.57-2.05Zm46.97-61.43h21.58l-10.84-38.77-10.74,38.77Z"/>
+        <path class="cls-5" d="m571.41,304.02c-6.12,0-11.36-2.1-15.72-6.3-4.36-4.2-6.54-9.36-6.54-15.48v-67.58c0-6.18,2.18-11.46,6.54-15.82,4.36-4.36,9.6-6.54,15.72-6.54l20.61,13.96v-.98l1.17-1.46,2.44-2.54c5.27-5.53,10.94-8.4,16.99-8.59,2.15,0,4,.26,5.57.78,3.91.98,7.21,2.87,9.91,5.66,2.7,2.8,4.41,6.02,5.13,9.67.26,2.21.39,3.84.39,4.88,0,4.75-1.63,8.84-4.88,12.26-3.26,3.42-8.43,6.33-15.53,8.74-.72.26-1.34.49-1.86.68-.52.2-1.24.49-2.15.88-3.32,1.3-6.04,2.64-8.15,4-2.12,1.37-3.71,2.9-4.79,4.59-1.07,1.69-1.82,3.76-2.25,6.2-.42,2.44-.63,5.78-.63,10.01v19.63c0,4.23-.98,8.12-2.93,11.67-1.95,3.55-4.62,6.36-8.01,8.45-3.39,2.08-7.06,3.16-11.04,3.22Z"/>
+        <path class="cls-5" d="m642.4,180.87c-4.56-4.56-6.84-10.22-6.84-16.99s2.34-12.11,7.03-16.99c2.28-2.21,4.82-3.91,7.62-5.08,2.8-1.17,5.73-1.76,8.79-1.76,6.45,0,11.98,2.41,16.6,7.23,4.49,4.69,6.74,10.29,6.74,16.8s-2.25,12.3-6.74,16.8-10.03,6.74-16.6,6.74-12.11-2.25-16.6-6.74Zm16.6,123.54c-6.12,0-11.35-2.16-15.67-6.49-4.33-4.33-6.49-9.62-6.49-15.87v-67.38c0-4.1.99-7.86,2.98-11.28,1.98-3.42,4.69-6.12,8.11-8.11,3.42-1.99,7.18-2.98,11.28-2.98,4.04.07,7.75,1.11,11.13,3.12,3.38,2.02,6.07,4.72,8.06,8.11,1.98,3.39,2.98,7.16,2.98,11.33v66.99c0,6.32-2.18,11.65-6.54,16.02-4.36,4.36-9.64,6.54-15.82,6.54Z"/>
+        <path class="cls-2" d="m700.02,297.08c-4.43-4.82-6.64-10.42-6.64-16.8v-97.66c0-7.68,2.15-13.83,6.45-18.46,4.3-4.62,9.83-6.93,16.6-6.93h42.97c10.74,0,20.31,2.29,28.71,6.88s14.91,10.84,19.53,18.75c4.62,7.91,6.93,16.72,6.93,26.42-.33,13.87-4.79,25.36-13.38,34.47-8.59,9.12-20.18,14.55-34.77,16.31-3,.39-5.93.59-8.79.59h-18.07v20.02c0,6.9-2.31,12.57-6.93,16.99-4.36,4.36-9.7,6.54-16.02,6.54s-12.04-2.38-16.6-7.13Zm39.55-76.86h18.46c3.06,0,5.66-1.07,7.81-3.22,2.28-2.28,3.42-4.85,3.42-7.71s-1.07-5.47-3.22-7.62c-2.34-2.15-5.01-3.22-8.01-3.22h-18.46v21.78Z"/>
+        <path class="cls-2" d="m857.05,192.69c4.23-.85,7.52-1.27,9.86-1.27,9.89,0,18.13,3.22,24.71,9.67v.59l18.46-9.86c1.56-1.04,3.42-1.56,5.57-1.56,3.19,0,5.86,1.21,8.01,3.61,5.47,5.47,8.2,12.21,8.2,20.21v67.77c0,6.58-2.08,11.95-6.25,16.11-4.17,4.17-9.41,6.25-15.72,6.25l-18.26-10.35v.98c-6.05,6.38-14.23,9.57-24.51,9.57-3.39,0-7.2-.39-11.43-1.17-6.05-1.17-11.95-3.73-17.68-7.67-5.73-3.94-10.71-9.1-14.94-15.48-2.87-4.82-5.01-9.93-6.45-15.33-1.43-5.4-2.15-11.59-2.15-18.55.46-8.98,2.62-17.29,6.49-24.9,3.87-7.62,8.97-13.92,15.28-18.9,6.31-4.98,13.25-8.22,20.8-9.72Zm1.66,56.35c0,4.56,1.33,8.56,4,12.01,2.93,3.58,6.57,5.37,10.94,5.37,2.6,0,5.08-.7,7.42-2.1,2.34-1.4,4.2-3.43,5.57-6.1,1.17-1.95,1.86-3.87,2.05-5.76.13-1.5.2-3.58.2-6.25-.98-6.7-4.04-11.23-9.18-13.57-2.21-1.04-4.3-1.56-6.25-1.56-3.58,0-6.67,1.3-9.28,3.91-2.61,2.6-4.3,6.09-5.08,10.45-.07.65-.12,1.22-.15,1.71-.03.49-.12,1.12-.24,1.9Z"/>
+        <path class="cls-2" d="m953.53,194.25c3.19-1.5,6.45-2.25,9.77-2.25,2.93,0,5.74.65,8.45,1.95,2.7,1.3,5.18,3.31,7.42,6.01,2.25,2.7,4.02,5.94,5.32,9.72l11.23,31.35,10.16-30.76c.85-2.8,2.18-5.79,4-8.98,1.76-2.99,4.17-5.29,7.23-6.88,3.06-1.59,6.31-2.39,9.77-2.39,6.64,0,12.3,2.54,16.99,7.62,3.64,3.84,5.47,8.59,5.47,14.26,0,3.39-.75,6.71-2.25,9.96l-49.22,113.18c-4.75,10.81-11.62,16.21-20.61,16.21-1.89,0-4.2-.46-6.93-1.37-4.75-1.5-8.45-3.99-11.08-7.47-2.64-3.48-3.96-7.47-3.96-11.96,0-3,.75-6.05,2.25-9.18l15.33-31.64-30.57-69.34c-1.04-2.34-1.56-4.95-1.56-7.81,0-4.3,1.14-8.28,3.42-11.96,2.28-3.68,5.4-6.43,9.38-8.25Z"/>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/src/assets/images/index.ts b/src/assets/images/index.ts
@@ -3,5 +3,11 @@ export { default as loading } from "./loading.gif";
 export { default as defaultProfile } from "./profile_default.png";
 export { default as QR } from "./QR.png";
 export { default as TestBanner } from "./test_banner.png";
-export { default as TestSmallBanner } from "./test_small_banner.png";
 export { default as PageNotFound } from "./page_not_found.png";
+
+export { default as Banner1Image } from "./banner/banner1.png";
+export { default as Banner2Image } from "./banner/banner2.png";
+export { default as Banner3Image } from "./banner/banner3.png";
+export { default as Banner4Image } from "./banner/banner4.svg";
+export { default as Banner5Image } from "./banner/banner2.png";
+export { default as Banner6Image } from "./banner/banner3.png";
diff --git a/src/templates/calendar/assets/data/defaultBannerData.ts b/src/templates/calendar/assets/data/defaultBannerData.ts
@@ -0,0 +1,10 @@
+import * as Banner from "@/assets/images";
+
+const defaultBannerData = [
+  { href: "https://buma.wiki", src: Banner.Banner1Image },
+  { href: "https://jjoing-frontend.vercel.app", src: Banner.Banner2Image },
+  { href: "https://dev.com", src: Banner.Banner3Image },
+  { href: "https://google.com", src: Banner.Banner4Image },
+];
+
+export default defaultBannerData;
diff --git a/src/templates/calendar/assets/data/index.ts b/src/templates/calendar/assets/data/index.ts
@@ -1 +1 @@
-export { default as CalendarArrowIcon } from "./CalendarArrowIcon";
+export { default as defaultBannerData } from "./defaultBannerData";
diff --git a/src/templates/calendar/assets/icons/CalendarArrowIcon.tsx b/src/templates/calendar/assets/icons/CalendarArrowIcon.tsx
diff --git a/src/templates/calendar/assets/icons/index.ts b/src/templates/calendar/assets/icons/index.ts
@@ -1 +1,2 @@
 export { default as PlanModalCloseIcon } from "./PlanModalCloseIcon";
+export { default as CalendarArrowIcon } from "./CalendarArrowIcon";
diff --git a/src/templates/calendar/layouts/index.tsx b/src/templates/calendar/layouts/index.tsx
@@ -5,13 +5,13 @@ import { color, flex, font } from "@/styles";
 import { Column, Row } from "@/components/Flex";
 import DATE from "@/constants/date.constant";
 import DIRECTION from "@/constants/direction.constant";
-import { CalendarArrowIcon } from "../assets/data";
 import { useCalendarListQuery } from "../services/query.service";
 import { useCalendar } from "../hooks";
 import WeekDayHeaderBox from "./WeekDayHeaderBox";
 import { CalendarItem } from "../interfaces";
 import { getPaddingDayOfMonth } from "../helpers";
 import CalendarListItem from "./CalendarListItem";
+import { CalendarArrowIcon } from "../assets/icons";
 
 const CalendarPage = () => {
   const { currentMonth, handleCalendarMonthChange } = useCalendar();
diff --git a/src/templates/home/assets/data/defaultBannerData.ts b/src/templates/home/assets/data/defaultBannerData.ts
@@ -0,0 +1,10 @@
+import * as Banner from "@/assets/images";
+
+const defaultBannerData = [
+  { href: "https://buma.wiki", src: Banner.Banner1Image },
+  { href: "https://jjoing-frontend.vercel.app", src: Banner.Banner2Image },
+  { href: "https://dev.com", src: Banner.Banner3Image },
+  { href: "https://google.com", src: Banner.Banner4Image },
+];
+
+export default defaultBannerData;
diff --git a/src/templates/home/assets/data/index.ts b/src/templates/home/assets/data/index.ts
@@ -0,0 +1 @@
+export { default as defaultBannerData } from "./defaultBannerData";
diff --git a/src/templates/home/layouts/BasicMode/HomeMiniBanner.tsx b/src/templates/home/layouts/BasicMode/HomeMiniBanner.tsx
@@ -1,24 +1,35 @@
-import { TestSmallBanner } from "@/assets/images";
 import Image from "next/image";
-import Link from "next/link";
 import React from "react";
 import styled from "styled-components";
+import { defaultBannerData } from "@/templates/calendar/assets/data";
+import Link from "next/link";
+import { color } from "@/styles";
+import "react-responsive-carousel/lib/styles/carousel.min.css";
+import { Carousel } from "react-responsive-carousel";
 
-interface IHomeMiniBanner {
-  href: string;
-}
-
-const HomeMiniBanner = ({ href }: IHomeMiniBanner) => {
+const HomeMiniBanner = () => {
   return (
-    <Container href={href || "/"} target="_blank">
-      <StyledBanner src={TestSmallBanner} alt="small banner" />
-    </Container>
+    <Layout>
+      <Carousel showArrows={false} autoPlay infiniteLoop showThumbs={false}>
+        {defaultBannerData.map((banner) => (
+          <Container href={banner.href}>
+            <StyledBanner src={banner.src} alt="small banner" />
+          </Container>
+        ))}
+      </Carousel>
+    </Layout>
   );
 };
 
-const Container = styled(Link)`
+const Layout = styled.div`
   width: 20vw;
-  height: 100%;
+  height: 210px;
+`;
+
+const Container = styled(Link)`
+  width: 100%;
+  height: 150px;
+  background-color: ${color.white};
 `;
 
 const StyledBanner = styled(Image)`
diff --git a/src/templates/home/layouts/BasicMode/HomePostList.tsx b/src/templates/home/layouts/BasicMode/HomePostList.tsx
@@ -1,5 +1,7 @@
 import { ROUTER } from "@/constants";
+import DATE from "@/constants/date.constant";
 import { color, flex, font } from "@/styles";
+import dayjs from "dayjs";
 import Link from "next/link";
 import React from "react";
 import styled from "styled-components";
@@ -19,7 +21,7 @@ const HomePostList = ({ posts }: IHomePostListProps) => {
         <PostListItem href={`${ROUTER.POST.LIST}/${post.id}`} key={post.id}>
           <StyledTitle>{post.title}</StyledTitle>
           <StyledDate>
-            {/* {formatDate(post.createdAt, { summary: true })} */}
+            {dayjs(post.createdAt).format(DATE.YYYYMMDDAHHMM)}
           </StyledDate>
         </PostListItem>
       ))}
diff --git a/src/templates/home/layouts/BasicMode/index.tsx b/src/templates/home/layouts/BasicMode/index.tsx
@@ -40,7 +40,7 @@ const BasicMode = () => {
             </Row>
           </Column>
           <Column gap="8px">
-            <HomeMiniBanner href="https://buma.wiki" />
+            <HomeMiniBanner />
             <HomeBamboo {...data.bamboo} />
           </Column>
         </Row>
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-export { default as CalendarArrowIcon } from "./CalendarArrowIcon";`
	`1`	`+export { default as defaultBannerData } from "./defaultBannerData";`