From fc49f3e1f847036d2beae76a64b9af3359716487 Mon Sep 17 00:00:00 2001 From: foxholic9 Date: Wed, 12 Jun 2024 21:21:31 +0900 Subject: [PATCH 1/6] =?UTF-8?q?Feat:=20=EC=B9=B4=EB=93=9C=20=ED=83=9C?= =?UTF-8?q?=EA=B7=B8=EB=A5=BC=20div=EC=97=90=EC=84=9C=20button=EC=9C=BC?= =?UTF-8?q?=EB=A1=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 하면서 css로 마진을 일부 수정했습니다. --- .../components/Column/Column.module.scss | 3 +- .../ColumnCard/ColumnCard.module.scss | 20 +++++-- .../components/ColumnCard/ColumnCard.tsx | 55 ++++++++----------- 3 files changed, 41 insertions(+), 37 deletions(-) diff --git a/src/pages/dashboard.{dashboardid}/components/Column/Column.module.scss b/src/pages/dashboard.{dashboardid}/components/Column/Column.module.scss index 12b6652..f578c21 100644 --- a/src/pages/dashboard.{dashboardid}/components/Column/Column.module.scss +++ b/src/pages/dashboard.{dashboardid}/components/Column/Column.module.scss @@ -20,10 +20,11 @@ } .addTaskButtonContainer { - margin: 0; + margin-bottom: 0.625rem; padding: 0 1.25rem; @include mobile { padding: 0 0.75rem; + margin-bottom: 0.375rem; } } diff --git a/src/pages/dashboard.{dashboardid}/components/ColumnCard/ColumnCard.module.scss b/src/pages/dashboard.{dashboardid}/components/ColumnCard/ColumnCard.module.scss index 0e0c1f3..9317077 100644 --- a/src/pages/dashboard.{dashboardid}/components/ColumnCard/ColumnCard.module.scss +++ b/src/pages/dashboard.{dashboardid}/components/ColumnCard/ColumnCard.module.scss @@ -1,7 +1,21 @@ @import '../../../../styles/utils.scss'; +.wrapper { + padding: 0.625rem 1.25rem; + + @include desktop { + width: 22.125rem; + } + @include tablet { + width: 100%; + } + @include mobile { + padding: 0.375rem 0.75rem; + width: 100%; + } +} .container { + text-align: left; width: 100%; - padding: 0; } .card { border: 1px solid var(--gray-D9D9D9, #d9d9d9); @@ -15,10 +29,8 @@ 'tag tag' 'date avatar'; gap: 0.625rem; - margin-right: 1.25rem; @include desktop { - margin: 1.25rem 1.25rem 0; max-width: 19.813rem; padding-top: 0.625rem; } @@ -26,7 +38,6 @@ @include tablet { height: 5.813rem; padding-left: 0; - margin: 1.25rem 1.25rem 0; grid-template-areas: 'img title title title' 'img tag date avatar'; @@ -37,7 +48,6 @@ } @include mobile { - margin: 0.75rem 0.75rem 0; padding: 0.75rem; padding-top: 0.125rem; } diff --git a/src/pages/dashboard.{dashboardid}/components/ColumnCard/ColumnCard.tsx b/src/pages/dashboard.{dashboardid}/components/ColumnCard/ColumnCard.tsx index 9bc2fe4..a3a778b 100644 --- a/src/pages/dashboard.{dashboardid}/components/ColumnCard/ColumnCard.tsx +++ b/src/pages/dashboard.{dashboardid}/components/ColumnCard/ColumnCard.tsx @@ -36,43 +36,36 @@ function ColumnCard({ cardId, cardData, columnData }: CardProps) { // 버튼 이벤트 핸들러 const cardOnClick = () => { - setManageCardModalOpen(!manageCardModalOpen); - }; - const handleKeyDown = () => { - setManageCardModalOpen(!manageCardModalOpen); + setManageCardModalOpen(true); }; // 컴포넌트 출력 return ( -
-
- {imageUrl && ( -
- uploadedTaskImage +
+ {manageCardModalOpen ? ( Date: Wed, 12 Jun 2024 21:27:04 +0900 Subject: [PATCH 2/6] =?UTF-8?q?Fix:=20=EC=BB=A4=EB=B0=8B=20=EB=88=84?= =?UTF-8?q?=EB=9D=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit vscode 상에서 저장이 안된 컴포넌트가 있었습니다. --- .../dashboard.{dashboardid}/components/CardList/CardList.tsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/pages/dashboard.{dashboardid}/components/CardList/CardList.tsx b/src/pages/dashboard.{dashboardid}/components/CardList/CardList.tsx index af6b669..a22518b 100644 --- a/src/pages/dashboard.{dashboardid}/components/CardList/CardList.tsx +++ b/src/pages/dashboard.{dashboardid}/components/CardList/CardList.tsx @@ -1,4 +1,3 @@ -import { ReactEventHandler } from 'react'; import ColumnCard from '../ColumnCard/ColumnCard'; import { CardOverAll } from '../../../../api/apiModule'; @@ -11,7 +10,6 @@ interface CardListProps { dashboardId: number; }; setElement: React.Dispatch>; - handleCardOnclick: ReactEventHandler; } function CardList({ @@ -19,7 +17,6 @@ function CardList({ hasNext, columnData, setElement, - handleCardOnclick, }: CardListProps) { return (
@@ -29,7 +26,6 @@ function CardList({ cardId={cardData.id} cardData={cardData} columnData={columnData} - handleCardOnclick={handleCardOnclick} /> ))} {hasNext &&
} From 4ee99b6f8e6e958e6f0016cd68baf49960ddcb6e Mon Sep 17 00:00:00 2001 From: foxholic9 Date: Thu, 13 Jun 2024 14:08:47 +0900 Subject: [PATCH 3/6] =?UTF-8?q?style:=20=EC=BB=AC=EB=9F=BC=20border=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/Column/Column.module.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/pages/dashboard.{dashboardid}/components/Column/Column.module.scss b/src/pages/dashboard.{dashboardid}/components/Column/Column.module.scss index f578c21..7abc15c 100644 --- a/src/pages/dashboard.{dashboardid}/components/Column/Column.module.scss +++ b/src/pages/dashboard.{dashboardid}/components/Column/Column.module.scss @@ -6,6 +6,8 @@ position: relative; flex-flow: column; border: 1px solid #eee; + border-left: 0; + border-top: 0; overflow: scroll; @include desktop { From d4ebc94ba92605e08193c38bd2d90c305c80f74e Mon Sep 17 00:00:00 2001 From: foxholic9 Date: Thu, 13 Jun 2024 16:09:58 +0900 Subject: [PATCH 4/6] =?UTF-8?q?Feat:=20=EB=AA=A8=EB=8B=AC=20submit=20?= =?UTF-8?q?=EC=9D=91=EB=8B=B5=20=EC=8B=9C=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20?= =?UTF-8?q?=EA=B0=B1=EC=8B=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit api 동작 이후, 적절한 데이터를 다시 불러오도록 로직을 구현했습니다. 할 일 카드 상세 - 수정, 삭제 동작 이후 할 일 카드 생성 - 생성 동작 이후 컬럼 관리 - 이름 변경/ 삭제시 컬럼 추가 - 컬럼 추가시 --- .../components/CardList/CardList.tsx | 3 ++ .../components/Column/Column.tsx | 47 ++++++++++------ .../components/ColumnCard/ColumnCard.tsx | 20 +++++-- .../components/ColumnList/ColumnList.tsx | 7 +++ .../DeleteColumnModal/DeleteColumnModal.tsx | 3 ++ .../EditColumnManagement.tsx | 4 ++ .../modal/EditColumnModal/EditColumnModal.tsx | 3 ++ .../modal/EditTodoModal/EditTodoModal.tsx | 54 ++++++++++--------- .../modal/NewColumnModal/NewColumnModal.tsx | 30 ++++++++--- src/pages/modal/NewTodoModal/NewTodoModal.tsx | 3 ++ .../TodoCardManagement/TodoCardManagement.tsx | 4 ++ .../modal/TodoCardModal/TodoCardModal.tsx | 3 ++ 12 files changed, 127 insertions(+), 54 deletions(-) diff --git a/src/pages/dashboard.{dashboardid}/components/CardList/CardList.tsx b/src/pages/dashboard.{dashboardid}/components/CardList/CardList.tsx index a22518b..35038f7 100644 --- a/src/pages/dashboard.{dashboardid}/components/CardList/CardList.tsx +++ b/src/pages/dashboard.{dashboardid}/components/CardList/CardList.tsx @@ -10,6 +10,7 @@ interface CardListProps { dashboardId: number; }; setElement: React.Dispatch>; + afterSubmit: () => void; } function CardList({ @@ -17,6 +18,7 @@ function CardList({ hasNext, columnData, setElement, + afterSubmit, }: CardListProps) { return (
@@ -26,6 +28,7 @@ function CardList({ cardId={cardData.id} cardData={cardData} columnData={columnData} + afterSubmit={afterSubmit} /> ))} {hasNext &&
} diff --git a/src/pages/dashboard.{dashboardid}/components/Column/Column.tsx b/src/pages/dashboard.{dashboardid}/components/Column/Column.tsx index 2434fd2..6e64e68 100644 --- a/src/pages/dashboard.{dashboardid}/components/Column/Column.tsx +++ b/src/pages/dashboard.{dashboardid}/components/Column/Column.tsx @@ -14,6 +14,7 @@ interface ColumnProps { columnId: number; dashboardId: number; userId: number; + afterSubmit: ()=> void; } interface ColumnData { userId: number; @@ -26,6 +27,7 @@ function Column({ columnId, dashboardId, userId, + afterSubmit: changeColumnName, }: ColumnProps) { const [cardList, setCardList] = useState([]); const [columnData, setColumnData] = useState({ @@ -47,25 +49,26 @@ function Column({ const PAGE_SIZE = 5; // 처음 카드 목록을 조회 - useEffect(() => { - const getFirstCardList = async () => { - try { - const res = await apiGetCardList({ size: 10, columnId }); - const firstList = res.cards; - setCursor(res.cursorId); - setTotalCount(res.totalCount); - setCardList(firstList); - if (firstList.length < 10) { - setHasNext(false); - } else setHasNext(true); - } catch (error) { - const axiosError = error as AxiosError; - setErrorState(axiosError.message || '목록을 가져오는데 실패했습니다'); - } - }; + const getFirstCardList = async () => { + try { + const res = await apiGetCardList({ size: 10, columnId }); + const firstList = res.cards; + setCursor(res.cursorId); + setTotalCount(res.totalCount); + setCardList(firstList); + if (firstList.length < 10) { + setHasNext(false); + } else setHasNext(true); + } catch (error) { + const axiosError = error as AxiosError; + setErrorState(axiosError.message || '목록을 가져오는데 실패했습니다'); + } + }; + useEffect(() => { getFirstCardList(); - }, [columnId]); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); // 이후의 카드 목록을 조회 const getMoreCardList = async () => { @@ -118,6 +121,13 @@ function Column({ setAddCardModalOpen(!addCardModalOpen); }; + // 모달 응답 + const afterSubmit = () => { + setCardList([]); + setCursor(null); + getFirstCardList(); + }; + // 컴포넌트 출력 return (
@@ -138,6 +148,7 @@ function Column({ hasNext={hasNext} setElement={setElement} columnData={columnData} + afterSubmit={afterSubmit} /> {settingModalOpen ? ( ) : null} {addCardModalOpen ? ( @@ -155,6 +167,7 @@ function Column({ columnId={columnId} dashboardId={Number(dashboardId)} userId={userId} + afterSubmit={afterSubmit} /> ) : null}
diff --git a/src/pages/dashboard.{dashboardid}/components/ColumnCard/ColumnCard.tsx b/src/pages/dashboard.{dashboardid}/components/ColumnCard/ColumnCard.tsx index ed17ec7..abc9877 100644 --- a/src/pages/dashboard.{dashboardid}/components/ColumnCard/ColumnCard.tsx +++ b/src/pages/dashboard.{dashboardid}/components/ColumnCard/ColumnCard.tsx @@ -13,6 +13,7 @@ interface CardProps { columnId: number; dashboardId: number; }; + afterSubmit: () => void; } // 날짜 표시 formating @@ -24,10 +25,20 @@ const formatDate = (date: string) => { // 일정을 카드 모양으로 보여주는 컴포넌트입니다. // 사진, 제목, 태그, 기한, 작성자이미지를 prop으로 받습니다. // 현재 작성자 이미지 대신 이름만 보여지게 처리했습니다. 수정 필요합니다. -function ColumnCard({ cardId, cardData, columnData }: CardProps) { - const [manageCardModalOpen, setManageCardModalOpen] = - useState(false); - const { assignee, title, dueDate, tags, imageUrl } = cardData; +function ColumnCard({ + cardId, + cardData, + columnData, + afterSubmit, +}: CardProps) { + const [manageCardModalOpen, setManageCardModalOpen] = useState(false); + const { + assignee, + title, + dueDate, + tags, + imageUrl, + } = cardData; // 버튼 이벤트 핸들러 const cardOnClick = () => { @@ -70,6 +81,7 @@ function ColumnCard({ cardId, cardData, columnData }: CardProps) { userId={columnData.userId} columnId={columnData.columnId} cardId={cardId} + afterSubmit={afterSubmit} /> ) : null}
diff --git a/src/pages/dashboard.{dashboardid}/components/ColumnList/ColumnList.tsx b/src/pages/dashboard.{dashboardid}/components/ColumnList/ColumnList.tsx index 77a996d..9a7cd11 100644 --- a/src/pages/dashboard.{dashboardid}/components/ColumnList/ColumnList.tsx +++ b/src/pages/dashboard.{dashboardid}/components/ColumnList/ColumnList.tsx @@ -60,6 +60,11 @@ function ColumnList() { setAddColumnModalOpen(!addColumnModalOpen); }; + // 모달에서 응답이 올 시 + const afterSubmit = (): void => { + getColumnList(Number(dashboardId)); + }; + // 컴포넌트 출력 return ( @@ -71,6 +76,7 @@ function ColumnList() { title={columnData.title} dashboardId={Number(dashboardId)} userId={userId} + afterSubmit={afterSubmit} /> ))}
@@ -81,6 +87,7 @@ function ColumnList() { isOpen={addColumnModalOpen} setIsOpen={setAddColumnModalOpen} dashboardId={Number(dashboardId)} + afterSubmit={afterSubmit} /> ) : null} diff --git a/src/pages/modal/DeleteColumnModal/DeleteColumnModal.tsx b/src/pages/modal/DeleteColumnModal/DeleteColumnModal.tsx index 152165f..4da4f6f 100644 --- a/src/pages/modal/DeleteColumnModal/DeleteColumnModal.tsx +++ b/src/pages/modal/DeleteColumnModal/DeleteColumnModal.tsx @@ -15,6 +15,7 @@ interface ModalProps { setIsOpen: (isOpen: boolean) => void; openEditModal: () => void; columnId: number; + afterSubmit: () => void; } function DeleteColumnModal({ @@ -22,6 +23,7 @@ function DeleteColumnModal({ setIsOpen, openEditModal, columnId, + afterSubmit, }: ModalProps) { // 컬럼의 모든 카드를 삭제하는 동작 const apiDelete = async () => { @@ -31,6 +33,7 @@ function DeleteColumnModal({ } catch (error) { throw new Error('error'); } + afterSubmit(); }; // 취소를 클릭하면 컬럼 관리 모달로 돌아갑니다. diff --git a/src/pages/modal/EditColumnManagement/EditColumnManagement.tsx b/src/pages/modal/EditColumnManagement/EditColumnManagement.tsx index e05493e..925c0bb 100644 --- a/src/pages/modal/EditColumnManagement/EditColumnManagement.tsx +++ b/src/pages/modal/EditColumnManagement/EditColumnManagement.tsx @@ -15,6 +15,7 @@ interface ModalProps { dashboardId: number; columnId: number; columnTitle: string; + afterSubmit: () => void; } function EditColumnManagement({ @@ -23,6 +24,7 @@ function EditColumnManagement({ dashboardId, columnId, columnTitle, + afterSubmit, }: ModalProps) { const [editModalOpen, setEditModalOpen] = useState(true); const [deleteModalOpen, setDeleteModalOpen] = useState(false); @@ -47,6 +49,7 @@ function EditColumnManagement({ columnTitle={columnTitle} columnId={columnId} dashboardId={dashboardId} + afterSubmit={afterSubmit} /> )} {deleteModalOpen && ( @@ -55,6 +58,7 @@ function EditColumnManagement({ setIsOpen={setIsOpen} openEditModal={openEditModal} columnId={columnId} + afterSubmit={afterSubmit} /> )} diff --git a/src/pages/modal/EditColumnModal/EditColumnModal.tsx b/src/pages/modal/EditColumnModal/EditColumnModal.tsx index a210233..60e6aff 100644 --- a/src/pages/modal/EditColumnModal/EditColumnModal.tsx +++ b/src/pages/modal/EditColumnModal/EditColumnModal.tsx @@ -17,6 +17,7 @@ interface ModalProps { columnTitle: string; columnId: number; dashboardId: number; + afterSubmit: () => void; } interface ColumnOverAll { @@ -33,6 +34,7 @@ function EditColumnModal({ columnTitle, columnId, dashboardId, + afterSubmit, }: ModalProps) { const [inputValue, setInputValue] = useState(columnTitle); const [columnList, setColumnList] = useState>([]); @@ -74,6 +76,7 @@ function EditColumnModal({ } catch (error) { throw new Error('error'); } + afterSubmit(); }; // 삭제하기 버튼을 클릭하면 컬럼 삭제 모달이 열립니다. diff --git a/src/pages/modal/EditTodoModal/EditTodoModal.tsx b/src/pages/modal/EditTodoModal/EditTodoModal.tsx index 64bdd45..4643e44 100644 --- a/src/pages/modal/EditTodoModal/EditTodoModal.tsx +++ b/src/pages/modal/EditTodoModal/EditTodoModal.tsx @@ -4,7 +4,12 @@ import EditDropdownManagement from '../components/EditDropdownManagement/EditDro import Title from '../components/Title/Title'; import Calendar from '../components/Calendar/Calendar'; import TodoContent from '../components/TodoContent/TodoContent'; -import { apiGetColumnList, apiMemberList, apiUpdateCard } from '../../../api/apiModule'; +import { + apiGetColumnList, + apiMemberList, + apiUpdateCard, + CardOverAll, +} from '../../../api/apiModule'; import InputTag from '../components/InputTag/InputTag'; import InputImage from '../components/InputImage/InputImage'; import styles from './EditTodoModal.module.scss'; @@ -20,25 +25,6 @@ interface Member { isOwner: boolean; } -interface CardOverAll { - id: number; - title: string; - description: string; - tags: string[]; - dueDate: string; - assignee: { - profileImageUrl?: string; - nickname: string; - id: number; - }; - imageUrl?: string; - teamId: string; - columnId: number; - dashboardId: number; - createdAt: string; - updatedAt: string; -} - interface ModalProps { isOpen: boolean; setIsOpen: (isOpen: boolean) => void; @@ -48,6 +34,7 @@ interface ModalProps { userId: number; columnId: number; dashboardId: number; + afterSubmit: () => void; } function EditTodoModal({ @@ -59,6 +46,7 @@ function EditTodoModal({ userId, columnId, dashboardId, + afterSubmit, }: ModalProps) { const [cardState, setCardState] = useState(''); const [manager, setManager] = useState(''); @@ -71,7 +59,7 @@ function EditTodoModal({ const [members, setMembers] = useState([]); const [columnList, setColumnList] = useState([]); const [columnListId, setColumnListId] = useState([]); - const [clickColumnId, setClickColumnId] = useState(Number); + const [clickColumnId, setClickColumnId] = useState(columnId); useEffect(() => { const fetchMembers = async () => { @@ -106,11 +94,13 @@ function EditTodoModal({ const response = await apiGetColumnList(dashboardId); if (response.result === 'SUCCESS') { const titles = Array.isArray(response.data) - ? response.data.map((column) => column.title) : []; + ? response.data.map((column) => column.title) + : []; setColumnList(titles); const idList = Array.isArray(response.data) - ? response.data.map((column) => column.id) : []; + ? response.data.map((column) => column.id) + : []; setColumnListId(idList); const column = response.data.find((item) => item.id === columnId); @@ -146,6 +136,7 @@ function EditTodoModal({ } catch (error) { throw new Error('error'); } + afterSubmit(); }; const handleTodoOpen = () => { @@ -178,7 +169,10 @@ function EditTodoModal({ - <TodoContent description={description} setDescription={setDescription} /> + <TodoContent + description={description} + setDescription={setDescription} + /> <Calendar dueDate={dueDate} setDueDate={setDueDate} /> @@ -188,8 +182,16 @@ function EditTodoModal({ </div> <div className={styles.buttonBlock}> - <button className={styles.cancelButton} type="button" onClick={handleTodoOpen}>취소</button> - <button className={styles.createButton} type="submit">수정</button> + <button + className={styles.cancelButton} + type="button" + onClick={handleTodoOpen} + > + 취소 + </button> + <button className={styles.createButton} type="submit"> + 수정 + </button> </div> </form> </div> diff --git a/src/pages/modal/NewColumnModal/NewColumnModal.tsx b/src/pages/modal/NewColumnModal/NewColumnModal.tsx index 896d488..f9aab07 100644 --- a/src/pages/modal/NewColumnModal/NewColumnModal.tsx +++ b/src/pages/modal/NewColumnModal/NewColumnModal.tsx @@ -12,6 +12,7 @@ interface ModalProps { isOpen: boolean; setIsOpen: (isOpen: boolean) => void; dashboardId: number; + afterSubmit: () => void; } interface ColumnOverAll { @@ -21,7 +22,12 @@ interface ColumnOverAll { updatedAt: string; } -function NewColumnModal({ isOpen, setIsOpen, dashboardId }: ModalProps) { +function NewColumnModal({ + isOpen, + setIsOpen, + dashboardId, + afterSubmit, +}: ModalProps) { const [inputValue, setInputValue] = useState<string>(''); const [columnList, setColumnList] = useState<Array<string>>([]); const [check, setCheck] = useState(false); @@ -32,7 +38,8 @@ function NewColumnModal({ isOpen, setIsOpen, dashboardId }: ModalProps) { const response = await apiGetColumnList(dashboardId); if (response.result === 'SUCCESS') { const titles = Array.isArray(response.data) - ? response.data.map((column: ColumnOverAll) => column.title) : []; + ? response.data.map((column: ColumnOverAll) => column.title) + : []; setColumnList(titles); } else { throw new Error('error'); @@ -60,7 +67,7 @@ function NewColumnModal({ isOpen, setIsOpen, dashboardId }: ModalProps) { try { const response = await apiCreateColumn(newDashboard); setIsOpen(false); - const { id } = response.data; + const { id } = response; if (id) { apiColumnData(); @@ -68,6 +75,7 @@ function NewColumnModal({ isOpen, setIsOpen, dashboardId }: ModalProps) { } catch (error) { throw new Error('error'); } + afterSubmit(); }; useEffect(() => { @@ -113,14 +121,22 @@ function NewColumnModal({ isOpen, setIsOpen, dashboardId }: ModalProps) { required onChange={handleChange} /> - {check && <p className={styles.errorMessage}>중복된 컬럼 이름입니다.</p>} + {check && ( + <p className={styles.errorMessage}>중복된 컬럼 이름입니다.</p> + )} </div> <div className={styles.buttonBlock}> <DeleteBtn BtnText="취소" handleBtn={close} /> - { inputValue && !check - ? <button className={styles.activeButton} type="submit">생성</button> - : <button className={styles.inactiveButton} type="submit" disabled>생성</button>} + {inputValue && !check ? ( + <button className={styles.activeButton} type="submit"> + 생성 + </button> + ) : ( + <button className={styles.inactiveButton} type="submit" disabled> + 생성 + </button> + )} </div> </form> </div> diff --git a/src/pages/modal/NewTodoModal/NewTodoModal.tsx b/src/pages/modal/NewTodoModal/NewTodoModal.tsx index f6ee3e8..7d10769 100644 --- a/src/pages/modal/NewTodoModal/NewTodoModal.tsx +++ b/src/pages/modal/NewTodoModal/NewTodoModal.tsx @@ -27,6 +27,7 @@ interface ModalProps { userId: number; dashboardId: number; columnId: number; + afterSubmit: () => void; } function NewTodoModal({ @@ -35,6 +36,7 @@ function NewTodoModal({ userId, dashboardId, columnId, + afterSubmit, }: ModalProps) { const [manager, setManager] = useState(''); const [managerImg, setManagerImg] = useState<string | undefined>(TestImg); @@ -91,6 +93,7 @@ function NewTodoModal({ } catch (error) { throw new Error('error'); } + afterSubmit(); }; const createButton = manager.length !== 0 diff --git a/src/pages/modal/TodoCardManagement/TodoCardManagement.tsx b/src/pages/modal/TodoCardManagement/TodoCardManagement.tsx index 58db0e3..7c21065 100644 --- a/src/pages/modal/TodoCardManagement/TodoCardManagement.tsx +++ b/src/pages/modal/TodoCardManagement/TodoCardManagement.tsx @@ -16,6 +16,7 @@ interface ModalProps { userId: number; columnId: number; dashboardId: number; + afterSubmit: () => void; } function TodoCardManagement({ @@ -25,6 +26,7 @@ function TodoCardManagement({ userId, columnId, dashboardId, + afterSubmit, }: ModalProps) { const [cardData, setCardData] = useState<CardOverAll | undefined>(); @@ -73,6 +75,7 @@ function TodoCardManagement({ columnId={columnId} userId={userId} dashboardId={dashboardId} + afterSubmit={afterSubmit} /> )} {editModalOpen && ( @@ -85,6 +88,7 @@ function TodoCardManagement({ userId={userId} columnId={columnId} dashboardId={dashboardId} + afterSubmit={afterSubmit} /> )} </> diff --git a/src/pages/modal/TodoCardModal/TodoCardModal.tsx b/src/pages/modal/TodoCardModal/TodoCardModal.tsx index b22298b..7f6462f 100644 --- a/src/pages/modal/TodoCardModal/TodoCardModal.tsx +++ b/src/pages/modal/TodoCardModal/TodoCardModal.tsx @@ -47,6 +47,7 @@ interface ModalProps { columnId: number; userId: number; dashboardId: number; + afterSubmit: () => void; } function TodoCardModal({ @@ -58,6 +59,7 @@ function TodoCardModal({ columnId, userId, dashboardId, + afterSubmit, }: ModalProps) { const [kebabOpen, setKebabOpen] = useState(false); const [cardState, setCardState] = useState(''); @@ -118,6 +120,7 @@ function TodoCardModal({ } catch (error) { throw new Error('error'); } + afterSubmit(); }; if (!cardData) { From ae2042b60e21544dd58790459c90c52404dcd56c Mon Sep 17 00:00:00 2001 From: foxholic9 <roy0915z@naver.com> Date: Thu, 13 Jun 2024 16:16:03 +0900 Subject: [PATCH 5/6] =?UTF-8?q?Fix:=20ColurCircle=20defaultProps=20?= =?UTF-8?q?=EC=97=90=EB=9F=AC=EA=B0=80=20=EC=8B=9C=EB=BB=98=EA=B0=9C?= =?UTF-8?q?=EC=9A=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 수정했습니다 --- src/components/chip/ColorCircle/ColorCircle.tsx | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/components/chip/ColorCircle/ColorCircle.tsx b/src/components/chip/ColorCircle/ColorCircle.tsx index 443830a..cf01d00 100644 --- a/src/components/chip/ColorCircle/ColorCircle.tsx +++ b/src/components/chip/ColorCircle/ColorCircle.tsx @@ -7,7 +7,8 @@ interface CircleProps { // 색상코드, 지름, 내부요소 prop을 받아 원을 만들어줍니다. // 색상코드는 가능하면 #이 붙는 RGB로, 지름은 숫자만 쓰면 px단위로 지정됩니다. // 내부요소는 필수가 아니며, 있을 시 중앙정렬됩니다. -function ColorCircle({ color, diameter, children }: CircleProps) { +function ColorCircle(Props: CircleProps) { + const { color, diameter, children } = Props; const circleStyle: React.CSSProperties = { backgroundColor: color, width: `${diameter / 16}rem`, @@ -23,8 +24,4 @@ function ColorCircle({ color, diameter, children }: CircleProps) { return <div style={circleStyle}>{children}</div>; } -ColorCircle.defaultProps = { - children: undefined, -}; - export default ColorCircle; From 5883df9c02f1b53ca26b5f516416395a04bbe4a2 Mon Sep 17 00:00:00 2001 From: foxholic9 <roy0915z@naver.com> Date: Thu, 13 Jun 2024 16:47:01 +0900 Subject: [PATCH 6/6] =?UTF-8?q?Feat:=20=EC=B9=B4=EB=93=9C=20=EC=88=98?= =?UTF-8?q?=EC=A0=95=20=EB=AA=A8=EB=8B=AC=20=EC=A0=9C=EC=B6=9C=20=ED=9B=84?= =?UTF-8?q?=20=EB=8F=99=EC=9E=91=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 카드list를 컬럼list랑 다른 컴포넌트에서 쓰고 있는데 다른 컴포넌트의 카드 리스트를 변경하는 동작이 이 모달이 있어서... 구현이 생각보다 까다롭네요. 현재는 일단 페이지 전체를 새로고침하는걸로 달아놨습니다. --- .../components/CardList/CardList.tsx | 3 --- .../dashboard.{dashboardid}/components/Column/Column.tsx | 1 - .../components/ColumnCard/ColumnCard.tsx | 6 ++++-- 3 files changed, 4 insertions(+), 6 deletions(-) diff --git a/src/pages/dashboard.{dashboardid}/components/CardList/CardList.tsx b/src/pages/dashboard.{dashboardid}/components/CardList/CardList.tsx index 35038f7..a22518b 100644 --- a/src/pages/dashboard.{dashboardid}/components/CardList/CardList.tsx +++ b/src/pages/dashboard.{dashboardid}/components/CardList/CardList.tsx @@ -10,7 +10,6 @@ interface CardListProps { dashboardId: number; }; setElement: React.Dispatch<React.SetStateAction<HTMLElement | null>>; - afterSubmit: () => void; } function CardList({ @@ -18,7 +17,6 @@ function CardList({ hasNext, columnData, setElement, - afterSubmit, }: CardListProps) { return ( <div> @@ -28,7 +26,6 @@ function CardList({ cardId={cardData.id} cardData={cardData} columnData={columnData} - afterSubmit={afterSubmit} /> ))} {hasNext && <div ref={setElement} style={{ height: '20px' }} />} diff --git a/src/pages/dashboard.{dashboardid}/components/Column/Column.tsx b/src/pages/dashboard.{dashboardid}/components/Column/Column.tsx index 6e64e68..a78d96b 100644 --- a/src/pages/dashboard.{dashboardid}/components/Column/Column.tsx +++ b/src/pages/dashboard.{dashboardid}/components/Column/Column.tsx @@ -148,7 +148,6 @@ function Column({ hasNext={hasNext} setElement={setElement} columnData={columnData} - afterSubmit={afterSubmit} /> {settingModalOpen ? ( <EditColumnManagement diff --git a/src/pages/dashboard.{dashboardid}/components/ColumnCard/ColumnCard.tsx b/src/pages/dashboard.{dashboardid}/components/ColumnCard/ColumnCard.tsx index abc9877..4d1079a 100644 --- a/src/pages/dashboard.{dashboardid}/components/ColumnCard/ColumnCard.tsx +++ b/src/pages/dashboard.{dashboardid}/components/ColumnCard/ColumnCard.tsx @@ -13,7 +13,6 @@ interface CardProps { columnId: number; dashboardId: number; }; - afterSubmit: () => void; } // 날짜 표시 formating @@ -29,7 +28,6 @@ function ColumnCard({ cardId, cardData, columnData, - afterSubmit, }: CardProps) { const [manageCardModalOpen, setManageCardModalOpen] = useState<boolean>(false); const { @@ -45,6 +43,10 @@ function ColumnCard({ setManageCardModalOpen(true); }; + // 모달 응답 + const afterSubmit = () => { + window.location.reload(); + }; // 컴포넌트 출력 return ( <div className={styles.wrapper}>