diff --git a/src/pages/CommunityPage/CommunityDetail.jsx b/src/pages/CommunityPage/CommunityDetail.jsx index 00661a6..e9fab6a 100644 --- a/src/pages/CommunityPage/CommunityDetail.jsx +++ b/src/pages/CommunityPage/CommunityDetail.jsx @@ -10,12 +10,11 @@ const CommunityDetail = () => { const { no } = useParams(); // %% URL에서 글 번호(no)를 가져옴 %% const [postDetail, setPostDetail] = useState([]); const [comments, setComments] = useState([]); + const [refreshComments, setRefreshComments] = useState(false); useEffect(() => { - // 상세정보 불러오기 - axios - .get(`/communities/${no}`) + .get(`https://ureca.store/api/communities/${no}`) .then(response => { setPostDetail(response.data); console.log('나눔 상세 :', response.data); @@ -24,26 +23,27 @@ const CommunityDetail = () => { console.error('Error fetching data:', error); }); }, [no]); + // 댓글 목록 불러오기 +useEffect(( ) => { + const fetchComments = async () => { + try { + const response = await axios.get(`https://ureca.store/api/communityComments`); + setComments(response.data); // 댓글 목록 갱신 + console.log('댓글 목록 :', response.data); + } catch (error) { + console.error('Error:', error); + } + }; + + fetchComments(); +}, [refreshComments]); - useEffect(() => { - axios - .get(`/communityComments`) - .then(response => { - setComments(response.data); - console.log('댓글 목록 :', response.data); - }) - .catch(error => { - console.error('Error fetching data:', error); - }); - }, []); // 좋아요 수 증가 함수 const good = () => { const updatedGood = postDetail.good + 1; - - // 서버의 좋아요 수 업데이트 요청 axios - .put(`/communities/${no}`, { ...postDetail, good: updatedGood }) + .put(`https://ureca.store/api/communities/${no}`, { ...postDetail, good: updatedGood }) .then(response => { console.log('좋아요 업데이트:', response.data); setPostDetail(prevDetail => ({ ...prevDetail, good: updatedGood })); @@ -51,22 +51,23 @@ const CommunityDetail = () => { .catch(error => { console.error('좋아요 업데이트 실패:', error); }); - }; + } //댓글 등록 const handleSubmit = e => { e.preventDefault(); // 새로고침 방지 const formData = new FormData(e.target); + const user = localStorage.getItem('userId'); const data = Object.fromEntries(formData.entries()); //객체로 변환 - // const now = new Date().toISOString(); - // data.createdAt = now; // 현재 시간 추가 data.post = no; - //글 등록 + data.user = user; axios - .post('/communityComments', data) + .post('https://ureca.store/api/communityComments', data) .then(response => { console.log('등록 : ', response.data); setComments(prevComments => [...prevComments, response.data]); console.log('등록 data : ', data); + alert('댓글이 등록되었습니다!'); + setRefreshComments(prev => !prev); }) .catch(error => console.error('오류 발생:', error)); @@ -76,7 +77,7 @@ const CommunityDetail = () => { return ( - + 1 / 5 @@ -122,7 +123,6 @@ const CommunityDetail = () => { - 등록 @@ -248,8 +248,10 @@ const CommentST = styled.div` `; const CommentFrom = styled.form` width: 100%; + position: absolute; display: flex; justify-content: flex-end; + bottom: 0px; margin-top: auto; margin-bottom: 64px; `; @@ -257,6 +259,7 @@ const Container = styled.div` height: 100dvh; display: flex; flex-direction: column; + position: relative; `; const CommentCC = styled.input` height: 40px; diff --git a/src/pages/CommunityPage/CommunityList.jsx b/src/pages/CommunityPage/CommunityList.jsx index e057562..4bc89c0 100644 --- a/src/pages/CommunityPage/CommunityList.jsx +++ b/src/pages/CommunityPage/CommunityList.jsx @@ -22,7 +22,7 @@ const CommunityList = () => { useEffect(() => { axios - .get('/communities') + .get('https://ureca.store/api/communities') .then(response => { setComunityList(response.data); // 응답 데이터 저장 console.log('게시글 목록:', response.data); @@ -39,7 +39,7 @@ const CommunityList = () => { const updatedGood = (item.good || 0) + 1; // 서버의 좋아요 수 업데이트 요청 axios - .put(`/communities/${postId}`, { ...item, good: updatedGood }) + .put(`https://ureca.store/api/communities/${postId}`, { ...item, good: updatedGood }) .then(response => { console.log('좋아요 업데이트:', response.data); }) @@ -56,7 +56,7 @@ const CommunityList = () => { // 댓글 목록 불러오기 useEffect(() => { axios - .get(`/communityComments`) + .get(`https://ureca.store/api/communityComments`) .then(response => { setComments(response.data); console.log('댓글 목록 :', response.data); @@ -69,7 +69,7 @@ const CommunityList = () => { return ( - community + 고양이가 세상을 지배한다 { navigate('/community/write'); @@ -96,7 +96,7 @@ const CommunityList = () => { e.preventDefault(); navigate(`/community/detail/${item.postId}`); }}> - + 제목 : {item.title} @@ -180,11 +180,14 @@ const Category = styled.div` display: flex; justify-content: space-around; margin: 10px 0px; + align-items: center; `; const CategoryBtn = styled.div` display: flex; + font-size:13px ; flex-direction: column; align-items: center; + cursor: pointer; opacity: ${({ $active }) => ($active ? '1' : '0.5')}; transition: opacity 0.3s; &:hover { @@ -192,8 +195,8 @@ const CategoryBtn = styled.div` } `; const CategoryImg = styled.img` - width: 40px; - height: 40px; + width: 25px; + height: 30px; `; const RowLi = styled.div` @@ -218,6 +221,7 @@ const ListImg = styled.img` background-image: url(${props => props.src}); /* 이미지 URL 설정 */ background-size: cover; /* 이미지를 채우도록 설정 */ background-position: center; /* 이미지 중앙 정렬 */ + cursor: pointer; `; const ListTitlesContainer = styled.div` display: flex; @@ -263,6 +267,7 @@ const Icons = styled.div` `; const FcLike1 = styled(FcLike)` font-size: 16px; + cursor: pointer; `; const Hr = styled.div` width: 100%; diff --git a/src/pages/CommunityPage/CommunityWrite.jsx b/src/pages/CommunityPage/CommunityWrite.jsx index 816a62a..5096f92 100644 --- a/src/pages/CommunityPage/CommunityWrite.jsx +++ b/src/pages/CommunityPage/CommunityWrite.jsx @@ -16,8 +16,8 @@ const CommunityWrite = () => { { src: images.categoryAll, name: '전체' }, { src: images.categoryFreedom, name: '자유' }, { src: images.categoryDongNea, name: '동네' }, - { src: images.categoryExport, name: '전문가' }, - { src: images.categoryAnonymous, name: '익명' }, + { src: images.categoryExpert, name: '전문가' }, + { src: images.categoryAnonymity, name: '익명' }, { src: images.categoryEvent, name: '이벤트' }, ]; @@ -27,8 +27,7 @@ const CommunityWrite = () => { // FormData 객체 생성 const formData = new FormData(); - // const createdAt = new Date().toISOString(); - // formData.append('createdAt', createdAt); // 현재 시간 추가 + const user = localStorage.getItem('userId'); formData.append('title', title); formData.append('contents', contents); formData.append('user', user); @@ -37,7 +36,7 @@ const CommunityWrite = () => { } try { - const response = await axios.post('/communities', formData, { + const response = await axios.post('https://ureca.store/api/communities', formData, { headers: { 'Content-Type': 'multipart/form-data', }, @@ -79,11 +78,6 @@ const CommunityWrite = () => {
- -
{uploadedImage ? ( @@ -134,12 +128,14 @@ const CommunityWrite = () => {
+
욕설 광고등 운영저책 위반 시 제재를 받으실 수 있습니다
{loading ? '등록중...' : '작성 완료'} +
); @@ -194,7 +190,7 @@ const Category = styled.div` padding: 10px; display: flex; justify-content: space-around; - margin: 10px 0px; + margin: 0px 0px; `; const CategoryBtn = styled.div` display: flex; @@ -202,18 +198,19 @@ const CategoryBtn = styled.div` align-items: center; opacity: ${({ $active }) => ($active ? '1' : '0.5')}; transition: opacity 0.3s; + cursor: pointer; &:hover { opacity: 1; } `; const CategoryImg = styled.img` - width: 40px; - height: 40px; + width: 25px; + height: 30px; `; const Textarea = styled.textarea` margin: 10px 0px 15px 0px; width: 100%; - height: 15em; + height: 10em; display: flex; align-items: center; padding: 15px; @@ -280,13 +277,17 @@ const LableImg = styled.label` position: relative; display: flex; width: 65px; + cursor: pointer; `; const Form = styled.form` - height: 100%; + height: 100vh; display: flex; + position: relative; flex-direction: column; `; const SubmitBtn = styled.div` - margin-top: auto; - margin-bottom: 0px; + position: absolute; + bottom:0px; + width: 100%; + justify-content: flex-end; `; diff --git a/src/pages/HealthCare/HealthCare.jsx b/src/pages/HealthCare/HealthCare.jsx index ed0208c..a383f8f 100644 --- a/src/pages/HealthCare/HealthCare.jsx +++ b/src/pages/HealthCare/HealthCare.jsx @@ -7,24 +7,49 @@ import styled from "styled-components"; const HealthCare = () => { const [selectedDate, setSelectedDate] = useState(new Date()); const [appointments, setAppointments] = useState([]); + const [petId, setPetId] = useState(); const [showInput, setShowInput] = useState({ hospital: true, nextVisit: false, healthCare: false, }); const [memo, setMemo] = useState(""); + const user = localStorage.getItem('userId'); + console.log(user) + + const petData = () => { + axios.get(`https://ureca.store/api/pets`) + .then((response) => { + setPetId( user === response.data.userId) + console.log('petId :', response.data); + }) + } + + + useEffect(() => { + const userData = (date) => { + if (!date || isNaN(new Date(date).getTime())) { + return ""; + } + return new Date(date).toISOString().split("T")[0]; + }; + + + - // useEffect(()=>{ + + // const = async () => { + // try { + // const response = await axios.get(`https://ureca.store/api/healths`); + // setAppointments(response.data.map(item => ({ ...item, date: new Date(item.date) }))); + // console.log('댓글 목록:', response.data); + // } catch (error) { + // console.error("Error fetching data:", error); + // } + // }; - // axios.get(`/healths`) - // .then((response) => { - // setAppointments(response.data.map(item => ({ ...item, date: new Date(item.date) }))); - // console.log('댓글 목록 :', response.data); - // }) - // .catch((error) => { - // console.error("Error fetching data:", error); - // }); - // },[]); + + }, []); const handleDateChange = (date) => { setSelectedDate(date); @@ -32,33 +57,40 @@ const HealthCare = () => { const addAppointment = async (type, e) => { setAppointments([...appointments, { date: selectedDate, type, memo }]); - // e.preventDefault(); // 새로고침 방지 const formData = new FormData(); const formattedDate = formatDate(selectedDate); - formData.append("pet", 1); - - if (type === "병원 방문일") { - formData.append("visitedDate", formattedDate); - } else if (type === "다음 방문일") { - formData.append("nextCheckupDate", formattedDate); - } else if (type === "건강 관리") { - formData.append("healthDate", formattedDate); - formData.append("notes", memo); // 메모 추가 - } - console.log("건강 :", formData); - + const userId = localStorage.getItem('userId'); + + console.log("userId :", userId); try { - const response = await axios.post("/healths", formData, { - // headers: { - // 'Content-Type': 'application/json' - // }, - }); - console.log("등록 data : ", response.data); + // petId 가져오기 + const response = await axios.get(`https://ureca.store/api/pets/pet/${userId}`); + const petId = response.data[0].petId; + console.log("petId :", petId); + + // petId를 포함하여 formData에 추가 + formData.append("pet", petId); + + // 선택된 타입에 따라 필요한 필드를 formData에 추가 + if (type === "병원 방문일") { + formData.append("visitedDate", formattedDate); + } else if (type === "다음 방문일") { + formData.append("nextCheckupDate", formattedDate); + } else if (type === "건강 관리") { + formData.append("healthDate", formattedDate); + formData.append("notes", memo); // 메모 추가 + } + console.log("formData 내용:", formData); + + // formData를 포함하여 POST 요청 전송 + const postResponse = await axios.post("/healths", formData); + console.log("등록 data : ", postResponse.data); alert("등록 성공"); setMemo(""); + } catch (error) { console.error("오류 발생:", error); - alert("오류 발생:"); + alert("오류 발생"); } }; @@ -113,6 +145,7 @@ const HealthCare = () => { } }; + return ( @@ -222,7 +255,7 @@ const CalendarWrapper = styled.div` `; const StyledCalendar = styled(Calendar)` - width: 100%; + .react-calendar__tile { padding: 1em 0.5em; @@ -237,6 +270,8 @@ const StyledCalendar = styled(Calendar)` .react-calendar__tile--active { background-color: #fff3e8; color: black; + height: 5px; + width: 5px; } .calendar-tile { @@ -249,6 +284,10 @@ const StyledCalendar = styled(Calendar)` border-radius: 8px; } + .react-calendar__month-view__days__day--weekend { + color: #17a1fa; + } + .selected { background-color: #fff3e8; } @@ -336,7 +375,8 @@ const RegisterButton = styled(Button)` margin-left: 5px; &:hover { - background-color: #45a049; + background-color: #ec7a4f; + color: wheat; } `; diff --git a/src/pages/NanumPage/NanumDetail.jsx b/src/pages/NanumPage/NanumDetail.jsx index 3053adb..489027d 100644 --- a/src/pages/NanumPage/NanumDetail.jsx +++ b/src/pages/NanumPage/NanumDetail.jsx @@ -10,21 +10,11 @@ const PetItemDetailPage = () => { const { no } = useParams(); //URL에서 글 번호(no)를 가져옴 const [itemDetail, setItemDetail] = useState([]); const [comments, setComments] = useState([]); - - // useEffect(() => { - // const fetchUserData = async () => { - // const userId = localStorage.getItem('userId'); - // if (!userId) { - // console.error('User ID not found in local storage'); - // return; - // } - // ); + const [refreshComments, setRefreshComments] = useState(false); useEffect(() => { - // 상세정보 불러오기 - axios - .get(`/petItems/${no}`) + .get(`https://ureca.store/api/petItems/${no}`) .then(response => { setItemDetail(response.data); console.log('나눔 상세 :', response.data); @@ -35,24 +25,24 @@ const PetItemDetailPage = () => { }, [no]); useEffect(() => { - axios - .get(`/petItemComments`) - .then(response => { + const fetchComments = async () => { + try { + const response = await axios.get(`https://ureca.store/api/petItemComments`); setComments(response.data); console.log('댓글 목록 :', response.data); - }) - .catch(error => { - console.error('Error fetching data:', error); - }); - }, []); + } catch (error) { + console.error('Error :', error); + } + }; + + fetchComments(); + }, [refreshComments]); // 좋아요 수 증가 함수 const good = () => { const updatedGood = itemDetail.good + 1; - - // 서버의 좋아요 수 업데이트 요청 axios - .put(`/petItems/${no}`, { ...itemDetail, good: updatedGood }) + .put(`https://ureca.store/api/petItems/${no}`, { ...itemDetail, good: updatedGood }) .then(response => { console.log('좋아요 업데이트:', response.data); setItemDetail(prevDetail => ({ ...prevDetail, good: updatedGood })); @@ -63,29 +53,31 @@ const PetItemDetailPage = () => { }; //댓글 등록 const handleSubmit = e => { - e.preventDefault(); // 새로고침 방지 + e.preventDefault(); const formData = new FormData(e.target); - const data = Object.fromEntries(formData.entries()); //객체로 변환 - // const now = new Date().toISOString(); - // data.createdAt = now; // 현재 시간 추가 + const user = localStorage.getItem('userId'); + const data = Object.fromEntries(formData.entries()); data.petItem = no; - //글 등록 + data.user = user; axios - .post('/petItemComments', data) + .post('https://ureca.store/api/petItemComments', data) .then(response => { console.log('등록 : ', response.data); setComments(prevComments => [...prevComments, response.data]); console.log('등록 data : ', data); + alert('등록 성공!'); + setRefreshComments(prev => !prev); }) .catch(error => console.error('오류 발생:', error)); - e.target.reset(); // 입력값 초기화 + e.target.reset(); }; + return ( - + 1 / 5 @@ -118,7 +110,7 @@ const PetItemDetailPage = () => {
- 작성자: {item.length > 0 && item[0].user} + 작성자: {item.user} {new Date(item.createdAt).toLocaleDateString('ko-KR', { timeZone: 'Asia/Seoul', @@ -130,9 +122,7 @@ const PetItemDetailPage = () => { ))} - - 등록 @@ -255,14 +245,17 @@ const CommentST = styled.div` `; const CommentFrom = styled.form` width: 100%; + position: absolute; display: flex; justify-content: flex-end; + bottom: 0px; margin-top: auto; margin-bottom: 64px; `; const Container = styled.div` height: 100dvh; display: flex; + position: relative; flex-direction: column; `; const CommentCC = styled.input` diff --git a/src/pages/NanumPage/NanumList.jsx b/src/pages/NanumPage/NanumList.jsx index 0c28eb4..79c9d40 100644 --- a/src/pages/NanumPage/NanumList.jsx +++ b/src/pages/NanumPage/NanumList.jsx @@ -15,7 +15,7 @@ const PetItemListPage = () => { //게시글 목록 불러오기 useEffect(() => { axios - .get('/petItems') + .get('https://ureca.store/api/petItems') .then(response => { setPetItemList(response.data); // 응답 데이터 저장 console.log('게시글 목록:', response.data); @@ -32,7 +32,7 @@ const PetItemListPage = () => { const updatedGood = (item.good || 0) + 1; // 서버의 좋아요 수 업데이트 요청 axios - .put(`/petItems/${petItemId}`, { ...item, good: updatedGood }) + .put(`https://ureca.store/api/petItems/${petItemId}`, { ...item, good: updatedGood }) .then(response => { console.log('좋아요 업데이트:', response.data); }) @@ -49,7 +49,7 @@ const PetItemListPage = () => { // 댓글 목록 불러오기 useEffect(() => { axios - .get(`/petItemComments`) + .get(`https://ureca.store/api/petItemComments`) .then(response => { setComments(response.data); console.log('댓글 목록 :', response.data); @@ -94,7 +94,7 @@ const PetItemListPage = () => { e.preventDefault(); navigate(`/nanumList/detail/${item.petItemId}`); }}> - + {item.name} 작성자{item.user} @@ -194,6 +194,7 @@ const BuWrite = styled.button` align-items: center; justify-content: center; color: white; + cursor: pointer; `; const All = styled.div` font-size: 12px; @@ -219,9 +220,10 @@ const ListImg = styled.img` background-color: #d9d9d9; border-radius: 8px; flex-shrink: 0; /* 이미지 크기를 고정 */ - background-image: url(${props => props.src}); /* 이미지 URL 설정 */ - background-size: cover; /* 이미지를 채우도록 설정 */ - background-position: center; /* 이미지 중앙 정렬 */ + background-image: url(${props => props.src}); + background-size: cover; + background-position: center; + cursor: pointer; `; const ListTitlesContainer = styled.div` display: flex; @@ -275,6 +277,7 @@ const Icons = styled.div` `; const FcLike1 = styled(FcLike)` font-size: 16px; + cursor: pointer; `; const Comment1 = styled(IoChatbubbleEllipsesOutline)` font-size: 16px; diff --git a/src/pages/NanumPage/NanumWrite.jsx b/src/pages/NanumPage/NanumWrite.jsx index 0f9694b..ffe2911 100644 --- a/src/pages/NanumPage/NanumWrite.jsx +++ b/src/pages/NanumPage/NanumWrite.jsx @@ -1,7 +1,8 @@ import styled from 'styled-components'; import { MdPhotoCamera } from 'react-icons/md'; import axios from '../../apis/AxiosInstance'; -import { useState } from 'react'; +import { useEffect, useState } from 'react'; + const PetItemPage = () => { const [selectedSaleType, setSelectedSaleType] = useState(''); // 버튼 판매 or 나눔 @@ -16,13 +17,11 @@ const PetItemPage = () => { const [loading, setLoading] = useState(false); const handleSubmit = async e => { + const user = localStorage.getItem('userId'); e.preventDefault(); // 새로고침 방지 setLoading(true); - // FormData 객체 생성 const formData = new FormData(); - // const createdAt = new Date().toISOString(); - // formData.append('createdAt', createdAt); // 현재 시간 추가 formData.append('name', name); formData.append('description', description); formData.append('price', price); @@ -31,9 +30,8 @@ const PetItemPage = () => { if (imageUrl) { formData.append('imageUrl', imageUrl); } - try { - const response = await axios.post('/petItems', formData, { + const response = await axios.post('https://ureca.store/api/petItems', formData, { headers: { 'Content-Type': 'multipart/form-data', }, @@ -60,7 +58,8 @@ const PetItemPage = () => { } finally { setLoading(false); } - }; + } +// }, []); // 파일 선택 핸들러 const handleFileChange = e => { if (e.target.files && e.target.files[0]) { @@ -85,11 +84,6 @@ const PetItemPage = () => {
- -
{uploadedImage ? ( @@ -303,9 +297,12 @@ const LableImg = styled.label` const Form = styled.form` height: 100%; display: flex; + position: relative; flex-direction: column; `; const SubmitBtn = styled.div` - margin-top: auto; - margin-bottom: 0px; + position: absolute; + bottom:0px; + width: 100%; + justify-content: flex-end; `;