diff --git a/src/App.js b/src/App.js
index 179794b..f96158b 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,21 +1,21 @@
 import React from "react";
 //import { RecoilRoot } from "recoil";
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
-
 import Main from "./routes/Main";
 import SignUp from "./routes/signUp";
 import SignIn from "./routes/signIn";
-import SignUp2 from "./routes/signUp2";
+import Mypage from "./routes/mypage";
+import Post from "./routes/Post";
 
 function App() {
   return (
     <Router>
       <Routes>
-
         <Route path="/" element={<Main />} />
         <Route path="/signin" element={<SignIn />} />
         <Route path="/signup" element={<SignUp />} />
-        <Route path="/signup2" element={<SignUp2 />} />
+        <Route path="/mypage" element={<Mypage />} />
+        <Route path="/post" element={<Post />} />
       </Routes>
     </Router>
   );
diff --git a/src/components/css/Nav.module.css b/src/components/css/Nav.module.css
index 529f9be..b52e0ca 100644
--- a/src/components/css/Nav.module.css
+++ b/src/components/css/Nav.module.css
@@ -3,9 +3,18 @@
   height: 72px;
   display: flex;
   align-items: center;
-  
 }
-
+.wrapMain {
+  width: 100vw;
+  height: 400px;
+  display: flex;
+  align-items: center;
+  background-image: none, url(../img/mainBackground.png);
+}
+.link {
+  text-decoration: none;
+  margin-right: 30px;
+}
 .menuBox {
   display: flex;
   height: 24px;
@@ -14,8 +23,10 @@
   width: 40px;
   height: 40px;
   cursor: pointer;
-  margin-left: 10vw;
-  margin-right: 10vw;
+  margin-left: 1vw;
+  font-size: 25px;
+  font-family: "Times New Roman", Times, serif;
+  color: #888888;
 }
 .menu {
   display: flex;
@@ -34,8 +45,6 @@
   justify-content: space-between;
   right: 50px;
   position: absolute;
-  
-  
 }
 button {
   width: 100px;
@@ -54,9 +63,9 @@ button {
   color: black;
 }
 
-.logout{
-margin-left: 10px;
+.logout {
+  margin-left: 10px;
 }
-.logout:hover{
+.logout:hover {
   cursor: pointer;
-}
\ No newline at end of file
+}
diff --git a/src/components/img/mainBackground.png b/src/components/img/mainBackground.png
new file mode 100644
index 0000000..329bde5
Binary files /dev/null and b/src/components/img/mainBackground.png differ
diff --git a/src/components/js/Nav.js b/src/components/js/Nav.js
index f06b8de..c5ff981 100644
--- a/src/components/js/Nav.js
+++ b/src/components/js/Nav.js
@@ -1,44 +1,62 @@
+import { useParams } from "react-router-dom/dist";
 import NavStyle from "../css/Nav.module.css";
 import comoLogo from "../img/background.png";
 import { Link } from "react-router-dom";
 import { useNavigate } from "react-router-dom";
 function Nav() {
-  const navigate= useNavigate();
+  const navigate = useNavigate();
+  const param = useParams();
+
   let accessToken = localStorage.accessToken;
-  const handleLogout = ()=>{
-    localStorage.setItem("accessToken","")
-    accessToken ="";
-    navigate('')
-  }
+  const handleLogout = () => {
+    localStorage.setItem("accessToken", "");
+    accessToken = "";
+    navigate("");
+  };
   return (
     <div className={NavStyle.wrap}>
       <Link to="/" className={NavStyle.link}>
-        <img src={comoLogo} className={NavStyle.logo}></img>
+        <div style={{ margin: "0 20px 0 20px" }}>
+          <flex style={{ color: "black" }} className={NavStyle.logo}>
+            C
+          </flex>
+          <flex className={NavStyle.logo}>O</flex>
+          <flex style={{ color: "black" }} className={NavStyle.logo}>
+            M
+          </flex>
+          <flex className={NavStyle.logo}>O</flex>
+        </div>
       </Link>
       <div className={NavStyle.menuBox}>
         <Link to="/" style={{ textDecoration: "none" }}>
           <flex className={NavStyle.menu}>Home</flex>
         </Link>
-        <flex className={NavStyle.menu}>get post</flex>
-        <flex className={NavStyle.menu}>event</flex>
-        <flex className={NavStyle.menu}>My page</flex>
-      </div>
-
-
-      {accessToken === ""?
-      <div className={NavStyle.loginBox}>
-        <Link to="/signin">
-          <button className={NavStyle.login}>Log in</button>
-        </Link>
-        <Link to="/signup">
-          <button className={NavStyle.signup}>Sign up</button>
+        <Link to="/post" style={{ textDecoration: "none" }}>
+          <flex className={NavStyle.menu}>Post</flex>
         </Link>
-      </div>:
-      <div>
-      <span> 마이페이지 </span>
-      <span className={NavStyle.logout} onClick={handleLogout}> 로그아웃 </span>
+        <flex className={NavStyle.menu}>Event</flex>
       </div>
-  }
+
+      {accessToken === "" ? (
+        <div className={NavStyle.loginBox}>
+          <Link to="/signin">
+            <button className={NavStyle.login}>Log in</button>
+          </Link>
+          <Link to="/signup">
+            <button className={NavStyle.signup}>Sign up</button>
+          </Link>
+        </div>
+      ) : (
+        <div className={NavStyle.loginBox}>
+          <Link to="/mypage">
+            <button className={NavStyle.login}>마이페이지</button>
+          </Link>
+          <button className={NavStyle.signup} onClick={handleLogout}>
+            {" "}
+            로그아웃{" "}
+          </button>
+        </div>
+      )}
     </div>
   );
 }
diff --git a/src/components/js/signInBox.js b/src/components/js/signInBox.js
index 40a6553..68e825b 100644
--- a/src/components/js/signInBox.js
+++ b/src/components/js/signInBox.js
@@ -15,12 +15,14 @@ function SignInBox() {
     axios
       .post("/user/sign-in", { username: id, password: pw })
       .then((res) => {
-        localStorage.setItem("accessToken",res.data)
+        console.log(res);
+        localStorage.setItem("accessToken", res.data);
         console.log("로그인 성공:", res.data);
-        navigate('/');
+        navigate("/");
       })
       .catch((error) => {
-        console.log("잘못된 이메일 또는 비밀번호입니다."); // 로그인 실패 시 처리 (예: 에러 메시지 표시)
+        console.log(error);
+        alert("잘못된 id 또는 비밀번호입니다."); // 로그인 실패 시 처리 (예: 에러 메시지 표시)
       });
   };
 
diff --git a/src/components/js/signUpBox.js b/src/components/js/signUpBox.js
index 494a69b..e56424d 100644
--- a/src/components/js/signUpBox.js
+++ b/src/components/js/signUpBox.js
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
 import styles from "../css/signUp.module.css";
 import axios from "axios";
 import { Link } from "react-router-dom";
-import {useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 
 const SignUpBox = () => {
   const navigate = useNavigate();
@@ -10,13 +10,13 @@ const SignUpBox = () => {
   const [lecoAgreed, setLecoAgreed] = useState(false);
   const [infoAgreed, setInfoAgreed] = useState(false);
   const [eventAgreed, setEventAgreed] = useState(false);
+  const [page, setPage] = useState(true);
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
   const [checkedPassword, setCheckedPassword] = useState("");
   const [nickname, setNickname] = useState("");
   const [email, setEmail] = useState("");
-
- 
+  const [passwordChecking, setPasswordChecking] = useState(false);
   const handleUsernameChange = (e) => {
     setUsername(e.target.value);
   };
@@ -25,55 +25,95 @@ const SignUpBox = () => {
   };
   const handleCheckedPasswordChange = (e) => {
     setCheckedPassword(e.target.value);
+    console.log(password, checkedPassword);
   };
   const handleIdChange = (e) => {
     setNickname(e.target.value);
   };
   const handleEmailChange = (e) => {
+    console.log(e);
     setEmail(e.target.value);
   };
+  const signUpInfo = [nickname, username, password, email];
+  useEffect(() => {
+    console.log(password, checkedPassword, passwordChecking);
+    if (checkedPassword === password) {
+      setPasswordChecking(true);
+    } else {
+      setPasswordChecking(false);
+    }
+  }, [checkedPassword, password]);
 
-  // const handleAllAgreedChange = (e) => {
-  //   setAllAgreed(e.target.checked);
-  //   setLecoAgreed(e.target.checked);
-  //   setInfoAgreed(e.target.checked);
-  //   setEventAgreed(e.target.checked);
-  // };
+  const handlePage = () => {
+    let isEmpty = false;
+    const pattern1 = /[0-9]/; // 숫자
+    const pattern2 = /[a-zA-Z]/; // 문자
+    const pattern3 = /[~!@#$%^&*()_+|<>?:{}]/; // 특수문자
 
-  // const allCheck = () => {
-  //   if (allAgreed === false) {
-  //     setAllAgreed(true);
-  //     setLecoAgreed(true);
-  //     setInfoAgreed(true);
-  //     setEventAgreed(true);
-  //   } else {
-  //     setAllAgreed(false);
-  //     setLecoAgreed(false);
-  //     setInfoAgreed(false);
-  //     setEventAgreed(false);
-  //   }
-  // };
-  // const lecoCheck = () => {
-  //   if (lecoAgreed === false) {
-  //     setLecoAgreed(true);
-  //   } else {
-  //     setLecoAgreed(false);
-  //   }
-  // };
-  // const infoCheck = () => {
-  //   if (infoAgreed === false) {
-  //     setInfoAgreed(true);
-  //   } else {
-  //     setInfoAgreed(false);
-  //   }
-  // };
-  // const eventCheck = () => {
-  //   if (eventAgreed === false) {
-  //     setEventAgreed(true);
-  //   } else {
-  //     setEventAgreed(false);
-  //   }
-  // };
+    signUpInfo.map((prop) => {
+      if (prop === "") {
+        isEmpty = true;
+      }
+    });
+    if (isEmpty == true) {
+      alert("정보를 모두 기입해주세요.");
+    } else if (
+      nickname.length < 2 ||
+      !pattern1.test(password) ||
+      !pattern2.test(password) ||
+      !pattern3.test(password)
+    ) {
+      alert("올바른 형식의 정보를 입력해주세요.");
+    } else {
+      setPage(!page);
+    }
+  };
+  const handlePageBack = () => {
+    setPage(!page);
+    setCheckedPassword("");
+  };
+  const handleAllAgreedChange = (e) => {
+    setAllAgreed(e.target.checked);
+    setLecoAgreed(e.target.checked);
+    setInfoAgreed(e.target.checked);
+    setEventAgreed(e.target.checked);
+  };
+
+  const allCheck = () => {
+    if (allAgreed === false) {
+      setAllAgreed(true);
+      setLecoAgreed(true);
+      setInfoAgreed(true);
+      setEventAgreed(true);
+    } else {
+      setAllAgreed(false);
+      setLecoAgreed(false);
+      setInfoAgreed(false);
+      setEventAgreed(false);
+    }
+  };
+  const lecoCheck = () => {
+    console.log(password, checkedPassword, passwordChecking);
+    if (lecoAgreed === false) {
+      setLecoAgreed(true);
+    } else {
+      setLecoAgreed(false);
+    }
+  };
+  const infoCheck = () => {
+    if (infoAgreed === false) {
+      setInfoAgreed(true);
+    } else {
+      setInfoAgreed(false);
+    }
+  };
+  const eventCheck = () => {
+    if (eventAgreed === false) {
+      setEventAgreed(true);
+    } else {
+      setEventAgreed(false);
+    }
+  };
   useEffect(() => {
     if (lecoAgreed === true && infoAgreed === true && eventAgreed === true)
       setAllAgreed(true);
@@ -105,72 +145,176 @@ const SignUpBox = () => {
       })
       .catch((error) => {
         console.log(error);
-        alert("회원가입에 실패했습니다.");
+        alert(error.response.data.err);
+        setPage(!page);
       });
   };
 
-  //console.log(allAgreed);
-
   return (
     <div className={styles.wrap}>
-
       <div className={styles.background}>
         <div className={styles.setForm}>
-          <div className={styles.titleBox}>
-            <h3 className={styles.title}>COMO 회원가입 1/2</h3>
-          </div>
+          {page === true ? (
+            <div>
+              <div className={styles.titleBox}>
+                <h3 className={styles.title}>COMO 회원가입 1/2</h3>
+              </div>
+              <form className={styles.inputForm}>
+                <div className={styles.inputName}>이름</div>
+                <input
+                  value={username}
+                  onChange={handleUsernameChange}
+                  name="name"
+                  placeholder="이름(두글자 이상)"
+                  className={styles.inputs}
+                />
+                <div className={styles.inputName}>아이디 ID</div>
+                <input
+                  value={nickname}
+                  onChange={handleIdChange}
+                  name="id"
+                  placeholder="아이디"
+                  className={styles.inputs}
+                />
+                <div className={styles.inputName}>비밀번호 Password</div>
+                <input
+                  value={password}
+                  onChange={handlePasswordChange}
+                  name="pw"
+                  type="password"
+                  placeholder="비밀번호(8자리 이상, 1개 이상의 알파벳, 숫자, 특수문자 포함)"
+                  className={styles.inputs}
+                />
+                <div className={styles.inputName}>
+                  비밀번호 확인 Password Check
+                </div>
 
-          <form className={styles.inputForm}>
-            <div className={styles.inputName}>이름</div>
-            <input
-              onChange={handleUsernameChange}
-              name="name"
-              placeholder="이름"
-              className={styles.inputs}
-            />
-            <div className={styles.inputName}>아이디 ID</div>
-            <input
-              onChange={handleIdChange}
-              name="id"
-              placeholder="아이디"
-              className={styles.inputs}
-            />
-            <div className={styles.inputName}>비밀번호 Password</div>
-            <input
-              onChange={handlePasswordChange}
-              name="pw"
-              type="password"
-              placeholder="비밀번호"
-              className={styles.inputs}
-            />
-            <div className={styles.inputName}>비밀번호 확인 Password Check</div>
-            <input
-              onChange={handleCheckedPasswordChange}
-              name="pw"
-              type="password"
-              placeholder="비밀번호 확인"
-              className={styles.inputs}
-            />
-            <div className={styles.inputName}>
-              <span>이메일</span>{" "}
+                <input
+                  onChange={handleCheckedPasswordChange}
+                  name="pw"
+                  type="password"
+                  placeholder="비밀번호 확인"
+                  className={styles.inputs}
+                />
+                {checkedPassword === "" ? (
+                  ""
+                ) : passwordChecking === false ? (
+                  <div style={{ color: "red" }}>비밀번호가 다릅니다.</div>
+                ) : (
+                  <div style={{ color: "blue" }}>비밀번호가 일치합니다.</div>
+                )}
+
+                <div className={styles.inputName}>
+                  <span>이메일</span>{" "}
+                </div>
+                <input
+                  value={email}
+                  onChange={handleEmailChange}
+                  className={styles.inputs}
+                  name="id"
+                  placeholder="이메일"
+                />
+              </form>
             </div>
-            <input
-              onChange={handleEmailChange}
-              className={styles.inputs}
-              name="id"
-              placeholder="이메일"
-            />
-          </form>
+          ) : (
+            <div>
+              <button
+                style={{
+                  position: "absolute",
+                  marginTop: "20px",
+                  marginLeft: "10px",
+                  fontSize: "40px",
+                }}
+                onClick={handlePageBack}
+              >
+                {"<"}
+              </button>
+              <div className={styles.titleBox}>
+                <h3 className={styles.title}>COMO 회원가입 2/2</h3>
+              </div>
 
+              <ul className={styles.terms_list}>
+                <li className={styles.check}>
+                  <div className={styles.terms_set}>
+                    <input
+                      type="checkbox"
+                      className={styles.checkbox}
+                      onClick={allCheck}
+                      checked={allAgreed}
+                    />
+                    <span className={styles.checktext}> 전체 동의하기</span>
+                    <div className={styles.terms_box_all}>
+                      <p>....</p>
+                    </div>
+                  </div>
+                </li>
+                <li className={styles.check}>
+                  <div className={styles.terms_set}>
+                    <input
+                      type="checkbox"
+                      className={styles.checkbox}
+                      onClick={lecoCheck}
+                      checked={lecoAgreed}
+                    />
+                    <span className={styles.checktext}>
+                      <span className={styles.color}> [필수]</span> vvv 이용약관
+                    </span>
+                  </div>
+                  <div className={styles.terms_box}>
+                    <p>....</p>
+                  </div>
+                </li>
+                <li className={styles.check}>
+                  <div className={styles.terms_set}>
+                    <input
+                      type="checkbox"
+                      className={styles.checkbox}
+                      onClick={infoCheck}
+                      checked={infoAgreed}
+                    />
+                    <span className={styles.checktext}>
+                      <span className={styles.color}> [필수]</span> 개인정보
+                      수집 및 이용
+                    </span>
+                  </div>
+                  <div className={styles.terms_box}>
+                    <p>....</p>
+                  </div>
+                </li>
+                <li className={styles.check}>
+                  <div className={styles.terms_set}>
+                    <input
+                      type="checkbox"
+                      className={styles.checkbox}
+                      onClick={eventCheck}
+                      checked={eventAgreed}
+                    />
+                    <span className={styles.checktext}>
+                      <span className={styles.color2}> [선택]</span>
+                      이벤트 • 혜택 정보수신
+                    </span>
+                  </div>
+                  <div className={styles.terms_box}>
+                    <p>....</p>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          )}
 
-         
           <div className={styles.btnBox}>
-        
-
-          <button  className={styles.btn} onClick={handleSubmit}>다음</button>
-              {/* <Link to ="/signup2" style={{textDecoration:"none", color:"white"}}>
+            {page === true ? (
+              <button className={styles.btn} onClick={handlePage}>
+                다음
+              </button>
+            ) : (
+              <button onClick={handleSubmit} className={styles.btn}>
+                회원가입하기
+              </button>
+            )}
+            {/* <Link to ="/signup2" style={{textDecoration:"none", color:"white"}}>
               <button  className={styles.btn} onClick={handleSubmit}>다음</button></Link> */}
-            
+
             <br />
             <div className={styles.backSignIn}>
               <Link to="/signin" className={styles.backText}>
diff --git a/src/components/js/signUpBox2.js b/src/components/js/signUpBox2.js
deleted file mode 100644
index 725bbac..0000000
--- a/src/components/js/signUpBox2.js
+++ /dev/null
@@ -1,185 +0,0 @@
-import styles from "../css/signUp.module.css";
-import { Link } from "react-router-dom";
-import axios from "axios";
-
-const { useState, useEffect } = require("react");
-
-function SignUpBox2() {
-  const [allAgreed, setAllAgreed] = useState(false);
-  const [lecoAgreed, setLecoAgreed] = useState(false);
-  const [infoAgreed, setInfoAgreed] = useState(false);
-  const [eventAgreed, setEventAgreed] = useState(false);
-  const [username, setUsername] = useState("");
-  const [password, setPassword] = useState("");
-  const [id, setId] = useState("");
-  const [email, setEmail] = useState("");
-  // const handleEmailChange = (e) => {
-  //   setEmail(e.target.value);
-  // };
-  // const handleUsernameChange = (e) => {
-  //   setUsername(e.target.value);
-  // };
-
-  // const handlePasswordChange = (e) => {
-  //   setPassword(e.target.value);
-  // };
-  // const handleIdChange = (e) => {
-  //   setId(e.target.value);
-  // };
-  const allCheck = () => {
-    if (allAgreed === false) {
-      setAllAgreed(true);
-      setLecoAgreed(true);
-      setInfoAgreed(true);
-      setEventAgreed(true);
-    } else {
-      setAllAgreed(false);
-      setLecoAgreed(false);
-      setInfoAgreed(false);
-      setEventAgreed(false);
-    }
-  };
-  const lecoCheck = () => {
-    if (lecoAgreed === false) {
-      setLecoAgreed(true);
-    } else {
-      setLecoAgreed(false);
-    }
-  };
-  const infoCheck = () => {
-    if (infoAgreed === false) {
-      setInfoAgreed(true);
-    } else {
-      setInfoAgreed(false);
-    }
-  };
-  const eventCheck = () => {
-    if (eventAgreed === false) {
-      setEventAgreed(true);
-    } else {
-      setEventAgreed(false);
-    }
-  };
-  useEffect(() => {
-    if (lecoAgreed === true && infoAgreed === true && eventAgreed === true)
-      setAllAgreed(true);
-    else setAllAgreed(false);
-  }, [lecoAgreed, infoAgreed, eventAgreed]);
-  const handleSubmit = () => {
-    const userData = {
-      username: id,
-      password: password,
-      checkedPassword: password,
-      nickname: username,
-      email: email,
-    };
-    axios
-      .post(
-        `ec2-3-35-3-165.ap-northeast-2.compute.amazonaws.com/user/sign-up`,
-        {
-          userData,
-        }
-      )
-      .then((res) => {
-        console.log("회원가입 성공", res.data);
-      })
-      .catch((error) => {
-        console.log("회원가입 실패");
-      });
-  };
-  console.log(allAgreed);
-
-  return (
-    <div className={styles.wrap}>
-
-      <div className={styles.background}>
-        <div className={styles.setForm}>
-          <div className={styles.titleBox}>
-            <h3 className={styles.title}>COMO 회원가입 2/2</h3>
-          </div>
-
-
-          <ul className={styles.terms_list}>
-            <li className={styles.check}>
-              <div className={styles.terms_set}>
-                <input
-                  type="checkbox"
-                  className={styles.checkbox}
-                  onClick={allCheck}
-                  checked={allAgreed}
-                />
-                <span className={styles.checktext}> 전체 동의하기</span>
-                <div className={styles.terms_box_all}>
-                  <p>....</p>
-                </div>
-              </div>
-            </li>
-            <li className={styles.check}>
-              <div className={styles.terms_set}>
-                <input
-                  type="checkbox"
-                  className={styles.checkbox}
-                  onClick={lecoCheck}
-                  checked={lecoAgreed}
-                />
-                <span className={styles.checktext}>
-                  <span className={styles.color}> [필수]</span> vvv 이용약관
-                </span>
-              </div>
-              <div className={styles.terms_box}>
-                <p>....</p>
-              </div>
-            </li>
-            <li className={styles.check}>
-              <div className={styles.terms_set}>
-                <input
-                  type="checkbox"
-                  className={styles.checkbox}
-                  onClick={infoCheck}
-                  checked={infoAgreed}
-                />
-                <span className={styles.checktext}>
-                  <span className={styles.color}> [필수]</span> 개인정보 수집 및
-                  이용
-                </span>
-              </div>
-              <div className={styles.terms_box}>
-                <p>....</p>
-              </div>
-            </li>
-            <li className={styles.check}>
-              <div className={styles.terms_set}>
-                <input
-                  type="checkbox"
-                  className={styles.checkbox}
-                  onClick={eventCheck}
-                  checked={eventAgreed}
-                />
-                <span className={styles.checktext}>
-                  <span className={styles.color2}> [선택]</span>
-                  이벤트 • 혜택 정보수신
-                </span>
-              </div>
-              <div className={styles.terms_box}>
-                <p>....</p>
-              </div>
-            </li>
-          </ul>
-          <div className={styles.btnBox}>
-            <button onClick={handleSubmit} className={styles.btn}>
-              회원가입하기
-            </button>
-            <br />
-            <div className={styles.backSignIn}>
-              <Link to="/signin" className={styles.backText}>
-                로그인 페이지로 돌아가기
-              </Link>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default SignUpBox2;
diff --git a/src/postStyle.module.css b/src/postStyle.module.css
new file mode 100644
index 0000000..c995cf3
--- /dev/null
+++ b/src/postStyle.module.css
@@ -0,0 +1,11 @@
+.totalPostingBox {
+  margin: 3vw;
+}
+
+.potingBox {
+  width: 300px;
+  height: 300px;
+  float: left;
+  border: solid 1px black;
+  margin-right: 40px;
+}
diff --git a/src/routes/Post.js b/src/routes/Post.js
new file mode 100644
index 0000000..45bd356
--- /dev/null
+++ b/src/routes/Post.js
@@ -0,0 +1,18 @@
+import Nav from "../components/js/Nav";
+import postStyle from "../postStyle.module.css";
+function Post() {
+  return (
+    <div>
+      <Nav />
+      <div className={postStyle.totalPostingBox}>
+        <h3>POSTING</h3>
+        <br></br>
+        <div className={postStyle.potingBox}>BOX</div>
+        <div className={postStyle.potingBox}>BOX</div>
+        <div className={postStyle.potingBox}>BOX</div>
+        <div className={postStyle.potingBox}>BOX</div>
+      </div>
+    </div>
+  );
+}
+export default Post;
diff --git a/src/routes/mypage.js b/src/routes/mypage.js
new file mode 100644
index 0000000..d48e0b4
--- /dev/null
+++ b/src/routes/mypage.js
@@ -0,0 +1,4 @@
+function mypage() {
+  return <h3>MYPAGE</h3>;
+}
+export default mypage;