diff --git a/sadajo_fe/_redirects b/sadajo_fe/_redirects index 995e9b2..dd54253 100644 --- a/sadajo_fe/_redirects +++ b/sadajo_fe/_redirects @@ -1,2 +1,2 @@ -/api/* http://waiterbe-env.eba-iyvnnwq3.ap-northeast-2.elasticbeanstalk.com/api/:splat 200 +/* http://waiterbe-env.eba-iyvnnwq3.ap-northeast-2.elasticbeanstalk.com/api/:splat 200 /* /index.html 200 diff --git a/sadajo_fe/package-lock.json b/sadajo_fe/package-lock.json index cf98842..cf2fa60 100644 --- a/sadajo_fe/package-lock.json +++ b/sadajo_fe/package-lock.json @@ -4885,6 +4885,7 @@ "url": "https://github.com/sponsors/ai" } ], + "license": "MIT", "dependencies": { "browserslist": "^4.24.4", "caniuse-lite": "^1.0.30001702", @@ -12322,6 +12323,7 @@ "url": "https://github.com/sponsors/ai" } ], + "license": "MIT", "dependencies": { "nanoid": "^3.3.8", "picocolors": "^1.1.1", @@ -16092,6 +16094,7 @@ "version": "3.4.17", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz", "integrity": "sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==", + "license": "MIT", "dependencies": { "@alloc/quick-lru": "^5.2.0", "arg": "^5.0.2", diff --git a/sadajo_fe/src/pages/PostCreatePage.jsx b/sadajo_fe/src/pages/PostCreatePage.jsx index e53bb1a..ad8f806 100644 --- a/sadajo_fe/src/pages/PostCreatePage.jsx +++ b/sadajo_fe/src/pages/PostCreatePage.jsx @@ -2,47 +2,73 @@ import React, { useState } from 'react'; import { useNavigate, useOutletContext } from 'react-router-dom'; import postApi from '../api/postApi'; -import '../styles/PostCreatePage.css'; import { toast } from 'react-toastify'; const PostCreatePage = () => { const navigate = useNavigate(); const { isAuthenticated, user = {}, openLoginModal } = useOutletContext(); + + // 기존 필드 const [title, setTitle] = useState(''); const [content, setContent] = useState(''); - const [tags, setTags] = useState(''); + + // 해시태그 (엔터로 추가) + const [tagInput, setTagInput] = useState(''); + const [tags, setTags] = useState([]); + + // 새로 추가할 필드들 + const [tip, setTip] = useState(''); + const [place, setPlace] = useState(''); + const [date, setDate] = useState(''); + const [people, setPeople] = useState(''); + const [category, setCategory] = useState(''); + const [error, setError] = useState(''); - // 로그인 상태 확인: 로그인되지 않았다면 에러 토스트를 띄우고 로그인 모달을 연 후 페이지 전환 - if (!isAuthenticated) { - toast.error("게시글 작성을 위해 로그인이 필요합니다."); - openLoginModal(); - navigate('/posts'); - return null; - } + // 로그인 상태 확인 + if (!isAuthenticated) { + toast.error("게시글 작성을 위해 로그인이 필요합니다."); + openLoginModal(); + navigate('/posts'); + return null; + } + // 엔터를 눌렀을 때 태그 추가 + const handleTagKeyDown = (e) => { + if (e.key === 'Enter') { + e.preventDefault(); // 폼 submit 방지 + if (!tagInput.trim()) return; // 공백 태그 방지 + setTags([...tags, tagInput.trim()]); + setTagInput(''); + } + }; + + // 태그 개별 삭제 + const handleRemoveTag = (index) => { + setTags(tags.filter((_, i) => i !== index)); + }; + + // 폼 제출 const handleSubmit = async (e) => { e.preventDefault(); setError(''); - // 태그를 쉼표로 구분된 문자열에서 배열로 변환 - const tagsArray = tags - .split(',') - .map(tag => tag.trim()) - .filter(tag => tag.length > 0); try { - const postData = { - userId: user.id, + await postApi.createPost({ + userId: user.id, title, content, - tags: tagsArray, - }; - console.log(user.id); - // 실제 백엔드로 게시글 생성 요청 - const result = await postApi.createPost(postData); + tags, // 엔터로 추가된 해시태그 배열 + tip, + place, + date, + people, + category, + }); + toast.success("게시글이 성공적으로 작성되었습니다!"); - navigate('/posts'); // 게시글 전체보기 페이지로 이동 + navigate('/posts'); } catch (err) { console.error("게시글 작성 오류:", err); setError(err.message || "게시글 작성에 실패했습니다."); @@ -50,42 +76,192 @@ const PostCreatePage = () => { }; return ( -
-

게시글 작성

- {error &&

{error}

} -
-
- - setTitle(e.target.value)} - required - placeholder="게시글 제목을 입력하세요" - /> -
-
- -