diff --git a/public/assets/img/Environment_Detail.svg b/public/assets/img/Environment_Detail.svg
new file mode 100644
index 0000000..c977c5c
--- /dev/null
+++ b/public/assets/img/Environment_Detail.svg
@@ -0,0 +1,3 @@
+
diff --git a/public/assets/img/Environment_edit.svg b/public/assets/img/Environment_edit.svg
new file mode 100644
index 0000000..dee1fe3
--- /dev/null
+++ b/public/assets/img/Environment_edit.svg
@@ -0,0 +1,3 @@
+
diff --git "a/public/assets/img/Environment_\353\213\244\352\260\231\354\235\264.svg" "b/public/assets/img/Environment_\353\213\244\352\260\231\354\235\264.svg"
new file mode 100644
index 0000000..692d894
--- /dev/null
+++ "b/public/assets/img/Environment_\353\213\244\352\260\231\354\235\264.svg"
@@ -0,0 +1,51 @@
+
diff --git a/src/components/pages/environment/environment-left-page/EnvironmentLeftPage.js b/src/components/pages/environment/environment-left-page/EnvironmentLeftPage.js
new file mode 100644
index 0000000..0a8e287
--- /dev/null
+++ b/src/components/pages/environment/environment-left-page/EnvironmentLeftPage.js
@@ -0,0 +1,94 @@
+import React, { useState } from "react";
+import * as style from "@/components/pages/environment/environment-left-page/EnvironmentLeftPage.style";
+import Image from "next/image";
+
+export default function EnvironmentLeftPage() {
+ const [isModifyBoxVisible, setModifyBoxVisible] = useState(false);
+ const [password, setPassword] = useState("");
+
+ const handleButtonClick = (path) => {
+ window.location.href = `http://localhost:3000/${path}`;
+ };
+
+ const handleModifyClick = () => {
+ setModifyBoxVisible(!isModifyBoxVisible);
+ };
+
+ const handlePasswordChange = (event) => {
+ setPassword(event.target.value);
+ };
+
+ const handleLogout = () => {
+ localStorage.removeItem("authToken");
+ window.location.href = '/login';
+ };
+
+ return (
+
+ 안녕하세요, 해요님!
+
+ "assets/img/Environment_edit.svg"}
+ width={14}
+ height={14}
+ />
+
+
+
+ {isModifyBoxVisible && (
+
+ 회원정보를 수정하시겠습니까?
+ 본인 확인을 위해 비밀번호를 입력해주세요.
+
+
+
+
+
+
+
+ )}
+
+
+
+
+ 나의 공부방
+
+
+ 내가 문의한 글
+
+
+
+
+
+ 내가 쓴 글
+
+
+
+
+
+
+
+
+ "assets/img/Environment_다같이.svg"}
+ width={395}
+ height={459}
+ />
+
+
+ );
+}
diff --git a/src/components/pages/environment/environment-left-page/EnvironmentLeftPage.style.js b/src/components/pages/environment/environment-left-page/EnvironmentLeftPage.style.js
new file mode 100644
index 0000000..e48fa58
--- /dev/null
+++ b/src/components/pages/environment/environment-left-page/EnvironmentLeftPage.style.js
@@ -0,0 +1,239 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+ width: 77.9rem;
+ height: 93.8rem;
+ flex-shrink: 0;
+ background: #229EEB;
+ //backdrop-filter: blur(5px);
+ //background-color: rgba(255, 255, 255, 0.7);
+`;
+
+export const Welcome = styled.div`
+ position: relative;
+ top: 3.6rem;
+ left:51.8rem;
+ color: #FFF;
+ font-size: 2rem;
+ font-style: normal;
+ font-weight: 900;
+ line-height: 129.8%;
+ width: 10rem;
+`;
+
+export const EditImage = styled.div`
+ position:relative;
+ top:-1.5rem;
+ left:66.3rem;
+ width: 1.4rem;
+ height: 1.4rem;
+ flex-shrink: 0;
+`;
+
+export const EditBox = styled.div`
+ position:relative;
+ top:-2.8rem;
+ left:65.7rem;
+ width: 8.7rem;
+ height: 2.4rem;
+ flex-shrink: 0;
+ border-radius: 1.9rem;
+ border: 1px solid #FFF;
+`;
+
+export const Edit = styled.div`
+ position:absolute;
+ top:18.7rem;
+ left:67.8rem;
+ color: #FFF;
+ text-align: center;
+ font-size: 1rem;
+ font-style: normal;
+ font-weight: 900;
+ line-height: normal;
+`;
+
+export const ModifyBox = styled.div`
+ z-index:1;
+ position:relative;
+ top:23.5rem;
+ left:60.7rem;
+ width: 71.7rem;
+ height: 20rem;
+ flex-shrink: 0;
+ border-radius: 1.1rem;
+ background: #FFF;
+ box-shadow: 3px 3px 12px -2px rgba(0, 0, 0, 0.25);
+`;
+
+export const ModifyBoxStyle1 = styled.div`
+ position:absolute;
+ top:2.6rem;
+ left:24.5rem;
+ color: #000;
+ text-align: center;
+ font-size: 1.8rem;
+ font-style: normal;
+ font-weight: 700;
+ line-height: normal;
+`;
+
+export const ModifyBoxStyle2 = styled.div`
+ position:absolute;
+ top:5.3rem;
+ left:25rem;
+ color: rgba(0, 0, 0, 0.40);
+ text-align: center;
+ font-size: 1.3rem;
+ font-style: normal;
+ font-weight: 500;
+ line-height: normal;
+`;
+
+export const ModifyBoxBox1 = styled.div`
+ position:absolute;
+ top:8.7rem;
+ left:10.15rem;
+ width: 51.6rem;
+ height: 3.7rem;
+ flex-shrink: 0;
+ border-radius: 0.7rem;
+ background: #FFF;
+ box-shadow: 3px 3px 12px -2px rgba(0, 0, 0, 0.25);
+`;
+
+export const ModifyBoxBox2 = styled.div`
+ position:absolute;
+ top:13.65rem;
+ left:10.15rem;
+ width: 51.6rem;
+ height: 3.7rem;
+ flex-shrink: 0;
+ border-radius: 0.7rem;
+ background: #D9D9D9;
+ box-shadow: 3px 3px 12px -2px rgba(0, 0, 0, 0.25);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+`;
+
+
+export const WelcomeRectangle1 = styled.div`
+ position: absolute;
+ top:30rem;
+ left:51.8rem;
+ width: 23.4rem;
+ height: 4rem;
+ flex-shrink: 0;
+ border-radius: 0.7rem;
+ background: #E9F7FF;
+`;
+
+export const Message1 = styled.div`
+ position: relative;
+ top: 1rem;
+ left: 1rem;
+ color: #000;
+ text-align: center;
+ font-size: 1.3rem;
+ font-style: normal;
+ font-weight: 900;
+ line-height: normal;
+ width: 6.3rem;
+`;
+
+
+export const WelcomeRectangle2 = styled.div`
+ position: absolute;
+ top:35rem;
+ left:51.8rem;
+ width: 23.4rem;
+ height: 4rem;
+ flex-shrink: 0;
+ border-radius: 0.7rem;
+ background: #E9F7FF;
+`;
+
+export const Message2 = styled.div`
+ position: relative;
+ top: 1rem;
+ left: 1rem;
+ color: #000;
+ text-align: center;
+ font-size: 1.3rem;
+ font-style: normal;
+ font-weight: 900;
+ line-height: normal;
+ width: 6.3rem;
+ white-space: nowrap;
+`;
+
+export const Message22 = styled.div`
+ position: relative;
+ top: -0.7rem;
+ left: 8rem;
+ color: #000;
+ text-align: center;
+ font-size: 1rem;
+ font-style: normal;
+ font-weight: 400;
+ line-height: normal;
+`;
+
+export const WelcomeRectangle3 = styled.div`
+ position: absolute;
+ top:40rem;
+ left:51.8rem;
+ width: 23.4rem;
+ height: 4rem;
+ flex-shrink: 0;
+ border-radius: 0.7rem;
+ background: #E9F7FF;
+`;
+
+export const Message3 = styled.div`
+ position: relative;
+ top: 1rem;
+ left: 0.5rem;
+ color: #000;
+ text-align: center;
+ font-size: 1.3rem;
+ font-style: normal;
+ font-weight: 900;
+ line-height: normal;
+ width: 6.3rem;
+`;
+
+export const Message33 = styled.div`
+ position: relative;
+ top: -0.8rem;
+ left: 7.5rem;
+ color: #000;
+ text-align: center;
+ font-size: 1rem;
+ font-style: normal;
+ font-weight: 400;
+ line-height: normal;
+`;
+
+
+export const Message4 = styled.div`
+ position: absolute;
+ top: 48rem;
+ left: 51.8rem;
+ width: 6.3rem;
+ color: #FFF;
+ font-size: 1.3rem;
+ font-style: normal;
+ font-weight: 900;
+ line-height: normal;
+`;
+
+export const EnvironmentImage = styled.div`
+ position: absolute;
+ top:61rem;
+ left: 34.5rem;
+ width: 39.5rem;
+ height: 45.9rem;
+ flex-shrink: 0;
+`;
\ No newline at end of file
diff --git a/src/components/pages/environment/environment-right-page/EnviromentRightPage.js b/src/components/pages/environment/environment-right-page/EnviromentRightPage.js
new file mode 100644
index 0000000..63af947
--- /dev/null
+++ b/src/components/pages/environment/environment-right-page/EnviromentRightPage.js
@@ -0,0 +1,157 @@
+import React, { useState } from "react";
+import * as style from "@/components/pages/environment/environment-right-page/EnvironmentRightPage.style";
+import Image from "next/image";
+
+export default function EnvironmentRightPage() {
+ const [isModalOpen, setIsModalOpen] = useState(false);
+ const [password, setPassword] = useState("");
+ const [isModifyBoxVisible, setModifyBoxVisible] = useState(false);
+ const handleTestButtonClick = () => {
+ setIsModalOpen(true);
+ };
+
+ const handleCloseModal = () => {
+ setIsModalOpen(false);
+ };
+
+ const handleDeleteAccount = () => {
+ handleCloseModal();
+ };
+
+ const handlePasswordChange = (event) => {
+ setPassword(event.target.value);
+ };
+
+ const handleModifyClick = () => {
+ setModifyBoxVisible(!isModifyBoxVisible);
+ };
+
+ const handleLogout = () => {
+ localStorage.removeItem("authToken");
+ window.location.href = '/login';
+ };
+
+
+ return (
+
+ 회원정보 수정
+
+ 기본정보
+ 이름
+
+
+
+
+ 닉네임
+
+
+
+ 비밀번호
+
+
+
+ 이메일
+
+
+
+ 휴대전화
+
+
+
+ 생년월일
+
+
+
+
+ 나의 공부 성향
+ 님의 공부 성향은
+
+
+
+ 테스트 안내
+ *본 테스트는 검증된 내용이 아니라 참고만 해 주시기를 부탁드립니다.
+ *테스트 결과는 개인의 특별한 상황에 따라 다를 수 있습니다.
+
+
+
+
+
+
+ 마케팅 수신 동의(선택)
+ 자세히 보기
+
+
+ "assets/img/Environment_Detail.svg"}
+ width={8.75}
+ height={5.489}
+ />
+
+
+ 전문보기
+
+
+
+
+ {isModifyBoxVisible && (
+
+ 회원정보를 수정하시겠습니까?
+ 본인 확인을 위해 비밀번호를 입력해주세요.
+
+
+
+
+
+
+
+ )}
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/components/pages/environment/environment-right-page/EnvironmentRightPage.style.js b/src/components/pages/environment/environment-right-page/EnvironmentRightPage.style.js
new file mode 100644
index 0000000..72fc90e
--- /dev/null
+++ b/src/components/pages/environment/environment-right-page/EnvironmentRightPage.style.js
@@ -0,0 +1,463 @@
+import styled from "styled-components";
+
+export const EditMessage = styled.div`
+ position: relative;
+ top: 6rem;
+ left:5rem;
+ color: #000;
+ font-size: 1.3rem;
+ font-style: normal;
+ font-weight: 900;
+ line-height: normal;
+ letter-spacing: 0.013rem;
+ width: 18.9rem;
+`;
+
+export const EditContainer = styled.div`
+ position: relative;
+ top: 9.9rem;
+ left:3.6rem;
+ width: 55.5rem;
+ height: 74.4rem;
+ flex-shrink: 0;
+ border-radius: 1.3rem;
+ background: #FFF;
+ box-shadow: 3px 3px 12px 5px rgba(0, 0, 0, 0.25);
+`;
+
+export const BasicEdit = styled.div`
+ position: relative;
+ top: 2.4rem;
+ left:1.8rem;
+ width: 18.9rem;
+ color: #000;
+ font-size: 1.3rem;
+ font-style: normal;
+ font-weight: 900;
+ line-height: normal;
+ letter-spacing: 0.013rem;
+`;
+
+export const Information1 = styled.div`
+ position: relative;
+ top: 6rem;
+ left:1.8rem;
+ width: 21.6rem;
+ height: 1.6rem;
+ flex-shrink: 0;
+ color: #000;
+ font-size: 1.3rem;
+ font-style: normal;
+ font-weight: 400;
+ line-height: normal;
+`;
+
+export const Information2 = styled.div`
+ position: relative;
+ top:5rem;
+ left:1.8rem;
+ width: 21.6rem;
+ height: 1.6rem;
+ flex-shrink: 0;
+ color: #000;
+ font-size: 1.3rem;
+ font-style: normal;
+ font-weight: 400;
+ line-height: normal;
+`;
+
+export const Information3 = styled.div`
+ position: relative;
+ top:3.5rem;
+ left:1.8rem;
+ width: 21.6rem;
+ height: 1.6rem;
+ flex-shrink: 0;
+ color: #000;
+ font-size: 1.3rem;
+ font-style: normal;
+ font-weight: 400;
+ line-height: normal;
+`;
+
+export const Information4 = styled.div`
+ position: relative;
+ top:3rem;
+ left:1.8rem;
+ width: 21.6rem;
+ height: 1.6rem;
+ flex-shrink: 0;
+ color: #000;
+ font-size: 1.3rem;
+ font-style: normal;
+ font-weight: 400;
+ line-height: normal;
+`;
+
+export const Information5 = styled.div`
+ position: relative;
+ top:2.5rem;
+ left:1.8rem;
+ width: 21.6rem;
+ height: 1.6rem;
+ flex-shrink: 0;
+ color: #000;
+ font-size: 1.3rem;
+ font-style: normal;
+ font-weight: 400;
+ line-height: normal;
+`;
+
+export const Information6 = styled.div`
+ position: relative;
+ top:1.5rem;
+ left:1.8rem;
+ width: 21.6rem;
+ height: 1.6rem;
+ flex-shrink: 0;
+ color: #000;
+ font-size: 1.3rem;
+ font-style: normal;
+ font-weight: 400;
+ line-height: normal;
+`;
+
+export const InformationBox1 = styled.div`
+ position: relative;
+ top:3.5rem;
+ left:8rem;
+ width: 23.4rem;
+ height: 3.5rem;
+ flex-shrink: 0;
+ border-radius: 0.7rem;
+ background: #FFF;
+ box-shadow: 3px 3px 12px -2px rgba(0, 0, 0, 0.25);
+`;
+
+export const InformationBox2 = styled.div`
+ position: relative;
+ top:2.5rem;
+ left:8rem;
+ width: 23.4rem;
+ height: 3.5rem;
+ flex-shrink: 0;
+ border-radius: 0.7rem;
+ background: #FFF;
+ box-shadow: 3px 3px 12px -2px rgba(0, 0, 0, 0.25);
+`;
+
+export const InformationBox3 = styled.div`
+ position: relative;
+ top:1.5rem;
+ left:8rem;
+ width: 23.4rem;
+ height: 3.5rem;
+ flex-shrink: 0;
+ border-radius: 0.7rem;
+ background: #FFF;
+ box-shadow: 3px 3px 12px -2px rgba(0, 0, 0, 0.25);
+`;
+
+export const InformationBox4 = styled.div`
+ position: relative;
+ top:0.5rem;
+ left:8rem;
+ width: 23.4rem;
+ height: 3.5rem;
+ flex-shrink: 0;
+ border-radius: 0.7rem;
+ background: #FFF;
+ box-shadow: 3px 3px 12px -2px rgba(0, 0, 0, 0.25);
+`;
+
+export const InformationBox5 = styled.div`
+ position: relative;
+ top:-0.5rem;
+ left:8rem;
+ width: 23.4rem;
+ height: 3.5rem;
+ flex-shrink: 0;
+ border-radius: 0.7rem;
+ background: #FFF;
+ box-shadow: 3px 3px 12px -2px rgba(0, 0, 0, 0.25);
+`;
+
+export const InformationBox6 = styled.div`
+ position: relative;
+ top:-1.5rem;
+ left:8rem;
+ width: 23.4rem;
+ height: 3.5rem;
+ flex-shrink: 0;
+ border-radius: 0.7rem;
+ background: #FFF;
+ box-shadow: 3px 3px 12px -2px rgba(0, 0, 0, 0.25);
+`;
+
+export const StudyStyle = styled.div`
+ position: relative;
+ top:4.3rem;
+ left:2.1rem;
+ width: 18.9rem;
+ color: #000;
+ font-size: 1.3rem;
+ font-style: normal;
+ font-weight: 900;
+ line-height: normal;
+ letter-spacing: 0.013rem;
+`;
+
+export const StudyStyleDetail = styled.div`
+ position: relative;
+ top:5.5rem;
+ left:5rem;
+ width: 21.6rem;
+ color: #000;
+ font-size: 1.3rem;
+ font-style: normal;
+ font-weight: 400;
+ line-height: normal;
+`;
+
+export const StudyStyleBox = styled.div`
+ position: relative;
+ top:3rem;
+ left:15rem;
+ width: 25.2rem;
+ height: 3.5rem;
+ flex-shrink: 0;
+ border-radius: 0.7rem;
+ background: #FFF;
+ box-shadow: 3px 3px 12px -2px rgba(0, 0, 0, 0.25);
+`;
+
+export const TestBox = styled.div`
+ position: relative;
+ top:5rem;
+ left:2.1rem;
+ width: 51.3rem;
+ height: 6.1rem;
+ flex-shrink: 0;
+ border-radius: 0.5rem;
+ background: #FFEFE0;
+`;
+
+export const TestBoxDetail1 = styled.div`
+ position: relative;
+ top:0.7rem;
+ left:1.5rem;
+ color: #000;
+ font-size: 1rem;
+ font-style: normal;
+ font-weight: 400;
+ line-height: normal;
+`;
+
+export const TestBoxDetail2 = styled.div`
+ position: relative;
+ top:0.7rem;
+ left:1.5rem;
+ color: #000;
+ font-size: 1rem;
+ font-style: normal;
+ font-weight: 400;
+ line-height: normal;
+`;
+
+export const TestBoxDetail3 = styled.div`
+ position: relative;
+ top:0.7rem;
+ left:1.5rem;
+ color: #000;
+ font-size: 1rem;
+ font-style: normal;
+ font-weight: 400;
+ line-height: normal;
+`;
+
+export const TestButton = styled.div`
+ position: relative;
+ top:5.8rem;
+ left:18.8rem;
+ width: 17.8rem;
+ height: 3.7rem;
+ flex-shrink: 0;
+ border-radius: 0.5rem;
+ background: #F2923B;
+ box-shadow: 3px 3px 12px -2px rgba(0, 0, 0, 0.25);
+`;
+
+export const TestButtonStyle = styled.div`
+ color: #FFF;
+ text-align: center;
+ position: relative;
+ top:0.6rem;
+ left:1.8rem;
+ font-size: 1.3rem;
+ font-style: normal;
+ font-weight: 900;
+ line-height: normal;
+ letter-spacing: 0.013rem;
+`;
+
+export const Agreement = styled.div`
+ position: relative;
+ top:10rem;
+ left:3rem;
+ width: 18.9rem;
+ color: #000;
+ font-size: 1.3rem;
+ font-style: normal;
+ font-weight: 900;
+ line-height: normal;
+ letter-spacing: 0.013rem;
+`;
+
+export const DetailButton = styled.div`
+ position: relative;
+ top:10rem;
+ left:15rem;
+ color: #8C9499;
+ text-align: center;
+ font-size: 1rem;
+ font-style: normal;
+ font-weight: 900;
+ line-height: normal;
+ text-decoration: underline;
+`;
+
+export const DetailButtonImage = styled.div`
+ position: relative;
+ top:7.7rem;
+ left:46rem;
+ width: 0.875rem;
+ height: 0.5489rem;
+ flex-shrink: 0;
+ fill: #229EEB;
+`;
+
+export const AllMessage = styled.div`
+ position: absolute;
+ top:61.5rem;
+ left:48rem;
+ color: #8C9499;
+ text-align: center;
+ font-size: 1rem;
+ font-style: normal;
+ font-weight: 900;
+ line-height: normal;
+ text-decoration-line: underline;
+`;
+
+export const EditComplete = styled.div`
+ position: relative;
+ top:12rem;
+ left:2.5rem;
+ width: 51.6rem;
+ height: 3.7rem;
+ flex-shrink: 0;
+ border-radius: 0.7rem;
+ background: #229EEB;
+ box-shadow: 3px 3px 12px -2px rgba(0, 0, 0, 0.25);
+`;
+
+export const EditCompleteStyle = styled.div`
+ position: relative;
+ top:1rem;
+ left:22.5rem;
+ width: 6.3rem;
+ color: #FFF;
+ font-size: 1.3rem;
+ font-style: normal;
+ font-weight: 900;
+ line-height: normal;
+`;
+
+export const Delete = styled.div`
+ position: absolute;
+ top:71.2rem;
+ left:24.5rem;
+ color: #000;
+ text-align: center;
+ font-size: 1rem;
+ font-style: normal;
+ font-weight: 900;
+ line-height: normal;
+ text-decoration: underline;
+`;
+
+export const ModifyBox = styled.div`
+ z-index:1;
+ position:absolute;
+ top:20.8rem;
+ left:-20.8rem;
+ width: 71.7rem;
+ height: 20rem;
+ flex-shrink: 0;
+ border-radius: 1.1rem;
+ background: #FFF;
+ box-shadow: 3px 3px 12px -2px rgba(0, 0, 0, 0.25);
+`;
+
+export const ModifyBoxStyle1 = styled.div`
+ position:absolute;
+ top:2.6rem;
+ left:24.5rem;
+ color: #000;
+ text-align: center;
+ font-size: 1.8rem;
+ font-style: normal;
+ font-weight: 700;
+ line-height: normal;
+`;
+
+export const ModifyBoxStyle2 = styled.div`
+ position:absolute;
+ top:5.3rem;
+ left:25rem;
+ color: rgba(0, 0, 0, 0.40);
+ text-align: center;
+ font-size: 1.3rem;
+ font-style: normal;
+ font-weight: 500;
+ line-height: normal;
+`;
+
+export const ModifyBoxBox1 = styled.div`
+ position:absolute;
+ top:8.7rem;
+ left:10.15rem;
+ width: 51.6rem;
+ height: 3.7rem;
+ flex-shrink: 0;
+ border-radius: 0.7rem;
+ background: #FFF;
+ box-shadow: 3px 3px 12px -2px rgba(0, 0, 0, 0.25);
+`;
+
+export const ModifyBoxBox2 = styled.div`
+ position:absolute;
+ top:13.65rem;
+ left:10.15rem;
+ width: 51.6rem;
+ height: 3.7rem;
+ flex-shrink: 0;
+ border-radius: 0.7rem;
+ background: #D9D9D9;
+ box-shadow: 3px 3px 12px -2px rgba(0, 0, 0, 0.25);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+`;
+
+export const Edit = styled.div`
+ position:absolute;
+ top:18.7rem;
+ left:67.8rem;
+ color: #FFF;
+ text-align: center;
+ font-size: 1rem;
+ font-style: normal;
+ font-weight: 900;
+ line-height: normal;
+`;
\ No newline at end of file
diff --git a/src/pages/environment.js b/src/pages/environment.js
new file mode 100644
index 0000000..3140b2a
--- /dev/null
+++ b/src/pages/environment.js
@@ -0,0 +1,12 @@
+import React from "react";
+import EnvironmentLeftPage from "@/components/pages/environment/environment-left-page/EnvironmentLeftPage";
+import EnvironmentRightPage from "@/components/pages/environment/environment-right-page/EnviromentRightPage";
+
+export default function Environment() {
+ return (
+
+
+
+
+ );
+}
\ No newline at end of file