Merge branch 'main' of https://github.com/depromeet/15th-team3-FE int…

…o fix/text-layout
depromeet · Aug 30, 2024 · f5e94de · f5e94de
2 parents ee8fa0d + 6944711
commit f5e94de
Show file tree

Hide file tree

Showing 15 changed files with 38 additions and 20 deletions.
diff --git a/packages/web-domains/src/answer/features/comment/components/Comment.tsx b/packages/web-domains/src/answer/features/comment/components/Comment.tsx
@@ -32,8 +32,8 @@ export const Comment = ({ comment, onChangeComment }: CommentProps) => {
         <CommentInput
           value={comment}
           onChange={onChangeComment}
-          maxLength={20}
-          errors={{ maxLength: 20 }}
+          maxLength={100}
+          errors={{ maxLength: 100 }}
           css={{ marginTop: '24px' }}
         />
       </div>

diff --git a/packages/web-domains/src/answer/features/comment/components/CommentInput.tsx b/packages/web-domains/src/answer/features/comment/components/CommentInput.tsx
@@ -17,8 +17,8 @@ export const CommentInput = forwardRef<HTMLInputElement, CommentInputProps>(
 
     const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
       const { value } = e.target;
-      setInput(value);
-      onChange?.(value);
+      setInput(value.substring(0, maxLength));
+      onChange?.(value.substring(0, maxLength));
     };
 
     const handleReset = () => {

diff --git a/packages/web-domains/src/answer/features/comment/containers/CommentContainer.tsx b/packages/web-domains/src/answer/features/comment/containers/CommentContainer.tsx
@@ -5,7 +5,8 @@ import { Comment } from '../components/Comment';
 import { useCommentService } from '../services/useCommentService';
 
 export const CommentContainer = () => {
-  const { comment, handleChangeComment, handleSubmit } = useCommentService();
+  const { comment, handleChangeComment, handleSubmit, isSendCommentPending, isAnswerQuestionPending } =
+    useCommentService();
 
   return (
     <section
@@ -16,7 +17,7 @@ export const CommentContainer = () => {
       }}
     >
       <Comment comment={comment} onChangeComment={handleChangeComment} />
-      <CommentButton onClick={handleSubmit} />
+      <CommentButton onClick={handleSubmit} loading={isSendCommentPending || isAnswerQuestionPending} />
     </section>
   );
 };
diff --git a/packages/web-domains/src/answer/features/comment/services/useCommentService.tsx b/packages/web-domains/src/answer/features/comment/services/useCommentService.tsx
@@ -20,8 +20,8 @@ export const useCommentService = () => {
   const [comment, setComment] = useState<string>('');
   const answerList = useAtomValue(answerAtoms.answerList);
   const { meetingId, questionId } = useParams<{ meetingId: string; questionId: string }>();
-  const { mutateAsync: sendCommentMutate } = useCommentMutation({});
-  const { mutateAsync: sendAnswerMutate } = useAnswerQuestionMutation({});
+  const { mutateAsync: sendCommentMutate, isPending: isSendCommentPending } = useCommentMutation({});
+  const { mutateAsync: sendAnswerMutate, isPending: isAnswerQuestionPending } = useAnswerQuestionMutation({});
 
   const setIsProgressingQuestion = useSetAtom(HomeAtoms.isProgessingQuestionAtom);
   const setHomeGlobalTime = useSetAtom(HomeAtoms.homeGlobalTimeAtom);
@@ -87,5 +87,7 @@ export const useCommentService = () => {
     comment,
     handleSubmit,
     handleChangeComment,
+    isAnswerQuestionPending,
+    isSendCommentPending,
   };
 };
diff --git a/packages/web-domains/src/answer/features/floating-button/components/CommentButton.tsx b/packages/web-domains/src/answer/features/floating-button/components/CommentButton.tsx
@@ -7,9 +7,10 @@ import { Attributes, HTMLAttributes } from 'react';
 interface CommentButtonProps extends Omit<HTMLAttributes<HTMLButtonElement>, 'onClick'> {
   disabled?: boolean;
   onClick?: () => void;
+  loading?: boolean;
 }
 
-export const CommentButton = ({ disabled, onClick, ...rest }: CommentButtonProps) => {
+export const CommentButton = ({ disabled, onClick, loading = false, ...rest }: CommentButtonProps) => {
   const buttonStyles: Attributes['css'] = {
     backgroundColor: disabled ? colors.grey600 : colors.black,
     cursor: disabled ? 'none' : 'pointer',
@@ -24,7 +25,7 @@ export const CommentButton = ({ disabled, onClick, ...rest }: CommentButtonProps
 
   return (
     <div css={{ position: 'absolute', bottom: '40px', width: '100%', maxWidth: '600px', padding: '0 20px' }}>
-      <Button size="large" {...rest} css={buttonStyles} onClick={handleAnswer}>
+      <Button size="large" {...rest} css={buttonStyles} onClick={handleAnswer} loading={loading}>
         답변 보내기
       </Button>
     </div>

diff --git a/.../web-domains/src/new-meeting/features/get-meeting-info/components/TextField/TextField.tsx b/.../web-domains/src/new-meeting/features/get-meeting-info/components/TextField/TextField.tsx
@@ -15,6 +15,7 @@ export const TextField = forwardRef<HTMLInputElement, PropsWithChildren<InputPro
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     if (maxLength && event.target.value.length > maxLength) {
       event.target.value = event.target.value.slice(0, maxLength);
+      return;
     }
     onChange && onChange(event);
   };

diff --git a/...ns/src/relay-question/features/select-relay-question/components/Questioner/Questioner.tsx b/...ns/src/relay-question/features/select-relay-question/components/Questioner/Questioner.tsx
@@ -19,15 +19,15 @@ interface QuestionerProps {
 
 export const Questioner = ({ meetingId, meetingMemberId, imageUrl, name }: QuestionerProps) => {
   const openModal = useModal();
-  const { postRelayQuestionInfo } = usePostRelayQuestionInfo(meetingId);
+  const { postRelayQuestionInfo, isPending } = usePostRelayQuestionInfo(meetingId);
 
   const router = useRouter();
   const searchParams = useSearchParams();
 
   const handleOpenModal = async () => {
     const isConfirm = await openModal({
       component: QuestionerDetail,
-      componentProps: { imageUrl, name, isRandom: false },
+      componentProps: { imageUrl, name, isRandom: false, isPending },
     });
 
     if (isConfirm) {

diff --git a/...-question/features/select-relay-question/components/QuestionerDetail/QuestionerDetail.tsx b/...-question/features/select-relay-question/components/QuestionerDetail/QuestionerDetail.tsx
@@ -16,6 +16,7 @@ interface QuestionerDetailProps {
   onClose: () => void;
   onConfirm: () => void;
   onRefetch?: () => void;
+  isPending?: boolean;
 }
 
 export const QuestionerDetail = ({
@@ -25,6 +26,7 @@ export const QuestionerDetail = ({
   onClose,
   onConfirm,
   onRefetch,
+  isPending = false,
 }: QuestionerDetailProps) => {
   return (
     <div css={wrapperCss}>
@@ -38,7 +40,9 @@ export const QuestionerDetail = ({
         <Button variant="sub" onClick={onClose}>
           닫기
         </Button>
-        <Button onClick={onConfirm}>질문인 선택</Button>
+        <Button onClick={onConfirm} loading={isPending}>
+          질문인 선택
+        </Button>
       </div>
       {isRandom && (
         <RePick onClick={onRefetch}>

diff --git a/...ion/features/select-relay-question/containers/RandomPickContainer/RandomPickContainer.tsx b/...ion/features/select-relay-question/containers/RandomPickContainer/RandomPickContainer.tsx
@@ -97,7 +97,7 @@ const QuestionerRandomPick = ({ meetingId }: Props) => {
     excludeMemberIds: [memberMe?.meetingMemberId!],
   });
 
-  const { postRelayQuestionInfo } = usePostRelayQuestionInfo(meetingId);
+  const { postRelayQuestionInfo, isPending } = usePostRelayQuestionInfo(meetingId);
 
   const handleOpenModal = () => {
     setIsOpen(true);
@@ -142,6 +142,7 @@ const QuestionerRandomPick = ({ meetingId }: Props) => {
             onConfirm={handleConfirmModal}
             onRefetch={refetchQuestioner}
             isRandom
+            isPending={isPending}
           />
         )}
       </Modal>

diff --git a/...relay-question/features/select-relay-question/hooks/mutations/usePostRelayQuestionInfo.ts b/...relay-question/features/select-relay-question/hooks/mutations/usePostRelayQuestionInfo.ts
@@ -20,7 +20,7 @@ export const usePostRelayQuestionInfo = (meetingId: number) => {
   const { mutate: postRelayQuestionInfo, ...rest } = useMutation({
     mutationFn: (payload: Payload) => _postRelayQuestionInfo({ meetingId, payload }),
     onError: (error: AxiosError<{ message: string }>) => {
-      alert(error.response?.data.message ?? '댓글 수정에 실패했습니다.');
+      alert(error.response?.data.message ?? '릴레이 질문 생성에 실패했습니다.');
     },
   });
 

diff --git a/packages/web-domains/src/user/features/get-user-info/components/Form/ExtraInfoForm.tsx b/packages/web-domains/src/user/features/get-user-info/components/Form/ExtraInfoForm.tsx
@@ -56,7 +56,7 @@ export const ExtraInfoForm = () => {
           required: true,
           minLength: 1,
           maxLength: 15,
-          pattern: /^\S.*\S$/,
+          validate: (value) => (value.trim().length >= 1 ? true : false),
         })}
       />
       <TextInput
@@ -69,7 +69,7 @@ export const ExtraInfoForm = () => {
           required: true,
           minLength: 1,
           maxLength: 15,
-          pattern: /^\S.*\S$/,
+          validate: (value) => (value.trim().length >= 1 ? true : false),
         })}
       />
       <div css={buttonWrapperCss}>

diff --git a/packages/web-domains/src/user/features/get-user-info/components/Form/IntroInfoForm.tsx b/packages/web-domains/src/user/features/get-user-info/components/Form/IntroInfoForm.tsx
@@ -68,7 +68,10 @@ export const IntroInfoForm = () => {
       <TextArea
         maxLength={MAX_LENGTH}
         placeholder="저는 이런 사람이에요"
-        {...register('introduction', { maxLength: MAX_LENGTH, pattern: /^\S.*\S$/ })}
+        {...register('introduction', {
+          maxLength: MAX_LENGTH,
+          validate: (value) => (value.trim().length >= 1 ? true : false),
+        })}
       />
       <Txt as="p" typography="body4" color={colors.grey600}>
         최대 {MAX_LENGTH}자까지 입력해주세요

diff --git a/packages/web-domains/src/user/features/get-user-info/components/TextInput/TextArea.tsx b/packages/web-domains/src/user/features/get-user-info/components/TextInput/TextArea.tsx
@@ -9,7 +9,8 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>((props, r
 
   const handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
     if (maxLength && event.target.value.length > maxLength) {
-      event.target.value = event.target.value.slice(0, maxLength);
+      event.target.value = event.target.value.substring(0, maxLength);
+      return;
     }
     onChange && onChange(event);
   };

diff --git a/packages/web-domains/src/user/features/get-user-info/components/TextInput/TextInput.tsx b/packages/web-domains/src/user/features/get-user-info/components/TextInput/TextInput.tsx
@@ -18,6 +18,7 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>((props, re
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     if (maxLength && event.target.value.length > maxLength) {
       event.target.value = event.target.value.slice(0, maxLength);
+      return;
     }
     onChange && onChange(event);
   };

diff --git a/packages/web-domains/src/user/features/modify-user-info/components/ModifyIntroForm.tsx b/packages/web-domains/src/user/features/modify-user-info/components/ModifyIntroForm.tsx
@@ -26,7 +26,10 @@ export const ModifyIntroForm = () => {
       <TextArea
         placeholder="저는 이런 사람이에요."
         maxLength={MAX_LENGTH}
-        {...register('introduction', { maxLength: MAX_LENGTH, pattern: /^\S.*\S$/ })}
+        {...register('introduction', {
+          maxLength: MAX_LENGTH,
+          validate: (value) => (value.trim().length >= 1 ? true : false),
+        })}
       />
       <Txt as="p" typography="body4" color={colors.grey600}>
         최대 {MAX_LENGTH}자까지 입력해주세요