[refactor] 메인 화면과 달력 뷰 리팩토링

src/assets/svg/IcCalendarIcon.jsx

@@ -0,0 +1,73 @@
+const SvgIcCalendarIcon = () => (
+  <svg 
+    width="28" 
+    height="28" 
+    viewBox="0 0 28 28" 
+    fill="none" 
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <rect 
+      x="5.27222" 
+      y="0.506348" 
+      width="2.2595" 
+      height="6.02532" 
+      rx="1" 
+      fill="black"
+    />
+    <rect 
+      x="19.5823" 
+      y="0.506348" 
+      width="2.2595"
+      height="6.02532" 
+      rx="1" 
+      fill="black"
+    />
+    <path 
+      fillRule="evenodd" 
+      clipRule="evenodd" 
+      d="M8.28516 3.51953H18.829V5.8833C18.829 6.57366 19.3887 7.1333 20.079 7.1333H21.3448C22.0352 7.1333 22.5948 6.57366 22.5948 5.8833V3.51953H25.614C26.4424 3.51953 27.114 4.1911 27.114 5.01953V26.1208C27.114 26.9492 26.4424 27.6208 25.614 27.6208H1.5C0.671572 27.6208 0 26.9492 0 26.1208V5.01953C0 4.1911 0.671573 3.51953 1.5 3.51953H4.51934V5.8833C4.51934 6.57366 5.07898 7.1333 5.76934 7.1333H7.03516C7.72552 7.1333 8.28516 6.57366 8.28516 5.8833V3.51953ZM25.6076 9.5444H1.50635V24.6077H25.6076V9.5444Z" 
+      fill="black"
+    />
+    <rect 
+      x="10.9209" 
+      y="11.0508" 
+      width="5.27216" 
+      height="5.27216" 
+      rx="1" 
+      fill="black"
+    />
+    <rect 
+      x="10.9209" 
+      y="17.8291" 
+      width="5.27216" 
+      height="5.27216" 
+      rx="1" 
+      fill="black"
+    />
+    <rect 
+      x="18.0759" 
+      y="11.0508" 
+      width="5.27216" 
+      height="5.27216" 
+      rx="1" 
+      fill="black"
+    />
+    <rect 
+      x="18.0759" 
+      y="17.8291" 
+      width="5.27216" 
+      height="5.27216" 
+      rx="1" 
+      fill="black"
+    />
+    <rect 
+      x="3.76587" 
+      y="17.8291" 
+      width="5.27216" 
+      height="5.27216" 
+      rx="1" 
+      fill="black"
+    />
+  </svg>
+);
+export default SvgIcCalendarIcon;

src/assets/svg/IcHomeIcon.jsx

@@ -0,0 +1,17 @@
+const SvgIcHomeIcon = () => (
+  <svg 
+    width="27" 
+    height="27" 
+    viewBox="0 0 27 27" 
+    fill="none" 
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path 
+      fillRule="evenodd" 
+      clipRule="evenodd" 
+      d="M14.2071 0.292894L27 13.0857H27V13.0858V25.5857C27 26.138 26.5523 26.5857 26 26.5857H18.0001V19.0858H18C18 16.6005 15.9853 14.5858 13.5001 14.5858C11.0148 14.5858 9.00005 16.6005 9.00005 19.0858L9.0001 19.1073V26.5857H0.999999C0.447715 26.5857 0 26.138 0 25.5857V13.0858V13.0857H4.76837e-05L12.7929 0.292893C13.1834 -0.0976316 13.8166 -0.0976306 14.2071 0.292894Z" 
+      fill="black"
+    />
+  </svg>
+);
+export default SvgIcHomeIcon;

src/assets/svg/IcMyPageIcon.jsx

@@ -0,0 +1,30 @@
+const SvgIcMyPageIcon = () => (
+  <svg 
+    width="31" 
+    height="31" 
+    viewBox="0 0 31 31" 
+    fill="none" 
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle 
+      cx="15.0633" 
+      cy="15.0633" 
+      r="14.0633" 
+      stroke="black" 
+      strokeWidth="2"
+    />
+    <circle 
+      cx="15.0634" 
+      cy="12.0507" 
+      r="5.51899" 
+      stroke="black" 
+      strokeWidth="2"
+    />
+    <path 
+      d="M25.6077 24.8542V24.8542C25.6077 21.3655 22.3909 18.765 18.9797 19.496L16.5301 20.0209C15.5632 20.2281 14.5635 20.2281 13.5967 20.0209L11.1471 19.496C7.7358 18.765 4.51904 21.3655 4.51904 24.8542V24.8542" 
+      stroke="black" 
+      strokeWidth="2"
+    />
+  </svg>
+);
+export default SvgIcMyPageIcon;

src/assets/svg/IcSearchIcon.jsx

@@ -0,0 +1,22 @@
+const SvgIcSearchIcon = () => (
+  <svg 
+    width="28" 
+    height="28" 
+    viewBox="0 0 28 28" 
+    fill="none" 
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle 
+      cx="11.2975" 
+      cy="11.8038" 
+      r="10.2975" 
+      stroke="black" 
+      strokeWidth="2"
+    />
+    <path 
+      d="M20.6429 19.0277L19.5823 17.9671L17.461 20.0884L18.5216 21.149L20.6429 19.0277ZM24.5469 27.1744C25.1327 27.7601 26.0825 27.7601 26.6683 27.1744C27.254 26.5886 27.254 25.6388 26.6683 25.053L24.5469 27.1744ZM18.5216 21.149L24.5469 27.1744L26.6683 25.053L20.6429 19.0277L18.5216 21.149Z" 
+      fill="black"
+    />
+  </svg>
+);
+export default SvgIcSearchIcon;

src/assets/svg/index.js

@@ -52,3 +52,7 @@ export { default as IcStudentHoneyBee } from './IcStudentHoneyBee';
 export { default as IcCreateButton } from './IcCreateButton';
 export { default as IcFastCreateButton } from './IcFastCreateButton';
 export { default as IcSlowCreateButton } from './IcSlowCreateButton';
+export { default as IcSearchIcon } from './IcSearchIcon';
+export { default as IcCalendarIcon } from './IcCalendarIcon';
+export { default as IcMyPageIcon } from './IcMyPageIcon';
+export { default as IcHomeIcon } from './IcHomeIcon';

src/components/CreateDiaryButtonField/CreateDiaryButtonFiedl.style.js

@@ -0,0 +1,34 @@
+import styled from 'styled-components';
+import { motion } from 'framer-motion';
+
+export const ButtonMotionWrapper = styled(motion.div)`
+  ${({ theme: { mixin } }) => mixin.flexBox({ 
+    'direction': 'column', 
+    'justify': 'flex-end',
+    'align': 'flex-end',
+  })};
+  ${({ theme, isClick}) => `
+    ${isClick && `background: ${theme.colors.gradient.gradient_black};`}
+  `};
+  ${({ isClick }) => `
+    ${isClick 
+      ? `width: 100%;`
+      : `width: 50%;`
+    }
+  `}
+  position: fixed;
+  right: 0rem;;
+  bottom: 0rem;
+  z-index: 100;
+`;
+export const CreateButtonField = styled.div`
+  ${({ theme: { mixin } }) => mixin.flexBox({ 
+    'direction': 'row', 
+    'align': 'center',
+  })};
+  padding-right: 1.5rem;
+`;
+export const ButtonText = styled.p`
+  ${({ theme }) => theme.fonts.body_01};
+  color: ${({ theme }) => theme.colors.normal.white};
+`;

src/components/CreateDiaryButtonField/CreateDiaryButtonField.jsx

@@ -0,0 +1,51 @@
+import * as S from './CreateDiaryButtonFiedl.style';
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import WriteDiaryButton from '../common/buttons/WriteDiaryButton/WriteDiaryButton';
+import BtnFastDiary from '../common/buttons/DiaryType/BtnFastDiary';
+import BtnSlowDiary from '../common/buttons/DiaryType/BtnSlowDiary';
+
+function CreateDiaryButtonField() {
+  const [isClick, setIsClick] = useState(false);
+  const navigate = useNavigate();
+
+  const onUpdate = () => {
+    setIsClick(!isClick);
+  };
+  const handleFastDiary = () => {
+    navigate('/fastdiary');
+  };
+  const handleSlowDiary = () => {
+    navigate('/slowdiary');
+  };
+
+  return(
+    <S.ButtonMotionWrapper
+      whileTap={{ scale: 0.9 }}
+      transition={{ duration: 0.3 }}
+      isClick={isClick}
+    >
+      {
+        isClick && (
+          <>
+            <S.CreateButtonField>
+              <S.ButtonText>
+                직접 일기 쓰기
+              </S.ButtonText>
+              <BtnSlowDiary onClick={handleSlowDiary}/>
+            </S.CreateButtonField>
+
+            <S.CreateButtonField>
+              <S.ButtonText>
+                키워드로 빠르게 쓰기
+              </S.ButtonText>
+              <BtnFastDiary onClick={handleFastDiary}/>
+            </S.CreateButtonField>
+          </>
+        )
+      }
+      <WriteDiaryButton isClick={isClick} onUpdate={onUpdate}/>
+    </S.ButtonMotionWrapper>
+  );
+}
+export default CreateDiaryButtonField;

src/components/EventBanner/EventBanner.jsx

@@ -0,0 +1,23 @@
+import { useNavigate } from 'react-router-dom';
+import * as S from './EventBanner.style';
+
+function EventBanner() {
+  const navigate = useNavigate();
+  const handleNavigate = () => {
+    alert('이동');
+  };
+
+  return(
+    <S.EventBannerWrapper onClick={() => handleNavigate()}>
+      <S.EventBannerText>
+        허니어리에 <br />
+        당신의 추석을 기록해보세요!
+      </S.EventBannerText>
+      <S.EventBannerText>
+        &gt;
+      </S.EventBannerText>
+    </S.EventBannerWrapper>
+  );
+}
+
+export default EventBanner;

src/components/EventBanner/EventBanner.style.js

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+
+export const EventBannerWrapper = styled.div`
+  ${({ theme: { mixin } }) => mixin.flexBox({ justify: 'space-between', align: 'center'})}
+  background: linear-gradient(90deg, rgba(148, 102, 83, 0.80) 0%, rgba(255, 78, 78, 0.80) 100%);
+  color: ${({ theme }) => theme.colors.normal.white};
+  width: 32rem;
+  height: 10rem;
+  border-radius: 30px;
+  padding: 0 3rem 0 3rem;
+`;
+export const EventBannerText = styled.span`
+  ${({ theme }) => theme.fonts.body_02};
+`;