From 9c6e73b4afa76abf52eeeec45dc62462750d1395 Mon Sep 17 00:00:00 2001 From: Cheonse <108046230+cheonseunghyeon@users.noreply.github.com> Date: Sat, 23 Sep 2023 12:43:06 +0900 Subject: [PATCH] =?UTF-8?q?Feat=20-=20=EB=82=A0=EC=A7=9C=20=EC=A7=80?= =?UTF-8?q?=EC=A0=95=20=EC=9C=A0=ED=9A=A8=EC=84=B1=20=EA=B2=80=EC=82=AC=20?= =?UTF-8?q?=EB=B0=8F=20=EC=BB=A4=EC=8A=A4=ED=85=80=20=EB=B3=80=EA=B2=BD=20?= =?UTF-8?q?(#60)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../project/publish/ProjectPublish.tsx | 66 ++-------- src/component/project/publish/component.tsx | 113 ++++++++++++++++-- src/component/project/publish/hook.ts | 35 +++++- 3 files changed, 146 insertions(+), 68 deletions(-) diff --git a/src/component/project/publish/ProjectPublish.tsx b/src/component/project/publish/ProjectPublish.tsx index bda16c7..08dde1e 100644 --- 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 ( @@ -277,40 +262,7 @@ const ProjectPublish = () => { )} /> 프로젝트 기간 -
- -

Selected Start Date: {selectedRange[0].startDate.toDateString()}

-

Selected End Date: {selectedRange[0].endDate.toDateString()}

- {isDatePickerVisible && ( -
- -
- )} -
- + {/* */} 사용된 기술 스택 diff --git a/src/component/project/publish/component.tsx b/src/component/project/publish/component.tsx index 6327baa..bdfaa19 100644 --- 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 ( { 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 ( +
+ + {isDatePickerVisible && ( +
+ +
+ )} +
+ ); +}; + +export const AutoHideAlert = () => { + const [isAlertVisible, setAlertVisible] = useState(true); + + // 5초 후에 알림을 숨김 + useEffect(() => { + const timer = setTimeout(() => { + setAlertVisible(false); + }, 5000); // 5초 (5000밀리초) + + // 컴포넌트가 언마운트되면 타이머를 클리어하여 메모리 누수를 방지 + return () => { + clearTimeout(timer); + }; + }, []); + + return ( +
+ {isAlertVisible && ( +
+ {/* 알림 내용 */} +

이미지를 넣어주세요

+
+ )} +
+ ); +}; diff --git a/src/component/project/publish/hook.ts b/src/component/project/publish/hook.ts index 27c91f5..dd6c8dc 100644 --- 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, + }; +};