-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Refactor:이미지업로드 실패시 작성된 게시물을 삭제(롤백), Mutation으로 분리 (#34)
- Loading branch information
1 parent
8c87ef8
commit b7e6500
Showing
12 changed files
with
293 additions
and
90 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,29 +1,10 @@ | ||
| 'use client' | ||
|
|
||
| import { useEffect } from 'react' | ||
|
|
||
| export default function Error({ | ||
| error, | ||
| reset, | ||
| }: { | ||
| error: Error & { digest?: string } | ||
| reset: () => void | ||
| "use client"; | ||
|
|
||
| import ErrorPage from "@/components/ErrorPage"; | ||
|
|
||
| export default function Error(props: { | ||
| error: Error & { digest?: string }; | ||
| reset: () => void; | ||
| }) { | ||
| useEffect(() => { | ||
| // Log the error to an error reporting service | ||
| console.error(error) | ||
| }, [error]) | ||
|
|
||
| return ( | ||
| <div> | ||
| <h2>Something went wrong!</h2> | ||
| <button | ||
| onClick={ | ||
| () => reset() | ||
| } | ||
| > | ||
| Try again | ||
| </button> | ||
| </div> | ||
| ) | ||
| } | ||
| return <ErrorPage {...props} />; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| import { Button, Paper } from "@mui/material"; | ||
|
|
||
| import hasErrorPage from "@/assets/images/hasError.png"; | ||
| import Image from "next/image"; | ||
| import { useEffect } from "react"; | ||
| import errorHandler from "@/utils/errorHandler"; | ||
|
|
||
| const ErrorPage = ({ | ||
| error, | ||
| reset, | ||
| }: { | ||
| error: Error & { digest?: string }; | ||
| reset: () => void; | ||
| }) => { | ||
| useEffect(() => { | ||
| errorHandler(JSON.stringify(error)); | ||
| }, [error]); | ||
|
|
||
| return ( | ||
| <Paper | ||
| sx={{ | ||
| display: "flex", | ||
| justifyContent: "center", | ||
| flexDirection: "column", | ||
| alignItems: "center", | ||
| height: "calc(100vh - 56px)", | ||
| gap:2 | ||
| }} | ||
| > | ||
| <Image priority src={hasErrorPage} alt="에러임을 알림" /> | ||
| <Button onClick={reset}>다시 시도</Button> | ||
| </Paper> | ||
| ); | ||
| }; | ||
|
|
||
| export default ErrorPage; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,18 +1,37 @@ | ||
| /** | ||
| * 로그인 API Path | ||
| */ | ||
| export const LOGIN_API_PATH = '/user/login' as const | ||
| export const LOGIN_API_PATH = "/user/login" as const; | ||
|
|
||
| /** | ||
| * 회원가입 API Path | ||
| */ | ||
| export const SIGNUP_API_PATH = '/user/signup' as const | ||
| export const SIGNUP_API_PATH = "/user/signup" as const; | ||
| /** | ||
| * 내 정보를 받아오는 Path | ||
| */ | ||
| export const MY_INFO = '/user/me' as const | ||
| export const MY_INFO = "/user/me" as const; | ||
|
|
||
| /** | ||
| * 쿠키를 심어주는 로그인 BFF | ||
| */ | ||
| export const LOGIN_BFF = '/api/auth/login' as const | ||
| export const LOGIN_BFF = "/api/auth/login" as const; | ||
|
|
||
| /** | ||
| * 게시물리스트를 받아오거나, 작성하는 Path | ||
| */ | ||
| export const POST_LIST = "/posts" as const; | ||
| /** | ||
| * ID(pk) 를 입력받아 해당 포스트를 지우는 URL | ||
| */ | ||
| export const REMOVE_POST = (pk:number)=>`${POST_LIST}/${pk}` as const | ||
|
|
||
| /** | ||
| * | ||
| * @param type : 리소스의 타입 POST|PROFILE|ALCOHOL | ||
| * @param resourcePk 등록하고자하는 게시글의 PK | ||
| * @returns | ||
| */ | ||
| export type ATTACH_FILE_ResourceType = "POST" | "PROFILE" | "ALCOHOL"; | ||
| export const ATTACH_FILE = (type: ATTACH_FILE_ResourceType, resourcePk: number) => | ||
| `/attach/resources/${type}/${resourcePk}` as const; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| import { useMutation } from "@tanstack/react-query"; | ||
| import { axiosPrivate } from "@/libs/axios"; | ||
| import { ATTACH_FILE, ATTACH_FILE_ResourceType } from "@/const/serverPath"; | ||
|
|
||
| export const useNewAttachMutation = () => { | ||
| return useMutation({ | ||
| mutationFn: async (param: { file: File; url: NewAttatchRequestUrl }) => | ||
| await postImageFn(param.file, param.url), | ||
| }); | ||
| }; | ||
|
|
||
| interface NewAttatchRequestUrl { | ||
| type: ATTACH_FILE_ResourceType; | ||
| pk: number; | ||
| } | ||
| /** | ||
| * [Post] 파일을 업로드하는 axios요청 | ||
| * @param file 파일 | ||
| * @param param1 {type: "POST" | "PROFILE" | "ALCOHOL", pk : 게시글 PK} | ||
| * @returns 에셋 PK | ||
| */ | ||
| export const postImageFn = async ( | ||
| file: File, | ||
| { type, pk }: NewAttatchRequestUrl | ||
| ) => { | ||
| const formData = new FormData(); | ||
| formData.append("image", file); | ||
|
|
||
| const { data } = await axiosPrivate.post<{ attachNo: number }>( | ||
| ATTACH_FILE(type, pk), | ||
| formData, | ||
| { | ||
| headers: { | ||
| "Content-Type": "multipart/form-data", | ||
| }, | ||
| transformRequest: [ | ||
| function () { | ||
| return formData; | ||
| }, | ||
| ], | ||
| } | ||
| ); | ||
| return data; | ||
| }; | ||
|
|
||
| export default useNewAttachMutation; |
Oops, something went wrong.