Skip to content

Commit

Permalink
refact: axios를 apiV1Instance로 교체
Browse files Browse the repository at this point in the history
  • Loading branch information
@eric-hjh
eric-hjh committed Nov 10, 2023
1 parent cf360cb commit 2be8e06
Show file tree
Hide file tree
Showing 8 changed files with 71 additions and 111 deletions.
12 changes: 3 additions & 9 deletions src/components/AddFashion/AddFashion/AddImage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,11 @@ import 'react-toastify/dist/ReactToastify.css';

import CloudUploadIcon from '@mui/icons-material/CloudUpload';
import { Box, Button, Typography } from '@mui/material';
import axios from 'axios';
import Image from 'next/image';
import React, { useState } from 'react';
import Resizer from 'react-image-file-resizer';
import { toast, ToastContainer } from 'react-toastify';
import { token } from 'src/assets/data/token';
import apiV1Instance from 'src/api/api-instance';

type ImageProps = {
getImageData: (data: string) => void;
Expand Down Expand Up @@ -67,13 +66,8 @@ export default function AddImage({ getImageData }: ImageProps) {
formData.append('image', imgURL);

try {
await axios
.post(`${process.env.NEXT_PUBLIC_API}/images`, formData, {
headers: {
'Content-Type': 'multipart/form-data',
Authorization: `Bearer ${token}`,
},
})
await apiV1Instance
.post(`${process.env.NEXT_PUBLIC_API}/images`, formData)
.then((response) => {
success();
console.log('sendImage URL response: ', response.data);
Expand Down
10 changes: 3 additions & 7 deletions src/components/AddFashion/AddFashion/AddLocation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@ import '../../../../public/fonts/font.css';

import NearMeIcon from '@mui/icons-material/NearMe';
import { IconButton, Toolbar, Typography } from '@mui/material';
import axios from 'axios';
import { useEffect, useState } from 'react';
import apiV1Instance from 'src/api/api-instance';

import useGeoLocation from '../../../assets/hooks/useGeoLocation';
import { LocationType } from '../../../utils/types';
Expand All @@ -21,12 +21,8 @@ export default function AddLocation({ getLocationData }: LocationProps) {
const locationAPI = async () => {
if (locationData !== undefined) {
try {
await axios
.get(`/api/v1/address?latitude=${latitude}&longitude=${longitude}`, {
headers: {
Accept: 'application/json',
},
})
await apiV1Instance
.get(`/api/v1/address?latitude=${latitude}&longitude=${longitude}`)
.then((response) => {
console.log('response: ', response);
const data = response.data.data;
Expand Down
9 changes: 2 additions & 7 deletions src/components/Lookbook/LookbookLayout/AddLookbookButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,8 @@ import {
Paper,
Typography,
} from '@mui/material';
import axios from 'axios';
import { useState } from 'react';
import { token } from 'src/assets/data/token';
import apiV1Instance from 'src/api/api-instance';

// import SearchIcon from '@mui/icons-material/Search';
import AddImage from '../../../components/AddFashion/AddFashion/AddImage';
Expand Down Expand Up @@ -54,14 +53,10 @@ export default function AddLookbookButton() {
}

try {
await axios
await apiV1Instance
.post(`${process.env.NEXT_PUBLIC_API}/lookbooks`, {
title: title,
image: postImage,
}, {
headers: {
Authorization: `Bearer ${token}`
},
})
.then((response) => {
console.log(response);
Expand Down
1 change: 0 additions & 1 deletion src/components/Lookbook/LookbookLayout/LookbookBox.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { Box, Card, CardMedia, Grid, Typography } from '@mui/material';
import Link from 'next/link';
// import axios from 'axios';
import { useEffect, useState } from 'react';
import { useFindAllBooks } from 'src/api/hook/LookbookHook';

Expand Down
29 changes: 7 additions & 22 deletions src/components/MainLayout/FashionListBox.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,20 +16,18 @@ import {
Toolbar,
Typography,
} from '@mui/material';
import axios from 'axios';
import Image from 'next/image';
import React, { useEffect, useRef, useState } from 'react';
import apiV1Instance from 'src/api/api-instance';
import useCheckAuth from 'src/api/hook/CheckAuthHook';
import { useLogout } from 'src/api/hook/UserHook';
import { token } from 'src/assets/data/token';

import logoUrl from '../../../public/title-logo.png';
import { WeatherPostType } from '../../utils/types';
import useRainfallTypeStore from '../../utils/zustand/weather/RainfallTypeStore';
import useSkyStatusStore from '../../utils/zustand/weather/SkyStatusStore';
import useWindChillSearchStore from '../../utils/zustand/weather/WindChillSearchStore';
import AddFashionButton from './FashionListBox/AddFashionButton';
import FashionModal from "./FashionListBox/FashionModal";
import FashionModal from './FashionListBox/FashionModal';
import PaginationBox from './FashionListBox/PaginationBox';
import SearchBox from './FashionListBox/SearchBox';

Expand Down Expand Up @@ -113,15 +111,9 @@ export default function FashionListBox() {
console.log('[Recoil] rainfallCode: ', rainfallType);
console.log('[Recoil] windChillSearch: ', windChillSearch);
try {
await axios
await apiV1Instance
.get(
`${process.env.NEXT_PUBLIC_API}/posts/weather?skyStatus=${skyStatus}&rainfallType=${rainfallType}&minWindChill=${windChillSearch[0]}&maxWindChill=${windChillSearch[1]}&page=${page}&size=8`,
{
headers: {
Accept: 'application/json',
Authorization: `Bearer ${token}`,
},
}
`${process.env.NEXT_PUBLIC_API}/posts/weather?skyStatus=${skyStatus}&rainfallType=${rainfallType}&minWindChill=${windChillSearch[0]}&maxWindChill=${windChillSearch[1]}&page=${page}&size=8`
)
.then((response) => {
const data = response.data;
Expand All @@ -138,13 +130,8 @@ export default function FashionListBox() {

const followTimelineAPI = async () => {
try {
await axios
.get(`/api/v1/posts/follow/timeline?page=${page}&size=8`, {
headers: {
Accept: 'application/json',
Authorization: `Bearer ${token}`,
},
})
await apiV1Instance
.get(`/api/v1/posts/follow/timeline?page=${page}&size=8`)
.then((response) => {
const data = response.data;
console.log('data.data: ', data.data);
Expand Down Expand Up @@ -230,8 +217,6 @@ export default function FashionListBox() {

useCheckAuth();

const { mutate: logout } = useLogout();

return (
<Box sx={{ height: '100vh', backgroundColor: '#F5F8FC' }}>
<Box height="75px" />
Expand Down Expand Up @@ -291,7 +276,7 @@ export default function FashionListBox() {

<Modal open={openDetail} onClose={handleCloseDetail} closeAfterTransition>
<Box sx={style}>
<FashionModal singleId={singleId} setOpenDetail={setOpenDetail}/>
<FashionModal singleId={singleId} setOpenDetail={setOpenDetail} />
</Box>
</Modal>

Expand Down
100 changes: 50 additions & 50 deletions src/components/MainLayout/FashionListBox/FashionModal.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,35 @@
import BookmarkIcon from "@mui/icons-material/Bookmark";
import BookmarkBorderIcon from "@mui/icons-material/BookmarkBorder";
import CloseIcon from "@mui/icons-material/Close";
import DeviceThermostatIcon from "@mui/icons-material/DeviceThermostat";
import LightModeIcon from "@mui/icons-material/LightMode";
import WbCloudyIcon from "@mui/icons-material/WbCloudy";
import {Avatar, Box, Button, IconButton, Popover, Typography} from "@mui/material";
import axios, {AxiosError} from "axios";
import React, {useEffect, useState} from "react";
import BookmarkIcon from '@mui/icons-material/Bookmark';
import BookmarkBorderIcon from '@mui/icons-material/BookmarkBorder';
import CloseIcon from '@mui/icons-material/Close';
import DeviceThermostatIcon from '@mui/icons-material/DeviceThermostat';
import LightModeIcon from '@mui/icons-material/LightMode';
import WbCloudyIcon from '@mui/icons-material/WbCloudy';
import {
Avatar,
Box,
Button,
IconButton,
Popover,
Typography,
} from '@mui/material';
import axios, { AxiosError } from 'axios';
import React, { useEffect, useState } from 'react';
import apiV1Instance from 'src/api/api-instance';

import rainfallType from "../../../assets/data/rainfallType";
import {token} from "../../../assets/data/token";
import weatherSky from "../../../assets/data/weatherSky";
import {SinglePostType} from "../../../utils/types";
import LookbookPopover from "./LookbookPopover";
import rainfallType from '../../../assets/data/rainfallType';
import weatherSky from '../../../assets/data/weatherSky';
import { SinglePostType } from '../../../utils/types';
import LookbookPopover from './LookbookPopover';

type FashionModalProps = {
singleId: string;
setOpenDetail: React.Dispatch<React.SetStateAction<boolean>>;
};

export default function FashionModal({ singleId, setOpenDetail }: FashionModalProps) {
export default function FashionModal({
singleId,
setOpenDetail,
}: FashionModalProps) {
const [singleData, setSingleData] = useState<SinglePostType>();
const [bookState, setBookState] = useState<boolean>(false);
const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
Expand All @@ -43,13 +53,8 @@ export default function FashionModal({ singleId, setOpenDetail }: FashionModalPr
const singlePostAPI = async () => {
console.log('singleId: ', singleId);
try {
await axios
.get(`${process.env.NEXT_PUBLIC_API}/posts/${singleId}`, {
headers: {
Accept: 'application/json',
Authorization: `Bearer ${token}`,
},
})
await apiV1Instance
.get(`${process.env.NEXT_PUBLIC_API}/posts/${singleId}`)
.then((response) => {
const data = response.data;
console.log(data.data);
Expand All @@ -62,22 +67,17 @@ export default function FashionModal({ singleId, setOpenDetail }: FashionModalPr

const lookbookPostAPI = async (lookbookId: string) => {
try {
await axios
await apiV1Instance
.post(
`${process.env.NEXT_PUBLIC_API}/lookbooks/${lookbookId}/posts?postId=${singleId}`,
{},
{
headers: {
Authorization: `Bearer ${token}`,
},
}
`${process.env.NEXT_PUBLIC_API}/lookbooks/${lookbookId}/posts?postId=${singleId}`
)
.then((response) => {
console.log(response);
setBookState(!bookState);
});
} catch(err: unknown) {
if (axios.isAxiosError(err)) { // AxiosError 인지 확인
} catch (err: unknown) {
if (axios.isAxiosError(err)) {
// AxiosError 인지 확인
const axiosError = err as AxiosError;
console.log(axiosError.response?.data); // response 프로퍼티에 안전하게 접근
// alert(axiosError.response?.data?.message);
Expand All @@ -96,33 +96,33 @@ export default function FashionModal({ singleId, setOpenDetail }: FashionModalPr
return (
<div
style={{
position: "relative",
position: 'relative',
backgroundImage: `url(${singleData?.image}`,
backgroundSize: "cover",
backgroundPosition: "center",
height: "100%",
backgroundSize: 'cover',
backgroundPosition: 'center',
height: '100%',
}}
>
{singleData ? (
<Box
sx={{
position: "absolute",
position: 'absolute',
top: 0,
right: 0,
bottom: 0,
left: 0,
padding: "10px"
padding: '10px',
}}
>
<Box
sx={{
position: "absolute",
position: 'absolute',
top: 0,
right: 0,
bottom: 0,
left: 0,
backgroundImage:
"linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 10%)",
'linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 10%)',
}}
>
<Box
Expand All @@ -136,12 +136,13 @@ export default function FashionModal({ singleId, setOpenDetail }: FashionModalPr
borderRadius: '20px',
}}
>
<Avatar src={singleData.image}/>
<Typography sx={{ml: 1, color: '#fff'}}>{singleData.username}</Typography>
<Avatar src={singleData.image} />
<Typography sx={{ ml: 1, color: '#fff' }}>
{singleData.username}
</Typography>
</Box>
</Box>


<Box
sx={{
position: 'absolute',
Expand All @@ -151,11 +152,11 @@ export default function FashionModal({ singleId, setOpenDetail }: FashionModalPr
>
{bookState === false ? (
<IconButton onClick={handleMarkClick}>
<BookmarkBorderIcon sx={{color: '#fff'}}/>
<BookmarkBorderIcon sx={{ color: '#fff' }} />
</IconButton>
) : (
<IconButton onClick={handleBookClick}>
<BookmarkIcon sx={{color: '#fff'}}/>
<BookmarkIcon sx={{ color: '#fff' }} />
</IconButton>
)}

Expand All @@ -164,7 +165,7 @@ export default function FashionModal({ singleId, setOpenDetail }: FashionModalPr
setOpenDetail(false);
}}
>
<CloseIcon fontWeight="300" sx={{color: '#fff'}} />
<CloseIcon fontWeight="300" sx={{ color: '#fff' }} />
</IconButton>
</Box>

Expand All @@ -182,7 +183,7 @@ export default function FashionModal({ singleId, setOpenDetail }: FashionModalPr
padding: '10px',
}}
>
<Typography variant="h6" sx={{ml: 1, mb: 3, color: '#fff'}}>
<Typography variant="h6" sx={{ ml: 1, mb: 3, color: '#fff' }}>
{singleData.title}
</Typography>

Expand All @@ -203,7 +204,7 @@ export default function FashionModal({ singleId, setOpenDetail }: FashionModalPr
backgroundColor: 'rgba(255, 255, 255, 0.2)',
borderRadius: '20px',
}}
sx={{mb: 2}}
sx={{ mb: 2 }}
>
<DeviceThermostatIcon
style={{ color: '#fff', height: 20 }}
Expand Down Expand Up @@ -290,5 +291,4 @@ export default function FashionModal({ singleId, setOpenDetail }: FashionModalPr
</Popover>
</div>
);

}
}
Loading

0 comments on commit 2be8e06

Please sign in to comment.