Skip to content

Commit

Permalink
글쓰기 서버 연결 확인 및 #36
Browse files Browse the repository at this point in the history
  • Loading branch information
@greenfrog616
greenfrog616 committed Feb 15, 2024
1 parent 377813d commit 5f32276
Show file tree
Hide file tree
Showing 2 changed files with 152 additions and 140 deletions.
156 changes: 78 additions & 78 deletions SOPOLAST/src/Components/Sidewrite/write.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import ImgPlus from "src/Assets/image/imgplus.png";
import SubmitImg from "src/Assets/image/submitimg.png";
import * as s from "./Write.style";
import { showToast } from "src/constants/Swal/Swal";
import UseWrite from "src/hooks/Write/useWirte"
import UseWrite from "src/hooks/Write/useWirte";

const Sidewrite = () => {
const {
Expand All @@ -22,88 +22,88 @@ const Sidewrite = () => {
selectedImg,
handleChangeImg,
onSubmitHandler,

} = UseWrite();
return (

<s.Main>
<Head active={false} />
<Side />
<s.Write_Main>
<s.Writing>
<s.From onSubmit={onSubmitHandler}>
<s.WriteTool>
<s.Tool>
<span>올릴곳</span>
<s.CategorySelect
onChange={(e) => setselectPlace(e.target.value)}>
<option value="게시물">게시물</option>
<option value="대회">대회</option>
</s.CategorySelect>
</s.Tool>
<s.Tool>
<span>카테고리</span>
<s.CategorySelect onChange={(e)=> setSelectClass(e.target.value)}>
<option value="web">웹</option>
<option value="server">서버</option>
<option value="Android">안드로이드</option>
<option value="iOS">iOS</option>
<option value="Embedded">임베디드</option>
<option value="design">디자인</option>
<option value="etc">기타</option>
</s.CategorySelect>
</s.Tool>
<s.Tool>
<span>이미지추가</span>
<s.plustimg>
<label htmlFor="change-img">
<img src={ImgPlus} />
</label>
<s.btnupload
name="file"
type="file"
id="change-img"
onChange={handleChangeImg}
></s.btnupload>
</s.plustimg>
</s.Tool>
<s.Main>
<Head active={false} />
<Side />
<s.Write_Main>
<s.Writing>
<s.From onSubmit={onSubmitHandler}>
<s.WriteTool>
<s.Tool>
<span>올릴곳</span>
<s.CategorySelect
onChange={(e) => setselectPlace(e.target.value)}
>
<option value="게시물">게시물</option>
<option value="대회">대회</option>
</s.CategorySelect>
</s.Tool>
<s.Tool>
<span>카테고리</span>
<s.CategorySelect
onChange={(e) => setSelectClass(e.target.value)}
>
<option value="web">웹</option>
<option value="server">서버</option>
<option value="Android">안드로이드</option>
<option value="iOS">iOS</option>
<option value="Embedded">임베디드</option>
<option value="design">디자인</option>
<option value="etc">기타</option>
</s.CategorySelect>
</s.Tool>
<s.Tool>
<span>이미지추가</span>
<s.plustimg>
<label htmlFor="change-img">
<img src={ImgPlus} />
</label>
<s.btnupload
name="file"
type="file"
id="change-img"
onChange={handleChangeImg}
></s.btnupload>
</s.plustimg>
</s.Tool>

<s.SubmitButtonMain>
<s.SubmitButton ></s.SubmitButton>
<s.plustimg>
<img src={SubmitImg} />
</s.plustimg>
</s.SubmitButtonMain>
</s.WriteTool>
<s.WriteUnder>
<s.WriteForm>
{/* <div className="write_img1">
<s.SubmitButtonMain>
<s.SubmitButton></s.SubmitButton>
<s.plustimg>
<img src={SubmitImg} />
</s.plustimg>
</s.SubmitButtonMain>
</s.WriteTool>
<s.WriteUnder>
<s.WriteForm>
{/* <div className="write_img1">
{imageSrc && <img src={imageSrc} alt="Preview" />}
</div> */}
<s.WriteTitlelMain>
<s.WriteTitle
type="text"
placeholder="제목"
value={title}
onChange={(e) => setTitle(e.target.value)}
/>
</s.WriteTitlelMain>
<s.WriteDetailMain>
{selectedImg && <s.WriteImg src={selectedImg} />}
<s.WriteDetail
placeholder="내용"
value={content}
onChange={(e) => setContent(e.target.value)}
></s.WriteDetail>
</s.WriteDetailMain>
{/* {fileName && <div>{fileName}</div>} */}
</s.WriteForm>
</s.WriteUnder>
</s.From>
</s.Writing>
</s.Write_Main>
</s.Main>

<s.WriteTitlelMain>
<s.WriteTitle
type="text"
placeholder="제목"
value={title}
onChange={(e) => setTitle(e.target.value)}
/>
</s.WriteTitlelMain>
<s.WriteDetailMain>
{selectedImg && <s.WriteImg src={selectedImg} />}
<s.WriteDetail
placeholder="내용"
value={content}
onChange={(e) => setContent(e.target.value)}
></s.WriteDetail>
</s.WriteDetailMain>
{/* {fileName && <div>{fileName}</div>} */}
</s.WriteForm>
</s.WriteUnder>
</s.From>
</s.Writing>
</s.Write_Main>
</s.Main>
);
};

Expand Down
136 changes: 74 additions & 62 deletions SOPOLAST/src/hooks/Write/useWirte.ts
View file
Original file line number Diff line number Diff line change
@@ -1,68 +1,79 @@
import { useState, ChangeEvent, FormEvent } from "react";
import { showToast } from "src/constants/Swal/Swal";
import axios from "axios";

const UseSidewrite = () => {
const [title, setTitle] = useState<string>("");
const [content, setContent] = useState<string>("");
const [selectPlace, setselectPlace] = useState<string>("");
const [selectedImg, setSelectedImg] = useState<string | null>(null);
const [Class, setSelectClass] = useState<string>("");
const handleChangeImg = (e: React.ChangeEvent<HTMLInputElement>): void => {
const file = e.target.files?.[0];
const reader = new FileReader();

reader.onload = () => {
setSelectedImg(reader.result as string);
};
if (file) {
reader.readAsDataURL(file);
}
const [title, setTitle] = useState<string>("");
const [content, setContent] = useState<string>("");
const [selectPlace, setselectPlace] = useState<string>("");
const [selectedImg, setSelectedImg] = useState<string | null>(null);
const [Class, setSelectClass] = useState<string>("");

const handleChangeImg = (e: ChangeEvent<HTMLInputElement>): void => {
const file = e.target.files?.[0];
const reader = new FileReader();

reader.onload = () => {
setSelectedImg(reader.result as string);
};


const onSubmitHandler = async (e: FormEvent) => {
console.log("hello");

e.preventDefault();

if (!title || !content) {
showToast("error", "제목, 내용을 모두 입력해주세요.");
return;
}

const formData = new FormData();
const data = {
title,
content,

};
formData.append(
"data",
new Blob([JSON.stringify(data)], { type: "application/json" })
);

if (selectPlace === "게시물" && selectedImg) {
formData.append("image", selectedImg);
}

try {
let response;
if (selectPlace === "게시물") {
await axios.post(`#`, formData, {
headers: {
"Content-Type": "multipart/form-data",
},
});
} else if (selectPlace === "대회") {
response = await axios.post("#", formData, {
headers: { "Content-Type": "multipart/form-data" },
});
}
} catch (error) {
console.error("Error:", error);
}

if (file) {
reader.readAsDataURL(file);
}
};

const onSubmitHandler = async (e: FormEvent) => {
e.preventDefault();

if (!title || !content) {
showToast("error", "제목과 내용을 모두 입력해주세요.");
return;
}

const formData = new FormData();
const data = {
title,
content,
selectPlace, // 추가: 선택한 카테고리 정보
isContest: selectPlace === "대회", // 추가: 대회인지 게시물인지 여부
};
return{

formData.append(
"data",
new Blob([JSON.stringify(data)], { type: "application/json" })
);

if (selectPlace === "게시물" && selectedImg) {
formData.append("image", selectedImg);
}

try {
let response;
if (selectPlace === "게시물") {
response = await axios.post("#", formData, {
headers: {
"Content-Type": "multipart/form-data",
},
});
} else if (selectPlace === "대회") {
response = await axios.post("#", formData, {
headers: { "Content-Type": "multipart/form-data" },
});
}

// 서버 응답 처리
console.log(response);

// 콘솔에 정보가 나오도록 추가
console.log("서버로 정보를 보냈습니다.");
console.log("보낸 데이터:", data);
console.log("선택한 카테고리:", selectPlace); // 선택한 카테고리를 콘솔에 출력
} catch (error) {
console.error("Error:", error);
}
};

return {
title,
setTitle,
content,
Expand All @@ -74,6 +85,7 @@ return{
selectedImg,
handleChangeImg,
onSubmitHandler,
}
}
export default UseSidewrite
};
};

export default UseSidewrite;

0 comments on commit 5f32276

Please sign in to comment.