Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Refactor: 등록 수정 페이지 리팩토링 #282

Merged
merged 3 commits into from
Apr 2, 2024
Merged

Refactor: 등록 수정 페이지 리팩토링 #282

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
dbc2cfd
refactor: 수정 모달의 텍스트 수정
ccwnc Apr 1, 2024
ad98234
refactor: title과 discord의 글자 수 제한을 50 30으로 변경
ccwnc Apr 1, 2024
c046eda
refactor: 이미지 업로드 상태에 따라 등록 및 수정 버튼 활성화 로직 추가
ccwnc Apr 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 8 additions & 3 deletions src/components/createPage/PostForm/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,16 +141,19 @@ const PostForm = ({ category }: PostFormProps) => {

// 이미지 관련
const [imageUrlsArray, setImageUrlsArray] = useState<{ activityImageUrl: string }[]>([]);
const [isImageUploadSuccess, setIsImageUploadSuccess] = useState(false);

const { mutate: postFormImageMutation } = useMutation({
mutationFn: (uploadedFiles: File[]) => Activities.createImage(uploadedFiles),
onSuccess: (uploadedImageUrls) => {
setImageUrlsArray(uploadedImageUrls);
setIsImageUploadSuccess(false);
},
});

const handleUpdateFiles = (uploadedFiles: File[]) => {
postFormImageMutation(uploadedFiles);
setIsImageUploadSuccess(true);
};

// 유저 데이터 관련
Expand Down Expand Up @@ -216,9 +219,9 @@ const PostForm = ({ category }: PostFormProps) => {
<InputField
name='title'
label='제목'
placeholder='제목을 입력해 주세요 (20자 이내)'
placeholder='제목을 입력해 주세요 (50자 이내)'
isLimited
maxLength={20}
maxLength={50}
/>
</fieldset>
{recruitmentTypes.isOfflineOrOnline(price) && (
Expand Down Expand Up @@ -253,7 +256,7 @@ const PostForm = ({ category }: PostFormProps) => {
name='discord'
label='디스코드 링크'
placeholder='https://discord.gg/초대코드'
maxLength={50}
maxLength={30}
/>
</fieldset>
)}
Expand Down Expand Up @@ -298,6 +301,7 @@ const PostForm = ({ category }: PostFormProps) => {
theme='fill'
size='medium'
color='purple'
isDisabled={isImageUploadSuccess}
onClick={handleSubmit(handleEditFormData)}
>
등록
Expand All @@ -314,6 +318,7 @@ const PostForm = ({ category }: PostFormProps) => {
theme='fill'
size='large'
color='purple'
isDisabled={isImageUploadSuccess}
onClick={handleSubmit(handleEditFormData)}
>
등록
Expand Down
9 changes: 7 additions & 2 deletions src/components/editPage/EditForm/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -187,16 +187,19 @@ const EditForm = ({ category, activityDetailData }: EditFormProps) => {

// 이미지 관련
const [imageUrlsArray, setImageUrlsArray] = useState<{ activityImageUrl: string }[]>([]);
const [isImageUploadSuccess, setIsImageUploadSuccess] = useState(false);

const { mutate: postFormImageMutation } = useMutation({
mutationFn: (uploadedFiles: File[]) => Activities.createImage(uploadedFiles),
onSuccess: (uploadedImageUrls) => {
setImageUrlsArray(uploadedImageUrls);
setIsImageUploadSuccess(false);
},
});

const handleUpdateFiles = (uploadedFiles: File[]) => {
postFormImageMutation(uploadedFiles);
setIsImageUploadSuccess(true);
};

// 수정 버튼 클릭 후 데이터 가공 관련
Expand Down Expand Up @@ -346,6 +349,7 @@ const EditForm = ({ category, activityDetailData }: EditFormProps) => {
theme='fill'
size='medium'
color='purple'
isDisabled={isImageUploadSuccess}
onClick={handleSubmit(handleEditFormData)}
>
수정
Expand All @@ -362,6 +366,7 @@ const EditForm = ({ category, activityDetailData }: EditFormProps) => {
theme='fill'
size='large'
color='purple'
isDisabled={isImageUploadSuccess}
onClick={handleSubmit(handleEditFormData)}
>
수정
Expand All @@ -374,9 +379,9 @@ const EditForm = ({ category, activityDetailData }: EditFormProps) => {
<ConfirmModal
openModal={isVisible}
onClose={handleToggleClick}
title='모집 등록 완료'
title='모집 수정 완료'
state='SUCCESS'
desc='정상적으로 등록되었습니다'
desc='정상적으로 수정되었습니다'
renderButton={
<ModalButton variant='success' onClick={handleModalConfirmButtonClick}>
확인
Expand Down