From 1790819a6345395eee98f6efc1d5633130e4228c Mon Sep 17 00:00:00 2001 From: kimkyuhong Date: Tue, 5 Nov 2024 18:52:12 +0900 Subject: [PATCH 01/19] =?UTF-8?q?feat:=20=EA=B8=B0=EC=B4=88=20=EA=B5=AC?= =?UTF-8?q?=EC=A1=B0=20=EC=9E=A1=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + pnpm-lock.yaml | 24 +++++++++ src/App.tsx | 4 +- src/common/asset/svg/ic_close.svg | 3 ++ .../TimeBlockBar/TimeBlockBar.style.ts | 11 ++++ .../component/TimeBlockBar/TimeBlockBar.tsx | 41 +++++++++++++++ .../index/hook/common/useInteractTimeline.ts | 6 ++- .../component/GlobalDrawer/GlobalDrawer.tsx | 37 -------------- .../TimeBlockDrawer.style.ts} | 2 +- .../TimeBlockDrawer/TimeBlockDrawer.tsx | 51 +++++++++++++++++++ src/shared/store/drawer.ts | 6 ++- 11 files changed, 142 insertions(+), 44 deletions(-) create mode 100644 src/common/asset/svg/ic_close.svg create mode 100644 src/page/archiving/index/component/TimeBlockBar/TimeBlockBar.style.ts create mode 100644 src/page/archiving/index/component/TimeBlockBar/TimeBlockBar.tsx delete mode 100644 src/shared/component/GlobalDrawer/GlobalDrawer.tsx rename src/shared/component/{GlobalDrawer/GlobalDrawer.style.ts => TimeBlockDrawer/TimeBlockDrawer.style.ts} (89%) create mode 100644 src/shared/component/TimeBlockDrawer/TimeBlockDrawer.tsx diff --git a/package.json b/package.json index c47c358b9..f8f45aba1 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "@tanstack/react-query": "^5.49.2", "@tanstack/react-query-devtools": "^5.49.2", "axios": "^1.7.2", + "framer-motion": "^11.11.11", "mime": "^4.0.4", "react": "^18.3.1", "react-dom": "^18.3.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c2e004580..85a0bdf4b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -28,6 +28,9 @@ importers: axios: specifier: ^1.7.2 version: 1.7.2 + framer-motion: + specifier: ^11.11.11 + version: 11.11.11(react-dom@18.3.1(react@18.3.1))(react@18.3.1) mime: specifier: ^4.0.4 version: 4.0.4 @@ -2837,6 +2840,20 @@ packages: resolution: {integrity: sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==} engines: {node: '>= 0.6'} + framer-motion@11.11.11: + resolution: {integrity: sha512-tuDH23ptJAKUHGydJQII9PhABNJBpB+z0P1bmgKK9QFIssHGlfPd6kxMq00LSKwE27WFsb2z0ovY0bpUyMvfRw==} + peerDependencies: + '@emotion/is-prop-valid': '*' + react: ^18.0.0 + react-dom: ^18.0.0 + peerDependenciesMeta: + '@emotion/is-prop-valid': + optional: true + react: + optional: true + react-dom: + optional: true + fresh@0.5.2: resolution: {integrity: sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==} engines: {node: '>= 0.6'} @@ -7887,6 +7904,13 @@ snapshots: forwarded@0.2.0: {} + framer-motion@11.11.11(react-dom@18.3.1(react@18.3.1))(react@18.3.1): + dependencies: + tslib: 2.6.3 + optionalDependencies: + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + fresh@0.5.2: {} fs-extra@11.2.0: diff --git a/src/App.tsx b/src/App.tsx index 17d9e0bdb..f317bb03c 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -8,11 +8,11 @@ import { useQueryErrorResetBoundary } from '@tanstack/react-query'; import ErrorBoundary from '@/common/component/ErrorBoundary/ErrorBoundary'; import { HTTPError } from '@/shared/api/HTTPError'; -import GlobalDrawer from '@/shared/component/GlobalDrawer/GlobalDrawer'; import Header from '@/shared/component/Header/Header'; import Login from '@/shared/component/Login/Login'; import ModalContainer from '@/shared/component/Modal/ModalContainer'; import SideNavBar from '@/shared/component/SideNavBar/SideNavBar'; +import TimeBlockDrawer from '@/shared/component/TimeBlockDrawer/TimeBlockDrawer'; import { HTTP_STATUS_CODE } from '@/shared/constant/api'; import { PATH } from '@/shared/constant/path'; import ErrorPage from '@/shared/page/errorPage/ErrorPage'; @@ -58,7 +58,7 @@ const App = () => {
- + diff --git a/src/common/asset/svg/ic_close.svg b/src/common/asset/svg/ic_close.svg new file mode 100644 index 000000000..52e3a0b64 --- /dev/null +++ b/src/common/asset/svg/ic_close.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/page/archiving/index/component/TimeBlockBar/TimeBlockBar.style.ts b/src/page/archiving/index/component/TimeBlockBar/TimeBlockBar.style.ts new file mode 100644 index 000000000..334d439f4 --- /dev/null +++ b/src/page/archiving/index/component/TimeBlockBar/TimeBlockBar.style.ts @@ -0,0 +1,11 @@ +import { css } from '@emotion/react'; + +import { theme } from '@/common/style/theme/theme'; + +export const containerStyle = () => + css({ + width: '27rem', + height: '100vh', + + borderLeft: `1px solid ${theme.colors.gray_300}`, + }); diff --git a/src/page/archiving/index/component/TimeBlockBar/TimeBlockBar.tsx b/src/page/archiving/index/component/TimeBlockBar/TimeBlockBar.tsx new file mode 100644 index 000000000..1069681c3 --- /dev/null +++ b/src/page/archiving/index/component/TimeBlockBar/TimeBlockBar.tsx @@ -0,0 +1,41 @@ +import CloseButton from '@/common/asset/svg/ic_close.svg?react'; +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 { containerStyle } from '@/page/archiving/index/component/TimeBlockBar/TimeBlockBar.style'; +import { BLOCK_ICON } from '@/page/archiving/index/constant/icon'; +import { formattingDate } from '@/page/archiving/index/util/date'; + +interface TimeBlockBarProps { + title: string; + startDate: Date; + endDate: Date; + blockType: string; + color: string; +} + +const TimeBlockBar = ({ + title = 'OT 준비', + startDate = new Date('2024.09.13'), + endDate = new Date('2024.09.15'), + blockType = 'MEETING', + color = '#FFE6E8', +}: TimeBlockBarProps) => { + return ( + + ); +}; + +export default TimeBlockBar; diff --git a/src/page/archiving/index/hook/common/useInteractTimeline.ts b/src/page/archiving/index/hook/common/useInteractTimeline.ts index 59e20ac26..514c1efd7 100644 --- a/src/page/archiving/index/hook/common/useInteractTimeline.ts +++ b/src/page/archiving/index/hook/common/useInteractTimeline.ts @@ -21,8 +21,10 @@ export const useInteractTimeline = () => { /** TODO: 추후 block id에 따른 API 응답으로 데이터 넣기 */ openDrawer({ title: 'OT 준비', - startDate: '2024-09-13', - endDate: '2024-09-24', + startDate: new Date('2024.09.13'), + endDate: new Date('2024.09.15'), + blockType: 'MEETING', + color: '#FFE6E8', files: [], }); }; diff --git a/src/shared/component/GlobalDrawer/GlobalDrawer.tsx b/src/shared/component/GlobalDrawer/GlobalDrawer.tsx deleted file mode 100644 index 6cad31ce9..000000000 --- a/src/shared/component/GlobalDrawer/GlobalDrawer.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import { useEffect } from 'react'; -import { useLocation } from 'react-router-dom'; - -import Heading from '@/common/component/Heading/Heading'; -import { useOutsideClick } from '@/common/hook'; - -import { containerStyle } from '@/shared/component/GlobalDrawer/GlobalDrawer.style'; -import { PATH } from '@/shared/constant/path'; -import { useDrawerAction, useDrawerContent, useDrawerIsOpen } from '@/shared/store/drawer'; - -const GlobalDrawer = () => { - const isOpen = useDrawerIsOpen(); - const { closeDrawer } = useDrawerAction(); - const content = useDrawerContent(); - - const { pathname } = useLocation(); - - const ref = useOutsideClick(closeDrawer); - - useEffect(() => { - /** Open 상태에서 라우트 이동 시 닫음 */ - if (isOpen && pathname !== PATH.ARCHIVING) { - closeDrawer(); - } - }, [isOpen, closeDrawer, pathname]); - - return ( - - ); -}; - -export default GlobalDrawer; diff --git a/src/shared/component/GlobalDrawer/GlobalDrawer.style.ts b/src/shared/component/TimeBlockDrawer/TimeBlockDrawer.style.ts similarity index 89% rename from src/shared/component/GlobalDrawer/GlobalDrawer.style.ts rename to src/shared/component/TimeBlockDrawer/TimeBlockDrawer.style.ts index a4247f9e1..e87207193 100644 --- a/src/shared/component/GlobalDrawer/GlobalDrawer.style.ts +++ b/src/shared/component/TimeBlockDrawer/TimeBlockDrawer.style.ts @@ -14,7 +14,7 @@ export const containerStyle = (isOpen: boolean) => overflow: 'hidden', - borderRadius: '16px', + borderLeft: `1px solid ${theme.colors.gray_300}`, boxShadow: '0px 2px 10px 0px rgba(0, 0, 0, 0.10)', backgroundColor: theme.colors.white, diff --git a/src/shared/component/TimeBlockDrawer/TimeBlockDrawer.tsx b/src/shared/component/TimeBlockDrawer/TimeBlockDrawer.tsx new file mode 100644 index 000000000..00b7f420b --- /dev/null +++ b/src/shared/component/TimeBlockDrawer/TimeBlockDrawer.tsx @@ -0,0 +1,51 @@ +import { useEffect } from 'react'; +import { useLocation } from 'react-router-dom'; + +import CloseButton from '@/common/asset/svg/ic_close.svg?react'; +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 { useOutsideClick } from '@/common/hook'; + +import { BLOCK_ICON } from '@/page/archiving/index/constant/icon'; +import { formattingDate } from '@/page/archiving/index/util/date'; + +import { containerStyle } from '@/shared/component/TimeBlockDrawer/TimeBlockDrawer.style'; +import { PATH } from '@/shared/constant/path'; +import { useDrawerAction, useDrawerContent, useDrawerIsOpen } from '@/shared/store/drawer'; + +const TimeBlockDrawer = () => { + const isOpen = useDrawerIsOpen(); + const { closeDrawer } = useDrawerAction(); + const content = useDrawerContent(); + + const { pathname } = useLocation(); + + const ref = useOutsideClick(closeDrawer); + + useEffect(() => { + /** Open 상태에서 라우트 이동 시 닫음 */ + if (isOpen && pathname !== PATH.ARCHIVING) { + closeDrawer(); + } + }, [isOpen, closeDrawer, pathname]); + + return content ? ( + + ) : ( + <> + ); +}; + +export default TimeBlockDrawer; diff --git a/src/shared/store/drawer.ts b/src/shared/store/drawer.ts index 3edf98103..3676be3c7 100644 --- a/src/shared/store/drawer.ts +++ b/src/shared/store/drawer.ts @@ -4,9 +4,11 @@ import { File } from '@/shared/type/file'; type DrawerContent = { title: string; - startDate: string; - endDate: string; + startDate: Date; + endDate: Date; files: File[]; + blockType: string; + color: string; } | null; interface DrawerStore { From f60403097cf76020b00fb607fe332387fa8b8dab Mon Sep 17 00:00:00 2001 From: kimkyuhong Date: Wed, 13 Nov 2024 21:02:20 +0900 Subject: [PATCH 02/19] =?UTF-8?q?fix:=20command=20button=20secondary=20?= =?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../component/CommandButton/CommandButton.style.ts | 10 +++++++++- src/common/component/CommandButton/CommandButton.tsx | 2 +- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/src/common/component/CommandButton/CommandButton.style.ts b/src/common/component/CommandButton/CommandButton.style.ts index d3dc609c0..396b96397 100644 --- a/src/common/component/CommandButton/CommandButton.style.ts +++ b/src/common/component/CommandButton/CommandButton.style.ts @@ -38,7 +38,7 @@ export const commonStyle = css({ }); export const keyStyle = ( - variant: Extract<'primary' | 'tertiary' | 'outline', Omit['variant']> + variant: Extract<'primary' | 'tertiary' | 'outline' | 'secondary', Omit['variant']> ) => { const style = { primary: css({ @@ -49,6 +49,14 @@ export const keyStyle = ( color: theme.colors.gray_500, }, }), + secondary: css({ + backgroundColor: theme.colors.gray_100, + + '&:disabled:not(:focus)': { + backgroundColor: theme.colors.gray_100, + color: theme.colors.gray_500, + }, + }), tertiary: css({ backgroundColor: theme.colors.gray_100, diff --git a/src/common/component/CommandButton/CommandButton.tsx b/src/common/component/CommandButton/CommandButton.tsx index b73119132..6b5c32202 100644 --- a/src/common/component/CommandButton/CommandButton.tsx +++ b/src/common/component/CommandButton/CommandButton.tsx @@ -12,7 +12,7 @@ import { } from '@/common/component/CommandButton/CommandButton.style'; export interface CommandButtonProps extends ButtonProps { - variant?: Extract; + variant?: Extract; size?: Extract; commandKey: string; isCommand?: boolean; From 87696530b0c8eaa94ead5960ac65bcccbf8a3ec4 Mon Sep 17 00:00:00 2001 From: kimkyuhong Date: Thu, 14 Nov 2024 02:06:47 +0900 Subject: [PATCH 03/19] =?UTF-8?q?docs:=20svg=20=ED=8C=8C=EC=9D=BC=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/common/asset/svg/ic_group.svg | 5 +++++ src/common/asset/svg/ic_note_black.svg | 3 +++ src/common/asset/svg/ic_paper.svg | 3 +++ src/common/asset/svg/ic_subdirectory_arrow_right.svg | 3 +++ 4 files changed, 14 insertions(+) create mode 100644 src/common/asset/svg/ic_group.svg create mode 100644 src/common/asset/svg/ic_note_black.svg create mode 100644 src/common/asset/svg/ic_paper.svg create mode 100644 src/common/asset/svg/ic_subdirectory_arrow_right.svg diff --git a/src/common/asset/svg/ic_group.svg b/src/common/asset/svg/ic_group.svg new file mode 100644 index 000000000..749a73408 --- /dev/null +++ b/src/common/asset/svg/ic_group.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/common/asset/svg/ic_note_black.svg b/src/common/asset/svg/ic_note_black.svg new file mode 100644 index 000000000..7a5f639ae --- /dev/null +++ b/src/common/asset/svg/ic_note_black.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/common/asset/svg/ic_paper.svg b/src/common/asset/svg/ic_paper.svg new file mode 100644 index 000000000..d61abf283 --- /dev/null +++ b/src/common/asset/svg/ic_paper.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/common/asset/svg/ic_subdirectory_arrow_right.svg b/src/common/asset/svg/ic_subdirectory_arrow_right.svg new file mode 100644 index 000000000..056aea43c --- /dev/null +++ b/src/common/asset/svg/ic_subdirectory_arrow_right.svg @@ -0,0 +1,3 @@ + + + From e656fa6d416077ab85b5a6dbf90976f9cd37a958 Mon Sep 17 00:00:00 2001 From: kimkyuhong Date: Thu, 14 Nov 2024 02:07:40 +0900 Subject: [PATCH 04/19] =?UTF-8?q?refactor:=20commandButton=20style=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/common/component/Button/Button.style.ts | 6 +++--- src/common/component/CommandButton/CommandButton.style.ts | 6 ++++++ src/common/component/CommandButton/CommandButton.tsx | 2 +- 3 files changed, 10 insertions(+), 4 deletions(-) diff --git a/src/common/component/Button/Button.style.ts b/src/common/component/Button/Button.style.ts index 9109be359..887426dde 100644 --- a/src/common/component/Button/Button.style.ts +++ b/src/common/component/Button/Button.style.ts @@ -38,11 +38,11 @@ export const variantStyle = (variant: Required['variant']) => { }, }), secondary: css({ - color: theme.colors.key_500, - backgroundColor: theme.colors.key_100, + color: theme.colors.gray_800, + backgroundColor: theme.colors.white, '&:hover': { - backgroundColor: theme.colors.key_200, + backgroundColor: theme.colors.gray_100, }, }), tertiary: css({ diff --git a/src/common/component/CommandButton/CommandButton.style.ts b/src/common/component/CommandButton/CommandButton.style.ts index 396b96397..29827579c 100644 --- a/src/common/component/CommandButton/CommandButton.style.ts +++ b/src/common/component/CommandButton/CommandButton.style.ts @@ -98,6 +98,12 @@ export const sizeStyle = (size: Required['size']) => { small: css({ padding: '0.6rem 1.4rem', + ...theme.text.body08, + }), + /** Button_24 */ + xSmall: css({ + padding: '0.6rem 1rem', + ...theme.text.body08, }), }; diff --git a/src/common/component/CommandButton/CommandButton.tsx b/src/common/component/CommandButton/CommandButton.tsx index 6b5c32202..abea29cfa 100644 --- a/src/common/component/CommandButton/CommandButton.tsx +++ b/src/common/component/CommandButton/CommandButton.tsx @@ -13,7 +13,7 @@ import { export interface CommandButtonProps extends ButtonProps { variant?: Extract; - size?: Extract; + size?: Extract; commandKey: string; isCommand?: boolean; isFrontIcon?: boolean; From fb530344823dff958facbd23f0b0139827d6a4a0 Mon Sep 17 00:00:00 2001 From: kimkyuhong Date: Thu, 14 Nov 2024 02:08:29 +0900 Subject: [PATCH 05/19] =?UTF-8?q?feat:=20timeblock=20=EC=97=85=EB=A1=9C?= =?UTF-8?q?=EB=93=9C=EB=90=9C=20=ED=8C=8C=EC=9D=BC=20item=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../UploadedFiles/FileItem/FileItem.style.ts | 35 +++++++++++++++++++ .../UploadedFiles/FileItem/FileItem.tsx | 35 +++++++++++++++++++ 2 files changed, 70 insertions(+) create mode 100644 src/page/archiving/index/component/TimeBlockBar/UploadedFiles/FileItem/FileItem.style.ts create mode 100644 src/page/archiving/index/component/TimeBlockBar/UploadedFiles/FileItem/FileItem.tsx diff --git a/src/page/archiving/index/component/TimeBlockBar/UploadedFiles/FileItem/FileItem.style.ts b/src/page/archiving/index/component/TimeBlockBar/UploadedFiles/FileItem/FileItem.style.ts new file mode 100644 index 000000000..c5211cae1 --- /dev/null +++ b/src/page/archiving/index/component/TimeBlockBar/UploadedFiles/FileItem/FileItem.style.ts @@ -0,0 +1,35 @@ +import { css } from '@emotion/react'; + +import { theme } from '@/common/style/theme/theme'; + +export const containerStyle = css({ + gap: '1.2rem', + + width: '100%', + padding: '0.6rem', + + backgroundColor: theme.colors.gray_100, + borderRadius: '8px', +}); + +export const circleStyle = css({ + justifyContent: 'center', + alignItems: 'center', + + padding: '0.8rem', + + backgroundColor: theme.colors.white, + borderRadius: '16px', +}); + +export const fileTitleStyle = css({ + maxWidth: '18.2rem', + + whiteSpace: 'nowrap', + overflow: 'hidden', + textOverflow: 'ellipsis', +}); + +export const fileCapacityStyle = css({ + color: theme.colors.gray_800, +}); diff --git a/src/page/archiving/index/component/TimeBlockBar/UploadedFiles/FileItem/FileItem.tsx b/src/page/archiving/index/component/TimeBlockBar/UploadedFiles/FileItem/FileItem.tsx new file mode 100644 index 000000000..55cf2807c --- /dev/null +++ b/src/page/archiving/index/component/TimeBlockBar/UploadedFiles/FileItem/FileItem.tsx @@ -0,0 +1,35 @@ +import IcPDF from '@/common/asset/svg/ic_pdf_file.svg?react'; +import Flex from '@/common/component/Flex/Flex'; +import Text from '@/common/component/Text/Text'; + +import { + circleStyle, + containerStyle, + fileCapacityStyle, + fileTitleStyle, +} from '@/page/archiving/index/component/TimeBlockBar/UploadedFiles/FileItem/FileItem.style'; + +interface FileItemProps { + title: string; + capacity: string; +} + +const FileItem = ({ title, capacity }: FileItemProps) => { + return ( + + + + + + + {title} + + + {capacity} + + + + ); +}; + +export default FileItem; From 0a45d11b091ad28e1c63ec34a526121e6a862a92 Mon Sep 17 00:00:00 2001 From: kimkyuhong Date: Thu, 14 Nov 2024 02:09:31 +0900 Subject: [PATCH 06/19] =?UTF-8?q?feat:=20TimeBlock=20=EC=97=85=EB=A1=9C?= =?UTF-8?q?=EB=93=9C=EB=90=9C=20=ED=8C=8C=EC=9D=BC=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../UploadedFiles/UploadedFiles.style.ts | 0 .../UploadedFiles/UploadedFiles.tsx | 31 +++++++++++++++++++ 2 files changed, 31 insertions(+) create mode 100644 src/page/archiving/index/component/TimeBlockBar/UploadedFiles/UploadedFiles.style.ts create mode 100644 src/page/archiving/index/component/TimeBlockBar/UploadedFiles/UploadedFiles.tsx diff --git a/src/page/archiving/index/component/TimeBlockBar/UploadedFiles/UploadedFiles.style.ts b/src/page/archiving/index/component/TimeBlockBar/UploadedFiles/UploadedFiles.style.ts new file mode 100644 index 000000000..e69de29bb diff --git a/src/page/archiving/index/component/TimeBlockBar/UploadedFiles/UploadedFiles.tsx b/src/page/archiving/index/component/TimeBlockBar/UploadedFiles/UploadedFiles.tsx new file mode 100644 index 000000000..4bd928a37 --- /dev/null +++ b/src/page/archiving/index/component/TimeBlockBar/UploadedFiles/UploadedFiles.tsx @@ -0,0 +1,31 @@ +import IcPaper from '@/common/asset/svg/ic_paper.svg?react'; +import Flex from '@/common/component/Flex/Flex'; +import Text from '@/common/component/Text/Text'; + +import FileItem from '@/page/archiving/index/component/TimeBlockBar/UploadedFiles/FileItem/FileItem'; + +interface UploadedFileProps {} + +const UPLOADED_FILE_LIST = [ + { id: 1, title: '세상에서 제일 긴 제목을 지을거에요 나는', capacity: '2.4 MB' }, + { id: 2, title: 'OT 인수인계', capacity: '2.9 MB' }, + { id: 3, title: '엄마 나는 토스에 가고 싶어요', capacity: '10.7 MB' }, +]; + +const UploadedFile = ({}: UploadedFileProps) => { + return ( + + + + 업로드된 파일 + + + {UPLOADED_FILE_LIST.map((data) => ( + + ))} + + + ); +}; + +export default UploadedFile; From 38db8384439b5163e68a0d217903d4c3227a1879 Mon Sep 17 00:00:00 2001 From: kimkyuhong Date: Thu, 14 Nov 2024 02:11:12 +0900 Subject: [PATCH 07/19] =?UTF-8?q?feat:=20TimeBlock=20=ED=83=9C=EA=B7=B8?= =?UTF-8?q?=EB=90=9C=20=EC=9D=B8=EC=88=98=EC=9D=B8=EA=B3=84=20=EB=85=B8?= =?UTF-8?q?=ED=8A=B8=20item=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../TaggedNoteItem/TaggedNoteItem.style.ts | 16 ++++++++++++++ .../TaggedNoteItem/TaggedNoteItem.tsx | 22 +++++++++++++++++++ 2 files changed, 38 insertions(+) create mode 100644 src/page/archiving/index/component/TimeBlockBar/TaggedNotes/TaggedNoteItem/TaggedNoteItem.style.ts create mode 100644 src/page/archiving/index/component/TimeBlockBar/TaggedNotes/TaggedNoteItem/TaggedNoteItem.tsx diff --git a/src/page/archiving/index/component/TimeBlockBar/TaggedNotes/TaggedNoteItem/TaggedNoteItem.style.ts b/src/page/archiving/index/component/TimeBlockBar/TaggedNotes/TaggedNoteItem/TaggedNoteItem.style.ts new file mode 100644 index 000000000..6ea13a2b1 --- /dev/null +++ b/src/page/archiving/index/component/TimeBlockBar/TaggedNotes/TaggedNoteItem/TaggedNoteItem.style.ts @@ -0,0 +1,16 @@ +import { css } from '@emotion/react'; + +import { theme } from '@/common/style/theme/theme'; + +export const handoverNoteItemStyle = () => + css({ + maxWidth: '20.6rem', + padding: '0.6rem 1rem', + + border: `1px solid ${theme.colors.gray_300}`, + borderRadius: '12px', + + whiteSpace: 'nowrap', + overflow: 'hidden', + textOverflow: 'ellipsis', + }); diff --git a/src/page/archiving/index/component/TimeBlockBar/TaggedNotes/TaggedNoteItem/TaggedNoteItem.tsx b/src/page/archiving/index/component/TimeBlockBar/TaggedNotes/TaggedNoteItem/TaggedNoteItem.tsx new file mode 100644 index 000000000..f1b8e05c2 --- /dev/null +++ b/src/page/archiving/index/component/TimeBlockBar/TaggedNotes/TaggedNoteItem/TaggedNoteItem.tsx @@ -0,0 +1,22 @@ +import IcArrowRight from '@/common/asset/svg/ic_subdirectory_arrow_right.svg?react'; +import Flex from '@/common/component/Flex/Flex'; +import Text from '@/common/component/Text/Text'; + +import { handoverNoteItemStyle } from '@/page/archiving/index/component/TimeBlockBar/TaggedNotes/TaggedNoteItem/TaggedNoteItem.style'; + +interface TaggedNoteItemProps { + title: string; +} + +const TaggedNoteItem = ({ title }: TaggedNoteItemProps) => { + return ( + + + + {title} + + + ); +}; + +export default TaggedNoteItem; From 24b108613d02449675f26cd7a39d7403ac7a79bb Mon Sep 17 00:00:00 2001 From: kimkyuhong Date: Thu, 14 Nov 2024 02:12:11 +0900 Subject: [PATCH 08/19] =?UTF-8?q?feat:=20TimeBlock=20=ED=83=9C=EA=B7=B8?= =?UTF-8?q?=EB=90=9C=20=EC=9D=B8=EC=88=98=EC=9D=B8=EA=B3=84=20=EB=85=B8?= =?UTF-8?q?=ED=8A=B8=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../TaggedNotes/TaggedNotes.style.ts | 0 .../TimeBlockBar/TaggedNotes/TaggedNotes.tsx | 31 +++++++++++++++++++ 2 files changed, 31 insertions(+) create mode 100644 src/page/archiving/index/component/TimeBlockBar/TaggedNotes/TaggedNotes.style.ts create mode 100644 src/page/archiving/index/component/TimeBlockBar/TaggedNotes/TaggedNotes.tsx diff --git a/src/page/archiving/index/component/TimeBlockBar/TaggedNotes/TaggedNotes.style.ts b/src/page/archiving/index/component/TimeBlockBar/TaggedNotes/TaggedNotes.style.ts new file mode 100644 index 000000000..e69de29bb diff --git a/src/page/archiving/index/component/TimeBlockBar/TaggedNotes/TaggedNotes.tsx b/src/page/archiving/index/component/TimeBlockBar/TaggedNotes/TaggedNotes.tsx new file mode 100644 index 000000000..9d6927f77 --- /dev/null +++ b/src/page/archiving/index/component/TimeBlockBar/TaggedNotes/TaggedNotes.tsx @@ -0,0 +1,31 @@ +import IcNote from '@/common/asset/svg/ic_note_black.svg?react'; +import Flex from '@/common/component/Flex/Flex'; +import Text from '@/common/component/Text/Text'; + +import TaggedNoteItem from '@/page/archiving/index/component/TimeBlockBar/TaggedNotes/TaggedNoteItem/TaggedNoteItem'; + +interface TaggedNotesProps {} + +const HANDOVER_NOTE_LIST = [ + { id: 1, title: '세상에서 제일 긴 제목을 지을거에요 나는' }, + { id: 2, title: 'OT 인수인계' }, + { id: 3, title: '엄마 나는 토스에 가고 싶어요' }, +]; + +const TaggedNotes = ({}: TaggedNotesProps) => { + return ( + + + + 태그된 인수인계 노트 + + + {HANDOVER_NOTE_LIST.map((data) => ( + + ))} + + + ); +}; + +export default TaggedNotes; From 7f52f99c30c5f83feff033a6add02ecab787cee9 Mon Sep 17 00:00:00 2001 From: kimkyuhong Date: Thu, 14 Nov 2024 02:12:32 +0900 Subject: [PATCH 09/19] =?UTF-8?q?feat:=20TimeBlock=20info=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../TimeBlockBar/BlockInfo/BlockInfo.style.ts | 7 +++++ .../TimeBlockBar/BlockInfo/BlockInfo.tsx | 27 +++++++++++++++++++ 2 files changed, 34 insertions(+) create mode 100644 src/page/archiving/index/component/TimeBlockBar/BlockInfo/BlockInfo.style.ts create mode 100644 src/page/archiving/index/component/TimeBlockBar/BlockInfo/BlockInfo.tsx diff --git a/src/page/archiving/index/component/TimeBlockBar/BlockInfo/BlockInfo.style.ts b/src/page/archiving/index/component/TimeBlockBar/BlockInfo/BlockInfo.style.ts new file mode 100644 index 000000000..584722d2c --- /dev/null +++ b/src/page/archiving/index/component/TimeBlockBar/BlockInfo/BlockInfo.style.ts @@ -0,0 +1,7 @@ +import { css } from '@emotion/react'; + +import { theme } from '@/common/style/theme/theme'; + +export const periodStyle = css({ + color: theme.colors.gray_800, +}); diff --git a/src/page/archiving/index/component/TimeBlockBar/BlockInfo/BlockInfo.tsx b/src/page/archiving/index/component/TimeBlockBar/BlockInfo/BlockInfo.tsx new file mode 100644 index 000000000..c88cd7a05 --- /dev/null +++ b/src/page/archiving/index/component/TimeBlockBar/BlockInfo/BlockInfo.tsx @@ -0,0 +1,27 @@ +import Flex from '@/common/component/Flex/Flex'; +import Heading from '@/common/component/Heading/Heading'; +import Text from '@/common/component/Text/Text'; + +import { periodStyle } 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; +} + +const BlockInfo = ({ title, startDate, endDate }: BlockInfoProps) => { + return ( + + + {title} + + + {formattingDate(startDate)} ~ {formattingDate(endDate)} + + + ); +}; + +export default BlockInfo; From 33987b7cc2b5e167a456887c676370b9ef4cb523 Mon Sep 17 00:00:00 2001 From: kimkyuhong Date: Thu, 14 Nov 2024 02:12:56 +0900 Subject: [PATCH 10/19] =?UTF-8?q?feat:=20TimeBlockBar=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../TimeBlockBar/TimeBlockBar.style.ts | 20 +++++-- .../component/TimeBlockBar/TimeBlockBar.tsx | 57 ++++++++++--------- 2 files changed, 45 insertions(+), 32 deletions(-) diff --git a/src/page/archiving/index/component/TimeBlockBar/TimeBlockBar.style.ts b/src/page/archiving/index/component/TimeBlockBar/TimeBlockBar.style.ts index 334d439f4..43e18f110 100644 --- a/src/page/archiving/index/component/TimeBlockBar/TimeBlockBar.style.ts +++ b/src/page/archiving/index/component/TimeBlockBar/TimeBlockBar.style.ts @@ -2,10 +2,22 @@ import { css } from '@emotion/react'; import { theme } from '@/common/style/theme/theme'; -export const containerStyle = () => +export const closeBtnStyle = css({ + position: 'absolute', + + right: '2.2rem', + top: '3.2rem', + + cursor: 'pointer', +}); + +export const circleStyle = (color: string) => css({ - width: '27rem', - height: '100vh', + alignItems: 'center', + justifyContent: 'center', + + padding: '0.6rem', - borderLeft: `1px solid ${theme.colors.gray_300}`, + borderRadius: '18px', + backgroundColor: color, }); diff --git a/src/page/archiving/index/component/TimeBlockBar/TimeBlockBar.tsx b/src/page/archiving/index/component/TimeBlockBar/TimeBlockBar.tsx index 1069681c3..310ae7527 100644 --- a/src/page/archiving/index/component/TimeBlockBar/TimeBlockBar.tsx +++ b/src/page/archiving/index/component/TimeBlockBar/TimeBlockBar.tsx @@ -1,40 +1,41 @@ import CloseButton from '@/common/asset/svg/ic_close.svg?react'; -import Button from '@/common/component/Button/Button'; +import CommandButton from '@/common/component/CommandButton/CommandButton'; import Flex from '@/common/component/Flex/Flex'; -import Heading from '@/common/component/Heading/Heading'; -import Text from '@/common/component/Text/Text'; -import { containerStyle } from '@/page/archiving/index/component/TimeBlockBar/TimeBlockBar.style'; +import BlockInfo from '@/page/archiving/index/component/TimeBlockBar/BlockInfo/BlockInfo'; +import TaggedNotes from '@/page/archiving/index/component/TimeBlockBar/TaggedNotes/TaggedNotes'; +import { circleStyle, closeBtnStyle } from '@/page/archiving/index/component/TimeBlockBar/TimeBlockBar.style'; +import UploadedFiles from '@/page/archiving/index/component/TimeBlockBar/UploadedFiles/UploadedFiles'; import { BLOCK_ICON } from '@/page/archiving/index/constant/icon'; -import { formattingDate } from '@/page/archiving/index/util/date'; + +import { DrawerContent } from '@/shared/store/drawer'; interface TimeBlockBarProps { - title: string; - startDate: Date; - endDate: Date; - blockType: string; - color: string; + content: DrawerContent; } -const TimeBlockBar = ({ - title = 'OT 준비', - startDate = new Date('2024.09.13'), - endDate = new Date('2024.09.15'), - blockType = 'MEETING', - color = '#FFE6E8', -}: TimeBlockBarProps) => { +const TimeBlockBar = ({ content }: TimeBlockBarProps) => { return ( - + content && ( + <> + + + + + {BLOCK_ICON.find((icon) => icon.name === content.blockType)?.icon(content.color)} + + + 수정하기 + + + + + + + + + + ) ); }; From c7ce363fff57bc3de49106cb9877ab4508634ab1 Mon Sep 17 00:00:00 2001 From: kimkyuhong Date: Thu, 14 Nov 2024 02:13:14 +0900 Subject: [PATCH 11/19] =?UTF-8?q?feat:=20TimeBlockDrawer=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../TimeBlockDrawer/TimeBlockDrawer.style.ts | 3 ++- .../TimeBlockDrawer/TimeBlockDrawer.tsx | 18 ++---------------- 2 files changed, 4 insertions(+), 17 deletions(-) diff --git a/src/shared/component/TimeBlockDrawer/TimeBlockDrawer.style.ts b/src/shared/component/TimeBlockDrawer/TimeBlockDrawer.style.ts index e87207193..fb4cbd3c2 100644 --- a/src/shared/component/TimeBlockDrawer/TimeBlockDrawer.style.ts +++ b/src/shared/component/TimeBlockDrawer/TimeBlockDrawer.style.ts @@ -4,13 +4,14 @@ import { theme } from '@/common/style/theme/theme'; export const containerStyle = (isOpen: boolean) => css({ + flexShrink: 0, position: 'sticky', right: 0, - zIndex: theme.zIndex.overlayMiddle, width: isOpen ? '27rem' : 0, height: 'calc(100vh)', + padding: '0 1.6rem', overflow: 'hidden', diff --git a/src/shared/component/TimeBlockDrawer/TimeBlockDrawer.tsx b/src/shared/component/TimeBlockDrawer/TimeBlockDrawer.tsx index 00b7f420b..484d9c568 100644 --- a/src/shared/component/TimeBlockDrawer/TimeBlockDrawer.tsx +++ b/src/shared/component/TimeBlockDrawer/TimeBlockDrawer.tsx @@ -1,15 +1,9 @@ import { useEffect } from 'react'; import { useLocation } from 'react-router-dom'; -import CloseButton from '@/common/asset/svg/ic_close.svg?react'; -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 { useOutsideClick } from '@/common/hook'; -import { BLOCK_ICON } from '@/page/archiving/index/constant/icon'; -import { formattingDate } from '@/page/archiving/index/util/date'; +import TimeBlockBar from '@/page/archiving/index/component/TimeBlockBar/TimeBlockBar'; import { containerStyle } from '@/shared/component/TimeBlockDrawer/TimeBlockDrawer.style'; import { PATH } from '@/shared/constant/path'; @@ -33,15 +27,7 @@ const TimeBlockDrawer = () => { return content ? ( ) : ( <> From 9dbf34cf2ef544525dda1afc257b2f1e920ea6b3 Mon Sep 17 00:00:00 2001 From: kimkyuhong Date: Thu, 14 Nov 2024 02:26:33 +0900 Subject: [PATCH 12/19] =?UTF-8?q?feat:=20TimeBlockBar=20close=20=EB=B2=84?= =?UTF-8?q?=ED=8A=BC=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 3 ++- src/page/archiving/index/ArchivingPage.tsx | 8 ++++++-- .../index/component/TimeBlockBar/TimeBlockBar.tsx | 5 +++-- src/shared/component/TimeBlockDrawer/TimeBlockDrawer.tsx | 2 +- src/shared/store/drawer.ts | 6 ++++-- 5 files changed, 16 insertions(+), 8 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index b700a2e98..8e295566b 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -11,6 +11,7 @@ import { HTTPError } from '@/shared/api/HTTPError'; import Header from '@/shared/component/Header/Header'; import ModalContainer from '@/shared/component/Modal/ModalContainer'; import SideNavBar from '@/shared/component/SideNavBar/SideNavBar'; +import TimeBlockDrawer from '@/shared/component/TimeBlockDrawer/TimeBlockDrawer'; import { HTTP_STATUS_CODE } from '@/shared/constant/api'; import { PATH } from '@/shared/constant/path'; import ErrorPage from '@/shared/page/errorPage/ErrorPage'; @@ -53,7 +54,7 @@ const App = () => {
- + ); diff --git a/src/page/archiving/index/ArchivingPage.tsx b/src/page/archiving/index/ArchivingPage.tsx index 99ec741df..d05a3e963 100644 --- a/src/page/archiving/index/ArchivingPage.tsx +++ b/src/page/archiving/index/ArchivingPage.tsx @@ -32,8 +32,12 @@ const ArchivingPage = () => { /** TODO: 추후 block id에 따른 API 응답으로 데이터 넣기 */ openDrawer({ title: selectedBlockFromDashboard.name, - startDate: '2024-09-13', - endDate: '2024-09-24', + startDate: new Date('2024-09-13'), + endDate: new Date('2024-09-24'), + blockType: 'MEETING', + color: '#FFE6E8', + taggedMembers: [], + handoverNotes: [], files: [], }); } diff --git a/src/page/archiving/index/component/TimeBlockBar/TimeBlockBar.tsx b/src/page/archiving/index/component/TimeBlockBar/TimeBlockBar.tsx index 310ae7527..47bd0791b 100644 --- a/src/page/archiving/index/component/TimeBlockBar/TimeBlockBar.tsx +++ b/src/page/archiving/index/component/TimeBlockBar/TimeBlockBar.tsx @@ -12,13 +12,14 @@ import { DrawerContent } from '@/shared/store/drawer'; interface TimeBlockBarProps { content: DrawerContent; + closeDrawer: () => void; } -const TimeBlockBar = ({ content }: TimeBlockBarProps) => { +const TimeBlockBar = ({ content, closeDrawer }: TimeBlockBarProps) => { return ( content && ( <> - + diff --git a/src/shared/component/TimeBlockDrawer/TimeBlockDrawer.tsx b/src/shared/component/TimeBlockDrawer/TimeBlockDrawer.tsx index 484d9c568..2dac098eb 100644 --- a/src/shared/component/TimeBlockDrawer/TimeBlockDrawer.tsx +++ b/src/shared/component/TimeBlockDrawer/TimeBlockDrawer.tsx @@ -27,7 +27,7 @@ const TimeBlockDrawer = () => { return content ? ( ) : ( <> diff --git a/src/shared/store/drawer.ts b/src/shared/store/drawer.ts index 3676be3c7..6ce877d90 100644 --- a/src/shared/store/drawer.ts +++ b/src/shared/store/drawer.ts @@ -2,13 +2,15 @@ import { create } from 'zustand'; import { File } from '@/shared/type/file'; -type DrawerContent = { +export type DrawerContent = { title: string; startDate: Date; endDate: Date; - files: File[]; blockType: string; color: string; + taggedMembers: []; + handoverNotes: []; + files: File[]; } | null; interface DrawerStore { From 5141d17542fab30a1c3a77ac795d0265e8062cc0 Mon Sep 17 00:00:00 2001 From: kimkyuhong Date: Thu, 14 Nov 2024 19:51:04 +0900 Subject: [PATCH 13/19] =?UTF-8?q?feat:=20=EC=88=98=EC=A0=95=ED=95=98?= =?UTF-8?q?=EA=B8=B0=20=EB=B7=B0=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/common/asset/svg/ic_cloud_upload.svg | 3 ++ .../TimeBlockBar/BlockInfo/BlockInfo.style.ts | 4 +++ .../TimeBlockBar/BlockInfo/BlockInfo.tsx | 26 +++++++++++------ .../TaggedNoteItem/TaggedNoteItem.style.ts | 18 ++++-------- .../TaggedNoteItem/TaggedNoteItem.tsx | 9 +++--- .../TimeBlockBar/TaggedNotes/TaggedNotes.tsx | 10 ++++--- .../component/TimeBlockBar/TimeBlockBar.tsx | 18 ++++++++---- .../UploadedFiles/FileItem/FileItem.style.ts | 8 ++++- .../UploadedFiles/FileItem/FileItem.tsx | 29 ++++++++++++------- .../UploadedFiles/UploadedFiles.tsx | 20 +++++++++---- 10 files changed, 93 insertions(+), 52 deletions(-) create mode 100644 src/common/asset/svg/ic_cloud_upload.svg diff --git a/src/common/asset/svg/ic_cloud_upload.svg b/src/common/asset/svg/ic_cloud_upload.svg new file mode 100644 index 000000000..857510227 --- /dev/null +++ b/src/common/asset/svg/ic_cloud_upload.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/page/archiving/index/component/TimeBlockBar/BlockInfo/BlockInfo.style.ts b/src/page/archiving/index/component/TimeBlockBar/BlockInfo/BlockInfo.style.ts index 584722d2c..962604c7c 100644 --- a/src/page/archiving/index/component/TimeBlockBar/BlockInfo/BlockInfo.style.ts +++ b/src/page/archiving/index/component/TimeBlockBar/BlockInfo/BlockInfo.style.ts @@ -5,3 +5,7 @@ import { theme } from '@/common/style/theme/theme'; export const periodStyle = css({ color: theme.colors.gray_800, }); + +export const titleInputStyle = css({ + width: '21.4rem', +}); diff --git a/src/page/archiving/index/component/TimeBlockBar/BlockInfo/BlockInfo.tsx b/src/page/archiving/index/component/TimeBlockBar/BlockInfo/BlockInfo.tsx index c88cd7a05..60c4173c2 100644 --- a/src/page/archiving/index/component/TimeBlockBar/BlockInfo/BlockInfo.tsx +++ b/src/page/archiving/index/component/TimeBlockBar/BlockInfo/BlockInfo.tsx @@ -1,25 +1,33 @@ +import DatePicker from '@/common/component/DatePicker'; import Flex from '@/common/component/Flex/Flex'; import Heading from '@/common/component/Heading/Heading'; +import Input from '@/common/component/Input/Input'; import Text from '@/common/component/Text/Text'; -import { periodStyle } from '@/page/archiving/index/component/TimeBlockBar/BlockInfo/BlockInfo.style'; +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; + isEdit: boolean; } -const BlockInfo = ({ title, startDate, endDate }: BlockInfoProps) => { +const BlockInfo = ({ title, startDate, endDate, isEdit }: BlockInfoProps) => { return ( - - - {title} - - - {formattingDate(startDate)} ~ {formattingDate(endDate)} - + + {isEdit ? : {title}} + + {isEdit ? ( + + + + ) : ( + + {formattingDate(startDate)} ~ {formattingDate(endDate)} + + )} ); }; diff --git a/src/page/archiving/index/component/TimeBlockBar/TaggedNotes/TaggedNoteItem/TaggedNoteItem.style.ts b/src/page/archiving/index/component/TimeBlockBar/TaggedNotes/TaggedNoteItem/TaggedNoteItem.style.ts index 6ea13a2b1..0be9bb23f 100644 --- a/src/page/archiving/index/component/TimeBlockBar/TaggedNotes/TaggedNoteItem/TaggedNoteItem.style.ts +++ b/src/page/archiving/index/component/TimeBlockBar/TaggedNotes/TaggedNoteItem/TaggedNoteItem.style.ts @@ -1,16 +1,8 @@ import { css } from '@emotion/react'; -import { theme } from '@/common/style/theme/theme'; +export const handoverNoteItemStyle = css({ + maxWidth: '20.6rem', -export const handoverNoteItemStyle = () => - css({ - maxWidth: '20.6rem', - padding: '0.6rem 1rem', - - border: `1px solid ${theme.colors.gray_300}`, - borderRadius: '12px', - - whiteSpace: 'nowrap', - overflow: 'hidden', - textOverflow: 'ellipsis', - }); + overflow: 'hidden', + textOverflow: 'ellipsis', +}); diff --git a/src/page/archiving/index/component/TimeBlockBar/TaggedNotes/TaggedNoteItem/TaggedNoteItem.tsx b/src/page/archiving/index/component/TimeBlockBar/TaggedNotes/TaggedNoteItem/TaggedNoteItem.tsx index f1b8e05c2..d5152a208 100644 --- a/src/page/archiving/index/component/TimeBlockBar/TaggedNotes/TaggedNoteItem/TaggedNoteItem.tsx +++ b/src/page/archiving/index/component/TimeBlockBar/TaggedNotes/TaggedNoteItem/TaggedNoteItem.tsx @@ -1,20 +1,21 @@ import IcArrowRight from '@/common/asset/svg/ic_subdirectory_arrow_right.svg?react'; +import Button from '@/common/component/Button/Button'; import Flex from '@/common/component/Flex/Flex'; -import Text from '@/common/component/Text/Text'; import { handoverNoteItemStyle } from '@/page/archiving/index/component/TimeBlockBar/TaggedNotes/TaggedNoteItem/TaggedNoteItem.style'; interface TaggedNoteItemProps { title: string; + isEdit: boolean; } -const TaggedNoteItem = ({ title }: TaggedNoteItemProps) => { +const TaggedNoteItem = ({ title, isEdit }: TaggedNoteItemProps) => { return ( - + ); }; diff --git a/src/page/archiving/index/component/TimeBlockBar/TaggedNotes/TaggedNotes.tsx b/src/page/archiving/index/component/TimeBlockBar/TaggedNotes/TaggedNotes.tsx index 9d6927f77..22b2e5329 100644 --- a/src/page/archiving/index/component/TimeBlockBar/TaggedNotes/TaggedNotes.tsx +++ b/src/page/archiving/index/component/TimeBlockBar/TaggedNotes/TaggedNotes.tsx @@ -4,15 +4,17 @@ import Text from '@/common/component/Text/Text'; import TaggedNoteItem from '@/page/archiving/index/component/TimeBlockBar/TaggedNotes/TaggedNoteItem/TaggedNoteItem'; -interface TaggedNotesProps {} +interface TaggedNotesProps { + isEdit: boolean; +} const HANDOVER_NOTE_LIST = [ - { id: 1, title: '세상에서 제일 긴 제목을 지을거에요 나는' }, + { id: 1, title: '세상에서 제일 긴 제목을 지을거에요 나는 하하하하하하하ㅏ핳하' }, { id: 2, title: 'OT 인수인계' }, { id: 3, title: '엄마 나는 토스에 가고 싶어요' }, ]; -const TaggedNotes = ({}: TaggedNotesProps) => { +const TaggedNotes = ({ isEdit }: TaggedNotesProps) => { return ( @@ -21,7 +23,7 @@ const TaggedNotes = ({}: TaggedNotesProps) => { {HANDOVER_NOTE_LIST.map((data) => ( - + ))} diff --git a/src/page/archiving/index/component/TimeBlockBar/TimeBlockBar.tsx b/src/page/archiving/index/component/TimeBlockBar/TimeBlockBar.tsx index 47bd0791b..7bb105ed8 100644 --- a/src/page/archiving/index/component/TimeBlockBar/TimeBlockBar.tsx +++ b/src/page/archiving/index/component/TimeBlockBar/TimeBlockBar.tsx @@ -1,3 +1,5 @@ +import { useState } from 'react'; + import CloseButton from '@/common/asset/svg/ic_close.svg?react'; import CommandButton from '@/common/component/CommandButton/CommandButton'; import Flex from '@/common/component/Flex/Flex'; @@ -16,6 +18,12 @@ interface TimeBlockBarProps { } const TimeBlockBar = ({ content, closeDrawer }: TimeBlockBarProps) => { + const [isEdit, setIsEdit] = useState(false); + + const handleEditClick = () => { + setIsEdit((prevState) => !prevState); + }; + return ( content && ( <> @@ -25,15 +33,15 @@ const TimeBlockBar = ({ content, closeDrawer }: TimeBlockBarProps) => { {BLOCK_ICON.find((icon) => icon.name === content.blockType)?.icon(content.color)} - - 수정하기 + + {isEdit ? '저장' : '수정하기'} - - - + + + ) diff --git a/src/page/archiving/index/component/TimeBlockBar/UploadedFiles/FileItem/FileItem.style.ts b/src/page/archiving/index/component/TimeBlockBar/UploadedFiles/FileItem/FileItem.style.ts index c5211cae1..5ca177ce4 100644 --- a/src/page/archiving/index/component/TimeBlockBar/UploadedFiles/FileItem/FileItem.style.ts +++ b/src/page/archiving/index/component/TimeBlockBar/UploadedFiles/FileItem/FileItem.style.ts @@ -4,6 +4,8 @@ import { theme } from '@/common/style/theme/theme'; export const containerStyle = css({ gap: '1.2rem', + alignItems: 'center', + justifyContent: 'space-between', width: '100%', padding: '0.6rem', @@ -23,7 +25,7 @@ export const circleStyle = css({ }); export const fileTitleStyle = css({ - maxWidth: '18.2rem', + maxWidth: '15rem', whiteSpace: 'nowrap', overflow: 'hidden', @@ -33,3 +35,7 @@ export const fileTitleStyle = css({ export const fileCapacityStyle = css({ color: theme.colors.gray_800, }); + +export const closeBtnStyle = css({ + cursor: 'pointer', +}); diff --git a/src/page/archiving/index/component/TimeBlockBar/UploadedFiles/FileItem/FileItem.tsx b/src/page/archiving/index/component/TimeBlockBar/UploadedFiles/FileItem/FileItem.tsx index 55cf2807c..4f3ae18dd 100644 --- a/src/page/archiving/index/component/TimeBlockBar/UploadedFiles/FileItem/FileItem.tsx +++ b/src/page/archiving/index/component/TimeBlockBar/UploadedFiles/FileItem/FileItem.tsx @@ -1,9 +1,11 @@ +import CloseButton from '@/common/asset/svg/ic_close.svg?react'; import IcPDF from '@/common/asset/svg/ic_pdf_file.svg?react'; import Flex from '@/common/component/Flex/Flex'; import Text from '@/common/component/Text/Text'; import { circleStyle, + closeBtnStyle, containerStyle, fileCapacityStyle, fileTitleStyle, @@ -12,22 +14,27 @@ import { interface FileItemProps { title: string; capacity: string; + isEdit: boolean; } -const FileItem = ({ title, capacity }: FileItemProps) => { +const FileItem = ({ title, capacity, isEdit }: FileItemProps) => { return ( - - - - - - {title} - - - {capacity} - + + + + + + + {title} + + + {capacity} + + + + {isEdit && } ); }; diff --git a/src/page/archiving/index/component/TimeBlockBar/UploadedFiles/UploadedFiles.tsx b/src/page/archiving/index/component/TimeBlockBar/UploadedFiles/UploadedFiles.tsx index 4bd928a37..26dfbd4ce 100644 --- a/src/page/archiving/index/component/TimeBlockBar/UploadedFiles/UploadedFiles.tsx +++ b/src/page/archiving/index/component/TimeBlockBar/UploadedFiles/UploadedFiles.tsx @@ -1,10 +1,14 @@ +import IcCloudUpload from '@/common/asset/svg/ic_cloud_upload.svg?react'; import IcPaper from '@/common/asset/svg/ic_paper.svg?react'; +import Button from '@/common/component/Button/Button'; import Flex from '@/common/component/Flex/Flex'; import Text from '@/common/component/Text/Text'; import FileItem from '@/page/archiving/index/component/TimeBlockBar/UploadedFiles/FileItem/FileItem'; -interface UploadedFileProps {} +interface UploadedFileProps { + isEdit: boolean; +} const UPLOADED_FILE_LIST = [ { id: 1, title: '세상에서 제일 긴 제목을 지을거에요 나는', capacity: '2.4 MB' }, @@ -12,16 +16,22 @@ const UPLOADED_FILE_LIST = [ { id: 3, title: '엄마 나는 토스에 가고 싶어요', capacity: '10.7 MB' }, ]; -const UploadedFile = ({}: UploadedFileProps) => { +const UploadedFile = ({ isEdit }: UploadedFileProps) => { return ( - + 업로드된 파일 - + {isEdit && ( + + )} + {UPLOADED_FILE_LIST.map((data) => ( - + ))} From 12a6502ff1493f83f99e7b5b000b9939ecd50570 Mon Sep 17 00:00:00 2001 From: kimkyuhong Date: Thu, 14 Nov 2024 23:19:21 +0900 Subject: [PATCH 14/19] =?UTF-8?q?fix:=20textOverflow=20=EC=97=90=EB=9F=AC?= =?UTF-8?q?=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../TaggedNotes/TaggedNoteItem/TaggedNoteItem.style.ts | 3 +++ .../TimeBlockBar/TaggedNotes/TaggedNoteItem/TaggedNoteItem.tsx | 2 +- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/src/page/archiving/index/component/TimeBlockBar/TaggedNotes/TaggedNoteItem/TaggedNoteItem.style.ts b/src/page/archiving/index/component/TimeBlockBar/TaggedNotes/TaggedNoteItem/TaggedNoteItem.style.ts index 0be9bb23f..163bd5449 100644 --- a/src/page/archiving/index/component/TimeBlockBar/TaggedNotes/TaggedNoteItem/TaggedNoteItem.style.ts +++ b/src/page/archiving/index/component/TimeBlockBar/TaggedNotes/TaggedNoteItem/TaggedNoteItem.style.ts @@ -1,8 +1,11 @@ import { css } from '@emotion/react'; export const handoverNoteItemStyle = css({ + display: 'block', + maxWidth: '20.6rem', + whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', }); diff --git a/src/page/archiving/index/component/TimeBlockBar/TaggedNotes/TaggedNoteItem/TaggedNoteItem.tsx b/src/page/archiving/index/component/TimeBlockBar/TaggedNotes/TaggedNoteItem/TaggedNoteItem.tsx index d5152a208..f5cbf6c98 100644 --- a/src/page/archiving/index/component/TimeBlockBar/TaggedNotes/TaggedNoteItem/TaggedNoteItem.tsx +++ b/src/page/archiving/index/component/TimeBlockBar/TaggedNotes/TaggedNoteItem/TaggedNoteItem.tsx @@ -11,7 +11,7 @@ interface TaggedNoteItemProps { const TaggedNoteItem = ({ title, isEdit }: TaggedNoteItemProps) => { return ( - + diff --git a/src/page/archiving/index/component/TimeBlockBar/TaggedNotes/TaggedNotes.tsx b/src/page/archiving/index/component/TimeBlockBar/TaggedNotes/TaggedNotes.tsx index f91b8de2c..be917a1a1 100644 --- a/src/page/archiving/index/component/TimeBlockBar/TaggedNotes/TaggedNotes.tsx +++ b/src/page/archiving/index/component/TimeBlockBar/TaggedNotes/TaggedNotes.tsx @@ -6,17 +6,17 @@ import TaggedNoteItem from '@/page/archiving/index/component/TimeBlockBar/Tagged import { listHeaderStyle } from '@/page/archiving/index/component/TimeBlockBar/TimeBlockBar.style'; interface TaggedNotesProps { - isEdit: boolean; + isEditable: boolean; } -// 어차피 지워질애라 그냥 파일안에 두었습니다. +// TODO: API 추가 const HANDOVER_NOTE_LIST = [ { id: 1, title: '세상에서 제일 긴 제목을 지을거에요 나는 하하하하하하하ㅏ핳하' }, { id: 2, title: 'OT 인수인계' }, { id: 3, title: '엄마 나는 토스에 가고 싶어요' }, ]; -const TaggedNotes = ({ isEdit }: TaggedNotesProps) => { +const TaggedNotes = ({ isEditable }: TaggedNotesProps) => { return ( @@ -27,7 +27,7 @@ const TaggedNotes = ({ isEdit }: TaggedNotesProps) => { {HANDOVER_NOTE_LIST.map((data) => ( - + ))} diff --git a/src/page/archiving/index/component/TimeBlockBar/TimeBlockBar.tsx b/src/page/archiving/index/component/TimeBlockBar/TimeBlockBar.tsx index 076ca7f9c..452d239e9 100644 --- a/src/page/archiving/index/component/TimeBlockBar/TimeBlockBar.tsx +++ b/src/page/archiving/index/component/TimeBlockBar/TimeBlockBar.tsx @@ -14,36 +14,41 @@ import { DrawerContent } from '@/shared/store/drawer'; interface TimeBlockBarProps { content: DrawerContent; - closeDrawer: () => void; + onCloseDrawer: () => void; } -const TimeBlockBar = ({ content, closeDrawer }: TimeBlockBarProps) => { - const [isEdit, setIsEdit] = useState(false); +const TimeBlockBar = ({ content, onCloseDrawer }: TimeBlockBarProps) => { + const [isEditable, setIsEditable] = useState(false); const handleEditClick = () => { - setIsEdit((prevState) => !prevState); + setIsEditable((prevState) => !prevState); }; return ( content && ( - <> - +
+ {BLOCK_ICON.find((icon) => icon.name === content.blockType)?.icon(content.color)} - - {isEdit ? '저장' : '수정하기'} + + {isEditable ? '저장' : '수정하기'} - - - + + + - +
) ); }; diff --git a/src/page/archiving/index/component/TimeBlockBar/UploadedFiles/FileItem/FileItem.tsx b/src/page/archiving/index/component/TimeBlockBar/UploadedFiles/FileItem/FileItem.tsx index 4f3ae18dd..20d570c9d 100644 --- a/src/page/archiving/index/component/TimeBlockBar/UploadedFiles/FileItem/FileItem.tsx +++ b/src/page/archiving/index/component/TimeBlockBar/UploadedFiles/FileItem/FileItem.tsx @@ -14,12 +14,12 @@ import { interface FileItemProps { title: string; capacity: string; - isEdit: boolean; + isEditable: boolean; } -const FileItem = ({ title, capacity, isEdit }: FileItemProps) => { +const FileItem = ({ title, capacity, isEditable }: FileItemProps) => { return ( - +
  • @@ -34,8 +34,8 @@ const FileItem = ({ title, capacity, isEdit }: FileItemProps) => { - {isEdit && } - + {isEditable && } +
    • ); }; diff --git a/src/page/archiving/index/component/TimeBlockBar/UploadedFiles/UploadedFiles.tsx b/src/page/archiving/index/component/TimeBlockBar/UploadedFiles/UploadedFiles.tsx index 4e9be1e58..2103196d4 100644 --- a/src/page/archiving/index/component/TimeBlockBar/UploadedFiles/UploadedFiles.tsx +++ b/src/page/archiving/index/component/TimeBlockBar/UploadedFiles/UploadedFiles.tsx @@ -8,17 +8,17 @@ import { listHeaderStyle } from '@/page/archiving/index/component/TimeBlockBar/T import FileItem from '@/page/archiving/index/component/TimeBlockBar/UploadedFiles/FileItem/FileItem'; interface UploadedFileProps { - isEdit: boolean; + isEditable: boolean; } -// 어차피 지워질애라 그냥 파일안에 두었습니다. +// TODO: API 추가 const UPLOADED_FILE_LIST = [ { id: 1, title: '세상에서 제일 긴 제목을 지을거에요 나는', capacity: '2.4 MB' }, { id: 2, title: 'OT 인수인계', capacity: '2.9 MB' }, { id: 3, title: '엄마 나는 토스에 가고 싶어요', capacity: '10.7 MB' }, ]; -const UploadedFile = ({ isEdit }: UploadedFileProps) => { +const UploadedFile = ({ isEditable }: UploadedFileProps) => { return ( @@ -27,7 +27,7 @@ const UploadedFile = ({ isEdit }: UploadedFileProps) => { 업로드된 파일 - {isEdit && ( + {isEditable && (