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

Main Release/v1.0.0

.github/CODEOWNERS

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

package.json

@@ -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",

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

@@ -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>

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

@@ -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/ApplicationForm/ApplicationFormAside/ApplicationFormAside.component.tsx

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

src/components/ApplicationForm/ApplicationFormSection/ApplicationFormSection.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/common/Blocker/Blocker.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/common/Button/Button.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>
   );
 };

src/components/common/Button/Button.styled.ts

@@ -1,5 +1,7 @@
-import { css } from '@emotion/react';
+import { css, keyframes } from '@emotion/react';
 import styled from '@emotion/styled';
+import { colors } from '@/styles';
+import { ValueOf } from '@/types';
 import { ButtonSizeType, ButtonShapeType } from './Button.component';
 
 interface StyledButtonProps {
@@ -12,10 +14,33 @@ export const ButtonWrapper = styled.button<StyledButtonProps>`
     css`
       ${theme.button.size[$size]}
       ${theme.button.shape[shape]}
+      position: relative;
       display: flex;
       align-items: center;
       justify-content: center;
       border-style: solid;
       border-width: 0.1rem;
     `}
 `;
+
+export const spinner = keyframes`
+  0% {
+    transform: rotate(360deg);
+  }
+`;
+
+export const Spinner = styled.div<{ spinnerColor?: ValueOf<typeof colors> }>`
+  ${({ theme }) => css`
+    position: absolute;
+    top: calc(50% - 1rem);
+    left: calc(50% - 1rem);
+    z-index: ${theme.zIndex.modal};
+    width: 2rem;
+    height: 2rem;
+    margin: 0 auto;
+    border: 0.4rem solid rgba(0, 0, 0, 0);
+    border-top-color: ${theme.colors.whiteLoadingDimmed};
+    border-radius: 50%;
+    animation: ${spinner} 650ms linear infinite;
+  `};
+`;

src/components/common/ModalWrapper/ModalWrapper.component.tsx

@@ -41,6 +41,7 @@ export interface ModalProps extends Children {
       shape?: ButtonShapeType;
       label?: string;
       onClick: MouseEventHandler<HTMLButtonElement>;
+      isLoading?: boolean;
     };
     position?: PositionType;
   };

src/components/common/Navigation/Navigation.component.tsx

@@ -30,17 +30,21 @@ const Navigation = ({ size, inActiveColor, items, showBottomBorder = true }: Nav
 
   return (
     <Styled.NavigationContainer showBottomBorder={showBottomBorder}>
-      {items.map((item) => (
-        <Styled.NavigationItem
-          key={item.to}
-          size={size}
-          to={item.to}
-          inActiveColor={inActiveColor}
-          active={pathname === item.to}
-        >
-          {item.label}
-        </Styled.NavigationItem>
-      ))}
+      {items.map((item) => {
+        const isActive = pathname.split('/').some((pathNameItem) => `/${pathNameItem}` === item.to);
+
+        return (
+          <Styled.NavigationItem
+            key={item.to}
+            size={size}
+            to={item.to}
+            inActiveColor={inActiveColor}
+            active={isActive}
+          >
+            {item.label}
+          </Styled.NavigationItem>
+        );
+      })}
     </Styled.NavigationContainer>
   );
 };

src/components/common/SmsSendModalDialog/SmsSendModalDialog.component.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useRecoilCallback, useRecoilValue, useSetRecoilState } from 'recoil';
 import { useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
@@ -37,6 +37,7 @@ const SmsSendModalDialog = ({
   messageContent,
   showSummary = false,
 }: SmsSendModalDialogProps) => {
+  const [isLoading, setIsLoading] = useState(false);
   const selectedIds = selectedApplications.map((application) => application.applicant.applicantId);
   const selectedResults = uniqArray(
     selectedApplications.map((application) => application.result.status),
@@ -88,6 +89,7 @@ const SmsSendModalDialog = ({
         handleClickConfirmButton: () => {
           request({
             requestFunc: async () => {
+              setIsLoading(true);
               await api.postSmsSend({ applicantIds: selectedIds, content, name });
             },
 
@@ -101,6 +103,7 @@ const SmsSendModalDialog = ({
               navigate(PATH.SMS);
             },
             onCompleted: () => {
+              setIsLoading(false);
               set($modalByStorage(ModalKey.alertModalDialog), {
                 key: ModalKey.alertModalDialog,
                 isOpen: false,
@@ -122,6 +125,7 @@ const SmsSendModalDialog = ({
         label: '발송',
         onClick: handleSubmit(handleSendSms),
         type: 'submit',
+        isLoading,
       },
     },
     handleCloseModal: handleRemoveCurrentModal,

src/components/common/index.ts

@@ -26,3 +26,4 @@ export { default as Loading } from './Loading/Loading.component';
 export { default as Portal } from './Portal/Portal.component';
 export { default as SmsSendModalDialog } from './SmsSendModalDialog/SmsSendModalDialog.component';
 export { default as BottomCTA } from './BottomCTA/BottomCTA.component';
+export { default as Blocker } from './Blocker/Blocker.component';