diff --git a/frontend/src/App.js b/frontend/src/App.js index 5f0c4c3..04fc37e 100644 --- a/frontend/src/App.js +++ b/frontend/src/App.js @@ -1,12 +1,13 @@ import './App.css'; -import EditProfilePage from './EditProfilePage'; +import WriteDiaryPage from './WriteDiaryPage'; + // import { BrowserRouter, Route, Routes } from 'react-router-dom'; function App() { return ( //
- + {/* }> }> diff --git a/frontend/src/EditProfilePage.jsx b/frontend/src/EditProfilePage.jsx deleted file mode 100644 index 99f5669..0000000 --- a/frontend/src/EditProfilePage.jsx +++ /dev/null @@ -1,270 +0,0 @@ -import { useEffect } from "react"; -import { useState } from "react"; -import "./css/EditProfilePage.css"; -import camera_icon from "./images/camera_icon.svg"; -import withdrawl_icon from "./images/withdrawl_icon.svg"; - -function EditProfilePage() { - - const [profile_data, set_profile_data] = useState({ - name: "", - nickname: "", - email: "", - birth: new Date(), - age: 0, - phone_number: "", - profile_image: "", - }); - const [edtiting_profile_data, set_edtiting_profile_data] = useState({ - name: "", - nickname: "", - email: "", - birth: new Date(), - age: 0, - phone_number: "", - profile_image: "", - }); - const change_phone_number = ({ target: { value } }) => { - const regex = /[^0-9]/g; // 숫자가 아닌 문자열을 선택하는 정규식 - let phone_number = value.replace(regex, ""); - if (phone_number.length > 7) - phone_number = `${phone_number.slice(0, 3)}-${phone_number.slice( - 3, - 7 - )}-${phone_number.slice(7, 11)}`; - else if (phone_number.length > 3) - phone_number = `${phone_number.slice(0, 3)}-${phone_number.slice(3, 7)}`; - set_edtiting_profile_data({ ...edtiting_profile_data, phone_number }); - }; - const change_profile_image = ({ target: { files } }) => { - const reader = new FileReader(); - reader.onload = () => { - set_edtiting_profile_data({ - ...edtiting_profile_data, - profile_image: reader.result, - }); - }; - reader.readAsDataURL(files[0]); - }; - - const submit_event = () => { - // 제출 코드 - }; - - const withdrawal_event = () => { - // 제출 코드 - }; - - const fetch_user_data = () => { - const data = { - name: "홍길동", - nickname: "코카콜라", - email: "example@example.com", - gender: "male", - birth: new Date(2000, 1, 1), - age: 84, - phone_number: "010-1234-5678", - profile_image: - "https://files.heftykrcdn.com/wp-content/uploads/2019/01/1557f9ce6b3048b34488694c02d63ad8-718x800.jpg", - }; - return data; - }; - - useEffect(() => { - const user_profile_data = fetch_user_data(); - set_edtiting_profile_data(user_profile_data); - set_profile_data({ ...user_profile_data, password: "" }); - return; - }, []); - - return ( -
-
마이페이지
-
-
- profile -

{profile_data["nickname"]}

-

{profile_data["email"]}

-
- -
-
- - - -
-
-
-

내 정보 수정

-
-

프로필 이미지 변경

-
- profile - - - -
-
-

성명 *

- - set_edtiting_profile_data({ - ...edtiting_profile_data, - name: e.target.value, - }) - } - /> -
-
-

닉네임 *

- - set_edtiting_profile_data({ - ...edtiting_profile_data, - nickname: e.target.value, - }) - } - /> -
-
-

이메일 *

- - set_edtiting_profile_data({ - ...edtiting_profile_data, - email: e.target.value, - }) - } - /> -
-
-

비밀번호 *

- - set_edtiting_profile_data({ - ...edtiting_profile_data, - password: e.target.value, - }) - } - /> -
-
-

연락처 *

- -
-
-

성별

-
-
- - set_edtiting_profile_data({ - ...edtiting_profile_data, - gender: "male", - }) - } - /> - -
-
- - set_edtiting_profile_data({ - ...edtiting_profile_data, - gender: "female", - }) - } - /> - -
-
-
-
-

나이

- - set_edtiting_profile_data({ - ...edtiting_profile_data, - age: e.target.value, - }) - } - /> -
-
-

생년원일

- - set_edtiting_profile_data({ - ...edtiting_profile_data, - birth: new Date(e.target.value), - }) - } - /> -
- -
-
- -
-
-
-
- ); -} - -export default EditProfilePage; diff --git a/frontend/src/WriteDiaryPage.jsx b/frontend/src/WriteDiaryPage.jsx new file mode 100644 index 0000000..18391a1 --- /dev/null +++ b/frontend/src/WriteDiaryPage.jsx @@ -0,0 +1,84 @@ +import { useState } from "react"; +import "./css/WriteDiaryPage.css"; +import arrow_svg from "./images/left_arrow.svg"; +import image_icon_svg from "./images/image_icon.svg"; + +function WriteDiaryPage() { + const [image, setImage] = useState(); + const [diaryData, setDiaryData] = useState({ + title: "", + text: "", + }); + + const upload_image = ({ target: { files } }) => { + const reader = new FileReader(); + reader.onload = () => { + setImage(reader.result); + }; + reader.readAsDataURL(files[0]); + }; + + const onSubmit = () => { + //제출코드 + }; + const onCancel = () => { + //뒤로가기 + }; + return ( +
+
+

제로웨이스트 일기

+

+ 오늘 행동했던 제로웨이스트 활동을 일기로 작성해보세요. +

+
+
+
+

오늘의 일기 작성

+

2022.08.08

+
+ + { + setDiaryData({ ...diaryData, title: value }); + }} + /> +