Feat: card edit modal

apps/client/src/layout/Layout.tsx

@@ -4,12 +4,10 @@ import { Sidebar } from '../shared/components/sidebar/Sidebar';
 const Layout = () => {
   return (
     <>
-    <div className="flex h-screen">
-      <Sidebar />
-      <main className="flex-1 overflow-y-auto">
+      <div className="flex h-screen">
+        <Sidebar />
         <Outlet />
-      </main>
-    </div>
+      </div>
     </>
   );
 };

apps/client/src/shared/components/cardEditModal/CardEditModal.tsx

@@ -0,0 +1,169 @@
+import { Icon } from '@pinback/design-system/icons';
+import {
+  AutoDismissToast,
+  Button,
+  DateTime,
+  Dropdown,
+  InfoBox,
+  PopupContainer,
+  Switch,
+  Textarea,
+  Toast,
+  validateDate,
+  validateTime,
+} from '@pinback/design-system/ui';
+import { cn } from '@pinback/design-system/utils';
+import { useState } from 'react';
+
+export interface CardEditModalProps {
+  onClose: () => void;
+}
+
+export default function CardEditModal({ onClose }: CardEditModalProps) {
+  const [isRemindOn, setIsRemindOn] = useState(true);
+  const [selected, setSelected] = useState<string | null>(null);
+  const [isPopupOpen, setIsPopupOpen] = useState(false);
+
+  // 입력 필드 상태: 서버에서 받아올 데이터
+  const [title] = useState('');
+  const [source] = useState('');
+  const [memo, setMemo] = useState('');
+  const [categories] = useState<string[]>([]);
+  const [categoryTitle, setCategoryTitle] = useState('');
+  const [date, setDate] = useState('');
+  const [time, setTime] = useState('');
+  const [dateError, setDateError] = useState('');
+  const [timeError, setTimeError] = useState('');
+
+  const [toastIsOpen, setToastIsOpen] = useState(false);
+  const [isPopError, setIsPopError] = useState(false);
+  const [errorTxt, setErrorTxt] = useState('');
+
+  const saveCategory = () => {
+    if (categoryTitle.length > 20) {
+      setIsPopError(true);
+      setErrorTxt('20자 이내로 작성해주세요');
+    } else {
+      setIsPopupOpen(false);
+    }
+  };
+
+  const handleDateChange = (value: string) => {
+    setDate(value);
+    setDateError(validateDate(value));
+  };
+
+  const handleTimeChange = (value: string) => {
+    setTime(value);
+    setTimeError(validateTime(value));
+  };
+
+  const handleSwitchChange = (checked: boolean) => {
+    setIsRemindOn(checked);
+  };
+
+  return (
+    <div className="flex flex-col">
+      <div
+        role="dialog"
+        aria-modal="true"
+        className={cn(
+          'w-[31.2rem] rounded-[1.2rem] bg-white px-[3.2rem] py-[2.4rem] shadow-xl',
+          'flex flex-col gap-[1.6rem]'
+        )}
+      >
+        {isPopupOpen && (
+          <PopupContainer
+            isOpen={isPopupOpen}
+            onClose={() => setIsPopupOpen(false)}
+            type="input"
+            title="카테고리 추가하기"
+            left="취소"
+            right="확인"
+            inputValue={categoryTitle}
+            isError={isPopError}
+            errortext={errorTxt}
+            onInputChange={setCategoryTitle}
+            placeholder="카테고리 제목을 입력해주세요"
+            onLeftClick={() => setIsPopupOpen(false)}
+            onRightClick={saveCategory}
+          />
+        )}
+        <header className="flex items-center justify-between">
+          <Icon name="logo" width={72} height={20} />
+          <button
+            type="button"
+            aria-label="닫기"
+            onClick={onClose}
+            className="rounded-[0.6rem] p-[0.4rem] hover:bg-gray-100"
+          >
+            <Icon name="ic_close" size={20} />
+          </button>
+        </header>
+
+        <InfoBox title={title} source={source} />
+
+        <section className="flex flex-col gap-[0.8rem]">
+          <p className="caption1-sb text-font-black-1">카테고리</p>
+          <Dropdown
+            options={categories}
+            selectedValue={selected}
+            onChange={(value) => setSelected(value)}
+            placeholder="선택해주세요"
+            onAddItem={() => setIsPopupOpen(true)}
+            addItemLabel="추가하기"
+          />
+        </section>
+
+        <section className="flex flex-col gap-[0.8rem]">
+          <p className="caption1-sb text-font-black-1">메모</p>
+          <Textarea
+            placeholder="나중에 내가 꺼내줄 수 있게 살짝 적어줘!"
+            maxLength={500}
+            className="h-[12rem]"
+            value={memo}
+            onChange={(e) => setMemo(e.target.value)}
+          />
+        </section>
+
+        <section className="flex flex-col gap-[1.2rem]">
+          <div className="flex items-center justify-between">
+            <p className="caption1-sb text-font-black-1">리마인드</p>
+            <Switch checked={isRemindOn} onCheckedChange={handleSwitchChange} />
+          </div>
+
+          <div className="flex justify-between gap-[0.8rem]">
+            <DateTime
+              type="date"
+              state={dateError ? 'error' : isRemindOn ? 'default' : 'disabled'}
+              value={date}
+              onChange={handleDateChange}
+            />
+            <DateTime
+              type="time"
+              state={timeError ? 'error' : isRemindOn ? 'default' : 'disabled'}
+              value={time}
+              onChange={handleTimeChange}
+            />
+          </div>
+
+          {dateError && <p className="body3-r text-error">{dateError}</p>}
+          {timeError && <p className="body3-r text-error">{timeError}</p>}
+        </section>
+        {/* TODO: onClick 추후  저장 api 연결후 실패/성공 연결 */}
+        <Button onClick={() => setToastIsOpen(true)}>저장하기</Button>
+      </div>
+      {toastIsOpen && (
+        <div className="absolute bottom-[2.4rem] left-1/2 -translate-x-1/2">
+          <AutoDismissToast
+            duration={1000}
+            fadeMs={1000}
+            onClose={() => setToastIsOpen(false)}
+          >
+            <Toast text={`저장에 실패했어요.\n다시 시도해주세요`} />
+          </AutoDismissToast>
+        </div>
+      )}
+    </div>
+  );
+}

apps/client/src/shared/utils/ValidateData.ts

@@ -0,0 +1,46 @@
+export const validateDate = (value: string): string => {
+  const regex = /^(\d{4})\.(\d{2})\.(\d{2})$/;
+  const match = value.match(regex);
+
+  if (!match) return '유효한 날짜를 작성하세요';
+
+  const year = parseInt(match[1], 10);
+  const month = parseInt(match[2], 10);
+  const day = parseInt(match[3], 10);
+
+  if (month < 1 || month > 12) return '유효한 날짜를 작성하세요';
+
+  const testDate = new Date(year, month - 1, day);
+  if (
+    testDate.getFullYear() !== year ||
+    testDate.getMonth() !== month - 1 ||
+    testDate.getDate() !== day
+  ) {
+    return '유효한 날짜를 작성하세요';
+  }
+
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+  if (testDate < today) return '현재 시점 이후 날짜로 작성하세요';
+
+  return '';
+};
+
+// 시간 유효성 검사
+export const validateTime = (value: string | undefined): string => {
+  if (!value) return '시간을 입력하세요';
+
+  const clean = value.replace(/[^0-9:]/g, '');
+  const regex = /^(\d{1,2}):(\d{1,2})$/;
+  const match = clean.match(regex);
+
+  if (!match) return '유효한 시간을 작성하세요';
+  const hour = parseInt(match[1], 10);
+  const minute = parseInt(match[2], 10);
+
+  if (hour < 0 || hour > 23 || minute < 0 || minute > 59) {
+    return '유효한 시간을 작성하세요';
+  }
+
+  return '';
+};

packages/design-system/src/components/infobox/InfoBox.tsx

@@ -5,7 +5,7 @@ interface InfoBoxProps {
 }
 const InfoBox = ({ title, source, imgUrl }: InfoBoxProps) => {
   return (
-    <div className="border-main400 flex h-[6.8rem] w-[24.8rem] items-center justify-between gap-[0.8rem] rounded-[4px] border bg-white px-[0.8rem] py-[1.2rem]">
+    <div className="border-main400 flex h-[6.8rem] w-[full] items-center justify-between gap-[0.8rem] rounded-[4px] border bg-white px-[0.8rem] py-[1.2rem]">
       <img className="h-[4.4rem] w-[4.4rem] rounded-[0.4rem]" src={imgUrl} />
       <div className="items-left flex flex-col justify-center gap-[0.2rem] text-left">
         <p className="sub3-sb w-[18rem] truncate">{title}</p>