Merge pull request #437 from Chaem03/feature/#349

🎨 Design: 블러이미지 추가
LikeLion-at-DGU · Aug 6, 2024 · c69beee · c69beee
2 parents db9de06 + eed1e4f
commit c69beee
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 19 deletions.
diff --git a/src/assets/blur.svg b/src/assets/blur.svg
diff --git a/src/components/DateRangeCalendar/DateRangeCalendar.jsx b/src/components/DateRangeCalendar/DateRangeCalendar.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, forwardRef, useImperativeHandle } from "react";
 import * as S from "./styled";
 import {
   routineStart,
@@ -12,7 +12,7 @@ import { postRoutineRegister } from "../../apis/register";
 import { format } from "date-fns";
 import { addHours } from "date-fns";
 
-const DateRangeCalendar = () => {
+const DateRangeCalendar = forwardRef((ref) => {
   const [currentDate, setCurrentDate] = useState(new Date());
   const [selectedStartDate, setSelectedStartDate] =
     useRecoilState(routineStart);
@@ -21,6 +21,15 @@ const DateRangeCalendar = () => {
   const [, setIsCheckVisible] = useRecoilState(CheckVisible);
   const id = useRecoilValue(registerID);
 
+  const resetCalendar = () => {
+    setStartDate(null);
+    setEndDate(null);
+  };
+
+  useImperativeHandle(ref, () => ({
+    resetCalendar,
+  }));
+
   const timeZone = "Asia/Seoul";
   const getZonedDate = (date) => addHours(new Date(date), 9);
 
@@ -165,6 +174,6 @@ const DateRangeCalendar = () => {
       <S.ConfirmButton onClick={handleConfirm}>확인</S.ConfirmButton>
     </S.CalendarContainer>
   );
-};
+});
 
 export default DateRangeCalendar;
diff --git a/src/pages/RandomDice/RandomDice.jsx b/src/pages/RandomDice/RandomDice.jsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import * as S from "./styled";
 import { Header } from "../../components/common/Header/Header";
 import DiceBackground from "@/assets/DiceBackground.svg";
@@ -36,7 +36,7 @@ export const RandomDice = () => {
     alignItems: "center",
   });
   const [clickCalendarButton, setClickCalendarButton] = useState(false);
-
+  const calendarRef = useRef(null);
   // 화면 크기 조정에 따른 스타일 변경
   useEffect(() => {
     const handleResize = () => {
@@ -107,6 +107,9 @@ export const RandomDice = () => {
     setRolling(true);
     setShowContent(false);
     setClickCalendarButton(false);
+    if (calendarRef.current) {
+      calendarRef.current.resetCalendar(); // 캘린더 초기화 함수 호출
+    }
   };
 
   const handleAddCalendar = () => {

diff --git a/src/pages/Share/styled.js b/src/pages/Share/styled.js
@@ -30,7 +30,7 @@ export const BannerImage = styled.img`
 export const BlurImage = styled.img`
   position: absolute;
   z-index: 5;
-  bottom: 2px;
+  bottom: 0.1px;
   left: 0;
   width: 100%;
   height: 90px;
@@ -103,13 +103,13 @@ export const ClearMain = styled.div`
   }
   .textOverlay {
     position: absolute;
-    top: 50%;
+    top: 47%;
     left: 50%;
     z-index: 5;
     font-weight: bold;
     text-align: center;
     color: white;
-    font-size: 1.5rem;
+    font-size: 2rem;
     transform: translate(-50%, -50%);
   }
 
@@ -128,19 +128,20 @@ export const shareBtn = styled.button`
   flex-direction: row;
   justify-content: center;
   align-items: center;
-  gap: 12px;
-  width: 200px;
+  gap: 5px;
+  width: 260px;
   height: 40px;
-  color: black;
+  color: white;
+  background-color: #78a1b5;
+
   border-radius: 19px;
   border: 1.228px solid #c4d9e2;
-  background: rgba(196, 217, 226, 0.5);
+
   padding: 6px;
 
   .ImgSave {
     display: flex;
-    color: white;
-    background-color: #78a1b5;
+
     font-size: 1rem;
     justify-content: center;
     align-items: center;

diff --git a/src/pages/SubCategoryPage/styled.js b/src/pages/SubCategoryPage/styled.js
@@ -11,6 +11,7 @@ export const Layout = styled.div`
     justify-content: flex-start;
     gap: 40px;
     height: 640px;
+    margin-bottom: 5rem;
   }
 `;