Commit 2a6c5ebf authored by Lee Soobeom's avatar Lee Soobeom
Browse files

Merge remote-tracking branch 'origin/sb14' into develop

parents f49dda57 3218e54c
......@@ -33,3 +33,8 @@ export const updating = async (post: PostType) => {
const { data } = await axios.put(`${baseUrl}/posts/${post._id}`, post);
return data;
};
export const postImg = async (formdata: FormData) => {
const { data } = await axios.post(`${baseUrl}/posts`, formdata);
return data;
};
......@@ -27,12 +27,12 @@ export function IntoPost() {
<div className="flex flex-row basis-8 gap-x-1">
<div className="border-2 border-sky-300 border-current rounded">
<button id={post._id} onClick={handleDeleteClick}>
delete
삭제
</button>
</div>
<div className="border-2 border-sky-300 border-current rounded">
<Link to="/edit" state={post}>
<button>update</button>
<button>수정</button>
</Link>
</div>
</div>
......
import React, { FormEvent, useState } from "react";
import React, { FormEvent, useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import isLength from "validator/lib/isLength";
import equals from "validator/lib/equals";
import { catchErrors } from "../helpers";
import { PostType } from "../types";
import { postApi } from "../apis";
import { File } from "formidable";
export default function Posting() {
const [city, setCity] = useState<string>("질문종류");
const [theme, setTheme] = useState<string>("질문종류");
const [city, setCity] = useState<string>("city");
const [theme, setTheme] = useState<string>("theme");
const [title, setTitle] = useState<string>("");
const [text, setText] = useState<string>("");
const [file, setFile] = useState<File>();
const [imgSrc, setImgSrc] = useState<string[]>();
const navigate = useNavigate();
const [user, setUser] = useState<PostType>({
......@@ -29,6 +32,23 @@ export default function Posting() {
const [disabled, setDisabled] = useState(false);
const [success, setSuccess] = useState(false);
useEffect(() => {
console.log("uploaded imgs", imgSrc);
}, [imgSrc]);
const imgArr = new Array();
const sendImg2Db = async (filelist: FileList) => {
const formdata = new FormData();
if (!(filelist === undefined || filelist === null)) {
for (var i = 0; i < filelist.length; i++) {
formdata.append(`picture${i}`, filelist?.[i]);
}
console.log("formdata", formdata);
await postApi.postImg(formdata);
}
};
async function handlePostSubmit(event: FormEvent) {
event.preventDefault();
......@@ -37,6 +57,7 @@ export default function Posting() {
console.log("user data", user);
if (postingFormMatch()) {
setLoading(true);
// sendImg2Db();
const res = await postApi.posting(user);
console.log("서버연결됬나요", res);
// console.log("user save");
......@@ -102,16 +123,41 @@ export default function Posting() {
setUser(newUser);
};
const handleInputPic = async (event: React.ChangeEvent<HTMLInputElement>) => {
event.preventDefault();
const maxImg = 10;
const { files } = event.target;
if (!(files?.length === undefined)) {
if (files?.length <= maxImg) {
for (var i = 0; i < files.length; i++) {
const reader = new FileReader();
reader.readAsDataURL(files?.[i]);
reader.onload = (e) => {
imgArr.push(e.target?.result);
setImgSrc(imgArr);
};
}
} else {
alert("사진은 최대 10장까지 업로드 가능합니다!");
}
}
};
return (
<div className="flex flex-col border-3">
<div className="flex flex-col border-3 ">
<form onSubmit={handlePostSubmit} className="w-full items-center">
<div className="flex flex-row relative">
<p className="basis-1/12 gap-x-8">Id</p>
<p className="basis-8/12 invisible">empty</p>
<p className="basis-6/12 invisible">empty</p>
<div className="basis-2/12 border-2 border-sky-300">
<input type="file" multiple onChange={handleInputPic} />
</div>
<select
name="city"
id="Questions"
className="border border-3 border-black w-1/12"
className="border-2 border-sky-300 w-1/12"
onChange={cityChange}
defaultValue="질문종류"
>
......@@ -130,7 +176,7 @@ export default function Posting() {
<select
name="theme"
id="Questions"
className="border border-3 border-black w-1/12"
className="border-2 border-sky-300 w-1/12"
onChange={themeChange}
defaultValue="질문종류"
>
......@@ -151,26 +197,31 @@ export default function Posting() {
<button
type="submit"
className="border border-black basis-1/12 gap-x-8"
className="border-2 border-sky-300 basis-1/12 gap-x-8"
>
글쓰기
</button>
</div>
<div className="flex border-4">
<div className="flex">
<textarea
name="title"
onChange={titleChange}
placeholder="title"
className="w-full h-8"
className="w-full h-8 border-2 border-sky-300"
></textarea>
</div>
<div className="flex border-2">
<div className="flex flex-col">
<div className="flex h-48 overflow-x-scroll">
{imgSrc?.map((img, i) => (
<img key={i} src={img} width={200} height={200} />
))}
</div>
<textarea
onChange={textChange}
name="text"
placeholder="text"
className="w-full h-96"
className="w-full h-96 border-2 border-sky-300"
></textarea>
</div>
</form>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment