feat(#5):나눔 수정

URECA-PODONG · Nov 4, 2024 · 8db0a53 · 8db0a53
1 parent b98b75c
commit 8db0a53
Show file tree

Hide file tree

Showing 4 changed files with 160 additions and 29 deletions.
diff --git a/src/pages/CommunityPage/CommunityDetail.jsx b/src/pages/CommunityPage/CommunityDetail.jsx
@@ -72,7 +72,7 @@ const CommunityDetail = () => {
 
 
   return (
-  <>
+  <Container>
     <ItemTitle>
       <ListImg src={`http://localhost:8080/uploads/${postDetail.imageUrl}`}
       alt={postDetail.imageUrl}
@@ -99,7 +99,7 @@ const CommunityDetail = () => {
       .map((item)=>(
       <div  key={item.commentId}>
       <User2><VscAccount1/>작성자: {item.length > 0 && item[0].user}
-        <ListDate key={item.commentId}>
+        <ListDate key={item.communityCommentId}>
           {new Date(item.createdAt).toLocaleDateString('ko-KR', {
             timeZone: 'Asia/Seoul' 
           })}
@@ -120,7 +120,7 @@ const CommunityDetail = () => {
         />
       <CommentSubmit type="submit">등록</CommentSubmit>
     </CommentFrom>
-    </>
+    </Container>
   );
 };
 
@@ -244,11 +244,14 @@ const CommentST = styled.div`
 const CommentFrom = styled.form`
   width: 100%;
   display: flex;
-  align-items: flex-end;
-  justify-content:center ;
-  margin-top: auto; 
-  margin-bottom: 70px;
   justify-content: flex-end;
+  margin-top: auto;
+  margin-bottom: 64px;
+  `;
+  const Container = styled.div`
+  height: 100dvh;
+  display: flex;
+  flex-direction: column;
   `;
   const CommentCC = styled.input`
     height: 40px;

diff --git a/src/pages/HealthCare/HealthCare.jsx b/src/pages/HealthCare/HealthCare.jsx
@@ -1,3 +1,4 @@
+import axios from 'axios';
 import React, { useState } from 'react';
 import Calendar from 'react-calendar';
 import 'react-calendar/dist/Calendar.css';
@@ -13,17 +14,97 @@ const HealthCare = () => {
     setSelectedDate(date);
   };
 
-  const addAppointment = type => {
+  const addAppointment = async (type, e) => {
     setAppointments([...appointments, { date: selectedDate, type, memo }]);
-    setMemo('');
+    // 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); // 메모 추가
+  }
+
+  try {
+    const response = await axios.post('http://localhost:8080/api/healths', formData, {
+      headers: {
+        'Content-Type': 'multipart/form-data'
+      },
+    });
+      console.log("등록 data : ", response.data);
+      alert("등록 성공")
+      setMemo('');
+    }
+    catch(error) {
+      console.error("오류 발생:",error);
+      alert("오류 발생:")
+    }
   };
 
   const toggleInput = type => {
     setShowInput({ ...showInput, [type]: !showInput[type] });
   };
 
+  const formatDate = date => {
+    return date.toISOString().split('T')[0];
+  };
+
+  // 날짜에 따른 캘린더 타일 표시
+  const tileContent = ({ date, view }) => {
+    if (view === 'month') {
+      const dateStr = formatDate(date);
+      const appointment = appointments.find(app => formatDate(app.date) === dateStr);
+
+      if (appointment) {
+        let color = '';
+        if (appointment.type === '병원 방문일') {
+          color = '#FB3737';
+        } else if (appointment.type === '다음 방문일') {
+          color = '#17A1FA';
+        } else if (appointment.type === '건강 관리') {
+          color = '#33E949';
+        }
+        return <Dot color={color} />;
+      }
+    }
+    return null;
+  };
+
+  // 날짜 강조 스타일 적용
+  const tileClassName = ({ date, view }) => {
+    if (view === 'month') {
+      const dateStr = formatDate(date);
+      const isToday = formatDate(new Date()) === dateStr;
+      const isSelected = selectedDate && formatDate(selectedDate) === dateStr;
+
+      let classes = 'calendar-tile';
+
+      if (isToday) {
+        classes += ' today';
+      }
+      if (isSelected) {
+        classes += ' selected';
+      }
+
+      return classes;
+    }
+  };
+
   return (
     <Container>
+      <form >
+<select name="pet">
+<option value="C">C언어</option>
+<option value="JAVA">JAVA</option>
+<option value="HTML">HTML</option>
+<option value="CSS">CSS</option>
+</select>
+</form>
       <Legend>
         <LegendItem>
           <Dot color="#FB3737" /> 병원 방문일
@@ -36,7 +117,12 @@ const HealthCare = () => {
         </LegendItem>
       </Legend>
       <CalendarWrapper>
-        <Calendar onChange={handleDateChange} value={selectedDate} />
+        <StyledCalendar
+          onChange={handleDateChange}
+          value={selectedDate}
+          tileContent={tileContent}
+          tileClassName={tileClassName}
+        />
       </CalendarWrapper>
       <AppointmentSection>
         <AppointmentInput>
@@ -46,7 +132,7 @@ const HealthCare = () => {
         {showInput.hospital && (
           <InputWrapper>
             <DateInput type="date" onChange={e => handleDateChange(new Date(e.target.value))} />
-            <RegisterButton onClick={() => addAppointment('병원 방문일')}>등록</RegisterButton>
+            <RegisterButton onClick={(e) => addAppointment('병원 방문일',e)}>등록</RegisterButton>
           </InputWrapper>
         )}
         <AppointmentInput>
@@ -56,7 +142,7 @@ const HealthCare = () => {
         {showInput.nextVisit && (
           <InputWrapper>
             <DateInput type="date" onChange={e => handleDateChange(new Date(e.target.value))} />
-            <RegisterButton onClick={() => addAppointment('다음 방문일')}>등록</RegisterButton>
+            <RegisterButton onClick={(e) => addAppointment('다음 방문일',e)}>등록</RegisterButton>
           </InputWrapper>
         )}
         <AppointmentInput>
@@ -72,7 +158,7 @@ const HealthCare = () => {
               value={memo}
               onChange={e => setMemo(e.target.value)}
             />
-            <RegisterButton onClick={() => addAppointment('건강 관리')}>등록</RegisterButton>
+            <RegisterButton onClick={(e) => addAppointment('건강 관리',e)}>등록</RegisterButton>
           </InputWrapper>
         )}
       </AppointmentSection>
@@ -98,6 +184,39 @@ const CalendarWrapper = styled.div`
   margin-bottom: 20px;
 `;
 
+const StyledCalendar = styled(Calendar)`
+  width: 100%;
+
+  .react-calendar__tile {
+    padding: 1em 0.5em;
+    height: 60px;
+  }
+
+  .react-calendar__tile--now {
+    background: #fff3e8;
+    border-radius: 8px;
+  }
+
+  .react-calendar__tile--active {
+    background-color: #fff3e8;
+    color: black;
+  }
+
+  .calendar-tile {
+    position: relative;
+    height: 60px;
+  }
+
+  .today {
+    border: 2px solid #ffa764;
+    border-radius: 8px;
+  }
+
+  .selected {
+    background-color: #fff3e8;
+  }
+`;
+
 const Legend = styled.div`
   display: flex;
   justify-content: end;
@@ -113,8 +232,8 @@ const LegendItem = styled.div`
 `;
 
 const Dot = styled.span`
-  width: 10px;
-  height: 10px;
+  width: 8px;
+  height: 8px;
   border-radius: 50%;
   background-color: ${props => props.color};
   margin-right: 5px;
@@ -135,17 +254,19 @@ const AppointmentInput = styled.div`
   padding: 0 16px;
   font-size: 14px;
   font-weight: bold;
-  margin-bottom: 20px;
+  margin-bottom: 5px;
 `;
 
 const InputWrapper = styled.div`
   display: flex;
+  width: 100%;
+  padding: 0 16px;
+  margin-bottom: 15px;
+  justify-content: space-between;
   align-items: center;
-  margin-left: 10px;
 `;
 
 const DateInput = styled.input`
-  margin-right: 10px;
   padding: 5px;
   border: 1px solid #ccc;
   border-radius: 5px;
@@ -156,10 +277,11 @@ const MemoInput = styled.input`
   padding: 5px;
   border: 1px solid #ccc;
   border-radius: 5px;
+  height: auto;
+  width: 100%;
 `;
 
 const Button = styled.button`
-  font-weight: bold;
   margin-left: 10px;
   padding: 5px 10px;
   border: none;
@@ -172,7 +294,8 @@ const Button = styled.button`
 `;
 
 const RegisterButton = styled(Button)`
-  background-color: #4caf50;
+  border: 1px solid #ec7a4f;
+  color: #ec7a4f;
   margin-left: 5px;
 
   &:hover {

diff --git a/src/pages/NanumPage/NanumDetail.jsx b/src/pages/NanumPage/NanumDetail.jsx
@@ -72,7 +72,7 @@ const PetItemDetailPage = () => {
   }
 
   return (
-  <>
+  <Container >
     <ItemTitle>
       <ListImg src={`http://localhost:8080/uploads/${itemDetail.imageUrl}`}
       alt={itemDetail.imageUrl}/>
@@ -96,9 +96,9 @@ const PetItemDetailPage = () => {
         {comments
         .filter((item)=>item.petItem === itemDetail.petItemId)
         .map((item)=>(
-          <div  key={item.commentId}>
+          <div  key={item.petItemCommentId}>
         <User2><VscAccount1/>작성자: {item.length > 0 && item[0].user}
-          <ListDate key={item.commentId}>
+          <ListDate key={item.petItemCommentId}>
             {new Date(item.createdAt).toLocaleDateString('ko-KR', {
               timeZone: 'Asia/Seoul' 
             })}
@@ -109,6 +109,7 @@ const PetItemDetailPage = () => {
         ))}
       </CommentST>
     </ItemTitle>
+
       <CommentFrom onSubmit={handleSubmit}>
         <input type="number" name="user"placeholder="유저번호" required/>
         <CommentCC 
@@ -119,15 +120,15 @@ const PetItemDetailPage = () => {
           />
         <CommentSubmit type="submit">등록</CommentSubmit>
       </CommentFrom>
-      </>
+
+      </Container>
   );
 };
 
 export default PetItemDetailPage;
 const ItemTitle = styled.div`
   display: flex;
   flex-direction: column;
-  height:100% ;
   width: 100%;
   padding: 64px 25px 0px 25px;
 `;
@@ -240,11 +241,14 @@ const CommentST = styled.div`
 const CommentFrom = styled.form`
   width: 100%;
   display: flex;
-  align-items: flex-end;
-  justify-content:center ;
-  margin-top: auto; 
-  margin-bottom: 70px;
   justify-content: flex-end;
+  margin-top: auto;
+  margin-bottom: 64px;
+  `;
+  const Container  = styled.div`
+  height: 100dvh;
+  display: flex;
+  flex-direction: column;
   `;
   const CommentCC = styled.input`
     height: 40px;

diff --git a/백엔드 b/백엔드