자잘한 수정 (#issue 303)

src/api/auth.api.ts

@@ -1,4 +1,4 @@
-import type { ApiVerifyNickname, VerifyEmail } from '../models/auth';
+import type { ApiOauth, ApiVerifyNickname, VerifyEmail } from '../models/auth';
 import { httpClient } from './http.api';
 import { loginFormValues } from '../pages/login/Login';
 import { registerFormValues } from '../pages/user/register/Register';
@@ -17,6 +17,7 @@ export const postVerificationEmail = async (email: string) => {
 export const postVerifyEmailCode = async (data: VerifyEmail) => {
   try {
     const response = await httpClient.post('/authenticode/verify', data);
+
     return response;
   } catch (error) {
     console.error('verifiyEmailCode:', error);
@@ -42,6 +43,7 @@ export const postSignUp = async (
 ) => {
   try {
     const response = await httpClient.post('/auth/sign-up', data);
+
     return response;
   } catch (error) {
     console.error('signup:', error);
@@ -54,6 +56,7 @@ export const postResetPassword = async (
 ) => {
   try {
     const response = await httpClient.post('/auth/password/reset', data);
+
     return response;
   } catch (error) {
     console.error('resetpassword:', error);
@@ -64,9 +67,36 @@ export const postResetPassword = async (
 export const postLogin = async (data: loginFormValues) => {
   try {
     const response = await httpClient.post('/auth/login', data);
+
     return response.data;
   } catch (error) {
     console.error('login:', error);
     throw error;
   }
 };
+
+export const postRefresh = async () => {
+  try {
+    const response = await httpClient.post('/auth/refresh');
+
+    return response.data;
+  } catch (e) {
+    console.error(e);
+    throw e;
+  }
+};
+
+export const getOauthLogin = async (oauthAccessToken: string) => {
+  try {
+    const response = await httpClient.get<ApiOauth>(`/auth/oauth-login`, {
+      headers: {
+        Authorization: `Bearer ${oauthAccessToken}`,
+      },
+    });
+
+    return response.data;
+  } catch (e) {
+    console.error(e);
+    throw e;
+  }
+};

src/api/http.api.ts

@@ -1,29 +1,23 @@
 import axios, { AxiosRequestConfig } from 'axios';
-import useAuthStore, { getTokens } from '../store/authStore';
+import useAuthStore from '../store/authStore';
+import { postRefresh } from './auth.api';
 
 export const BASE_URL = `${import.meta.env.VITE_APP_API_BASE_URL}`;
 const DEFAULT_TIMEOUT = 15000;
 
 export const createClient = (config?: AxiosRequestConfig) => {
-  const { storeLogin, storeLogout } = useAuthStore.getState();
+  const { login, logout } = useAuthStore.getState();
 
   const axiosInstance = axios.create({
     baseURL: BASE_URL,
     timeout: DEFAULT_TIMEOUT,
-    headers: {
-      'content-type': 'application/json',
-      authorization:
-        getTokens().accessToken || getTokens().refreshToken
-          ? `Bearer ${getTokens().accessToken}`
-          : '',
-    },
     withCredentials: true,
     ...config,
   });
 
   axiosInstance.interceptors.request.use(
     (config) => {
-      const { accessToken } = getTokens();
+      const accessToken = useAuthStore.getState().accessToken;
       if (accessToken) {
         config.headers['Authorization'] = `Bearer ${accessToken}`;
       }
@@ -42,31 +36,40 @@ export const createClient = (config?: AxiosRequestConfig) => {
     async (error) => {
       const originalRequest = error.config;
 
+      if (!originalRequest.retryCount) {
+        originalRequest.retryCount = 0;
+      }
+
       if (
         error.response &&
         error.response.status === 401 &&
-        !originalRequest._retry
+        originalRequest.retryCount < 5
       ) {
-        originalRequest._retry = true;
+        originalRequest.retryCount += 1;
 
-        try {
-          const refreshToken = getTokens().refreshToken;
+        /**
+         *  http 로컬 환경이라 httpOnly인 refresh 토큰 전송 불가
+         *  배포 후 사용 (주석처리)
+         *  5회 시도후 안되면 로그아웃 처리하기
+         */
+        // try {
+        //   const refreshResponse = await postRefresh()
 
-          const refreshResponse = await axios.post(`${BASE_URL}auth/refresh`, {
-            refreshToken,
-          });
+        //   const { accessToken: newAccessToken } = refreshResponse.data;
 
-          const { accessToken: newAccessToken, refreshToken: newRefreshToken } =
-            refreshResponse.data;
+        //   login(newAccessToken,null);
+        //   originalRequest.headers['Authorization'] = `Bearer ${newAccessToken}`;
 
-          storeLogin(newAccessToken, newRefreshToken);
-          originalRequest.headers['Authorization'] = `Bearer ${newAccessToken}`;
+        //   return await axiosInstance(originalRequest);
+        // } catch (refreshError) {
+        //   logout();
+        //   return Promise.reject(refreshError);
+        // }
 
-          return await axios(originalRequest);
-        } catch (refreshError) {
-          storeLogout();
-          return Promise.reject(refreshError);
-        }
+        logout();
+        useAuthStore.persist.clearStorage();
+        window.location.href = '/login';
+        return Promise.reject(error);
       }
       return Promise.reject(error);
     }

src/components/common/error/QueryErrorBoundary.tsx

@@ -2,9 +2,11 @@ import { useQueryErrorResetBoundary } from '@tanstack/react-query';
 import type { PropsWithChildren } from 'react';
 import ErrorBoundary from './ErrorBoundary';
 import ErrorFallback from './ErrorFallback';
+import { useLocation } from 'react-router-dom';
 
 export default function QueryErrorBoundary({ children }: PropsWithChildren) {
   const { reset } = useQueryErrorResetBoundary();
+  const location = useLocation();
 
   return (
     <ErrorBoundary
@@ -13,6 +15,7 @@ export default function QueryErrorBoundary({ children }: PropsWithChildren) {
         const { error } = props;
         return <ErrorFallback error={error} />;
       }}
+      key={location.pathname}
     >
       {children}
     </ErrorBoundary>

src/components/common/noContent/NoContent.styled.ts

@@ -3,6 +3,7 @@ import styled from 'styled-components';
 export const Wrapper = styled.div`
   width: 100%;
   height: 100%;
+  min-height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -14,6 +15,7 @@ export const Wrapper = styled.div`
 `;
 
 export const NoContentText = styled.h1`
+  height: 100%;
   font-size: 2rem;
   font-weight: 600;
   color: ${({ theme }) => theme.color.navy};

src/components/user/customerService/CustomerServiceHeader.styled.ts

@@ -37,10 +37,13 @@ export const SearchBarInput = styled.input`
 
 export const ButtonWrapper = styled.div`
   display: flex;
+  justify-content: center;
+  align-items: center;
   gap: 0.5rem;
 `;
 
-export const UturnButton = styled.button`
+export const XButton = styled.button`
+  height: fit-content;
   &:hover {
     color: ${({ theme }) => theme.color.lightnavy};
   }

src/components/user/customerService/CustomerServiceHeader.tsx

@@ -1,8 +1,11 @@
 import { MagnifyingGlassIcon, XCircleIcon } from '@heroicons/react/24/outline';
 import * as S from './CustomerServiceHeader.styled';
 import MovedInquiredLink from './MoveInquiredLink';
-import { Outlet } from 'react-router-dom';
-import { useState } from 'react';
+import { Outlet, useLocation, useSearchParams } from 'react-router-dom';
+import { useEffect, useState } from 'react';
+import Modal from '../../common/modal/Modal';
+import { useModal } from '../../../hooks/useModal';
+import { MODAL_MESSAGE_CUSTOMER_SERVICE } from '../../../constants/user/customerService';
 
 interface CustomerServiceHeaderProps {
   title: string;
@@ -16,10 +19,28 @@ export default function CustomerServiceHeader({
   onGetKeyword,
 }: CustomerServiceHeaderProps) {
   const [inputValue, setInputValue] = useState<string>('');
+  const { isOpen, message, handleModalOpen, handleModalClose } = useModal();
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const handleKeyword = (inputValue: string) => {
+    const newSearchParams = new URLSearchParams(searchParams);
+    if (inputValue === '') {
+      newSearchParams.delete('keyword');
+    } else {
+      newSearchParams.set('keyword', inputValue);
+    }
+    setSearchParams(newSearchParams);
+  };
 
   const handleSubmitKeyword = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    onGetKeyword(inputValue);
+    if (inputValue.trim() === '') {
+      return handleModalOpen(MODAL_MESSAGE_CUSTOMER_SERVICE.noKeyword);
+    } else {
+      onGetKeyword(inputValue);
+      handleKeyword(inputValue);
+      return;
+    }
   };
 
   const handleChangeValue = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -30,6 +51,7 @@ export default function CustomerServiceHeader({
   const handleReset = () => {
     onGetKeyword('');
     setInputValue('');
+    handleKeyword('');
   };
 
   return (
@@ -42,18 +64,18 @@ export default function CustomerServiceHeader({
           <S.SearchBarInput
             type='text'
             placeholder='궁금한 내용을 검색해보세요.'
-            value={inputValue || keyword}
+            value={keyword ? keyword : inputValue}
             onChange={handleChangeValue}
           />
           <S.ButtonWrapper>
             {keyword !== '' && (
-              <S.UturnButton
+              <S.XButton
                 type='button'
                 aria-label='show all result'
                 onClick={handleReset}
               >
                 <XCircleIcon />
-              </S.UturnButton>
+              </S.XButton>
             )}
             <S.SearchButton type='submit' aria-label='search'>
               <MagnifyingGlassIcon />
@@ -63,6 +85,9 @@ export default function CustomerServiceHeader({
         <MovedInquiredLink />
       </S.WrapperNav>
       <Outlet />
+      <Modal isOpen={isOpen} onClose={handleModalClose}>
+        {message}
+      </Modal>
     </S.Container>
   );
 }

src/components/user/customerService/faq/FAQContent.styled.ts

@@ -32,12 +32,34 @@ export const ListPlusIcon = styled.div<{ $isOpen: boolean }>`
   }
 `;
 
-export const ListContentWrapper = styled.div`
-  cursor: auto;
-  background: ${({ theme }) => theme.color.lightgrey};
-  padding: 1.5rem 1rem;
-  display: flex;
-  gap: 0.5rem;
+export const ListContentWrapper = styled.div<{ $isShowContent: boolean }>`
+  max-height: 0;
+  overflow: hidden;
+
+  @keyframes slice-show {
+    0% {
+      opacity: 0;
+    }
+    50% {
+      opacity: 0.5;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+
+  ${({ $isShowContent }) =>
+    $isShowContent &&
+    css`
+      max-height: 100vh;
+      opacity: 1;
+      cursor: auto;
+      background: ${({ theme }) => theme.color.lightgrey};
+      padding: 1.5rem 1rem;
+      display: flex;
+      gap: 0.5rem;
+      animation: slice-show 300ms;
+    `}
 `;
 
 export const ListButtonWrapper = styled.div`

src/components/user/customerService/faq/FAQContent.tsx

@@ -21,14 +21,12 @@ export default function FAQContent({ list }: FAQContentProps) {
           <PlusIcon />
         </S.ListPlusIcon>
       </S.ListWrapper>
-      {isFAQContentOpen && (
-        <S.ListContentWrapper>
-          <S.ListButtonWrapper>
-            <ChevronRightIcon />
-          </S.ListButtonWrapper>
-          <S.ListContent>{list.content}</S.ListContent>
-        </S.ListContentWrapper>
-      )}
+      <S.ListContentWrapper $isShowContent={isFAQContentOpen}>
+        <S.ListButtonWrapper>
+          <ChevronRightIcon />
+        </S.ListButtonWrapper>
+        <S.ListContent>{list.content}</S.ListContent>
+      </S.ListContentWrapper>
     </S.ListContainer>
   );
 }