FIX-파일첨부-url-변경 (#79)

* Fix : 새로운 Axios 인스턴스 사용

* Refactor : 쿼리 enable 옵션 추가

* Refactor : 쿼리 enable 옵션 추가

* Minor : 스타일 변경

client/src/components/newpost/SearchAlcoholInput.tsx

@@ -24,7 +24,7 @@ interface SearchAlcoholInputInterface {
 }
 const SearchAlcoholInput = ({ setAlcoholNo }: SearchAlcoholInputInterface) => {
   // 유저가 검색한 키워드
-  const [searchKeyword, setSearchKeyword] = useState("");
+  const [searchKeyword, setSearchKeyword] = useState<string>();
   // 검색한 키워드의 Debounced 값
   const debouncedValue = useDebounce(searchKeyword, 300);
   const [isSearchingAlcohol, setIsSearchingAlCohol] = useState(false);
@@ -36,7 +36,7 @@ const SearchAlcoholInput = ({ setAlcoholNo }: SearchAlcoholInputInterface) => {
     useState<AlcoholDetailInterface>();
 
   useEffect(() => {
-    setSearchKeyword(selectedAlcohol?.alcoholName ?? "");
+    setSearchKeyword(selectedAlcohol?.alcoholName);
     setAlcoholNo(selectedAlcohol?.alcoholNo);
   }, [selectedAlcohol]);
 
@@ -68,7 +68,7 @@ const SearchAlcoholInput = ({ setAlcoholNo }: SearchAlcoholInputInterface) => {
         autoComplete="off"
       />
       {/* FIXME List 컴포넌트로 분리 */}
-      {isSearchingAlcohol && (
+      {isSearchingAlcohol && data && (
         <Box sx={WrapperStyle}>
           <List sx={ListStyle}>
             {isSuccess &&

client/src/components/wiki/AlcoholPagination.tsx

@@ -5,7 +5,7 @@ import { Pagination, Stack } from "@mui/material";
 import usePushToWikiDetail from "@/hooks/wiki/usePushToWikiDetail";
 
 const AlcoholPagenation = () => {
-  const { data: alcohols } = useGetAlcoholListQuery();
+  const { data: alcohols } = useGetAlcoholListQuery("");
   const onClickElementHandler = usePushToWikiDetail();
   return (
     <Stack alignItems="center" gap={2}>

client/src/components/wiki/WikiAlcoholSelectorBtn.tsx

@@ -31,7 +31,7 @@ const WikiAlcoholSelectorBtn = ({
         >
           {iconComponent}
         </Stack>
-        <Typography sx={{ p: 1 }}>{title}</Typography>
+        <Typography sx={{ py: 1 }}>{title}</Typography>
       </Stack>
     </ButtonBase>
   );

client/src/queries/alcohol/useGetAlcoholListQuery.tsx

@@ -7,13 +7,11 @@ const useGetAlcoholListQuery = (keyword?: string) => {
   return useQuery({
     queryKey: AlcohilListQueryKey.byKeyword(keyword),
     queryFn: async () => await getAlcoholListByKeyword(keyword),
+    enabled: keyword!=undefined,
   });
 };
 
 export const getAlcoholListByKeyword = async (keyword?: string) => {
-  if (keyword === "") {
-    return { list: [], totalCount: 0 };
-  }
   const { data } = await axios.get<{
     list: AlcoholDetailInterface[];
     totalCount: number;
@@ -23,7 +21,7 @@ export const getAlcoholListByKeyword = async (keyword?: string) => {
       size: 5,
       searchKeyword: keyword,
     },
-  });
+  }); 
   return data;
 };
 

client/src/queries/attach/useNewAttachMutation.ts

@@ -5,8 +5,9 @@ import { getPostListInfiniteQueryKey } from "./../post/useGetPostListInfiniteQue
 import { postDetailQueryKey } from "../post/useGetPostDetailQuery";
 import { MyInfoQueryKeys } from "../auth/useMyInfoQuery";
 import { UserInfoQueryKey } from "../user/useUserInfoQuery";
-import useAxiosPrivate from "@/hooks/useAxiosPrivate";
 import { ImageSize } from "@/types/attach/attachInterface";
+import axios from "axios";
+import getTokenFromLocalStorage from "@/utils/getTokenFromLocalStorage";
 
 export const useNewAttachMutation = () => {
   const errorHandler = useErrorHandler();
@@ -64,17 +65,17 @@ export const postImageFn = async (
   { type, pk }: NewAttatchRequestUrl,
   size?: ImageSize
 ) => {
-  const axiosPrivate = useAxiosPrivate();
   const formData = new FormData();
   formData.append("image", file);
 
-  const { data } = await axiosPrivate.post<{ attachNo: number }>(
+  const { data } = await axios.post<{ attachNo: number }>(
     ATTACH_FILE(type, pk),
     formData,
     {
       params: size,
       headers: {
         "Content-Type": "multipart/form-data",
+        Authorization: getTokenFromLocalStorage(),
       },
       transformRequest: [
         function () {

client/src/queries/auth/useMyInfoQuery.tsx

@@ -27,15 +27,11 @@ export const useMyInfoQuery = () => {
         throw Error();
       }
     },
+    enabled: !!getTokenFromLocalStorage(),
   });
 };
 
 export const getMyInfoByLocalStorage = async () => {
-  const accessToken = getTokenFromLocalStorage();
-
-  if (!accessToken) {
-    return null;
-  }
   const axiosPrivate = useAxiosPrivate();
   const { data } = await axiosPrivate.get<MyInfoInterface>(MY_INFO);
   return data;