Merge pull request #286 from JayJayleee/feat/#285-ui-check-list

UI 스타일 수정했습니다.

src/App.js

@@ -9,8 +9,24 @@ import AllRouter from '../src/router/allRouter.js';
 import ErrorFallback from './hooks/errorBoundary.tsx';
 import { ErrorBoundary } from 'react-error-boundary';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { alertCount } from './store/actions/alertActions.js';
 
-const queryClient = new QueryClient();
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      onSuccess: (data) => {
+        if (data.queryKey[0] === 'notifications') {
+          const noReadElements = data.pages.reduce(
+            (total, page) => total + (page.data.noReadElements || 0),
+            0,
+          );
+          store.dispatch(alertCount(noReadElements));
+          console.log('쿼리 성공적으로 실행');
+        }
+      },
+    },
+  },
+});
 
 function App() {
   return (

src/asset/sass/etc/question/answer.scss

@@ -5,7 +5,6 @@
   height: 308px;
   margin-top: 5%;
   margin-bottom: 5%;
-  cursor: pointer;
 
   padding: 0 20px;
   :nth-child(1) {
@@ -18,6 +17,9 @@
   border: 1px solid #cacaca;
   border-radius: 20px;
 }
+.adopted {
+  border: 1px solid #ff8d1d;
+}
 
 .user-container {
   letter-spacing: -1px;

src/asset/sass/pages/notificationPage/notificationList.scss

@@ -41,19 +41,21 @@
 
     .title-time {
       display: flex;
-      margin-left: -20rem;
+      margin-left: -5rem;
       flex-direction: column;
       letter-spacing: -1px;
     }
 
     .notification-company {
       letter-spacing: -1px;
-      font-family: pretendard-Light;
+      // font-family: pretendard-Light;
       color: #333333;
       font-size: 1.8rem;
-      width: 5rem;
+      width: 20rem;
       white-space: nowrap;
-      overflow: hidden;
+      // overflow: hidden;
+      text-align: right;
+      margin-right: 4.5%;
       text-overflow: ellipsis;
     }
   }

src/asset/sass/pages/notificationPage/notificationPage.scss

@@ -17,8 +17,9 @@
 }
 
 .all-read-btn {
+  letter-spacing: -0.5px;
   border-radius: 5px;
-  margin-top: 11%;
+  margin-top: 11.5%;
   margin-right: 8%;
   border: 1px solid #000;
   width: 7.5rem;

src/components/pages/notificationPage/notificationPage.jsx

@@ -34,9 +34,10 @@ function NotificationPage() {
     queryFn: ({ pageParam }) => fetchNotifications({ pageParam }),
     getNextPageParam: (lastPage) => {
       const lastId = lastPage.data?.notificationList?.slice(-1)[0]?.id;
-
       return lastId ? `?lastId=${lastId}` : undefined;
     },
+    staleTime: 0,
+    gcTime: 1000 * 60 * 5,
     onSuccess: (data) => {
       if (data?.pages) {
         const noReadElements = data.pages.reduce(

src/components/pages/postPage/questionDetailPage.tsx

@@ -101,7 +101,7 @@ interface AppState {
 function QuestionDetailPage() {
   const navigate = useNavigate();
   const { state } = useLocation();
-  console.log('state: ', state);
+
   // console.log('state: ', state);
   const { questionId } = useParams();
 
@@ -127,27 +127,27 @@ function QuestionDetailPage() {
   const { isLoggedIn } = useSelector((state: AppState) => state.user);
 
   const [isShowEdit, setIsShowEdit] = useState(false);
-  console.log('isShowEdit: ', isShowEdit);
+  // console.log('isShowEdit: ', isShowEdit);
 
   const [showReport, setShowReport] = useState(false);
-  console.log('showReport: ', showReport);
+  // console.log('showReport: ', showReport);
 
   // const { questionId } = useParams();
-  useEffect(() => {
-    const loadAnswerList = async () => {
-      try {
-        // const token = localStorage.getItem(ACCESS_TOKEN);
-        // if (!token) {
-        //   showErrorToast('로그인이 필요합니다.');
-        //   navigate(-1);
-        // }
-      } catch (error) {
-        if (error instanceof Error) showErrorToast(error.message);
-      }
-    };
-
-    loadAnswerList();
-  }, [currentPage, questionId, navigate, postAnswer]);
+  // useEffect(() => {
+  //   const loadAnswerList = async () => {
+  //     try {
+  //       // const token = localStorage.getItem(ACCESS_TOKEN);
+  //       // if (!token) {
+  //       //   showErrorToast('로그인이 필요합니다.');
+  //       //   navigate(-1);
+  //       // }
+  //     } catch (error) {
+  //       if (error instanceof Error) showErrorToast(error.message);
+  //     }
+  //   };
+
+  //   loadAnswerList();
+  // }, [currentPage, questionId, navigate, postAnswer]);
 
   const handleGoBack = () => {
     navigate(-1);
@@ -162,7 +162,7 @@ function QuestionDetailPage() {
     };
 
     if (myNickname === questionerNickname) {
-      showErrorToast('본인의 문의는 답변할 수 없습니다.');
+      showErrorToast('본인의 질문에는 답변할 수 없습니다.');
       return;
     }
 
@@ -219,7 +219,7 @@ function QuestionDetailPage() {
       const response = await axios.get(
         `${BASE_URL}/api/question/${questionId}?pageNo=${currentPage}&criterion=createdAt`,
       );
-      console.log(response);
+      console.log('응답', response);
       const {
         data: {
           questionerNickname,

src/components/ui/contactSlider/disclaimer.jsx

@@ -9,7 +9,7 @@ export default function Disclaimer() {
         (점심 시간 12 : 00 ~ 13 : 00,토 / 일 / 공휴일 휴무 )
       </div>
       <div className="disclaimer">
-        등록이 완료된 문의 내용은 수정이 불가하오니 서비스 이용에 참고
+        등록이 완료된 문의 내용은 수정 및 삭제가 불가하오니 서비스 이용에 참고
         부탁드립니다.
       </div>
     </div>

src/components/ui/myPageSelection/myComponent.scss

@@ -21,6 +21,8 @@
   justify-content: space-between;
   align-items: center;
   padding-left: 3rem;
+  background-color: #ffffff;
+  cursor: pointer;
 }
 .answer-item {
   height: 100px;
@@ -34,6 +36,8 @@
   flex-direction: column;
   justify-content: center;
   padding-left: 3rem;
+  background-color: #ffffff;
+  cursor: pointer;
 }
 
 .answer-item-title {
@@ -45,10 +49,11 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  margin: 0% 0% 3% 0%;
 }
 
 .answer-item-content {
-  font-size: 1.2rem;
+  font-size: 1.8rem;
   color: #474646;
   letter-spacing: -1px;
   font-family: Pretendard-Light;

src/components/ui/question/answer.tsx

@@ -1,10 +1,28 @@
 import React, { useState } from 'react';
 import '../../../asset/sass/etc/question/answer.scss';
 import styled from 'styled-components';
+import yellowTrophy from '../../../asset/image/yellow-trophy.svg';
 import Trophy from '../../../asset/image/trophy.svg';
 import { fetchAPI } from '../../global/utils/apiUtil';
 import { showSuccessToast } from '../toast/toast';
 
+const AdoptedTag = styled.div`
+  position: relative;
+  width: 95px;
+  height: 25px;
+  border: 1px solid #ff8d1d;
+  border-radius: 0.5rem;
+  font-size: 1.2rem;
+  color: #ff8d1d;
+  letter-spacing: -1px;
+  font-family: Pretendard-Medium;
+  top: -4.5rem;
+  left: 41rem;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  padding: 0 1rem;
+`;
 const AdoptButton = styled.button`
   display: flex;
   margin: -12% 6% 0% 82%;
@@ -58,14 +76,23 @@ function AnswerModule({
 
   return (
     <div className={`answer-container ${isAdopted ? 'adopted' : ''}`}>
+      {isAdopted && (
+        <AdoptedTag>
+          <img src={yellowTrophy} alt="trophy" />
+          채택된 답변
+        </AdoptedTag>
+      )}
+
       <div>
         <div>{answererNickname}</div>
         <div>{answerContent}</div>
         <div className="user-container">{createAt}</div>
-        <AdoptButton onClick={handleAdoptAnswer}>
-          <img src={Trophy} alt="trophy" />
-          채택하기
-        </AdoptButton>
+        {isAdopted || (
+          <AdoptButton onClick={handleAdoptAnswer}>
+            <img src={Trophy} alt="trophy" />
+            채택하기
+          </AdoptButton>
+        )}
       </div>
     </div>
   );

src/components/ui/searchInput/searchInput.tsx

@@ -36,7 +36,7 @@ const StyledSearchInput = styled.input`
 const AutoCompleteContainer = styled.div`
   position: absolute;
   background-color: #fefefe;
-  width: 515px;
+  width: 490px;
   letter-spacing: -1px;
   margin-left: 14%;
   margin-top: 1%;
@@ -48,7 +48,7 @@ const AutoCompleteContainer = styled.div`
 `;
 
 const AutoCompleteItem = styled.div`
-  padding: 10px;
+  padding: 15px 10px;
   cursor: pointer;
   &:hover {
     background-color: #f2f2f2;