Yeonjae

src/apiCalls.js

@@ -1,20 +1,26 @@
 import axios from "axios";
 
 export const login = async (id, password) => {
-  await axios
-    .post("http://218.146.29.203:8080/user/login", {
+  try {
+    const response = await axios.post("http://218.146.29.203:8080/user/login", {
       username: id,
       password: password,
-    })
-    .then(res => {
-      window.sessionStorage.setItem("session", id);
-      console.log(res.data);
-    })
-    .catch(error => {
-      console.log(error);
-    });
+    },{ withCredentials: true });
+
+    console.log("토큰 쿠키 값 확인 : ", document.cookie);
+
+    const token = document.cookie; 
+    console.log("할당된 토큰 쿠키 값 확인 : ",token);
+    window.sessionStorage.setItem("session", `Bearer ${token}`);  
+
+    return response.data;
+  } catch (error) {
+    console.error("Login error:", error);
+    throw error;
+  }
 };
 
+
 export const join = async (id, password) => {
   try {
     const response = await axios.post(
@@ -23,10 +29,9 @@ export const join = async (id, password) => {
         username: id,
         password: password,
         name: "혜림",
-      }
+      },{ withCredentials: true }
     );
-    console.log(response.data);
-    return response.data;
+    console.log(response);
   } catch (error) {
     console.error("Join error:", error);
     throw error;
@@ -44,3 +49,74 @@ export const checkIdDuplicate = async id => {
     throw error;
   }
 };
+
+
+
+export const createDiary = async (title, content, weather) => {
+  try {
+    const sessionToken = window.sessionStorage.getItem("session");
+    console.log("Session Token: ", sessionToken); 
+
+    if (!sessionToken) {
+      throw new Error("로그인이 필요합니다.");
+    }
+
+    const tokenReplace = sessionToken.replace('Bearer ', '');
+    const decodedToken = tokenReplace;
+
+
+    const response = await axios.post(
+      "http://218.146.29.203:8080/diary",
+      {
+        title,
+        content,
+        weather,
+      },
+      {
+        headers: {
+          Authorization:  `Bearer ${decodedToken}`,
+          withCredentials: true
+        },
+      }
+    );
+    console.log("일기 생성 성공");
+    return response.data;
+  } catch (error) {
+    console.error("Create diary error:", error);
+    throw error;
+  }
+};
+
+export const getUserDiaries = async (userId) => {
+  try {
+    const sessionToken = window.sessionStorage.getItem("session");
+    if (!sessionToken) {
+      throw new Error("로그인이 필요합니다.");
+    }
+
+    const response = await axios.get(`http://218.146.29.203:8080/diary/${userId}`, {
+      headers: { Authorization: sessionToken },
+    });
+    return response.data;
+  } catch (error) {
+    console.error("getUserDiary error:", error);
+    throw error;
+  }
+};
+
+export const getDiaryById = async (id) => {
+  try {
+    const sessionToken = window.sessionStorage.getItem("session");
+    if (!sessionToken) {
+      throw new Error("로그인이 필요합니다.");
+    }
+
+    const response = await axios.get(`http://218.146.29.203:8080/diary/${id}`, {
+      headers: { Authorization: sessionToken },
+    });
+    return response.data;
+  } catch (error) {
+    console.error("Error getDiaryById : ", error);
+    throw error;
+  }
+};

src/components/DiaryListItem.js

@@ -1,23 +1,23 @@
 import {useNavigate} from "react-router-dom";
 
-const DiaryListItem = Props => {
+const DiaryListItem = ({ id, date, title, weather }) => {
   const navigate = useNavigate();
   return (
     <>
       <div
         className="diary-item"
         onClick={() => {
-          navigate("/diary-detail");
+          navigate(`/diary-detail/${id}`);  
         }}
       >
         <div className="Lleft">
-          <div className="Ldate">2024.02.09</div>
-          <div className="Ltitle">오늘의 일기 - 날씨가 흐려서 아쉬웠던 날</div>
-        </div>
-        <div className="Lweather">날씨 : 흐림</div>
+        <div className="Ldate">{date}</div>
+        <div className="Ltitle">{title}</div>
+      </div>
+      <div className="Lweather">날씨: {weather}</div>
       </div>
     </>
   );
 };
 
-export default DiaryListItem;
+export default DiaryListItem;

src/components/Header.js

@@ -10,7 +10,6 @@ const Header = () => {
     window.sessionStorage.removeItem("session");
     setIsLogin(false);
   };
-
   useEffect(() => {
     if (window.sessionStorage.getItem("session")) {
       setIsLogin(true);
@@ -56,5 +55,4 @@ const Header = () => {
     </div>
   );
 };
-
-export default Header;
+export default Header;

src/pages/Creatediary.js

@@ -1,7 +1,40 @@
+import React, { useState } from 'react';
 import Header from "../components/Header";
+import { useNavigate } from 'react-router-dom';
+import { createDiary } from '../apiCalls';
 import "../styles/create-diary.css";
 
 const Creatediary = () => {
+  const navigate = useNavigate();
+  const [title, setTitle] = useState('');
+  const [content, setContent] = useState('');
+  const [weather, setWeather] = useState('');
+
+  const handleTitleChange = (e) => setTitle(e.target.value);
+  const handleContentChange = (e) => setContent(e.target.value);
+  const handleWeatherChange = (e) => setWeather(e.target.value);
+
+  const handleDiarySubmit = async () => {
+    if (!title || !content || !weather) {
+      alert('입력되지 않은 칸이 있습니다.');
+      return;
+    }
+
+    if (content.length < 30) {
+      alert('내용을 더 입력해주세요');
+      return;
+    }
+
+    try {
+      await createDiary(title, content, weather);
+      navigate('/');
+    } catch (error) {
+      alert('일기 작성 중 오류가 발생했습니다.');
+    }
+  };
+
+
+
   const date = new Date();
   return (
     <>
@@ -21,23 +54,33 @@ const Creatediary = () => {
               <input
                 className="title-input"
                 type="text"
+                value={title}
+                onChange={handleTitleChange}
                 placeholder="제목을 입력해주세요."
               />
             </div>
             <div className="weather">
               <label>날씨</label>
-              <input className="weather-input" type="text" placeholder="날씨" />
+              <input
+                className="weather-input"
+                type="text"
+                value={weather}
+                onChange={handleWeatherChange}
+                placeholder="날씨를 입력해주세요."
+              />
             </div>
           </div>
           <div className="content">
             <label>내용</label>
             <textarea
               className="content-input"
+              value={content}
+              onChange={handleContentChange}
               placeholder="내용을 입력해주세요."
             ></textarea>
           </div>
           <div className="btnWrap">
-            <button className="diarySubmitBtn">작성완료</button>
+            <button className="diarySubmitBtn" onClick={handleDiarySubmit}>작성완료</button>
           </div>
         </div>
       </div>

src/pages/DiaryDetail.js

@@ -1,42 +1,54 @@
-import {useParams} from "react-router-dom";
+import React, { useEffect, useState } from "react";
 import Header from "../components/Header";
-import "../styles/diary-detail.css";
+import "../styles/diary-detail.css"
+import { useParams } from "react-router-dom";
+import { getDiaryById } from "../apiCalls"; 
 
 const DiaryDetail = () => {
-  const {id} = useParams();
+  const { id } = useParams();
+  const [diary, setDiary] = useState({});
+
+  useEffect(() => {
+    async function fetchDiary() {
+      try {
+        const diaryData = await getDiaryById(id); 
+        setDiary(diaryData);
+      } catch (error) {
+        console.error("Error fetching diary:", error);
+      }
+    }
+
+    fetchDiary();
+  }, [id]); 
+
   return (
     <>
       <Header />
       <div className="diaryDetail">
         <div className="diary-form">
           <div className="dateInput">
             <label>날짜</label>
-            <div className="date">2024.02.13</div>
+            <div className="date">{diary.date}</div>
           </div>
           <div className="title-weather">
             <div className="title">
               <label>제목</label>
               <div className="title-input" type="text">
-                오늘
+                {diary.title}
               </div>
             </div>
             <div className="weather">
               <label>날씨</label>
               <div className="weather-input" type="text">
-                흐림
+                {diary.weather}
               </div>
             </div>
           </div>
           <div className="content">
             <label>내용</label>
-            <div
-              className="content-input"
-              placeholder="내용을 입력해주세요."
-            ></div>
-          </div>
-          <div className="btnWrap">
-            <button className="diarySubmitBtn">작성완료</button>
+            <div className="content-input">{diary.content}</div>
           </div>
+          <button className="diarySubmitBtn">작성완료</button>
         </div>
       </div>
     </>

src/pages/DiaryList.js

@@ -1,15 +1,47 @@
+import React, { useEffect, useState } from "react";
 import DiaryListItem from "../components/DiaryListItem";
 import Header from "../components/Header";
+import { getUserDiaries } from "../apiCalls"; 
 import "../styles/diary-list.css";
-const DiaryList = () => {
+
+const DiaryList = ({ userId }) => {
+  const [diaries, setDiaries] = useState([]);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    async function fetchDiaries() {
+      try {
+        const data = await getUserDiaries(userId);
+        setDiaries(data);
+      } catch (error) {
+        setError(error);
+      }
+    }
+
+    fetchDiaries();
+  }, [userId]); 
+
+  if (error) {
+    return <div>Error: {error.message}</div>;
+  }
+
+  if (diaries.length === 0) {
+    return <div>No diaries found.</div>;
+  }
+
   return (
     <>
       <Header />
       <div className="diaryList">
-        <DiaryListItem />
-        <DiaryListItem />
-        <DiaryListItem />
-        <DiaryListItem />
+        {diaries.map((diary) => (
+          <DiaryListItem
+          key={diary.id}
+          id={diary.id}
+          date={diary.date}
+          title={diary.title}
+          weather={diary.weather}
+          />
+        ))}
       </div>
     </>
   );

src/pages/Home.js

@@ -14,6 +14,7 @@ const Home = () => {
             navigate("/diary");
           } else {
             alert("로그인이 필요한 서비스입니다.");
+            navigate("/login");
           }
         }}
         className="writing-btn"
@@ -22,6 +23,7 @@ const Home = () => {
       </button>
       <div className="tree-container">
         {/* 나무 이미지 */}
+
         <img
           src="/path/to/your/tree/image.png"
           alt="Tree"
@@ -31,5 +33,4 @@ const Home = () => {
     </div>
   );
 };
-
-export default Home;
+export default Home;