Feat - 날짜 지정 유효성 검사 및 커스텀 변경 (#60)

chalIengers · Sep 23, 2023 · 9c6e73b · 9c6e73b
1 parent aef7d87
commit 9c6e73b
Show file tree

Hide file tree

Showing 3 changed files with 146 additions and 68 deletions.
diff --git a/src/component/project/publish/ProjectPublish.tsx b/src/component/project/publish/ProjectPublish.tsx
@@ -7,8 +7,8 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import 'react-date-range/dist/styles.css'; // main style file
 import 'react-date-range/dist/theme/default.css';
-import { Calendar, DateRangePicker, DateRange } from 'react-date-range';
-
+import { DateRangePicker } from 'react-date-range';
+import ko from 'date-fns/locale/ko';
 import { css } from '@emotion/react';
 import { v4 } from 'uuid';
 import { Editor } from 'editor_likelion';
@@ -38,10 +38,12 @@ import {
   Stackoptions,
   OptionData,
   StackInput,
+  DateRanges,
 } from './component';
 import {
   updateProjectCrew,
   useDateRange,
+  useDateRanges,
   useFileImageUpload,
   useImageUpload,
   useStackTags,
@@ -68,8 +70,7 @@ const ProjectPublish = () => {
     Image,
     uploadImage,
   });
-
-  const { DateRange, DateRangeChange } = useDateRange('');
+  const { formattedDateRange, handleDateRangeChange } = useDateRanges();
   const { StackTags, AddStackTag, removeStackTag } = useStackTags();
   const { teamInfoBoxes, handleInfoChange, handleAddInfoBox, handleDeleteInfoBox } =
     useTeamInfoBoxes();
@@ -111,9 +112,9 @@ const ProjectPublish = () => {
 
   const doAsyncWork = async (data: any) => {
     try {
-      await mutation[0]({ accessToken, newProjectData: data });
+      // await mutation[0]({ accessToken, newProjectData: data });
       console.log(data);
-      navigate('/project');
+      // navigate('/project');
     } catch (error) {
       console.error('데이터 전송 중 오류 발생:', error);
       navigate('/project/publish');
@@ -128,7 +129,7 @@ const ProjectPublish = () => {
       const crewData = updateProjectCrew(teamInfoBoxes, otherData);
       otherData.projectCrew = crewData;
       otherData.projectTechStack = techStacks;
-      otherData.projectPeriod = DateRange;
+      otherData.projectPeriod = formattedDateRange;
       otherData.imageUrl = imageUrl;
 
       const errorMessageId = validateProjectData(otherData);
@@ -144,22 +145,6 @@ const ProjectPublish = () => {
       console.error('데이터 전송 중 오류 발생:', error);
     }
   };
-  const [selectedRange, setSelectedRange] = useState([
-    {
-      startDate: new Date(),
-      endDate: new Date(),
-      key: 'selection',
-    },
-  ]);
-
-  const handleSelect = (ranges: any) => {
-    setSelectedRange([ranges.selection]);
-  };
-  const [isDatePickerVisible, setDatePickerVisible] = useState(false);
-
-  const handleDatePickerClick = () => {
-    setDatePickerVisible((prevVisible) => !prevVisible);
-  };
 
   return (
     <Inner>
@@ -277,40 +262,7 @@ const ProjectPublish = () => {
                 )}
               />
               <Header2>프로젝트 기간</Header2>
-              <div
-                css={css`
-                  position: relative;
-                `}
-              >
-                <button type="button" onClick={handleDatePickerClick}>
-                  시작 날짜를 선택하세요
-                </button>
-                <p>Selected Start Date: {selectedRange[0].startDate.toDateString()}</p>
-                <p>Selected End Date: {selectedRange[0].endDate.toDateString()}</p>
-                {isDatePickerVisible && (
-                  <div
-                    css={css`
-                      position: absolute;
-                      z-index: 1;
-                      top: 100%;
-                      background-color: white;
-                      margin-top: 2rem;
-                      border: 1px solid #ccc;
-                      border-radius: 20px;
-                      padding: 20px;
-                    `}
-                  >
-                    <DateRangePicker
-                      css={css`
-                        color: black;
-                      `}
-                      ranges={selectedRange}
-                      onChange={handleSelect}
-                    />
-                  </div>
-                )}
-              </div>
-
+              <DateRanges onDateRangeChange={handleDateRangeChange} />
               {/* <DateSelector onDateRangeChange={DateRangeChange} /> */}
 
               <Header2>사용된 기술 스택</Header2>

diff --git a/src/component/project/publish/component.tsx b/src/component/project/publish/component.tsx
@@ -4,10 +4,11 @@
 import { css } from '@emotion/react';
 import React, { ChangeEvent, useEffect, useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
-import { ko } from 'date-fns/esm/locale';
+import ko from 'date-fns/locale/ko';
 import DatePicker from 'react-datepicker';
 import 'react-datepicker/dist/react-datepicker.css';
 
+import { DateRangePicker } from 'react-date-range';
 import theme from '../../../styles/theme';
 import { Body5, Header1, Section } from '../../emotion/GlobalStyle';
 import {
@@ -19,8 +20,8 @@ import {
   RowContainer,
   imageNames,
 } from '../emotion/component';
-import { StackInputProps, StackTagInputProps, TeamMember } from '../../../types/globalType';
-import { extractSubstring } from './hook';
+import { StackInputProps, TeamMember } from '../../../types/globalType';
+import { extractSubstring, formatDateString } from './hook';
 
 // 셀렉트 옵션 정의
 export const Categoryoptions = [
@@ -399,12 +400,6 @@ export const LinkInputBox2 = ({
   );
 };
 
-const datePickerStyles = css`
-  width: 300px;
-  height: 40px;
-  /* 여기에 원하는 스타일을 추가합니다. */
-`.styles;
-
 // 날짜 정의 컴포넌트
 export const DateSelector = ({
   onDateRangeChange,
@@ -431,7 +426,6 @@ export const DateSelector = ({
 
   return (
     <DatePicker
-      className={datePickerStyles}
       selectsRange
       startDate={startDate}
       endDate={endDate}
@@ -547,3 +541,102 @@ export const OptionData = ({ data }: { data: any }) => {
 
   return options;
 };
+
+export const DateRanges = ({
+  onDateRangeChange,
+}: {
+  onDateRangeChange: (dateRange: string) => void;
+}) => {
+  const [selectedRange, setSelectedRange] = useState([
+    {
+      startDate: new Date(),
+      endDate: new Date(),
+      key: 'selection',
+    },
+  ]);
+  const [Datestring, setDatestring] = useState('기간을 선택하세요');
+  const handleSelect = (ranges: any) => {
+    const formattedStartDate = formatDateString(ranges.selection.startDate.toDateString());
+    const formattedEndDate = formatDateString(ranges.selection.endDate.toDateString());
+    setSelectedRange([ranges.selection]);
+    setDatestring(`${formattedStartDate} - ${formattedEndDate}`);
+    const formattedDateRange = `${formattedStartDate} - ${formattedEndDate}`;
+    onDateRangeChange(formattedDateRange);
+  };
+  const [isDatePickerVisible, setDatePickerVisible] = useState(false);
+
+  const handleDatePickerClick = () => {
+    setDatePickerVisible((prevVisible) => !prevVisible);
+  };
+
+  return (
+    <div
+      css={css`
+        position: relative;
+      `}
+    >
+      <button
+        type="button"
+        onClick={handleDatePickerClick}
+        css={css`
+          color: #cbcbcb;
+          font-size: 2rem;
+          letter-spacing: -0.6px;
+          ${theme.typography.body1}
+        `}
+      >
+        {Datestring}
+      </button>
+      {isDatePickerVisible && (
+        <div
+          css={css`
+            position: absolute;
+            z-index: 1;
+            top: 100%;
+            background-color: white;
+            margin-top: 2rem;
+            border: 1px solid #ccc;
+            border-radius: 20px;
+            padding: 20px;
+          `}
+        >
+          <DateRangePicker
+            css={css`
+              color: black;
+            `}
+            locale={ko}
+            ranges={selectedRange}
+            onChange={handleSelect}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export const AutoHideAlert = () => {
+  const [isAlertVisible, setAlertVisible] = useState(true);
+
+  // 5초 후에 알림을 숨김
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setAlertVisible(false);
+    }, 5000); // 5초 (5000밀리초)
+
+    // 컴포넌트가 언마운트되면 타이머를 클리어하여 메모리 누수를 방지
+    return () => {
+      clearTimeout(timer);
+    };
+  }, []);
+
+  return (
+    <div>
+      {isAlertVisible && (
+        <div>
+          {/* 알림 내용 */}
+          <p>이미지를 넣어주세요</p>
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/src/component/project/publish/hook.ts b/src/component/project/publish/hook.ts
@@ -163,7 +163,6 @@ export const updateProjectCrew = (teamInfoBoxes: any[], updatedData: any) => {
 
 export const validateProjectData = (otherData: any) => {
   if (!otherData.imageUrl) {
-    alert('이미지를 넣어주세요');
     return 'ImageContainer';
   }
   if (!otherData.projectName) {
@@ -199,3 +198,37 @@ export const validateProjectData = (otherData: any) => {
   }
   return null;
 };
+const monthMap: { [key: string]: string } = {
+  Jan: '01',
+  Feb: '02',
+  Mar: '03',
+  Apr: '04',
+  May: '05',
+  Jun: '06',
+  Jul: '07',
+  Aug: '08',
+  Sep: '09',
+  Oct: '10',
+  Nov: '11',
+  Dec: '12',
+};
+
+export const formatDateString = (dateString: any) => {
+  const [day, month, dayNum, year] = dateString.split(' ');
+  const formattedMonth = monthMap[month];
+  const formattedDayNum = dayNum.length === 1 ? `0${dayNum}` : dayNum;
+
+  return `${year}-${formattedMonth}-${formattedDayNum}`;
+};
+export const useDateRanges = () => {
+  const [formattedDateRange, setFormattedDateRange] = useState('');
+
+  const handleDateRangeChange = (range: string) => {
+    setFormattedDateRange(range);
+  };
+
+  return {
+    formattedDateRange,
+    handleDateRangeChange,
+  };
+};