Feat: 이미지 첨부 기능 구현 및 리스트 생성 제출 API 연동 #17
Merged
Conversation
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
auto-assign
bot
requested review from
Eugene-A-01,
kanglocal,
Nahyun-Kang and
ParkSohyunee
Nahyun-Kang
approved these changes
Feb 5, 2024
ParkSohyunee
approved these changes
Feb 5, 2024
seoyoung-min
commented
Feb 6, 2024
|
|
||
| export const createList = async (data: ListCreateType) => { | ||
| const response = await axiosInstance.post<ListCreateType>('/lists', data); | ||
| const response = await axiosInstance.post<ListIdType>('/lists', data); |
There was a problem hiding this comment.
@Eugene-A-01 🖊️ 제네릭으로 response로 받을 타입으로 넣어야 해서 수정했습니다!
Comment on lines
+1
to
+31
| import axiosInstance from '@/lib/axios/axiosInstance'; | ||
| import { ItemImagesType, PresignedUrlListType } from '@/lib/types/listType'; | ||
| import axios from 'axios'; | ||
|
|
||
| interface uploadItemImagesProps { | ||
| listId: number; | ||
| imageData: ItemImagesType; | ||
| imageFileList: File[]; | ||
| } | ||
|
|
||
| export const uploadItemImages = async ({ listId, imageData, imageFileList }: uploadItemImagesProps) => { | ||
| imageData.listId = listId; | ||
|
|
||
| //PresignedUrl 생성 요청 | ||
| const response = await axiosInstance.post<PresignedUrlListType>('/lists/upload-url', imageData); | ||
|
|
||
| //PresignedUrl에 이미지 업로드 | ||
| for (let i = 0; i < response.data.length; i++) { | ||
| const result = await axios.put(response.data[i].presignedUrl, imageFileList[i], { | ||
| headers: { | ||
| 'Content-Type': imageFileList[i]?.type, | ||
| }, | ||
| }); | ||
| if (result.status !== 200) return; | ||
| } | ||
|
|
||
| //서버에 성공 완료 알림 | ||
| if (imageFileList.length !== 0) { | ||
| await axiosInstance.post('/lists/upload-complete', imageData); | ||
| } | ||
| }; |
There was a problem hiding this comment.
👩💻리스트 생성 성공 후 리스트 아이템 이미지를 업로드하는 과정입니다!
queryFn, MutationFn 모두 파라미터 1개만 전달할 수 있는 것 같아요!
여러개를 받아야해서 객체 타입으로 받았습니다!
| @@ -22,7 +22,7 @@ import { UserProfileType } from '@/lib/types/userProfileType'; | |||
| import { getCategories } from '@/app/_api/category/getCategories'; | |||
| import { getUsers } from '@/app/_api/user/getUsers'; | |||
| import { listDescriptionRules, listLabelRules, listTitleRules } from '@/lib/constants/formInputValidationRules'; | |||
| import { listDescription } from '@/app/[userNickname]/[listId]/_components/ListDetailOuter/ListInformation.css'; | |||
| // import { listDescription } from '@/app/[userNickname]/[listId]/_components/ListDetailOuter/ListInformation.css'; | |||
There was a problem hiding this comment.
@Eugene-A-01 🖊️ 배포시 미사용 코드로 워닝이 떠서 주석처리했습니다~!
| @@ -75,7 +76,7 @@ function CreateList({ onNextClick }: CreateListProps) { | |||
| return ( | |||
| <div> | |||
| {/* 헤더 */} | |||
| <Header isNextActive={isValid} onClickNext={onNextClick} /> | |||
| <Header isNextActive={title && category} onClickNext={onNextClick} /> | |||
There was a problem hiding this comment.
@Eugene-A-01 🖊️isValid가 아이템 페이지까지 채워져야 true가 돼서 title, category를 watch하여 값이 있을때 true가 되도록 코드를 수정했습니다! 급하게 수정한 것이라 옳은 방식인지는 확신이 없습니다ㅠㅠ!
| <button className={isNextActive ? styles.headerNextButtonActive : styles.headerNextButton} onClick={onClickNext}> | ||
| <button | ||
| className={isNextActive ? styles.headerNextButtonActive : styles.headerNextButton} | ||
| disabled={!isNextActive} |
There was a problem hiding this comment.
@Eugene-A-01 🖊️클릭 안되게 하기 위해 disabled 속성을 추가했습니다!
Comment on lines
+91
to
107
| const saveImageMutation = useMutation({ mutationFn: uploadItemImages }); | ||
|
|
||
| const createListMutation = useMutation({ | ||
| mutationFn: createList, | ||
| onSuccess: (data) => { | ||
| saveImageMutation.mutate({ | ||
| listId: data.listId, | ||
| imageData: formatData().imageData, | ||
| imageFileList: formatData().imageFileList, | ||
| }); | ||
| }, | ||
| }); | ||
|
|
||
| const handleSubmit = () => { | ||
| const { listData } = formatData(); | ||
| createListMutation.mutate(listData); | ||
| }; |
There was a problem hiding this comment.
👩💻 리액트 쿼리를 처음 써봅니다..! 잘 사용한 것인지 궁금합니다!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
개요
작업 사항
참고 사항 (optional)
스크린샷
아이템 추가-삭제
에러처리 (높이 달라지는 css 수정 예정)
이미지 첨부
드래그앤드랍
api 요청
리뷰어에게