Merge pull request #24 from 9oormthonUNIV-3th-KGU/fix/qa

[Fix] QA 반영
9oormthonUNIV-3th-KGU · Sep 25, 2024 · 7de005a · 7de005a
2 parents be0d754 + e5ced8a
commit 7de005a
Show file tree

Hide file tree

Showing 13 changed files with 78 additions and 73 deletions.
diff --git a/index.html b/index.html
@@ -4,10 +4,6 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta
-      http-equiv="Content-Security-Policy"
-      content="upgrade-insecure-requests"
-    />
     <title>Family Note</title>
   </head>
   <body>

diff --git a/nginx/nginx.conf b/nginx/nginx.conf
@@ -15,4 +15,4 @@ server {
         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
         proxy_set_header X-Forwarded-Proto $scheme;
     }
-}
+}
diff --git a/src/components/AnswerBox.tsx b/src/components/AnswerBox.tsx
@@ -21,14 +21,13 @@ const Box = styled.div<{
   flex-direction: column;
   align-items: center;
   gap: 20px;
-  overflow-x: none;
+  overflow-x: hidden;
   overflow-y: scroll;
-  scrollbar-width: thin;
-  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
-
   &::-webkit-scrollbar {
-    width: 0px;
+    display: none;
   }
+  -ms-overflow-style: none;
+  scrollbar-width: none;
 
   transition: opacity 0.5s, transform 0.5s;
 

diff --git a/src/components/AnswerModal.tsx b/src/components/AnswerModal.tsx
@@ -12,7 +12,7 @@ const AnswerModalBackground = styled.div<{ isOpen: boolean }>`
   left: 0px;
   top: 0px;
 
-  background-color: rgba(0, 0, 0, 0.061);
+  background-color: rgba(0, 0, 0, 0.61);
   z-index: 2;
 `
 

diff --git a/src/components/FamilyBox.tsx b/src/components/FamilyBox.tsx
@@ -5,42 +5,28 @@ import { UseFamilyStore } from '../stores/UseFamilyStore'
 import { FetchFamilyList } from '../services/GetFamilyListApi'
 import { FetchFamilyData } from '../services/GetFamilyApi'
 import useQuestionStore from '../stores/UseQuestionStore'
-import { UseCursorStore } from '../stores/\bUseCursorStore'
+import { UseCursorStore } from '../stores/UseCursorStore'
 import SvgIcon from './SelectSvg'
 
 const FamilyBoxWrap = styled.div`
   position: absolute;
   display: flex;
   flex-direction: column;
   gap: 13px;
-  max-height: 473px;
+  max-height: 462px;
   width: 385px;
   top: 15px;
   left: 16px;
-  scrollbar-width: thin;
-  scrollbar-color: rgba(155, 155, 155, 0.5) transparent;
-
-  &::-webkit-scrollbar {
-    width: 8px;
-  }
-
-  ::-webkit-scrollbar-track {
-    background-color: transparent;
-  }
-
-  ::-webkit-scrollbar-thumb {
-    background: rgba(155, 155, 155, 0.5);
-    border-radius: 10px;
-    border: 2px solid transparent;
-    background-clip: padding-box;
-  }
-
-  ::-webkit-scrollbar-thumb:hover {
-    background-color: rgba(155, 155, 155, 0.8);
-  }
 
   overflow-x: hidden;
+  overflow-y: scroll;
   box-sizing: border-box;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  -ms-overflow-style: none;
+  scrollbar-width: none;
 `
 
 const Row = styled.div<{ hoveredFamilyId: number | null; startIndex: number }>`
@@ -67,7 +53,7 @@ const FamilyBoxBtn = styled.button<{ isHovered: boolean; isLoading: boolean }>`
   background: transparent;
   position: relative;
   flex-grow: ${({ isHovered }) => (isHovered ? 2 : 1)};
-  cursor: ${({ isLoading }) => (isLoading ? 'wait' : 'default')};
+  cursor: ${({ isLoading }) => (isLoading ? 'wait' : '')};
 `
 
 const FamilyHeader = styled.div`
@@ -183,7 +169,7 @@ function FamilyBox() {
     <FamilyBoxWrap>
       {rows.map((rowFamilies, rowIndex) => (
         <Row
-          key={rowIndex}
+          key={`row-${rowIndex}-${rowFamilies[0].familyId}`}
           hoveredFamilyId={hoveredFamilyId}
           startIndex={rowIndex * 2}
         >
@@ -212,11 +198,15 @@ function FamilyBox() {
                 </FamilyHeader>
                 <SvgIcon isHovered={isHovered} />
                 <FamilyMembers>
-                  {family.familyMembers.slice(0, 6).map((member) => (
-                    <MemberNickname key={member.familyMemberId}>
-                      {member.nickName}
-                    </MemberNickname>
-                  ))}
+                  {family.familyMembers
+                    .slice(0, 6)
+                    .map((member, memberIndex) => (
+                      <MemberNickname
+                        key={`${family.familyId}-${member.familyMemberId}-${memberIndex}`}
+                      >
+                        {member.nickName}
+                      </MemberNickname>
+                    ))}
                 </FamilyMembers>
               </FamilyBoxBtn>
             )

diff --git a/src/components/GetQuestionBtn.tsx b/src/components/GetQuestionBtn.tsx
@@ -2,7 +2,7 @@ import { useNavigate } from 'react-router-dom'
 import styled from '@emotion/styled'
 import useQuestionStore from '../stores/UseQuestionStore'
 import UseGetQuestionBtnStore from '../stores/UseGetQuestionBtnStore'
-import { UseCursorStore } from '../stores/\bUseCursorStore'
+import { UseCursorStore } from '../stores/UseCursorStore'
 
 import { loadFamilyId } from '../utils/UserToken'
 

diff --git a/src/components/LogoutBtn.tsx b/src/components/LogoutBtn.tsx
@@ -1,5 +1,7 @@
 import { useNavigate } from 'react-router-dom'
 import styled from '@emotion/styled'
+import UseGetQuestionBtnStore from '../stores/UseGetQuestionBtnStore'
+import useQuestionStore from '../stores/UseQuestionStore'
 
 const LogoutButton = styled.button`
   position: absolute;
@@ -24,8 +26,18 @@ const LogoutButton = styled.button`
 
 function LogoutBtn() {
   const navigate = useNavigate()
+  const { setActivate } = UseGetQuestionBtnStore((state) => ({
+    setActivate: state.setActivate,
+  }))
+
+  const { resetQuestionState } = useQuestionStore((state) => ({
+    resetQuestionState: state.resetQuestionState,
+  }))
 
   const logout = () => {
+    location.reload()
+    setActivate()
+    resetQuestionState()
     localStorage.removeItem('familyId')
     navigate('/login')
     console.log('logout')

diff --git a/src/pages/home.tsx b/src/pages/home.tsx
@@ -64,13 +64,14 @@ const QuestionAnswerBox = styled.div`
 
 function Home() {
   const hasFetched = useRef(false)
-  const { fetchQuestions, questionBoxes, selectedQuestion, animationState } =
-    useQuestionStore((state) => ({
+  const { questionBoxes, selectedQuestion, animationState } = useQuestionStore(
+    (state) => ({
       fetchQuestions: state.fetchQuestions,
       questionBoxes: state.questionBoxes,
       selectedQuestion: state.selectedQuestion,
       animationState: state.animationState,
-    }))
+    })
+  )
 
   const { answers } = UseAnswerStore()
   const { familyMembers, setMyName, setFamilyMembers } = UseFamilyStore()
@@ -93,8 +94,6 @@ function Home() {
           console.error('Error fetching family data:', error)
         })
 
-      fetchQuestions(Number(familyId), 0, 45)
-
       hasFetched.current = true
     }
   }, [])
@@ -118,7 +117,11 @@ function Home() {
               answeredNicknames.includes(member.nickName)
             )
 
-            if (allMembersAnswered && !activate) {
+            console.log('activate before check:', activate)
+            console.log('allMembersAnswered:', allMembersAnswered)
+
+            if (allMembersAnswered) {
+              console.log('Activating GetQuestionBtn')
               setActivate()
             }
           }
@@ -147,7 +150,7 @@ function Home() {
         <GetQuestionBtn />
         <QuestionListContainer>
           {questionBoxes.reverse().map((question, index) => (
-            <QuestionAnswerBox key={question.id}>
+            <QuestionAnswerBox key={`${question.id}-${index}`}>
               <QuestionBox
                 content={question.content}
                 id={question.id}

diff --git a/src/services/GetFamilyApi.ts b/src/services/GetFamilyApi.ts
@@ -3,7 +3,6 @@ import apiClient from '../config/api-client'
 export const FetchFamilyData = async (familyId: number) => {
   try {
     const response = await apiClient.get(`/family/${familyId}`)
-    console.log(response.data)
     return response.data
   } catch (error) {
     console.error('Error fetching data:', error)

diff --git a/src/services/GetFamilyQuestionApi.ts b/src/services/GetFamilyQuestionApi.ts
@@ -10,16 +10,17 @@ export const FetchFamilyQuestions = async (
     const response = await apiClient.get(
       `/family/question/${familyId}?page=${page}&size=${size}`
     )
+    if (response.data.pageable.totalElements === 0) {
+      console.log('가족에게 할당된 질문이 없습니다.')
+      return 'no question'
+    }
     return response.data
   } catch (error) {
     if (axios.isAxiosError(error)) {
       console.error('HTTP Status Code:', error.response?.status)
-      if (error.response?.status === 500) {
-        alert('가족에게 할당된 질문이 없습니다.')
-        return 'no question'
+      if (error) {
+        console.error('An unexpected error occurred:', error)
       }
-    } else {
-      console.error('An unexpected error occurred:', error)
     }
     throw error
   }

diff --git a/src/stores/UseCursorStore.ts → src/stores/UseCursorStore.ts b/src/stores/UseCursorStore.ts → src/stores/UseCursorStore.ts
diff --git a/src/stores/UseQuestionStore.ts b/src/stores/UseQuestionStore.ts
@@ -46,6 +46,7 @@ interface QuestionState {
   fetchQuestions: (familyId: number, page: number, size: number) => void
   fetchNewQuestions: (familyId: number) => void
   setIsFetching: (value: boolean) => void
+  resetQuestionState: () => void
 }
 
 const useQuestionStore = create<QuestionState>((set) => ({
@@ -96,24 +97,26 @@ const useQuestionStore = create<QuestionState>((set) => ({
     try {
       const result = await FetchFamilyQuestions(familyId, page, size)
 
-      if (result === 'no question') {
+      if (result === 'no question' || !result) {
         const { setActivate } = UseGetQuestionBtnStore.getState()
         setActivate()
         return
       }
 
-      const response: QuestionApiResponse = result
-      const questions: QuestionBox[] = response.contents.map((item) => ({
-        id: item.familyQuestionId,
-        content: item.content,
-        createdAt: new Date(item.createdAt),
-        isAnswerVisible: false,
-        animationState: 'none',
-      }))
-
-      set({
-        questionBoxes: questions,
-      })
+      if (result.contents && result.contents.length > 0) {
+        const response: QuestionApiResponse = result
+        const questions: QuestionBox[] = response.contents.map((item) => ({
+          id: item.familyQuestionId,
+          content: item.content,
+          createdAt: new Date(item.createdAt),
+          isAnswerVisible: false,
+          animationState: 'none',
+        }))
+
+        set({
+          questionBoxes: questions,
+        })
+      }
     } catch (error) {
       console.error('질문을 가져오는 중 오류 발생:', error)
     }
@@ -134,6 +137,7 @@ const useQuestionStore = create<QuestionState>((set) => ({
   },
 
   setIsFetching: (value) => set({ isFetching: value }),
+  resetQuestionState: () => set({ questionBoxes: [], selectedQuestion: null }),
 }))
 
 export default useQuestionStore
diff --git a/vite.config.ts b/vite.config.ts
@@ -24,11 +24,12 @@ export default defineConfig({
         secure: false,
         ws: true,
       },
-    },
-    hmr: {
-      host: 'familynote.ezbooks.kr',
-      protocol: 'wss',
-      port: 5173,
+      '/login': {
+        target: 'http://211.188.49.236:5252/api/v1',
+        changeOrigin: true,
+        secure: false,
+        ws: true,
+      },
     },
   },
   plugins: [react({ jsxImportSource: '@emotion/react' })],
-Original file line number
+Diff line change
@@ Expand Up / @@ -15,4 +15,4 @@ server { @@
             proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
             proxy_set_header X-Forwarded-Proto $scheme;
         }
-    }
+    }