Merge branch 'master' of https://github.com/bsideproject/14_3_FE

bsideproject · Sep 10, 2023 · 303ba01 · 303ba01
2 parents 0b8c89a + 6a7d03c
commit 303ba01
Show file tree

Hide file tree

Showing 8 changed files with 125 additions and 84 deletions.
diff --git a/src/components/main/AnswerNowStep.tsx b/src/components/main/AnswerNowStep.tsx
@@ -12,12 +12,16 @@ const AnswerNowStep = () => {
   const {todayCardSelectStep} = useCardState()   //카드 뽑기 단계 조회
 
   useEffect(()=>{
-    setSelectionStep(todayCardSelectStep)               //질문회차 값 세팅
-    switch (todayCardSelectStep) {
-    case 1: setStepText('첫'); break;
-    case 2: setStepText('두'); break;
-    case 3: setStepText('세'); break;
-    default: setStepText('첫'); break;
+    if (todayCardSelectStep > 3) {
+      console.log('오늘의 카드 뽑기 단계가 3을 초과했습니다.')
+    } else {
+      setSelectionStep(todayCardSelectStep)               //질문회차 값 세팅
+      switch (todayCardSelectStep) {
+      case 1: setStepText('첫'); break;
+      case 2: setStepText('두'); break;
+      case 3: setStepText('세'); break;
+      default: setStepText('첫'); break;
+    }
   }
   },[])
 

diff --git a/src/components/main/AnsweredCategoryUI.tsx b/src/components/main/AnsweredCategoryUI.tsx
@@ -13,8 +13,8 @@ const AnsweredCategoryUI = ({category}: any) => {
   switch (category) {
     case '탐구':  bgColor = '#C4DCF0'; categoryText = '나의 탐구'; break;
     case '기억':        bgColor = '#DFF0C4'; categoryText = '나의 기억'; break;
-    case '일상':         bgColor = '#FAD39C'; categoryText = '나의 취향';  break;
-    case 'memory':       bgColor = '#DDC4F0'; categoryText = '나의 일상'; break;
+    case '취향':         bgColor = '#FAD39C'; categoryText = '나의 취향';  break;
+    case '일상':       bgColor = '#DDC4F0'; categoryText = '나의 일상'; break;
     case '꿈':           bgColor = '#FAC8D4'; categoryText = '나의 꿈';   break;
     default:             bgColor = '#E9E7E2'; categoryText = '선택안됨';  break;
   }

diff --git a/src/components/main/AnsweredListContent.tsx b/src/components/main/AnsweredListContent.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState, useMemo } from "react";
+import { useMemo } from "react";
 import useAnsweredList from "store/modules/Answers";
 import "assets/components/answered-list/answered-list.css";
 import AnsweredCategoryUI from "./AnsweredCategoryUI";

diff --git a/src/components/main/MyCalendar.tsx b/src/components/main/MyCalendar.tsx
@@ -29,27 +29,26 @@ const MyCalendar = () => {
     getAnsweredCount,
     initAnsweredList,
     updateIsThisMonth,
-    initAnsweredCount,
-    selectedMonth,
     setSelectedMonth,
     setSelectDate,
     getAnsweredDateCount,
     initAnsweredDateCount,
     answeredDateCount,
   } = useAnsweredList();
+
   const { userInfo } = useAuthStore((state) => state);
-  const { setHeaderText, setIsNavigation } = useDefaultSets();
+  const { setHeaderText } = useDefaultSets();
 
   const [selectedDate, setValue] = useState<any>(new Date()); //calendar - 선택일자
   const today = new Date();
   const [textlabelControl, setTextLabel] = useState<Date>(today); // [선택,오늘] 라벨 제어
   const todayYearMonth = dateFormat.getYearAndMonth(today); //금일 연월
-  const todayMonth = today.getMonth() + 1; //이번달
-  const minDate = today.getDate(); //오늘이후날짜 비활성화 -> 내일날짜
+  // const todayMonth = today.getMonth() + 1; //이번달
+  // const minDate = today.getDate(); //오늘이후날짜 비활성화 -> 내일날짜
   const [showCalendar, setShowCalendar] = useState<boolean>(true); //calendar 보이기 숨기기 처리
   const [activeCalendarBtn, setActiveCalendarBtn] = useState<boolean>(false); //calendar 보이기숨기기 버튼 - active/disabled 처리
 
-  const [mark, setMark] = useState<Array<string>>([]);
+  // const [mark, setMark] = useState<Array<string>>([]);
 
   /****************************************************************************
    * 오늘 날짜 관련 요소 사용 - 캘린더관련
@@ -131,14 +130,24 @@ const MyCalendar = () => {
   };
 
   // 해당 일자의 데이터 목록 [월/일]별 조회
-  const getQnAList = (date: Date, type: String) => {
+  const getQnAList = async (date: Date, type: String) => {
     // type 에 따른 date 포맷 변경
     const convertedDate =
       type === "month"
         ? dateFormat.getYearAndMonth(date)
         : dateFormat.getYearAndMonthAndDay(date);
     const param = { email: userInfo.eml, date: convertedDate };
-    getAnsweredList(param); //date, count 포맷 데이터 조회
+
+    //해당 일자의 데이터가 없을 때, api 호출하지 않음
+    const hasData = answeredDateCount?.findIndex(
+      (item) => item.date.toString() === convertedDate
+    ); // 동일한 일자인지 체크
+    console.log('hasData', hasData);
+    if (type === "day" && hasData === -1) {
+      initAnsweredList()
+    } else {
+      await getAnsweredList(param); //date, count 포맷 데이터 조회
+    }
 
     if (type === "month") {
       //월

diff --git a/src/pages/auth/Login.tsx b/src/pages/auth/Login.tsx
@@ -27,9 +27,11 @@ const Login: React.FC = () => {
   const [rememberEmail, setRememberEmail] = useState<boolean>(false); //id저장여부 확인
   const [emailFormChk, setEmailFormChk] = useState<boolean>(false); //* 이메일 형식체크
   const [invalid, setInvalid] = useState<boolean>(true); //아이디비밀번호 일치x
+  const {isLogin} = useAuthStore()
 
   useEffect(() => {
-    console.log(window.location.origin);
+    isLogin && navigate('/main') //로그인했을 경우 메인페이지로 이동
+
     if (localStorage.getItem("bside-remember-login")) {
       //로컬스토리지에서 email 가져오기
       const LSrememberEmail: string = String(
@@ -82,7 +84,6 @@ const Login: React.FC = () => {
       };
       const result: AxiosResponse = await axios.post(
         `${process.env.REACT_APP_API_URL}/api/users/login`,
-        //`http://localhost:8080/api/users/login`,
         { ...param },
         { withCredentials: false }
       );

diff --git a/src/pages/main/AnsweredList.tsx b/src/pages/main/AnsweredList.tsx
@@ -28,7 +28,7 @@ const AnsweredList = () => {
       <Header></Header>
       <div style={{ display: "flex", flexDirection: "column" }}>
         <div style={{ margin: "0 16px 32px 16px" }}>
-          {false ? <LeftAnswerPeriod /> : <GoToOnePagerBtn />}
+          {isThisMonth ? <LeftAnswerPeriod /> : <GoToOnePagerBtn />}
           <MyCalendar />
         </div>
         {/* divider */}

diff --git a/src/store/modules/Answers.ts b/src/store/modules/Answers.ts
@@ -48,6 +48,17 @@ type ANSWER_TYPE = {
   size: number;
   totalElements: number;
 };
+
+/**
+ * @desc 이번달이상의 날짜인지 체크
+ * @returns {boolean} true: 이번달 이상, false: 이번달 이하
+ */
+const checkIsMonthOver = (date: Date|string): boolean => {
+  console.log("checkIsMonthOver", date);
+
+  return new Date(date).getMonth() >= new Date().getMonth()
+}
+
 /**
  * @desc Main - QNA List 상태관리
  */
@@ -65,57 +76,66 @@ const useAnsweredList = create<ANSWER_LIST>((set) => ({
    * @return answeredList update
    */
   getAnsweredList: async (param: any) => {
-    console.log(new Date(param.date).getMonth() + 1);
-
-    param.size = param.size === undefined || null || "" ? 15 : param.size;
-    param.page = param.page === undefined || null || "" ? 1 : param.page;
-
-    const result = await axios.get(
-      `${process.env.REACT_APP_API_URL}/api/question/answered/${
-        param.email
-      }/${param.date.toString()}?size=${param?.size}&page=${param?.page}`
-    );
-    console.log("getAnsweredList", result?.data);
-
-    if (typeof result?.data === "object") {
-      if (result.data?.content?.length > 0) {
-        // answer 컬럼의 값이 존재하지 않을 경우 목록에서 해당 객체를 제거
-        for (let i = 0; i < result?.data.content.length; i++) {
-          if (result?.data.content[i]) {
-            if (result.data.content[i]?.answer.trim().length === 0) {
-              result?.data.content.splice(i, 1);
-              i--;
+    console.log(new Date(param.date).getMonth() + 1 + "월 답변 목록 조회");
+
+    //param.date 가 이번 달 혹은 미래의 경우, api 를 조회하지 않고 빈 배열 반환
+    if (checkIsMonthOver(param.date)) {
+      set({answeredList: { content: [], page: 0, size: 0, totalElements: 0 }});
+    } else {
+      param.size = param.size === undefined || null || "" ? 15 : param.size;
+      param.page = param.page === undefined || null || "" ? 1 : param.page;
+
+      const result = await axios.get(
+        `${process.env.REACT_APP_API_URL}/api/question/answered/${
+          param.email
+        }/${param.date.toString()}?size=${param?.size}&page=${param?.page}`
+      );
+      console.log("getAnsweredList", result?.data);
+
+      if (typeof result?.data === "object") {
+        if (result.data?.content?.length > 0) {
+          // answer 컬럼의 값이 존재하지 않을 경우 목록에서 해당 객체를 제거
+          for (let i = 0; i < result?.data.content.length; i++) {
+            if (result?.data.content[i]) {
+              if (result.data.content[i]?.answer.trim().length === 0) {
+                result?.data.content.splice(i, 1);
+                i--;
+              }
             }
           }
+          const newList = result?.data ? result?.data : []; //값이 없을 경우 빈 배열로 초기화
+          console.log("getAnsweredList 조회 종료:  ", newList);
+          set({ answeredList: newList });
+        } else {
+          set({
+            answeredList: {
+              content: result?.data,
+              page: 0,
+              size: 100,
+              totalElements: result?.data.length,
+            },
+          });
         }
-        const newList = result?.data ? result?.data : []; //값이 없을 경우 빈 배열로 초기화
-        console.log("getAnsweredList 조회 종료:  ", newList);
-        set({ answeredList: newList });
       } else {
-        set({
-          answeredList: {
-            content: result?.data,
-            page: 0,
-            size: 100,
-            totalElements: result?.data.length,
-          },
-        });
+        set({answeredList: { content: [], page: 0, size: 0, totalElements: 0 }});
       }
-    } else {
-      set({
-        answeredList: { content: [], page: 0, size: 0, totalElements: 0 },
-      });
-    }
+    }    
   },
 
   /**
    * @desc 해당 date의 qna count 를 리스트로 조회
    */
   getAnsweredDateCount: async (param: any) => {
-    const result = await axios.get(
-      `${process.env.REACT_APP_API_URL}/api/question/answeredCountDatesInMonth/${param.email}/${param.date}`
-    );
-    set({ answeredDateCount: result?.data });
+    if (checkIsMonthOver(param.date)) {
+      console.log("getAnsweredDateCount -- 이번 혹은 미래를 조회하는 경우, api호출X");
+    set({ answeredCount: 0 });
+    set({ answeredDateCount: [] });
+    } else {
+      const result = await axios.get(
+        `${process.env.REACT_APP_API_URL}/api/question/answeredCountDatesInMonth/${param.email}/${param.date}`
+      );
+      set({ answeredDateCount: result?.data });
+    }
   },
 
   /**
@@ -139,22 +159,28 @@ const useAnsweredList = create<ANSWER_LIST>((set) => ({
    * @param type
    */
   getAnsweredCount: async (param: any) => {
-    let url: string = `${process.env.REACT_APP_API_URL}/api/question/answeredCount/${param.email}/`;
-
-    if (param.type === "month") {
-      //월
-      url += `${param.date[0]}/${param.date[1]}`;
-      const result = await axios.get(url);
-      const count = result?.data.count ? result?.data.count : 0;
-      set({ answeredCount: count });
-    } else if (param.type === "day") {
-      //일
-      url += `${param.date}`;
-      const result = await axios.get(url);
-      const count = result?.data ? result?.data : 0;
-      set({ answeredCount: count });
+    if (checkIsMonthOver(param.date)) {
+      console.log("getAnsweredCount -- 이번 혹은 미래를 조회하는 경우, api호출X");
+      set({ answeredCount: 0 });
+    } else {
+      let url: string = `${process.env.REACT_APP_API_URL}/api/question/answeredCount/${param.email}/`;
+
+      if (param.type === "month") {
+        //월
+        url += `${param.date[0]}/${param.date[1]}`;
+        const result = await axios.get(url);
+        const count = result?.data.count ? result?.data.count : 0;
+        set({ answeredCount: count });
+      } else if (param.type === "day") {
+        //일
+        url += `${param.date}`;
+        const result = await axios.get(url);
+        const count = result?.data ? result?.data : 0;
+        set({ answeredCount: count });
+      }
+
     }
-
+    
   },
 
   /**

diff --git a/src/store/modules/CardState.ts b/src/store/modules/CardState.ts
@@ -73,7 +73,6 @@ const useCardState = create<CARD_STORE>((persist as pillListPersist)
         // const response: AxiosResponse = await axios.get(`${process.env.REACT_APP_API_URL}/api/question/answered/day?writer=${param.email}`, {withCredentials: false})
         const today = getDateFormat01(new Date())
         const response: AxiosResponse = await axios.get(`${process.env.REACT_APP_API_URL}/api/question/answeredCount/${param.email}/${today}`, {withCredentials: false})
-        console.log('getCardSelectStep', response.data);
 
         set({todayCardSelectStep: ++response.data}) // 단계 상태값 세팅 
       } catch (error) {
@@ -84,18 +83,20 @@ const useCardState = create<CARD_STORE>((persist as pillListPersist)
     /*******************************************************
      * @desc 카드 4개 조회 (카테고리 조회 -> 카테고리 저장 -> 유저별 카드 조회)
      * @param {string} email
-     * @return {Array} fourCards
+     * @return {Array} FourCards
      *******************************************************/
     getCards: async (email?: string): Promise<void> => {
       const param = {email: ''}
       param.email = email ? email : ''   //로그인했을 경우 이메일, 아닐경우 빈값 전달
-      let url: string = `${process.env.REACT_APP_API_URL}`               //axios url 초기화
-
-      if (email) {
-        url += `/api/category/select?email=${param.email}`
-      } else {
-        url += `/api/category/select`
-      }
+      // let url: string = `${process.env.REACT_APP_API_URL}`               //axios url 초기화
+      console.log('email', email);
+
+      // if (email) {
+      //   url += `/api/category/select?email=${param.email}`
+      // } else {
+      //   url += `/api/category/select?email=""`
+      // }
+      const url = `${process.env.REACT_APP_API_URL}/api/category/select?email=${param.email}`
       const response: AxiosResponse = await axios.get(url, {withCredentials: false})
       console.log(response)
       let cards:Array<any> = []  //조회된 카드목록