From adbcf6af600cc6f824d678242dbf05d1008be1f7 Mon Sep 17 00:00:00 2001 From: thisishwarang <101498590+thisishwarang@users.noreply.github.com> Date: Thu, 19 Sep 2024 02:05:58 +0900 Subject: [PATCH 1/4] =?UTF-8?q?[Fix/#299]=20=EB=94=94=EC=9E=90=EC=9D=B8=20?= =?UTF-8?q?QA=20(#300)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: Input, TextArea 스타일 수정 * fix: 리뷰 이미지 컨테이너에 맞게 수정 * fix: 입금 모달 디자인 수정 * fix: 리뷰 작성 페이지 유효성 검사 * fix: 모임 개설 페이지 수정 및 Input 수정 * fix: Input delete버튼 클릭 범위 수정 * fix: 스픽커 신청 url Input 수정 * fix: 리뷰 작성 중복시 토스트 발생 및 라우팅 막음 * fix: 리뷰 작성 페이지 텍스트 수정 --- src/apis/domains/review/usePostReview.ts | 7 +- src/components/common/Review/Review.style.ts | 9 ++ src/components/common/Review/Review.tsx | 3 +- .../common/TextArea/TextArea.style.ts | 11 +- src/components/common/index.ts | 2 + .../common/inputs/Input/Input.style.ts | 24 +++- src/components/common/inputs/Input/Input.tsx | 5 +- .../class/components/StepOne/StepOne.style.ts | 2 + .../class/components/StepOne/StepOne.tsx | 5 +- .../DepositModal/DepositModal.style.ts | 8 +- .../GuestMyClassReviewWrite.tsx | 104 ++++++++++-------- src/pages/host/components/StepOne/StepOne.tsx | 2 +- .../host/hooks/useHostApplyInputValidation.ts | 2 +- 13 files changed, 121 insertions(+), 63 deletions(-) diff --git a/src/apis/domains/review/usePostReview.ts b/src/apis/domains/review/usePostReview.ts index 696bcf48..7ea6ea11 100644 --- a/src/apis/domains/review/usePostReview.ts +++ b/src/apis/domains/review/usePostReview.ts @@ -3,7 +3,7 @@ import { useMutation, useQueryClient } from '@tanstack/react-query'; import { post } from '@apis/api'; import { components } from '@schema'; -import { MutateResponseType } from '@types'; +import { ErrorResponse, MutateResponseType } from '@types'; type ReviewCreateReqeust = components['schemas']['ReviewCreateReqeust']; @@ -16,8 +16,9 @@ const postReview = async (params: ReviewCreateReqeust, moimId: number) => { const response = await post(`/v2/moim/${moimId}/review`, params); return response.data; } catch (error) { - console.log(error); - return null; + const errorResponse = error as ErrorResponse; + const errorData = errorResponse.response.data; + throw errorData; } }; diff --git a/src/components/common/Review/Review.style.ts b/src/components/common/Review/Review.style.ts index 72fbf1e1..955bb406 100644 --- a/src/components/common/Review/Review.style.ts +++ b/src/components/common/Review/Review.style.ts @@ -43,6 +43,15 @@ export const reviewImgSection = (theme: Theme) => css` height: 21rem; background-color: ${theme.color.lightgray1}; border-radius: 10px; + position: relative; + overflow: hidden; +`; + +export const imgStyle = css` + width: 100%; + height: 100%; + object-fit: cover; + border-radius: inherit; `; export const moimTitleWrapper = (theme: Theme) => css` diff --git a/src/components/common/Review/Review.tsx b/src/components/common/Review/Review.tsx index eb447783..a8702c95 100644 --- a/src/components/common/Review/Review.tsx +++ b/src/components/common/Review/Review.tsx @@ -6,6 +6,7 @@ import { formatCreatedDate } from '@utils'; import { iconStyle, imgAndTitleContainer, + imgStyle, moimTitleWrapper, reviewContent, reviewContentContainer, @@ -67,7 +68,7 @@ const Review = ({ reviewData }: ReviewProps) => {
{reviewImageUrl && (
- 리뷰 이미지 + 리뷰 이미지
)} {/* 클래스 뷰, 스픽커 소개뷰에서 모두 사용하기 위해 api에서 moimId 유무에 따라 보여주기 위함 */} diff --git a/src/components/common/TextArea/TextArea.style.ts b/src/components/common/TextArea/TextArea.style.ts index 5da26d4b..a8c3ad80 100644 --- a/src/components/common/TextArea/TextArea.style.ts +++ b/src/components/common/TextArea/TextArea.style.ts @@ -12,9 +12,14 @@ export const textAreaWrapperStyle = (isError: boolean, isFocused: boolean) => (t ${flexGenerator('column', 'space-between', 'flex-end')} width: 100%; min-width: 33.5rem; - padding: 1.2rem 1.3rem 1rem 1rem; + padding: 1.2rem 1.6rem; - border: 1px solid ${isError && isFocused ? theme.color.error : theme.color.lightgray1}; + border: 1px solid + ${isError && isFocused + ? theme.color.error + : isFocused + ? theme.color.purple1 + : theme.color.lightgray1}; border-radius: 10px; background-color: ${theme.color.white}; `; @@ -37,7 +42,7 @@ export const textAreaStyle = (theme: Theme) => css` color: ${theme.color.blackgray}; background-color: ${theme.color.white}; - ${theme.font['body01-r-15']}; + ${theme.font['body06-m-15']}; &::placeholder { color: ${theme.color.midgray1}; diff --git a/src/components/common/index.ts b/src/components/common/index.ts index db705896..4795c4db 100644 --- a/src/components/common/index.ts +++ b/src/components/common/index.ts @@ -36,6 +36,7 @@ import ProgressBar from './ProgressBar/ProgressBar'; import FilterSelect from './select/FilterSelect/FilterSelect'; import Select from './select/Select/Select'; import { Spinner } from './Spinner/Spinner'; +import TagSelectBox from './TagSelectBox/TagSelectBox'; export { IconButton, @@ -75,4 +76,5 @@ export { Spinner, ErrorBoundary, CheckLabel, + TagSelectBox, }; diff --git a/src/components/common/inputs/Input/Input.style.ts b/src/components/common/inputs/Input/Input.style.ts index bfad1ab5..44a0af93 100644 --- a/src/components/common/inputs/Input/Input.style.ts +++ b/src/components/common/inputs/Input/Input.style.ts @@ -24,6 +24,7 @@ export const inputLabelStyle = (theme: Theme) => css` export const inputWrapperStyle = css` ${flexGenerator('row', 'flex-start', 'center')} width: 100%; + height: 5.2rem; position: relative; `; @@ -32,14 +33,18 @@ export const inputStyle = width: 100%; height: 5.2rem; padding: 1.5rem; - padding-right: 6rem; + padding-right: 3.8rem; border: 1px solid - ${isError && isFocused ? theme.color.error : theme.color.lightgray1 || customBorderColor}; + ${isError && isFocused + ? theme.color.error + : isFocused + ? theme.color.purple1 + : theme.color.lightgray1}; border-radius: 10px; color: ${theme.color.blackgray}; background-color: ${theme.color.white}; - ${theme.font['body01-r-15']} + ${theme.font['body06-m-15']} &::placeholder { color: ${theme.color.midgray1}; @@ -57,11 +62,18 @@ export const inputStyle = `; export const deleteButtonStyle = css` + ${flexGenerator()}; position: absolute; - right: 1.5rem; - width: 2rem; - height: 2rem; + top: 50%; + right: 1.1rem; + width: 3rem; + height: 3rem; cursor: pointer; + transform: translateY(-50%); +`; +export const deleteIconStyle = css` + width: 1.8rem; + height: 1.8rem; `; export const errorAndLengthWrapper = (hasError: boolean) => css` diff --git a/src/components/common/inputs/Input/Input.tsx b/src/components/common/inputs/Input/Input.tsx index 19504f3f..e9796b3c 100644 --- a/src/components/common/inputs/Input/Input.tsx +++ b/src/components/common/inputs/Input/Input.tsx @@ -13,6 +13,7 @@ import { errorAndLengthWrapper, deleteButtonStyle, labelAndInputWrapper, + deleteIconStyle, } from './Input.style'; export interface InputProps extends InputHTMLAttributes { @@ -96,7 +97,9 @@ const Input = forwardRef( /> {isFocused && value.length > 0 && (
- + + +
)}
diff --git a/src/pages/class/components/StepOne/StepOne.style.ts b/src/pages/class/components/StepOne/StepOne.style.ts index 37e39d06..c4515bb6 100644 --- a/src/pages/class/components/StepOne/StepOne.style.ts +++ b/src/pages/class/components/StepOne/StepOne.style.ts @@ -4,6 +4,7 @@ import { flexGenerator } from '@styles/generator'; export const layoutStyle = css` ${flexGenerator('column')}; + width: 100%; padding: 3.2rem 2rem 3rem 2rem; `; export const headerStyle = css` @@ -24,6 +25,7 @@ export const subTitleStyle = (theme: Theme) => css` export const mainStyle = css` ${flexGenerator('column')}; gap: 6rem; + width: 100%; margin-top: 3.8rem; margin-bottom: 5.4rem; diff --git a/src/pages/class/components/StepOne/StepOne.tsx b/src/pages/class/components/StepOne/StepOne.tsx index 0f9b4979..ea00bacc 100644 --- a/src/pages/class/components/StepOne/StepOne.tsx +++ b/src/pages/class/components/StepOne/StepOne.tsx @@ -155,12 +155,15 @@ const StepOne = ({ onNext }: StepProps) => { 몇 명의 게스트와 함께하고 싶으신가요?
- 참가자는 최대 15명까지 모집 가능합니다. + *참가자는 최대 15명까지 모집 가능합니다.
참가비를 알려주세요. +
+ *모임 인원과 주제, 시간 등을 고려하여 정해주세요. +
정산 받을 계좌를 알려주세요. diff --git a/src/pages/guest/components/DepositModal/DepositModal.style.ts b/src/pages/guest/components/DepositModal/DepositModal.style.ts index e8aeab12..c64d864e 100644 --- a/src/pages/guest/components/DepositModal/DepositModal.style.ts +++ b/src/pages/guest/components/DepositModal/DepositModal.style.ts @@ -36,7 +36,8 @@ export const headerSecondH1Style = (theme: Theme) => css` ${theme.font['body02-r-14']}; `; export const headerSpanStyle = (theme: Theme) => css` - color: ${theme.color.midgray2} ${theme.font['subhead05-sb-14']}; + color: ${theme.color.purple1}; + ${theme.font['subhead05-sb-14']}; `; export const mainStyle = css` @@ -75,7 +76,7 @@ export const payButtonSectionStyle = css` `; export const completeButtonCustomStyle = (theme: Theme) => css` - ${theme.font['subhead05-sb-14']} + ${theme.font['head04-b-16']} `; export const depositErrorButtonWrapper = css` @@ -91,7 +92,7 @@ export const depositErrorButtonStyle = (theme: Theme) => css` color: ${theme.color.midgray1}; border: none; border-bottom: 1px solid ${theme.color.midgray1}; - ${theme.font['subhead03-m-16']} + ${theme.font['subhead06-m-14']} cursor: pointer; `; @@ -101,4 +102,5 @@ export const depositErrorModalStyle = css` bottom: 4rem; left: 50%; transform: translateX(-50%); + box-shadow: 0rem 0rem 6rem 0rem rgba(0, 0, 0, 0.2); `; diff --git a/src/pages/guest/page/GuestMyClassReviewWrite/GuestMyClassReviewWrite.tsx b/src/pages/guest/page/GuestMyClassReviewWrite/GuestMyClassReviewWrite.tsx index f123a3f3..b8fe1ca6 100644 --- a/src/pages/guest/page/GuestMyClassReviewWrite/GuestMyClassReviewWrite.tsx +++ b/src/pages/guest/page/GuestMyClassReviewWrite/GuestMyClassReviewWrite.tsx @@ -7,10 +7,10 @@ import { useFetchMoimFromReviewPage } from '@apis/domains/review/useFetchMoimFro import { useFetchReviewTagList } from '@apis/domains/review/useFetchReviewTagList'; import { usePostReview } from '@apis/domains/review/usePostReview'; -import { Button, Header, ImageSelect, Spinner, TextArea } from '@components'; +import { Button, Header, ImageSelect, Spinner, TagSelectBox, TextArea, Toast } from '@components'; +import { useToast } from '@hooks'; import { ClassListCard } from '@pages/classList/components'; import { handleUpload } from '@utils'; -import TagSelectBox from 'src/components/common/TagSelectBox/TagSelectBox'; import { hostTagsAtom, moimTagsAtom } from 'src/stores/tagList'; import { @@ -33,6 +33,7 @@ const GuestMyClassReviewWrite = () => { const { moimId } = useParams(); const moimIdNumber = Number(moimId); const navigate = useNavigate(); + const { showToast, isToastVisible } = useToast(); const { data: moimData } = useFetchMoimFromReviewPage(moimId ?? ''); const { data: tagList } = useFetchReviewTagList(); @@ -62,54 +63,71 @@ const GuestMyClassReviewWrite = () => { content, imageUrl, }; - await mutateAsync({ params, moimId: moimIdNumber }); - navigate(`/mypage/guest/myclass/${moimId}/review/complete`); + try { + await mutateAsync({ params, moimId: moimIdNumber }); + navigate(`/mypage/guest/myclass/${moimId}/review/complete`); + } catch (error) { + showToast(); + } + }; + + const isButtonDisabled = () => { + return selectedMoimTags.length < 1 || selectedHostTags.length < 1 || content.length < 5; }; if (putS3IsPending || isPending) { return ; } return ( -
-
-
- {moimData && } -
-
-
- 클래스는 어떠셨나요? - 최소 1개, 최대 3개 -
- -
-
-
- 스피커는 어떠셨나요? - 최소 1개, 최대 3개 -
- -
-
- 클래스에 함께한 경험을 공유해 주세요! -
-