From 2e38436bfa094c26e1ca3d945bc95109566789af Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=8A=A4=ED=82=A4=ED=86=A0?=
 <39672943+honeybugs@users.noreply.github.com>
Date: Tue, 23 Aug 2022 20:26:11 +0900
Subject: [PATCH 1/4] [FEAT] Wirte Diary Page

---
 frontend/src/App.js                    |   5 +-
 frontend/src/WriteDiaryPage.jsx        |  82 ++++++++++
 frontend/src/css/EditProfilePage.css   | 198 -------------------------
 frontend/src/css/WriteDiaryPage.css    | 134 +++++++++++++++++
 frontend/src/images/calendar_icon.svg  |  12 --
 frontend/src/images/camera_icon.svg    |   3 -
 frontend/src/images/image_icon.svg     |   3 +
 frontend/src/images/left_arrow.svg     |   3 +
 frontend/src/images/withdrawl_icon.svg |   9 --
 9 files changed, 225 insertions(+), 224 deletions(-)
 create mode 100644 frontend/src/WriteDiaryPage.jsx
 delete mode 100644 frontend/src/css/EditProfilePage.css
 create mode 100644 frontend/src/css/WriteDiaryPage.css
 delete mode 100644 frontend/src/images/calendar_icon.svg
 delete mode 100644 frontend/src/images/camera_icon.svg
 create mode 100644 frontend/src/images/image_icon.svg
 create mode 100644 frontend/src/images/left_arrow.svg
 delete mode 100644 frontend/src/images/withdrawl_icon.svg

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 (
     // <BrowserRouter>
     <div className="App">
-      <EditProfilePage/>
+      <WriteDiaryPage/>
       {/* <Routes>
         <Route path='/' element={<Home></Home>}></Route>
         <Route path='/new' element={<New></New>}></Route>
diff --git a/frontend/src/WriteDiaryPage.jsx b/frontend/src/WriteDiaryPage.jsx
new file mode 100644
index 0000000..b496d75
--- /dev/null
+++ b/frontend/src/WriteDiaryPage.jsx
@@ -0,0 +1,82 @@
+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 (
+    <div className="write_diary_page">
+      <div className="header">
+        <p className="page_title">제로웨이스트 일기</p>
+        <p className="tip">
+          오늘 행동했던 제로웨이스트 활동을 일기로 작성해보세요.
+        </p>
+      </div>
+      <div className="main_body">
+        <div className="input_header_div">
+          <p className="input_header_title">오늘의 일기 작성</p>
+          <p className="input_header_timestamp">2022.08.08</p>
+        </div>
+
+        <input
+          className="diary_title_input"
+          placeholder={"제목을 입력해주세요."}
+          value={diaryData["title"]}
+          onChange={({ target: { value } }) => {
+            setDiaryData({ ...diaryData, title: value });
+          }}
+        />
+        <textarea
+          className="diary_text_input"
+          placeholder={"내용을 입력해주세요."}
+          value={diaryData["text"]}
+          onChange={({ target: { value } }) => {
+            setDiaryData({ ...diaryData, text: value });
+          }}
+        />
+        <label for="images_upload" className="diary_image_input">
+          <img src={image_icon_svg} alt="image_icon" />
+          <p>이미지 첨부</p>
+        </label>
+        <input
+          type="file"
+          accept="image/jpg,impge/png,image/jpeg"
+          id="images_upload"
+          className="images_upload"
+          onChange={upload_image}
+        />
+        <div className="diary_buttons">
+          <button className="cancel_btn">
+            <img src={arrow_svg} alt="left_arrow" />
+            <p>작성 취소</p>
+          </button>
+          <button className="submit_btn">
+            <p>작성하기</p>
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default WriteDiaryPage;
diff --git a/frontend/src/css/EditProfilePage.css b/frontend/src/css/EditProfilePage.css
deleted file mode 100644
index 9e66887..0000000
--- a/frontend/src/css/EditProfilePage.css
+++ /dev/null
@@ -1,198 +0,0 @@
-.body {
-  width: 1670px;
-  margin-bottom: 46px;
-}
-
-.main_body {
-  width: 1670px;
-  display: flex;
-}
-
-.my_page_title {
-  font-size: 32px;
-  height: 114px;
-  width: 1670px;
-  padding-left: 74px;
-  padding-top: 42px;
-  border-bottom: 1px solid #0679ff;
-}
-
-/* 프로필 파트 */
-
-.profile_image {
-  border-radius: 50%;
-  width: 237px;
-  height: 237px;
-}
-.profile_body {
-  padding-top: 73px;
-  width: 475px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-.profile_nickname {
-  font-size: 20px;
-  color: #151515;
-  margin-top: 45px;
-}
-.profile_email {
-  margin-top: 20px;
-  font-size: 18px;
-  color: #545454;
-}
-.profile_navibar {
-  width: 324px;
-  margin-top: 35px;
-  padding-top: 46px;
-  border-top: 1px solid #0679ff;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-}
-.navi_btn {
-  font-size: 20px;
-  margin-top: 11px;
-  color: #474747;
-}
-.profile_edit_btn {
-  width: 203px;
-  height: 53px;
-  font-size: 18px;
-  color: #0679ff;
-  border: 1px solid #0679ff;
-  border-radius: 50px;
-  margin-top: 45px;
-}
-/* 프로필 수정 파트  */
-
-.edit_profile {
-  padding-top: 62px;
-  width: 1198px;
-  display: flex;
-  flex-direction: column;
-}
-.edit_profile_title {
-    padding-left: 63px;
-  font-size: 24px;
-  color: black;
-}
-.profile_image_margin {
-  justify-self: center;
-  margin-top: 110px;
-  margin-bottom: 110px;
-}
-.edit_profile_main {
-  padding-top: 36px;
-  width: 845px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  align-self: center;
-}
-
-.input_div {
-  width: 845px;
-  display: flex;
-  justify-content: space-between;
-}
-.input_tag {
-  color: #767678;
-  font-size: 18px;
-}
-.profile_input_tag {
-  color: #767678;
-  font-size: 18px;
-  align-self: flex-start;
-}
-.input_text {
-  padding-left: 14px;
-  width: 588px;
-  height: 48px;
-  border: 1px solid #bdc8d3;
-  border-radius: 5px;
-  color: #252525;
-  font-size: 18px;
-}
-input[type="date"]::-webkit-calendar-picker-indicator {
-  width: 18px;
-  height: 21.5px;
-  margin-right: 19px;
-
-  content: url("/src/images/calendar_icon.svg");
-}
-input[type="file"] {
-  /* 파일 필드 숨기기 */
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  border: 0;
-}
-
-.camera_upload_button {
-  position: absolute;
-  margin-left: 178px;
-  margin-top: -72px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 56px;
-  height: 56px;
-  background-color: white;
-  border-radius: 50%;
-  border: 1px solid #0679ff;
-}
-.input_div {
-  height: 48px;
-  margin-bottom: 48px;
-}
-.radios {
-  display: flex;
-
-  margin-right: 422px;
-}
-.radio {
-  margin-left: 43px;
-  width: 20px;
-  height: 20px;
-}
-label {
-  font-size: 18px;
-  color: #454545;
-}
-.age {
-  margin-right: 508px;
-  width: 78px;
-  height: 48px;
-  border: 1px solid #bdc8d3;
-  border-radius: 5px;
-  color: #454545;
-  font-size: 18px;
-}
-.sumbit_btn {
-  width: 182px;
-  height: 56px;
-  color: white;
-  font-size: 20px;
-  border-radius: 5px;
-  background-color: #0788ff;
-  align-self: flex-end;
-}
-
-/* 회원 탈퇴 */
-.withdrawal {
-  align-self: center;
-  margin-top: 48px;
-  border-top: 1px solid #0679ff;
-  width: 1030px;
-}
-
-.withdrawal_btn {
-  color: #0679ff;
-  font-size: 18px;
-  margin-top: 21px;
-}
diff --git a/frontend/src/css/WriteDiaryPage.css b/frontend/src/css/WriteDiaryPage.css
new file mode 100644
index 0000000..862e045
--- /dev/null
+++ b/frontend/src/css/WriteDiaryPage.css
@@ -0,0 +1,134 @@
+body {
+  width: 1670px;
+  margin-bottom: 46px;
+}
+.write_diary_page {
+  width: 1670px;
+  display: flex;
+  flex-direction: column;
+}
+
+input[type="file"] {
+  /* 파일 필드 숨기기 */
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
+/* 일기 헤더 */
+.header {
+  height: 114px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid #0679ff;
+}
+
+.page_title {
+  font-size: 24px;
+  color: black;
+  margin-left: 72px;
+}
+
+.tip {
+  font-size: 15px;
+  color: #767678;
+  margin-right: 101px;
+  margin-top: 23px;
+}
+
+/* 일기 작성 */
+
+.main_body {
+  width: 1316px;
+  align-self: center;
+  display: flex;
+  flex-direction: column;
+}
+
+.input_header_div {
+  margin-top: 40px;
+  margin-bottom: 29px;
+  display: flex;
+  justify-content: space-between;
+}
+.input_header_title {
+  font-size: 18px;
+  color: #0679ff;
+}
+.input_header_timestmap {
+  font-size: 13px;
+  color: #767678;
+}
+
+/* 일기 제목 입력 */
+.diary_title_input {
+  border: 1px solid #0679ff;
+  background-color: #eaf4ff;
+  border-radius: 10px;
+  height: 59px;
+  font-size: 16px;
+  padding-left: 27px;
+}
+
+/* 일기 내용 입력 */
+.diary_text_input {
+  resize: none;
+  border: 1px solid #0679ff;
+  border-radius: 10px;
+  height: 453px;
+  font-size: 15px;
+  padding-left: 27px;
+  padding-top: 24px;
+}
+.diary_text_input:focus {
+  outline: none !important;
+}
+
+/* 일기 사진 첨부 */
+.diary_image_input {
+  border: 1px solid #0679ff;
+  background-color: #eaf4ff;
+  color: #767678;
+  border-radius: 10px;
+  height: 59px;
+  display: flex;
+  align-items: center;
+  font-size: 15px;
+  padding-left: 27px;
+}
+.diary_image_input p {
+  margin-left: 5px;
+}
+
+/* 일기 제출 */
+.diary_buttons {
+  margin-top: 28px;
+  margin-bottom: 28px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.cancel_btn {
+  font-size: 18px;
+  color: #0679ff;
+  display: flex;
+  align-items: center;
+}
+.cancel_btn p {
+  margin-left: 4px;
+}
+
+.submit_btn {
+  width: 168px;
+  height: 52px;
+  background-color: #0788ff;
+  color: white;
+  border-radius: 10px;
+  font-size: 18px;
+}
diff --git a/frontend/src/images/calendar_icon.svg b/frontend/src/images/calendar_icon.svg
deleted file mode 100644
index 85afea6..0000000
--- a/frontend/src/images/calendar_icon.svg
+++ /dev/null
@@ -1,12 +0,0 @@
-<svg
-      width="18"
-      height="22"
-      viewBox="0 0 18 22"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M0.482143 7.93278H17.5179C17.783 7.93278 18 8.15589 18 8.42858V19.1709C18 20.2658 17.1362 21.1541 16.0714 21.1541H1.92857C0.863839 21.1541 0 20.2658 0 19.1709V8.42858C0 8.15589 0.216964 7.93278 0.482143 7.93278ZM18 6.11485V4.62746C18 3.53257 17.1362 2.64426 16.0714 2.64426H14.1429V0.495799C14.1429 0.22311 13.9259 0 13.6607 0H12.0536C11.7884 0 11.5714 0.22311 11.5714 0.495799V2.64426H6.42857V0.495799C6.42857 0.22311 6.21161 0 5.94643 0H4.33929C4.07411 0 3.85714 0.22311 3.85714 0.495799V2.64426H1.92857C0.863839 2.64426 0 3.53257 0 4.62746V6.11485C0 6.38754 0.216964 6.61065 0.482143 6.61065H17.5179C17.783 6.61065 18 6.38754 18 6.11485Z"
-        fill="#0679FF"
-      />
-    </svg>
\ No newline at end of file
diff --git a/frontend/src/images/camera_icon.svg b/frontend/src/images/camera_icon.svg
deleted file mode 100644
index 89a9c88..0000000
--- a/frontend/src/images/camera_icon.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="29" height="27" viewBox="0 0 29 27" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M29 6.75V24.1071C29 25.7042 27.7822 27 26.2812 27H2.71875C1.21777 27 0 25.7042 0 24.1071V6.75C0 5.1529 1.21777 3.85714 2.71875 3.85714H7.70312L8.39981 1.87433C8.79629 0.747321 9.81016 0 10.943 0H18.0514C19.1842 0 20.198 0.747321 20.5945 1.87433L21.2969 3.85714H26.2812C27.7822 3.85714 29 5.1529 29 6.75ZM21.2969 15.4286C21.2969 11.4388 18.2496 8.19643 14.5 8.19643C10.7504 8.19643 7.70312 11.4388 7.70312 15.4286C7.70312 19.4183 10.7504 22.6607 14.5 22.6607C18.2496 22.6607 21.2969 19.4183 21.2969 15.4286ZM19.4844 15.4286C19.4844 18.3516 17.2471 20.7321 14.5 20.7321C11.7529 20.7321 9.51562 18.3516 9.51562 15.4286C9.51562 12.5056 11.7529 10.125 14.5 10.125C17.2471 10.125 19.4844 12.5056 19.4844 15.4286Z" fill="#0679FF"/>
-</svg>
diff --git a/frontend/src/images/image_icon.svg b/frontend/src/images/image_icon.svg
new file mode 100644
index 0000000..2c3c40b
--- /dev/null
+++ b/frontend/src/images/image_icon.svg
@@ -0,0 +1,3 @@
+<svg width="28" height="22" viewBox="0 0 28 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.3333 18.8571V19.6429C23.3333 20.9447 22.2887 22 21 22H2.33333C1.04465 22 0 20.9447 0 19.6429V7.07143C0 5.7696 1.04465 4.71429 2.33333 4.71429H3.11111V14.9286C3.11111 17.0948 4.85567 18.8571 7 18.8571H23.3333ZM28 14.9286V2.35714C28 1.05531 26.9553 0 25.6667 0H7C5.71132 0 4.66667 1.05531 4.66667 2.35714V14.9286C4.66667 16.2304 5.71132 17.2857 7 17.2857H25.6667C26.9553 17.2857 28 16.2304 28 14.9286ZM12.4444 4.71429C12.4444 6.01612 11.3998 7.07143 10.1111 7.07143C8.82243 7.07143 7.77778 6.01612 7.77778 4.71429C7.77778 3.41246 8.82243 2.35714 10.1111 2.35714C11.3998 2.35714 12.4444 3.41246 12.4444 4.71429ZM7.77778 11.7857L10.4764 9.05953C10.7042 8.82942 11.0736 8.82942 11.3014 9.05953L13.2222 11L19.8098 4.34525C20.0375 4.11513 20.4069 4.11513 20.6347 4.34525L24.8889 8.64286V14.1429H7.77778V11.7857Z" fill="#0788FF"/>
+</svg>
diff --git a/frontend/src/images/left_arrow.svg b/frontend/src/images/left_arrow.svg
new file mode 100644
index 0000000..4a5bdae
--- /dev/null
+++ b/frontend/src/images/left_arrow.svg
@@ -0,0 +1,3 @@
+<svg width="19" height="16" viewBox="0 0 19 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.5005 7.99993L1.0002 7.99996M1.0002 7.99996L8.08893 1.16436M1.0002 7.99996L7.8358 15.0887" stroke="#0679FF"/>
+</svg>
diff --git a/frontend/src/images/withdrawl_icon.svg b/frontend/src/images/withdrawl_icon.svg
deleted file mode 100644
index 19a9f41..0000000
--- a/frontend/src/images/withdrawl_icon.svg
+++ /dev/null
@@ -1,9 +0,0 @@
-<svg
-      width="20"
-      height="9"
-      viewBox="0 0 20 9"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path d="M0 8H19L14.25 1" stroke="#0679FF" />
-    </svg>
\ No newline at end of file

From 76b7b3a03a4debb0f359e163d848a20510b5bc6a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=8A=A4=ED=82=A4=ED=86=A0?=
 <39672943+honeybugs@users.noreply.github.com>
Date: Tue, 23 Aug 2022 20:30:27 +0900
Subject: [PATCH 2/4] Delete EditProfilePage.jsx

---
 frontend/src/EditProfilePage.jsx | 270 -------------------------------
 1 file changed, 270 deletions(-)
 delete mode 100644 frontend/src/EditProfilePage.jsx

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 (
-    <div className="body">
-      <header className="my_page_title">마이페이지</header>
-      <div className="main_body">
-        <div className="profile_body">
-          <img
-            className="profile_image"
-            alt="profile"
-            src={profile_data["profile_image"]}
-          />
-          <p className="profile_nickname">{profile_data["nickname"]}</p>
-          <p className="profile_email">{profile_data["email"]}</p>
-          <div>
-            <button className="profile_edit_btn">내 정보 수정</button>
-          </div>
-          <div className="profile_navibar">
-            <button className="navi_btn">내 정보</button>
-            <button className="navi_btn">제로웨이스트 캘린더</button>
-            <button className="navi_btn">제로웨이스트 일기</button>
-          </div>
-        </div>
-        <div className="edit_profile">
-          <p className="edit_profile_title">내 정보 수정</p>
-          <div className="edit_profile_main">
-            <p className="profile_input_tag">프로필 이미지 변경</p>
-            <div className="profile_image_margin">
-              <img
-                className="profile_image"
-                alt="profile"
-                src={edtiting_profile_data["profile_image"]}
-              />
-
-              <label className="camera_upload_button" for="profile_upload">
-                <img
-                  className="camera_icon"
-                  src={camera_icon}
-                  alt="upload_button"
-                />
-              </label>
-              <input
-                type="file"
-                accept="image/jpg,impge/png,image/jpeg"
-                id="profile_upload"
-                className="profile_upload"
-                onChange={change_profile_image}
-              />
-            </div>
-            <div className="input_div">
-              <p className="input_tag">성명 *</p>
-              <input
-                className="input_text"
-                value={edtiting_profile_data["name"]}
-                onChange={(e) =>
-                  set_edtiting_profile_data({
-                    ...edtiting_profile_data,
-                    name: e.target.value,
-                  })
-                }
-              />
-            </div>
-            <div className="input_div">
-              <p className="input_tag">닉네임 *</p>
-              <input
-                className="input_text"
-                value={edtiting_profile_data["nickname"]}
-                onChange={(e) =>
-                  set_edtiting_profile_data({
-                    ...edtiting_profile_data,
-                    nickname: e.target.value,
-                  })
-                }
-              />
-            </div>
-            <div className="input_div">
-              <p className="input_tag">이메일 *</p>
-              <input
-                type="email"
-                className="input_text"
-                value={edtiting_profile_data["email"]}
-                onChange={(e) =>
-                  set_edtiting_profile_data({
-                    ...edtiting_profile_data,
-                    email: e.target.value,
-                  })
-                }
-              />
-            </div>
-            <div className="input_div">
-              <p className="input_tag">비밀번호 *</p>
-              <input
-                className="input_text"
-                value={edtiting_profile_data["password"]}
-                onChange={(e) =>
-                  set_edtiting_profile_data({
-                    ...edtiting_profile_data,
-                    password: e.target.value,
-                  })
-                }
-              />
-            </div>
-            <div className="input_div">
-              <p className="input_tag">연락처 *</p>
-              <input
-                className="input_text"
-                value={edtiting_profile_data["phone_number"]}
-                onChange={change_phone_number}
-              />
-            </div>
-            <div className="input_div">
-              <p className="input_tag">성별</p>
-              <div className="radios">
-                <div>
-                  <input
-                    id="male"
-                    value="male"
-                    name="gender"
-                    type="radio"
-                    className="radio"
-                    checked={edtiting_profile_data["gender"] === "male"}
-                    onChange={() =>
-                      set_edtiting_profile_data({
-                        ...edtiting_profile_data,
-                        gender: "male",
-                      })
-                    }
-                  />
-                  <label>남성</label>
-                </div>
-                <div>
-                  <input
-                    id="female"
-                    value="female"
-                    name="gender"
-                    type="radio"
-                    className="radio"
-                    checked={edtiting_profile_data["gender"] === "female"}
-                    onChange={() =>
-                      set_edtiting_profile_data({
-                        ...edtiting_profile_data,
-                        gender: "female",
-                      })
-                    }
-                  />
-                  <label>여성</label>
-                </div>
-              </div>
-            </div>
-            <div className="input_div">
-              <p className="input_tag">나이</p>
-              <input
-                type="number"
-                className="input_text"
-                value={edtiting_profile_data["age"]}
-                onChange={(e) =>
-                  set_edtiting_profile_data({
-                    ...edtiting_profile_data,
-                    age: e.target.value,
-                  })
-                }
-              />
-            </div>
-            <div className="input_div">
-              <p className="input_tag">생년원일</p>
-              <input
-                className="input_text"
-                type="date"
-                value={edtiting_profile_data["birth"]
-                  .toISOString()
-                  .slice(0, 10)}
-                onChange={(e) =>
-                  set_edtiting_profile_data({
-                    ...edtiting_profile_data,
-                    birth: new Date(e.target.value),
-                  })
-                }
-              />
-            </div>
-            <button className="sumbit_btn">완료</button>
-          </div>
-          <div className="withdrawal">
-            <button className="withdrawal_btn" onChange={withdrawal_event}>
-              탈퇴하기 <img src={withdrawl_icon} alt="withdrawl_icon"/>
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default EditProfilePage;

From 42b2d59fbccaa49d8eaff0a3090a6171a9a3ffae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=8A=A4=ED=82=A4=ED=86=A0?=
 <39672943+honeybugs@users.noreply.github.com>
Date: Sun, 28 Aug 2022 14:34:04 +0900
Subject: [PATCH 3/4] [DESIGN] Responsive

---
 frontend/src/css/WriteDiaryPage.css | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/frontend/src/css/WriteDiaryPage.css b/frontend/src/css/WriteDiaryPage.css
index 862e045..021bd82 100644
--- a/frontend/src/css/WriteDiaryPage.css
+++ b/frontend/src/css/WriteDiaryPage.css
@@ -1,9 +1,10 @@
 body {
-  width: 1670px;
+  max-width: 1670px;
   margin-bottom: 46px;
 }
 .write_diary_page {
-  width: 1670px;
+  width: 86.97%;
+  max-width: 1670px;
   display: flex;
   flex-direction: column;
 }
@@ -45,7 +46,8 @@ input[type="file"] {
 /* 일기 작성 */
 
 .main_body {
-  width: 1316px;
+  width: 78.80%;
+  max-width: 1316px;
   align-self: center;
   display: flex;
   flex-direction: column;
@@ -84,7 +86,9 @@ input[type="file"] {
   height: 453px;
   font-size: 15px;
   padding-left: 27px;
+  padding-right: 27px;
   padding-top: 24px;
+  padding-bottom: 24px;
 }
 .diary_text_input:focus {
   outline: none !important;

From 789c4094165ebd764a0ed5678a73b60c5496552f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=8A=A4=ED=82=A4=ED=86=A0?=
 <39672943+honeybugs@users.noreply.github.com>
Date: Sun, 28 Aug 2022 14:37:49 +0900
Subject: [PATCH 4/4] [FEAT] add Django Image URL

---
 frontend/src/WriteDiaryPage.jsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/frontend/src/WriteDiaryPage.jsx b/frontend/src/WriteDiaryPage.jsx
index b496d75..18391a1 100644
--- a/frontend/src/WriteDiaryPage.jsx
+++ b/frontend/src/WriteDiaryPage.jsx
@@ -56,6 +56,7 @@ function WriteDiaryPage() {
         />
         <label for="images_upload" className="diary_image_input">
           <img src={image_icon_svg} alt="image_icon" />
+          {/* <img src={`/static/image_icon.svg`} alt="image_icon" /> */}
           <p>이미지 첨부</p>
         </label>
         <input
@@ -68,6 +69,7 @@ function WriteDiaryPage() {
         <div className="diary_buttons">
           <button className="cancel_btn">
             <img src={arrow_svg} alt="left_arrow" />
+            {/* <img src={`/static/left_arrow.svg`} alt="left_arrow" /> */}
             <p>작성 취소</p>
           </button>
           <button className="submit_btn">