From 0f35733e0d6db73274fa622a62c6eba6fa9d04cc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EC=97=B0=EC=9E=AC?= Date: Wed, 29 May 2024 14:17:01 +0900 Subject: [PATCH 1/2] createDiary-- --- src/apiCalls.js | 125 ++++++++++++++++++++++++++------ src/components/DiaryListItem.js | 14 ++-- src/components/Header.js | 20 +++-- src/pages/Creatediary.js | 47 +++++++++++- src/pages/DiaryDetail.js | 38 ++++++---- src/pages/DiaryList.js | 42 +++++++++-- src/pages/Home.js | 33 ++++++--- src/pages/login.js | 41 +++++++---- src/styles/create-diary.css | 1 + 9 files changed, 283 insertions(+), 78 deletions(-) diff --git a/src/apiCalls.js b/src/apiCalls.js index 25f7518..33b470c 100644 --- a/src/apiCalls.js +++ b/src/apiCalls.js @@ -1,16 +1,21 @@ - -import axios from 'axios'; +import axios from "axios"; export const login = async (id, password) => { try { - const response = await axios.post('http://218.146.29.203:8080/user/login', { - username : id, - password : password, - }); - console.log(response.data); + const response = await axios.post("http://218.146.29.203:8080/user/login", { + username: id, + password: password, + },{ 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); + console.error("Login error:", error); throw error; } }; @@ -18,26 +23,100 @@ export const login = async (id, password) => { export const join = async (id, password) => { try { - const response = await axios.post('http://218.146.29.203:8080/user/register', { - username : id, - password : password, - name: "혜림" - }); - console.log(response.data); + const response = await axios.post( + "http://218.146.29.203:8080/user/register", + { + username: id, + password: password, + name: "혜림", + },{ withCredentials: true } + ); + console.log(response); + } catch (error) { + console.error("Join error:", error); + throw error; + } +}; + +export const checkIdDuplicate = async id => { + try { + const response = await axios.get( + `http://218.146.29.203:8080/check-id?userId=${id}` + ); return response.data; } catch (error) { - console.error('Join error:', error); + console.error("ID check error:", error); throw error; } }; + + -export const checkIdDuplicate = async (id) => { - try { - const response = await axios.get(`http://218.146.29.203:8080/check-id?userId=${id}`); - return response.data; - } catch (error) { - console.error('ID check error:', error); - 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; + } +}; diff --git a/src/components/DiaryListItem.js b/src/components/DiaryListItem.js index 7162382..a3a5684 100644 --- a/src/components/DiaryListItem.js +++ b/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 ( <>
{ - navigate("/diary-detail"); + navigate(`/diary-detail/${id}`); }} >
-
2024.02.09
-
오늘의 일기 - 날씨가 흐려서 아쉬웠던 날
-
-
날씨 : 흐림
+
{date}
+
{title}
+
+
날씨: {weather}
); }; -export default DiaryListItem; +export default DiaryListItem; \ No newline at end of file diff --git a/src/components/Header.js b/src/components/Header.js index 990a104..1609043 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -1,10 +1,19 @@ import {useNavigate} from "react-router-dom"; import "../styles/header.css"; +import {useEffect, useState} from "react"; const Header = () => { const navigate = useNavigate(); - const isLogin = false; // 로그인 되어있는 헤더 확인 시 true 변경 후 확인 - + const [isLogin, setIsLogin] = useState(false); + const logout = () => { + window.sessionStorage.removeItem("session"); + setIsLogin(false); + }; + useEffect(() => { + if (window.sessionStorage.getItem("session")) { + setIsLogin(true); + } + }, []); return (
{
{isLogin ? ( -
로그아웃
+
+ 로그아웃 +
) : ( <>
{
); }; - -export default Header; +export default Header; \ No newline at end of file diff --git a/src/pages/Creatediary.js b/src/pages/Creatediary.js index 45ed2c5..882812c 100644 --- a/src/pages/Creatediary.js +++ b/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 = () => {
- +
- +
diff --git a/src/pages/DiaryDetail.js b/src/pages/DiaryDetail.js index 5d9e5b7..e3a0b03 100644 --- a/src/pages/DiaryDetail.js +++ b/src/pages/DiaryDetail.js @@ -1,9 +1,26 @@ -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 ( <>
@@ -11,32 +28,27 @@ const DiaryDetail = () => {
-
2024.02.13
+
{diary.date}
- 오늘 + {diary.title}
- 흐림 + {diary.weather}
-
-
-
- +
{diary.content}
+
diff --git a/src/pages/DiaryList.js b/src/pages/DiaryList.js index 5c33108..9d8050a 100644 --- a/src/pages/DiaryList.js +++ b/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
Error: {error.message}
; + } + + if (diaries.length === 0) { + return
No diaries found.
; + } + return ( <>
- - - - + {diaries.map((diary) => ( + + ))}
); diff --git a/src/pages/Home.js b/src/pages/Home.js index 7e5c1a1..e542c9d 100644 --- a/src/pages/Home.js +++ b/src/pages/Home.js @@ -1,19 +1,34 @@ -import React from 'react'; -import Header from '../components/Header'; -import '../styles/home.css'; +import React from "react"; +import Header from "../components/Header"; +import "../styles/home.css"; +import {useNavigate} from "react-router-dom"; const Home = () => { + const navigate = useNavigate(); return (
- +
- - {/* 나무 이미지 */} - Tree + Tree
); }; - -export default Home; +export default Home; \ No newline at end of file diff --git a/src/pages/login.js b/src/pages/login.js index ca96299..0dfbdd0 100644 --- a/src/pages/login.js +++ b/src/pages/login.js @@ -1,32 +1,41 @@ -import React, { useState } from 'react'; -import { useNavigate } from 'react-router-dom'; -import { login } from '../apiCalls'; -import Header from '../components/Header'; -import '../styles/login.css'; +import React, {useEffect, useState} from "react"; +import {useNavigate} from "react-router-dom"; +import {login} from "../apiCalls"; +import Header from "../components/Header"; +import "../styles/login.css"; const Login = () => { - const [id, setId] = useState(''); - const [pwd, setPwd] = useState(''); + const [id, setId] = useState(""); + const [pwd, setPwd] = useState(""); const navigate = useNavigate(); - - const handleIdChange = (e) => setId(e.target.value); - const handlePwdChange = (e) => setPwd(e.target.value); + const handleIdChange = e => setId(e.target.value); + const handlePwdChange = e => setPwd(e.target.value); const handleLogin = async () => { try { await login(id, pwd); - navigate('/'); + navigate("/"); } catch (error) { alert('아이디/비밀번호가 다릅니다.'); } }; + useEffect(()=>{ + console.log("쿠키", document.cookie); + // window.sessionStorage.setItem("session", `Bearer ${token}`); + // console.log("로그인 성공, 토큰 저장됨"); + + }); + + return (

Sign in

- + { onChange={handleIdChange} placeholder="아이디를 입력하세요" /> - + { onChange={handlePwdChange} placeholder="비밀번호를 입력하세요" /> - +
navigate("/join")}>

아이디가 없으신가요? 회원가입하기

diff --git a/src/styles/create-diary.css b/src/styles/create-diary.css index aa73fff..ebd4edc 100644 --- a/src/styles/create-diary.css +++ b/src/styles/create-diary.css @@ -18,6 +18,7 @@ align-items: center; padding-top: 36px; + margin-top: 46px; } label { From b433de67b08a65d2de044da2a8504303975c0cc2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EC=97=B0=EC=9E=AC?= Date: Mon, 3 Jun 2024 17:33:12 +0900 Subject: [PATCH 2/2] cookie- --- src/components/Header.js | 10 ---------- src/pages/Home.js | 7 +------ src/pages/login.js | 8 +------- 3 files changed, 2 insertions(+), 23 deletions(-) diff --git a/src/components/Header.js b/src/components/Header.js index be59021..4619e99 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -5,27 +5,17 @@ import {useEffect, useState} from "react"; const Header = () => { const navigate = useNavigate(); const [isLogin, setIsLogin] = useState(false); -<<<<<<< HEAD -======= ->>>>>>> f8138f00a9de77ef3c26ce34f8667ec938a58398 const logout = () => { window.sessionStorage.removeItem("session"); setIsLogin(false); }; -<<<<<<< HEAD -======= - ->>>>>>> f8138f00a9de77ef3c26ce34f8667ec938a58398 useEffect(() => { if (window.sessionStorage.getItem("session")) { setIsLogin(true); } }, []); -<<<<<<< HEAD -======= ->>>>>>> f8138f00a9de77ef3c26ce34f8667ec938a58398 return (
{ navigate("/diary"); } else { alert("로그인이 필요한 서비스입니다."); -<<<<<<< HEAD navigate("/login"); -======= ->>>>>>> f8138f00a9de77ef3c26ce34f8667ec938a58398 } }} className="writing-btn" @@ -25,10 +22,8 @@ const Home = () => { 일기 쓰기
-<<<<<<< HEAD -======= {/* 나무 이미지 */} ->>>>>>> f8138f00a9de77ef3c26ce34f8667ec938a58398 + Tree>>>>>> f8138f00a9de77ef3c26ce34f8667ec938a58398 import {useNavigate} from "react-router-dom"; import {login} from "../apiCalls"; import Header from "../components/Header"; @@ -12,10 +10,6 @@ const Login = () => { const [id, setId] = useState(""); const [pwd, setPwd] = useState(""); const navigate = useNavigate(); -<<<<<<< HEAD -======= - ->>>>>>> f8138f00a9de77ef3c26ce34f8667ec938a58398 const handleIdChange = e => setId(e.target.value); const handlePwdChange = e => setPwd(e.target.value);