diff --git a/src/common/asset/svg/ic_activity_tag.svg b/src/common/asset/svg/ic_activity_tag.svg new file mode 100644 index 00000000..0bf5a532 --- /dev/null +++ b/src/common/asset/svg/ic_activity_tag.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/common/asset/svg/ic_block_create.svg b/src/common/asset/svg/ic_block_create.svg new file mode 100644 index 00000000..5f7da877 --- /dev/null +++ b/src/common/asset/svg/ic_block_create.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/common/asset/svg/ic_calendar_tag.svg b/src/common/asset/svg/ic_calendar_tag.svg new file mode 100644 index 00000000..b2406f93 --- /dev/null +++ b/src/common/asset/svg/ic_calendar_tag.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/common/asset/svg/ic_event_circle.svg b/src/common/asset/svg/ic_event_circle.svg deleted file mode 100644 index e3ee1d32..00000000 --- a/src/common/asset/svg/ic_event_circle.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - - - - diff --git a/src/common/asset/svg/ic_event_gray.svg b/src/common/asset/svg/ic_event_gray.svg new file mode 100644 index 00000000..3dc8be5e --- /dev/null +++ b/src/common/asset/svg/ic_event_gray.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/common/asset/svg/ic_file_delete.svg b/src/common/asset/svg/ic_file_delete.svg index 555a3e43..e7f78b97 100644 --- a/src/common/asset/svg/ic_file_delete.svg +++ b/src/common/asset/svg/ic_file_delete.svg @@ -1,3 +1,3 @@ - - + + diff --git a/src/common/asset/svg/ic_file_preview.svg b/src/common/asset/svg/ic_file_preview.svg new file mode 100644 index 00000000..28780547 --- /dev/null +++ b/src/common/asset/svg/ic_file_preview.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/common/asset/svg/ic_invite.svg b/src/common/asset/svg/ic_invite.svg new file mode 100644 index 00000000..a34cfa7b --- /dev/null +++ b/src/common/asset/svg/ic_invite.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/common/asset/svg/ic_invite_delete.svg b/src/common/asset/svg/ic_invite_delete.svg new file mode 100644 index 00000000..a6c49cb0 --- /dev/null +++ b/src/common/asset/svg/ic_invite_delete.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/common/asset/svg/ic_invite_profile.svg b/src/common/asset/svg/ic_invite_profile.svg new file mode 100644 index 00000000..b9b54f8c --- /dev/null +++ b/src/common/asset/svg/ic_invite_profile.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/common/asset/svg/ic_meeting_circle.svg b/src/common/asset/svg/ic_meeting_circle.svg deleted file mode 100644 index e8c0d897..00000000 --- a/src/common/asset/svg/ic_meeting_circle.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/src/common/asset/svg/ic_meeting_gray.svg b/src/common/asset/svg/ic_meeting_gray.svg new file mode 100644 index 00000000..d80accfe --- /dev/null +++ b/src/common/asset/svg/ic_meeting_gray.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/common/asset/svg/ic_member_tag.svg b/src/common/asset/svg/ic_member_tag.svg new file mode 100644 index 00000000..0bf5a532 --- /dev/null +++ b/src/common/asset/svg/ic_member_tag.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/common/asset/svg/ic_notice_circle.svg b/src/common/asset/svg/ic_notice_circle.svg deleted file mode 100644 index f95c22b5..00000000 --- a/src/common/asset/svg/ic_notice_circle.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/src/common/asset/svg/ic_notice_gray.svg b/src/common/asset/svg/ic_notice_gray.svg new file mode 100644 index 00000000..f17811bf --- /dev/null +++ b/src/common/asset/svg/ic_notice_gray.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/common/asset/svg/ic_recruiting_gray.svg b/src/common/asset/svg/ic_recruiting_gray.svg new file mode 100644 index 00000000..f583fb0b --- /dev/null +++ b/src/common/asset/svg/ic_recruiting_gray.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/common/asset/svg/ic_study_circle.svg b/src/common/asset/svg/ic_study_circle.svg deleted file mode 100644 index 41761ee0..00000000 --- a/src/common/asset/svg/ic_study_circle.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - diff --git a/src/common/asset/svg/ic_study_gray.svg b/src/common/asset/svg/ic_study_gray.svg new file mode 100644 index 00000000..337a8edb --- /dev/null +++ b/src/common/asset/svg/ic_study_gray.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/common/asset/svg/ic_team_profile_add.svg b/src/common/asset/svg/ic_team_profile_add.svg index 5190041d..79159526 100644 --- a/src/common/asset/svg/ic_team_profile_add.svg +++ b/src/common/asset/svg/ic_team_profile_add.svg @@ -1,4 +1,4 @@ - - - + + + diff --git a/src/common/asset/svg/ic_team_profile_delete.svg b/src/common/asset/svg/ic_team_profile_delete.svg index fe12e390..b3761b59 100644 --- a/src/common/asset/svg/ic_team_profile_delete.svg +++ b/src/common/asset/svg/ic_team_profile_delete.svg @@ -1,4 +1,4 @@ - - - + + + diff --git a/src/common/asset/svg/ic_upload_file.svg b/src/common/asset/svg/ic_upload_file.svg new file mode 100644 index 00000000..ca0a9f21 --- /dev/null +++ b/src/common/asset/svg/ic_upload_file.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/common/asset/svg/ic_warning.svg b/src/common/asset/svg/ic_warning.svg new file mode 100644 index 00000000..8d6c0b2a --- /dev/null +++ b/src/common/asset/svg/ic_warning.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/common/asset/svg/ic_workspace_success.svg b/src/common/asset/svg/ic_workspace_success.svg new file mode 100644 index 00000000..72b1fd27 --- /dev/null +++ b/src/common/asset/svg/ic_workspace_success.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/common/component/CommandButton/CommandButton.style.ts b/src/common/component/CommandButton/CommandButton.style.ts index c7171449..13f15bc1 100644 --- a/src/common/component/CommandButton/CommandButton.style.ts +++ b/src/common/component/CommandButton/CommandButton.style.ts @@ -72,7 +72,7 @@ export const childrenStyle = css({ display: 'flex', alignItems: 'center', - padding: '0.4rem', + //padding: '0.4rem', gap: '0.4rem', }); diff --git a/src/common/component/Modal/Body/ModalBody.style.ts b/src/common/component/Modal/Body/ModalBody.style.ts new file mode 100644 index 00000000..311cf8d4 --- /dev/null +++ b/src/common/component/Modal/Body/ModalBody.style.ts @@ -0,0 +1,8 @@ +import { css } from '@emotion/react'; + +export const containerStyle = css({ + width: '100%', + height: '100%', + + paddingTop: '2rem', +}); diff --git a/src/common/component/Modal/Body/ModalBody.tsx b/src/common/component/Modal/Body/ModalBody.tsx new file mode 100644 index 00000000..8811a06f --- /dev/null +++ b/src/common/component/Modal/Body/ModalBody.tsx @@ -0,0 +1,15 @@ +import { ReactNode } from 'react'; + +import Flex from '@/common/component/Flex/Flex'; + +interface ModalBodyProps { + children: ReactNode; +} + +const ModalBody = ({ children }: ModalBodyProps) => ( + + {children} + +); + +export default ModalBody; diff --git a/src/common/component/Modal/Footer/ModalFooter.tsx b/src/common/component/Modal/Footer/ModalFooter.tsx new file mode 100644 index 00000000..8e3dc96c --- /dev/null +++ b/src/common/component/Modal/Footer/ModalFooter.tsx @@ -0,0 +1,35 @@ +import Button from '@/common/component/Button/Button'; +import Flex from '@/common/component/Flex/Flex'; + +import { useCloseModal, useModalContentType } from '@/shared/store/modal'; +import { getFooterContent } from '@/shared/util/modalFooter'; + +interface ModalFooterProps { + step?: number; + buttonClick?: () => void; + isButtonActive?: boolean; +} + +const ModalFooter = ({ step, buttonClick, isButtonActive }: ModalFooterProps) => { + const contentType = useModalContentType(); + const closeModal = useCloseModal(); + const footerButtons = getFooterContent(contentType!, step!, buttonClick, closeModal, isButtonActive); + + return ( + + {footerButtons.map((button, index) => ( + + ))} + + ); +}; + +export default ModalFooter; diff --git a/src/common/component/Modal/Header/ModalHeader.style.ts b/src/common/component/Modal/Header/ModalHeader.style.ts new file mode 100644 index 00000000..f83d4af5 --- /dev/null +++ b/src/common/component/Modal/Header/ModalHeader.style.ts @@ -0,0 +1,21 @@ +import { css } from '@emotion/react'; + +import { theme } from '@/common/style/theme/theme'; + +export const infoTextStyle = css({ + color: theme.colors.gray_800, +}); + +export const iconTextStyle = css({ + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + + width: '4rem', + height: '4rem', + + fontWeight: 500, + color: theme.colors.gray_800, + + textAlign: 'center', +}); diff --git a/src/common/component/Modal/Header/ModalHeader.tsx b/src/common/component/Modal/Header/ModalHeader.tsx new file mode 100644 index 00000000..da78432f --- /dev/null +++ b/src/common/component/Modal/Header/ModalHeader.tsx @@ -0,0 +1,38 @@ +import Flex from '@/common/component/Flex/Flex'; +import { iconTextStyle, infoTextStyle } from '@/common/component/Modal/Header/ModalHeader.style'; +import Text from '@/common/component/Text/Text'; + +import { useModalContentType } from '@/shared/store/modal'; +import { getHeaderContent } from '@/shared/util/modalHeader'; + +interface ModalHeaderProps { + step?: number; + totalSteps?: number; +} + +const ModalHeader = ({ step, totalSteps = 4 }: ModalHeaderProps) => { + const contentType = useModalContentType(); + const { icon, title, infoText } = getHeaderContent(contentType!, step, totalSteps); + + return ( + + {icon && ( + + {icon} + + )} + + + {title} + + {infoText && ( + + {infoText} + + )} + + + ); +}; + +export default ModalHeader; diff --git a/src/common/component/Modal/Modal.style.ts b/src/common/component/Modal/Wrapper/ModalWrapper.style.ts similarity index 78% rename from src/common/component/Modal/Modal.style.ts rename to src/common/component/Modal/Wrapper/ModalWrapper.style.ts index 136a84cb..02ee6436 100644 --- a/src/common/component/Modal/Modal.style.ts +++ b/src/common/component/Modal/Wrapper/ModalWrapper.style.ts @@ -7,29 +7,37 @@ export const backgroundStyle = css({ display: 'flex', justifyContent: 'center', alignItems: 'center', + position: 'fixed', top: 0, left: 0, zIndex: theme.zIndex.overlayHigh, + width: '100vw', height: '100vh', + backgroundColor: 'rgba(0, 0, 0, 0.5)', animation: `${fadeIn} 0.2s ease-in`, }); export const dialogStyle = css({ - display: 'block', + display: 'flex', + flexDirection: 'column', + justifyContent: 'space-between', + position: 'fixed', top: '50%', left: '50%', - width: '51.1rem', - zIndex: theme.zIndex.overlayTop, - paddingTop: '4.8rem', - paddingBottom: '4.8rem', - borderRadius: '16px', + + width: '37.6rem', + height: '55.4rem', + + padding: '2rem 2rem 3.2rem 2rem', + borderRadius: '8px', border: 'none', outline: 'none', + background: theme.colors.white, transform: 'translate(-50%, -50%)', }); diff --git a/src/common/component/Modal/Modal.tsx b/src/common/component/Modal/Wrapper/ModalWrapper.tsx similarity index 90% rename from src/common/component/Modal/Modal.tsx rename to src/common/component/Modal/Wrapper/ModalWrapper.tsx index 9406b806..e61ed184 100644 --- a/src/common/component/Modal/Modal.tsx +++ b/src/common/component/Modal/Wrapper/ModalWrapper.tsx @@ -4,7 +4,7 @@ import { ReactNode, useCallback, useEffect } from 'react'; import { createPortal } from 'react-dom'; -import { backgroundStyle, dialogStyle } from '@/common/component/Modal/Modal.style'; +import { backgroundStyle, dialogStyle } from '@/common/component/Modal/Wrapper/ModalWrapper.style'; interface ModalProps { isOpen: boolean; @@ -12,7 +12,7 @@ interface ModalProps { onClose?: () => void; } -const Modal = ({ isOpen, children, onClose }: ModalProps) => { +const ModalWrapper = ({ isOpen, children, onClose }: ModalProps) => { const handleKeyDown = useCallback( (e: KeyboardEvent) => { if (e.key === 'Escape') { @@ -52,4 +52,4 @@ const Modal = ({ isOpen, children, onClose }: ModalProps) => { ); }; -export default Modal; +export default ModalWrapper; diff --git a/src/common/component/Modal/index.tsx b/src/common/component/Modal/index.tsx new file mode 100644 index 00000000..eaf7385d --- /dev/null +++ b/src/common/component/Modal/index.tsx @@ -0,0 +1,10 @@ +import ModalBody from '@/common/component/Modal/Body/ModalBody'; +import ModalFooter from '@/common/component/Modal/Footer/ModalFooter'; +import ModalHeader from '@/common/component/Modal/Header/ModalHeader'; +import ModalWrapper from '@/common/component/Modal/Wrapper/ModalWrapper'; + +export const Modal = Object.assign(ModalWrapper, { + Header: ModalHeader, + Body: ModalBody, + Footer: ModalFooter, +}); diff --git a/src/page/archiving/index/component/DocumentBar/Item/Item.tsx b/src/page/archiving/index/component/DocumentBar/Item/Item.tsx index 32eb1834..05cfbdc3 100644 --- a/src/page/archiving/index/component/DocumentBar/Item/Item.tsx +++ b/src/page/archiving/index/component/DocumentBar/Item/Item.tsx @@ -1,6 +1,5 @@ /* eslint-disable jsx-a11y/click-events-have-key-events */ import { ReactNode } from 'react'; -import { useLocation } from 'react-router-dom'; import TrashBox from '@/common/asset/svg/ic_delete.svg?react'; import Download from '@/common/asset/svg/ic_download.svg?react'; @@ -10,8 +9,6 @@ import Text from '@/common/component/Text/Text'; import { containerStyle, fileNameStyle } from '@/page/archiving/index/component/DocumentBar/Item/Item.style'; import { downloadDocument } from '@/page/archiving/index/util/document'; -import { useOpenModal } from '@/shared/store/modal'; - interface ItemProps { documentId: number; children?: ReactNode; @@ -21,13 +18,7 @@ interface ItemProps { fileName: string; } -const Item = ({ documentId, children, fileUrl, fileName }: ItemProps) => { - const location = useLocation(); - const searchParams = new URLSearchParams(location.search); - const teamId = searchParams.get('teamId'); - - const openModal = useOpenModal(); - +const Item = ({ children, fileUrl, fileName }: ItemProps) => { const onClickDocumentItem = () => { window.open(fileUrl); }; @@ -39,8 +30,6 @@ const Item = ({ documentId, children, fileUrl, fileName }: ItemProps) => { const handleTrashBoxClick = (e: React.MouseEvent) => { e.stopPropagation(); - - openModal('delete', { teamId: +teamId!, itemId: documentId, itemType: 'docs' }); }; return ( diff --git a/src/page/archiving/index/component/DocumentBar/Selected/Selected.tsx b/src/page/archiving/index/component/DocumentBar/Selected/Selected.tsx index b7f1c433..c63e76d9 100644 --- a/src/page/archiving/index/component/DocumentBar/Selected/Selected.tsx +++ b/src/page/archiving/index/component/DocumentBar/Selected/Selected.tsx @@ -14,8 +14,6 @@ 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 { useOpenModal } from '@/shared/store/modal'; - interface SelectedProps { selectedBlock: Block; onClose: () => void; @@ -32,12 +30,6 @@ const Selected = ({ selectedBlock }: SelectedProps) => { const startDate = formattingDate(selectedBlock.startDate); const endDate = formattingDate(selectedBlock.endDate); - const openModal = useOpenModal(); - - const handleDeleteClick = () => { - openModal('delete', { teamId: +teamId!, itemId: selectedBlock.timeBlockId, itemType: 'block' }); - }; - return ( {BLOCK_ICON.find((icon) => icon.name === selectedBlock.blockType)?.icon?.(selectedBlock.color)} @@ -45,7 +37,7 @@ const Selected = ({ selectedBlock }: SelectedProps) => { {selectedBlock.name} - diff --git a/src/page/archiving/index/component/TimeBlockModal/component/Block/BlockModal.style.ts b/src/page/archiving/index/component/TimeBlockModal/component/Block/BlockModal.style.ts index 916c8f21..37e09812 100644 --- a/src/page/archiving/index/component/TimeBlockModal/component/Block/BlockModal.style.ts +++ b/src/page/archiving/index/component/TimeBlockModal/component/Block/BlockModal.style.ts @@ -18,6 +18,5 @@ export const buttonStyle = (isActive: boolean) => }); export const textStyle = css({ - color: theme.colors.gray_700, - fontWeight: 400, + color: theme.colors.gray_500, }); diff --git a/src/page/archiving/index/component/TimeBlockModal/component/Block/BlockModal.tsx b/src/page/archiving/index/component/TimeBlockModal/component/Block/BlockModal.tsx index da186716..0165d2cc 100644 --- a/src/page/archiving/index/component/TimeBlockModal/component/Block/BlockModal.tsx +++ b/src/page/archiving/index/component/TimeBlockModal/component/Block/BlockModal.tsx @@ -1,20 +1,16 @@ import { useState } from 'react'; -import Button from '@/common/component/Button/Button'; +import DatePicker from '@/common/component/DatePicker'; import Flex from '@/common/component/Flex/Flex'; import Input from '@/common/component/Input/Input'; +import { Modal } from '@/common/component/Modal'; import Text from '@/common/component/Text/Text'; -import { - buttonStyle, - textStyle, -} from '@/page/archiving/index/component/TimeBlockModal/component/Block/BlockModal.style'; -import BlockDate from '@/page/archiving/index/component/TimeBlockModal/component/Block/Date/BlockDate'; +import { textStyle } from '@/page/archiving/index/component/TimeBlockModal/component/Block/BlockModal.style'; import BlockIcon from '@/page/archiving/index/component/TimeBlockModal/component/Block/Icon/BlockIcon'; import BlockBox from '@/page/archiving/index/component/TimeBlockModal/component/Box/BlockBox'; import { BLOCK_ICON } from '@/page/archiving/index/component/TimeBlockModal/constant/iconBlock'; -import WorkSapceInfo from '@/shared/component/WorkSpaceModal/info/WorkSpaceInfo'; import { useBlockContext } from '@/shared/hook/common/useBlockContext'; interface BlockModalProps { @@ -23,7 +19,6 @@ interface BlockModalProps { const BlockModal = ({ isVisible }: BlockModalProps) => { const [selectedIcon, setSelectedIcon] = useState(-1); - const [isDateRangeValid, setIsDateRangeValid] = useState(false); const { formData, setFormData, nextStep } = useBlockContext(); @@ -33,12 +28,7 @@ const BlockModal = ({ isVisible }: BlockModalProps) => { } }; - const isButtonActive = - formData.blockName.trim() !== '' && - selectedIcon !== -1 && - formData.startDate.length === 10 && - formData.endDate.length === 10 && - isDateRangeValid; + const isButtonActive = formData.blockName.trim() !== '' && selectedIcon !== -1; const handleNext = () => { if (isButtonActive) { @@ -55,63 +45,42 @@ const BlockModal = ({ isVisible }: BlockModalProps) => { if (!isVisible) return null; return ( - - - - - - + <> + + + + + + - - - - - {formData.blockName.length} / 25 - - - + + + + + {formData.blockName.length} / 25 + + + - - - setFormData({ startDate: date })} - onSetEndDate={(date) => setFormData({ endDate: date })} - onSetIsDateRangeValid={setIsDateRangeValid} - /> - - - - - + + + + + + + ); }; diff --git a/src/page/archiving/index/component/TimeBlockModal/component/Block/Date/BlockDate.style.ts b/src/page/archiving/index/component/TimeBlockModal/component/Block/Date/BlockDate.style.ts deleted file mode 100644 index c837bdec..00000000 --- a/src/page/archiving/index/component/TimeBlockModal/component/Block/Date/BlockDate.style.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { css } from '@emotion/react'; - -import { theme } from '@/common/style/theme/theme'; - -export const textStyle = css({ - color: theme.colors.gray_500, - fontSize: '2rem', -}); - -export const supportStyle = css({ - marginTop: '0.8rem', - ...theme.text.body07, - fontWeight: 400, -}); diff --git a/src/page/archiving/index/component/TimeBlockModal/component/Block/Date/BlockDate.tsx b/src/page/archiving/index/component/TimeBlockModal/component/Block/Date/BlockDate.tsx deleted file mode 100644 index 2c6b594e..00000000 --- a/src/page/archiving/index/component/TimeBlockModal/component/Block/Date/BlockDate.tsx +++ /dev/null @@ -1,67 +0,0 @@ -import { css } from '@emotion/react'; - -import Flex from '@/common/component/Flex/Flex'; -import Input from '@/common/component/Input/Input'; -import SupportingText from '@/common/component/SupportingText/SupportingText'; - -import { - supportStyle, - textStyle, -} from '@/page/archiving/index/component/TimeBlockModal/component/Block/Date/BlockDate.style'; -import useDateRange from '@/page/archiving/index/component/TimeBlockModal/hook/common/useDateRange'; - -interface BlockDateProps { - startDate: string; - endDate: string; - onSetStartDate: (date: string) => void; - onSetEndDate: (date: string) => void; - onSetIsDateRangeValid: (isValid: boolean) => void; -} - -const BlockDate = ({ startDate, endDate, onSetStartDate, onSetEndDate, onSetIsDateRangeValid }: BlockDateProps) => { - const { dates, validation, handleChange } = useDateRange( - startDate, - endDate, - (date: string) => onSetStartDate(date), - (date: string) => onSetEndDate(date), - onSetIsDateRangeValid - ); - - const inputStyle = (value: string) => css` - text-align: ${value.length === 10 ? 'center' : 'left'}; - `; - - return ( - <> - -

~

- handleChange('endDate', e.target.value, validation.isStartDateValid, false)} - maxLength={10} - isError={validation.isEndDateError} - /> - - -
- {(validation.isStartDateError || validation.isEndDateError) && ( - - {validation.errorMessage} - - )} -
- - ); -}; - -export default BlockDate; diff --git a/src/page/archiving/index/component/TimeBlockModal/component/Block/Icon/BlockIcon.style.ts b/src/page/archiving/index/component/TimeBlockModal/component/Block/Icon/BlockIcon.style.ts index c46b957b..a5d2329c 100644 --- a/src/page/archiving/index/component/TimeBlockModal/component/Block/Icon/BlockIcon.style.ts +++ b/src/page/archiving/index/component/TimeBlockModal/component/Block/Icon/BlockIcon.style.ts @@ -7,15 +7,16 @@ export const iconStyle = css({ justifyContent: 'center', alignItems: 'center', - width: '5rem', - height: '5rem', + width: '4rem', + height: '4rem', borderRadius: '100%', - border: `1.2px solid ${theme.colors.gray_400}`, overflow: 'hidden', cursor: 'pointer', + backgroundColor: theme.colors.gray_100, + '&:hover': { backgroundColor: theme.colors.blue_100, }, @@ -32,5 +33,7 @@ export const boxStyle = css({ justifyContent: 'center', flexDirection: 'row', + width: '100%', + gap: '1.2rem', }); diff --git a/src/page/archiving/index/component/TimeBlockModal/component/Box/BlockBox.style.ts b/src/page/archiving/index/component/TimeBlockModal/component/Box/BlockBox.style.ts deleted file mode 100644 index e69de29b..00000000 diff --git a/src/page/archiving/index/component/TimeBlockModal/component/Box/BlockBox.tsx b/src/page/archiving/index/component/TimeBlockModal/component/Box/BlockBox.tsx index 34e649bc..89824c64 100644 --- a/src/page/archiving/index/component/TimeBlockModal/component/Box/BlockBox.tsx +++ b/src/page/archiving/index/component/TimeBlockModal/component/Box/BlockBox.tsx @@ -10,7 +10,7 @@ interface BlockBoxProps { const BlockBox = ({ title, children }: BlockBoxProps) => { return ( - + {title} diff --git a/src/page/archiving/index/component/TimeBlockModal/component/Upload/File/Add/BlockAdd.style.ts b/src/page/archiving/index/component/TimeBlockModal/component/Upload/File/Add/BlockAdd.style.ts index df9f0623..2780e2b5 100644 --- a/src/page/archiving/index/component/TimeBlockModal/component/Upload/File/Add/BlockAdd.style.ts +++ b/src/page/archiving/index/component/TimeBlockModal/component/Upload/File/Add/BlockAdd.style.ts @@ -9,17 +9,28 @@ export const boxStyle = css({ color: theme.colors.gray_500, }); -export const textStyle = css({ - color: theme.colors.gray_500, +export const colorStyle = css({ + color: theme.colors.gray_800, }); -export const buttonStyle = css({ - padding: '0', - width: '6.4rem', +export const text1Style = css([ + colorStyle, + { + fontWeight: 500, + marginTop: '1.2rem', + }, +]); - textDecoration: 'underline', - ...theme.text.body06, - fontWeight: 600, +export const text2Style = css([ + colorStyle, + { + marginTop: '1.6rem', + }, +]); - color: theme.colors.gray_500, -}); +export const text3Style = css([ + colorStyle, + { + marginTop: '0.5rem', + }, +]); diff --git a/src/page/archiving/index/component/TimeBlockModal/component/Upload/File/Add/BlockAdd.tsx b/src/page/archiving/index/component/TimeBlockModal/component/Upload/File/Add/BlockAdd.tsx index fee47f94..3581cd78 100644 --- a/src/page/archiving/index/component/TimeBlockModal/component/Upload/File/Add/BlockAdd.tsx +++ b/src/page/archiving/index/component/TimeBlockModal/component/Upload/File/Add/BlockAdd.tsx @@ -1,12 +1,15 @@ import { Dispatch, SetStateAction } from 'react'; +import UploadIcon from '@/common/asset/svg/ic_upload_file.svg?react'; import Button from '@/common/component/Button/Button'; import Flex from '@/common/component/Flex/Flex'; import Text from '@/common/component/Text/Text'; import { boxStyle, - buttonStyle, + text1Style, + text2Style, + text3Style, } from '@/page/archiving/index/component/TimeBlockModal/component/Upload/File/Add/BlockAdd.style'; import useFile from '@/page/archiving/index/component/TimeBlockModal/hook/common/useFile'; @@ -33,27 +36,36 @@ const BlockAdd = ({ files, onFilesChange, setFileUrls, setUploadStatus }: BlockA direction: 'column', justify: 'center', align: 'center', - padding: '3.2rem 6.35rem', + padding: '3.2rem 0rem', width: '100%', }} css={boxStyle} onDragOver={handleDragOver} onDrop={(event) => handleDrop(event)}> - - - 업로드할 파일을 여기로 드래그 하세요 - - 또는 - - 하여 - - - 업로드할 파일을 선택하세요 + + + + + 업로드할 파일을 끌어다 놓으세요. + + JPEG, PNG, PDF, Word 형식의 파일을 업로드할 수 있습니다. + + + 최대 파일 크기는 50MB입니다. + + ); diff --git a/src/page/archiving/index/component/TimeBlockModal/component/Upload/File/List/BlockItem.style.ts b/src/page/archiving/index/component/TimeBlockModal/component/Upload/File/List/BlockItem.style.ts index 0991959a..9570d619 100644 --- a/src/page/archiving/index/component/TimeBlockModal/component/Upload/File/List/BlockItem.style.ts +++ b/src/page/archiving/index/component/TimeBlockModal/component/Upload/File/List/BlockItem.style.ts @@ -2,16 +2,6 @@ import { css } from '@emotion/react'; import { theme } from '@/common/style/theme/theme'; -export const borderStyle = css({ - borderRadius: '8px', - border: `1px solid ${theme.colors.gray_300}`, - - width: '37.5rem', -}); - export const textStyle = css({ color: theme.colors.gray_800, - fontWeight: 500, - - maxWidth: '30rem', }); diff --git a/src/page/archiving/index/component/TimeBlockModal/component/Upload/File/List/BlockItem.tsx b/src/page/archiving/index/component/TimeBlockModal/component/Upload/File/List/BlockItem.tsx index bcd6c0d3..52b0db6c 100644 --- a/src/page/archiving/index/component/TimeBlockModal/component/Upload/File/List/BlockItem.tsx +++ b/src/page/archiving/index/component/TimeBlockModal/component/Upload/File/List/BlockItem.tsx @@ -1,32 +1,46 @@ import Delete from '@/common/asset/svg/ic_file_delete.svg?react'; +import File from '@/common/asset/svg/ic_file_preview.svg?react'; import Flex from '@/common/component/Flex/Flex'; -import Spinner from '@/common/component/Spinner/Spinner'; import Text from '@/common/component/Text/Text'; -import { - borderStyle, - textStyle, -} from '@/page/archiving/index/component/TimeBlockModal/component/Upload/File/List/BlockItem.style'; +import { textStyle } from '@/page/archiving/index/component/TimeBlockModal/component/Block/BlockModal.style'; +import '@/page/archiving/index/component/TimeBlockModal/component/Upload/File/List/BlockItem.style'; interface BlockItemProps { title: string; + fileSize: string; + uploadedSize: string; onDelete: () => void; isUploading: boolean; } -const BlockItem = ({ title, onDelete, isUploading }: BlockItemProps) => { +const BlockItem = ({ title, fileSize, uploadedSize, onDelete }: BlockItemProps) => { + /* 추가해야 할 것 : 프로그래스바 ==> 서버로직 짤때 컴포넌트로 따로 빼서 적용할 것!*/ + return ( - - {title} - - {isUploading ? ( - - ) : ( - - )} + styles={{ + direction: 'row', + align: 'center', + justify: 'space-between', + padding: '0.7rem 0rem', + width: '100%', + }}> + + + + {title} + + {fileSize} 중 {uploadedSize} + + + + + ); }; diff --git a/src/page/archiving/index/component/TimeBlockModal/component/Upload/UploadModal.style.ts b/src/page/archiving/index/component/TimeBlockModal/component/Upload/UploadModal.style.ts index 96e3fafc..8d5ca02b 100644 --- a/src/page/archiving/index/component/TimeBlockModal/component/Upload/UploadModal.style.ts +++ b/src/page/archiving/index/component/TimeBlockModal/component/Upload/UploadModal.style.ts @@ -5,14 +5,14 @@ import { theme } from '@/common/style/theme/theme'; export const scrollStyle = css({ display: 'flex', flexDirection: 'column', - maxHeight: '18rem', - width: '38.5rem', + maxHeight: '12rem', + width: '100%', - gap: '0.8rem', + gap: '1.2rem', position: 'relative', - paddingRight: '1rem', overflowY: 'auto', + overflowX: 'hidden', boxSizing: 'content-box', @@ -34,8 +34,6 @@ export const flexStyle = css({ flexDirection: 'column', justifyContent: 'space-between', alignItems: 'center', - height: '55.11rem', - paddingLeft: '6.8rem', - paddingRight: '6.8rem', - gap: '2.4rem', + width: '100%', + gap: '2rem', }); diff --git a/src/page/archiving/index/component/TimeBlockModal/component/Upload/UploadModal.tsx b/src/page/archiving/index/component/TimeBlockModal/component/Upload/UploadModal.tsx index 98c50f9a..4bec9882 100644 --- a/src/page/archiving/index/component/TimeBlockModal/component/Upload/UploadModal.tsx +++ b/src/page/archiving/index/component/TimeBlockModal/component/Upload/UploadModal.tsx @@ -1,8 +1,8 @@ import { useEffect, useState } from 'react'; import { useLocation } from 'react-router-dom'; -import Button from '@/common/component/Button/Button'; import Flex from '@/common/component/Flex/Flex'; +import { Modal } from '@/common/component/Modal'; import BlockAdd from '@/page/archiving/index/component/TimeBlockModal/component/Upload/File/Add/BlockAdd'; import BlockItem from '@/page/archiving/index/component/TimeBlockModal/component/Upload/File/List/BlockItem'; @@ -15,7 +15,6 @@ import { usePostTimeBlockMutation } from '@/page/archiving/index/component/TimeB import { formatDatePost } from '@/page/archiving/index/component/TimeBlockModal/util/date'; import { Files } from '@/shared/api/time-blocks/team/time-block/type'; -import WorkSapceInfo from '@/shared/component/WorkSpaceModal/info/WorkSpaceInfo'; import { useBlockContext } from '@/shared/hook/common/useBlockContext'; import { useCloseModal } from '@/shared/store/modal'; import { useToastAction } from '@/shared/store/toast'; @@ -105,37 +104,42 @@ const UploadModal = ({ isVisible }: UploadModalProps) => { }; return ( - - - - -
- {files.map((file) => ( - handleDelete(file.name)} - isUploading={!uploadStatus[file.name]} + <> + + + + + - ))} -
- - - +
+ {files.map((file) => ( + handleDelete(file.name)} + /* 임의의 값 넣었음! 추후 서버 로직 다시 짤때 바꿀것!!*/ + fileSize="2.4MB" + uploadedSize="0.2MB" + isUploading={!uploadStatus[file.name]} + /> + ))} +
+ + + + + ); }; diff --git a/src/page/archiving/index/component/TimeBlockModal/constant/iconBlock.tsx b/src/page/archiving/index/component/TimeBlockModal/constant/iconBlock.tsx index ea03ef68..b1229a0e 100644 --- a/src/page/archiving/index/component/TimeBlockModal/constant/iconBlock.tsx +++ b/src/page/archiving/index/component/TimeBlockModal/constant/iconBlock.tsx @@ -1,40 +1,35 @@ import { ReactNode } from 'react'; -import Accounting from '@/common/asset/svg/ic_accounting.svg?react'; -import Event from '@/common/asset/svg/ic_event.svg?react'; -import Meeting from '@/common/asset/svg/ic_meeting.svg?react'; -import Notice from '@/common/asset/svg/ic_notice.svg?react'; -import Study from '@/common/asset/svg/ic_study.svg?react'; -import Task from '@/common/asset/svg/ic_task.svg?react'; +import Event from '@/common/asset/svg/ic_event_gray.svg?react'; +import Meeting from '@/common/asset/svg/ic_meeting_gray.svg?react'; +import Notice from '@/common/asset/svg/ic_notice_gray.svg?react'; +import Recruiting from '@/common/asset/svg/ic_recruiting_gray.svg?react'; +import Study from '@/common/asset/svg/ic_study_gray.svg?react'; -type BlockIconType = { +type BlockIcon = { name: string; icon: ReactNode; }; -export const BLOCK_ICON: BlockIconType[] = [ +export const BLOCK_ICON: BlockIcon[] = [ { name: 'MEETING', - icon: , + icon: , }, { - name: 'ACCOUNTING', - icon: , + name: 'EVENT', + icon: , }, { - name: 'TASK', - icon: , + name: 'STUDY', + icon: , }, { name: 'NOTICE', - icon: , - }, - { - name: 'STUDY', - icon: , + icon: , }, { - name: 'EVENT', - icon: , + name: 'RECRUITING', + icon: , }, ]; diff --git a/src/page/archiving/index/component/TimeBlockModal/hook/common/useDateRange.tsx b/src/page/archiving/index/component/TimeBlockModal/hook/common/useDateRange.tsx deleted file mode 100644 index 526747e8..00000000 --- a/src/page/archiving/index/component/TimeBlockModal/hook/common/useDateRange.tsx +++ /dev/null @@ -1,115 +0,0 @@ -import { useState } from 'react'; - -import { ERROR } from '@/page/archiving/index/component/TimeBlockModal/constant/error'; -import { formatDateString, isValidDate, parseDate } from '@/page/archiving/index/component/TimeBlockModal/util/date'; - -const useDateRange = ( - initialStartDate = '', - initialEndDate = '', - onSetStartDate: (date: string) => void, - onSetEndDate: (date: string) => void, - onSetIsDateRangeValid: (isValid: boolean) => void -) => { - const [dates, setDates] = useState({ startDate: initialStartDate, endDate: initialEndDate }); - const [validation, setValidation] = useState({ - isStartDateValid: true, - isEndDateValid: true, - isStartDateError: false, - isEndDateError: false, - errorMessage: '', - }); - const [isDateRangeValid, setIsDateRangeValid] = useState(false); - - const handleChange = (dateType: 'startDate' | 'endDate', value: string, otherIsValid: boolean, isStart: boolean) => { - const input = value.replace(/\D/g, ''); - const formattedDate = input.length <= 8 ? formatDateString(input) : input; - setDates((prev) => { - const newDates = { ...prev, [dateType]: formattedDate }; - onSetStartDate(newDates.startDate); - onSetEndDate(newDates.endDate); - return newDates; - }); - - const isValid = input.length === 8 && isValidDate(formattedDate); - setValidation((prev) => ({ - ...prev, - [isStart ? 'isStartDateValid' : 'isEndDateValid']: isValid, - })); - - if (!input) { - setValidation((prev) => ({ - ...prev, - [isStart ? 'isStartDateError' : 'isEndDateError']: true, - errorMessage: isStart ? ERROR.START : ERROR.END, - })); - setIsDateRangeValid(false); - onSetIsDateRangeValid(false); - } else if (formattedDate.length === 10) { - if (!isValid || !otherIsValid) { - setValidation((prev) => ({ - ...prev, - [isStart ? 'isStartDateError' : 'isEndDateError']: true, - errorMessage: ERROR.OTHER, - })); - setIsDateRangeValid(false); - onSetIsDateRangeValid(false); - } else { - checkDateRange(formattedDate, dates.startDate, dates.endDate, isStart); - } - } else { - setValidation((prev) => ({ - ...prev, - [isStart ? 'isStartDateError' : 'isEndDateError']: false, - errorMessage: '', - })); - setIsDateRangeValid(false); - onSetIsDateRangeValid(false); - } - }; - - const checkDateRange = (formattedDate: string, startDate: string, endDate: string, isStart: boolean) => { - const start = parseDate(isStart ? formattedDate : startDate); - const end = parseDate(isStart ? endDate : formattedDate); - if (start && end) { - const isValidRange = start <= end; - setIsDateRangeValid(isValidRange); - onSetIsDateRangeValid(isValidRange); - if (!isValidRange) { - setValidation({ - isStartDateValid: true, - isEndDateValid: true, - isStartDateError: isStart, - isEndDateError: !isStart, - errorMessage: ERROR.OTHER, - }); - } else { - setValidation({ - isStartDateValid: true, - isEndDateValid: true, - isStartDateError: false, - isEndDateError: false, - errorMessage: '', - }); - } - } else { - setIsDateRangeValid(true); - onSetIsDateRangeValid(true); - setValidation({ - isStartDateValid: true, - isEndDateValid: true, - isStartDateError: false, - isEndDateError: false, - errorMessage: '', - }); - } - }; - - return { - dates, - validation, - isDateRangeValid, - handleChange, - }; -}; - -export default useDateRange; diff --git a/src/shared/component/ActivityTagModal/ActivityTagItem/ActivityTagItem.style.ts b/src/shared/component/ActivityTagModal/ActivityTagItem/ActivityTagItem.style.ts new file mode 100644 index 00000000..df9c1bbb --- /dev/null +++ b/src/shared/component/ActivityTagModal/ActivityTagItem/ActivityTagItem.style.ts @@ -0,0 +1,59 @@ +import { css } from '@emotion/react'; + +import { theme } from '@/common/style/theme/theme'; + +export const iconBackStyle = css({ + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + + width: '4rem', + height: '4rem', + + borderRadius: '50%', + backgroundColor: theme.colors.gray_100, +}); + +export const textStyle = css({ + color: theme.colors.gray_800, +}); + +export const tagStyle = (backgroundColor: string) => + css({ + padding: '0.4rem 0.8rem', + borderRadius: '10px', + fontWeight: 500, + + backgroundColor: (() => { + switch (backgroundColor) { + case '#D3EFFA': + return theme.colors.sky_100; + case '#F8E1F5': + return theme.colors.pink_100; + case '#F8E2CB': + return theme.colors.yellow_100; + case '#DCD8FA': + return theme.colors.purple_100; + case '#C4F2E5': + return theme.colors.green_100; + default: + return theme.colors.gray_100; + } + })(), + color: (() => { + switch (backgroundColor) { + case '#D3EFFA': + return theme.colors.sky_200; + case '#F8E1F5': + return theme.colors.pink_200; + case '#F8E2CB': + return theme.colors.yellow_200; + case '#DCD8FA': + return theme.colors.purple_200; + case '#C4F2E5': + return theme.colors.green_200; + default: + return theme.colors.gray_200; + } + })(), + }); diff --git a/src/shared/component/ActivityTagModal/ActivityTagItem/ActivityTagItem.tsx b/src/shared/component/ActivityTagModal/ActivityTagItem/ActivityTagItem.tsx new file mode 100644 index 00000000..a2a1eeec --- /dev/null +++ b/src/shared/component/ActivityTagModal/ActivityTagItem/ActivityTagItem.tsx @@ -0,0 +1,61 @@ +import CalenderIcon from '@/common/asset/svg/ic_calendar_tag.svg?react'; +import Delete from '@/common/asset/svg/ic_invite_delete.svg?react'; +import Flex from '@/common/component/Flex/Flex'; +import Text from '@/common/component/Text/Text'; + +import { + iconBackStyle, + tagStyle, + textStyle, +} from '@/shared/component/ActivityTagModal/ActivityTagItem/ActivityTagItem.style'; +import { TAG_ICON } from '@/shared/constant/icon'; + +interface ActivityTagItemProps { + title: string; + date: string; + tag: string; + color: string; + onDelete: () => void; +} + +const ActivityTagItem = ({ title, date, tag, color, onDelete }: ActivityTagItemProps) => { + const icon = TAG_ICON.find((iconItem) => iconItem.name === tag)?.icon; + + return ( + + +
{icon}
+ + {title} + + + + {date} + + + + + + + + {tag.toLowerCase()} + + + + + ); +}; + +export default ActivityTagItem; diff --git a/src/shared/component/ActivityTagModal/ActivityTagModal.tsx b/src/shared/component/ActivityTagModal/ActivityTagModal.tsx new file mode 100644 index 00000000..c60dc2a5 --- /dev/null +++ b/src/shared/component/ActivityTagModal/ActivityTagModal.tsx @@ -0,0 +1,68 @@ +import { useState } from 'react'; + +import SearchIcon from '@/common/asset/svg/ic_search.svg?react'; +import Flex from '@/common/component/Flex/Flex'; +import Input from '@/common/component/Input/Input'; +import { Modal } from '@/common/component/Modal'; +import Text from '@/common/component/Text/Text'; + +import ActivityTagItem from '@/shared/component/ActivityTagModal/ActivityTagItem/ActivityTagItem'; +import { scrollStyle, textStyle } from '@/shared/component/InviteModal/InviteModal.style'; +import { ACITIVITY_TAG_DATA } from '@/shared/constant'; +import { useCloseModal } from '@/shared/store/modal'; + +const ActivityTagModal = () => { + const [inputValue, setInputValue] = useState(''); + + const [activityTags, setActivityTags] = useState(() => [...ACITIVITY_TAG_DATA]); + + const closeModal = useCloseModal(); + + /* 드롭다운 검색 기능 추가할때 버튼활성화 조건 바꾸기! */ + const isButtonActive = inputValue.trim().length > 0; + + const handleInputChange = (e: React.ChangeEvent) => { + setInputValue(e.target.value); + }; + + const handleDeleteActivityTag = (id: number) => { + setActivityTags((prevTags) => prevTags.filter((tag) => tag.id !== id)); + }; + + return ( + <> + + + + } + value={inputValue} + onChange={handleInputChange} + /> +
+ {activityTags.length > 0 ? ( + activityTags.map((data) => ( + handleDeleteActivityTag(data.id)} + /> + )) + ) : ( + + 태그된 활동이 없습니다. + + )} +
+ + + + + ); +}; + +export default ActivityTagModal; diff --git a/src/shared/component/DeleteModal/DeleteModal.style.ts b/src/shared/component/DeleteModal/DeleteModal.style.ts deleted file mode 100644 index e18d2783..00000000 --- a/src/shared/component/DeleteModal/DeleteModal.style.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { css } from '@emotion/react'; - -import { theme } from '@/common/style/theme/theme'; - -export const deleteStyle = css({ - '&:hover': { - backgroundColor: theme.colors.key_200, - }, - - width: '15.8rem', -}); - -export const cancelStyle = css({ - '&:hover': { - backgroundColor: theme.colors.blue_100, - }, - - width: '15.8rem', -}); diff --git a/src/shared/component/DeleteModal/DeleteModal.tsx b/src/shared/component/DeleteModal/DeleteModal.tsx deleted file mode 100644 index 4595630e..00000000 --- a/src/shared/component/DeleteModal/DeleteModal.tsx +++ /dev/null @@ -1,84 +0,0 @@ -import Button from '@/common/component/Button/Button'; -import Flex from '@/common/component/Flex/Flex'; -import Heading from '@/common/component/Heading/Heading'; -import Text from '@/common/component/Text/Text'; - -import { useDeleteBlockMutation } from '@/page/archiving/index/hook/api/useDeleteBlockMutaion'; -import { useDeleteDocumentMutation } from '@/page/archiving/index/hook/api/useDeleteDocumentMutation'; - -import { cancelStyle, deleteStyle } from '@/shared/component/DeleteModal/DeleteModal.style'; -import { DELETE_DETAIL, DELETE_TITLE } from '@/shared/constant'; -import { useCloseModal, useModalData } from '@/shared/store/modal'; - -const DeleteModal = () => { - const modalData = useModalData(); - const closeModal = useCloseModal(); - - const { mutate: blockMutate } = useDeleteBlockMutation(); - const { mutate: documentMutate } = useDeleteDocumentMutation(); - - if (!modalData) { - return null; - } - - const { teamId, itemId, itemType } = modalData; - - const handleDeleteBlock = () => { - if (teamId && itemId) { - blockMutate( - { teamId, blockId: itemId }, - { - onSuccess: () => { - closeModal(); - }, - } - ); - } - }; - - const handleDeleteDocs = () => { - if (teamId && itemId) { - documentMutate( - { teamId, documentId: itemId }, - { - onSuccess: () => { - closeModal(); - }, - } - ); - } - }; - - const handleDelete = itemType === 'block' ? handleDeleteBlock : handleDeleteDocs; - - if (!itemType || !teamId || !itemId) return null; - - return ( - - - {DELETE_TITLE[itemType.toUpperCase() as keyof typeof DELETE_TITLE]} - - - {DELETE_DETAIL[itemType.toUpperCase() as keyof typeof DELETE_DETAIL]} - - - - - - - - ); -}; - -export default DeleteModal; diff --git a/src/shared/component/DeleteModal/DeletedModal.style.ts b/src/shared/component/DeleteModal/DeletedModal.style.ts new file mode 100644 index 00000000..1a08c12b --- /dev/null +++ b/src/shared/component/DeleteModal/DeletedModal.style.ts @@ -0,0 +1,13 @@ +import { css } from '@emotion/react'; + +import { theme } from '@/common/style/theme/theme'; + +export const titleStyle = css({ + color: theme.colors.gray_800, + fontWeight: 600, +}); + +export const detailStyle = css({ + color: theme.colors.gray_800, + fontWeight: 500, +}); diff --git a/src/shared/component/DeleteModal/DeletedModal.tsx b/src/shared/component/DeleteModal/DeletedModal.tsx new file mode 100644 index 00000000..3a4b2e21 --- /dev/null +++ b/src/shared/component/DeleteModal/DeletedModal.tsx @@ -0,0 +1,42 @@ +import Flex from '@/common/component/Flex/Flex'; +import { Modal } from '@/common/component/Modal'; +import Text from '@/common/component/Text/Text'; + +import { detailStyle, titleStyle } from '@/shared/component/DeleteModal/DeletedModal.style'; +import { DELETED_DETAIL, DELETED_TITLE } from '@/shared/constant'; +import { useCloseModal, useModalData } from '@/shared/store/modal'; + +const DeletedModal = () => { + const closeModal = useCloseModal(); + const modalData = useModalData(); + + const itemType = modalData?.itemType; + const title = itemType ? DELETED_TITLE[itemType.toUpperCase() as keyof typeof DELETED_TITLE] : ''; + + const handleDelete = () => { + //api 로직 추가하기 + + closeModal(); + }; + + if (!itemType) return null; + + return ( + <> + + + + + {title} + + + {DELETED_DETAIL} + + + + + + ); +}; + +export default DeletedModal; diff --git a/src/shared/component/InviteModal/InviteItem/MemberItem.style.ts b/src/shared/component/InviteModal/InviteItem/MemberItem.style.ts new file mode 100644 index 00000000..9570d619 --- /dev/null +++ b/src/shared/component/InviteModal/InviteItem/MemberItem.style.ts @@ -0,0 +1,7 @@ +import { css } from '@emotion/react'; + +import { theme } from '@/common/style/theme/theme'; + +export const textStyle = css({ + color: theme.colors.gray_800, +}); diff --git a/src/shared/component/InviteModal/InviteItem/MemberItem.tsx b/src/shared/component/InviteModal/InviteItem/MemberItem.tsx new file mode 100644 index 00000000..d60a57ad --- /dev/null +++ b/src/shared/component/InviteModal/InviteItem/MemberItem.tsx @@ -0,0 +1,39 @@ +import Delete from '@/common/asset/svg/ic_invite_delete.svg?react'; +import InviteProfile from '@/common/asset/svg/ic_invite_profile.svg?react'; +import Flex from '@/common/component/Flex/Flex'; +import Text from '@/common/component/Text/Text'; + +import { textStyle } from '@/shared/component/InviteModal/InviteItem/MemberItem.style'; + +interface MemberItemProps { + title: string; + onDelete: () => void; +} + +const MemberItem = ({ title, onDelete }: MemberItemProps) => { + return ( + + + + + {title} + + + + + + ); +}; + +export default MemberItem; diff --git a/src/shared/component/InviteModal/InviteModal.style.ts b/src/shared/component/InviteModal/InviteModal.style.ts new file mode 100644 index 00000000..02a237d3 --- /dev/null +++ b/src/shared/component/InviteModal/InviteModal.style.ts @@ -0,0 +1,50 @@ +import { css } from '@emotion/react'; + +import { theme } from '@/common/style/theme/theme'; + +export const inputWrapperStyle = css({ + maxWidth: '24.7rem', + height: '4rem', +}); + +export const textStyle = css({ + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + + width: '100%', + height: '100%', + + color: theme.colors.gray_800, + textAlign: 'center', +}); + +export const scrollStyle = css({ + display: 'flex', + flexDirection: 'column', + + height: '30.4rem', + width: '100%', + + gap: '1.6rem', + position: 'relative', + + overflowY: 'auto', + overflowX: 'hidden', + + boxSizing: 'content-box', + + '&::-webkit-scrollbar': { + width: '0.4rem', + height: '5rem', + }, + + '&::-webkit-scrollbar-thumb': { + backgroundColor: theme.colors.gray_300, + borderRadius: '4px', + }, + + '&::-webkit-scrollbar-track': { + backgroundColor: 'transparent', + }, +}); diff --git a/src/shared/component/InviteModal/InviteModal.tsx b/src/shared/component/InviteModal/InviteModal.tsx new file mode 100644 index 00000000..59d0b42c --- /dev/null +++ b/src/shared/component/InviteModal/InviteModal.tsx @@ -0,0 +1,77 @@ +import { useState } from 'react'; + +import CommandButton from '@/common/component/CommandButton/CommandButton'; +import Flex from '@/common/component/Flex/Flex'; +import Input from '@/common/component/Input/Input'; +import { Modal } from '@/common/component/Modal'; +import Text from '@/common/component/Text/Text'; + +import MemberItem from '@/shared/component/InviteModal/InviteItem/MemberItem'; +import { inputWrapperStyle, scrollStyle, textStyle } from '@/shared/component/InviteModal/InviteModal.style'; +import { useCloseModal } from '@/shared/store/modal'; + +const InviteModal = () => { + const [inputValue, setInputValue] = useState(''); + const [inviteList, setInviteList] = useState([]); + + const closeModal = useCloseModal(); + + const isButtonActive = inputValue.trim().length > 0; + + const handleInputChange = (e: React.ChangeEvent) => { + setInputValue(e.target.value); + }; + + const handleAddInvite = () => { + if (inputValue.trim() && !inviteList.includes(inputValue)) { + setInviteList([...inviteList, inputValue.trim()]); + setInputValue(''); + } + }; + + const handleDeleteInvite = (email: string) => { + setInviteList(inviteList.filter((item) => item !== email)); + }; + + return ( + <> + + + + + + + 추가 + + + +
+ {inviteList.length > 0 ? ( + inviteList.map((email) => ( + handleDeleteInvite(email)} /> + )) + ) : ( + + 초대된 팀원이 없습니다. + + )} +
+ + + + + ); +}; + +export default InviteModal; diff --git a/src/shared/component/MemberTagModal/MemberTagItem/MemberTagItem.tsx b/src/shared/component/MemberTagModal/MemberTagItem/MemberTagItem.tsx new file mode 100644 index 00000000..2ff0f17c --- /dev/null +++ b/src/shared/component/MemberTagModal/MemberTagItem/MemberTagItem.tsx @@ -0,0 +1,52 @@ +import Delete from '@/common/asset/svg/ic_invite_delete.svg?react'; +import Profile from '@/common/asset/svg/ic_invite_profile.svg?react'; +import Flex from '@/common/component/Flex/Flex'; +import Text from '@/common/component/Text/Text'; + +import { textStyle } from '@/shared/component/InviteModal/InviteItem/MemberItem.style'; + +interface MemberTagItemProps { + name: string; + email: string; + profileImg?: string; + onDelete: () => void; +} + +const MemberTagItem = ({ name, email, profileImg, onDelete }: MemberTagItemProps) => { + return ( + + + {profileImg ? ( + {`${name} + ) : ( + + )} + + {name} + + {email} + + + + + + + ); +}; + +export default MemberTagItem; diff --git a/src/shared/component/MemberTagModal/MemberTagModal.tsx b/src/shared/component/MemberTagModal/MemberTagModal.tsx new file mode 100644 index 00000000..d26ce54b --- /dev/null +++ b/src/shared/component/MemberTagModal/MemberTagModal.tsx @@ -0,0 +1,66 @@ +import { useState } from 'react'; + +import SearchIcon from '@/common/asset/svg/ic_search.svg?react'; +import Flex from '@/common/component/Flex/Flex'; +import Input from '@/common/component/Input/Input'; +import { Modal } from '@/common/component/Modal'; +import Text from '@/common/component/Text/Text'; + +import { scrollStyle, textStyle } from '@/shared/component/InviteModal/InviteModal.style'; +import MemberTagItem from '@/shared/component/MemberTagModal/MemberTagItem/MemberTagItem'; +import { MEMBER_DATA } from '@/shared/constant'; +import { useCloseModal } from '@/shared/store/modal'; + +const MemberTagModal = () => { + const [inputValue, setInputValue] = useState(''); + const [memberTagList, setMemberTagList] = useState(MEMBER_DATA.map((member) => ({ ...member }))); + + const closeModal = useCloseModal(); + + /* 드롭다운 검색 기능 구현할때 버튼활성화 조건 변경하기 */ + const isButtonActive = inputValue.trim().length > 0; + + const handleInputChange = (e: React.ChangeEvent) => { + setInputValue(e.target.value); + }; + + const handleDeleteMemberTag = (email: string) => { + setMemberTagList(memberTagList.filter((item) => item.email !== email)); + }; + + return ( + <> + + + + } + value={inputValue} + onChange={handleInputChange} + /> +
+ {memberTagList.length > 0 ? ( + memberTagList.map((data) => ( + handleDeleteMemberTag(data.email)} + /> + )) + ) : ( + + 태그된 팀원이 없습니다. + + )} +
+ + + + + ); +}; + +export default MemberTagModal; diff --git a/src/shared/component/Modal/ModalContainer.tsx b/src/shared/component/Modal/ModalContainer.tsx index 97978320..bd4d13c3 100644 --- a/src/shared/component/Modal/ModalContainer.tsx +++ b/src/shared/component/Modal/ModalContainer.tsx @@ -1,8 +1,11 @@ -import Modal from '@/common/component/Modal/Modal'; +import { Modal } from '@/common/component/Modal'; import { BlockFlow } from '@/page/archiving/index/component/TimeBlockModal'; -import DeleteModal from '@/shared/component/DeleteModal/DeleteModal'; +import ActivityTagModal from '@/shared/component/ActivityTagModal/ActivityTagModal'; +import DeletedModal from '@/shared/component/DeleteModal/DeletedModal'; +import InviteModal from '@/shared/component/InviteModal/InviteModal'; +import MemberTagModal from '@/shared/component/MemberTagModal/MemberTagModal'; import { WorkSpaceFlow } from '@/shared/component/WorkSpaceModal'; import { BlockProvider } from '@/shared/hook/common/useBlockContext'; import { WorkSpaceProvider } from '@/shared/hook/common/useWorkSpaceContext'; @@ -27,8 +30,14 @@ const ModalContainer = () => { ); - case 'delete': - return ; + case 'deleted': + return ; + case 'invite': + return ; + case 'member-tag': + return ; + case 'activity-tag': + return ; default: return null; } diff --git a/src/shared/component/WorkSpaceModal/category/WorkSpaceCategory.tsx b/src/shared/component/WorkSpaceModal/category/WorkSpaceCategory.tsx index acf48301..9348ac5f 100644 --- a/src/shared/component/WorkSpaceModal/category/WorkSpaceCategory.tsx +++ b/src/shared/component/WorkSpaceModal/category/WorkSpaceCategory.tsx @@ -1,12 +1,9 @@ import { useEffect, useState } from 'react'; -import Button from '@/common/component/Button/Button'; -import Flex from '@/common/component/Flex/Flex'; +import { Modal } from '@/common/component/Modal'; import Select from '@/common/component/Select/Select'; import { useOutsideClick, useOverlay } from '@/common/hook'; -import WorkSapceInfo from '@/shared/component/WorkSpaceModal/info/WorkSpaceInfo'; -import { buttonStyle, sectionStyle } from '@/shared/component/WorkSpaceModal/name/WorkSpaceName.style'; import useCategoryListQuery from '@/shared/hook/api/useCategoryListQuery'; import { useWorkSpaceContext } from '@/shared/hook/common/useWorkSpaceContext'; @@ -62,33 +59,28 @@ const WorkSpaceCategory = ({ isVisible }: WorkSpaceCategoryProps) => { const isButtonActive = selected.trim().length > 0; return ( - - -
- ({ value: str }))} + className="select-container" + /> +
+ + + ); }; diff --git a/src/shared/component/WorkSpaceModal/complete/WorkSpaceComplete.tsx b/src/shared/component/WorkSpaceModal/complete/WorkSpaceComplete.tsx index 4f63b5f1..1d6dbfd8 100644 --- a/src/shared/component/WorkSpaceModal/complete/WorkSpaceComplete.tsx +++ b/src/shared/component/WorkSpaceModal/complete/WorkSpaceComplete.tsx @@ -2,10 +2,9 @@ import { css } from '@emotion/react'; import completePng from '@/common/asset/img/workspace_complete.png'; import complete from '@/common/asset/img/workspace_complete.webp'; -import Flex from '@/common/component/Flex/Flex'; +import { Modal } from '@/common/component/Modal'; -import WorkSapceInfo from '@/shared/component/WorkSpaceModal/info/WorkSpaceInfo'; -import { sectionStyle } from '@/shared/component/WorkSpaceModal/name/WorkSpaceName.style'; +import { useCloseModal } from '@/shared/store/modal'; interface WorkSpaceCompleteProps { isVisible: boolean; @@ -14,20 +13,19 @@ interface WorkSpaceCompleteProps { const WorkSpaceComplete = ({ isVisible }: WorkSpaceCompleteProps) => { if (!isVisible) return null; + const closeModal = useCloseModal(); + return ( - - - - - 워크 스페이스 완료 이미지 - - + <> + + + + + 워크 스페이스 완료 이미지 + + + + ); }; diff --git a/src/shared/component/WorkSpaceModal/image/WorkSpaceImage.style.ts b/src/shared/component/WorkSpaceModal/image/WorkSpaceImage.style.ts index 9ed868ce..22bbd43b 100644 --- a/src/shared/component/WorkSpaceModal/image/WorkSpaceImage.style.ts +++ b/src/shared/component/WorkSpaceModal/image/WorkSpaceImage.style.ts @@ -9,13 +9,15 @@ export const imageBoxStyle = css({ }); export const imageAddStyle = css({ - width: '20rem', - height: '20rem', + width: '23.4rem', + height: '23.4rem', - borderRadius: '57.14px', + borderRadius: '40px', objectFit: 'cover', cursor: 'pointer', + + padding: '1rem', }); export const imageDeleteStyle = css({ @@ -23,8 +25,8 @@ export const imageDeleteStyle = css({ top: '0', right: '0', - width: '3.3rem', - height: '3.2rem', + width: '4.2rem', + height: '4.2rem', cursor: 'pointer', }); diff --git a/src/shared/component/WorkSpaceModal/image/WorkSpaceImage.tsx b/src/shared/component/WorkSpaceModal/image/WorkSpaceImage.tsx index 0b5a8117..5c0341f5 100644 --- a/src/shared/component/WorkSpaceModal/image/WorkSpaceImage.tsx +++ b/src/shared/component/WorkSpaceModal/image/WorkSpaceImage.tsx @@ -1,18 +1,14 @@ import TeamProfileAdd from '@/common/asset/svg/ic_team_profile_add.svg?react'; import TeamProfileDelete from '@/common/asset/svg/ic_team_profile_delete.svg?react'; -import Button from '@/common/component/Button/Button'; -import Flex from '@/common/component/Flex/Flex'; import Label from '@/common/component/Label/Label'; +import { Modal } from '@/common/component/Modal'; import { - buttonCompleteStyle, imageAddStyle, imageBoxStyle, imageDeleteStyle, } from '@/shared/component/WorkSpaceModal/image/WorkSpaceImage.style'; import useImageUpload from '@/shared/component/WorkSpaceModal/image/hook/useImageUpload'; -import WorkSapceInfo from '@/shared/component/WorkSpaceModal/info/WorkSpaceInfo'; -import { sectionStyle } from '@/shared/component/WorkSpaceModal/name/WorkSpaceName.style'; import { usePostTeamMutation } from '@/shared/hook/api/usePostTeamMutation'; import { useWorkSpaceContext } from '@/shared/hook/common/useWorkSpaceContext'; @@ -42,35 +38,33 @@ const WorkSpaceImage = ({ isVisible }: WorkSpaceImageProps) => { if (!isVisible) return null; + const isButtonActive = !!fileURL; + return ( - - -
- {fileURL ? ( - 프로필 이미지 - ) : ( - - )} - {fileURL && } -
- - - + <> + + +
+ {fileURL ? ( + 프로필 이미지 + ) : ( + + )} + {fileURL && } +
+ + + + ); }; diff --git a/src/shared/component/WorkSpaceModal/name/WorkSpaceName.tsx b/src/shared/component/WorkSpaceModal/name/WorkSpaceName.tsx index 3ed9617e..18cb4313 100644 --- a/src/shared/component/WorkSpaceModal/name/WorkSpaceName.tsx +++ b/src/shared/component/WorkSpaceModal/name/WorkSpaceName.tsx @@ -1,15 +1,9 @@ import { useState } from 'react'; -import Button from '@/common/component/Button/Button'; -import Flex from '@/common/component/Flex/Flex'; import Input from '@/common/component/Input/Input'; +import { Modal } from '@/common/component/Modal'; -import WorkSapceInfo from '@/shared/component/WorkSpaceModal/info/WorkSpaceInfo'; -import { - buttonStyle, - inputWrapperStyle, - sectionStyle, -} from '@/shared/component/WorkSpaceModal/name/WorkSpaceName.style'; +import { inputWrapperStyle } from '@/shared/component/WorkSpaceModal/name/WorkSpaceName.style'; import { useWorkSpaceContext } from '@/shared/hook/common/useWorkSpaceContext'; interface WorkSpaceNameProps { @@ -34,25 +28,18 @@ const WorkSpaceName = ({ isVisible }: WorkSpaceNameProps) => { if (!isVisible) return null; return ( - - -
+ <> + + -
- - + + + ); }; diff --git a/src/shared/constant/icon.tsx b/src/shared/constant/icon.tsx new file mode 100644 index 00000000..77ab05ff --- /dev/null +++ b/src/shared/constant/icon.tsx @@ -0,0 +1,35 @@ +import { ReactNode } from 'react'; + +import Event from '@/common/asset/svg/ic_event_gray.svg?react'; +import Meeting from '@/common/asset/svg/ic_meeting_gray.svg?react'; +import Notice from '@/common/asset/svg/ic_notice_gray.svg?react'; +import Recruiting from '@/common/asset/svg/ic_recruiting_gray.svg?react'; +import Study from '@/common/asset/svg/ic_study_gray.svg?react'; + +type TAGIcon = { + name: string; + icon: ReactNode; +}; + +export const TAG_ICON: TAGIcon[] = [ + { + name: 'MEETING', + icon: , + }, + { + name: 'EVENT', + icon: , + }, + { + name: 'STUDY', + icon: , + }, + { + name: 'NOTICE', + icon: , + }, + { + name: 'RECRUITING', + icon: , + }, +]; diff --git a/src/shared/constant/index.ts b/src/shared/constant/index.ts index d8e2ca33..0f16c7dc 100644 --- a/src/shared/constant/index.ts +++ b/src/shared/constant/index.ts @@ -23,3 +23,47 @@ export const DELETE_DETAIL = { BLOCK: '삭제된 블록은 복구할 수 없습니다.', DOCS: '삭제된 문서는 복구할 수 없습니다.', } as const; + +export const DELETED_TITLE = { + TRASH: '휴지통을 비우시겠습니까?', + PERMANENT: '파일을 완전히 삭제하시겠습니까?', +} as const; + +export const DELETED_DETAIL = '휴지통에서 지워진 파일은 영구삭제되며 되돌릴 수 없습니다' as const; + +export const MEMBER_DATA = [ + { + name: '이채원', + email: 'cindy1769@daum.net', + profileUrl: 'https://github.com/user-attachments/assets/a9c876cd-9d07-49db-94f1-353e5c4a5ee3', + }, + { + name: '이채원2', + email: 'cindy1769@naver.com', + profileUrl: 'https://github.com/user-attachments/assets/a9c876cd-9d07-49db-94f1-353e5c4a5ee3', + }, +] as const; + +export const ACITIVITY_TAG_DATA = [ + { + id: 1, + tag: 'MEETING', + title: 'UX 스터디', + date: '2024.09.25', + color: '#D3EFFA', + }, + { + id: 2, + tag: 'STUDY', + title: 'UX 스터디', + date: '2024.09.25', + color: '#F8E1F5', + }, + { + id: 3, + tag: 'NOTICE', + title: 'UX 스터디', + date: '2024.09.25', + color: '#C4F2E5', + }, +] as const; diff --git a/src/shared/store/modal.tsx b/src/shared/store/modal.tsx index 4855beff..08866bcd 100644 --- a/src/shared/store/modal.tsx +++ b/src/shared/store/modal.tsx @@ -1,17 +1,15 @@ import { create } from 'zustand'; -interface DeleteModalData { - teamId: number; - itemId: number; - itemType: 'block' | 'docs'; +interface DeletedModalData { + itemType: 'trash' | 'permanent'; } interface ModalState { isOpen: boolean; contentType: string | null; - modalData: DeleteModalData | null; + modalData: DeletedModalData | null; actions: { - openModal: (contentType: string, data?: DeleteModalData | null) => void; + openModal: (contentType: string, data?: DeletedModalData | null) => void; closeModal: () => void; }; } @@ -22,9 +20,12 @@ const useModalStore = create((set) => ({ modalData: null, actions: { openModal: (contentType, data = null) => { - set({ isOpen: true, contentType, modalData: data }); + set({ + isOpen: true, + contentType, + modalData: data || null, + }); }, - closeModal: () => set({ isOpen: false, contentType: null, modalData: null }), }, })); diff --git a/src/shared/util/modalFooter.tsx b/src/shared/util/modalFooter.tsx new file mode 100644 index 00000000..0c5517f2 --- /dev/null +++ b/src/shared/util/modalFooter.tsx @@ -0,0 +1,53 @@ +export interface FooterButton { + text: string; + onClick?: () => void; + variant: 'primary' | 'secondary' | 'tertiary' | 'outline' | 'underline'; + disabled?: boolean; +} +export const getFooterContent = ( + contentType: string, + step: number, + buttonClick?: () => void, + closeModal?: () => void, + isButtonActive: boolean = true +): FooterButton[] => { + switch (contentType) { + case 'create-workspace': + return [ + step >= 3 ? { text: '건너뛰기', onClick: buttonClick, variant: 'outline' } : false, + { + text: step === 4 ? '확인' : '다음으로', + onClick: buttonClick, + variant: 'primary', + disabled: !isButtonActive, + }, + ].filter(Boolean) as FooterButton[]; + + /* 디자인 확정시 추후 수정 필요 */ + case 'create-block': + return [ + { text: '취소', onClick: closeModal, variant: 'outline' }, + { text: '다음으로', onClick: buttonClick, variant: 'primary' }, + ]; + + case 'deleted': + return [ + { text: '취소', onClick: closeModal, variant: 'outline' }, + { text: '삭제', onClick: buttonClick, variant: 'primary' }, + ]; + + case 'invite': + return [ + { text: '취소', onClick: closeModal, variant: 'outline' }, + { text: '초대', onClick: buttonClick, variant: 'primary', disabled: !isButtonActive }, + ]; + case 'member-tag': + case 'activity-tag': + return [ + { text: '취소', onClick: closeModal, variant: 'outline' }, + { text: '완료', onClick: buttonClick, variant: 'primary' }, + ]; + default: + return []; + } +}; diff --git a/src/shared/util/modalHeader.tsx b/src/shared/util/modalHeader.tsx new file mode 100644 index 00000000..a3d08f17 --- /dev/null +++ b/src/shared/util/modalHeader.tsx @@ -0,0 +1,69 @@ +import ActivityTagIcon from '@/common/asset/svg/ic_activity_tag.svg?react'; +import BlockIcon from '@/common/asset/svg/ic_block_create.svg?react'; +import InviteIcon from '@/common/asset/svg/ic_invite.svg?react'; +import MemberTagIcon from '@/common/asset/svg/ic_member_tag.svg?react'; +import WarningIcon from '@/common/asset/svg/ic_warning.svg?react'; +import SuccessIcon from '@/common/asset/svg/ic_workspace_success.svg?react'; + +export const getHeaderContent = (contentType: string, step?: number, totalSteps?: number) => { + switch (contentType) { + case 'create-workspace': + return { + icon: + step === totalSteps ? ( + + ) : step && totalSteps ? ( + `${step}/${totalSteps}` + ) : null, + title: + step === 1 || step === 2 + ? '새로운 워크스페이스 생성하기' + : step === 3 + ? '동아리 프로필 이미지 등록' + : '워크스페이스 생성완료', + infoText: + step === 1 + ? '워크스페이스의 이름을 입력해주세요' + : step === 2 + ? '팀 카테고리를 선택해주세요' + : step === 3 + ? '우리 동아리 프로필에 표시할 이미지를 등록해주세요' + : '이제 워크스페이스를 사용할 수 있습니다.', + }; + + /* 디자인 확정시 추후 수정 필요 */ + case 'create-block': + return { + icon: , + title: '타임블록 생성', + infoText: step === 1 ? '타임라인에 생성할 블록 정보를 입력해주세요' : '타임라인에 업로드할 파일을 선택하세요', + }; + + case 'deleted': + return { + icon: , + title: '주의!', + infoText: '삭제할 항목을 확인해주세요.', + }; + case 'invite': + return { + icon: , + title: '팀원 초대', + infoText: '워크스페이스에 팀원을 초대할 수 있습니다.', + }; + case 'member-tag': + return { + icon: , + title: '팀원 태그', + infoText: '관련된 팀원을 태그할 수 있습니다.', + }; + case 'activity-tag': + return { + icon: , + title: '활동 태그', + infoText: '타임라인에 저장된 활동을 태그할 수 있습니다.', + }; + default: + return { icon: null, title: '', infoText: '' }; + } +}; diff --git a/src/story/shared/DeleteModal.stories.tsx b/src/story/shared/DeleteModal.stories.tsx index c66b8128..4e919111 100644 --- a/src/story/shared/DeleteModal.stories.tsx +++ b/src/story/shared/DeleteModal.stories.tsx @@ -4,7 +4,7 @@ import ModalContainer from '@/shared/component/Modal/ModalContainer'; import { useOpenModal } from '@/shared/store/modal'; const meta: Meta = { - title: 'Shared/Modal/Delete', + title: 'Shared/Modal/Deleted', component: ModalContainer, parameters: { layout: 'centered', @@ -22,15 +22,14 @@ const meta: Meta = { export default meta; type Story = StoryObj; -export const Delete: Story = { +export const Deleted: Story = { render: () => { const openModal = useOpenModal(); return ( <> - + + ); diff --git a/src/story/shared/NewModals.stories.tsx b/src/story/shared/NewModals.stories.tsx new file mode 100644 index 00000000..170dbfbb --- /dev/null +++ b/src/story/shared/NewModals.stories.tsx @@ -0,0 +1,38 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import ModalContainer from '@/shared/component/Modal/ModalContainer'; +import { useOpenModal } from '@/shared/store/modal'; + +const meta: Meta = { + title: 'Shared/Modal/ModalsTest', + component: ModalContainer, + parameters: { + layout: 'centered', + }, + args: { + isOpen: false, + }, + argTypes: { + children: { + control: false, + }, + }, +}; + +export default meta; +type Story = StoryObj; + +export const ModalsTest: Story = { + render: () => { + const openModal = useOpenModal(); + + return ( + <> + + + + + + ); + }, +}; diff --git a/src/story/shared/WorkSpaceModal.stories.tsx b/src/story/shared/WorkSpaceModal.stories.tsx deleted file mode 100644 index 67694e04..00000000 --- a/src/story/shared/WorkSpaceModal.stories.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { Meta, StoryObj } from '@storybook/react'; - -import WorkSpaceComplete from '@/shared/component/WorkSpaceModal/complete/WorkSpaceComplete'; -import WorkSpaceName from '@/shared/component/WorkSpaceModal/name/WorkSpaceName'; -import { WorkSpaceProvider } from '@/shared/hook/common/useWorkSpaceContext'; - -const meta: Meta = { - title: 'Shared/WorkSpaceModal', - component: WorkSpaceProvider, - parameters: { - layout: 'centered', - }, - decorators: [ - (Story) => ( - - - - ), - ], -}; - -export default meta; -type Story = StoryObj; - -export const Name: Story = { - render: () => { - return ; - }, -}; - -export const Complete: Story = { - render: () => { - return ; - }, -};