Merge branch 'develop' into main

mash-up-kr · Mar 18, 2022 · 94bd096 · 94bd096
2 parents 94badbf + ce5d25e
commit 94bd096
Show file tree

Hide file tree

Showing 51 changed files with 1,510 additions and 498 deletions.
diff --git a/jest.config.js b/jest.config.js
@@ -7,10 +7,10 @@ module.exports = {
   },
   coverageThreshold: {
     global: {
-      branches: 100,
-      functions: 100,
-      lines: 100,
-      statements: 100,
+      branches: 30,
+      functions: 30,
+      lines: 30,
+      statements: 30,
     },
   },
   testEnvironment: 'jsdom',

diff --git a/src/api/application.ts b/src/api/application.ts
@@ -5,6 +5,7 @@ import {
   MeResponse,
   BaseResponse,
   ApplicationUpdateResultByIdRequest,
+  ApplicationUpdateMultipleResultRequest,
 } from '@/types';
 
 export const getApplicationById = ({
@@ -20,11 +21,23 @@ export const postUpdateResult = ({
   interviewEndedAt,
   interviewStartedAt,
 }: ApplicationUpdateResultByIdRequest): Promise<BaseResponse<MeResponse>> =>
-  http.get({
+  http.post({
     url: `/applications/${applicationId}`,
     data: {
       applicationResultStatus,
       interviewEndedAt,
       interviewStartedAt,
     },
   });
+
+export const postUpdateMultipleResult = ({
+  applicationIds,
+  applicationResultStatus,
+}: ApplicationUpdateMultipleResultRequest): Promise<BaseResponse<MeResponse>> =>
+  http.post({
+    url: `/applications/update-result`,
+    data: {
+      applicationResultStatus,
+      applicationIds,
+    },
+  });
diff --git a/src/assets/svg/caret-up-16.svg b/src/assets/svg/caret-up-16.svg
diff --git a/src/assets/svg/caret-updown-16.svg b/src/assets/svg/caret-updown-16.svg
diff --git a/src/assets/svg/chevron-right-16.svg b/src/assets/svg/chevron-right-16.svg
diff --git a/src/components/ApplicationDetail/ApplicationPanel/ApplicationPanel.component.tsx b/src/components/ApplicationDetail/ApplicationPanel/ApplicationPanel.component.tsx
@@ -2,7 +2,7 @@ import React, { useMemo, useRef, useState } from 'react';
 import { FormProvider, useForm, useFormContext } from 'react-hook-form';
 import dayjs, { Dayjs } from 'dayjs';
 import { useRecoilCallback } from 'recoil';
-import { Button, DatePicker, SelectField } from '@/components';
+import { Button, DatePicker, Select, SelectField } from '@/components';
 import * as Styled from './ApplicationPanel.styled';
 import { ButtonShape, ButtonSize } from '@/components/common/Button/Button.component';
 import { TitleWithContent } from '..';
@@ -18,7 +18,7 @@ import { SelectOption, SelectSize } from '@/components/common/Select/Select.comp
 import { useOnClickOutSide } from '@/hooks';
 import { rangeArray } from '@/utils';
 import { postUpdateResult } from '@/api';
-import { ApplicationUpdateResultByIdRequest } from '@/types';
+import { ApplicationConfirmationStatusInDto, ApplicationUpdateResultByIdRequest } from '@/types';
 import { $modalByStorage, ModalKey } from '@/store';
 
 interface FormValues {
@@ -130,21 +130,26 @@ const ControlArea = ({ confirmationStatus, resultStatus, interviewDate }: Contro
             {/* // TODO:(용재) pointer-events: none; 하긴 했는데 클릭 자체가 실행 안되도록 못하도록 처리해야 함 - onClick 두고 캡쳐링을 막으면 될까.. */}
             <Styled.SelectContainer disabled={isInterviewConfirmed}>
               <div ref={outerRef}>
-                <Styled.Select onClick={handleToggleDatePicker}>
+                <Styled.SelectWrapper
+                  onClick={handleToggleDatePicker}
+                  isDatePickerOpened={isDatePickerOpened}
+                >
                   {formatDate(date.format(), 'YYYY년 M월 D일(ddd)')}
-                </Styled.Select>
+                </Styled.SelectWrapper>
                 <Styled.SelectMenu isDatePickerOpened={isDatePickerOpened}>
                   <DatePicker handleSelectDate={handleSelectDate} selectedDate={date} />
                 </Styled.SelectMenu>
               </div>
-              <Styled.SelectTimeField
-                size={SelectSize.md}
-                options={timeOptions}
-                isFullWidth
-                onChangeOption={handleChangeTimeSelect}
-                disabled={isInterviewConfirmed}
-                defaultValue={timeOptions.find((option) => option.value === dayjs(date).format())}
-              />
+              <Styled.SelectTimeField>
+                <Select
+                  size={SelectSize.md}
+                  options={timeOptions}
+                  isFullWidth
+                  onChangeOption={handleChangeTimeSelect}
+                  disabled={isInterviewConfirmed}
+                  defaultValue={timeOptions.find((option) => option.value === dayjs(date).format())}
+                />
+              </Styled.SelectTimeField>
             </Styled.SelectContainer>
           </TitleWithContent>
         )}
@@ -167,7 +172,12 @@ const ControlArea = ({ confirmationStatus, resultStatus, interviewDate }: Contro
         <ApplicationStatusBadge text={ApplicationResultStatus[resultStatus]} />
       </TitleWithContent>
       {isShowInterviewSchedule && (
-        <TitleWithContent title="면접 일시" isLineThrough={isInterviewConfirmed}>
+        <TitleWithContent
+          title="면접 일시"
+          isLineThrough={
+            confirmationStatus === ApplicationConfirmationStatusInDto.FINAL_CONFIRM_REJECTED
+          }
+        >
           {formatDate(date.format(), 'YYYY년 M월 D일(ddd) a hh시 mm분')}
         </TitleWithContent>
       )}
@@ -201,21 +211,19 @@ const ApplicationPanel = ({
   const { handleSubmit } = methods;
 
   const handleSubmitUpdateResult = useRecoilCallback(
-    ({ set, snapshot }) =>
+    ({ set }) =>
       async (data: FormValues) => {
         const requestDto: ApplicationUpdateResultByIdRequest = {
           ...data,
           applicationId,
         };
 
-        const modal = snapshot.getLoadable($modalByStorage(ModalKey.alertModalDialog)).contents;
-
         try {
           await postUpdateResult(requestDto);
         } catch (e) {
           // TODO:(용재) 메시지 확정되면 추가
           set($modalByStorage(ModalKey.alertModalDialog), {
-            ...modal,
+            key: ModalKey.alertModalDialog,
             props: {
               heading: '에러가 발생했습니다.',
               paragraph: '다시 시도해주세요.',

diff --git a/src/components/ApplicationDetail/ApplicationPanel/ApplicationPanel.styled.ts b/src/components/ApplicationDetail/ApplicationPanel/ApplicationPanel.styled.ts
@@ -1,6 +1,5 @@
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
-import SelectComponent from '@/components/common/Select/Select.component';
 
 export const ApplicationPanelContainer = styled.aside`
   ${({ theme }) => css`
@@ -57,21 +56,26 @@ export const SelectContainer = styled.div<StyledSelectorContainerProps>`
   `}
 `;
 
-export const Select = styled.div`
-  ${({ theme }) => css`
+interface StyledSelectWrapperProps {
+  isDatePickerOpened: boolean;
+}
+
+export const SelectWrapper = styled.div<StyledSelectWrapperProps>`
+  ${({ theme, isDatePickerOpened }) => css`
     display: flex;
     align-items: center;
     justify-content: space-between;
     height: 4.8rem;
     padding: 0.8rem 1.2rem;
     background-color: ${theme.colors.white};
+    border: 0.1rem solid ${theme.colors.gray30};
+    border-color: ${isDatePickerOpened ? theme.colors.purple70 : theme.colors.gray30};
+    border-radius: 0.9rem;
+    cursor: pointer;
 
     &:hover {
       border: 0.1rem solid ${theme.colors.purple40};
     }
-    border: 0.1rem solid ${theme.colors.gray30};
-    border-radius: 0.9rem;
-    cursor: pointer;
   `}
 `;
 
@@ -89,8 +93,8 @@ export const SelectMenu = styled.div<StyledSelectMenuProps>`
   `}
 `;
 
-export const SelectTimeField = styled(SelectComponent)`
-  & ul {
+export const SelectTimeField = styled.div`
+  ul {
     height: 26.8rem;
     overflow-y: auto;
   }

diff --git a/src/components/ApplicationDetail/ApplicationQnAItem/ApplicationQnAItem.component.tsx b/src/components/ApplicationDetail/ApplicationQnAItem/ApplicationQnAItem.component.tsx
@@ -1,21 +1,8 @@
 import React from 'react';
 import * as Styled from './ApplicationQnAItem.styled';
-import { QuestionKindType } from '@/types';
+import { Question } from '@/types';
 
-export interface ApplicationQnAItemProps {
-  content: string;
-  description: string;
-  maxContentLength: number;
-  questionId: number;
-  questionType: QuestionKindType;
-  required: boolean;
-}
-
-const ApplicationQnAItem = ({
-  content,
-  description,
-  maxContentLength,
-}: ApplicationQnAItemProps) => {
+const ApplicationQnAItem = ({ content, description, maxContentLength }: Question) => {
   return (
     <Styled.ApplicationQnAItemContainer>
       <Styled.Title>{content}</Styled.Title>

diff --git a/src/components/ApplicationDetail/ApplicationQnAItem/ApplicationQnAItem.stories.tsx b/src/components/ApplicationDetail/ApplicationQnAItem/ApplicationQnAItem.stories.tsx
@@ -1,13 +1,14 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-import ApplicationQnAItem, { ApplicationQnAItemProps } from './ApplicationQnAItem.component';
+import ApplicationQnAItem from './ApplicationQnAItem.component';
+import { Question } from '@/types';
 
 export default {
   title: 'ApplicationDetail/Application Qn A Item',
   component: ApplicationQnAItem,
 } as ComponentMeta<typeof ApplicationQnAItem>;
 
-const Template: ComponentStory<typeof ApplicationQnAItem> = (args: ApplicationQnAItemProps) => (
+const Template: ComponentStory<typeof ApplicationQnAItem> = (args: Question) => (
   <ApplicationQnAItem {...args} />
 );
 
@@ -17,6 +18,6 @@ applicationQnAItem.args = {
   content: 'TEST',
   description: 'test',
   maxContentLength: 300,
-  questionId: 0,
+  questionId: '0',
   required: false,
 };
diff --git a/src/components/ApplicationDetail/MessageListPanel/MessageListPanel.component.tsx b/src/components/ApplicationDetail/MessageListPanel/MessageListPanel.component.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { useRecoilState } from 'recoil';
+import { useSetRecoilState } from 'recoil';
 import UserProfile, {
   splitMemberPosition,
 } from '@/components/common/UserProfile/UserProfile.component';
@@ -58,7 +58,7 @@ export interface MessageListPanelProps {
 }
 
 const MessageListPanel = ({ smsRequests, id }: MessageListPanelProps) => {
-  const [modal, setModal] = useRecoilState($modalByStorage(ModalKey.smsSendModalDialog));
+  const handleControlModal = useSetRecoilState($modalByStorage(ModalKey.smsSendModalDialog));
 
   return (
     <Styled.MessageListPanelContainer>
@@ -68,9 +68,11 @@ const MessageListPanel = ({ smsRequests, id }: MessageListPanelProps) => {
           $size="xs"
           shape="defaultLine"
           onClick={() =>
-            setModal({
-              ...modal,
-              props: { id },
+            handleControlModal({
+              key: ModalKey.smsSendModalDialog,
+              props: {
+                selectedList: [Number(id)],
+              },
               isOpen: true,
             })
           }

diff --git a/src/components/ApplicationDetail/MessageListPanel/MessageListPanel.styled.tsx b/src/components/ApplicationDetail/MessageListPanel/MessageListPanel.styled.tsx
@@ -4,6 +4,9 @@ import { SmsStatus, SmsStatusType } from '@/types/dto/sms';
 
 export const MessageListPanelContainer = styled.div`
   ${({ theme }) => css`
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
     width: 38.4rem;
     height: fit-content;
     padding: 2.4rem;
@@ -13,7 +16,6 @@ export const MessageListPanelContainer = styled.div`
 
     & h3 {
       ${theme.fonts.bold24}
-      margin-bottom: 2rem;
     }
   `}
 `;