diff --git a/src/apis/TodayILearned/todayilearned.js b/src/apis/TodayILearned/todayilearned.js index 197c2bd..e2be421 100644 --- a/src/apis/TodayILearned/todayilearned.js +++ b/src/apis/TodayILearned/todayilearned.js @@ -1,27 +1,27 @@ import axiosInstance from 'apis/setting'; // Today-I-Learned 조회 -export const getTodayILearnedData = async ({ date }) => { +export const getTodayILearnedData = async (date) => { try { - const res = await axiosInstance.get(`/today-i-learned?date=${date}`, { + const res = await axiosInstance.get(`/today-i-learned/web`, { params: { date: date, }, }); - return res.data.result; + return res.data.result.todayILearnedInfos; } catch (error) { console.log(error); } }; // Today-I-Learned 추가 -export const addTodayILearned = async ({ +export const addTodayILearned = async ( part, title, subTitle, content, file, -}) => { +) => { const formData = new FormData(); if (file) { formData.append('file', file); diff --git a/src/apis/TodoList/todolist.js b/src/apis/TodoList/todolist.js index 48f48fd..c7115d4 100644 --- a/src/apis/TodoList/todolist.js +++ b/src/apis/TodoList/todolist.js @@ -1,15 +1,14 @@ import axiosInstance from 'apis/setting'; // 투두리스트 조회 -export const getTodoListData = async ({ date }) => { +export const getTodoListData = async (date) => { try { const res = await axiosInstance.get(`/to-do-lists?date=${date}`, { params: { date: date, }, }); - console.log(res.data.result); - return res.data.result; + return res.data.result.todoLists; } catch (error) { console.log(error); } @@ -22,8 +21,7 @@ export const addTodoList = async (title, deadline) => { title: title, deadline: deadline, }); - console.log(res.data.result); - //return res.data.result; + return res.data.result; } catch (error) { console.log(error); } diff --git a/src/apis/app/auth/KakaoAuth.jsx b/src/apis/app/auth/KakaoAuth.jsx index ad959d2..fbea230 100644 --- a/src/apis/app/auth/KakaoAuth.jsx +++ b/src/apis/app/auth/KakaoAuth.jsx @@ -57,8 +57,9 @@ const KakaoAuth = () => { if (serviceMember) { navigate('/main'); + } else { + navigate('/signupform'); } - navigate('/signupform'); } catch (error) { console.log(error); } diff --git a/src/components/ToDoList/TodoListModal.jsx b/src/components/ToDoList/AddTodoListModal.jsx similarity index 86% rename from src/components/ToDoList/TodoListModal.jsx rename to src/components/ToDoList/AddTodoListModal.jsx index 4c71427..7a27fdd 100644 --- a/src/components/ToDoList/TodoListModal.jsx +++ b/src/components/ToDoList/AddTodoListModal.jsx @@ -116,7 +116,7 @@ const AddButton = styled.div` cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')}; `; -const TodoListModal = ({ setIsModalOpen, selectedDate, addTodoList }) => { +const TodoListModal = ({ setIsAddModalOpen, selectedDate, addTodoList }) => { const [title, setTitle] = useState(''); const [isNight, setIsNight] = useState(false); const [hour, setHour] = useState(''); @@ -147,30 +147,38 @@ const TodoListModal = ({ setIsModalOpen, selectedDate, addTodoList }) => { // 취소 버튼 클릭시 모달 닫기 const handleCancelClick = () => { - setIsModalOpen(false); + setIsAddModalOpen(false); }; - // 추가 버튼 클릭시 To Do List 추가 + const offset = 9 * 60 * 60 * 1000; // 9시간을 밀리초로 계산 + const handleAddTodoList = () => { // 시간과 분을 이용하여 새로운 날짜 객체 생성 const newDate = new Date(selectedDate); - // 오후 선택 시, 시간에 12를 더하여 오후 시간으로 설정 - if (isNight) { - newDate.setHours(parseInt(hour) + 12); - } else { - newDate.setHours(parseInt(hour)); + // 시간 설정 + let selectedHour = parseInt(hour); + if (isNight && selectedHour !== 12) { + // 오후 선택 시, 시간이 12시가 아니라면 12를 더하여 오후 시간으로 설정 + selectedHour += 12; + } else if (!isNight && selectedHour === 12) { + // 오전 선택 시, 시간이 12시라면 0으로 설정 + selectedHour = 0; } + newDate.setHours(selectedHour); // 분 설정 newDate.setMinutes(parseInt(minute)); + // 시간 오프셋을 더하여 한국 표준시(KST)로 변환 + newDate.setTime(newDate.getTime() + offset); + // ISO 형식의 문자열로 변환하여 서버로 전달 const formattedDate = newDate.toISOString(); // addTodoList 함수 호출하여 추가할 수 있도록 전달 addTodoList(title, formattedDate); - setIsModalOpen(false); + setIsAddModalOpen(false); }; return ( @@ -230,11 +238,9 @@ const TodoListModal = ({ setIsModalOpen, selectedDate, addTodoList }) => { }; TodoListModal.propTypes = { - setIsModalOpen: PropTypes.func.isRequired, + setIsAddModalOpen: PropTypes.func.isRequired, selectedDate: PropTypes.string.isRequired, - //todoListData: PropTypes.array.isRequired, addTodoList: PropTypes.func, - //modifyTodoList: PropTypes.func, }; export default TodoListModal; diff --git a/src/components/ToDoList/UpdateTodoListModal.jsx b/src/components/ToDoList/UpdateTodoListModal.jsx new file mode 100644 index 0000000..6919b0b --- /dev/null +++ b/src/components/ToDoList/UpdateTodoListModal.jsx @@ -0,0 +1,250 @@ +import React, { useState } from 'react'; +import PropTypes from 'prop-types'; +import styled from 'styled-components'; + +import ImgChoose from 'assets/todolist/imgchoose.svg'; + +const Modal = styled.div` + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 30%; + height: 60vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-evenly; + border: 1px solid gray; + border-radius: 12px; + background-color: #ffffff; + z-index: 1000; +`; + +const TitleInput = styled.input` + width: 70%; + color: black; + border: none; + font-size: 14px; + font-weight: 500; + margin: 0 5%; + + &::placeholder, + &::-webkit-input-placeholder { + color: #9f9f9f; + font-weight: 500; + } +`; + +const TimeInput = styled.input` + border: none; + color: #9f9f9f; + font-size: 14px; + text-align: center; + + border-radius: 8px; + background: #f2f2f2; + width: 5vh; + height: 3vh; + + &::placeholder, + &::-webkit-input-placeholder { + color: #9f9f9f; + } +`; + +const Wrapper = styled.div` + display: flex; + flex-direction: row; + width: 60%; + justify-content: space-evenly; + align-items: center; +`; + +const LeftCotainer = styled.div` + display: flex; + justify-content: center; + width: 20%; +`; + +const RighContainer = styled.div` + display: flex; + flex-direction: row; + width: 80%; + justify-content: space-evenly; + align-items: center; +`; + +const DayNightWrapper = styled.div` + display: flex; + flex-direction: column; +`; + +const Status = styled.div` + padding: 5px 10px; + color: ${(props) => (props.selected ? '#f2f2f2' : '#9F9F9F')}; + background-color: ${(props) => (props.selected ? '#9F9F9F' : '#f2f2f2')}; + border-radius: 10px; + font-size: 14px; + cursor: pointer; +`; + +const ButtonWrapper = styled.div` + display: flex; + flex-direction: row; + justify-content: flex-end; + width: 95%; +`; + +const CancelButton = styled.div` + padding: 8px 16px; + margin-right: 8px; + border: none; + border-radius: 4px; + background-color: #f2f2f2; + color: #9f9f9f; + cursor: pointer; +`; + +const AddButton = styled.div` + padding: 8px 16px; + margin-right: 8px; + border: none; + border-radius: 4px; + background-color: ${(props) => (props.disabled ? '#f2f2f2' : '#373C6B')}; + color: ${(props) => (props.disabled ? '#9f9f9f' : '#FFFFFF')}; + cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')}; +`; + +const UpdateTodoListModal = ({ + setIsAddModalOpen, + selectedDate, + updateTodoList, +}) => { + const [title, setTitle] = useState(''); + const [isNight, setIsNight] = useState(false); + const [hour, setHour] = useState(''); + const [minute, setMinute] = useState(''); + + // To Do List 제목 입력 + const handleTitleChange = (event) => { + setTitle(event.target.value); + }; + + // To Do List 오전 선택 + const handleDayClick = () => { + setIsNight(false); + }; + + // To Do List 오후 선택 + const handleNightClick = () => { + setIsNight(true); + }; + + const handleHourChange = (event) => { + setHour(event.target.value); + }; + + const handleMinuteChange = (event) => { + setMinute(event.target.value); + }; + + // 취소 버튼 클릭시 모달 닫기 + const handleCancelClick = () => { + setIsAddModalOpen(false); + }; + + const offset = 9 * 60 * 60 * 1000; // 9시간을 밀리초로 계산 + + const handleAddTodoList = () => { + // 시간과 분을 이용하여 새로운 날짜 객체 생성 + const newDate = new Date(selectedDate); + + // 시간 설정 + let selectedHour = parseInt(hour); + if (isNight && selectedHour !== 12) { + // 오후 선택 시, 시간이 12시가 아니라면 12를 더하여 오후 시간으로 설정 + selectedHour += 12; + } else if (!isNight && selectedHour === 12) { + // 오전 선택 시, 시간이 12시라면 0으로 설정 + selectedHour = 0; + } + newDate.setHours(selectedHour); + + // 분 설정 + newDate.setMinutes(parseInt(minute)); + + // 시간 오프셋을 더하여 한국 표준시(KST)로 변환 + newDate.setTime(newDate.getTime() + offset); + + // ISO 형식의 문자열로 변환하여 서버로 전달 + const formattedDate = newDate.toISOString(); + + // addTodoList 함수 호출하여 추가할 수 있도록 전달 + updateTodoList(title, formattedDate); + setIsAddModalOpen(false); + }; + + return ( + +
{selectedDate.toISOString().slice(0, 10)}
+ 이모티콘 선택 + + + 제목 + + + + + 시간 + + + + 오전 + + + 오후 + + + + 시 + + 분 + + + + + 취소 + + 추가 + + + + ); +}; + +UpdateTodoListModal.propTypes = { + setIsAddModalOpen: PropTypes.func.isRequired, + selectedDate: PropTypes.string.isRequired, + updateTodoList: PropTypes.func, +}; + +export default UpdateTodoListModal; diff --git a/src/components/TodayILearn/OptionTIL.jsx b/src/components/TodayILearn/OptionTIL.jsx index db58f4c..b9181c8 100644 --- a/src/components/TodayILearn/OptionTIL.jsx +++ b/src/components/TodayILearn/OptionTIL.jsx @@ -52,7 +52,7 @@ const FontStyle = styled.div` margin-right: 1vh; `; -const OptionTIL = ({ setPart }) => { +const OptionTIL = ({ part, setPart }) => { const [buttonStates, setButtonStates] = useState({ figma: false, spring: false, @@ -100,6 +100,7 @@ const OptionTIL = ({ setPart }) => { setPart(''); break; } + console.log(part); }; return ( @@ -168,6 +169,7 @@ const OptionTIL = ({ setPart }) => { }; OptionTIL.propTypes = { + part: PropTypes.string, setPart: PropTypes.func.isRequired, }; diff --git a/src/pages/ToDoList/TodoList.jsx b/src/pages/ToDoList/TodoList.jsx index da1db4d..9c0d133 100644 --- a/src/pages/ToDoList/TodoList.jsx +++ b/src/pages/ToDoList/TodoList.jsx @@ -11,9 +11,10 @@ import styled from 'styled-components'; import TitleTDL from 'components/ToDoList/TitleTDL'; import ToDoListCalender from 'components/ToDoList/Calender'; import TDLComponent from 'components/ToDoList/ComponentTDL'; -import TodoListModal from 'components/ToDoList/TodoListModal'; +import AddTodoListModal from 'components/ToDoList/AddTodoListModal'; import AddButtonImg from 'assets/todayilearn/addbutton.svg'; +import UpdateTodoListModal from 'components/ToDoList/UpdateTodoListModal'; const Overlay = styled.div` position: fixed; @@ -68,7 +69,8 @@ const SVGImage = styled.img` const TodoList = () => { const [selectedDate, setSelectedDate] = useState(new Date()); const [todoListData, setTodoListData] = useState([]); - const [isModalOpen, setIsModalOpen] = useState(false); + const [isAddModalOpen, setIsAddModalOpen] = useState(false); + const [isUpdateModalOpen, setIsUpdateModalOpen] = useState(false); const formatDate = (dateString) => { const dateObject = new Date(dateString); @@ -83,7 +85,7 @@ const TodoList = () => { const formattedDate = formatDate(selectedDate); const handleAddButton = () => { - setIsModalOpen(true); + setIsAddModalOpen(true); }; useEffect(() => { @@ -124,14 +126,24 @@ const TodoList = () => { /> )} - {isModalOpen && ( + {isAddModalOpen && ( <> - + + )} + + {isUpdateModalOpen && ( + <> + + diff --git a/src/pages/TodayILearn/NewTIL.jsx b/src/pages/TodayILearn/NewTIL.jsx index eeac53a..02997f3 100644 --- a/src/pages/TodayILearn/NewTIL.jsx +++ b/src/pages/TodayILearn/NewTIL.jsx @@ -115,6 +115,42 @@ const NewTIL = () => { navigate(`/todayilearned`); }; + // const addTIL = async () => { + // const formData = new FormData(); + + // if (file) { + // formData.append('file', file[0]); + // } + + // formData.append( + // 'request', + // JSON.stringify({ + // part: part, + // title: title, + // subTitle: subTitle, + // content: content, + // }), + // ); + + // try { + // const res = await axios.post( + // `${process.env.REACT_APP_TEST_SERVER_URL}/today-i-learned`, + // formData, + // { + // headers: { + // 'Content-Type': 'multipart/form-data', + // Authorization: localStorage.getItem('server Token'), + // }, + // }, + // ); + // console.log(res); + + // navigate(`/todayilearned`); + // } catch (error) { + // console.error(); + // } + // }; + return ( Today I Learned diff --git a/src/pages/TodayILearn/TodayILearned.jsx b/src/pages/TodayILearn/TodayILearned.jsx index 359e510..5d10086 100644 --- a/src/pages/TodayILearn/TodayILearned.jsx +++ b/src/pages/TodayILearn/TodayILearned.jsx @@ -1,5 +1,6 @@ import React, { useState, useEffect } from 'react'; import { useNavigate } from 'react-router-dom'; +import { getTodayILearnedData } from 'apis/TodayILearned/todayilearned'; import axiosInstance from 'apis/setting'; import styled from 'styled-components'; @@ -98,21 +99,23 @@ const TodayILearn = () => { } }; - const getTILData = async (date) => { - try { - const res = await axiosInstance.get(`/today-i-learned`, { - params: { - date: date, - }, - }); - setTilData(res.data.result.todayILearnedInfos); - } catch (error) { - console.error(); - } - }; + // const getTILData = async (date) => { + // try { + // const res = await axiosInstance.get(`/today-i-learned`, { + // params: { + // date: date, + // }, + // }); + // setTilData(res.data.result.todayILearnedInfos); + // } catch (error) { + // console.error(); + // } + // }; useEffect(() => { - getTILData(formattedDate); + getTodayILearnedData(formattedDate).then((data) => { + setTilData(data); + }); }, [formattedDate, tilData]); return ( @@ -140,11 +143,13 @@ const TodayILearn = () => { - + {tilData && ( + + )} );