🐛[Fix] develop to main 병합 과정에서의 충돌 해결을 위한 PR #119

src/app/admin/block/components/buttons/add-button.tsx

@@ -1,18 +1,17 @@
 import React from "react";
 
-interface Props {
+type Props = {
   text: string;
-  onClick: () => void;
-  disabled?: boolean;
-}
-const AddButton = ({ text, onClick, disabled }: Props) => {
-  const bgColor = disabled ? "bg-orange-100" : "bg-orange-600";
+} & React.ComponentPropsWithoutRef<"button">;
+const AddButton = ({ text, ...buttonProps }: Props) => {
+  const { disabled } = buttonProps;
+  const bgColor = disabled ? "bg-primary-100" : "bg-primary-450";
   const textColor = disabled ? "text-orange-300" : "text-slate-200";
+
   return (
     <button
-      className={`h-12 w-full rounded-lg ${bgColor} ${textColor} font-bold`}
-      onClick={onClick}
-      disabled={disabled}
+      className={`h-14 w-full rounded-lg ${bgColor} ${textColor} font-bold`}
+      {...buttonProps}
     >
       {text}
     </button>

src/app/admin/block/components/form-input.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import React from "react";
+
+type FormInputProps = {
+  label: string;
+  id: string;
+} & React.ComponentPropsWithoutRef<"input">;
+
+export default function FormInput({
+  label,
+  id,
+  ...inputProps
+}: FormInputProps) {
+  const { required, maxLength, value } = inputProps;
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="flex justify-between">
+        <label className="title block" htmlFor={id}>
+          {label}
+          {required && <span className="text-red-500">*</span>}
+        </label>
+        {maxLength && (
+          <div className="text-slate-400">
+            {value ? (value as string)?.length : 0}
+            <span className="text-[12px] text-slate-600"> / {maxLength}</span>
+          </div>
+        )}
+      </div>
+      <input id={id} {...inputProps} />
+    </div>
+  );
+}

src/app/admin/block/components/layout.tsx

@@ -1,28 +1,38 @@
 "use client";
-import React from "react";
+import React, { FormEvent } from "react";
 import Image from "next/image";
 import { useRouter } from "next/navigation";
+import QuestionIcon from "@app/admin/block/components/question-icon";
 
 const Layout = ({
   title,
+  onSubmit,
   children,
 }: Readonly<{
   title: string;
+  onSubmit?: (e: FormEvent<HTMLFormElement>) => void;
   children: React.ReactNode;
 }>) => {
   const router = useRouter();
   return (
-    <div className="flex w-full flex-col gap-4 px-20 py-4">
-      <button onClick={() => router.back()}>
-        <Image
-          src="/assets/icons/icon_back.png"
-          alt="뒤로가기 아이콘"
-          width={34}
-          height={34}
-        />
-      </button>
-      <h1>{title}</h1>
-      <div className="flex flex-col gap-4">{children}</div>
+    <div className="flex w-full flex-col gap-6 px-20 py-4">
+      <div>
+        <button type="button" onClick={() => router.back()}>
+          <Image
+            src="/assets/icons/icon_back.png"
+            alt="뒤로가기 아이콘"
+            width={34}
+            height={34}
+          />
+        </button>
+      </div>
+      <div className="flex items-center gap-1">
+        <h1 className="pageName">{title}</h1>
+        <QuestionIcon title={title} />
+      </div>
+      <form onSubmit={onSubmit} className="flex flex-col gap-4">
+        {children}
+      </form>
     </div>
   );
 };

src/app/admin/block/components/question-icon.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import Image from "next/image";
+
+interface Props {
+  title: string;
+}
+const QuestionIcon = ({ title }: Props) => {
+  if (title !== "링크 블록") return;
+  return (
+    <div className="group relative inline-block">
+      <Image
+        src="/assets/icons/icon_help.png"
+        alt="question"
+        width={30}
+        height={30}
+      />
+      <div className="absolute left-2 top-20 w-max -translate-x-1/2 -translate-y-1/2 transform rounded bg-[#343434] px-3 py-3 text-sm text-white opacity-0 transition-opacity duration-300 group-hover:opacity-100">
+        • 기본 정보와 공개 여부 값은 필수입니다. <br />• 예약 공개와 스티커는
+        프로 기능입니다.
+        <div className="absolute -top-3 left-1/2 h-0 w-0 rotate-90 border-y-8 border-r-8 border-y-transparent border-r-[#343434]"></div>
+      </div>
+    </div>
+  );
+};
+
+export default QuestionIcon;

src/app/admin/block/components/text-input-box.tsx

@@ -4,7 +4,7 @@ interface Props {
   title: string;
   placeholder: string;
   text: string;
-  setText: React.Dispatch<React.SetStateAction<string>>;
+  setText: (text: string) => void;
   required?: boolean;
   limit?: number;
 }

src/app/admin/block/event/components/calendar.tsx

@@ -1,10 +1,76 @@
-export default function Calendar({ label }: { label: string }) {
+import DatePicker from "react-datepicker";
+
+export default function Calendar({
+  startDate,
+  setStartDate,
+  endDate,
+  setEndDate,
+  startTime,
+  setStartTime,
+  endTime,
+  setEndTime,
+}: {
+  startDate: Date | null;
+  setStartDate: (date: Date | null) => void;
+  endDate: Date | null;
+  setEndDate: (date: Date | null) => void;
+  startTime: Date | null;
+  setStartTime: (date: Date | null) => void;
+  endTime: Date | null;
+  setEndTime: (date: Date | null) => void;
+}) {
   return (
-    <>
-      <label htmlFor="start-date">{label}</label>
-      <input type="text" placeholder="날짜 선택" />
-      <input type="time" placeholder="시간 선택" />
-      {/* 캘린더 */}
-    </>
+    <div className="flex flex-col gap-2">
+      <label className="title mb-[10px] block">
+        이벤트 일정 <span className="text-red-500">*</span>
+      </label>
+      <div className="flex flex-col items-start gap-5 bg-[#F6F6F6]">
+        {/* 시작 날짜 및 시간 선택 */}
+        <div className="flex w-full items-center gap-4">
+          <label className="font-medium">시작</label>
+          <DatePicker
+            selected={startDate}
+            onChange={(date: Date | null) => setStartDate(date)}
+            dateFormat="yyyy.MM.dd"
+            placeholderText="날짜 선택"
+            className="w-full rounded-lg border-2 p-2"
+          />
+          <DatePicker
+            selected={startTime}
+            onChange={(date: Date | null) => setStartTime(date)}
+            showTimeSelect
+            showTimeSelectOnly
+            timeIntervals={15}
+            timeCaption="시간 선택"
+            dateFormat="HH:mm"
+            placeholderText="시간 선택"
+            className="w-full rounded-lg border-2 p-2"
+          />
+        </div>
+        {/* 종료 날짜 및 시간 선택 */}
+        <div className="flex w-full items-center gap-4">
+          <label className="mb-2 font-medium">종료</label>
+          <DatePicker
+            selected={endDate}
+            onChange={(date: Date | null) => setEndDate(date)}
+            dateFormat="yyyy.MM.dd"
+            placeholderText="날짜 선택"
+            minDate={startDate || undefined}
+            className="w-full rounded-lg border-2 p-2"
+          />
+          <DatePicker
+            selected={endTime}
+            onChange={(date: Date | null) => setEndTime(date)}
+            showTimeSelect
+            showTimeSelectOnly
+            timeIntervals={15}
+            timeCaption="시간 선택"
+            dateFormat="HH:mm"
+            placeholderText="시간 선택"
+            className="w-full rounded-lg border-2 p-2"
+          />
+        </div>
+      </div>
+    </div>
   );
 }