Merge branch 'dev' of https://github.com/sopt-makers/sopt-operation-f…

…rontend into feature-org-magic-button
sopt-makers · Jan 16, 2025 · 40d51a9 · 40d51a9
2 parents 308f744 + 2abe938
commit 40d51a9
Show file tree

Hide file tree

Showing 16 changed files with 322 additions and 138 deletions.
diff --git a/package.json b/package.json
@@ -23,7 +23,7 @@
     "@sopt-makers/colors": "^3.0.1",
     "@sopt-makers/fonts": "^2.0.1",
     "@sopt-makers/icons": "^1.0.4",
-    "@sopt-makers/ui": "2.7.15",
+    "@sopt-makers/ui": "2.8.6",
     "axios": "^1.3.4",
     "dayjs": "^1.11.9",
     "eslint-config-next": "^14.1.4",

diff --git a/src/components/alarmAdmin/AlarmList/index.tsx b/src/components/alarmAdmin/AlarmList/index.tsx
@@ -1,3 +1,5 @@
+import { Tag } from '@sopt-makers/ui';
+import { Tab } from '@sopt-makers/ui';
 import dayjs from 'dayjs';
 import { useState } from 'react';
 
@@ -8,11 +10,9 @@ import Modal from '@/components/common/modal';
 import { deleteAlarm } from '@/services/api/alarm';
 import { ALARM_STATUS_LIST } from '@/utils/alarm';
 import { alarmStatusTranslator } from '@/utils/translator';
-import { Tag } from '@sopt-makers/ui';
 
 import ShowAlarmModal from '../ShowAlarmModal';
 import { StListItem, StPageHeader } from './style';
-import { Tab } from '@sopt-makers/ui';
 
 interface Props {
   alarmList: Alarm[];

diff --git a/src/components/alarmAdmin/CreateAlarmModal/index.tsx b/src/components/alarmAdmin/CreateAlarmModal/index.tsx
@@ -1,12 +1,11 @@
 import 'react-datepicker/dist/react-datepicker.css';
 
-import { IconLink } from '@sopt-makers/icons';
+import { IconLink, IconXClose } from '@sopt-makers/icons';
 import { Button, Chip, SelectV2, TextArea, TextField } from '@sopt-makers/ui';
-import loadConfig from 'next/dist/server/config';
 import { ChangeEvent, useState } from 'react';
 import DatePicker from 'react-datepicker';
 
-import { IcDeleteFile, IcUpload } from '@/assets/icons';
+import { IcDeleteFile } from '@/assets/icons';
 import ModalFooter from '@/components/common/modal/ModalFooter';
 import ModalHeader from '@/components/common/modal/ModalHeader';
 import { createReserveAlarm, sendAlarm } from '@/services/api/alarm';
@@ -135,7 +134,7 @@ function CreateAlarmModal(props: Props) {
     if (sendType === 'RESERVE' && bannedTimeList.includes(selectedTime))
       return true;
 
-    if (selectedTarget === 'CSV 첨부' && targetList.length > 0) return true;
+    if (selectedTarget === 'CSV 첨부' && targetList.length === 0) return true;
 
     return false;
   };
@@ -162,10 +161,25 @@ function CreateAlarmModal(props: Props) {
         setTargetList(userIds);
       } catch (error) {
         console.error('파일을 읽는데 실패했습니다.', error);
+        setUploadedFile(null);
+        setTargetList([]);
+        if (e.target) {
+          e.target.value = '';
+        }
       }
     }
   };
 
+  const handleClickCancelButton = () => {
+    if (
+      confirm(
+        '알림 생성 모달을 종료하면 작성된 내용이 모두 사라져요. 그래도 삭제하시겠어요?',
+      )
+    ) {
+      onClose();
+    }
+  };
+
   // 발송 / 예약하기 버튼 눌렀을 때 API 요청 쏘는 함수
   const handleClickCompleteButton = async () => {
     const commonPayload: AlarmData = {
@@ -207,7 +221,11 @@ function CreateAlarmModal(props: Props) {
 
   return (
     <StAlarmModalWrapper>
-      <ModalHeader title={modalTitle} desc={modalDesc} onClose={onClose} />
+      <ModalHeader
+        title={modalTitle}
+        desc={modalDesc}
+        onClose={handleClickCancelButton}
+      />
       <main>
         <SelectWrapper>
           <LabeledComponent labelText="발송 대상">
@@ -254,7 +272,19 @@ function CreateAlarmModal(props: Props) {
                 {uploadedFile ? (
                   <div className="uploaded">
                     <span>{uploadedFile.name}</span>
-                    <IcDeleteFile onClick={() => setUploadedFile(null)} />
+                    <Button
+                      onClick={() => setUploadedFile(null)}
+                      theme="black"
+                      size="sm"
+                      css={{
+                        padding: '8px',
+                        '& > span': {
+                          width: '24px',
+                          height: '24px',
+                        },
+                      }}>
+                      <IconXClose style={{ width: '24px', height: '24px' }} />
+                    </Button>
                   </div>
                 ) : (
                   <>
@@ -405,7 +435,11 @@ function CreateAlarmModal(props: Props) {
         </AttachWrapper>
       </main>
       <ModalFooter>
-        <Button size="lg" type="button" onClick={onClose} theme="black">
+        <Button
+          size="lg"
+          type="button"
+          onClick={handleClickCancelButton}
+          theme="black">
           취소하기
         </Button>
         <Button

diff --git a/src/components/org/OrgAdmin/CommonSection/style.ts b/src/components/org/OrgAdmin/CommonSection/style.ts
@@ -145,7 +145,7 @@ export const StSubColorTitle = styled(StInputLabel)`
 `;
 
 export const StSubColorDescription = styled.p`
-  ${fontsObject.LABEL_4_12_SB}
+  ${fontsObject.LABEL_3_14_SB}
 
   margin-bottom: 8px;
   color: ${colors.gray300};

diff --git a/src/components/org/OrgAdmin/HomeSection/Modal.style.ts b/src/components/org/OrgAdmin/HomeSection/Modal.style.ts
@@ -3,33 +3,6 @@ import { colors } from '@sopt-makers/colors';
 import { fontsObject } from '@sopt-makers/fonts';
 import { Button } from '@sopt-makers/ui';
 
-export const StModalContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-
-  padding: 24px;
-
-  & > h2 {
-    ${fontsObject.TITLE_4_20_SB};
-    color: ${colors.gray10};
-  }
-
-  & > p {
-    ${fontsObject.BODY_2_16_R};
-    color: ${colors.gray100};
-  }
-`;
-
-export const StModalBtnWrapper = styled.div`
-  place-self: end;
-
-  display: flex;
-  gap: 12px;
-
-  padding-top: 24px;
-`;
-
 export const StCancelButton = styled(Button)`
   background-color: ${colors.gray600};
   color: ${colors.white};
@@ -39,17 +12,6 @@ export const StCancelButton = styled(Button)`
   }
 `;
 
-export const StActionButton = styled(Button)<{ btntype: 'add' | 'delete' }>`
-  color: ${(props) => (props.btntype === 'add' ? colors.black : colors.white)};
-
-  background-color: ${(props) =>
-    props.btntype === 'add' ? colors.white : colors.error};
-
-  &:disabled {
-    cursor: default;
-  }
-`;
-
 export const StAddButton = styled(Button)`
   background-color: ${colors.white};
   color: ${colors.black};

diff --git a/src/components/org/OrgAdmin/HomeSection/Modal.tsx b/src/components/org/OrgAdmin/HomeSection/Modal.tsx
@@ -1,23 +1,22 @@
 'use client';
 
-import { CheckBox, TextField } from '@sopt-makers/ui';
-import { HTMLAttributes, useState } from 'react';
+import { TextField } from '@sopt-makers/ui';
+import { useState } from 'react';
 import { useFormContext } from 'react-hook-form';
 
 import Modal from '@/components/common/modal';
 import ImageInput from '@/components/org/OrgAdmin/HomeSection/ImageInput';
 import {
-  StActionButton,
   StAddButton,
   StAddModalBtnWrapper,
   StAddModalContainer,
   StCancelButton,
-  StModalBtnWrapper,
-  StModalContainer,
 } from '@/components/org/OrgAdmin/HomeSection/Modal.style';
 import { useAddNewsMutation } from '@/components/org/OrgAdmin/HomeSection/queries';
 import { useBooleanState } from '@/hooks/useBooleanState';
 
+import { ActionModal } from '../common/ActionModal';
+
 /** 최신 소식 추가 모달 */
 type AddNewsModalProps = {
   isOpen: boolean;
@@ -96,7 +95,6 @@ export const AddNewsModal = ({ isOpen, onCancel }: AddNewsModalProps) => {
 
         {isConfirmModalOpen && (
           <ActionModal
-            id="add news"
             variant="add"
             isOpen={isConfirmModalOpen}
             onCancel={closeConfirmModal}
@@ -109,50 +107,3 @@ export const AddNewsModal = ({ isOpen, onCancel }: AddNewsModalProps) => {
     )
   );
 };
-
-interface ActionModalProps extends Omit<HTMLAttributes<HTMLDivElement>, 'id'> {
-  isOpen: boolean;
-  onCancel?: () => void;
-  onAction?: () => void;
-  id?: number | string;
-  variant: 'add' | 'delete';
-  alertText: string;
-  description?: string;
-}
-
-export const ActionModal = ({
-  isOpen,
-  onCancel,
-  onAction,
-  variant,
-  alertText,
-  description,
-}: ActionModalProps) => {
-  const [checked, setChecked] = useState(false);
-
-  return (
-    isOpen && (
-      <Modal>
-        <StModalContainer>
-          <h2>{alertText}</h2>
-          <p>{description}</p>
-
-          <CheckBox
-            label="확인했어요."
-            checked={checked}
-            onChange={() => setChecked((prev) => !prev)}
-          />
-          <StModalBtnWrapper>
-            <StCancelButton onClick={onCancel}>취소</StCancelButton>
-            <StActionButton
-              btntype={variant}
-              disabled={!checked}
-              onClick={onAction}>
-              {variant === 'add' ? '추가' : '삭제'}
-            </StActionButton>
-          </StModalBtnWrapper>
-        </StModalContainer>
-      </Modal>
-    )
-  );
-};
diff --git a/src/components/org/OrgAdmin/HomeSection/NewsSection.tsx b/src/components/org/OrgAdmin/HomeSection/NewsSection.tsx
@@ -2,10 +2,7 @@ import { IconInfoCircle, IconPlus } from '@sopt-makers/icons';
 import { Button } from '@sopt-makers/ui';
 import { useState } from 'react';
 
-import {
-  ActionModal,
-  AddNewsModal,
-} from '@/components/org/OrgAdmin/HomeSection/Modal';
+import { AddNewsModal } from '@/components/org/OrgAdmin/HomeSection/Modal';
 import NewsItem from '@/components/org/OrgAdmin/HomeSection/NewsItem';
 import { useDeleteNewsMutation } from '@/components/org/OrgAdmin/HomeSection/queries';
 import {
@@ -21,6 +18,7 @@ import {
 import { useBooleanState } from '@/hooks/useBooleanState';
 
 import RequiredIcon from '../assets/RequiredIcon';
+import { ActionModal } from '../common/ActionModal';
 import Modal from '../common/Modal';
 import useModal from '../common/Modal/useModal';
 

diff --git a/src/components/org/OrgAdmin/MyDropzone/index.tsx b/src/components/org/OrgAdmin/MyDropzone/index.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { type MouseEvent, useCallback, useState } from 'react';
+import { type MouseEvent, useCallback, useEffect, useState } from 'react';
 import { useDropzone } from 'react-dropzone';
 import type { UseFormReturn } from 'react-hook-form';
 
@@ -33,6 +33,7 @@ const MyDropzone = ({
   const {
     register,
     setValue,
+    watch,
     formState: { errors },
   } = method;
 
@@ -57,7 +58,7 @@ const MyDropzone = ({
           setPreviewUrl(reader.result as string);
           setValue(
             label,
-            { fileName: sanitizedFileName, file },
+            { fileName: sanitizedFileName, file, previewUrl: reader.result },
             { shouldValidate: true },
           );
         };
@@ -80,6 +81,14 @@ const MyDropzone = ({
     },
   });
 
+  useEffect(() => {
+    const storedData = watch(label);
+
+    if (storedData?.previewUrl) {
+      setPreviewUrl(storedData.previewUrl);
+    }
+  }, [label, watch]);
+
   return (
     <StImgButtonWrapper>
       <StImgButton