Merge pull request #153 from codeit-sprint-part3-6team/#140_할-일-생성-모달-이슈-수정

#140 할 일 생성 모달 이슈 수정

Author: twtwkim

package-lock.json

@@ -27,6 +27,7 @@
     "react-dom": "^18.3.1",
     "react-redux": "^9.2.0",
     "react-router-dom": "^7.0.2",
+    "react-toastify": "^11.0.2",
     "redux": "^5.0.1"
   },
   "devDependencies": {

package.json

@@ -7,10 +7,26 @@
   font-size: 18px;
   line-height: 26px;
   color: var(--black-medium);
-  margin-bottom: 8px;
 
   @media screen and (max-width: 743px) {
     font-size: 16px;
     line-height: 24px;
   }
 }
+
+.topic-box {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  margin-bottom: 8px;
+}
+
+.require {
+  font-weight: 500;
+  font-size: 16px;
+  color: var(--violet);
+
+  @media screen and (max-width: 743px) {
+    font-size: 14px;
+  }
+}

src/components/common/input/info-input/DeadlineInput.module.css

@@ -78,6 +78,7 @@ export default function DeadlineInput({
   initialDate,
 }: DeadlineInputProps): JSX.Element {
   const [selectedDate, setSelectedDate] = useState<Date | null>(null);
+  const [open, setOpen] = useState(false);
 
   useEffect(() => {
     if (initialDate) {
@@ -94,16 +95,25 @@ export default function DeadlineInput({
   return (
     <ThemeProvider theme={globalTheme}>
       <section className={styles.container}>
-        <p className={styles.title}>마감일</p>
+        <div className={styles['topic-box']}>
+          <p className={styles.title}>마감일</p>
+          <p className={styles.require}>*</p>
+        </div>
         <LocalizationProvider dateAdapter={AdapterDateFns} adapterLocale={ko}>
           <DateTimePicker
+            open={open}
+            onOpen={() => setOpen(true)}
+            onClose={() => setOpen(false)}
             value={selectedDate}
             onChange={handleChange}
-            slots={{ textField: StyledTextField }}
+            slots={{
+              textField: StyledTextField,
+            }}
             slotProps={{
               textField: {
                 fullWidth: true,
                 placeholder: '날짜를 입력해 주세요',
+                onClick: () => setOpen((prev) => !prev),
               },
             }}
           />

src/components/common/input/info-input/DeadlineInput.tsx

@@ -13,6 +13,7 @@ import deleteCard from '@/lib/dashboard/deleteCard';
 import AuthorSection from './AuthorSection';
 import ChipSection from './ChipSection';
 import CommentSection from './CommentSection';
+import { toast } from 'react-toastify';
 
 interface DetailCardModalProps {
   title: string;
@@ -41,7 +42,7 @@ function DetailCardModal({
   const handleCardDelete = async () => {
     try {
       await deleteCard(cardId);
-      alert('카드가 삭제되었습니다.');
+      toast.success('카드가 삭제되었습니다.');
       setColumnData((prev) => ({
         ...prev,
         cards: prev.cards.filter((columnCard) => columnCard.id !== cardId), // 삭제된 카드 제외

src/components/common/modal/detail-cards/DetailCardModal.tsx

@@ -1,7 +1,16 @@
 import styles from './OverlayContainer.module.css';
 
-function OverlayContainer({ children }) {
-  return <div className={styles['overlay-container']}>{children}</div>;
+interface OverlayContainerProps {
+  children: React.ReactNode;
+  onClose?: () => void;
+}
+
+function OverlayContainer({ children, onClose }: OverlayContainerProps) {
+  return (
+    <div className={styles['overlay-container']} onClick={onClose}>
+      {children}
+    </div>
+  );
 }
 
 export default OverlayContainer;

src/components/common/modal/overlay-container/OverlayContainer.tsx

@@ -11,6 +11,7 @@ import Dropdown from '../dropdown/Dropdown';
 import { getDashboard, getMember } from '@/lib/navbar/getNavbar';
 import postInvite from '@/lib/invite/postInvite';
 import AuthModal from '../modal/auth/AuthModal';
+import { toast } from 'react-toastify';
 
 const INITIAL_VALUES = {
   email: '',
@@ -59,7 +60,7 @@ function Navbar() {
   // 초대 요청을 보내고 alert
   useEffect(() => {
     if (!isModalOpen && alertMessage) {
-      alert(alertMessage);
+      toast.success(alertMessage);
       setAlertMessage(null);
     }
   }, [isModalOpen, alertMessage]);

src/components/common/navbar/Navbar.tsx

@@ -12,6 +12,7 @@ import PlusBtn from 'public/ic/ic_plus.svg';
 import CrownIcon from 'public/ic/ic_crown.svg';
 import OverlayContainer from '@/components/common/modal/overlay-container/OverlayContainer';
 import postDashboards from '@/lib/mydashboard/postDashboard';
+import { toast } from 'react-toastify';
 import CDSButton from '../button/CDSButton';
 
 export default function Sidebar() {
@@ -53,7 +54,7 @@ export default function Sidebar() {
 
   const handleNewDashboard = async () => {
     if (!newDashboardName.trim()) {
-      alert('대시보드 이름을 입력해주세요.');
+      toast.error('대시보드 이름을 입력해주세요.');
       return;
     }
 

src/components/common/sidebar/Sidebar.tsx

@@ -15,6 +15,7 @@ import CreateCard from '@/components/product/dashboard/create-card/CreateCard';
 import { useDispatch, useSelector } from 'react-redux';
 import { toggleState } from '@/redux/renderSlice';
 import { RootState } from '@/redux/store';
+import { toast } from 'react-toastify';
 import SkeletonCard from '@/components/dashboard/card/SkeletonCard';
 
 interface ColumnProp {
@@ -71,7 +72,7 @@ function Column({
       closeEditModal();
       setEditedTitle(columnTitle);
     } catch (error) {
-      alert(`컬럼 삭제 에러: ${error}`);
+      toast.error(`컬럼 삭제 중 오류가 발생했습니다: ${error}`);
     }
   };
 
@@ -90,7 +91,7 @@ function Column({
 
       closeEditModal();
     } catch (error) {
-      alert(error.message || '컬럼 제목 수정 중 오류가 발생했습니다.');
+      toast.error(error.message || '컬럼 제목 수정 중 오류가 발생했습니다.');
     }
   };
 

src/components/dashboard/column/Column.tsx

@@ -17,6 +17,7 @@ import {
   nicknameValidation,
   passwordCheckValidation,
 } from '@/utils/authValidation';
+import { toast } from 'react-toastify';
 
 const INITIAL_VALUES = {
   email: '',
@@ -84,7 +85,7 @@ function SignupForm() {
           user: response.user,
         }),
       );
-      alert(`${values.nickname}님 가입이 완료되었습니다.`);
+      toast.success(`${values.nickname}님 가입이 완료되었습니다.`);
       router.push('/mydashboard');
     } catch (error) {
       setResponseMessage(error.message);