[feat] card view assignment css

src/app/(with-header-sidebar)/dashboard/[id]/components/Card.tsx

@@ -1,6 +1,9 @@
 import React from 'react';
 import { Draggable } from 'react-beautiful-dnd';
 import { CardData } from '@/types/dashboardView';
+import { useModal } from '@/app/(with-header-sidebar)/mydashboard/_hooks/useModal';
+import Modal from '@/app/(with-header-sidebar)/mydashboard/_components/modal/Modal';
+import CardInfo from './card-detail/CardInfo';
 import styles from './Card.module.css';
 
 interface Props {
@@ -9,23 +12,38 @@ interface Props {
 }
 
 function Card({ item, index }: Props) {
+  const { isOpen, openModal, isClosing, closeModal } = useModal();
+
   if (!item || !item.id) {
     return null;
   }
 
   return (
-    <Draggable draggableId={`${item.id}`} index={index}>
-      {(provided, snapshot) => (
-        <div
-          ref={provided.innerRef}
-          {...provided.draggableProps}
-          {...provided.dragHandleProps}
-          className={`${styles.card} ${snapshot.isDragging ? styles.dragging : ''}`}
+    <>
+      <Draggable draggableId={`${item.id}`} index={index}>
+        {(provided, snapshot) => (
+          <div
+            ref={provided.innerRef}
+            {...provided.draggableProps}
+            {...provided.dragHandleProps}
+            className={`${styles.card} ${snapshot.isDragging ? styles.dragging : ''}`}
+            onClick={openModal}
+          >
+            <div>{item.title}</div>
+          </div>
+        )}
+      </Draggable>
+      {isOpen && (
+        <Modal
+          isClosing={isClosing}
+          onClose={closeModal}
+          title={item.title}
+          hasCloseButton={true}
         >
-          <div>{item.title}</div>
-        </div>
+          <CardInfo card={item} />
+        </Modal>
       )}
-    </Draggable>
+    </>
   );
 }
 

src/app/(with-header-sidebar)/dashboard/[id]/components/card-detail/Assignment.module.css

@@ -0,0 +1,64 @@
+.assignment {
+  padding: 6px 16px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-radius: 8px;
+  border: 1px solid var(--gray-300);
+  background: var(--white);
+}
+
+.wrapper {
+  display: flex;
+  gap: 62px;
+}
+
+.assignee {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+
+.label {
+  color: var(--black);
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 20px;
+}
+
+.description {
+  color: var(--black-100);
+  font-size: 12px;
+  font-weight: 400;
+}
+
+.assignee .description {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.avatar {
+  width: 26px;
+  height: 26px;
+}
+
+.dueDate .description {
+  margin-top: 8px;
+}
+
+@media screen and (min-width: 768px) {
+  .assignment {
+    padding: 13px;
+  }
+
+  .wrapper {
+    flex-direction: column;
+    gap: 16px;
+  }
+
+  .avatar {
+    width: 34px;
+    height: 34px;
+  }
+}

src/app/(with-header-sidebar)/dashboard/[id]/components/card-detail/Assignment.tsx

@@ -0,0 +1,47 @@
+import type { CardData } from '@/types/dashboardView';
+import Avatar from '@/components/Avatar';
+import { formatDateToCustomFormat } from '@/utils/dateUtils';
+import styles from './Assignment.module.css';
+
+interface AssignmentProps {
+  card: Pick<CardData, 'dueDate' | 'assignee'>;
+}
+
+export default function Assignment({ card }: AssignmentProps) {
+  if (!card) return null;
+
+  // const { assignee, dueDate } = {
+  //   dueDate: '2024-11-30 12:00',
+  //   assignee: { profileImageUrl: null, nickname: 'manta', id: 1 },
+  // };
+
+  const { assignee, dueDate } = card;
+
+  return (
+    <section className={styles.assignment}>
+      <dl className={styles.wrapper}>
+        {assignee && (
+          <div className={styles.assignee}>
+            <dt className={styles.label}>담당자</dt>
+            <dd className={styles.description}>
+              <Avatar
+                name={assignee.nickname}
+                profileImageUrl={assignee.profileImageUrl}
+                className={styles.avatar}
+              />
+              <span>{assignee.nickname}</span>
+            </dd>
+          </div>
+        )}
+        {dueDate && (
+          <div className={styles.dueDate}>
+            <dt className={styles.label}>마감일</dt>
+            <dd className={styles.description}>
+              {formatDateToCustomFormat(dueDate)}
+            </dd>
+          </div>
+        )}
+      </dl>
+    </section>
+  );
+}

src/app/(with-header-sidebar)/dashboard/[id]/components/card-detail/CardInfo.module.css

@@ -0,0 +1,26 @@
+.cardInfo {
+  margin-top: 20px;
+}
+
+@media screen and (min-width: 768px) {
+  .cardInfo {
+    display: flex;
+    justify-content: space-between;
+    gap: 14px;
+  }
+
+  .assignmentContainer {
+    order: 1;
+    flex: 3;
+  }
+
+  .infoContainer {
+    flex: 7;
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .cardInfo {
+    gap: 39px;
+  }
+}

src/app/(with-header-sidebar)/dashboard/[id]/components/card-detail/CardInfo.tsx

@@ -0,0 +1,14 @@
+import { CardData } from '@/types/dashboardView';
+import Assignment from './Assignment';
+import styles from './CardInfo.module.css';
+
+export default function CardInfo({ card }: { card: CardData }) {
+  return (
+    <div className={styles.cardInfo}>
+      <div className={styles.assignmentContainer}>
+        <Assignment card={card} />
+      </div>
+      <div className={styles.infoContainer}>카드 상세내용 + 댓글 영역</div>
+    </div>
+  );
+}

src/app/(with-header-sidebar)/mydashboard/_components/dashboards/CreateDashboardForm.tsx

@@ -4,6 +4,7 @@ import DashboardInput from '@/components/DashboardInput';
 import styles from './CreateDashboardForm.module.css';
 import { CreateDashboardRequestBody } from '@/types/dashboards';
 import { createDashboard } from '@/lib/boardService';
+import { useRouter } from 'next/navigation';
 
 interface CreateDashboardFormProps {
   closeModal: () => void;
@@ -17,10 +18,12 @@ export default function CreateDashboardForm({
     handleSubmit,
     formState: { errors, isValid },
   } = useForm<CreateDashboardRequestBody>({ mode: 'onChange' });
+  const router = useRouter();
 
   const onSubmit = async (newDashboard: CreateDashboardRequestBody) => {
-    await createDashboard(newDashboard);
+    const response = await createDashboard(newDashboard);
     closeModal();
+    router.push(`/dashboard/${response.id}`);
   };
 
   return (

src/app/(with-header-sidebar)/mydashboard/_components/modal/Modal.tsx

@@ -11,6 +11,8 @@ interface ModalProps {
   onClose: () => void;
   allowDimClose?: boolean;
   title?: string;
+  hasCloseButton?: boolean;
+  headerComponent?: React.ComponentType;
   children: ReactNode;
 }
 
@@ -19,6 +21,8 @@ export default function Modal({
   onClose,
   allowDimClose = true,
   title,
+  hasCloseButton = false,
+  headerComponent: Component,
   children,
 }: ModalProps) {
   const handleOnClickBackground = (e: MouseEvent<HTMLDivElement>) => {
@@ -53,18 +57,21 @@ export default function Modal({
         <FocusTrap>
           <div className={styles.titleContainer}>
             {title && <h3 className={styles.title}>{title}</h3>}
-            {/* <button
-              onClick={onClose}
-              className={styles.close}
-              aria-label="Close modal"
-            >
-              <Image
-                src="/icons/x_sm.svg"
-                alt="Close icon"
-                width={10}
-                height={10}
-              />
-            </button> */}
+            {Component && <Component />}
+            {hasCloseButton && (
+              <button
+                onClick={onClose}
+                className={styles.close}
+                aria-label="Close modal"
+              >
+                <Image
+                  src="/icons/x_lg.svg"
+                  alt="Close icon"
+                  width={24}
+                  height={24}
+                />
+              </button>
+            )}
           </div>
           {children}
         </FocusTrap>

src/app/(with-header-sidebar)/mydashboard/_hooks/useIntersectionObserver.ts

@@ -0,0 +1,30 @@
+import { useEffect, useRef } from 'react';
+
+export const useIntersectionObserver = (
+  onIntersect: () => void,
+  isLoading: boolean,
+  cursorId: number | null,
+  threshold: number = 0.5
+) => {
+  const observerRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting && cursorId != null && !isLoading) {
+          onIntersect();
+        }
+      },
+      { threshold }
+    );
+
+    const current = observerRef.current;
+    if (current) observer.observe(current);
+
+    return () => {
+      if (current) observer.unobserve(current);
+    };
+  }, [isLoading, cursorId, onIntersect]);
+
+  return observerRef;
+};

src/app/(with-header-sidebar)/mydashboard/_hooks/useMyInvitations.ts

@@ -1,5 +1,6 @@
-import { useEffect, useRef, useState } from 'react';
+import { useState, useEffect } from 'react';
 import { getMyInvitations } from '../_lib/myInvitationService';
+import { useIntersectionObserver } from './useIntersectionObserver';
 import type { Invitation } from '@/types/invitation';
 
 const PAGE_SIZE = 10;
@@ -9,7 +10,6 @@ export const useMyInvitations = (title?: string | null, reloadKey?: number) => {
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [cursorId, setCursorId] = useState<number | null>(null);
-  const observerRef = useRef<HTMLDivElement | null>(null);
 
   const fetchMyInvitations = async () => {
     if (isLoading) return;
@@ -25,42 +25,27 @@ export const useMyInvitations = (title?: string | null, reloadKey?: number) => {
 
     try {
       const response = await getMyInvitations(params);
-
       setMyInvitations((prev) => [...prev, ...response.invitations]);
       setCursorId(response.cursorId || null);
     } catch (err) {
       console.error(err);
       setError('Failed to fetch invitations');
     } finally {
       setIsLoading(false);
-      setIsLoading(false);
     }
   };
 
   useEffect(() => {
     setMyInvitations([]);
     setCursorId(null);
-    setIsLoading(true);
     fetchMyInvitations();
   }, [title, reloadKey]);
 
-  useEffect(() => {
-    const observer = new IntersectionObserver(
-      (entries) => {
-        if (entries[0].isIntersecting && cursorId != null && !isLoading) {
-          fetchMyInvitations();
-        }
-      },
-      { threshold: 0.5 }
-    );
-
-    const current = observerRef.current;
-    if (current) observer.observe(current);
-
-    return () => {
-      if (current) observer.unobserve(current);
-    };
-  }, [isLoading]);
+  const observerRef = useIntersectionObserver(
+    fetchMyInvitations,
+    isLoading,
+    cursorId
+  );
 
   return {
     myInvitations,