Skip to content

Commit

Permalink
feat: plan 생성, 삭제 구현방식 변경
Browse files Browse the repository at this point in the history
  • Loading branch information
@jjeongsu
jjeongsu committed Jan 11, 2024
1 parent 2021e46 commit 970a57d
Show file tree
Hide file tree
Showing 7 changed files with 187 additions and 167 deletions.
76 changes: 38 additions & 38 deletions src/components/Plan/KakaoMap.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,50 +2,50 @@ import styled from 'styled-components';
import logo from '../../assets/logo-marker.png';
import { useEffect } from 'react';
function KakaoMap({ address }) {
useEffect(() => {
const { kakao } = window;
// var container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스
// var options = {
// center: new kakao.maps.LatLng(33.450701, 126.570667), //지도의 중심좌표.
// level: 3, //지도의 레벨(확대, 축소 정도)
// };
// const map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴
// useEffect(() => {
// const { kakao } = window;
// var container = document.getElementById('maps'); //지도를 담을 영역의 DOM 레퍼런스
// var options = {
// center: new kakao.maps.LatLng(33.450701, 126.570667), //지도의 중심좌표.
// level: 3, //지도의 레벨(확대, 축소 정도)
// };
// const map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴

// // 주소-좌표 변환 객체
// const geocoder = new kakao.maps.services.Geocoder();
// // 주소-좌표 변환 객체
// const geocoder = new kakao.maps.services.Geocoder();

// // 주소로 좌표를 검색
// if (address !== '') {
// geocoder.addressSearch(address, function (result, status) {
// if (status === kakao.maps.services.Status.OK) {
// //정상적으로 검색 완료
// const coords = new kakao.maps.LatLng(result[0].y, result[0].x);
// // 주소로 좌표를 검색
// if (address !== '') {
// geocoder.addressSearch(address, function (result, status) {
// if (status === kakao.maps.services.Status.OK) {
// //정상적으로 검색 완료
// const coords = new kakao.maps.LatLng(result[0].y, result[0].x);

// //마커에 대한 정보
// const markerImgSrc = logo;
// const markerImgSize = new kakao.maps.Size(80, 80);
// const markerImgOption = { offset: new kakao.maps.Point(27, 60) };
// const markerImage = new kakao.maps.MarkerImage(
// markerImgSrc,
// markerImgSize,
// // markerImgOption,
// );
// //마커에 대한 정보
// const markerImgSrc = logo;
// const markerImgSize = new kakao.maps.Size(80, 80);
// const markerImgOption = { offset: new kakao.maps.Point(27, 60) };
// const markerImage = new kakao.maps.MarkerImage(
// markerImgSrc,
// markerImgSize,
// // markerImgOption,
// );

// // 결과값으로 받은 위치를 마커로 표시
// var marker = new kakao.maps.Marker({
// map: map,
// position: coords,
// image: markerImage,
// });
// // 결과값으로 받은 위치를 마커로 표시
// var marker = new kakao.maps.Marker({
// map: map,
// position: coords,
// image: markerImage,
// });

// // 지도의 중심을 결과값으로 받은 위치로 이동
// map.setCenter(coords);
// }
// });
// }
}, []);
// // 지도의 중심을 결과값으로 받은 위치로 이동
// map.setCenter(coords);
// }
// });
// }
// }, []);

return <MapWrapper id="map"></MapWrapper>;
return <MapWrapper id="maps"></MapWrapper>;
}
export default KakaoMap;
const MapWrapper = styled.div``;
139 changes: 77 additions & 62 deletions src/components/Plan/PlanBoard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,28 +6,38 @@ import { useEffect, useState } from 'react';
import GridLayout from 'react-grid-layout';
import AddPlanIcon from '../../assets/add-plan-icon';
import PlanDetailCard from './PlanDetailCard';
import { clockTimes } from '../../utils/createSelectTimes';
import { useSelector } from 'react-redux';
function PlanBoard({ days, setIsOpenModal, setDefaultDate, setCurrentSpot }) {
function PlanBoard({
days,
setIsOpenModal,
setDefaultDate,
setCurrentSpot,
plans,
}) {
const times = createSelectTimes();
const plans = useSelector((state) => state.Plan);

//react-grid-layout 관련 설정
const defaultProps = {
cols: 3, //days.length에 맞춰서 조절하는 코드 추가하기
verticalCompact: false,
preventCollision: true,
};

const [mylayout, setMyLayout] = useState([]);
// { i: 'random', x: plans.day, y: palns.startIndex, w:1, h: ~~endIndex, static: false }
useEffect(() => {
const l = [];
plans.forEach((p, index) => {
const gap = ~~p.endIndex - ~~p.startIndex;
//timestamp를 index로 변환하기
const today = p.startTime?.slice(0, 10);
const todayIndex = days.findIndex((date) => date.date_full === today);
const trim_startTime = p.startTime?.slice(11);
const trim_endTime = p.finishTime?.slice(11);
const startIndex = clockTimes.findIndex(
(time) => time.text === trim_startTime,
);
const endIndex = clockTimes.findIndex(
(time) => time.text == trim_endTime,
);
const gap = ~~endIndex - ~~startIndex;
const newPlan = {
i: index.toString(),
x: ~~p.day,
y: ~~p.startIndex,
x: ~~todayIndex,
y: ~~startIndex,
w: 1,
h: gap,
};
Expand All @@ -47,60 +57,65 @@ function PlanBoard({ days, setIsOpenModal, setDefaultDate, setCurrentSpot }) {
))}
</div>
<div className="schedule-table">
{days.map((day, dayi) => (
<div className="oneday-schedule" key={dayi}>
<div className="gap">
<div className="board-header"></div>
{hours24.map((time, timei) => (
<div className="gap-entity" key={timei}></div>
))}
</div>
<div className="contents">
<div className="board-header">
{day.date_trimed} <strong> {day.day}</strong>
<button
className="add-plan-button"
onClick={() => {
setIsOpenModal(true);
setDefaultDate(day.date_trimed);
}}
>
<AddPlanIcon />
</button>
{days &&
days.map((day, dayi) => (
<div className="oneday-schedule" key={dayi}>
<div className="gap">
<div className="board-header"></div>
{hours24.map((time, timei) => (
<div className="gap-entity" key={timei}></div>
))}
</div>
{times.map((time, timei) => (
<div className="minute-entity" key={timei}>
{' '}
<div className="contents">
<div className="board-header">
{day.date_trimed} <strong> {day.day}</strong>
<button
className="add-plan-button"
onClick={() => {
setIsOpenModal(true);
setDefaultDate(day.date_trimed);
}}
>
<AddPlanIcon />
</button>
</div>
))}
{times.map((time, timei) => (
<div className="minute-entity" key={timei}>
{' '}
</div>
))}
</div>
</div>
</div>
))}
))}
</div>
<GridLayout
className="grid-drag-board"
cols={3}
rowHeight={12}
width={728}
preventCollision={true}
verticalCompact={false}
margin={[24, 0]}
layout={mylayout}
>
{plans?.map((p, index) => {
return (
<div key={index.toString()}>
<PlanDetailCard
address={p.address}
content={p.content}
category={p.category}
userId="1"
setCurrentSpot={setCurrentSpot}
/>
</div>
);
})}
</GridLayout>
{mylayout && (
<GridLayout
className="grid-drag-board"
cols={3}
rowHeight={12}
width={728}
preventCollision={true}
compactType={null}
margin={[24, 0]}
layout={mylayout}
>
{plans?.map((p, index) => {
return (
<div key={index.toString()}>
<PlanDetailCard
address={p.address}
content={p.content}
category={p.category}
userId={p.userId}
setCurrentSpot={setCurrentSpot}
planId={p.planId}
tripId={p.tripId}
/>
</div>
);
})}
</GridLayout>
)}
</S.BoardBox>
);
}
Expand Down
31 changes: 19 additions & 12 deletions src/components/Plan/PlanDetailCard.js
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,39 @@
import styled from 'styled-components';
import { category_palette, categoryToKo } from '../../assets/category-palette';
import { useQuery } from 'react-query';
import { useMutation, useQuery } from 'react-query';
import { getUserProfile } from '../../apis/api/plan-userinfo';
import ModifyDetailIcon from '../../assets/plan-modi-detail-icon';
import DefaultProfileIcon from '../../assets/default-profile-icon';
import { useState, useRef, useEffect } from 'react';

import { deletePlan } from '../../apis/api/plan';
import { useQueryClient } from 'react-query';
function PlanDetailCard({
address,
content,
category,
userId,
setCurrentSpot,
planId,
tripId,
}) {
const Color = category_palette[category];
const [isModalOpen, setIsModalOpen] = useState(false);
const cardRef = useRef(null);
const contentRef = useRef(null);

//const { isLoading, fetchedUserProfile } = useQuery(
// 'userProfileInfo',
// getUserProfile(userId),
//); //프로필 이미지 정보 만 가져옴
console.log('planId', planId);
const queryClient = useQueryClient();
const handleDelete = (e) => {
e.preventDefault();
deletePlanMutation.mutate();
setIsModalOpen(false);
};
const deletePlanMutation = useMutation({
mutationFn: () => deletePlan(tripId, planId),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['getAllPlan'] });
},
});

const userProfile = ''; //유저프로필 복호화

Expand Down Expand Up @@ -67,12 +79,7 @@ function PlanDetailCard({
>
수정하기
</button>
<button
className="delete"
onClick={() => {
console.log('삭제하기cliked');
}}
>
<button className="delete" onClick={handleDelete}>
삭제하기
</button>
</ModiModal>
Expand Down
28 changes: 14 additions & 14 deletions src/components/Plan/PlanModal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import { categoryToEng } from '../../assets/category-palette';
import { createTimestamp } from '../../utils/createTimestamp';
import KakaoPostcode from './KakaoPostcode';
import { createPlan } from '../../apis/api/plan';
import { useMutation, useQueryClient } from 'react-query';
function PlanModal({
isOpenModal,
setIsOpenModal,
Expand All @@ -35,28 +36,24 @@ function PlanModal({
const [isOpenPostcode, setIsOpenPostcode] = useState(false);
const [address, setAddress] = useState('');

const queryClient = useQueryClient();
const uploadPlanMutation = useMutation({
mutationFn: (newPlan) => createPlan(tripId, newPlan),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['getAllPlan'] });
},
});

const onSubmit = (data) => {
setPlans((plans) => [
...plans,
{
address: address,
day: data.selectDay,
startIndex: data.startTime,
endIndex: data.endTime,
content: data.content,
category: categoryToEng[data.category],
},
]);
//실제 plan 생성
const cur_date = days[data.selectDay];

const obj = createTimestamp(
cur_date.date_full,
data.startTime,
data.endTime,
);

const response = createPlan(tripId, {
const newPlan = {
name: 'defaultName',
address: {
roadNameAddress: address,
Expand All @@ -66,8 +63,11 @@ function PlanModal({
finishTime: obj.endTimestamp,
content: data.content,
category: categoryToEng[data.category],
});
};

uploadPlanMutation.mutate(newPlan);

//초기화
setIsOpenModal(false);
reset({
selectDay: 0,
Expand Down
Loading

0 comments on commit 970a57d

Please sign in to comment.