Skip to content

Commit

Permalink
Merge pull request #19 from LikeLionHGU/hwan_#17/페이지-연결
Browse files Browse the repository at this point in the history 
Hwan #17/페이지 연결
  • Loading branch information
@hwan129
hwan129 authored Jul 28, 2024
2 parents dd3246d + 4b2832f commit b26de78
Show file tree
Hide file tree
Showing 11 changed files with 264 additions and 307 deletions.
29 changes: 19 additions & 10 deletions src/components/Header.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ function useQuery() {
export default function Header({ mode }) {
const [selectedCategory, setSelectedCategory] = useState("소설");
const [onLogin, setOnLogin] = useState();
const [isLoading, setIsLoading] = useState(true); // 로딩 상태 추가
const query = useQuery();
const navigate = useNavigate();

Expand Down Expand Up @@ -44,34 +45,38 @@ export default function Header({ mode }) {
setOnLogin(false);
navigate("/", { replace: true });
return;
} else {
setOnLogin(true);
}

setIsLoading(false); // 로딩 상태 완료
}, []);

function toCreate() {
navigate("/create");
}

function toList() {
navigate("/list");
if (isLoading) {
return <div></div>; // 로딩 중일 때 표시할 내용
}

return (
<div id="header">
<div className="headerContainer">
<div className="header-headerContainer">
<div>
<img src={LogoImg} alt="logo" />
</div>
{/* 프로젝트 상세 페이지일 경우 검색창을 없앰 */}
{mode === 2 ? (
<></>
) : (
<div className="searchContainer">
<input className="searchBox" placeholder="책 제목, 작가명" />
<div className="header-searchContainer">
<input className="header-searchBox" placeholder="책 제목, 작가명" />
<img src={SearchImg} alt="search" />
</div>
)}

<div className="headerRight">
<div className="header-headerRight">
{onLogin ? (
<>
<button
Expand All @@ -83,7 +88,11 @@ export default function Header({ mode }) {
책 발간하기
</button>
<div>
<img className="profile" src={ProfileImg} alt="profile" />
<img
className="header-profile"
src={ProfileImg}
alt="profile"
/>
</div>
</>
) : (
Expand All @@ -98,8 +107,8 @@ export default function Header({ mode }) {
)}
</div>
</div>
<div className="categoryContainer">
<div className="category" id="upper-category">
<div className="header-categoryContainer">
<div className="header-category" id="upper-category">
{Object.keys(categories).map((category) => (
<button
key={category}
Expand All @@ -111,7 +120,7 @@ export default function Header({ mode }) {
</div>
{/* 프로젝트 전체 페이지일 경우 보여줌 */}
{mode === 1 ? (
<div className="category">
<div className="header-category">
{categories[selectedCategory].map((option, index) => (
<button key={index}>{option}</button>
))}
Expand Down
2 changes: 1 addition & 1 deletion src/components/Write.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -302,7 +302,7 @@ export default function Write() {

return (
<div>
<div className="main-container">
<div className="main-write-container">
<div
className="editor-container editor-container_document-editor editor-container_include-style"
ref={editorContainerRef}
Expand Down
139 changes: 34 additions & 105 deletions src/pages/Create.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
// 프로젝트 생성 페이지
import { useState, useEffect } from "react";
import "../styles/create.css";
import ImgUpLoad from "../components/ImgUpLoad";
Expand All @@ -14,6 +13,7 @@ const categories = {
드라마: ["가족", "모험", "사회", "정치"],
기타: ["기타"],
};

export default function Create() {
const [title, setTitle] = useState("");
const [description, setDescription] = useState("");
Expand All @@ -24,26 +24,23 @@ export default function Create() {

const navigate = useNavigate();

// 카테고리
const handleCategoryChange = (category, item) => {
setSelectedCategories((prevSelectedCategories) => {
const updatedCategories = {
...prevSelectedCategories,
[category]: item, // 각 카테고리에 대해 선택된 항목만 저장
[category]: item,
};
console.log(updatedCategories);
return updatedCategories;
});
};

// 공개 여부
const handleVisibilityChange = (event) => {
const newVisibility = event.target.value;
setVisibility(newVisibility);
console.log(newVisibility);
};

// 인원 수
const handlePeople = (upDown) => {
if (upDown === 1) {
setPeople(people + 1);
Expand All @@ -58,71 +55,6 @@ export default function Create() {
setImage(file);
};

// form data
// useEffect(() => {
// const storedToken = localStorage.getItem("token");

// if (storedToken == null) {
// // setOnLogin(false);
// navigate("/", { replace: true });
// return;
// }

// const handleSubmit = async (event) => {
// event.preventDefault();

// const value = [
// {
// name: `${title}`,
// category: `${selectedCategories}`,
// information: `${description}`,
// isPublic: `${visibility}`,
// maximumNumber: `${people}`,
// isFinished: false,
// isRecruit: true,
// },
// ];
// const formData = new FormData();

// console.log(event);
// formData.append("file", image); // 'file'는 서버에서 이미지를 받는 필드명
// formData.append(
// "post",
// new Blob([JSON.stringify(value)], {
// type: "application/json",
// })
// );

// console.log("FormData:", value);
// for (let [key, value] of formData.entries()) {
// console.log(`${key}: ${value}`);
// }

// try {
// const response = await axios.post(
// "https://likelion.info/project/add", // Replace with your API endpoint
// formData,
// {
// headers: {
// Authorization: `Bearer ${storedToken}`,
// "Content-Type": "multipart/form-data",
// },
// }
// );

// if (response.status === 200) {
// console.log("Post uploaded successfully");
// alert("게시물 업로드 성공");
// navigate("/"); // Navigate back to the library page after successful post
// } else {
// console.error("Error uploading post");
// }
// } catch (error) {
// console.error("Error uploading post:", error);
// navigate("/", { replace: true });
// }
// };
// }, []);
const storedToken = localStorage.getItem("token");

if (storedToken == null) {
Expand All @@ -133,20 +65,22 @@ export default function Create() {
const handleSubmit = async (event) => {
event.preventDefault();

const value = [
{
name: title,
category: selectedCategories,
information: description,
isPublic: visibility === "true",
maximumNumber: people,
isFinished: false,
isRecruit: true,
},
];
// selectedCategories 객체의 값만 추출하여 문자열로 변환
const categoriesString = Object.values(selectedCategories).join(", ");

const value = {
name: title,
category: categoriesString,
information: description,
isPublic: visibility === "공개",
maximumNumber: people,
isFinished: false,
isRecruit: true,
};

console.log(value);
const formData = new FormData();
formData.append("file", image); // 'file'은 서버에서 이미지를 받는 필드명입니다
formData.append("file", image);
formData.append(
"post",
new Blob([JSON.stringify(value)], {
Expand All @@ -156,7 +90,7 @@ export default function Create() {

try {
const response = await axios.post(
"https://likelion.info/project/add", // Replace with your API endpoint
"https://likelion.info/project/add",
formData,
{
headers: {
Expand All @@ -168,20 +102,17 @@ export default function Create() {

if (response.status === 200) {
console.log("Post uploaded successfully");
alert("게시물 업로드 성공");
navigate("/"); // 성공적으로 업로드 후 라이브러리 페이지로 이동
// alert("게시물 업로드 성공");
navigate("/"); // 성공적으로 업로드 후 메인 페이지로 이동
} else {
console.error("Error uploading post");
}
} catch (error) {
if (error.response) {
// 서버가 응답을 보냈지만 상태 코드가 2xx 범위가 아님
console.error("Error response from server:", error.response);
} else if (error.request) {
// 요청이 만들어졌지만 응답을 받지 못함
console.error("No response received:", error.request);
} else {
// 요청을 설정하는 도중에 오류가 발생함
console.error("Error in setting up request:", error.message);
}
console.error("Error uploading post:", error);
Expand All @@ -191,29 +122,29 @@ export default function Create() {
};

return (
<div className="createContainer">
<div className="create-createContainer">
<form onSubmit={handleSubmit}>
<div id="pageTitle">책 발간</div>
<div className="menu">
<div className="create-menu">
<div>책 제목 *</div>
<input
placeholder="책 제목을 입력해 주세요."
value={title}
onChange={(e) => setTitle(e.target.value)}
></input>
/>
</div>
<div className="menu">
<div className="create-menu">
<div>책 표지 이미지</div>
<ImgUpLoad onImageUpload={handleImageUpload} />
</div>
<div className="menu">
<div className="create-menu">
<div>책 장르 *</div>
<div className="categoryContainer">
<div className="create-categoryContainer">
{Object.keys(categories).map((category) => (
<div key={category} className="category">
<div key={category} className="create-category">
<div>{category}</div>
{categories[category].map((item) => (
<div key={item} className="radio-item">
<div key={item} className="create-radio-item">
<input
type="radio"
id={item}
Expand All @@ -227,18 +158,18 @@ export default function Create() {
))}
</div>
</div>
<div className="menu">
<div className="create-menu">
<div>책 소개 *</div>
<input
placeholder="책 소개를 입력해 주세요."
value={description}
onChange={(e) => setDescription(e.target.value)}
></input>
/>
</div>
<div className="menu">
<div className="create-menu">
<div>책 공개 여부</div>
<div>
<div className="radio-item">
<div className="create-radio-item">
<input
type="radio"
id="public"
Expand All @@ -249,7 +180,7 @@ export default function Create() {
/>
<label htmlFor="public">공개</label>
</div>
<div className="radio-item">
<div className="create-radio-item">
<input
type="radio"
id="private"
Expand All @@ -262,9 +193,9 @@ export default function Create() {
</div>
</div>
</div>
<div className="menu">
<div className="create-menu">
<div>작가 정원 *</div>
<div className="peopleNum">
<div className="create-peopleNum">
<div onClick={() => handlePeople(-1)}>-</div>
<div>{people}</div>
<div onClick={() => handlePeople(+1)}>+</div>
Expand All @@ -275,5 +206,3 @@ export default function Create() {
</div>
);
}

// 카테고리 최대 개수?
Loading

0 comments on commit b26de78

Please sign in to comment.