[feat] 분석 리포트 UI 변경

CAU-CSE-24-02-Capstone-Design · Dec 5, 2024 · 287054e · 287054e
1 parent 185305a
commit 287054e
Show file tree

Hide file tree

Showing 8 changed files with 598 additions and 582 deletions.
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
diff --git a/src/components/Header.js b/src/components/Header.js
@@ -1,19 +1,16 @@
-import React, {useContext, useState} from "react";
-import {useNavigate} from "react-router-dom";
+import React, { useContext, useState } from "react";
+import { useNavigate } from "react-router-dom";
 import instance from "../axios/TokenInterceptor";
-import {SPRING_API_URL} from "../constants/api";
-import {NotificationContext} from "../context/NotificationProvider";
+import { SPRING_API_URL } from "../constants/api";
+import { NotificationContext } from "../context/NotificationProvider";
+import ReportPopup from "./ReportPopup";
 
 const Header = () => {
     const navigate = useNavigate();
     const [isModalOpen, setIsModalOpen] = useState(false);
-    const {
-        analysisText,
-        firstDate,
-        lastDate,
-    } = useContext(NotificationContext);
+    const [popupStates, setPopupStates] = useState({});
+    const { analysisText, firstDate, lastDate } = useContext(NotificationContext);
 
-    // Header의 복숭아멘토 텍스트 클릭 시 메인 페이지로 이동
     const handleLogoClick = async () => {
         let isCompleteSpeech = false;
         let selfFeedback = null;
@@ -23,21 +20,7 @@ const Header = () => {
                 `${SPRING_API_URL}/feedbacks/completions`
             );
             if (response.data.isSuccess) {
-                if (
-                    response.data.code === "USER4002" ||
-                    response.data.code === "ACCESSTOKEN4002"
-                ) {
-                    console.error("오늘 답변 했는 지 여부 받아오기 API 서버 에러");
-                } else {
-                    if (response.data.result.speechExists) {
-                        isCompleteSpeech = true;
-                    } else {
-                        isCompleteSpeech = false;
-                    }
-                    console.log("오늘 답변 했는 지 여부 받아오기 성공");
-                }
-            } else {
-                console.error("오늘 답변 했는 지 여부 받아오기 실패");
+                isCompleteSpeech = response.data.result.speechExists;
             }
         } catch (error) {
             console.error("오늘 답변 했는 지 여부 받아오기 실패");
@@ -48,20 +31,12 @@ const Header = () => {
                 `${SPRING_API_URL}/self-feedbacks/latest-feedbacks`
             );
             if (response.data.isSuccess) {
-                if (
-                    response.data.code === "ANSWER4001" ||
-                    response.data.code === "SELFFEEDBACK4001"
-                ) {
-                } else {
-                    selfFeedback = response.data.result.feedback;
-                    console.log("이전 셀프 피드백 받아오기 성공");
-                }
-            } else {
-                console.error("이전 셀프 피드백 받아오기 실패");
+                selfFeedback = response.data.result.feedback;
             }
         } catch (error) {
             console.error("이전 셀프 피드백 받아오기 실패");
         }
+
         navigate(
             `/main?selfFeedback=${selfFeedback}&isCompleteSpeech=${isCompleteSpeech}`
         );
@@ -79,6 +54,13 @@ const Header = () => {
         navigate("/mypage");
     };
 
+    const togglePopup = (index) => {
+        setPopupStates((prevStates) => ({
+            ...prevStates,
+            [index]: !prevStates[index],
+        }));
+    };
+
     return (
         <>
             <header className="flex items-center justify-between p-4 bg-primary-50 w-full max-w-[500px] mx-auto">
@@ -106,24 +88,34 @@ const Header = () => {
             {/* Modal */}
             {isModalOpen && (
                 <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-                    <div className="bg-white p-6 rounded-lg shadow-lg max-w-md w-full">
-                        <h2 className="text-xl font-bold mb-4">
-                            {firstDate && lastDate
-                                ? `${firstDate}~${lastDate} : 분석 리포트`
-                                : "분석 리포트가 아직 없습니다!"}
+                    <div className="bg-white p-6 rounded-lg shadow-lg max-w-md w-full h-[500px] flex flex-col">
+                        <h2 className="text-xl font-bold mb-4 text-center">
+                            {firstDate && lastDate ? (
+                                <>
+                                    {`${firstDate}~${lastDate}`}
+                                    <br />
+                                    분석 리포트
+                                </>
+                            ) : (
+                                "분석 리포트가 아직 없습니다!"
+                            )}
                         </h2>
-                        <p className="mb-4">
-                            <pre className="whitespace-pre-wrap">
-                                {analysisText.map((row, rowIndex) => (
-                                    <div key={rowIndex}>
-                                        <strong>{row[0]}</strong>
-                                        {row[1] ? `: ${row[1]}` : ''} {/* 내용이 있으면 :과 내용을, 없으면 아무것도 표시하지 않음 */}
-                                    </div>
-                                ))}
-                            </pre>
-                        </p>
+                        {/* 스크롤 가능한 영역 */}
+                        <div className="flex-1 overflow-y-auto mb-4">
+                            {analysisText.map((row, rowIndex) => (
+                                <div key={rowIndex} className="mb-4">
+                                    <ReportPopup
+                                        title={row[0]}
+                                        content={row[1]}
+                                        isOpen={!!popupStates[rowIndex]}
+                                        toggleOpen={() => togglePopup(rowIndex)}
+                                    />
+                                </div>
+                            ))}
+                        </div>
+                        {/* 닫기 버튼 */}
                         <button
-                            className="px-4 py-2 bg-primary-500 text-Black rounded"
+                            className="px-4 py-2 bg-blue-500 text-white rounded mt-4 hover:bg-blue-600 transition-colors"
                             onClick={handleCloseModal}
                         >
                             닫기

diff --git a/src/components/ReportPopup.js b/src/components/ReportPopup.js
@@ -0,0 +1,25 @@
+import React from "react";
+
+const ReportPopup = ({
+                         title,
+                         content,
+                         isOpen,
+                         toggleOpen,
+                     }) => {
+    return (
+        <div
+            className="relative flex flex-col w-full p-4 transition-all bg-white border rounded-lg shadow cursor-pointer border-grayscale-40 hover:shadow-md"
+            onClick={toggleOpen}
+        >
+            {title}
+            {/* 드롭다운 텍스트 */}
+            {isOpen && (
+                <div className="mt-3 text-sm text-justify transition-all duration-300 ease-in-out text-grayscale-90">
+                    {content}
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default ReportPopup;
diff --git a/src/context/NotificationProvider.js b/src/context/NotificationProvider.js
@@ -5,10 +5,10 @@ import instance from "../axios/TokenInterceptor";
 export const NotificationContext = createContext();
 
 export const NotificationProvider = ({children}) => {
-    const [isNewReport, setIsNewReport] = useState(false);
-    const [analysisText, setAnalysisText] = useState([[]]);
-    const [firstDate, setFirstDate] = useState("");
-    const [lastDate, setLastDate] = useState("");
+    const [isNewReport, setIsNewReport] = useState(true);
+    const [analysisText, setAnalysisText] = useState([["간투어 사용 빈도와 유형","사용자는 \"음\", \"어\", \"그\", \"이제\", \"뭐\" 등의 간투어를 자주 사용합니다. 이 간투어들은 주로 문장을 시작할 때 또는 새로운 아이디어로 넘어갈 때 사용되며, 생각을 정리하는 데 시간을 벌기 위한 것으로 보입니다."],["자주 사용하는 단어나 표현","사용자는 \"생각합니다\", \"것 같습니다\", \"그래서\", \"왜냐면\" 등의 표현을 자주 사용합니다. 이러한 표현들은 사용자가 자신의 의견을 설명하거나 이유를 제시할 때 사용되며, 논리적인 설명을 돕는 역할을 합니다."],["침묵시간의 위치와 경향성","사용자는 주로 중요한 포인트를 말한 후 또는 새로운 아이디어로 전환하기 전에 침묵을 가집니다. 이 침묵은 대체로 1.5초에서 3.0초 사이로 나타나며, 이는 사용자가 다음 말을 생각하거나 이전 말을 소화하는 시간으로 보입니다."],["말을 이어가는 방식","사용자는 접속사 \"그래서\", \"왜냐면\"을 자주 사용하며, 반복적으로 같은 단어를 사용하는 경향이 있습니다. 이는 말을 이어가는 데 도움을 주지만 때로는 불필요한 반복으로 들릴 수 있습니다."],["사용된 문장의 복잡도","사용자는 주로 간단하고 직설적인 문장을 사용합니다. 복잡한 문장보다는 일상적인 언어와 짧은 문장을 선호하는 경향이 있으며, 이는 청자가 이해하기 쉽도록 돕습니다."],["언어적 흐름","사용자의 언어적 흐름은 대체로 자연스럽지만, 간투어의 사용과 일부 반복적인 표현 사용으로 인해 때때로 어색함이 느껴집니다. 또한, 문맥상의 연결이 약간 끊기는 경우가 있어 이 부분에서 개선이 필요합니다."],["질문에 대한 깊이","사용자는 질문에 대해 깊이 있는 답변을 제시하려 노력합니다. 그러나 간혹 질문의 본질에서 벗어나거나 너무 일반적인 답변을 할 때가 있습니다. 예를 들어, 성공에 대한 정의를 설명할 때 구체적인 예시가 더 필요할 수 있습니다."]]);
+    const [firstDate, setFirstDate] = useState("2024-11-28");
+    const [lastDate, setLastDate] = useState("2024-12-05");
 
     useEffect(() => {
         const getAnalysisReport = async () => {