Merge pull request #232 from TEAM-MONGDOL/MF-197-Fix-Admin

[fix] - 유효성 검사 및 title, 파비콘 설정

src/app/(route)/admin/(with-layout)/layout.tsx

@@ -1,13 +1,18 @@
 import { DkationAdminLogo } from '@/_assets/icons';
 import NavBarContainer from '@/_components/common/containers/NavBarContainer';
 import HeaderModule from '@/_components/common/modules/HeaderModule';
+import { Metadata } from 'next';
 import Image from 'next/image';
 import { ReactNode } from 'react';
 
 interface Props {
   children: ReactNode;
 }
 
+export const metadata: Metadata = {
+  title: 'Dkation ADMIN',
+};
+
 const AdminLayout = ({ children }: Props) => {
   return (
     <div className="flex h-screen flex-col">

src/app/(route)/admin/(with-layout)/workation/new/page.tsx

@@ -21,9 +21,13 @@ import NetworkError from '@/_components/common/networkError';
 
 const WorkationNew = () => {
   const router = useRouter();
-  const [formData, setFormData] = useState({
+  const [formData, setFormData] = useState<{
+    title: string;
+    number: number | null;
+    description: string;
+  }>({
     title: '',
-    number: '',
+    number: null,
     description: '',
   });
   const { data, isLoading, isError } = useGetWkPlaceListQuery({
@@ -36,13 +40,13 @@ const WorkationNew = () => {
     null,
   );
   const [startDateRecruitment, setStartDateRecruitment] = useState<Date | null>(
-    dayjs().subtract(1, 'year').toDate(),
+    dayjs().toDate(),
   );
   const [endDateRecruitment, setEndDateRecruitment] = useState<Date | null>(
     dayjs().toDate(),
   );
   const [startDateWorkation, setStartDateWorkation] = useState<Date | null>(
-    dayjs().subtract(1, 'year').toDate(),
+    dayjs().toDate(),
   );
   const [endDateWorkation, setEndDateWorkation] = useState<Date | null>(
     dayjs().toDate(),
@@ -72,6 +76,66 @@ const WorkationNew = () => {
       [name]: value,
     }));
   };
+
+  const checkData = () => {
+    if (!formData.title) {
+      alert('제목을 입력해주세요.');
+      return;
+    }
+
+    if (!selectedPlace) {
+      alert('선택한 장소를 찾을 수 없습니다.');
+      return;
+    }
+
+    if (!formData.number) {
+      alert('모집 인원을 입력해주세요.');
+      return;
+    }
+
+    if (formData.number > selectedPlace.maxPeople) {
+      alert(
+        `모집 인원이 장소의 최대 인원(${selectedPlace.maxPeople}명)을 초과합니다.`,
+      );
+      return;
+    }
+
+    if (!formData.description) {
+      alert('내용을 입력해주세요.');
+      return;
+    }
+
+    if (!startDateRecruitment || !endDateRecruitment) {
+      alert('모집 기간을 입력해주세요.');
+      return;
+    }
+
+    if (!startDateWorkation || !endDateWorkation) {
+      alert('워케이션 기간을 입력해주세요.');
+      return;
+    }
+
+    if (dayjs(startDateRecruitment).isAfter(endDateRecruitment)) {
+      alert('모집 시작일이 마감일보다 늦습니다.');
+      return;
+    }
+
+    if (dayjs(startDateWorkation).isAfter(endDateWorkation)) {
+      alert('워케이션 시작일이 종료일보다 늦습니다.');
+      return;
+    }
+
+    if (
+      dayjs(startDateRecruitment).isAfter(startDateWorkation) ||
+      dayjs(endDateRecruitment).isAfter(startDateWorkation)
+    ) {
+      alert('모집 기간이 워케이션 시작일보다 늦습니다.');
+      return;
+    }
+
+    setIsConfirmModelOpen(true);
+  };
+
   const handleSelect = (option: string) => {
     const selected = data.wktPlaceInfos.find((place) => place.place === option);
     setSelectedPlace(selected || null);
@@ -82,6 +146,12 @@ const WorkationNew = () => {
       alert('선택한 장소를 찾을 수 없습니다.');
       return;
     }
+
+    if (!formData.number) {
+      alert('모집 인원을 입력해주세요.');
+      return;
+    }
+
     postWk({
       wktPlaceId: selectedPlace.id, // 워케이션 목록 api 가져와서 id 주기
       title: formData.title,
@@ -90,7 +160,7 @@ const WorkationNew = () => {
       applyStartDate: dayjs(startDateRecruitment!).format('YYYY-MM-DD'),
       applyEndDate: dayjs(endDateRecruitment!).format('YYYY-MM-DD'),
       description: formData.description,
-      totalRecruit: parseInt(formData.number, 10),
+      totalRecruit: formData.number,
     });
     setIsConfirmModelOpen(false);
   };
@@ -99,29 +169,29 @@ const WorkationNew = () => {
   return (
     <section className="flex flex-col">
       <TitleBarModule title="워케이션 등록" type="LEFT" />
-      <div className="mt-10 flex flex-col gap-[30px]">
-        <div className="flex h-52 gap-x-8">
+      <div className="mt-10 flex w-full flex-col gap-[30px]">
+        <div className="flex h-52 w-full gap-x-8">
           {selectedPlace ? (
             <Image
-              className="h-[204px] min-w-[400px] object-cover"
+              className="h-[204px] grow object-cover"
               src={selectedPlace.thumbnailUrl}
               alt="PlaceGallery"
               width={400}
               height={204}
             />
           ) : (
-            <div className="flex h-[204px] min-w-[400px] flex-col items-center justify-center gap-y-2 bg-cus-100 text-sub-200">
+            <div className="flex h-[204px] grow flex-col items-center justify-center gap-y-2 bg-cus-100 text-sub-200">
               <Image src={ImageIcon} alt="PlaceGallery" />
-              <p className="mt-2 w-full text-center">
+              <p className="mt-2 w-full px-5 text-center">
                 장소 선택 시
                 <br />
                 대표 이미지를 확인할 수 있습니다.
               </p>
             </div>
           )}
-          <div className="w-full">
+          <div className="flex w-2/3 flex-col gap-y-6">
             <div className="flex w-full gap-6">
-              <div className="w-full">
+              <div className="grow">
                 <InputModule
                   subtitle="제목"
                   placeholder="제목을 입력하세요"
@@ -131,17 +201,18 @@ const WorkationNew = () => {
                   name="title"
                 />
               </div>
-              <div className="w-52">
+              <div className="w-40 xl:w-52">
                 <InputModule
+                  type="number"
                   subtitle="모집 인원"
                   placeholder="0"
-                  value={formData.number}
+                  value={formData.number?.toLocaleString() || ''}
                   onChange={handleChange}
                   name="number"
                 />
               </div>
             </div>
-            <div className="mt-6 flex w-full flex-col gap-4">
+            <div className="flex w-full flex-col gap-4">
               <p className="text-3 font-semibold">장소</p>
               <DropdownModule
                 selectedOption={selectedPlace?.place || null}
@@ -195,7 +266,7 @@ const WorkationNew = () => {
           text="등록"
           type="button"
           buttonStyle="yellow"
-          onClick={() => setIsConfirmModelOpen(true)}
+          onClick={checkData}
         />
       </div>
       {isConfirmModelOpen && (

src/app/(route)/admin/(with-layout)/workation/place/new/page.tsx

@@ -79,6 +79,20 @@ const AdminWorkationPlaceNewPage = () => {
     });
   };
 
+  const checkData = () => {
+    if (
+      formData.placeName === '' ||
+      formData.address === '' ||
+      formData.maxPeople === 0 ||
+      formData.fileInfos.length === 0
+    ) {
+      alert('모든 정보를 입력해주세요.');
+      return false;
+    }
+
+    setIsConfirmModelOpen(true);
+  };
+
   const handleSubmit = () => {
     postWkPlace({
       place: formData.placeName,
@@ -211,7 +225,7 @@ const AdminWorkationPlaceNewPage = () => {
           type="button"
           width="fixed"
           buttonStyle="yellow"
-          onClick={() => setIsConfirmModelOpen(true)}
+          onClick={checkData}
         />
       </div>
       {isConfirmModelOpen && (

src/app/_components/common/atoms/InputAreaAtom.tsx

@@ -48,9 +48,13 @@ const InputAreaAtom = ({
     status !== 'readonly' && status !== 'disabled' && status !== 'cursor';
 
   return (
-    <div role="presentation" className="relative" onClick={onClick}>
+    <div
+      role="presentation"
+      className={`flex w-full items-center gap-x-4 rounded-regular border border-stroke-100 px-3 py-3.5 text-4 ${getStatus()}`}
+      onClick={onClick}
+    >
       <input
-        className={`w-full rounded-regular border border-stroke-100 py-3.5 pl-3 text-4 placeholder-sub-200 outline-0 ${getStatus()}`}
+        className="min-w-0 grow bg-transparent placeholder-sub-200 outline-0"
         placeholder={placeholder}
         readOnly={!isInteractive}
         value={value || ''}
@@ -60,7 +64,7 @@ const InputAreaAtom = ({
         onWheel={(e) => e.currentTarget.blur()}
       />
       {isInteractive && textCount && (
-        <div className="absolute bottom-3.5 right-3.5">
+        <div className="flex shrink-0 items-center justify-center">
           <TextCountAtom text={value.toString()} maxLength={textCount} />
         </div>
       )}

src/app/layout.tsx

@@ -9,8 +9,12 @@ import { DkationLogo } from './_assets/icons';
 const notoSansKR = Noto_Sans_KR({ subsets: ['latin'] });
 
 export const metadata: Metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
+  title: 'Dkation: 워케이션 추첨 서비스',
+  icons: [
+    {
+      url: '/favicon.svg',
+    },
+  ],
 };
 
 export default function RootLayout({