#620.2 홈페이지에 2023 추석 이벤트 섹션 추가

src/components/AdaptiveDiv/AdaptiveCenter.tsx

@@ -1,20 +1,27 @@
-import { ReactNode } from "react";
+import { HTMLProps, ReactNode } from "react";
 
 import theme from "tools/theme";
 
 export type AdaptiveCenterProps = {
-  children: ReactNode;
-};
+  children?: ReactNode;
+  className?: string;
+} & HTMLProps<HTMLDivElement>;
 
-const AdaptiveCenter = ({ children }: AdaptiveCenterProps) => (
+const AdaptiveCenter = ({
+  children,
+  className,
+  ...divProps
+}: AdaptiveCenterProps) => (
   <div
+    className={className}
     css={{
       position: "relative",
       width: `calc(min(${
         theme.adaptivediv.center_device_max_width
       }px, 100%) - ${theme.adaptivediv.margin * 2}px)`,
       margin: "auto",
     }}
+    {...divProps}
   >
     {children}
   </div>

src/components/AdaptiveDiv/index.tsx

@@ -2,10 +2,11 @@ import AdaptiveButterfly, { AdaptiveButterflyProps } from "./AdaptiveButterfly";
 import AdaptiveCenter, { AdaptiveCenterProps } from "./AdaptiveCenter";
 import AdaptiveModal, { AdaptiveModalProps } from "./AdaptiveModal";
 
-type AdaptiveDivProps =
+type AdaptiveDivProps = { className?: string } & (
   | (AdaptiveButterflyProps & { type: "butterfly" })
   | (AdaptiveCenterProps & { type: "center" })
-  | (AdaptiveModalProps & { type: "modal" });
+  | (AdaptiveModalProps & { type: "modal" })
+);
 
 const AdaptiveDiv = (props: AdaptiveDivProps) => {
   switch (props.type) {

src/components/Chat/Container/index.tsx

@@ -1,4 +1,4 @@
-import HeaderBar from "components/HeaderBar";
+import HeaderBar from "components/Header/HeaderBar";
 
 import { deviceType } from "tools/loadenv";
 

src/components/Event/CreditAmountStatusContainer/index.tsx

@@ -0,0 +1,27 @@
+import WhiteContainer from "components/WhiteContainer";
+
+import theme from "tools/theme";
+
+import { ReactComponent as CreditIcon } from "static/events/2023fallCredit.svg";
+
+const CreditAmountStatusContainer = () => {
+  return (
+    <WhiteContainer
+      css={{
+        padding: "9px 16px",
+        background: theme.purple,
+        display: "flex",
+        gap: "8px",
+        alignItems: "center",
+      }}
+    >
+      <div css={{ color: theme.white, ...theme.font16_bold, flexGrow: 1 }}>
+        내가 모은 송편
+      </div>
+      <CreditIcon style={{ width: "27px", height: "16px" }} />
+      <div css={{ color: theme.white, ...theme.font16_bold }}>0</div>
+    </WhiteContainer>
+  );
+};
+
+export default CreditAmountStatusContainer;

src/components/Event/RabbitAnimatedBackground/index.tsx

@@ -0,0 +1,85 @@
+import "./indexMoon.css";
+import "./indexRabbit.css";
+
+const RabbitAnimatedBackground = () => {
+  return (
+    <div className="bar">
+      <div className="rabbit-animated-circle1">
+        <div className="moon" />
+        <div className="moon2" />
+        <div className="crater1" />
+        <div className="crater2" />
+        <div className="crater3" />
+      </div>
+      <div className="rabbit-animated-circle2">
+        <div className="cloud1" />
+        <div className="cloud2" />
+        <div className="cloud3" />
+        <div className="cloud4" />
+      </div>
+      <div className="balcony" />
+      <div className="back-sofa">
+        <div />
+        <div />
+        <div />
+        <div className="coctail">
+          <div />
+        </div>
+        <div className="rabbit-1">
+          <div className="rabbit-1__back-leg" />
+          <div className="rabbit-1__body" />
+          <div className="rabbit-1__arm1" />
+          <div className="rabbit-1__head">
+            <div className="rabbit-1__ear1" />
+            <div className="rabbit-1__ear2">
+              <div />
+            </div>
+            <div className="rabbit-1__mouth">
+              <div />
+            </div>
+            <div className="rabbit-1__nose" />
+            <div className="rabbit-1__eye1" />
+            <div className="rabbit-1__eye2" />
+          </div>
+          <div className="rabbit-1__leg" />
+          <div className="rabbit-1__arm2" />
+        </div>
+        <div />
+      </div>
+      <div className="table">
+        <div />
+        <div className="lightning">
+          <div />
+          <div />
+        </div>
+      </div>
+      <div className="front-sofa">
+        <div className="rabbit-2">
+          <div className="rabbit-2__body" />
+          <div className="rabbit-2__arm1" />
+          <div className="rabbit-2__head">
+            <div className="rabbit-2__ear1">
+              <div />
+            </div>
+            <div className="rabbit-2__ear2" />
+            <div className="rabbit-2__mouth">
+              <div />
+            </div>
+            <div className="rabbit-2__nose" />
+            <div className="rabbit-2__eye1" />
+            <div className="rabbit-2__eye2" />
+          </div>
+          <div className="rabbit-2__leg" />
+          <div className="rabbit-2__arm2">
+            <div className="coctail">
+              <div />
+            </div>
+          </div>
+        </div>
+        <div />
+      </div>
+    </div>
+  );
+};
+
+export default RabbitAnimatedBackground;

src/components/Event/RabbitAnimatedBackground/indexMoon.css

@@ -0,0 +1,108 @@
+.rabbit-animated-circle1 {
+  width: 450px;
+  height: 450px;
+  position: relative;
+  transform: scale(1.5) translateX(-70px) translateY(5px);
+}
+.rabbit-animated-circle2 {
+  width: 450px;
+  height: 450px;
+  position: relative;
+}
+.moon {
+  background: #ffa62b;
+  position: absolute;
+  width: 180px;
+  height: 180px;
+  top: 18%;
+  left: 40%;
+  border-radius: 100%;
+}
+.moon2 {
+  background: #ffe05d;
+  position: absolute;
+  width: 160px;
+  height: 160px;
+  top: 19%;
+  left: 44%;
+  border-radius: 100%;
+}
+.crater1 {
+  position: absolute;
+  background: #ffa62b;
+  width: 40px;
+  height: 40px;
+  top: 23%;
+  left: 61%;
+  border-radius: 100%;
+}
+.crater2 {
+  position: absolute;
+  background: #ffa62b;
+  width: 20px;
+  height: 20px;
+  top: 38%;
+  left: 56%;
+  border-radius: 100%;
+}
+.crater3 {
+  position: absolute;
+  background: #ffa62b;
+  width: 10px;
+  height: 10px;
+  top: 36%;
+  left: 70%;
+  border-radius: 100%;
+}
+.cloud1 {
+  background: white;
+  position: absolute;
+  top: 30%;
+  left: 10%;
+  height: 15px;
+  width: 90px;
+  border-radius: 50px;
+  opacity: 0.5;
+  animation: 5s linear infinite rabbit-animated-slidein;
+}
+.cloud2 {
+  background: white;
+  position: absolute;
+  top: 10%;
+  left: 10%;
+  height: 15px;
+  width: 190px;
+  border-radius: 50px;
+  opacity: 0.5;
+  animation: 7s reverse infinite rabbit-animated-slidein;
+}
+.cloud3 {
+  background: white;
+  position: absolute;
+  top: 42%;
+  left: 10%;
+  height: 20px;
+  width: 250px;
+  border-radius: 50px;
+  opacity: 0.5;
+  animation: 7s linear infinite rabbit-animated-slidein;
+}
+.cloud4 {
+  background: white;
+  position: absolute;
+  top: 50%;
+  left: 10%;
+  height: 15px;
+  width: 90px;
+  border-radius: 50px;
+  opacity: 0.5;
+  animation: 5s reverse infinite rabbit-animated-slidein;
+}
+@keyframes rabbit-animated-slidein {
+  from {
+    transform: translateX(-50%);
+  }
+  to {
+    transform: translateX(500%);
+  }
+}