Merge pull request #202 from mash-up-kr/release/v1.0.0

Main Release/v1.0.0

Author: mango906

.github/CODEOWNERS

@@ -1 +1 @@
-*   @mango906 @dididy @minsour @Baek2back @HaJunRyu
+*   @mango906 @minsour @Baek2back @HaJunRyu

.pnp.cjs

@@ -104,6 +104,7 @@
     "@emotion/styled": "^11.6.0",
     "axios": "^0.26.0",
     "dayjs": "^1.10.7",
+    "history": "^5.3.0",
     "lodash-es": "^4.17.21",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

.yarn/cache/history-npm-5.3.0-00136b6a63-d73c35df49.zip

@@ -46,9 +46,15 @@ interface ControlAreaProps {
   confirmationStatus: ApplicationConfirmationStatusKeyType;
   resultStatus: ApplicationResultStatusKeyType;
   interviewDate?: string;
+  isLoading?: boolean;
 }
 
-const ControlArea = ({ confirmationStatus, resultStatus, interviewDate }: ControlAreaProps) => {
+const ControlArea = ({
+  confirmationStatus,
+  resultStatus,
+  interviewDate,
+  isLoading = false,
+}: ControlAreaProps) => {
   const { setValue, getValues, watch, register } = useFormContext<FormValues>();
   const date = getValues('interviewStartedAt');
   const isEdit = watch('isEdit');
@@ -205,7 +211,13 @@ const ControlArea = ({ confirmationStatus, resultStatus, interviewDate }: Contro
             label="취소"
             onClick={handleToggleIsEdit}
           />
-          <Button type="submit" $size={ButtonSize.sm} shape={ButtonShape.primary} label="저장" />
+          <Button
+            type="submit"
+            $size={ButtonSize.sm}
+            shape={ButtonShape.primary}
+            label="저장"
+            isLoading={isLoading}
+          />
         </Styled.ButtonContainer>
       </>
     );
@@ -263,6 +275,7 @@ const ApplicationPanel = ({
       isEdit: false,
     },
   });
+  const [isLoading, setIsLoading] = useState(false);
 
   const { handleSubmit } = methods;
 
@@ -299,6 +312,7 @@ const ApplicationPanel = ({
 
         request({
           requestFunc: async () => {
+            setIsLoading(true);
             await api.postUpdateResult(requestDto);
           },
           errorHandler: handleAddToast,
@@ -311,6 +325,7 @@ const ApplicationPanel = ({
               message: '성공적으로 합격 여부가 변경되었습니다.',
             });
           },
+          onCompleted: () => setIsLoading(false),
         });
       },
     [],
@@ -329,6 +344,7 @@ const ApplicationPanel = ({
             confirmationStatus={confirmationStatus}
             resultStatus={resultStatus}
             interviewDate={interviewDate}
+            isLoading={isLoading}
             {...restProps}
           />
         </Styled.ApplicationStatusForm>

package.json

@@ -1,5 +1,6 @@
 import React from 'react';
 import { useSetRecoilState } from 'recoil';
+import unescape from 'lodash-es/unescape';
 import UserProfile, {
   splitMemberPosition,
 } from '@/components/common/UserProfile/UserProfile.component';
@@ -10,6 +11,7 @@ import { MemberPositionType, ApplicationResponse } from '@/types';
 import { $modalByStorage, ModalKey } from '@/store';
 import { formatDate } from '@/utils/date';
 import { SmsStatus, SmsStatusType } from '@/types/dto/sms';
+import { useConvertTextToLink } from '@/hooks';
 
 export interface MessageInfoProps {
   notificationName?: string;
@@ -29,6 +31,7 @@ const MessageInfo = ({
   status,
   createdAt,
 }: MessageInfoProps) => {
+  const convertedContent = useConvertTextToLink(unescape(notificationContent));
   return (
     <Styled.MessageInfoContainer>
       <Styled.Label status={status}>{SmsStatus[status]}</Styled.Label>
@@ -45,7 +48,7 @@ const MessageInfo = ({
           removePadding
         />
       </TitleWithContent>
-      <TitleWithContent title="발송내용">{notificationContent}</TitleWithContent>
+      <TitleWithContent title="발송내용">{convertedContent}</TitleWithContent>
     </Styled.MessageInfoContainer>
   );
 };

src/components/ApplicationDetail/ApplicationPanel/ApplicationPanel.component.tsx

@@ -13,6 +13,7 @@ interface ActionButton {
   type?: 'submit' | 'reset' | 'button';
   disabled?: boolean;
   onClick?: () => void;
+  isLoading?: boolean;
 }
 
 export interface ApplicationFormAsideProps {

src/components/ApplicationDetail/MessageListPanel/MessageListPanel.component.tsx

@@ -1,19 +1,19 @@
 import React from 'react';
-import { useNavigate } from 'react-router-dom';
 import { BackButton } from '@/components';
 import * as Styled from './ApplicationFormSection.styled';
 import { PATH } from '@/constants';
+import { useHistory } from '@/hooks';
 
 interface ApplicationFormSectionProps {
   headline: string;
 }
 
 const ApplicationFormSection = ({ headline }: ApplicationFormSectionProps) => {
-  const navigate = useNavigate();
+  const { handleGoBack } = useHistory();
 
   return (
     <section>
-      <BackButton label="목록 돌아가기" onClick={() => navigate(PATH.APPLICATION_FORM)} />
+      <BackButton label="목록 돌아가기" onClick={() => handleGoBack(PATH.APPLICATION_FORM)} />
       <Styled.Headline>{headline}</Styled.Headline>
     </section>
   );

src/components/ApplicationForm/ApplicationFormAside/ApplicationFormAside.component.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { usePrompt } from '@/hooks';
+import { AlertModalDialog } from '..';
+
+interface PromptProps {
+  isBlocking?: boolean;
+}
+
+const Blocker = ({ isBlocking = true }: PromptProps) => {
+  const { showPrompt, confirmNavigation, cancelNavigation } = usePrompt(isBlocking);
+
+  if (!showPrompt) {
+    return null;
+  }
+
+  return (
+    <AlertModalDialog
+      heading="삭제하시겠습니까?"
+      paragraph="작성 또는 수정하신 데이터가 삭제됩니다."
+      cancelButtonLabel="취소"
+      confirmButtonLabel="닫기"
+      handleClickCancelButton={cancelNavigation}
+      handleClickConfirmButton={confirmNavigation}
+    />
+  );
+};
+
+export default Blocker;

src/components/ApplicationForm/ApplicationFormSection/ApplicationFormSection.component.tsx

@@ -26,14 +26,24 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
   shape?: ButtonShapeType;
   Icon?: (props: SVGProps<SVGElement>) => ReactElement;
   label?: string;
+  isLoading?: boolean;
 }
 
 export interface ParentRef {
   focus: () => void;
 }
 
 const Button = (
-  { children, className, $size = 'sm', shape = 'default', Icon, label, ...resetProps }: ButtonProps,
+  {
+    children,
+    className,
+    $size = 'sm',
+    shape = 'default',
+    Icon,
+    label,
+    isLoading = false,
+    ...resetProps
+  }: ButtonProps,
   parentRef: React.Ref<ParentRef>,
 ) => {
   const childRef = useRef<HTMLButtonElement>(null);
@@ -55,11 +65,13 @@ const Button = (
       className={className}
       $size={$size}
       shape={shape}
+      disabled={isLoading}
       {...resetProps}
     >
       {Icon && <Icon />}
       {shape !== ButtonShape.icon && label}
       {children}
+      {isLoading && <Styled.Spinner />}
     </Styled.ButtonWrapper>
   );
 };