Merge branch 'develop' of https://github.com/Team-Tiki/TIKI_CLIENT in…

…to feature/tiki/#371-invite-publishing

apps/client/src/page/archiving/index/ArchivingPage.tsx

@@ -1,17 +1,17 @@
 import { Button, Flex } from '@tiki/ui';
 
-import { Suspense, useEffect } from 'react';
+import { Suspense } from 'react';
 import { useLocation } from 'react-router-dom';
 
 import { contentStyle, pageStyle, timelineStyle } from '@/page/archiving/index/ArchivingPage.style';
 import DateProvider from '@/page/archiving/index/DateProvider';
-import TimeLine, { TimeBlockData } from '@/page/archiving/index/component/TimeLine';
+import TimeLine from '@/page/archiving/index/component/TimeLine';
 import TimeLineHeader from '@/page/archiving/index/component/TimeLine/TimeLineHeader/TimeLineHeader';
 import { useInteractTimeline } from '@/page/archiving/index/hook/common/useInteractTimeline';
+import { Block } from '@/page/archiving/index/type/blockType';
 
 import ContentBox from '@/shared/component/ContentBox/ContentBox';
 import { useInitializeTeamId } from '@/shared/hook/common/useInitializeTeamId';
-import { useDrawerAction } from '@/shared/store/drawer';
 import { useOpenModal } from '@/shared/store/modal';
 
 const ArchivingPage = () => {
@@ -22,27 +22,9 @@ const ArchivingPage = () => {
   const teamId = useInitializeTeamId();
 
   const location = useLocation();
-  const selectedBlockFromDashboard: TimeBlockData = location.state?.selectedBlock;
+  const selectedBlockFromDashboard: Block = location.state?.selectedBlock;
   const finalSelectedBlock = selectedBlockFromDashboard || selectedBlock;
 
-  const { openDrawer } = useDrawerAction();
-
-  useEffect(() => {
-    if (selectedBlockFromDashboard) {
-      /** TODO: 추후 block id에 따른 API 응답으로 데이터 넣기 */
-      openDrawer({
-        title: selectedBlockFromDashboard[0].name!,
-        startDate: new Date('2024-09-13'),
-        endDate: new Date('2024-09-24'),
-        blockType: 'MEETING',
-        color: '#FFE6E8',
-        taggedMembers: [],
-        handoverNotes: [],
-        files: [],
-      });
-    }
-  }, [openDrawer, selectedBlockFromDashboard]);
-
   const handleOpenBlockModal = () => {
     openModal('create-block');
   };
@@ -62,7 +44,6 @@ const ArchivingPage = () => {
             <TimeLineHeader />
             <Flex css={contentStyle}>
               <Suspense>
-                {/** fallback UI 디자인 나올 시에 TimeLine 크기만큼 채워서 Layout 안움직이도록 */}
                 <TimeLine selectedBlock={finalSelectedBlock} onBlockClick={handleBlockClick} />
               </Suspense>
             </Flex>

apps/client/src/page/archiving/index/component/DocumentBar/Selected/Selected.tsx

@@ -6,7 +6,6 @@ import { BLOCK_ICON } from '@/page/archiving/index/constant/icon';
 import { useBlockInfoQuery } from '@/page/archiving/index/hook/api/useBlockInfoQuery';
 import { Block } from '@/page/archiving/index/type/blockType';
 import { DocumentType } from '@/page/archiving/index/type/documentType';
-import { formattingDate } from '@/page/archiving/index/util/date';
 
 import { useInitializeTeamId } from '@/shared/hook/common/useInitializeTeamId';
 
@@ -20,8 +19,8 @@ const Selected = ({ selectedBlock }: SelectedProps) => {
 
   const { data: blockData } = useBlockInfoQuery(teamId, selectedBlock?.timeBlockId ?? 0);
 
-  const startDate = formattingDate(selectedBlock.startDate);
-  const endDate = formattingDate(selectedBlock.endDate);
+  const startDate = selectedBlock.startDate;
+  const endDate = selectedBlock.endDate;
 
   const handleDeleteClick = () => {};
 

apps/client/src/page/archiving/index/component/TimeBlockBar/BlockInfo/BlockInfo.tsx

@@ -1,12 +1,11 @@
 import { DatePicker, Flex, Heading, Input, Text } from '@tiki/ui';
 
 import { periodStyle, titleInputStyle } from '@/page/archiving/index/component/TimeBlockBar/BlockInfo/BlockInfo.style';
-import { formattingDate } from '@/page/archiving/index/util/date';
 
 interface BlockInfoProps {
   title: string;
-  startDate: Date;
-  endDate: Date;
+  startDate: string;
+  endDate: string;
   isEditable: boolean;
 }
 
@@ -23,7 +22,7 @@ const BlockInfo = ({ title, startDate, endDate, isEditable }: BlockInfoProps) =>
         <DatePicker onChange={handleDateChange} variant="range" triggerWidth="100%" />
       ) : (
         <Text tag="body6" css={periodStyle}>
-          {formattingDate(startDate)} ~ {formattingDate(endDate)}
+          {startDate} ~ {endDate}
         </Text>
       )}
     </Flex>

apps/client/src/page/archiving/index/component/TimeBlockModal/component/UploadModal/File/AppendFile/AppendFile.tsx

@@ -10,7 +10,7 @@ import useFile from '@/page/archiving/index/component/TimeBlockModal/hook/common
 
 import { $api } from '@/shared/api/client';
 import { useInitializeTeamId } from '@/shared/hook/common/useInitializeTeamId';
-import { getFileVolume } from '@/shared/util/file';
+import { convertToKB, getFileVolume } from '@/shared/util/file';
 
 interface AppendFileProps {
   selectedFiles: DocumentDetail[];
@@ -63,7 +63,7 @@ const AppendFile = ({ selectedFiles, onUploadFile }: AppendFileProps) => {
             fileName: file.name,
             fileUrl: '',
             fileKey: '',
-            capacity: file.size,
+            capacity: convertToKB(file.size),
           })),
         },
       },
@@ -74,7 +74,7 @@ const AppendFile = ({ selectedFiles, onUploadFile }: AppendFileProps) => {
               documentId: document.documentId,
               name: updatedFiles[index].name,
               url: '',
-              capacity: updatedFiles[index].size,
+              capacity: convertToKB(updatedFiles[index].size),
               createdTime: new Date().toISOString(),
             });
           });

apps/client/src/page/archiving/index/component/TimeLine/index.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { useDateContext } from '@/page/archiving/index/DateProvider';
 import Day from '@/page/archiving/index/component/TimeLine/Day/Day';
 import {
@@ -8,6 +6,7 @@ import {
   entireDayStyle,
 } from '@/page/archiving/index/component/TimeLine/Day/Day.style';
 import TimeBlock from '@/page/archiving/index/component/TimeLine/TimeBlock/TimeBlock';
+import { Block } from '@/page/archiving/index/type/blockType';
 import { alignBlocks, createTimeBlock } from '@/page/archiving/index/util/block';
 
 import { components } from '@/shared/__generated__/schema';
@@ -18,8 +17,8 @@ import { useDrawerIsOpen } from '@/shared/store/drawer';
 export type TimeBlockData = components['schemas']['TimelineGetResponse']['timeBlocks'];
 
 interface TimeLineProps {
-  selectedBlock?: TimeBlockData;
-  onBlockClick?: (e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => void;
+  selectedBlock?: Block;
+  onBlockClick: (e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>, block: Block) => void;
 }
 
 const TimeLine = ({ selectedBlock, onBlockClick }: TimeLineProps) => {
@@ -65,8 +64,8 @@ const TimeLine = ({ selectedBlock, onBlockClick }: TimeLineProps) => {
                 color={block.color!}
                 floor={blockFloors[block.timeBlockId ?? 0]}
                 blockType={block.blockType ?? 'MEETING'}
-                isSelected={!!selectedBlock?.some((selectedBlock) => selectedBlock.timeBlockId === block.timeBlockId)}
-                onBlockClick={(e) => onBlockClick && onBlockClick(e)}>
+                isSelected={selectedBlock?.timeBlockId === block.timeBlockId}
+                onBlockClick={(e) => onBlockClick(e, block)}>
                 {block.name}
               </TimeBlock>
             );

apps/client/src/page/archiving/index/hook/common/useInteractTimeline.ts

@@ -1,15 +1,18 @@
 import { useState } from 'react';
 
-import { TimeBlockData } from '@/page/archiving/index/component/TimeLine';
+import { Block } from '@/page/archiving/index/type/blockType';
 
 import { useDrawerAction } from '@/shared/store/drawer';
 
 export const useInteractTimeline = () => {
-  const [selectedBlock, setSelectedBlock] = useState<TimeBlockData>();
+  const [selectedBlock, setSelectedBlock] = useState<Block>();
 
   const { openDrawer } = useDrawerAction();
 
-  const handleBlockClick = (e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => {
+  const handleBlockClick = (
+    e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>,
+    block: Block
+  ) => {
     e.stopPropagation();
 
     e.currentTarget.scrollIntoView({
@@ -18,13 +21,14 @@ export const useInteractTimeline = () => {
       block: 'center',
     });
 
-    /** TODO: 추후 block id에 따른 API 응답으로 데이터 넣기 */
+    setSelectedBlock(block);
+
     openDrawer({
-      title: 'OT 준비',
-      startDate: new Date('2024.09.13'),
-      endDate: new Date('2024.09.15'),
-      blockType: 'MEETING',
-      color: '#FFE6E8',
+      title: block.name,
+      startDate: block.startDate,
+      endDate: block.endDate,
+      blockType: block.blockType,
+      color: block.color,
       taggedMembers: [],
       handoverNotes: [],
       files: [],

apps/client/src/page/archiving/index/type/blockType.ts

@@ -1,20 +1,5 @@
-import { BlockColor } from './color';
-
-export interface Block {
-  timeBlockId: number;
-  name: string;
-  color: BlockColor;
-  startDate: Date;
-  endDate: Date;
-  blockType: BlockType;
-}
-
-export interface TimeBlockList {
-  success: boolean;
-  message: string;
-  data: {
-    timeBlocks: Block[];
-  };
-}
+import { components } from '@/shared/__generated__/schema';
 
 export type BlockType = 'MEETING' | 'RECRUITING' | 'STUDY' | 'EVENT' | 'NOTICE' | 'ETC';
+
+export type Block = components['schemas']['TimeBlockGetResponse'];

apps/client/src/page/handover/note/component/CreateNote/CreateNote.tsx

@@ -10,24 +10,41 @@ import CreateTemplateNote from '@/page/handover/note/component/CreateNote/Templa
 import { CustomNote, NoteDetailType, TemplateNote } from '@/page/handover/note/type/note';
 
 import { $api } from '@/shared/api/client';
+import { CAUTION } from '@/shared/constant';
 import { PATH } from '@/shared/constant/path';
 import { useInitializeTeamId } from '@/shared/hook/common/useInitializeTeamId';
+import { useCloseModal, useOpenModal } from '@/shared/store/modal';
 
 const CreateNotePage = () => {
   const [selectedTab, setSelectedTab] = useState(0);
-
   const [noteDetail, setNoteDetail] = useState<NoteDetailType>({} as NoteDetailType);
-
   const [templateData, setTemplateData] = useState<TemplateNote>({} as TemplateNote);
-
   const [customData, setCustomData] = useState<CustomNote>({} as CustomNote);
 
   const navigate = useNavigate();
   const teamId = useInitializeTeamId();
 
+  const openModal = useOpenModal();
+  const closeModal = useCloseModal();
+
   const { createToast } = useToastAction();
 
-  const handleTabClick = (tabId: number) => setSelectedTab(tabId);
+  const handleTabClick = (tabId: number) => {
+    openModal('caution', {
+      infoText: CAUTION.NOTE.INFO_TEXT,
+      content: CAUTION.NOTE.CONTENT,
+      desc: CAUTION.NOTE.DESC,
+      footerType: 'caution-modify',
+      onClick: () => {
+        setSelectedTab(+tabId)!;
+        closeModal();
+      },
+      onClose: () => {
+        setSelectedTab(+!tabId)!;
+        closeModal();
+      },
+    });
+  };
 
   const { mutate: templateMutation } = $api.useMutation('post', '/api/v1/notes/template');
   const { mutate: customMutation } = $api.useMutation('post', '/api/v1/notes/free');

apps/client/src/shared/component/CautionModal/CautionModal.style.ts

@@ -0,0 +1,26 @@
+import { css } from '@emotion/react';
+import { theme } from '@tiki/ui';
+
+export const contentStyle = css({
+  fontWeight: '600',
+
+  color: theme.colors.gray_800,
+});
+
+export const descStyle = css({
+  color: theme.colors.gray_800,
+});
+
+export const bodyStyle = css({
+  display: 'flex',
+
+  height: '100%',
+
+  padding: '2rem 0 6rem 0',
+
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+
+  gap: '1.6rem',
+});

apps/client/src/shared/component/CautionModal/CautionModal.tsx

@@ -0,0 +1,37 @@
+import { Text } from '@tiki/ui';
+
+import { bodyStyle, contentStyle, descStyle } from '@/shared/component/CautionModal/CautionModal.style';
+import { Modal } from '@/shared/component/Modal';
+import { useCloseModal } from '@/shared/store/modal';
+
+interface CautionModalProps {
+  infoText: string;
+  content: string;
+  desc: string;
+  footerType: 'caution' | 'caution-modify';
+  onClick: () => void;
+  onClose?: () => void;
+}
+
+const CautionModal = ({ infoText, content, desc = '', footerType, onClick, onClose }: CautionModalProps) => {
+  const modalClose = useCloseModal();
+
+  return (
+    <>
+      <Modal.Header infoText={infoText} />
+      <Modal.Body>
+        <div css={bodyStyle}>
+          <Text tag="body4" css={contentStyle}>
+            {content}
+          </Text>
+          <Text tag="body8" css={descStyle}>
+            {desc}
+          </Text>
+        </div>
+      </Modal.Body>
+      <Modal.Footer contentType={footerType!} buttonClick={onClick} closeModal={onClose ?? modalClose} />
+    </>
+  );
+};
+
+export default CautionModal;

apps/client/src/shared/component/DeletedModal/DeletedModal.tsx

@@ -3,12 +3,14 @@ import { Flex, Text } from '@tiki/ui';
 import { detailStyle, titleStyle } from '@/shared/component/DeletedModal/DeletedModal.style';
 import { Modal } from '@/shared/component/Modal';
 import { DELETED_DETAIL, DELETED_TITLE } from '@/shared/constant';
-import { useCloseModal, useModalData } from '@/shared/store/modal';
+import { isDeletedModalData, useCloseModal, useModalData } from '@/shared/store/modal';
 
 const DeletedModal = () => {
   const closeModal = useCloseModal();
   const modalData = useModalData();
 
+  if (!isDeletedModalData(modalData)) return null;
+
   const itemType = modalData?.itemType;
   const title = itemType && DELETED_TITLE[itemType.toUpperCase() as keyof typeof DELETED_TITLE];
 

apps/client/src/shared/component/Modal/Footer/ModalFooter.tsx

@@ -88,7 +88,10 @@ const ModalFooterButtons = (
     case 'member-tag':
     case 'activity-tag':
       return [createButton('취소', closeModal, 'outline'), createButton('완료', buttonClick, 'primary')];
-
+    case 'caution':
+      return [createButton('취소', closeModal, 'outline'), createButton('삭제', buttonClick, 'primary')];
+    case 'caution-modify':
+      return [createButton('취소', closeModal, 'outline'), createButton('확인', buttonClick, 'primary')];
     default:
       return [];
   }