Merge pull request #168 from LikeLion-at-DGU/dev

🚀 Deploy

package.json

@@ -11,6 +11,8 @@
   },
   "dependencies": {
     "axios": "^1.7.2",
+    "date-fns": "^3.6.0",
+    "date-fns-tz": "^3.1.3",
     "js-cookie": "^3.0.5",
     "react": "^18.3.1",
     "react-calendar": "^5.0.0",

src/apis/starP.js

@@ -0,0 +1,11 @@
+import { instance } from "./instance";
+
+export const getStarContent = async (id) => {
+  try {
+    const res = await instance.get(`/api/celeb/${id}/`);
+    return res;
+  } catch (err) {
+    console.log(err);
+    throw err;
+  }
+};

src/components/CategoryTitle/styled.js

@@ -4,12 +4,12 @@ export const CategoryWrapper = styled.div`
   display: flex;
   flex-direction: row;
   align-self: flex-start;
-  align-items: center;
+  align-items: stretch;
 `;
 
 export const CategoryLine = styled.svg`
   width: 20px;
-  height: 30px;
+  height: auto;
   flex-shrink: 0;
   stroke-width: 3px;
   stroke: var(--Main-Color, #78a1b5);
@@ -20,4 +20,6 @@ export const CategorySection = styled.div`
 
   font-family: "AppleSDGothicNeoM00";
   font-size: ${(props) => props.fontSize || "16px"} !important;
+  display: flex;
+  align-items: center;
 `;

src/components/CheckUp/CheckUp.jsx

@@ -7,7 +7,6 @@ export const CheckUp = ({ startDay, endDay, term, onClose }) => {
         {startDay}~{endDay}
       </div>
       <div>{term}일 간 루틴 설정이 완료되었습니다.</div>
-
       <S.ConfirmButton onClick={onClose}>확인</S.ConfirmButton>
     </S.CheckContainer>
   );

src/components/DateRangeCalendar/DateRangeCalendar.jsx

@@ -9,6 +9,8 @@ import {
 } from "../../stores/routineRegister";
 import { useRecoilState, useRecoilValue } from "recoil";
 import { postRoutineRegister } from "../../apis/register";
+import { format } from "date-fns";
+import { addHours } from "date-fns";
 
 const DateRangeCalendar = () => {
   const [currentDate, setCurrentDate] = useState(new Date());
@@ -18,24 +20,28 @@ const DateRangeCalendar = () => {
   const [, setIsCalendarVisible] = useRecoilState(CalendarVisible);
   const [, setIsCheckVisible] = useRecoilState(CheckVisible);
   const id = useRecoilValue(registerID);
-  //루틴 목표날짜 startdate,enddate에 넣기
+
+  const timeZone = "Asia/Seoul";
+
+  const getZonedDate = (date) => addHours(new Date(date), 9);
+
   const handleDateClick = (date) => {
+    const zonedDate = getZonedDate(date);
     if (!selectedStartDate || (selectedStartDate && selectedEndDate)) {
-      setSelectedStartDate(date);
+      setSelectedStartDate(zonedDate);
       setSelectedEndDate(null);
     } else if (
       selectedStartDate &&
       !selectedEndDate &&
-      date > selectedStartDate
+      zonedDate > selectedStartDate
     ) {
-      setSelectedEndDate(date);
+      setSelectedEndDate(zonedDate);
     } else {
-      setSelectedStartDate(date);
+      setSelectedStartDate(zonedDate);
       setSelectedEndDate(null);
     }
   };
 
-  //루틴 목표날짜 지정
   const renderDays = () => {
     const days = [];
     const startOfMonth = new Date(
@@ -59,17 +65,18 @@ const DateRangeCalendar = () => {
         currentDate.getMonth(),
         day
       );
+      const zonedDate = getZonedDate(date);
       const isSelectedStart =
         selectedStartDate &&
-        date.toDateString() === selectedStartDate.toDateString();
+        zonedDate.toDateString() === selectedStartDate.toDateString();
       const isSelectedEnd =
         selectedEndDate &&
-        date.toDateString() === selectedEndDate.toDateString();
+        zonedDate.toDateString() === selectedEndDate.toDateString();
       const isInRange =
         selectedStartDate &&
         selectedEndDate &&
-        date > selectedStartDate &&
-        date < selectedEndDate;
+        zonedDate > selectedStartDate &&
+        zonedDate < selectedEndDate;
 
       days.push(
         <S.Day
@@ -87,7 +94,6 @@ const DateRangeCalendar = () => {
     return days;
   };
 
-  //월 이동
   const handleMonthChange = (direction) => {
     const newDate = new Date(currentDate);
     newDate.setMonth(currentDate.getMonth() + direction);
@@ -96,31 +102,32 @@ const DateRangeCalendar = () => {
 
   const handleConfirm = async () => {
     if (selectedStartDate && selectedEndDate) {
-      const formattedStartDate = selectedStartDate.toISOString().split("T")[0];
-      const formattedEndDate = selectedEndDate.toISOString().split("T")[0];
+      const formattedStartDate = format(selectedStartDate, "yyyy-MM-dd", {
+        timeZone,
+      });
+      const formattedEndDate = format(selectedEndDate, "yyyy-MM-dd", {
+        timeZone,
+      });
       try {
         const response = await postRoutineRegister(
           formattedStartDate,
           formattedEndDate,
           id
         );
-
-        console.log(response);
-        if (response.status == 200 || response.status == 201) {
-          // 예시: 서버 응답이 성공적인 경우
-          setSelectedStartDate(formattedStartDate);
-          setSelectedEndDate(formattedEndDate);
+        if (response.status === 200 || response.status === 201) {
+          setSelectedStartDate(selectedStartDate);
+          setSelectedEndDate(selectedEndDate);
           setIsCalendarVisible(false);
           setIsCheckVisible(true);
+          setTimeout(() => {
+            window.location.reload();
+          }, 2000); //
         } else {
-          console.error("Failed to register routine:", response.message);
+          console.error("Failed to register routine:", response.statusText);
         }
       } catch (error) {
-        console.error(error);
+        console.error("Error during API call:", error);
       }
-    } else if (selectedStartDate) {
-      const formattedStartDate = selectedStartDate.toISOString().split("T")[0];
-      console.log(`${formattedStartDate}~`);
     } else {
       console.log("No date selected");
     }
@@ -130,6 +137,7 @@ const DateRangeCalendar = () => {
     setIsCalendarVisible(false);
     setIsCheckVisible(true);
   };
+
   return (
     <S.CalendarContainer>
       <S.CalendarHeader>
@@ -139,7 +147,7 @@ const DateRangeCalendar = () => {
             &lt;
           </S.CalendarHeaderButton>
           <S.CalendarHeaderTitle>
-            {currentDate.toLocaleString("default", { month: "long" })}{" "}
+            {currentDate.toLocaleString("default", { month: "long" })}
           </S.CalendarHeaderTitle>
           <S.CalendarHeaderButton onClick={() => handleMonthChange(1)}>
             &gt;

src/components/StarHeader/StarHeader.jsx

@@ -0,0 +1,39 @@
+import React from "react";
+import * as S from "./styled";
+import checkBadge from "../../assets/checkbadge.svg";
+import progressingBar from "../../assets/ProgressingBar.svg";
+import ShareIcon from "../../assets/shareIcon.svg";
+
+const ProgressingBar = () => {
+  return (
+    <S.ProgressingBarWrapper>
+      <img src={progressingBar} />
+      <img src={progressingBar} />
+      <img src={progressingBar} />
+      <img src={progressingBar} />
+      <img src={progressingBar} />
+      <img src={progressingBar} />
+    </S.ProgressingBarWrapper>
+  );
+};
+export const StarHeader = ({ usercount, totalcount }) => {
+  return (
+    <>
+      <S.layout>
+        <div className="progress">
+          <img src={checkBadge} />
+          <S.ProgressContainr>
+            <div>
+              달성 진행중 {usercount}/{totalcount}
+            </div>
+            <ProgressingBar />
+          </S.ProgressContainr>
+        </div>
+        <S.ShareContainr>
+          <div>총 00회</div>
+          <img src={ShareIcon} />
+        </S.ShareContainr>
+      </S.layout>
+    </>
+  );
+};

src/components/StarHeader/styled.js

@@ -0,0 +1,35 @@
+import styled from "styled-components";
+
+export const layout = styled.div`
+  display: flex;
+  flex-direction: row;
+  width: 98%;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 1.5rem;
+  .progress {
+    display: flex;
+    flex-direction: row;
+    gap: 5px;
+    margin-left: 1rem;
+  }
+`;
+
+export const ProgressingBarWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 5px;
+  max-width: 115px;
+`;
+export const ProgressContainr = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 3px;
+`;
+
+export const ShareContainr = styled.div`
+  display: flex;
+  gap: 5px;
+  margin-right: 1rem;
+`;

src/components/mainRoutineBox/MainRoutineBox.jsx

@@ -1,7 +1,6 @@
 import React from "react";
 import * as S from "./styled";
 import plusButton from "../../assets/plusButton.svg";
-
 function MainRoutineBox({
   id,
   src,

src/hooks/useStar.js

@@ -0,0 +1,23 @@
+import { useState, useEffect } from "react";
+import { useParams } from "react-router-dom";
+import { getStarContent } from "../apis/starP";
+
+export const useMoveonStarP = () => {
+  const [starP, setstarP] = useState(null);
+  const { id } = useParams();
+  const fetchStarData = async () => {
+    try {
+      const res = await getStarContent(id);
+      console.log("response:", res);
+      setstarP(res);
+    } catch (error) {
+      console.error("error:", error);
+    }
+  };
+
+  useEffect(() => {
+    fetchStarData();
+  }, []);
+
+  return { starP }; //객체로 담아서 전달해주기
+};

src/pages/RandomDice/RandomDice.jsx

@@ -16,6 +16,8 @@ import {
   CheckVisible,
   registerID,
 } from "../../stores/routineRegister";
+import { format } from "date-fns";
+import { addHours } from "date-fns";
 
 // 이미지 배열
 const images = [
@@ -67,13 +69,10 @@ export const RandomDice = () => {
     }
   }, [startDay, endDay]);
 
-  // 날짜 포맷팅
+  // 날짜 포맷팅 (한국 시간으로 변환)
   const formatDate = (date) => {
-    const dateObj = typeof date === "string" ? new Date(date) : date;
-    const year = dateObj.getFullYear();
-    const month = String(dateObj.getMonth() + 1).padStart(2, "0");
-    const day = String(dateObj.getDate()).padStart(2, "0");
-    return `${year}.${month}.${day}`;
+    const zonedDate = addHours(new Date(date), 9); // 한국 시간으로 변환
+    return format(zonedDate, "yyyy.MM.dd"); // 포맷팅
   };
 
   // 주사위 굴리기 로직