Merge branch 'dev' into modal

eunji-0623 · Jun 14, 2024 · 62decf0 · 62decf0
2 parents 6d77daf + b2d6cba
commit 62decf0
Show file tree

Hide file tree

Showing 15 changed files with 155 additions and 94 deletions.
diff --git 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;
diff --git 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,15 +10,13 @@ interface CardListProps {
     dashboardId: number;
   };
   setElement: React.Dispatch<React.SetStateAction<HTMLElement | null>>;
-  handleCardOnclick: ReactEventHandler;
 }
 
 function CardList({
   cardList,
   hasNext,
   columnData,
   setElement,
-  handleCardOnclick,
 }: CardListProps) {
   return (
     <div>
@@ -29,7 +26,6 @@ function CardList({
           cardId={cardData.id}
           cardData={cardData}
           columnData={columnData}
-          handleCardOnclick={handleCardOnclick}
         />
       ))}
       {hasNext && <div ref={setElement} style={{ height: '20px' }} />}

diff --git 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 {
@@ -20,10 +22,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/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<CardOverAll[]>([]);
   const [columnData, setColumnData] = useState<ColumnData>({
@@ -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 (
     <div className={styles.container}>
@@ -146,6 +156,7 @@ function Column({
           dashboardId={Number(dashboardId)}
           columnId={columnId}
           columnTitle={title}
+          afterSubmit={changeColumnName}
         />
       ) : null}
       {addCardModalOpen ? (
@@ -155,6 +166,7 @@ function Column({
           columnId={columnId}
           dashboardId={Number(dashboardId)}
           userId={userId}
+          afterSubmit={afterSubmit}
         />
       ) : null}
     </div>

diff --git 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,18 +29,15 @@
     '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;
   }
 
   @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
@@ -24,7 +24,11 @@ const formatDate = (date: string) => {
 // 일정을 카드 모양으로 보여주는 컴포넌트입니다.
 // 사진, 제목, 태그, 기한, 작성자이미지를 prop으로 받습니다.
 // 현재 작성자 이미지 대신 이름만 보여지게 처리했습니다. 수정 필요합니다.
-function ColumnCard({ cardId, cardData, columnData }: CardProps) {
+function ColumnCard({
+  cardId,
+  cardData,
+  columnData,
+}: CardProps) {
   const [manageCardModalOpen, setManageCardModalOpen] = useState<boolean>(false);
   const {
     assignee,
@@ -38,41 +42,38 @@ function ColumnCard({ cardId, cardData, columnData }: CardProps) {
   const cardOnClick = () => {
     setManageCardModalOpen(true);
   };
-  const handleKeyDown = () => {
-    setManageCardModalOpen(true);
-  };
 
+  // 모달 응답
+  const afterSubmit = () => {
+    window.location.reload();
+  };
   // 컴포넌트 출력
   return (
-    <div
-      className={styles.container}
-      onKeyDown={handleKeyDown}
-      onClick={cardOnClick}
-      role="button"
-      tabIndex={0}
-    >
-      <div className={styles.card}>
-        {imageUrl && (
-          <div className={styles.img}>
-            <img
-              className={` ${styles.withImg}`}
-              src={imageUrl}
-              alt="uploadedTaskImage"
-            />
+    <div className={styles.wrapper}>
+      <button type="button" onClick={cardOnClick} className={styles.container}>
+        <div className={styles.card}>
+          {imageUrl && (
+            <div className={styles.img}>
+              <img
+                className={` ${styles.withImg}`}
+                src={imageUrl}
+                alt="uploadedTaskImage"
+              />
+            </div>
+          )}
+          <div className={styles.title}>{title}</div>
+          <div className={styles.tag}>
+            {tags.map((tag) => (
+              <Tag tagName={tag} key={tag} />
+            ))}
           </div>
-        )}
-        <div className={styles.title}>{title}</div>
-        <div className={styles.tag}>
-          {tags.map((tag) => (
-            <Tag tagName={tag} key={tag} />
-          ))}
-        </div>
-        <div className={styles.date}>
-          <img src="/icon/calendar.svg" alt="calendarImg" />
-          {formatDate(dueDate)}
+          <div className={styles.date}>
+            <img src="/icon/calendar.svg" alt="calendarImg" />
+            {formatDate(dueDate)}
+          </div>
+          <div className={styles.avatar}>{assignee.nickname}</div>
         </div>
-        <div className={styles.avatar}>{assignee.nickname}</div>
-      </div>
+      </button>
 
       {manageCardModalOpen ? (
         <TodoCardManagement
@@ -82,6 +83,7 @@ function ColumnCard({ cardId, cardData, columnData }: CardProps) {
           userId={columnData.userId}
           columnId={columnData.columnId}
           cardId={cardId}
+          afterSubmit={afterSubmit}
         />
       ) : null}
     </div>

diff --git 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 (
     <ColumnContainer>
@@ -71,6 +76,7 @@ function ColumnList() {
           title={columnData.title}
           dashboardId={Number(dashboardId)}
           userId={userId}
+          afterSubmit={afterSubmit}
         />
       ))}
       <div className={styles.addColumnButtonContainer}>
@@ -81,6 +87,7 @@ function ColumnList() {
           isOpen={addColumnModalOpen}
           setIsOpen={setAddColumnModalOpen}
           dashboardId={Number(dashboardId)}
+          afterSubmit={afterSubmit}
         />
       ) : null}
     </ColumnContainer>

diff --git a/src/pages/modal/DeleteColumnModal/DeleteColumnModal.tsx b/src/pages/modal/DeleteColumnModal/DeleteColumnModal.tsx
@@ -15,13 +15,15 @@ interface ModalProps {
   setIsOpen: (isOpen: boolean) => void;
   openEditModal: () => void;
   columnId: number;
+  afterSubmit: () => void;
 }
 
 function DeleteColumnModal({
   isOpen,
   setIsOpen,
   openEditModal,
   columnId,
+  afterSubmit,
 }: ModalProps) {
   // 컬럼의 모든 카드를 삭제하는 동작
   const apiDelete = async () => {
@@ -32,6 +34,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
@@ -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}
         />
       )}
     </>