Skip to content

Commit

Permalink
Merge pull request #7 from LikeLionHGU/hwan_#6/프로젝트-생성-페이지
Browse files Browse the repository at this point in the history
Hwan #6/프로젝트 생성 페이지
  • Loading branch information
hwan129 authored Jul 23, 2024
2 parents 070471e + 01b8be5 commit e7dbf72
Showing 10 changed files with 209 additions and 51 deletions.
12 changes: 12 additions & 0 deletions src/components/Header.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
export default function Header() {
return (
<>
<div>
<img />
</div>
<div>
<input placeholder="책 제목, 작가명" />
</div>
</>
);
}
40 changes: 40 additions & 0 deletions src/components/ImgUpLoad.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import React, { useState } from "react";
import ImgNone from "../imgs/img_none.svg";
import "../styles/ImgUpLoad.css";

export default function ImgUpLoad({ onImageUpload }) {
const [imageSrc, setImageSrc] = useState(`${ImgNone}`);

const encodeFileToBase64 = (fileBlob) => {
const reader = new FileReader();

reader.readAsDataURL(fileBlob);

return new Promise((resolve) => {
reader.onload = () => {
setImageSrc(reader.result);
resolve(reader.result); // Base64 인코딩된 파일 반환
};
});
};

return (
<main className="img-container">
<div className="img-preview">
{imageSrc && (
<img className="img-image" src={imageSrc} alt="preview-img" />
)}
</div>

<input
type="file"
onChange={(e) => {
const file = e.target.files[0];
encodeFileToBase64(file).then(() => {
onImageUpload(file); // 파일을 부모 컴포넌트로 전달
});
}}
/>
</main>
);
}
Binary file removed src/img/test2.webp
Binary file not shown.
Binary file removed src/img/test3.jpg
Binary file not shown.
Binary file removed src/img/test4.webp
Binary file not shown.
Binary file removed src/img/test5.jpg
Binary file not shown.
5 changes: 5 additions & 0 deletions src/imgs/img_none.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
178 changes: 127 additions & 51 deletions src/pages/Create.jsx
Original file line number Diff line number Diff line change
@@ -1,19 +1,26 @@
// 프로젝트 생성 페이지
import { useState } from "react";
import "../styles/create.css";
import ImgUpLoad from "../components/ImgUpLoad";
import ImgNone from "../imgs/img_none.svg";

const categories = {
소설: ["공포", "로맨스", "미스터리/추리", "역사", "판타지", "SF"],
: ["감정", "사회", "자연", "철학"],
에세이: ["개인경험", "사회", "여행", "자기계발"],
비문학: ["과학", "자기계발", "전기", "역사"],
드라마: ["가족", "교훈", "사회", "정치"],
에세이: ["개인경험", "사회", "여행", "자기개발"],
비문학: ["과학", "자기개발", "전기", "역사"],
드라마: ["가족", "모험", "사회", "정치"],
기타: ["기타"],
};
export default function Create() {
const [title, setTitle] = useState("");
const [description, setDescription] = useState("");
const [selectedCategories, setSelectedCategories] = useState({});
const [visibility, setVisibility] = useState("공개");
const [people, setPeople] = useState(0);
const [image, setImage] = useState(`${ImgNone}`);

// 카테고리
const handleCategoryChange = (category, item) => {
setSelectedCategories((prevSelectedCategories) => {
const updatedCategories = {
@@ -25,63 +32,132 @@ export default function Create() {
});
};

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

// 인원 수
const handlePeople = (upDown) => {
if (upDown === 1) {
setPeople(people + 1);
} else if (upDown === -1) {
if (people !== 1) {
setPeople(people - 1);
}
}
console.log(people);
};

const handleImageUpload = (file) => {
setImage(file);
};

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

const formData = new FormData();
formData.append("title", title);
formData.append("description", description);
formData.append("visibility", visibility);
formData.append("people", people);
formData.append("categories", selectedCategories);
formData.append("image", image);

// fetch 들어갈 곳

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

return (
<>
<div>책 발간</div>
<div>책 제목 *</div>
<input placeholder="책 제목을 입력해 주세요."></input>
<div>책 표지 이미지</div>
<input type="file" />
<div>책 장르 *</div>
<div className="categoryContainer">
{Object.keys(categories).map((category) => (
<div key={category} className="category">
<h3>{category}</h3>
{categories[category].map((item) => (
<div key={item} className="radio-item">
<input
type="radio"
id={item}
name={category}
onChange={() => handleCategoryChange(category, item)}
/>
<label htmlFor={item}>{item}</label>
<div className="createContainer">
<form onSubmit={handleSubmit}>
<div id="pageTitle">책 발간</div>
<div className="menu">
<div>책 제목 *</div>
<input
placeholder="책 제목을 입력해 주세요."
value={title}
onChange={(e) => setTitle(e.target.value)}
></input>
</div>
<div className="menu">
<div>책 표지 이미지</div>
<ImgUpLoad onImageUpload={handleImageUpload} />
</div>
<div className="menu">
<div>책 장르 *</div>
<div className="categoryContainer">
{Object.keys(categories).map((category) => (
<div key={category} className="category">
<div>{category}</div>
{categories[category].map((item) => (
<div key={item} className="radio-item">
<input
type="radio"
id={item}
name={category}
onChange={() => handleCategoryChange(category, item)}
/>
<label htmlFor={item}>{item}</label>
</div>
))}
</div>
))}
</div>
))}
</div>
<div>책 소개 *</div>
<input placeholder="책 소개를 입력해 주세요."></input>
<div>책 공개 여부</div>
<div className="radio-item">
<input
type="radio"
id="public"
name="visibility"
value="공개"
checked={visibility === "공개"}
onChange={handleVisibilityChange}
/>
<label htmlFor="public">공개</label>
</div>
<div className="radio-item">
<input
type="radio"
id="private"
name="visibility"
value="비공개"
checked={visibility === "비공개"}
onChange={handleVisibilityChange}
/>
<label htmlFor="private">비공개</label>
</div>
</>
</div>
<div className="menu">
<div>책 소개 *</div>
<input
placeholder="책 소개를 입력해 주세요."
value={description}
onChange={(e) => setDescription(e.target.value)}
></input>
</div>
<div className="menu">
<div>책 공개 여부</div>
<div>
<div className="radio-item">
<input
type="radio"
id="public"
name="visibility"
value="공개"
checked={visibility === "공개"}
onChange={handleVisibilityChange}
/>
<label htmlFor="public">공개</label>
</div>
<div className="radio-item">
<input
type="radio"
id="private"
name="visibility"
value="비공개"
checked={visibility === "비공개"}
onChange={handleVisibilityChange}
/>
<label htmlFor="private">비공개</label>
</div>
</div>
</div>
<div className="menu">
<div>작가 정원 *</div>
<div className="peopleNum">
<button onClick={() => handlePeople(-1)}>-</button>
<div>{people}</div>
<button onClick={() => handlePeople(+1)}>+</button>
</div>
</div>
<button type="submit">발간하기</button>
</form>
</div>
);
}

5 changes: 5 additions & 0 deletions src/styles/ImgUpLoad.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
.img-image {
max-width: 200px;
max-height: 275px;
object-fit: "cover";
}
20 changes: 20 additions & 0 deletions src/styles/create.css
Original file line number Diff line number Diff line change
@@ -1,3 +1,16 @@
.createContainer {
margin: 60px 132px;
min-width: 700px;
}

.menu {
margin-bottom: 80px;
}

#pageTitle {
margin-bottom: 107px;
}

.categoryContainer {
display: flex;
flex-wrap: wrap;
@@ -11,4 +24,11 @@
.radio-item {
display: flex;
align-items: center;

margin: 12px 0px;
}

.peopleNum {
display: flex;
align-items: center;
}

0 comments on commit e7dbf72

Please sign in to comment.