Merge pull request #122 from LikeLionHGU/eunju_feat/#117

feat: 일지 작성, 목표 완료 클릭 시 유저이름 보여주기
LikeLionHGU · Aug 5, 2024 · 96089d0 · 96089d0
2 parents 0ae7258 + 07f3b23
commit 96089d0
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 15 deletions.
diff --git a/src/diaryListPage/components/CompleteGoalModal.jsx b/src/diaryListPage/components/CompleteGoalModal.jsx
@@ -1,7 +1,20 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import styled from "styled-components";
 import emotional from "../../asset/emoji/emotional.png";
+import getUserName from "../../apis/getUserName";
+
 function CompleteGoalModal({ setIsCompModalOpen }) {
+  const [userName, setUserName] = useState("");
+
+  useEffect(() => {
+    const fetchUserName = async () => {
+      const fetchedUserName = await getUserName();
+      setUserName(fetchedUserName);
+      console.log("Fetched name!!!:", fetchedUserName);
+    };
+    fetchUserName();
+  }, []);
+
   const closeCompModal = () => {
     setIsCompModalOpen(false);
   };
@@ -28,7 +41,8 @@ function CompleteGoalModal({ setIsCompModalOpen }) {
           ></img>
           <h3>도전 완료를 축하드려요</h3>
           <div className="complete-content">
-            축하드려요! 꾸준히 성장 일지를 작성한 chicky님의 모습에 큰 감동을 받았습니다
+            축하드려요! 꾸준히 성장 일지를 작성한 {userName.name}님의 모습에 큰
+            감동을 받았습니다
             <br />
             계속해서 멋진 성장을 이루어나갈 수 있도록 stepper가 함께할게요 :D
           </div>

diff --git a/src/diaryListPage/components/CreateDiaryModal.jsx b/src/diaryListPage/components/CreateDiaryModal.jsx
@@ -1,14 +1,24 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import styled from "styled-components";
 import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
 import createChatbotRoom from "../../apis/createChatbotRoom";
 import { useRecoilValue } from "recoil";
 import { tokenState } from "../../atom/atom";
+import getUserName from "../../apis/getUserName";
 function CreateDiaryModal({ setIsModalOpen, goalId }) {
   const navigate = useNavigate();
   const csrfToken = useRecoilValue(tokenState);
-
+  const [userName, setUserName] = useState("");
+
+  useEffect(() => {
+    const fetchUserName = async () => {
+      const fetchedUserName = await getUserName();
+      setUserName(fetchedUserName);
+      console.log("Fetched name!!!:", fetchedUserName);
+    };
+    fetchUserName();
+  }, []);
   const ClickChatbot = async () => {
     try {
       const chatId = await createChatbotRoom(csrfToken, goalId);
@@ -45,7 +55,7 @@ function CreateDiaryModal({ setIsModalOpen, goalId }) {
                     피곤한 하루에도
                   </div>
                   <div style={{ marginTop: "3px" }}>
-                    steppy가 chicky님의 꾸준한 기록을 도와줄게요!
+                    steppy가 {userName.name}님의 꾸준한 기록을 도와줄게요!
                   </div>
                 </SubText>
               </TextContainer>

diff --git a/src/diaryListPage/components/GoalCard.jsx b/src/diaryListPage/components/GoalCard.jsx
@@ -33,7 +33,9 @@ function GoalCard() {
 
   const calculateDaysFromStart = (startDate) => {
     if (!isValidDate(startDate)) return 0; // 기본값 설정
-    const [year, month, day] = startDate.split(".").map((part) => parseInt(part, 10));
+    const [year, month, day] = startDate
+      .split(".")
+      .map((part) => parseInt(part, 10));
     const start = new Date(year + 2000, month - 1, day); // 2000년대를 가정
     const today = new Date();
     const diffTime = today - start;
@@ -46,7 +48,9 @@ function GoalCard() {
         const fetchedGoalInfo = await getDiaryList(goalId, csrfToken);
         setGoalInfo(fetchedGoalInfo);
 
-        const daysFromStart = calculateDaysFromStart(fetchedGoalInfo.goal.startDate);
+        const daysFromStart = calculateDaysFromStart(
+          fetchedGoalInfo.goal.startDate
+        );
         setStartedFrom(daysFromStart);
         console.log("목표정보", goalInfo);
       } catch (error) {
@@ -68,15 +72,17 @@ function GoalCard() {
     <Container>
       <Wrapper>
         {goalInfo.goal.thumbnail ? (
-          <Image style={{ backgroundImage: `url(${goalInfo.goal.thumbnail})` }} />
+          <Image
+            style={{ backgroundImage: `url(${goalInfo.goal.thumbnail})` }}
+          />
         ) : (
           <Image style={{ backgroundImage: `url(${backgroundImg})` }} />
         )}
         {/* <Image style={{ backgroundImage: `url(${backgroundImg})` }} /> */}
         <Info>
           <TitleFireContainer>
-            <Title>{goalInfo.goal.title}</Title>
-            {goalInfo.goal.streak >= 3 && (
+            <Title>{goalInfo?.goal.title}</Title>
+            {goalInfo.goal.streak >= 1 && (
               <FireContainer>
                 <Fire>🔥{goalInfo.goal.streak >= 10 && <span>🔥</span>}</Fire>
                 <Tooltip>연속{goalInfo.goal.streak}일 작성</Tooltip>
@@ -86,13 +92,19 @@ function GoalCard() {
 
           <Period>
             <StartDate>{goalInfo.goal.startDate}</StartDate>
-            {goalInfo.goal.startDate && goalInfo.goal.endDate && <ArrowForwardIcon />}
+            {goalInfo.goal.startDate && goalInfo.goal.endDate && (
+              <ArrowForwardIcon />
+            )}
             <DueDate>{goalInfo.goal.endDate}</DueDate>
           </Period>
           <Line />
           <ExtrtaInfo>
-            {startedFrom >= 1 && <div className="info-day-count">{startedFrom}일차</div>}
-            <div className="info-diary-count">작성한 일지 {goalInfo.journals ? goalInfo.journals.length : 0}개</div>
+            {startedFrom >= 1 && (
+              <div className="info-day-count">{startedFrom}일차</div>
+            )}
+            <div className="info-diary-count">
+              작성한 일지 {goalInfo.journals ? goalInfo.journals.length : 0}개
+            </div>
           </ExtrtaInfo>
           <div className="accomplish-btn">
             <Accomplished
@@ -113,7 +125,9 @@ function GoalCard() {
           setIsCompModalOpen={setIsCompModalOpen}
         />
       )}
-      {isCompModalOpen && <CompleteGoalModal setIsCompModalOpen={setIsCompModalOpen} />}
+      {isCompModalOpen && (
+        <CompleteGoalModal setIsCompModalOpen={setIsCompModalOpen} />
+      )}
     </Container>
   );
 }
@@ -276,7 +290,8 @@ const Accomplished = styled.button`
   margin-bottom: 16px;
   border-radius: 8px;
   /* background-color: transparent; */
-  background-color: ${(props) => (props.status === "OPEN" ? "transparent" : "#EEF1FF")};
+  background-color: ${(props) =>
+    props.status === "OPEN" ? "transparent" : "#EEF1FF"};
 
   cursor: pointer;
   font-weight: bold;