From 237b71493dfa84d6ee5a1d04da6a3584bcd20b8d Mon Sep 17 00:00:00 2001
From: 5ewon06 <gwonsewon03@gmail.com>
Date: Wed, 5 Apr 2023 23:55:09 +0900
Subject: [PATCH 01/20] FIX : edit create docs layout

---
 .yarnrc.yml            |   3 -
 layout/create/style.ts | 114 +++++++++++++++++++++-
 pages/create/index.tsx | 208 +++++++++++++++++++++--------------------
 3 files changed, 217 insertions(+), 108 deletions(-)
 delete mode 100644 .yarnrc.yml

diff --git a/.yarnrc.yml b/.yarnrc.yml
deleted file mode 100644
index fc8ec93..0000000
--- a/.yarnrc.yml
+++ /dev/null
@@ -1,3 +0,0 @@
-nodeLinker: node-modules
-
-yarnPath: .yarn/releases/yarn-3.4.1.cjs
diff --git a/layout/create/style.ts b/layout/create/style.ts
index 0412a42..99aeac2 100644
--- a/layout/create/style.ts
+++ b/layout/create/style.ts
@@ -1,4 +1,4 @@
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
 
 export const CreateWrap = styled.div`
 	display: flex;
@@ -11,6 +11,73 @@ export const CreateTitleWrap = styled.div`
 	align-items: center;
 `
 
+//=======================================================
+
+export const CreateTB = styled.table`
+	width: 68vw;
+
+	@media (max-width: 500px) {
+		width: 90vw;
+	}
+	background-color:#ccc;
+`
+
+export const CreateTR = styled.tr`
+	height:40px;
+	background-color:white;
+`
+
+export const CreateTD = styled.td`
+	width: 100%;
+	height: 90%;
+	padding-left: 20px;
+	border: none;
+	font-family: 'Open Sans', sans-serif;
+	white-space: pre-wrap;
+	font-size: 14px;
+	overflow: scroll;
+
+	@media (max-width: 500px) {
+		font-size: 10px;
+	}
+	/* height: 100%; */
+`
+
+export const CreateTDTitle = styled.td`
+	width:8%;
+	background-color: #274168;
+	color: white;
+	text-align:center;
+	font-weight: 800;
+
+	@media (max-width: 500px) {
+		font-size: 12px;
+		width: 70px;
+	}
+`
+
+export const CreateTDDisplay = styled.td`
+	display:flex;
+`
+
+export const CreateTDDiv = styled.td`
+	width: 100%;
+	/* height: 90%; */
+	/* padding-left: 20px; */
+	border: none;
+	font-family: 'Open Sans', sans-serif;
+	white-space: pre-wrap;
+	font-size: 14px;
+	overflow: scroll;
+
+	@media (max-width: 500px) {
+		font-size: 10px;
+	}
+	height:400px;
+`
+
+//========================================================
+
 export const CreateTitleText = styled.span`
 	color: #274168;
 	font-family: 'Open Sans', sans-serif;
@@ -48,9 +115,9 @@ export const CreateTableTRInput = styled.input`
 
 export const CreateTableTRTextarea = styled.textarea`
 	width: 100%;
-	height: 90%;
+	height: 400px;
 	outline: none;
-	padding-left: 20px;
+	/* padding-left: 20px; */
 	resize: none;
 	border: none;
 	font-family: 'Open Sans', sans-serif;
@@ -302,8 +369,7 @@ export const CreateSubmit = styled.div`
 export const CreateWarn = styled.span`
 	color: red;
 	font-weight: 800;
-	margin-top: 10px;
-	margin-right: auto;
+	margin: 10px auto 0 0;
 
 	@media (max-width: 500px) {
 		font-size: 8px;
@@ -324,3 +390,41 @@ export const CreateButton = styled.button`
 		width: 200px;
 	}
 `
+
+///
+
+// export const Test = styled.div`
+// 	display: flex;
+// 	justify-content: center;
+// 	align-items: center;
+// `
+
+/*
+<PatentTest isLogin="true" />
+*/
+
+// export const ParentTest = styled(Test)`
+// 	background-color: ${props => props.isLogin ? 'blue' : 'black'};
+// `
+
+// export const ParentTest1 = styled(Test)`
+// 	background-color: ${({ isLogin }) => isLogin ? 'blue' : 'black'};
+// `
+
+// interface ParentTest2Type {
+// 	isLogin: string
+// }
+
+// export const ParentTest2 = styled(Test) <{ isLogin: string }>`
+// 	${({ isLogin }) => isLogin && css`
+// 		background-color: blue;
+// 		display: flrx;
+// 		ava;dlbb
+// 		d
+// 		bda
+// 		bda
+// 		ba
+// 		bad
+// 	`}
+
+// `
\ No newline at end of file
diff --git a/pages/create/index.tsx b/pages/create/index.tsx
index 03a6201..7f410b2 100644
--- a/pages/create/index.tsx
+++ b/pages/create/index.tsx
@@ -101,109 +101,117 @@ const Create = () => {
 					<S.CreateTitleWrap>
 						<S.CreateTitleText>문서 생성</S.CreateTitleText>
 					</S.CreateTitleWrap>
-					<S.CreateTable>
-						<S.CreateTableTR>
-							<S.CreateTableTRTitle>분류</S.CreateTableTRTitle>
-							<S.CreateTableTRContents>
-								{userInfo.authority === 'ADMIN' && (
-									<div>
-										<label htmlFor="STUDENT">학생</label>
-										<S.CreateTableRadio type="radio" onChange={(e) => setDocs({ ...docs, docsType: e.target.id })} id="STUDENT" name="radio" />
-										<label htmlFor="READONLY">관리자</label>
-										<S.CreateTableRadio type="radio" onChange={(e) => setDocs({ ...docs, docsType: e.target.id })} id="READONLY" name="radio" />
-									</div>
-								)}
-								{createFormInitState.map((info, index) => (
-									<S.CreateTableRadioBox key={index}>
-										<label htmlFor={info.id}>{info.title}</label>
-										<S.CreateTableRadio type="radio" onChange={(e) => changeDocsType(e)} id={info.id} name="radio" />
-									</S.CreateTableRadioBox>
-								))}
-								<S.CreateTableSelectBox>
+					<S.CreateTB>
+						<tbody>
+							<S.CreateTR>
+								<S.CreateTDTitle>분류</S.CreateTDTitle>
+								<S.CreateTDDisplay>
+									{userInfo.authority === 'ADMIN' && (
+										<>
+											<label htmlFor="STUDENT">학생</label>
+											<S.CreateTableRadio type="radio" onChange={(e) => setDocs({ ...docs, docsType: e.target.id })} id="STUDENT" name="radio" />
+											<label htmlFor="READONLY">관리자</label>
+											<S.CreateTableRadio type="radio" onChange={(e) => setDocs({ ...docs, docsType: e.target.id })} id="READONLY" name="radio" />
+										</>
+									)}
 									{createFormInitState.map((info, index) => (
-										<S.CreateTableSelectOption key={index} onChange={(e) => changeDocsType(e as React.ChangeEvent<HTMLOptionElement>)} id={info.id}>
-											{info.title}
-										</S.CreateTableSelectOption>
+										<S.CreateTableRadioBox key={index}>
+											<label htmlFor={info.id}>{info.title}</label>
+											<S.CreateTableRadio type="radio" onChange={(e) => changeDocsType(e)} id={info.id} name="radio" />
+										</S.CreateTableRadioBox>
 									))}
-								</S.CreateTableSelectBox>
-							</S.CreateTableTRContents>
-						</S.CreateTableTR>
-						<S.CreateTableTR>
-							<S.CreateTableTRTitle>문서 이름</S.CreateTableTRTitle>
-							<S.CreateTableTRInputContents onChange={(e) => setDocs({ ...docs, title: e.target.value })} value={docs.title} />
-						</S.CreateTableTR>
-						<S.CreateTableTR>
-							<S.CreateTableTRTitle>연도</S.CreateTableTRTitle>
-							<S.CreateTableTRContents>
-								{years.map((year, index) => (
-									<div key={index}>
-										<S.EnrollLabel htmlFor={`${year}`}>{year}년</S.EnrollLabel>
-										<S.CreateTableRadio
-											type="radio"
-											onChange={(e) => setDocs({ ...docs, enroll: parseInt(e.target.id) })}
-											id={`${year}`}
-											name="radios"
-										/>
-									</div>
-								))}
-							</S.CreateTableTRContents>
-						</S.CreateTableTR>
-						<S.CreateTableTRExample>
-							<S.CreateTableTRTitle>예시</S.CreateTableTRTitle>
-							<S.CreateTableTRContents>
-								<S.ExampleImage src="/images/references.png" alt="문서 양식" />
-							</S.CreateTableTRContents>
-						</S.CreateTableTRExample>
-						<S.CreateTableTRFile>
-							<S.CreateTableTRTitle>이미지</S.CreateTableTRTitle>
-							<DragDrop getFiles={setFiles} />
-						</S.CreateTableTRFile>
-						{docs.docsType === 'FRAME' && (
-							<S.CreateTableTRFrame>
-								<S.CreateTableTRTitle>틀 규격</S.CreateTableTRTitle>
-								<S.FrameInputDiv>
-									<S.FrameInputBox>
-										<S.FrameInputWrap>
-											<S.FrameText>열</S.FrameText>
-											<S.FrameInput
-												type="number"
-												min="2"
-												max="5"
-												value={size.column}
-												onChange={(e) => setSize({ ...size, column: parseInt(e.target.value) })}
+									<S.CreateTableSelectBox>
+										{createFormInitState.map((info, index) => (
+											<S.CreateTableSelectOption key={index} onChange={(e) => changeDocsType(e as React.ChangeEvent<HTMLOptionElement>)} id={info.id}>
+												{info.title}
+											</S.CreateTableSelectOption>
+										))}
+									</S.CreateTableSelectBox>
+								</S.CreateTDDisplay>
+							</S.CreateTR>
+							<S.CreateTR>
+								<S.CreateTDTitle>문서 이름</S.CreateTDTitle>
+								<S.CreateTD>
+									<S.CreateTableTRInputContents onChange={(e) => setDocs({ ...docs, title: e.target.value })} value={docs.title} />
+								</S.CreateTD>
+							</S.CreateTR>
+							<S.CreateTR>
+								<S.CreateTDTitle>연도</S.CreateTDTitle>
+								<S.CreateTDDisplay>
+									{years.map((year, index) => (
+										<div key={index}>
+											<S.EnrollLabel htmlFor={`${year}`}>{year}년</S.EnrollLabel>
+											<S.CreateTableRadio
+												type="radio"
+												onChange={(e) => setDocs({ ...docs, enroll: parseInt(e.target.id) })}
+												id={`${year}`}
+												name="radios"
 											/>
-											<S.FrameText>행</S.FrameText>
-											<S.FrameInput
-												type="number"
-												min="2"
-												max="10"
-												value={size.row}
-												onChange={(e) => setSize({ ...size, row: parseInt(e.target.value) })}
-											/>
-										</S.FrameInputWrap>
-									</S.FrameInputBox>
-									<S.CreateFrameButton onClick={() => makeFrame()}>틀생성/초기화</S.CreateFrameButton>
-								</S.FrameInputDiv>
-							</S.CreateTableTRFrame>
-						)}
-						<S.CreateTableTRTextContent>
-							<S.CreateTableTRTitle>문서 내용</S.CreateTableTRTitle>
-							<S.CreateTableTRTextarea
-								onKeyDown={(e) => {
-									util.onKeyDownUseTab(e)
-								}}
-								onChange={(e) => setDocs({ ...docs, contents: util.autoClosingTag(e) })}
-								value={docs.contents}
-							/>
-						</S.CreateTableTRTextContent>
-						<S.CreateTableTRTextContent>
-							<S.CreateTableTRTitle>미리보기</S.CreateTableTRTitle>
-							<S.CreateTableTRDiv
-								dangerouslySetInnerHTML={{
-									__html: util.documentation(docs.contents),
-								}}></S.CreateTableTRDiv>
-						</S.CreateTableTRTextContent>
-					</S.CreateTable>
+										</div>
+									))}
+								</S.CreateTDDisplay>
+							</S.CreateTR>
+							<S.CreateTR>
+								<S.CreateTDTitle>예시</S.CreateTDTitle>
+								<S.CreateTD>
+									<S.ExampleImage src="/images/references.png" alt="문서 양식" />
+								</S.CreateTD>
+							</S.CreateTR>
+							<S.CreateTR>
+								<S.CreateTDTitle>이미지</S.CreateTDTitle>
+								<S.CreateTD>
+									<DragDrop getFiles={setFiles} />
+								</S.CreateTD>
+							</S.CreateTR>
+							{docs.docsType === 'FRAME' && (
+								<S.CreateTR>
+									<S.CreateTDTitle>틀 규격</S.CreateTDTitle>
+									<S.CreateTD>
+										<S.FrameInputBox>
+											<S.FrameInputWrap>
+												<S.FrameText>열</S.FrameText>
+												<S.FrameInput
+													type="number"
+													min="2"
+													max="5"
+													value={size.column}
+													onChange={(e) => setSize({ ...size, column: parseInt(e.target.value) })}
+												/>
+												<S.FrameText>행</S.FrameText>
+												<S.FrameInput
+													type="number"
+													min="2"
+													max="10"
+													value={size.row}
+													onChange={(e) => setSize({ ...size, row: parseInt(e.target.value) })}
+												/>
+											</S.FrameInputWrap>
+										</S.FrameInputBox>
+										<S.CreateFrameButton onClick={() => makeFrame()}>틀생성/초기화</S.CreateFrameButton>
+									</S.CreateTD>
+								</S.CreateTR>
+							)}
+							<S.CreateTR>
+								<S.CreateTDTitle>문서 내용</S.CreateTDTitle>
+								<S.CreateTD>
+									<S.CreateTableTRTextarea
+										onKeyDown={(e) => {
+											util.onKeyDownUseTab(e)
+										}}
+										onChange={(e) => setDocs({ ...docs, contents: util.autoClosingTag(e) })}
+										value={docs.contents}
+									/>
+								</S.CreateTD>
+							</S.CreateTR>
+							<S.CreateTR>
+								<S.CreateTDTitle>미리보기</S.CreateTDTitle>
+								<S.CreateTDDiv
+									dangerouslySetInnerHTML={{
+										__html: util.documentation(docs.contents),
+									}}></S.CreateTDDiv>
+							</S.CreateTR>
+						</tbody>
+					</S.CreateTB>
 					<S.CreateSubmit>
 						<S.CreateWarn>※ 필독! 문서 내 부적절한 내용을 서술하는 사용자는 부마위키 이용에 제한을 받을 수 있습니다 ※</S.CreateWarn>
 						<S.CreateButton onClick={onClickCreateDocs}>문서 생성</S.CreateButton>

From c596a0d559ec69d955f24b1cbf68b7312d237cd2 Mon Sep 17 00:00:00 2001
From: Ubinquitous <ubinquitous1@gmail.com>
Date: Fri, 7 Apr 2023 08:47:04 +0900
Subject: [PATCH 02/20] =?UTF-8?q?FIX=20:=20layout=20=ED=8F=B4=EB=8D=94?=
 =?UTF-8?q?=EA=B5=AC=EC=A1=B0=20=EB=B3=80=EA=B2=BD,=20=EB=A0=88=EC=9D=B4?=
 =?UTF-8?q?=EC=95=84=EC=9B=83=20=EB=B6=84=EB=A6=AC=EC=9E=91=EC=97=85=20?=
 =?UTF-8?q?=ED=95=84=EC=9A=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 layout/accident/style.ts                      |  62 ----------
 layout/{create/style.ts => create.style.ts}   | 114 +-----------------
 layout/{docs/style.ts => docs.style.ts}       |   0
 layout/frame/style.ts                         |  62 ----------
 layout/{mypage/style.ts => mypage.style.ts}   |   0
 layout/popular/style.ts                       |  62 ----------
 layout/{search/style.ts => search.style.ts}   |   0
 layout/{club/style.ts => static.style.ts}     |  18 +--
 layout/student/style.ts                       |  62 ----------
 layout/teacher/style.ts                       |  70 -----------
 layout/{update/style.ts => update.style.ts}   |   0
 layout/{user/style.ts => user.style.ts}       |   0
 .../detail/style.ts => version.style.ts}      |  34 ++++--
 layout/version/style.ts                       |  19 ---
 14 files changed, 40 insertions(+), 463 deletions(-)
 delete mode 100644 layout/accident/style.ts
 rename layout/{create/style.ts => create.style.ts} (73%)
 rename layout/{docs/style.ts => docs.style.ts} (100%)
 delete mode 100644 layout/frame/style.ts
 rename layout/{mypage/style.ts => mypage.style.ts} (100%)
 delete mode 100644 layout/popular/style.ts
 rename layout/{search/style.ts => search.style.ts} (100%)
 rename layout/{club/style.ts => static.style.ts} (66%)
 delete mode 100644 layout/student/style.ts
 delete mode 100644 layout/teacher/style.ts
 rename layout/{update/style.ts => update.style.ts} (100%)
 rename layout/{user/style.ts => user.style.ts} (100%)
 rename layout/{version/detail/style.ts => version.style.ts} (59%)
 delete mode 100644 layout/version/style.ts

diff --git a/layout/accident/style.ts b/layout/accident/style.ts
deleted file mode 100644
index 9ac0fb1..0000000
--- a/layout/accident/style.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-import Link from 'next/link'
-import styled from 'styled-components'
-
-export const AccidentWrap = styled.div`
-	display: flex;
-`
-
-export const AccidentTitleWrap = styled.div`
-	width: 100%;
-	height: 80px;
-	display: flex;
-	align-items: center;
-`
-
-export const AccidentTitleText = styled.span`
-	color: #274168;
-	font-family: 'Open Sans', sans-serif;
-	font-weight: 800;
-	font-size: 34px;
-	margin-left: 30px;
-`
-
-export const AccidentClassify = styled.div`
-	display: flex;
-	justify-content: center;
-	margin-top: 25px;
-	margin-bottom: 30px;
-`
-
-export const AccidentLine = styled.div`
-	width: 68vw;
-	height: 1.5px;
-	background-color: #ccc;
-
-	@media (max-width: 500px) {
-		width: 90vw;
-	}
-`
-
-export const AccidentListWrap = styled.div`
-	width: 90%;
-	height: fit-content;
-	display: flex;
-	flex-direction: column;
-	margin-top: 20px;
-`
-
-export const AccidentList = styled.ul`
-	margin: 30px 0 0 50px;
-	font-weight: 600;
-`
-
-export const AccidentLink = styled(Link)`
-	color: #0038ff;
-	text-decoration: none;
-	cursor: pointer;
-`
-
-export const AccidentListItem = styled.li`
-	margin-bottom: 18px;
-	color: #0038ff;
-`
diff --git a/layout/create/style.ts b/layout/create.style.ts
similarity index 73%
rename from layout/create/style.ts
rename to layout/create.style.ts
index 99aeac2..0412a42 100644
--- a/layout/create/style.ts
+++ b/layout/create.style.ts
@@ -1,4 +1,4 @@
-import styled, { css } from 'styled-components'
+import styled from 'styled-components'
 
 export const CreateWrap = styled.div`
 	display: flex;
@@ -11,73 +11,6 @@ export const CreateTitleWrap = styled.div`
 	align-items: center;
 `
 
-//=======================================================
-
-export const CreateTB = styled.table`
-	width: 68vw;
-
-	@media (max-width: 500px) {
-		width: 90vw;
-	}
-	background-color:#ccc;
-`
-
-export const CreateTR = styled.tr`
-	height:40px;
-	background-color:white;
-`
-
-export const CreateTD = styled.td`
-	width: 100%;
-	height: 90%;
-	padding-left: 20px;
-	border: none;
-	font-family: 'Open Sans', sans-serif;
-	white-space: pre-wrap;
-	font-size: 14px;
-	overflow: scroll;
-
-	@media (max-width: 500px) {
-		font-size: 10px;
-	}
-	/* height: 100%; */
-`
-
-export const CreateTDTitle = styled.td`
-	width:8%;
-	background-color: #274168;
-	color: white;
-	text-align:center;
-	font-weight: 800;
-
-	@media (max-width: 500px) {
-		font-size: 12px;
-		width: 70px;
-	}
-`
-
-export const CreateTDDisplay = styled.td`
-	display:flex;
-`
-
-export const CreateTDDiv = styled.td`
-	width: 100%;
-	/* height: 90%; */
-	/* padding-left: 20px; */
-	border: none;
-	font-family: 'Open Sans', sans-serif;
-	white-space: pre-wrap;
-	font-size: 14px;
-	overflow: scroll;
-
-	@media (max-width: 500px) {
-		font-size: 10px;
-	}
-	height:400px;
-`
-
-//========================================================
-
 export const CreateTitleText = styled.span`
 	color: #274168;
 	font-family: 'Open Sans', sans-serif;
@@ -115,9 +48,9 @@ export const CreateTableTRInput = styled.input`
 
 export const CreateTableTRTextarea = styled.textarea`
 	width: 100%;
-	height: 400px;
+	height: 90%;
 	outline: none;
-	/* padding-left: 20px; */
+	padding-left: 20px;
 	resize: none;
 	border: none;
 	font-family: 'Open Sans', sans-serif;
@@ -369,7 +302,8 @@ export const CreateSubmit = styled.div`
 export const CreateWarn = styled.span`
 	color: red;
 	font-weight: 800;
-	margin: 10px auto 0 0;
+	margin-top: 10px;
+	margin-right: auto;
 
 	@media (max-width: 500px) {
 		font-size: 8px;
@@ -390,41 +324,3 @@ export const CreateButton = styled.button`
 		width: 200px;
 	}
 `
-
-///
-
-// export const Test = styled.div`
-// 	display: flex;
-// 	justify-content: center;
-// 	align-items: center;
-// `
-
-/*
-<PatentTest isLogin="true" />
-*/
-
-// export const ParentTest = styled(Test)`
-// 	background-color: ${props => props.isLogin ? 'blue' : 'black'};
-// `
-
-// export const ParentTest1 = styled(Test)`
-// 	background-color: ${({ isLogin }) => isLogin ? 'blue' : 'black'};
-// `
-
-// interface ParentTest2Type {
-// 	isLogin: string
-// }
-
-// export const ParentTest2 = styled(Test) <{ isLogin: string }>`
-// 	${({ isLogin }) => isLogin && css`
-// 		background-color: blue;
-// 		display: flrx;
-// 		ava;dlbb
-// 		d
-// 		bda
-// 		bda
-// 		ba
-// 		bad
-// 	`}
-
-// `
\ No newline at end of file
diff --git a/layout/docs/style.ts b/layout/docs.style.ts
similarity index 100%
rename from layout/docs/style.ts
rename to layout/docs.style.ts
diff --git a/layout/frame/style.ts b/layout/frame/style.ts
deleted file mode 100644
index bd4dd07..0000000
--- a/layout/frame/style.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-import Link from 'next/link'
-import styled from 'styled-components'
-
-export const FrameWrap = styled.div`
-	display: flex;
-`
-
-export const FrameTitleWrap = styled.div`
-	width: 100%;
-	height: 80px;
-	display: flex;
-	align-items: center;
-`
-
-export const FrameTitleText = styled.span`
-	color: #274168;
-	font-family: 'Open Sans', sans-serif;
-	font-weight: 800;
-	font-size: 34px;
-	margin-left: 30px;
-`
-
-export const FrameClassify = styled.div`
-	display: flex;
-	justify-content: center;
-	margin-top: 25px;
-	margin-bottom: 30px;
-`
-
-export const FrameLine = styled.div`
-	width: 68vw;
-	height: 1.5px;
-	background-color: #ccc;
-
-	@media (max-width: 500px) {
-		width: 90vw;
-	}
-`
-
-export const FrameListWrap = styled.div`
-	width: 90%;
-	height: fit-content;
-	display: flex;
-	flex-direction: column;
-	margin-top: 20px;
-`
-
-export const FrameList = styled.ul`
-	margin: 30px 0 0 50px;
-	font-weight: 600;
-`
-
-export const FrameLink = styled(Link)`
-	color: #0038ff;
-	text-decoration: none;
-	cursor: pointer;
-`
-
-export const FrameListItem = styled.li`
-	margin-bottom: 18px;
-	color: #0038ff;
-`
diff --git a/layout/mypage/style.ts b/layout/mypage.style.ts
similarity index 100%
rename from layout/mypage/style.ts
rename to layout/mypage.style.ts
diff --git a/layout/popular/style.ts b/layout/popular/style.ts
deleted file mode 100644
index d2f2715..0000000
--- a/layout/popular/style.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-import Link from 'next/link'
-import styled from 'styled-components'
-
-export const PopularWrap = styled.div`
-	display: flex;
-`
-
-export const PopularTitleWrap = styled.div`
-	width: 100%;
-	height: 80px;
-	display: flex;
-	align-items: center;
-`
-
-export const PopularTitleText = styled.span`
-	color: #274168;
-	font-family: 'Open Sans', sans-serif;
-	font-weight: 800;
-	font-size: 34px;
-	margin-left: 30px;
-`
-
-export const PopularClassify = styled.div`
-	display: flex;
-	justify-content: center;
-	margin-top: 25px;
-	margin-bottom: 30px;
-`
-
-export const PopularLine = styled.div`
-	width: 68vw;
-	height: 1.5px;
-	background-color: #ccc;
-
-	@media (max-width: 500px) {
-		width: 90vw;
-	}
-`
-
-export const PopularListWrap = styled.div`
-	width: 90%;
-	height: fit-content;
-	display: flex;
-	flex-direction: column;
-	margin-top: 20px;
-`
-
-export const PopularList = styled.ul`
-	margin: 30px 0 0 50px;
-	font-weight: 600;
-`
-
-export const PopularLink = styled(Link)`
-	color: #0038ff;
-	text-decoration: none;
-	cursor: pointer;
-`
-
-export const PopularListItem = styled.li`
-	margin-bottom: 18px;
-	color: #0038ff;
-`
diff --git a/layout/search/style.ts b/layout/search.style.ts
similarity index 100%
rename from layout/search/style.ts
rename to layout/search.style.ts
diff --git a/layout/club/style.ts b/layout/static.style.ts
similarity index 66%
rename from layout/club/style.ts
rename to layout/static.style.ts
index be9bbd1..3d93a68 100644
--- a/layout/club/style.ts
+++ b/layout/static.style.ts
@@ -1,18 +1,18 @@
 import Link from 'next/link'
 import styled from 'styled-components'
 
-export const ClubWrap = styled.div`
+export const StaticWrap = styled.div`
 	display: flex;
 `
 
-export const ClubTitleWrap = styled.div`
+export const StaticTitleWrap = styled.div`
 	width: 100%;
 	height: 80px;
 	display: flex;
 	align-items: center;
 `
 
-export const ClubTitleText = styled.span`
+export const StaticTitleText = styled.span`
 	color: #274168;
 	font-family: 'Open Sans', sans-serif;
 	font-weight: 800;
@@ -20,14 +20,14 @@ export const ClubTitleText = styled.span`
 	margin-left: 30px;
 `
 
-export const ClubClassify = styled.div`
+export const StaticClassify = styled.div`
 	display: flex;
 	justify-content: center;
 	margin-top: 25px;
 	margin-bottom: 30px;
 `
 
-export const ClubLine = styled.div`
+export const StaticLine = styled.div`
 	width: 68vw;
 	height: 1.5px;
 	background-color: #ccc;
@@ -37,7 +37,7 @@ export const ClubLine = styled.div`
 	}
 `
 
-export const ClubListWrap = styled.div`
+export const StaticListWrap = styled.div`
 	width: 90%;
 	height: fit-content;
 	display: flex;
@@ -45,18 +45,18 @@ export const ClubListWrap = styled.div`
 	margin-top: 20px;
 `
 
-export const ClubList = styled.ul`
+export const StaticList = styled.ul`
 	margin: 30px 0 0 50px;
 	font-weight: 600;
 `
 
-export const ClubLink = styled(Link)`
+export const StaticLink = styled(Link)`
 	color: #0038ff;
 	text-decoration: none;
 	cursor: pointer;
 `
 
-export const ClubListItem = styled.li`
+export const StaticListItem = styled.li`
 	margin-bottom: 18px;
 	color: #0038ff;
 `
diff --git a/layout/student/style.ts b/layout/student/style.ts
deleted file mode 100644
index 14f4033..0000000
--- a/layout/student/style.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-import Link from 'next/link'
-import styled from 'styled-components'
-
-export const StudentWrap = styled.div`
-	display: flex;
-`
-
-export const StudentTitleWrap = styled.div`
-	width: 100%;
-	height: 80px;
-	display: flex;
-	align-items: center;
-`
-
-export const StudentTitleText = styled.span`
-	color: #274168;
-	font-family: 'Open Sans', sans-serif;
-	font-weight: 800;
-	font-size: 34px;
-	margin-left: 30px;
-`
-
-export const StudentClassify = styled.div`
-	display: flex;
-	justify-content: center;
-	margin-top: 25px;
-	margin-bottom: 30px;
-`
-
-export const StudentLine = styled.div`
-	width: 68vw;
-	height: 1.5px;
-	background-color: #ccc;
-
-	@media (max-width: 500px) {
-		width: 90vw;
-	}
-`
-
-export const StudentListWrap = styled.div`
-	width: 90%;
-	height: fit-content;
-	display: flex;
-	flex-direction: column;
-	margin-top: 20px;
-`
-
-export const StudentList = styled.ul`
-	margin: 30px 0 0 50px;
-	font-weight: 600;
-`
-
-export const StudentLink = styled(Link)`
-	color: #0038ff;
-	text-decoration: none;
-	cursor: pointer;
-`
-
-export const StudentListItem = styled.li`
-	margin-bottom: 18px;
-	color: #0038ff;
-`
diff --git a/layout/teacher/style.ts b/layout/teacher/style.ts
deleted file mode 100644
index 0e6a814..0000000
--- a/layout/teacher/style.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-import Link from 'next/link'
-import styled from 'styled-components'
-
-export const TeacherWrap = styled.div`
-	display: flex;
-`
-
-export const TeacherLine = styled.div`
-	width: 68vw;
-	height: 1.5px;
-	background-color: #ccc;
-
-	@media (max-width: 500px) {
-		width: 90vw;
-	}
-`
-
-export const TeacherTitleWrap = styled.div`
-	width: 100%;
-	height: 80px;
-	display: flex;
-	align-items: center;
-`
-
-export const TeacherTitleText = styled.span`
-	color: #274168;
-	font-family: 'Open Sans', sans-serif;
-	font-weight: 800;
-	font-size: 34px;
-	margin-left: 30px;
-`
-
-export const Classify = styled.div`
-	display: flex;
-	justify-content: center;
-	margin-top: 25px;
-	margin-bottom: 30px;
-`
-
-export const TeacherWarnText = styled.span`
-	font-weight: 700;
-	margin: 20px 0 10px 30px;
-	margin-right: auto;
-	font-size: 13px;
-	color: red;
-`
-
-export const TeacherList = styled.div`
-	width: 90%;
-	height: fit-content;
-	display: flex;
-	flex-direction: column;
-	margin-top: 20px;
-`
-
-export const TeacherDetailList = styled.ul`
-	margin: 30px 0 0 50px;
-	font-weight: 600;
-`
-
-export const TeacherListItem = styled.li`
-	margin-bottom: 18px;
-	color: #0038ff;
-`
-
-export const TeacherLink = styled(Link)`
-	color: #0038ff;
-	text-decoration: none;
-	cursor: pointer;
-`
diff --git a/layout/update/style.ts b/layout/update.style.ts
similarity index 100%
rename from layout/update/style.ts
rename to layout/update.style.ts
diff --git a/layout/user/style.ts b/layout/user.style.ts
similarity index 100%
rename from layout/user/style.ts
rename to layout/user.style.ts
diff --git a/layout/version/detail/style.ts b/layout/version.style.ts
similarity index 59%
rename from layout/version/detail/style.ts
rename to layout/version.style.ts
index 8555db4..5c98e83 100644
--- a/layout/version/detail/style.ts
+++ b/layout/version.style.ts
@@ -1,10 +1,28 @@
+import Link from 'next/link'
 import styled from 'styled-components'
 
-export const DocsWrap = styled.div`
+export const VersionList = styled.li`
+	display: flex;
+	margin-bottom: 30px;
+
+	span {
+		display: block;
+		width: 300px;
+		font-weight: 600;
+	}
+`
+
+export const VersionLink = styled(Link)`
+	font-weight: 600;
+	text-decoration: none;
+	color: blue;
+`
+
+export const VersionWrap = styled.div`
 	display: flex;
 `
 
-export const DocsLine = styled.div`
+export const VersionLine = styled.div`
 	width: 68vw;
 	height: 1.5px;
 	background-color: #ccc;
@@ -13,14 +31,14 @@ export const DocsLine = styled.div`
 		width: 90vw;
 	}
 `
-export const DocsTitleWrap = styled.div`
+export const VersionTitleWrap = styled.div`
 	width: 100%;
 	height: 80px;
 	display: flex;
 	align-items: center;
 `
 
-export const DocsTitleText = styled.span`
+export const VersionTitleText = styled.span`
 	color: #274168;
 	font-family: 'Open Sans', sans-serif;
 	font-weight: 800;
@@ -32,7 +50,7 @@ export const DocsTitleText = styled.span`
 	}
 `
 
-export const DocsMenu = styled.div`
+export const VersionMenu = styled.div`
 	margin-left: auto;
 	margin-right: 2vw;
 `
@@ -44,7 +62,7 @@ export const Classify = styled.div`
 	margin-bottom: 30px;
 `
 
-export const DocsContentsWrap = styled.div`
+export const VersionContentsWrap = styled.div`
 	width: 90%;
 	height: fit-content;
 	display: flex;
@@ -52,7 +70,7 @@ export const DocsContentsWrap = styled.div`
 	margin-top: 20px;
 `
 
-export const DocsContentsLoadWrap = styled.div`
+export const VersionContentsLoadWrap = styled.div`
 	display: flex;
 	flex-direction: column;
 `
@@ -63,7 +81,7 @@ export const LastUpdateDate = styled.span`
 	margin-left: auto;
 `
 
-export const DocsContents = styled.div`
+export const VersionContents = styled.div`
 	margin: 20px 0 20px 0;
 	white-space: pre-wrap;
 
diff --git a/layout/version/style.ts b/layout/version/style.ts
deleted file mode 100644
index 69b748c..0000000
--- a/layout/version/style.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import Link from 'next/link'
-import styled from 'styled-components'
-
-export const VersionList = styled.li`
-	display: flex;
-	margin-bottom: 30px;
-
-	span {
-		display: block;
-		width: 300px;
-		font-weight: 600;
-	}
-`
-
-export const VersionLink = styled(Link)`
-	font-weight: 600;
-	text-decoration: none;
-	color: blue;
-`

From 33dd987a34ea44c7a31e51ecb00c7b64f12bee37 Mon Sep 17 00:00:00 2001
From: Ubinquitous <ubinquitous1@gmail.com>
Date: Sat, 8 Apr 2023 20:08:29 +0900
Subject: [PATCH 03/20] ADD : Layout page

---
 layout/AccidentLayout.tsx                     |  45 +++++
 layout/ClubLayout.tsx                         |  52 ++++++
 ...{create.style.ts => CreateLayout.style.ts} |  74 +++++++-
 layout/CreateLayout.tsx                       | 169 ++++++++++++++++++
 layout/{docs.style.ts => DocsLayout.style.ts} |   0
 layout/DocsLayout.tsx                         |  45 +++++
 layout/FrameLayout.tsx                        |  40 +++++
 ...{mypage.style.ts => MyPageLayout.style.ts} |   0
 layout/MyPageLayout.tsx                       |  63 +++++++
 ...{static.style.ts => StaticLayout.style.ts} |   0
 10 files changed, 483 insertions(+), 5 deletions(-)
 create mode 100644 layout/AccidentLayout.tsx
 create mode 100644 layout/ClubLayout.tsx
 rename layout/{create.style.ts => CreateLayout.style.ts} (81%)
 create mode 100644 layout/CreateLayout.tsx
 rename layout/{docs.style.ts => DocsLayout.style.ts} (100%)
 create mode 100644 layout/DocsLayout.tsx
 create mode 100644 layout/FrameLayout.tsx
 rename layout/{mypage.style.ts => MyPageLayout.style.ts} (100%)
 create mode 100644 layout/MyPageLayout.tsx
 rename layout/{static.style.ts => StaticLayout.style.ts} (100%)

diff --git a/layout/AccidentLayout.tsx b/layout/AccidentLayout.tsx
new file mode 100644
index 0000000..e7aec83
--- /dev/null
+++ b/layout/AccidentLayout.tsx
@@ -0,0 +1,45 @@
+import { AccodianMenu, Aside, Board, Classify, ScrollBtn, SubFooter } from '@/components'
+import Docs from '@/types/docs.type'
+import React from 'react'
+import * as S from './StaticLayout.style'
+
+interface AccidentLayoutPropsType {
+	years: number[]
+	docs: Docs[]
+}
+
+const AccidentLayout = ({ years, docs }: AccidentLayoutPropsType) => {
+	return (
+		<S.StaticWrap>
+			<Board>
+				<S.StaticTitleWrap>
+					<S.StaticTitleText>부마위키:사건/사고</S.StaticTitleText>
+				</S.StaticTitleWrap>
+				<S.StaticClassify>
+					<Classify>사건/사고</Classify>
+				</S.StaticClassify>
+				<S.StaticLine />
+				<S.StaticListWrap>
+					{years.map((year) => (
+						<AccodianMenu name={`${year}년 사건/사고`} key={year} isOpen={true}>
+							{docs.map((accident: Docs, index) => (
+								<S.StaticList key={index}>
+									{accident.enroll === year && (
+										<S.StaticListItem>
+											<S.StaticLink href={`/docs/${accident.title}`}>{accident.title}</S.StaticLink>
+										</S.StaticListItem>
+									)}
+								</S.StaticList>
+							))}
+						</AccodianMenu>
+					))}
+				</S.StaticListWrap>
+				<SubFooter />
+			</Board>
+			<ScrollBtn />
+			<Aside />
+		</S.StaticWrap>
+	)
+}
+
+export default AccidentLayout
diff --git a/layout/ClubLayout.tsx b/layout/ClubLayout.tsx
new file mode 100644
index 0000000..788bcf8
--- /dev/null
+++ b/layout/ClubLayout.tsx
@@ -0,0 +1,52 @@
+import { AccodianMenu, Aside, Board, Classify, ScrollBtn, SubFooter } from '@/components'
+import Docs from '@/types/docs.type'
+import React from 'react'
+import * as S from './StaticLayout.style'
+
+interface ClubLayoutPropsType {
+	major_club: Docs[]
+	custom_club: Docs[]
+}
+
+const ClubLayout = ({ major_club, custom_club }: ClubLayoutPropsType) => {
+	return (
+		<S.StaticWrap>
+			<Board>
+				<S.StaticTitleWrap>
+					<S.StaticTitleText>부마위키:동아리</S.StaticTitleText>
+				</S.StaticTitleWrap>
+				<S.StaticClassify>
+					<Classify>동아리</Classify>
+				</S.StaticClassify>
+				<S.StaticLine />
+				<S.StaticListWrap>
+					<AccodianMenu name={`전공동아리`}>
+						<S.StaticList>
+							{major_club.map((club: Docs) => (
+								<S.StaticListItem key={club.id}>
+									<S.StaticLink href={`/docs/${club.title}`}>{club.title}</S.StaticLink>
+								</S.StaticListItem>
+							))}
+						</S.StaticList>
+					</AccodianMenu>
+				</S.StaticListWrap>
+				<S.StaticListWrap>
+					<AccodianMenu name={`사설동아리`}>
+						<S.StaticList>
+							{custom_club.map((club: Docs) => (
+								<S.StaticListItem key={club.id}>
+									<S.StaticLink href={`/docs/${club.title}`}>{club.title}</S.StaticLink>
+								</S.StaticListItem>
+							))}
+						</S.StaticList>
+					</AccodianMenu>
+				</S.StaticListWrap>
+				<SubFooter />
+			</Board>
+			<ScrollBtn />
+			<Aside />
+		</S.StaticWrap>
+	)
+}
+
+export default ClubLayout
diff --git a/layout/create.style.ts b/layout/CreateLayout.style.ts
similarity index 81%
rename from layout/create.style.ts
rename to layout/CreateLayout.style.ts
index 0412a42..f4139a4 100644
--- a/layout/create.style.ts
+++ b/layout/CreateLayout.style.ts
@@ -1,4 +1,4 @@
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
 
 export const CreateWrap = styled.div`
 	display: flex;
@@ -11,6 +11,71 @@ export const CreateTitleWrap = styled.div`
 	align-items: center;
 `
 
+export const CreateTB = styled.table`
+	width: 68vw;
+
+	@media (max-width: 500px) {
+		width: 90vw;
+	}
+	background-color: #ccc;
+`
+
+export const CreateTR = styled.tr`
+	height: 40px;
+	background-color: white;
+`
+
+export const CreateTD = styled.td`
+	width: 100%;
+	height: 90%;
+	padding-left: 20px;
+	border: none;
+	font-family: 'Open Sans', sans-serif;
+	white-space: pre-wrap;
+	font-size: 14px;
+	overflow: scroll;
+
+	@media (max-width: 500px) {
+		font-size: 10px;
+	}
+	/* height: 100%; */
+`
+
+export const CreateTDTitle = styled.td`
+	width: 8%;
+	background-color: #274168;
+	color: white;
+	text-align: center;
+	font-weight: 800;
+
+	@media (max-width: 500px) {
+		font-size: 12px;
+		width: 70px;
+	}
+`
+
+export const CreateTDDisplay = styled.td`
+	display: flex;
+`
+
+export const CreateTDDiv = styled.td`
+	width: 100%;
+	/* height: 90%; */
+	/* padding-left: 20px; */
+	border: none;
+	font-family: 'Open Sans', sans-serif;
+	white-space: pre-wrap;
+	font-size: 14px;
+	overflow: scroll;
+
+	@media (max-width: 500px) {
+		font-size: 10px;
+	}
+	height: 400px;
+`
+
+//========================================================
+
 export const CreateTitleText = styled.span`
 	color: #274168;
 	font-family: 'Open Sans', sans-serif;
@@ -48,9 +113,9 @@ export const CreateTableTRInput = styled.input`
 
 export const CreateTableTRTextarea = styled.textarea`
 	width: 100%;
-	height: 90%;
+	height: 400px;
 	outline: none;
-	padding-left: 20px;
+	/* padding-left: 20px; */
 	resize: none;
 	border: none;
 	font-family: 'Open Sans', sans-serif;
@@ -302,8 +367,7 @@ export const CreateSubmit = styled.div`
 export const CreateWarn = styled.span`
 	color: red;
 	font-weight: 800;
-	margin-top: 10px;
-	margin-right: auto;
+	margin: 10px auto 0 0;
 
 	@media (max-width: 500px) {
 		font-size: 8px;
diff --git a/layout/CreateLayout.tsx b/layout/CreateLayout.tsx
new file mode 100644
index 0000000..b9ac27c
--- /dev/null
+++ b/layout/CreateLayout.tsx
@@ -0,0 +1,169 @@
+import React from 'react'
+import { Aside, Board, ScrollBtn, SubFooter } from '@/components'
+import * as S from './CreateLayout.style'
+import * as util from '@/utils'
+import DragDrop, { IFileTypes } from '@/components/DragDrop'
+import UserType from '@/types/user.type'
+import CreateDocsType from '@/types/create.type'
+import FrameType from '@/types/frame.type'
+
+interface CreateLayoutPropsType {
+	userInfo: UserType
+	setDocs: React.Dispatch<React.SetStateAction<CreateDocsType>>
+	docs: CreateDocsType
+	createForm: {
+		id: string
+		title: string
+	}[]
+	years: number[]
+	getFiles: (file: IFileTypes[]) => void
+	size: FrameType
+	setSize: React.Dispatch<React.SetStateAction<FrameType>>
+	makeFrame: () => void
+	onClickCreateDocs: () => void
+	changeDocsType: (e: React.ChangeEvent<HTMLInputElement | HTMLOptionElement>) => void
+}
+
+const CreateLayout = ({
+	userInfo,
+	setDocs,
+	docs,
+	createForm,
+	years,
+	getFiles,
+	size,
+	setSize,
+	makeFrame,
+	onClickCreateDocs,
+	changeDocsType,
+}: CreateLayoutPropsType) => {
+	return (
+		<S.CreateWrap>
+			<Board>
+				<S.CreateTitleWrap>
+					<S.CreateTitleText>문서 생성</S.CreateTitleText>
+				</S.CreateTitleWrap>
+				<S.CreateTB>
+					<tbody>
+						<S.CreateTR>
+							<S.CreateTDTitle>분류</S.CreateTDTitle>
+							<S.CreateTDDisplay>
+								{userInfo.authority === 'ADMIN' && (
+									<>
+										<label htmlFor="STUDENT">학생</label>
+										<S.CreateTableRadio type="radio" onChange={(e) => setDocs({ ...docs, docsType: e.target.id })} id="STUDENT" name="radio" />
+										<label htmlFor="READONLY">관리자</label>
+										<S.CreateTableRadio type="radio" onChange={(e) => setDocs({ ...docs, docsType: e.target.id })} id="READONLY" name="radio" />
+									</>
+								)}
+								{createForm.map((info, index) => (
+									<S.CreateTableRadioBox key={index}>
+										<label htmlFor={info.id}>{info.title}</label>
+										<S.CreateTableRadio type="radio" onChange={(e) => changeDocsType(e)} id={info.id} name="radio" />
+									</S.CreateTableRadioBox>
+								))}
+								<S.CreateTableSelectBox>
+									{createForm.map((info, index) => (
+										<S.CreateTableSelectOption key={index} onChange={(e) => changeDocsType(e as React.ChangeEvent<HTMLOptionElement>)} id={info.id}>
+											{info.title}
+										</S.CreateTableSelectOption>
+									))}
+								</S.CreateTableSelectBox>
+							</S.CreateTDDisplay>
+						</S.CreateTR>
+						<S.CreateTR>
+							<S.CreateTDTitle>문서 이름</S.CreateTDTitle>
+							<S.CreateTD>
+								<S.CreateTableTRInputContents onChange={(e) => setDocs({ ...docs, title: e.target.value })} value={docs.title} />
+							</S.CreateTD>
+						</S.CreateTR>
+						<S.CreateTR>
+							<S.CreateTDTitle>연도</S.CreateTDTitle>
+							<S.CreateTDDisplay>
+								{years.map((year, index) => (
+									<div key={index}>
+										<S.EnrollLabel htmlFor={`${year}`}>{year}년</S.EnrollLabel>
+										<S.CreateTableRadio
+											type="radio"
+											onChange={(e) => setDocs({ ...docs, enroll: parseInt(e.target.id) })}
+											id={`${year}`}
+											name="radios"
+										/>
+									</div>
+								))}
+							</S.CreateTDDisplay>
+						</S.CreateTR>
+						<S.CreateTR>
+							<S.CreateTDTitle>예시</S.CreateTDTitle>
+							<S.CreateTD>
+								<S.ExampleImage src="/images/references.png" alt="문서 양식" />
+							</S.CreateTD>
+						</S.CreateTR>
+						<S.CreateTR>
+							<S.CreateTDTitle>이미지</S.CreateTDTitle>
+							<S.CreateTD>
+								<DragDrop getFiles={getFiles} />
+							</S.CreateTD>
+						</S.CreateTR>
+						{docs.docsType === 'FRAME' && (
+							<S.CreateTR>
+								<S.CreateTDTitle>틀 규격</S.CreateTDTitle>
+								<S.CreateTD>
+									<S.FrameInputBox>
+										<S.FrameInputWrap>
+											<S.FrameText>열</S.FrameText>
+											<S.FrameInput
+												type="number"
+												min="2"
+												max="5"
+												value={size.column}
+												onChange={(e) => setSize({ ...size, column: parseInt(e.target.value) })}
+											/>
+											<S.FrameText>행</S.FrameText>
+											<S.FrameInput
+												type="number"
+												min="2"
+												max="10"
+												value={size.row}
+												onChange={(e) => setSize({ ...size, row: parseInt(e.target.value) })}
+											/>
+										</S.FrameInputWrap>
+									</S.FrameInputBox>
+									<S.CreateFrameButton onClick={() => makeFrame()}>틀생성/초기화</S.CreateFrameButton>
+								</S.CreateTD>
+							</S.CreateTR>
+						)}
+						<S.CreateTR>
+							<S.CreateTDTitle>문서 내용</S.CreateTDTitle>
+							<S.CreateTD>
+								<S.CreateTableTRTextarea
+									onKeyDown={(e) => {
+										util.onKeyDownUseTab(e)
+									}}
+									onChange={(e) => setDocs({ ...docs, contents: util.autoClosingTag(e) })}
+									value={docs.contents}
+								/>
+							</S.CreateTD>
+						</S.CreateTR>
+						<S.CreateTR>
+							<S.CreateTDTitle>미리보기</S.CreateTDTitle>
+							<S.CreateTDDiv
+								dangerouslySetInnerHTML={{
+									__html: util.documentation(docs.contents),
+								}}></S.CreateTDDiv>
+						</S.CreateTR>
+					</tbody>
+				</S.CreateTB>
+				<S.CreateSubmit>
+					<S.CreateWarn>※ 필독! 문서 내 부적절한 내용을 서술하는 사용자는 부마위키 이용에 제한을 받을 수 있습니다 ※</S.CreateWarn>
+					<S.CreateButton onClick={onClickCreateDocs}>문서 생성</S.CreateButton>
+				</S.CreateSubmit>
+				<SubFooter />
+			</Board>
+			<ScrollBtn />
+			<Aside />
+		</S.CreateWrap>
+	)
+}
+
+export default CreateLayout
diff --git a/layout/docs.style.ts b/layout/DocsLayout.style.ts
similarity index 100%
rename from layout/docs.style.ts
rename to layout/DocsLayout.style.ts
diff --git a/layout/DocsLayout.tsx b/layout/DocsLayout.tsx
new file mode 100644
index 0000000..33e182e
--- /dev/null
+++ b/layout/DocsLayout.tsx
@@ -0,0 +1,45 @@
+import { AccodianMenu, Aside, Board, Classify, DetailBtn, ScrollBtn, SubFooter } from '@/components'
+import React from 'react'
+import * as S from './DocsLayout.style'
+import * as util from '@/utils'
+import Docs from '@/types/docs.type'
+import { decodeContents } from '@/utils/document/requestContents'
+
+interface DocsLayoutPropsType {
+	docs: Docs
+}
+
+const DocsLayout = ({ docs }: DocsLayoutPropsType) => {
+	return (
+		<S.DocsWrap>
+			<Board>
+				<S.DocsTitleWrap>
+					<S.DocsTitleText>{docs?.title.replace(/&\$\^%/gi, '"')}</S.DocsTitleText>
+					<S.DocsMenu>
+						<DetailBtn docsId={docs?.id || -1} />
+					</S.DocsMenu>
+				</S.DocsTitleWrap>
+				<S.Classify>
+					<Classify>{util.typeEditor(docs?.docsType as string)}</Classify>
+				</S.Classify>
+				<S.DocsLine />
+				<S.DocsContentsWrap>
+					<S.DocsContentsLoadWrap>
+						<S.LastUpdateDate>마지막 수정 : {util.dateParser(docs !== undefined ? docs.lastModifiedAt : '')}</S.LastUpdateDate>
+						<AccodianMenu name="내용">
+							<S.DocsContents
+								dangerouslySetInnerHTML={{
+									__html: util.documentation(decodeContents(docs?.contents || '')),
+								}}></S.DocsContents>
+						</AccodianMenu>
+					</S.DocsContentsLoadWrap>
+				</S.DocsContentsWrap>
+				<SubFooter />
+			</Board>
+			<ScrollBtn />
+			<Aside />
+		</S.DocsWrap>
+	)
+}
+
+export default DocsLayout
diff --git a/layout/FrameLayout.tsx b/layout/FrameLayout.tsx
new file mode 100644
index 0000000..676aca1
--- /dev/null
+++ b/layout/FrameLayout.tsx
@@ -0,0 +1,40 @@
+import { AccodianMenu, Aside, Board, Classify, ScrollBtn, SubFooter } from '@/components'
+import Docs from '@/types/docs.type'
+import React from 'react'
+import * as S from './StaticLayout.style'
+
+interface FrameLayoutPropsType {
+	docs: Docs[]
+}
+
+const FrameLayout = ({ docs }: FrameLayoutPropsType) => {
+	return (
+		<S.StaticWrap>
+			<Board>
+				<S.StaticTitleWrap>
+					<S.StaticTitleText>부마위키:틀</S.StaticTitleText>
+				</S.StaticTitleWrap>
+				<S.StaticClassify>
+					<Classify>틀</Classify>
+				</S.StaticClassify>
+				<S.StaticLine />
+				<S.StaticListWrap>
+					<AccodianMenu name={`틀`}>
+						<S.StaticList>
+							{docs.map((docs: Docs) => (
+								<S.StaticListItem key={docs.id}>
+									<S.StaticLink href={`/docs/${docs.title}`}>{docs.title}</S.StaticLink>
+								</S.StaticListItem>
+							))}
+						</S.StaticList>
+					</AccodianMenu>
+				</S.StaticListWrap>
+				<SubFooter />
+			</Board>
+			<ScrollBtn />
+			<Aside />
+		</S.StaticWrap>
+	)
+}
+
+export default FrameLayout
diff --git a/layout/mypage.style.ts b/layout/MyPageLayout.style.ts
similarity index 100%
rename from layout/mypage.style.ts
rename to layout/MyPageLayout.style.ts
diff --git a/layout/MyPageLayout.tsx b/layout/MyPageLayout.tsx
new file mode 100644
index 0000000..55c003f
--- /dev/null
+++ b/layout/MyPageLayout.tsx
@@ -0,0 +1,63 @@
+import React from 'react'
+import * as S from './MyPageLayout.style'
+import { AccodianMenu, Aside, Board, Classify, ScrollBtn } from '@/components'
+
+const MyPageLayout = () => {
+	return (
+		<S.MyPageWrap>
+			<Board>
+				<S.MyPageTitleWrap>
+					<S.MyPageTitleText>{`마이페이지 : ${user.nickName || '비로그인 유저'}`}</S.MyPageTitleText>
+				</S.MyPageTitleWrap>
+				<Classify>{user.authority}</Classify>
+				<S.MyPageLine />
+				<S.MyPageInfoWrap>
+					<AccodianMenu name={'정보'}>
+						<S.MyPageInfoLoadWrap>
+							{user.id ? (
+								<>
+									<span>
+										이름은 {user.nickName}이며, 부마위키의{' '}
+										{user.authority === 'ADMIN' ? '관리자' : user.authority === 'BANNED' ? '읽기전용 사용자' : '사용자'} 중 한 명이다.
+									</span>
+									<span>
+										이 유저의 아이디는 {user.id}이며, 이메일은 {user.email}이다.
+									</span>
+									<br />
+									<div>
+										<S.LogoutText onClick={() => mutate()}>로그아웃</S.LogoutText>
+									</div>
+								</>
+							) : (
+								<span>이 유저는 로그인을 하지 않은 유저다. 로그인을 하면 문서를 생성하고 편집할 수 있다.</span>
+							)}
+						</S.MyPageInfoLoadWrap>
+					</AccodianMenu>
+					{user.id ? (
+						<AccodianMenu name={'기여한 문서'}>
+							<S.ContributeWrap>
+								<span>이 유저가 기여한 문서의 정보들이다.</span>
+								<S.ContributeList>
+									{user.contributeDocs.map((docs: Contributors, index: number) => (
+										<span key={index}>
+											문서명 :&nbsp;
+											<S.ContributeLink href={`/docs/${docs.title}`}>{docs.title}</S.ContributeLink>
+											<br />
+											수정 날짜 : {util.dateParser(docs.createTime)}
+										</span>
+									))}
+								</S.ContributeList>
+							</S.ContributeWrap>
+						</AccodianMenu>
+					) : (
+						''
+					)}
+				</S.MyPageInfoWrap>
+			</Board>
+			<ScrollBtn />
+			<Aside />
+		</S.MyPageWrap>
+	)
+}
+
+export default MyPageLayout
diff --git a/layout/static.style.ts b/layout/StaticLayout.style.ts
similarity index 100%
rename from layout/static.style.ts
rename to layout/StaticLayout.style.ts

From e8512b3a690e3e4d3aac7f44fced7308db6a04bd Mon Sep 17 00:00:00 2001
From: Ubinquitous <ubinquitous1@gmail.com>
Date: Sat, 8 Apr 2023 20:08:43 +0900
Subject: [PATCH 04/20] =?UTF-8?q?DELETE=20:=20Layout=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/accident/index.tsx |  35 +--------
 pages/club/index.tsx     |  54 ++------------
 pages/create/index.tsx   | 151 +++++----------------------------------
 pages/docs/[title].tsx   |  33 +--------
 pages/frame/index.tsx    |  33 +--------
 pages/mypage/index.tsx   |  60 +---------------
 6 files changed, 36 insertions(+), 330 deletions(-)

diff --git a/pages/accident/index.tsx b/pages/accident/index.tsx
index 90aee77..7758098 100644
--- a/pages/accident/index.tsx
+++ b/pages/accident/index.tsx
@@ -1,14 +1,13 @@
 import * as docs from '@/api/getDocs'
-import * as S from '../../layout/accident/style'
 import * as util from '@/utils'
 
 import React from 'react'
 import Docs from '@/types/docs.type'
 import DocsPropsType from '@/types/static/docs.props.type'
 import { NextSeo, NextSeoProps } from 'next-seo'
-import { AccodianMenu, Aside, Board, Classify, ScrollBtn, SubFooter } from '@/components'
+import AccidentLayout from '@/layout/AccidentLayout'
 
-const Accident = ({ docs, years }: DocsPropsType) => {
+const Accident = (props: DocsPropsType) => {
 	const seoConfig: NextSeoProps = {
 		title: '부마위키 - 사건/사고',
 		description: '교내에서 일어나는 모든 사건/사고를 담은 페이지입니다.',
@@ -26,35 +25,7 @@ const Accident = ({ docs, years }: DocsPropsType) => {
 	return (
 		<>
 			<NextSeo {...seoConfig} />
-			<S.AccidentWrap>
-				<Board>
-					<S.AccidentTitleWrap>
-						<S.AccidentTitleText>부마위키:사건/사고</S.AccidentTitleText>
-					</S.AccidentTitleWrap>
-					<S.AccidentClassify>
-						<Classify>사건/사고</Classify>
-					</S.AccidentClassify>
-					<S.AccidentLine />
-					<S.AccidentListWrap>
-						{years.map((year) => (
-							<AccodianMenu name={`${year}년 사건/사고`} key={year} isOpen={true}>
-								{docs.map((accident: Docs, index) => (
-									<S.AccidentList key={index}>
-										{accident.enroll === year && (
-											<S.AccidentListItem>
-												<S.AccidentLink href={`/docs/${accident.title}`}>{accident.title}</S.AccidentLink>
-											</S.AccidentListItem>
-										)}
-									</S.AccidentList>
-								))}
-							</AccodianMenu>
-						))}
-					</S.AccidentListWrap>
-					<SubFooter />
-				</Board>
-				<ScrollBtn />
-				<Aside />
-			</S.AccidentWrap>
+			<AccidentLayout {...props} />
 		</>
 	)
 }
diff --git a/pages/club/index.tsx b/pages/club/index.tsx
index f39096b..df65022 100644
--- a/pages/club/index.tsx
+++ b/pages/club/index.tsx
@@ -1,19 +1,16 @@
-import * as S from '../../layout/club/style'
 import * as getApi from '@/api/getDocs'
 
 import React from 'react'
 import Docs from '@/types/docs.type'
 import { NextSeo, NextSeoProps } from 'next-seo'
-import { AccodianMenu, Aside, Board, Classify, ScrollBtn, SubFooter } from '@/components'
+import ClubLayout from '@/layout/ClubLayout'
 
 interface ClubDocsPropsType {
-	docs: {
-		major_club: Docs[]
-		custom_club: Docs[]
-	}
+	major_club: Docs[]
+	custom_club: Docs[]
 }
 
-const Club = ({ docs }: ClubDocsPropsType) => {
+const Club = (props: ClubDocsPropsType) => {
 	const seoConfig: NextSeoProps = {
 		title: '부마위키 - 동아리',
 		description: '교내에서 활동하는 모든 동아리를 담은 페이지입니다.',
@@ -31,42 +28,7 @@ const Club = ({ docs }: ClubDocsPropsType) => {
 	return (
 		<>
 			<NextSeo {...seoConfig} />
-			<S.ClubWrap>
-				<Board>
-					<S.ClubTitleWrap>
-						<S.ClubTitleText>부마위키:동아리</S.ClubTitleText>
-					</S.ClubTitleWrap>
-					<S.ClubClassify>
-						<Classify>동아리</Classify>
-					</S.ClubClassify>
-					<S.ClubLine />
-					<S.ClubListWrap>
-						<AccodianMenu name={`전공동아리`}>
-							<S.ClubList>
-								{docs.major_club.map((club: Docs) => (
-									<S.ClubListItem key={club.id}>
-										<S.ClubLink href={`/docs/${club.title}`}>{club.title}</S.ClubLink>
-									</S.ClubListItem>
-								))}
-							</S.ClubList>
-						</AccodianMenu>
-					</S.ClubListWrap>
-					<S.ClubListWrap>
-						<AccodianMenu name={`사설동아리`}>
-							<S.ClubList>
-								{docs.custom_club.map((club: Docs) => (
-									<S.ClubListItem key={club.id}>
-										<S.ClubLink href={`/docs/${club.title}`}>{club.title}</S.ClubLink>
-									</S.ClubListItem>
-								))}
-							</S.ClubList>
-						</AccodianMenu>
-					</S.ClubListWrap>
-					<SubFooter />
-				</Board>
-				<ScrollBtn />
-				<Aside />
-			</S.ClubWrap>
+			<ClubLayout {...props} />
 		</>
 	)
 }
@@ -77,10 +39,8 @@ export async function getStaticProps() {
 
 	return {
 		props: {
-			docs: {
-				major_club,
-				custom_club,
-			},
+			major_club,
+			custom_club,
 		},
 	}
 }
diff --git a/pages/create/index.tsx b/pages/create/index.tsx
index 7f410b2..b4b99d9 100644
--- a/pages/create/index.tsx
+++ b/pages/create/index.tsx
@@ -1,20 +1,19 @@
 import * as api from '@/api/editDocs'
 import * as util from '@/utils'
-import * as S from '../../layout/create/style'
 
 import React from 'react'
 import { useMutation } from 'react-query'
 import CreateDocsType from '@/types/create.type'
-import Frame from '@/types/frame.type'
+import FrameType from '@/types/frame.type'
 import sizeInitState from '@/state/sizeInitState'
 import { useRouter } from 'next/router'
 import createInitState from '@/state/createInitState'
 import createDocsForm from '@/utils/document/createDocsForm'
 import { NextSeo, NextSeoProps } from 'next-seo'
 import useUser from '@/hooks/useUser'
-import { Aside, Board, ScrollBtn, SubFooter } from '@/components'
 import createFormInitState from '@/state/createFormInitState'
-import DragDrop, { IFileTypes } from '@/components/DragDrop'
+import { IFileTypes } from '@/components/DragDrop'
+import CreateLayout from '@/layout/CreateLayout'
 
 const Create = () => {
 	const router = useRouter()
@@ -22,14 +21,14 @@ const Create = () => {
 	const years = util.getAllYear()
 
 	const [parentFiles, setParentFiles] = React.useState<IFileTypes[]>([])
-	const [size, setSize] = React.useState<Frame>(sizeInitState)
+	const [size, setSize] = React.useState<FrameType>(sizeInitState)
 	const [docs, setDocs] = React.useState<CreateDocsType>({
 		title: (query.name as string) || '',
 		...createInitState,
 	})
 	const { user: userInfo, isLogined } = useUser()
 
-	const setFiles = (file: any) => {
+	const setFiles = (file: IFileTypes[]) => {
 		setParentFiles(file)
 	}
 
@@ -56,7 +55,7 @@ const Create = () => {
 				enroll,
 				contents,
 				docsType,
-				files,
+				files: parentFiles,
 			})
 		)
 	}
@@ -96,131 +95,19 @@ const Create = () => {
 	return (
 		<>
 			<NextSeo {...seoConfig} />
-			<S.CreateWrap>
-				<Board>
-					<S.CreateTitleWrap>
-						<S.CreateTitleText>문서 생성</S.CreateTitleText>
-					</S.CreateTitleWrap>
-					<S.CreateTB>
-						<tbody>
-							<S.CreateTR>
-								<S.CreateTDTitle>분류</S.CreateTDTitle>
-								<S.CreateTDDisplay>
-									{userInfo.authority === 'ADMIN' && (
-										<>
-											<label htmlFor="STUDENT">학생</label>
-											<S.CreateTableRadio type="radio" onChange={(e) => setDocs({ ...docs, docsType: e.target.id })} id="STUDENT" name="radio" />
-											<label htmlFor="READONLY">관리자</label>
-											<S.CreateTableRadio type="radio" onChange={(e) => setDocs({ ...docs, docsType: e.target.id })} id="READONLY" name="radio" />
-										</>
-									)}
-									{createFormInitState.map((info, index) => (
-										<S.CreateTableRadioBox key={index}>
-											<label htmlFor={info.id}>{info.title}</label>
-											<S.CreateTableRadio type="radio" onChange={(e) => changeDocsType(e)} id={info.id} name="radio" />
-										</S.CreateTableRadioBox>
-									))}
-									<S.CreateTableSelectBox>
-										{createFormInitState.map((info, index) => (
-											<S.CreateTableSelectOption key={index} onChange={(e) => changeDocsType(e as React.ChangeEvent<HTMLOptionElement>)} id={info.id}>
-												{info.title}
-											</S.CreateTableSelectOption>
-										))}
-									</S.CreateTableSelectBox>
-								</S.CreateTDDisplay>
-							</S.CreateTR>
-							<S.CreateTR>
-								<S.CreateTDTitle>문서 이름</S.CreateTDTitle>
-								<S.CreateTD>
-									<S.CreateTableTRInputContents onChange={(e) => setDocs({ ...docs, title: e.target.value })} value={docs.title} />
-								</S.CreateTD>
-							</S.CreateTR>
-							<S.CreateTR>
-								<S.CreateTDTitle>연도</S.CreateTDTitle>
-								<S.CreateTDDisplay>
-									{years.map((year, index) => (
-										<div key={index}>
-											<S.EnrollLabel htmlFor={`${year}`}>{year}년</S.EnrollLabel>
-											<S.CreateTableRadio
-												type="radio"
-												onChange={(e) => setDocs({ ...docs, enroll: parseInt(e.target.id) })}
-												id={`${year}`}
-												name="radios"
-											/>
-										</div>
-									))}
-								</S.CreateTDDisplay>
-							</S.CreateTR>
-							<S.CreateTR>
-								<S.CreateTDTitle>예시</S.CreateTDTitle>
-								<S.CreateTD>
-									<S.ExampleImage src="/images/references.png" alt="문서 양식" />
-								</S.CreateTD>
-							</S.CreateTR>
-							<S.CreateTR>
-								<S.CreateTDTitle>이미지</S.CreateTDTitle>
-								<S.CreateTD>
-									<DragDrop getFiles={setFiles} />
-								</S.CreateTD>
-							</S.CreateTR>
-							{docs.docsType === 'FRAME' && (
-								<S.CreateTR>
-									<S.CreateTDTitle>틀 규격</S.CreateTDTitle>
-									<S.CreateTD>
-										<S.FrameInputBox>
-											<S.FrameInputWrap>
-												<S.FrameText>열</S.FrameText>
-												<S.FrameInput
-													type="number"
-													min="2"
-													max="5"
-													value={size.column}
-													onChange={(e) => setSize({ ...size, column: parseInt(e.target.value) })}
-												/>
-												<S.FrameText>행</S.FrameText>
-												<S.FrameInput
-													type="number"
-													min="2"
-													max="10"
-													value={size.row}
-													onChange={(e) => setSize({ ...size, row: parseInt(e.target.value) })}
-												/>
-											</S.FrameInputWrap>
-										</S.FrameInputBox>
-										<S.CreateFrameButton onClick={() => makeFrame()}>틀생성/초기화</S.CreateFrameButton>
-									</S.CreateTD>
-								</S.CreateTR>
-							)}
-							<S.CreateTR>
-								<S.CreateTDTitle>문서 내용</S.CreateTDTitle>
-								<S.CreateTD>
-									<S.CreateTableTRTextarea
-										onKeyDown={(e) => {
-											util.onKeyDownUseTab(e)
-										}}
-										onChange={(e) => setDocs({ ...docs, contents: util.autoClosingTag(e) })}
-										value={docs.contents}
-									/>
-								</S.CreateTD>
-							</S.CreateTR>
-							<S.CreateTR>
-								<S.CreateTDTitle>미리보기</S.CreateTDTitle>
-								<S.CreateTDDiv
-									dangerouslySetInnerHTML={{
-										__html: util.documentation(docs.contents),
-									}}></S.CreateTDDiv>
-							</S.CreateTR>
-						</tbody>
-					</S.CreateTB>
-					<S.CreateSubmit>
-						<S.CreateWarn>※ 필독! 문서 내 부적절한 내용을 서술하는 사용자는 부마위키 이용에 제한을 받을 수 있습니다 ※</S.CreateWarn>
-						<S.CreateButton onClick={onClickCreateDocs}>문서 생성</S.CreateButton>
-					</S.CreateSubmit>
-					<SubFooter />
-				</Board>
-				<ScrollBtn />
-				<Aside />
-			</S.CreateWrap>
+			<CreateLayout
+				userInfo={userInfo}
+				setDocs={setDocs}
+				docs={docs}
+				createForm={createFormInitState}
+				years={years}
+				getFiles={setFiles}
+				size={size}
+				setSize={setSize}
+				makeFrame={makeFrame}
+				onClickCreateDocs={onClickCreateDocs}
+				changeDocsType={changeDocsType}
+			/>
 		</>
 	)
 }
diff --git a/pages/docs/[title].tsx b/pages/docs/[title].tsx
index e81f5d4..875f999 100644
--- a/pages/docs/[title].tsx
+++ b/pages/docs/[title].tsx
@@ -1,14 +1,12 @@
 import * as util from '@/utils'
-import * as S from '../../layout/docs/style'
 import * as api from '@/api/getDocs'
 
 import React from 'react'
 import Docs from '@/types/docs.type'
-import { decodeContents } from '@/utils/document/requestContents'
 import { GetStaticProps } from 'next'
 import { NextSeo, NextSeoProps } from 'next-seo'
 import docsInitState from '@/state/docsInitState'
-import { AccodianMenu, Aside, Board, Classify, DetailBtn, ScrollBtn, SubFooter } from '@/components'
+import DocsLayout from '@/layout/DocsLayout'
 
 interface SingleDocsPropsType {
 	docs: Docs
@@ -33,34 +31,7 @@ const Doc = ({ docs }: SingleDocsPropsType) => {
 	return (
 		<>
 			<NextSeo {...seoConfig} />
-			<S.DocsWrap>
-				<Board>
-					<S.DocsTitleWrap>
-						<S.DocsTitleText>{docs?.title.replace(/&\$\^%/gi, '"')}</S.DocsTitleText>
-						<S.DocsMenu>
-							<DetailBtn docsId={docs?.id || -1} />
-						</S.DocsMenu>
-					</S.DocsTitleWrap>
-					<S.Classify>
-						<Classify>{util.typeEditor(docs?.docsType as string)}</Classify>
-					</S.Classify>
-					<S.DocsLine />
-					<S.DocsContentsWrap>
-						<S.DocsContentsLoadWrap>
-							<S.LastUpdateDate>마지막 수정 : {util.dateParser(docs !== undefined ? docs.lastModifiedAt : '')}</S.LastUpdateDate>
-							<AccodianMenu name="내용">
-								<S.DocsContents
-									dangerouslySetInnerHTML={{
-										__html: util.documentation(decodeContents(docs?.contents || '')),
-									}}></S.DocsContents>
-							</AccodianMenu>
-						</S.DocsContentsLoadWrap>
-					</S.DocsContentsWrap>
-					<SubFooter />
-				</Board>
-				<ScrollBtn />
-				<Aside />
-			</S.DocsWrap>
+			<DocsLayout docs={docs} />
 		</>
 	)
 }
diff --git a/pages/frame/index.tsx b/pages/frame/index.tsx
index d1119c2..f0b44bc 100644
--- a/pages/frame/index.tsx
+++ b/pages/frame/index.tsx
@@ -1,13 +1,10 @@
 import * as docs from '@/api/getDocs'
-import * as S from '../../layout/frame/style'
-
 import React from 'react'
-import Docs from '@/types/docs.type'
 import DocsPropsType from '@/types/static/docs.props.type'
 import { NextSeo, NextSeoProps } from 'next-seo'
-import { AccodianMenu, Aside, Board, Classify, ScrollBtn, SubFooter } from '@/components'
+import FrameLayout from '@/layout/FrameLayout'
 
-const Frame = ({ docs }: DocsPropsType) => {
+const Frame = (props: DocsPropsType) => {
 	const seoConfig: NextSeoProps = {
 		title: `부마위키 - 틀`,
 		description: `부마위키의 모든 틀을 담은 페이지입니다.`,
@@ -26,31 +23,7 @@ const Frame = ({ docs }: DocsPropsType) => {
 	return (
 		<>
 			<NextSeo {...seoConfig} />
-			<S.FrameWrap>
-				<Board>
-					<S.FrameTitleWrap>
-						<S.FrameTitleText>부마위키:틀</S.FrameTitleText>
-					</S.FrameTitleWrap>
-					<S.FrameClassify>
-						<Classify>틀</Classify>
-					</S.FrameClassify>
-					<S.FrameLine />
-					<S.FrameListWrap>
-						<AccodianMenu name={`틀`}>
-							<S.FrameList>
-								{docs.map((frame: Docs) => (
-									<S.FrameListItem key={frame.id}>
-										<S.FrameLink href={`/docs/${frame.title}`}>{frame.title}</S.FrameLink>
-									</S.FrameListItem>
-								))}
-							</S.FrameList>
-						</AccodianMenu>
-					</S.FrameListWrap>
-					<SubFooter />
-				</Board>
-				<ScrollBtn />
-				<Aside />
-			</S.FrameWrap>
+			<FrameLayout {...props} />
 		</>
 	)
 }
diff --git a/pages/mypage/index.tsx b/pages/mypage/index.tsx
index 7d32d47..2dd4c80 100644
--- a/pages/mypage/index.tsx
+++ b/pages/mypage/index.tsx
@@ -1,6 +1,5 @@
 import * as api from '@/api/user'
 import * as util from '@/utils'
-import * as S from '../../layout/mypage/style'
 
 import userState, { initUserState } from '@/context/userState'
 import React from 'react'
@@ -9,12 +8,9 @@ import { useRecoilValue, useSetRecoilState } from 'recoil'
 import Contributors from '@/types/contributors.type'
 import { Storage } from '@/lib/storage/storage'
 import { NextSeo, NextSeoProps } from 'next-seo'
-import { AccodianMenu, Aside, Board, Classify, ScrollBtn } from '@/components'
+import MyPageLayout from '@/layout/MyPageLayout'
 
 const MyPage = () => {
-	const user = useRecoilValue(userState)
-	const setUser = useSetRecoilState(userState)
-
 	const { mutate } = useMutation(api.onLogoutUser, {
 		onSuccess: () => {
 			Storage.delItem('access_token')
@@ -41,59 +37,7 @@ const MyPage = () => {
 	return (
 		<>
 			<NextSeo {...seoConfig} />
-			<S.MyPageWrap>
-				<Board>
-					<S.MyPageTitleWrap>
-						<S.MyPageTitleText>{`마이페이지 : ${user.nickName || '비로그인 유저'}`}</S.MyPageTitleText>
-					</S.MyPageTitleWrap>
-					<Classify>{user.authority}</Classify>
-					<S.MyPageLine />
-					<S.MyPageInfoWrap>
-						<AccodianMenu name={'정보'}>
-							<S.MyPageInfoLoadWrap>
-								{user.id ? (
-									<>
-										<span>
-											이름은 {user.nickName}이며, 부마위키의{' '}
-											{user.authority === 'ADMIN' ? '관리자' : user.authority === 'BANNED' ? '읽기전용 사용자' : '사용자'} 중 한 명이다.
-										</span>
-										<span>
-											이 유저의 아이디는 {user.id}이며, 이메일은 {user.email}이다.
-										</span>
-										<br />
-										<div>
-											<S.LogoutText onClick={() => mutate()}>로그아웃</S.LogoutText>
-										</div>
-									</>
-								) : (
-									<span>이 유저는 로그인을 하지 않은 유저다. 로그인을 하면 문서를 생성하고 편집할 수 있다.</span>
-								)}
-							</S.MyPageInfoLoadWrap>
-						</AccodianMenu>
-						{user.id ? (
-							<AccodianMenu name={'기여한 문서'}>
-								<S.ContributeWrap>
-									<span>이 유저가 기여한 문서의 정보들이다.</span>
-									<S.ContributeList>
-										{user.contributeDocs.map((docs: Contributors, index: number) => (
-											<span key={index}>
-												문서명 :&nbsp;
-												<S.ContributeLink href={`/docs/${docs.title}`}>{docs.title}</S.ContributeLink>
-												<br />
-												수정 날짜 : {util.dateParser(docs.createTime)}
-											</span>
-										))}
-									</S.ContributeList>
-								</S.ContributeWrap>
-							</AccodianMenu>
-						) : (
-							''
-						)}
-					</S.MyPageInfoWrap>
-				</Board>
-				<ScrollBtn />
-				<Aside />
-			</S.MyPageWrap>
+			<MyPageLayout />
 		</>
 	)
 }

From f6cf8b902bd3df16dbb56c1b28e904bf47906e82 Mon Sep 17 00:00:00 2001
From: Ubinquitous <ubinquitous1@gmail.com>
Date: Sat, 8 Apr 2023 20:09:13 +0900
Subject: [PATCH 05/20] =?UTF-8?q?FIX=20:=20createDocsForm=20type=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 utils/document/createDocsForm.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/utils/document/createDocsForm.ts b/utils/document/createDocsForm.ts
index 049d9b5..9701a32 100644
--- a/utils/document/createDocsForm.ts
+++ b/utils/document/createDocsForm.ts
@@ -1,3 +1,4 @@
+import { IFileTypes } from '@/components/DragDrop'
 import FileListArray from '@/types/filelistArray.type'
 import { encodeContents } from './requestContents'
 
@@ -6,7 +7,7 @@ interface CreateDocsFormType {
 	enroll: number
 	contents: string
 	docsType: string
-	files: FileListArray[]
+	files: IFileTypes[]
 }
 
 const createDocsForm = ({ title, enroll, contents, docsType, files }: CreateDocsFormType) => {
@@ -18,7 +19,7 @@ const createDocsForm = ({ title, enroll, contents, docsType, files }: CreateDocs
 			type: 'application/json',
 		})
 	)
-	files.reverse().forEach((file) => data.append('files', file, file.name))
+	files.reverse().forEach((file) => data.append('files', file.object, file.object.name))
 
 	return data
 }

From c0f3981210653bbab20ed109c6df084719f38d03 Mon Sep 17 00:00:00 2001
From: Ubinquitous <ubinquitous1@gmail.com>
Date: Sat, 8 Apr 2023 20:09:18 +0900
Subject: [PATCH 06/20] =?UTF-8?q?FIX=20:=20createDocsForm=20type=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 utils/document/createDocsForm.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/utils/document/createDocsForm.ts b/utils/document/createDocsForm.ts
index 9701a32..c81490a 100644
--- a/utils/document/createDocsForm.ts
+++ b/utils/document/createDocsForm.ts
@@ -1,5 +1,4 @@
 import { IFileTypes } from '@/components/DragDrop'
-import FileListArray from '@/types/filelistArray.type'
 import { encodeContents } from './requestContents'
 
 interface CreateDocsFormType {

From e9e33a9e526c942276be4b97cdcff2a49d768d22 Mon Sep 17 00:00:00 2001
From: Ubinquitous <ubinquitous1@gmail.com>
Date: Sat, 8 Apr 2023 20:55:48 +0900
Subject: [PATCH 07/20] =?UTF-8?q?ADD=20:=20Layout=20=ED=8C=8C=EC=9D=BC=20?=
 =?UTF-8?q?=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/Button/Detail/index.tsx            |   1 -
 .../{index.style.ts => HomeLayout.style.ts}   |   0
 layout/HomeLayout.tsx                         | 395 ++++++++++++++++++
 layout/MyPageLayout.tsx                       |  11 +-
 ...{search.style.ts => SearchLayout.style.ts} |   0
 layout/SearchLayout.tsx                       |  53 +++
 layout/StaticLayout.style.ts                  |  13 +
 layout/StudentLayout.tsx                      |  45 ++
 layout/TeacherLayout.tsx                      |  62 +++
 ...{update.style.ts => UpdateLayout.style.ts} |   0
 layout/UpdateLayout.tsx                       |  66 +++
 layout/{user.style.ts => UserLayout.style.ts} |   0
 layout/UserLayout.tsx                         |  55 +++
 layout/VersionDetailLayout.tsx                |  51 +++
 ...ersion.style.ts => VersionLayout.style.ts} |   0
 layout/VersionLayout.tsx                      |  42 ++
 lib/interceptor/index.tsx                     |   2 +-
 pages/404.tsx                                 |   2 +-
 pages/index.tsx                               | 390 +----------------
 pages/mypage/index.tsx                        |   4 +-
 pages/oauth/index.tsx                         |   9 +-
 pages/search/[search].tsx                     |  54 +--
 pages/student/index.tsx                       |  37 +-
 pages/teacher/index.tsx                       |  69 +--
 pages/update/[title].tsx                      |  62 +--
 pages/user/[userId].tsx                       |  51 +--
 pages/version/[docs]/detail/[versionId].tsx   |  53 +--
 pages/version/[docs]/index.tsx                |  43 +-
 28 files changed, 858 insertions(+), 712 deletions(-)
 rename layout/{index.style.ts => HomeLayout.style.ts} (100%)
 create mode 100644 layout/HomeLayout.tsx
 rename layout/{search.style.ts => SearchLayout.style.ts} (100%)
 create mode 100644 layout/SearchLayout.tsx
 create mode 100644 layout/StudentLayout.tsx
 create mode 100644 layout/TeacherLayout.tsx
 rename layout/{update.style.ts => UpdateLayout.style.ts} (100%)
 create mode 100644 layout/UpdateLayout.tsx
 rename layout/{user.style.ts => UserLayout.style.ts} (100%)
 create mode 100644 layout/UserLayout.tsx
 create mode 100644 layout/VersionDetailLayout.tsx
 rename layout/{version.style.ts => VersionLayout.style.ts} (100%)
 create mode 100644 layout/VersionLayout.tsx

diff --git a/components/Button/Detail/index.tsx b/components/Button/Detail/index.tsx
index 8595460..49a868e 100644
--- a/components/Button/Detail/index.tsx
+++ b/components/Button/Detail/index.tsx
@@ -51,7 +51,6 @@ const DetailBtn = ({ docsId }: DetailBtnProps) => {
 	const onClickNavigatePage = (type: string) => {
 		if (type === 'VERSION') return router.push(`/version/${router.pathname}`)
 		if (type === 'UPDATE' && !user.id) return alert('로그인 후 편집하실 수 있습니다!')
-		console.log(router)
 		router.push(`/update/${router.query.title}`)
 	}
 
diff --git a/layout/index.style.ts b/layout/HomeLayout.style.ts
similarity index 100%
rename from layout/index.style.ts
rename to layout/HomeLayout.style.ts
diff --git a/layout/HomeLayout.tsx b/layout/HomeLayout.tsx
new file mode 100644
index 0000000..a45168d
--- /dev/null
+++ b/layout/HomeLayout.tsx
@@ -0,0 +1,395 @@
+import React from 'react'
+import * as S from './HomeLayout.style'
+import { AccodianMenu, Aside, Board, Classify, ScrollBtn, SubFooter } from '@/components'
+
+const HomeLayout = () => {
+	return (
+		<S.HomeWrap>
+			<Board>
+				<S.HomeTitleWrap>
+					<S.HomeTitleText>부마위키:대문</S.HomeTitleText>
+				</S.HomeTitleWrap>
+				<S.HomeClassify>
+					<Classify>부마위키</Classify>
+				</S.HomeClassify>
+				<S.HomeLine />
+				<S.HomeDescriptionWrap>
+					<S.HomeDescriptionText>
+						여러분이 가꾸어 나가는 <span>역사의 고서</span>
+					</S.HomeDescriptionText>
+					<S.HomeDescriptionSubText>
+						<span>부마위키</span>에 오신 것을 환영합니다!
+					</S.HomeDescriptionSubText>
+					<S.HomeDescriptionContents>
+						<span>부마위키</span>는 부산소마고 학생이라면 누구나 기여할 수 있는 위키입니다.
+						<br />
+						검증되지 않았거나 편향된 내용이 있을 수 있습니다.
+						<br />
+						<a href="https://forms.gle/DzAP7XSYH4ubK43FA" target="_blank" rel="noreferrer">
+							이슈 제보하기
+						</a>
+					</S.HomeDescriptionContents>
+				</S.HomeDescriptionWrap>
+				<S.HomeLine />
+				<S.TitleBoxWrap>
+					<S.TitleBoxMainWrap>
+						<S.TitleBoxMainTitle>부산소프트웨어마이스터고등학교</S.TitleBoxMainTitle>
+						<S.TitleBoxMainEngTitle>Busan Software Meister High School</S.TitleBoxMainEngTitle>
+					</S.TitleBoxMainWrap>
+					<S.SchoolImage src={'/images/school-night.jpeg'} alt="부산소마고" />
+					<S.TableWrap>
+						<S.TableName>
+							<S.TableText>교훈</S.TableText>
+						</S.TableName>
+						<S.TableContent>
+							<S.TableText>創意(창의), 誠實(성실)</S.TableText>
+						</S.TableContent>
+					</S.TableWrap>
+					<S.TableWrap>
+						<S.TableName>
+							<S.TableText>개교</S.TableText>
+						</S.TableName>
+						<S.TableContent>
+							<S.TableText>1970년 3월 26일 가락종합고등학교</S.TableText>
+						</S.TableContent>
+					</S.TableWrap>
+					<S.TableWrap>
+						<S.TableName>
+							<S.TableText>유형</S.TableText>
+						</S.TableName>
+						<S.TableContent>
+							<S.TableText>마이스터고등학교</S.TableText>
+						</S.TableContent>
+					</S.TableWrap>
+					<S.TableWrap>
+						<S.TableName>
+							<S.TableText>성별</S.TableText>
+						</S.TableName>
+						<S.TableContent>
+							<S.TableText>남녀공학</S.TableText>
+						</S.TableContent>
+					</S.TableWrap>
+					<S.TableWrap>
+						<S.TableName>
+							<S.TableText>형태</S.TableText>
+						</S.TableName>
+						<S.TableContent>
+							<S.TableText>공립학교</S.TableText>
+						</S.TableContent>
+					</S.TableWrap>
+					<S.TableWrap>
+						<S.TableName>
+							<S.TableText>교목</S.TableText>
+						</S.TableName>
+						<S.TableContent>
+							<S.TableText>소나무 - 장수(長壽), 꿋꿋한 절개와 의지를 보이다.</S.TableText>
+						</S.TableContent>
+					</S.TableWrap>
+					<S.TableWrap>
+						<S.TableName>
+							<S.TableText>교화</S.TableText>
+						</S.TableName>
+						<S.TableContent>
+							<S.TableText>목련 - 우애있고 사랑스러우며 고귀하다.</S.TableText>
+						</S.TableContent>
+					</S.TableWrap>
+					<S.TableWrap>
+						<S.TableName>
+							<S.TableText>교조</S.TableText>
+						</S.TableName>
+						<S.TableContent>
+							<S.TableText>솔개 - 유연하고 민첩하며 늠름한 기상으로 높이 날아 세계를 보다.</S.TableText>
+						</S.TableContent>
+					</S.TableWrap>
+					<S.TableWrap>
+						<S.TableName>
+							<S.TableText>교장</S.TableText>
+						</S.TableName>
+						<S.TableContent>
+							<S.TableText>윤혜정 교장선생님</S.TableText>
+						</S.TableContent>
+					</S.TableWrap>
+					<S.TableWrap>
+						<S.TableName>
+							<S.TableText>학생 수</S.TableText>
+						</S.TableName>
+						<S.TableContent>
+							<S.TableText>125명 (2022.05)</S.TableText>
+						</S.TableContent>
+					</S.TableWrap>
+					<S.TableWrap>
+						<S.TableName>
+							<S.TableText>교직원 수</S.TableText>
+						</S.TableName>
+						<S.TableContent>
+							<S.TableText>33명 (2022.05)</S.TableText>
+						</S.TableContent>
+					</S.TableWrap>
+					<S.TableWrap>
+						<S.TableName>
+							<S.TableText>관할 교육청</S.TableText>
+						</S.TableName>
+						<S.TableContent>
+							<S.TableText>부산광역시교육청</S.TableText>
+						</S.TableContent>
+					</S.TableWrap>
+					<S.TableWrap>
+						<S.TableName>
+							<S.TableText>주소</S.TableText>
+						</S.TableName>
+						<S.TableContent>
+							<S.TableText>부산광역시 강서구 가락대로 1393 (가락동)</S.TableText>
+						</S.TableContent>
+					</S.TableWrap>
+					<S.TableWrap>
+						<S.TableName>
+							<S.TableText>홈페이지</S.TableText>
+						</S.TableName>
+						<S.TableContent>
+							<S.TableLink href="https://school.busanedu.net/bssm-h/main.do" target={'_blank'} rel={'noreferrer'}>
+								https://bssm.hs.kr
+							</S.TableLink>
+						</S.TableContent>
+					</S.TableWrap>
+				</S.TitleBoxWrap>
+				<S.SummaryWrap>
+					<AccodianMenu name={'개요'}>
+						<S.SummaryContent>
+							<span>
+								환영합니다! 창의와 성실로 꿈을 펼치는 부산소프트웨어마이스터고등학교입니다.
+								<br />
+								부산소프트웨어마이스터고등학교 학생이라면 누구나 문서를 편집하고 작성할 수 있습니다.
+								<br />
+								<br />
+								사실에 근거하고 남을 비방하거나 칭찬하지 않는 선에서 자유롭게 문서를 편집할 수 있습니다.
+								<br />
+								문의 및 문서삭제는 <span style={{ color: 'blue', fontWeight: 400 }}>bumawiki@gmail.com</span>으로 요청하실 수 있습니다.
+								<br />
+								<br />
+								<span style={{ fontWeight: 800 }}>
+									교내의 모든 유/무선 네트워크 정보는 국가정보원 『국가·공공기관의 무선망 구축 보안 가이드라인, 국가정보보안 기본지침』 과,
+									<br />
+									교육부 『정보보안기본지침』에 따라 대외비로 관리되고 있으니 절대로 기재해서는 안 됩니다.
+								</span>
+							</span>
+						</S.SummaryContent>
+						<S.SummaryVideoWrap>
+							<S.SummaryVideo
+								width="560"
+								height="315"
+								src="https://www.youtube.com/embed/DIvVZouIVpQ"
+								title="YouTube video player"
+								frameBorder="0"
+								allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture;"
+								allowFullScreen></S.SummaryVideo>
+						</S.SummaryVideoWrap>
+					</AccodianMenu>
+				</S.SummaryWrap>
+				<S.DepartmentWrap>
+					<AccodianMenu name={'학과'}>
+						<S.DepartmentContent>
+							1학년때에는 공통이며, 2학년 때 소프트웨어개발과 32명, 임베디드소프트웨어과 32명으로 나뉘게 된다.
+						</S.DepartmentContent>
+						<S.DepartmentTitle>소프트웨어개발과</S.DepartmentTitle>
+						<S.DepartmentContent>
+							SW구조에 대한 이해를 바탕으로 다양한 SW개발 도구 및 설계 방법을 학습함으로써 SW분석, 설계, 구현, 시험, 유지 보수 등의
+							<br /> 업무를 능동적으로 수행할 수 있는 진보적이고 창의적인 SW 개발자를 양성한다.
+						</S.DepartmentContent>
+						<S.DepartmentTitle>임베디드소프트웨어과</S.DepartmentTitle>
+						<S.DepartmentContent>
+							전자기기 및 산업용 기기의 HW와 SW에 대한 이해를 바탕으로 제조업 하드웨어를 제어하는 펌웨어 개발, 시험, 유지 보수를
+							<br /> 능동적으로 수행할 수 있는 시스템 SW엔지니어 및 응용 SW엔지니어를 양성한다.
+						</S.DepartmentContent>
+					</AccodianMenu>
+				</S.DepartmentWrap>
+				<S.SongWrap>
+					<AccodianMenu name={'교가'}>
+						<S.SongContent>
+							옛 가야 푸른 정기 서려도는 낙동강 구비
+							<br />
+							새 천년 조국 빛낼 배움터 솟았네
+							<br />
+							저마다 가슴가슴 큰 희망 품어 안고
+							<br />
+							창의와 성실로 진리를 탐구하는
+							<br />
+							우리는 모두 하나 힘 모아 전진하세
+							<br />
+							영원토록 길이 빛날 부산소프트웨어마이스터고
+						</S.SongContent>
+					</AccodianMenu>
+				</S.SongWrap>
+				<S.HistoryWrap>
+					<AccodianMenu name={'학교 연혁'}>
+						<S.HistoryContent>
+							<S.TitleBoxWrap>
+								<S.TableHistoryWrap>
+									<S.TableHistoryName>
+										<S.TableText>날짜</S.TableText>
+									</S.TableHistoryName>
+									<S.TableHistory>
+										<S.TableText>연혁</S.TableText>
+									</S.TableHistory>
+								</S.TableHistoryWrap>
+								<S.TableWrap>
+									<S.TableName>
+										<S.TableText>2021.03.01</S.TableText>
+									</S.TableName>
+									<S.TableContent>
+										<S.TableText>부산소프트웨어마이스터고등학교 개교</S.TableText>
+									</S.TableContent>
+								</S.TableWrap>
+								<S.TableWrap>
+									<S.TableName>
+										<S.TableText>2021.03.01</S.TableText>
+									</S.TableName>
+									<S.TableContent>
+										<S.TableText>제22대 윤혜정 교장 취임</S.TableText>
+									</S.TableContent>
+								</S.TableWrap>
+								<S.TableWrap>
+									<S.TableName>
+										<S.TableText>2020.02.11</S.TableText>
+									</S.TableName>
+									<S.TableContent>
+										<S.TableText>제48회 졸업식(57명), 졸업생 총 9,800명</S.TableText>
+									</S.TableContent>
+								</S.TableWrap>
+								<S.TableWrap>
+									<S.TableName>
+										<S.TableText>2019.09.11</S.TableText>
+									</S.TableName>
+									<S.TableContent>
+										<S.TableText>제21대 김은수 교장 취임</S.TableText>
+									</S.TableContent>
+								</S.TableWrap>
+								<S.TableWrap>
+									<S.TableName>
+										<S.TableText>2010.12.31</S.TableText>
+									</S.TableName>
+									<S.TableContent>
+										<S.TableText>학교평가 최우수학교 선정(교육과학기술부장관상)</S.TableText>
+									</S.TableContent>
+								</S.TableWrap>
+								<S.TableWrap>
+									<S.TableName>
+										<S.TableText>2010.04.14</S.TableText>
+									</S.TableName>
+									<S.TableContent>
+										<S.TableText>부산광역시교육청 우수특성화고로 선정</S.TableText>
+									</S.TableContent>
+								</S.TableWrap>
+								<S.TableWrap>
+									<S.TableName>
+										<S.TableText>2006.12.20</S.TableText>
+									</S.TableName>
+									<S.TableContent>
+										<S.TableText>전국 100대 교육과정 우수학교 선정</S.TableText>
+									</S.TableContent>
+								</S.TableWrap>
+								<S.TableWrap>
+									<S.TableName>
+										<S.TableText>2005.12.20</S.TableText>
+									</S.TableName>
+									<S.TableContent>
+										<S.TableText>학교현장 평가 최우수학교 선정</S.TableText>
+									</S.TableContent>
+								</S.TableWrap>
+								<S.TableWrap>
+									<S.TableName>
+										<S.TableText>2002.12.20</S.TableText>
+									</S.TableName>
+									<S.TableContent>
+										<S.TableText>실험실습 최우수 학교로 교육감상 수상</S.TableText>
+									</S.TableContent>
+								</S.TableWrap>
+								<S.TableWrap>
+									<S.TableName>
+										<S.TableText>2000.03.07</S.TableText>
+									</S.TableName>
+									<S.TableContent>
+										<S.TableText>부산산업과학고등학교 개교</S.TableText>
+									</S.TableContent>
+								</S.TableWrap>
+								<S.TableWrap>
+									<S.TableName>
+										<S.TableText>1992.03.01</S.TableText>
+									</S.TableName>
+									<S.TableContent>
+										<S.TableText>부산서여자상업고등학교로 교명 변경</S.TableText>
+									</S.TableContent>
+								</S.TableWrap>
+								<S.TableWrap>
+									<S.TableName>
+										<S.TableText>1977.03.01</S.TableText>
+									</S.TableName>
+									<S.TableContent>
+										<S.TableText>김해여자상업고등학교로 교명 변경</S.TableText>
+									</S.TableContent>
+								</S.TableWrap>
+								<S.TableWrap>
+									<S.TableName>
+										<S.TableText>1974.03.01</S.TableText>
+									</S.TableName>
+									<S.TableContent>
+										<S.TableText>김해상업고등학교로 교명 변경</S.TableText>
+									</S.TableContent>
+								</S.TableWrap>
+								<S.TableWrap>
+									<S.TableName>
+										<S.TableText>1970.03.26</S.TableText>
+									</S.TableName>
+									<S.TableContent>
+										<S.TableText>가락종합고등학교 개교</S.TableText>
+									</S.TableContent>
+								</S.TableWrap>
+							</S.TitleBoxWrap>
+						</S.HistoryContent>
+					</AccodianMenu>
+				</S.HistoryWrap>
+				<S.BusWrap>
+					<AccodianMenu name={'운행 버스'}>
+						<S.BusContent>
+							세 노선 다 배차간격이 길어 이용하기 어려운 편이다. 심지어 김해 4번과 강서2번, 강서15-1번은 일 8회만 운행한다.
+							<br />
+							그래서 기숙사 입소, 퇴소 날에는 학교에서 셔틀버스를 운행한다.
+						</S.BusContent>
+						<S.BusDescription>
+							<S.TitleBoxWrap>
+								<S.TableWrap style={{ marginTop: '-4px', borderTop: '2px solid #ccc' }}>
+									<S.TableContent>
+										<S.TableText>부산산업과학고교 / 부산소프트웨어마이스터고교</S.TableText>
+									</S.TableContent>
+									<S.TableName>
+										<S.TableText>4, 강서 7-2</S.TableText>
+									</S.TableName>
+								</S.TableWrap>
+								<S.TableWrap>
+									<S.TableContent>
+										<S.TableText>부산산업과학고등학교</S.TableText>
+									</S.TableContent>
+									<S.TableName>
+										<S.TableText>강서 2</S.TableText>
+									</S.TableName>
+								</S.TableWrap>
+								<S.TableWrap style={{ marginTop: '-4px', marginBottom: '80px' }}>
+									<S.TableContent>
+										<S.TableText>덕포마을</S.TableText>
+									</S.TableContent>
+									<S.TableName>
+										<S.TableText>강서 15-1</S.TableText>
+									</S.TableName>
+								</S.TableWrap>
+							</S.TitleBoxWrap>
+						</S.BusDescription>
+					</AccodianMenu>
+				</S.BusWrap>
+				<SubFooter />
+			</Board>
+			<ScrollBtn />
+			<Aside />
+		</S.HomeWrap>
+	)
+}
+
+export default HomeLayout
diff --git a/layout/MyPageLayout.tsx b/layout/MyPageLayout.tsx
index 55c003f..f0f8ca0 100644
--- a/layout/MyPageLayout.tsx
+++ b/layout/MyPageLayout.tsx
@@ -1,8 +1,17 @@
 import React from 'react'
+import * as util from '@/utils'
 import * as S from './MyPageLayout.style'
 import { AccodianMenu, Aside, Board, Classify, ScrollBtn } from '@/components'
+import Contributors from '@/types/contributors.type'
+import UserType from '@/types/user.type'
+import { UseMutateFunction } from 'react-query'
 
-const MyPageLayout = () => {
+interface MyPageLayoutPropsType {
+	user: UserType
+	mutate: UseMutateFunction<void, unknown, void, unknown>
+}
+
+const MyPageLayout = ({ user, mutate }: MyPageLayoutPropsType) => {
 	return (
 		<S.MyPageWrap>
 			<Board>
diff --git a/layout/search.style.ts b/layout/SearchLayout.style.ts
similarity index 100%
rename from layout/search.style.ts
rename to layout/SearchLayout.style.ts
diff --git a/layout/SearchLayout.tsx b/layout/SearchLayout.tsx
new file mode 100644
index 0000000..b96e6f3
--- /dev/null
+++ b/layout/SearchLayout.tsx
@@ -0,0 +1,53 @@
+import { Aside, Board, Classify, ScrollBtn, SubFooter } from '@/components'
+import Docs from '@/types/docs.type'
+import React from 'react'
+import * as S from './SearchLayout.style'
+import * as util from '@/utils'
+
+interface SearchLayoutPropsType {
+	searchValue: string
+	results: Docs[]
+}
+
+const SearchLayout = ({ searchValue, results }: SearchLayoutPropsType) => {
+	return (
+		<S.SearchWrap>
+			<Board>
+				<S.SearchTitleWrap>
+					<span>&quot;{searchValue}&quot; 검색결과</span>
+				</S.SearchTitleWrap>
+				<S.Classify>
+					<Classify>검색</Classify>
+				</S.Classify>
+				<S.SearchLine />
+				<S.SearchResult>
+					<S.SearchList>
+						{results ? (
+							<>
+								{results.map((result: Docs, index) => (
+									<S.SearchListItem key={index}>
+										<S.SearchLink href={`/docs/${result.title}`}>
+											{result.title}&nbsp;
+											{result.docsType === 'FRAME' ? null : (
+												<span>
+													({util.typeEditor(result.docsType)},{result.enroll})
+												</span>
+											)}
+										</S.SearchLink>
+									</S.SearchListItem>
+								))}
+							</>
+						) : (
+							<S.SearchCreateLink href={`/create?name=${searchValue}`}>검색 결과가 없습니다. 지금 문서를 생성해보세요</S.SearchCreateLink>
+						)}
+					</S.SearchList>
+				</S.SearchResult>
+				<SubFooter />
+			</Board>
+			<ScrollBtn />
+			<Aside />
+		</S.SearchWrap>
+	)
+}
+
+export default SearchLayout
diff --git a/layout/StaticLayout.style.ts b/layout/StaticLayout.style.ts
index 3d93a68..92586ed 100644
--- a/layout/StaticLayout.style.ts
+++ b/layout/StaticLayout.style.ts
@@ -60,3 +60,16 @@ export const StaticListItem = styled.li`
 	margin-bottom: 18px;
 	color: #0038ff;
 `
+
+export const StaticWarnText = styled.span`
+	font-weight: 700;
+	margin: 20px 0 10px 30px;
+	margin-right: auto;
+	font-size: 13px;
+	color: red;
+`
+
+export const StaticDetailList = styled.ul`
+	margin: 30px 0 0 50px;
+	font-weight: 600;
+`
diff --git a/layout/StudentLayout.tsx b/layout/StudentLayout.tsx
new file mode 100644
index 0000000..0d30ba9
--- /dev/null
+++ b/layout/StudentLayout.tsx
@@ -0,0 +1,45 @@
+import React from 'react'
+import { AccodianMenu, Aside, Board, Classify, ScrollBtn, SubFooter } from '@/components'
+import Docs from '@/types/docs.type'
+import * as S from './StaticLayout.style'
+
+interface StudentLayoutPropsType {
+	docs: Docs[]
+	years: number[]
+}
+
+const StudentLayout = ({ docs, years }: StudentLayoutPropsType) => {
+	return (
+		<S.StaticWrap>
+			<Board>
+				<S.StaticTitleWrap>
+					<S.StaticTitleText>부마위키:학생</S.StaticTitleText>
+				</S.StaticTitleWrap>
+				<S.StaticClassify>
+					<Classify>학생</Classify>
+				</S.StaticClassify>
+				<S.StaticLine />
+				<S.StaticListWrap>
+					{years.map((year) => (
+						<AccodianMenu name={`${year}년도 입학생`} key={year} isOpen={true}>
+							{docs.map((student: Docs, index) => (
+								<S.StaticList key={index}>
+									{student.enroll === year && (
+										<S.StaticListItem>
+											<S.StaticLink href={`/docs/${student.title}`}>{student.title}</S.StaticLink>
+										</S.StaticListItem>
+									)}
+								</S.StaticList>
+							))}
+						</AccodianMenu>
+					))}
+				</S.StaticListWrap>
+				<SubFooter />
+			</Board>
+			<ScrollBtn />
+			<Aside />
+		</S.StaticWrap>
+	)
+}
+
+export default StudentLayout
diff --git a/layout/TeacherLayout.tsx b/layout/TeacherLayout.tsx
new file mode 100644
index 0000000..d93460a
--- /dev/null
+++ b/layout/TeacherLayout.tsx
@@ -0,0 +1,62 @@
+import React from 'react'
+import * as S from './StaticLayout.style'
+import { AccodianMenu, Aside, Board, Classify, ScrollBtn, SubFooter } from '@/components'
+import Docs from '@/types/docs.type'
+
+interface TeacherLayoutPropsType {
+	common_teacher: Docs[]
+	major_teacher: Docs[]
+	mentor_teacher: Docs[]
+}
+
+const TeacherLayout = ({ common_teacher, major_teacher, mentor_teacher }: TeacherLayoutPropsType) => {
+	return (
+		<S.StaticWrap>
+			<Board>
+				<S.StaticTitleWrap>
+					<S.StaticTitleText>부마위키:선생님</S.StaticTitleText>
+				</S.StaticTitleWrap>
+				<Classify>선생님</Classify>
+				<S.StaticWarnText>※ 필독! 문서 내 대상을 비하하는 내용을 서술하는 사용자는 부마위키 이용에 제한을 받을 수 있습니다 ※</S.StaticWarnText>
+				<S.StaticList>
+					<AccodianMenu name={`인문과목 선생님`}>
+						<S.StaticDetailList>
+							{common_teacher.map((teacher: Docs, index) => (
+								<S.StaticListItem key={index}>
+									<S.StaticLink href={`/docs/${teacher.title}`}>{teacher.title}</S.StaticLink>
+								</S.StaticListItem>
+							))}
+						</S.StaticDetailList>
+					</AccodianMenu>
+					<AccodianMenu name={`전공과목 선생님`}>
+						<S.StaticDetailList>
+							{major_teacher.map((teacher: Docs, index) => (
+								<S.StaticListItem key={index}>
+									<S.StaticLink href={`/docs/${teacher.title}`} className="link">
+										{teacher.title}
+									</S.StaticLink>
+								</S.StaticListItem>
+							))}
+						</S.StaticDetailList>
+					</AccodianMenu>
+					<AccodianMenu name={`멘토 선생님`}>
+						<S.StaticDetailList>
+							{mentor_teacher.map((teacher: Docs) => (
+								<S.StaticListItem key={teacher.id}>
+									<S.StaticLink href={`/docs/${teacher.title}`} className="link">
+										{teacher.title}
+									</S.StaticLink>
+								</S.StaticListItem>
+							))}
+						</S.StaticDetailList>
+					</AccodianMenu>
+				</S.StaticList>
+				<SubFooter />
+			</Board>
+			<ScrollBtn />
+			<Aside />
+		</S.StaticWrap>
+	)
+}
+
+export default TeacherLayout
diff --git a/layout/update.style.ts b/layout/UpdateLayout.style.ts
similarity index 100%
rename from layout/update.style.ts
rename to layout/UpdateLayout.style.ts
diff --git a/layout/UpdateLayout.tsx b/layout/UpdateLayout.tsx
new file mode 100644
index 0000000..c40de80
--- /dev/null
+++ b/layout/UpdateLayout.tsx
@@ -0,0 +1,66 @@
+import React from 'react'
+import * as S from './UpdateLayout.style'
+import * as util from '@/utils'
+
+import { Aside, Board, ScrollBtn, SubFooter } from '@/components'
+import DragDrop from '@/components/DragDrop'
+import theme from '@/styles/theme'
+import Image from 'next/image'
+import Check from 'assets/check.svg'
+import { decodeContents } from '@/utils/document/requestContents'
+import UpdateDocsType from '@/types/update.type.'
+import FileListArray from '@/types/filelistArray.type'
+
+interface UpdateLayoutPropsType {
+	docs: UpdateDocsType
+	setDocs: React.Dispatch<React.SetStateAction<UpdateDocsType>>
+	setFiles: (file: FileListArray[]) => void
+	onClickAutoComplete: () => void
+	isOnAutoComplete: any
+	textareaRef: React.RefObject<HTMLTextAreaElement>
+	onClickUpdateDocs: () => Promise<void>
+}
+
+const UpdateLayout = ({ docs, setDocs, setFiles, onClickAutoComplete, isOnAutoComplete, textareaRef, onClickUpdateDocs }: UpdateLayoutPropsType) => {
+	return (
+		<S.DocsWrap>
+			<Board>
+				<S.DocsTitleWrap>
+					<S.DocsTitleText>문서 편집 : {docs.title}</S.DocsTitleText>
+				</S.DocsTitleWrap>
+				<S.DocsExampleImage src="/images/references.png" alt="문서작성법" />
+				<S.DocsLine />
+				<DragDrop getFiles={setFiles} />
+				<S.DocsContentsWrap>
+					<S.AutoCompleteToggleWrap onClick={onClickAutoComplete}>
+						<S.AutoCompleteToggleText>자동완성</S.AutoCompleteToggleText>
+						<S.AutoCompleteToggleButton color={isOnAutoComplete ? theme.primary : theme.white}>
+							<Image src={Check} alt="" />
+						</S.AutoCompleteToggleButton>
+					</S.AutoCompleteToggleWrap>
+					<S.UpdateTextarea
+						ref={textareaRef}
+						onKeyDown={(e) => util.onKeyDownUseTab(e)}
+						onChange={(e) => setDocs(isOnAutoComplete ? { ...docs, contents: util.autoClosingTag(e) } : { ...docs, contents: e.target.value })}
+						value={decodeContents(docs.contents || '')}
+					/>
+					<S.UpdatePreviewText>미리보기</S.UpdatePreviewText>
+					<S.UpdatePreview
+						dangerouslySetInnerHTML={{
+							__html: util.documentation(docs.contents),
+						}}
+					/>
+					<S.UpdateSubmit>
+						<S.UpdateWarn>※ 타인에 대한 조롱 또는 비방, 비난으로 인해 발생하는 문제에 대한 책임은 본인에게 있습니다. 주의해주세요! ※</S.UpdateWarn>
+						<S.UpdateButton onClick={onClickUpdateDocs}>문서 업데이트</S.UpdateButton>
+					</S.UpdateSubmit>
+				</S.DocsContentsWrap>
+				<SubFooter />
+			</Board>
+			<ScrollBtn />
+			<Aside />
+		</S.DocsWrap>
+	)
+}
+
+export default UpdateLayout
diff --git a/layout/user.style.ts b/layout/UserLayout.style.ts
similarity index 100%
rename from layout/user.style.ts
rename to layout/UserLayout.style.ts
diff --git a/layout/UserLayout.tsx b/layout/UserLayout.tsx
new file mode 100644
index 0000000..49d9937
--- /dev/null
+++ b/layout/UserLayout.tsx
@@ -0,0 +1,55 @@
+import React from 'react'
+import * as S from './UserLayout.style'
+import * as util from '@/utils'
+import { AccodianMenu, Aside, Board, Classify, ScrollBtn } from '@/components'
+import UserType from '@/types/user.type'
+import Contributors from '@/types/contributors.type'
+
+interface UserLayoutPropsType {
+	user: UserType
+}
+
+const UserLayout = ({ user }: UserLayoutPropsType) => {
+	return (
+		<S.UserWrap>
+			<Board>
+				<S.UserTitleWrap>
+					<S.UserTitleText>유저 : {user?.nickName}</S.UserTitleText>
+				</S.UserTitleWrap>
+				<Classify>{user?.authority}</Classify>
+				<S.UserLine />
+				<S.UserInfoWrap>
+					<AccodianMenu name="정보">
+						<S.UserInfoLoadWrap>
+							{/* {userInfo.authority === 'ADMIN' ? <C.Authority email={ || ''} /> : null} */}
+							<span>
+								이름은 {user?.nickName}이며, 부마위키의
+								{user?.authority === 'ADMIN' ? ' 관리자' : user?.authority === 'BANNED' ? ' 읽기전용 사용자' : ' 사용자'} 중 한 명이다.
+							</span>
+						</S.UserInfoLoadWrap>
+					</AccodianMenu>
+					<AccodianMenu name="기여한 문서">
+						<S.ContributeWrap>
+							<span>이 유저가 기여한 문서의 정보들이다.</span>
+							<S.ContributeList>
+								{user?.contributeDocs.map((docs: Contributors, index) => (
+									<span key={index}>
+										문서명 :&nbsp;
+										<S.ContributeLink href={`/docs/${docs.title}`}>{docs.title}</S.ContributeLink>
+										<br />
+										수정 날짜 : {util.dateParser(docs.createTime)}
+									</span>
+								))}
+							</S.ContributeList>
+						</S.ContributeWrap>
+					</AccodianMenu>
+					<S.UserLine />
+				</S.UserInfoWrap>
+			</Board>
+			<ScrollBtn />
+			<Aside />
+		</S.UserWrap>
+	)
+}
+
+export default UserLayout
diff --git a/layout/VersionDetailLayout.tsx b/layout/VersionDetailLayout.tsx
new file mode 100644
index 0000000..92c6b09
--- /dev/null
+++ b/layout/VersionDetailLayout.tsx
@@ -0,0 +1,51 @@
+import React from 'react'
+import * as S from './VersionLayout.style'
+import * as util from '@/utils'
+import { AccodianMenu, Aside, Board, Classify, ScrollBtn, SubFooter } from '@/components'
+import { decodeContents } from '@/utils/document/requestContents'
+import { VersionDocsService } from '@/types/version.type'
+
+interface VersionDetailLayoutPropsType {
+	title: string
+	docsType: string
+	docs: VersionDocsService
+}
+
+const VersionDetailLayout = ({ title, docsType, docs }: VersionDetailLayoutPropsType) => {
+	return (
+		<S.VersionWrap>
+			<Board>
+				<S.VersionTitleWrap>
+					<S.VersionTitleText>{title}</S.VersionTitleText>
+				</S.VersionTitleWrap>
+				<S.Classify>
+					<Classify>{util.typeEditor(docsType)}</Classify>
+				</S.Classify>
+				<S.VersionLine />
+				<S.VersionContentsWrap>
+					{docs && (
+						<S.VersionContentsLoadWrap>
+							<S.LastUpdateDate>
+								마지막 수정 : {util.dateParser(docs.thisVersionCreatedAt || '')} | 수정자 : {docs.nickName}
+							</S.LastUpdateDate>
+							<AccodianMenu name="코드 내용" isOpen={false}>
+								<S.VersionContents>{docs?.contents.replace(/<br>/gi, '\n').replace(/&\$\^%/gi, '"')}</S.VersionContents>
+							</AccodianMenu>
+							<AccodianMenu name="개요">
+								<S.VersionContents
+									dangerouslySetInnerHTML={{
+										__html: util.documentation(decodeContents(docs.contents)),
+									}}></S.VersionContents>
+							</AccodianMenu>
+						</S.VersionContentsLoadWrap>
+					)}
+				</S.VersionContentsWrap>
+				<SubFooter />
+			</Board>
+			<ScrollBtn />
+			<Aside />
+		</S.VersionWrap>
+	)
+}
+
+export default VersionDetailLayout
diff --git a/layout/version.style.ts b/layout/VersionLayout.style.ts
similarity index 100%
rename from layout/version.style.ts
rename to layout/VersionLayout.style.ts
diff --git a/layout/VersionLayout.tsx b/layout/VersionLayout.tsx
new file mode 100644
index 0000000..3428c35
--- /dev/null
+++ b/layout/VersionLayout.tsx
@@ -0,0 +1,42 @@
+import { Aside, Board, ScrollBtn, SubFooter } from '@/components'
+import { VersionDocs } from '@/types/version.type'
+import React from 'react'
+import * as S from './VersionLayout.style'
+import * as util from '@/utils'
+
+interface VersionLayoutPropsType {
+	version: VersionDocs[]
+	docsName: string
+}
+
+const VersionLayout = ({ docsName, version }: VersionLayoutPropsType) => {
+	return (
+		<S.VersionWrap>
+			<Board>
+				<S.VersionTitleWrap>
+					<S.VersionTitleText>문서 수정 기록 : {docsName}</S.VersionTitleText>
+				</S.VersionTitleWrap>
+				<S.VersionLine />
+				<S.VersionContentsWrap>
+					<ul>
+						{version?.map((ver: VersionDocs, index: number) => (
+							<S.VersionList key={index}>
+								<span>
+									<S.VersionLink href={`/version/${docsName}/detail/${index}`}>{util.dateParser(ver.thisVersionCreatedAt)}</S.VersionLink>
+								</span>
+								<span>
+									작성자 : <S.VersionLink href={`/user/${ver.userId}`}>{ver.nickName}</S.VersionLink>
+								</span>
+							</S.VersionList>
+						))}
+					</ul>
+				</S.VersionContentsWrap>
+				<SubFooter />
+			</Board>
+			<ScrollBtn />
+			<Aside />
+		</S.VersionWrap>
+	)
+}
+
+export default VersionLayout
diff --git a/lib/interceptor/index.tsx b/lib/interceptor/index.tsx
index cd4d43e..6af4753 100644
--- a/lib/interceptor/index.tsx
+++ b/lib/interceptor/index.tsx
@@ -18,7 +18,7 @@ const getAccessToken = async () => {
 export const requestInterceptors = (requestConfig: AxiosRequestConfig) => {
 	if (!Storage.getItem('access_token')) getAccessToken()
 
-	// if (requestConfig.headers) requestConfig.headers.Authorization = Storage.getItem('access_token')
+	if (requestConfig.headers) requestConfig.headers.Authorization = Storage.getItem('access_token')
 
 	const urlParams = requestConfig.url?.split('/:') || []
 	if (urlParams.length < 2) return requestConfig
diff --git a/pages/404.tsx b/pages/404.tsx
index cd30312..0242a73 100644
--- a/pages/404.tsx
+++ b/pages/404.tsx
@@ -1,4 +1,4 @@
-import * as S from '../layout/index.style'
+import * as S from '../layout/HomeLayout.style'
 
 import React from 'react'
 import { NextSeo, NextSeoProps } from 'next-seo'
diff --git a/pages/index.tsx b/pages/index.tsx
index 6ebf3a4..137431e 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,8 +1,6 @@
-import * as S from '../layout/index.style'
-
 import React from 'react'
-import { AccodianMenu, Aside, Board, Classify, ScrollBtn, SubFooter } from '@/components'
 import { NextSeo, NextSeoProps } from 'next-seo'
+import HomeLayout from '@/layout/HomeLayout'
 
 const Home = () => {
 	const seoConfig: NextSeoProps = {
@@ -23,391 +21,7 @@ const Home = () => {
 	return (
 		<>
 			<NextSeo {...seoConfig} />
-			<S.HomeWrap>
-				<Board>
-					<S.HomeTitleWrap>
-						<S.HomeTitleText>부마위키:대문</S.HomeTitleText>
-					</S.HomeTitleWrap>
-					<S.HomeClassify>
-						<Classify>부마위키</Classify>
-					</S.HomeClassify>
-					<S.HomeLine />
-					<S.HomeDescriptionWrap>
-						<S.HomeDescriptionText>
-							여러분이 가꾸어 나가는 <span>역사의 고서</span>
-						</S.HomeDescriptionText>
-						<S.HomeDescriptionSubText>
-							<span>부마위키</span>에 오신 것을 환영합니다!
-						</S.HomeDescriptionSubText>
-						<S.HomeDescriptionContents>
-							<span>부마위키</span>는 부산소마고 학생이라면 누구나 기여할 수 있는 위키입니다.
-							<br />
-							검증되지 않았거나 편향된 내용이 있을 수 있습니다.
-							<br />
-							<a href="https://forms.gle/DzAP7XSYH4ubK43FA" target="_blank" rel="noreferrer">
-								이슈 제보하기
-							</a>
-						</S.HomeDescriptionContents>
-					</S.HomeDescriptionWrap>
-					<S.HomeLine />
-					<S.TitleBoxWrap>
-						<S.TitleBoxMainWrap>
-							<S.TitleBoxMainTitle>부산소프트웨어마이스터고등학교</S.TitleBoxMainTitle>
-							<S.TitleBoxMainEngTitle>Busan Software Meister High School</S.TitleBoxMainEngTitle>
-						</S.TitleBoxMainWrap>
-						<S.SchoolImage src={'/images/school-night.jpeg'} alt="부산소마고" />
-						<S.TableWrap>
-							<S.TableName>
-								<S.TableText>교훈</S.TableText>
-							</S.TableName>
-							<S.TableContent>
-								<S.TableText>創意(창의), 誠實(성실)</S.TableText>
-							</S.TableContent>
-						</S.TableWrap>
-						<S.TableWrap>
-							<S.TableName>
-								<S.TableText>개교</S.TableText>
-							</S.TableName>
-							<S.TableContent>
-								<S.TableText>1970년 3월 26일 가락종합고등학교</S.TableText>
-							</S.TableContent>
-						</S.TableWrap>
-						<S.TableWrap>
-							<S.TableName>
-								<S.TableText>유형</S.TableText>
-							</S.TableName>
-							<S.TableContent>
-								<S.TableText>마이스터고등학교</S.TableText>
-							</S.TableContent>
-						</S.TableWrap>
-						<S.TableWrap>
-							<S.TableName>
-								<S.TableText>성별</S.TableText>
-							</S.TableName>
-							<S.TableContent>
-								<S.TableText>남녀공학</S.TableText>
-							</S.TableContent>
-						</S.TableWrap>
-						<S.TableWrap>
-							<S.TableName>
-								<S.TableText>형태</S.TableText>
-							</S.TableName>
-							<S.TableContent>
-								<S.TableText>공립학교</S.TableText>
-							</S.TableContent>
-						</S.TableWrap>
-						<S.TableWrap>
-							<S.TableName>
-								<S.TableText>교목</S.TableText>
-							</S.TableName>
-							<S.TableContent>
-								<S.TableText>소나무 - 장수(長壽), 꿋꿋한 절개와 의지를 보이다.</S.TableText>
-							</S.TableContent>
-						</S.TableWrap>
-						<S.TableWrap>
-							<S.TableName>
-								<S.TableText>교화</S.TableText>
-							</S.TableName>
-							<S.TableContent>
-								<S.TableText>목련 - 우애있고 사랑스러우며 고귀하다.</S.TableText>
-							</S.TableContent>
-						</S.TableWrap>
-						<S.TableWrap>
-							<S.TableName>
-								<S.TableText>교조</S.TableText>
-							</S.TableName>
-							<S.TableContent>
-								<S.TableText>솔개 - 유연하고 민첩하며 늠름한 기상으로 높이 날아 세계를 보다.</S.TableText>
-							</S.TableContent>
-						</S.TableWrap>
-						<S.TableWrap>
-							<S.TableName>
-								<S.TableText>교장</S.TableText>
-							</S.TableName>
-							<S.TableContent>
-								<S.TableText>윤혜정 교장선생님</S.TableText>
-							</S.TableContent>
-						</S.TableWrap>
-						<S.TableWrap>
-							<S.TableName>
-								<S.TableText>학생 수</S.TableText>
-							</S.TableName>
-							<S.TableContent>
-								<S.TableText>125명 (2022.05)</S.TableText>
-							</S.TableContent>
-						</S.TableWrap>
-						<S.TableWrap>
-							<S.TableName>
-								<S.TableText>교직원 수</S.TableText>
-							</S.TableName>
-							<S.TableContent>
-								<S.TableText>33명 (2022.05)</S.TableText>
-							</S.TableContent>
-						</S.TableWrap>
-						<S.TableWrap>
-							<S.TableName>
-								<S.TableText>관할 교육청</S.TableText>
-							</S.TableName>
-							<S.TableContent>
-								<S.TableText>부산광역시교육청</S.TableText>
-							</S.TableContent>
-						</S.TableWrap>
-						<S.TableWrap>
-							<S.TableName>
-								<S.TableText>주소</S.TableText>
-							</S.TableName>
-							<S.TableContent>
-								<S.TableText>부산광역시 강서구 가락대로 1393 (가락동)</S.TableText>
-							</S.TableContent>
-						</S.TableWrap>
-						<S.TableWrap>
-							<S.TableName>
-								<S.TableText>홈페이지</S.TableText>
-							</S.TableName>
-							<S.TableContent>
-								<S.TableLink href="https://school.busanedu.net/bssm-h/main.do" target={'_blank'} rel={'noreferrer'}>
-									https://bssm.hs.kr
-								</S.TableLink>
-							</S.TableContent>
-						</S.TableWrap>
-					</S.TitleBoxWrap>
-					<S.SummaryWrap>
-						<AccodianMenu name={'개요'}>
-							<S.SummaryContent>
-								<span>
-									환영합니다! 창의와 성실로 꿈을 펼치는 부산소프트웨어마이스터고등학교입니다.
-									<br />
-									부산소프트웨어마이스터고등학교 학생이라면 누구나 문서를 편집하고 작성할 수 있습니다.
-									<br />
-									<br />
-									사실에 근거하고 남을 비방하거나 칭찬하지 않는 선에서 자유롭게 문서를 편집할 수 있습니다.
-									<br />
-									문의 및 문서삭제는 <span style={{ color: 'blue', fontWeight: 400 }}>bumawiki@gmail.com</span>으로 요청하실 수 있습니다.
-									<br />
-									<br />
-									<span style={{ fontWeight: 800 }}>
-										교내의 모든 유/무선 네트워크 정보는 국가정보원 『국가·공공기관의 무선망 구축 보안 가이드라인, 국가정보보안 기본지침』 과,
-										<br />
-										교육부 『정보보안기본지침』에 따라 대외비로 관리되고 있으니 절대로 기재해서는 안 됩니다.
-									</span>
-								</span>
-							</S.SummaryContent>
-							<S.SummaryVideoWrap>
-								<S.SummaryVideo
-									width="560"
-									height="315"
-									src="https://www.youtube.com/embed/DIvVZouIVpQ"
-									title="YouTube video player"
-									frameBorder="0"
-									allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture;"
-									allowFullScreen></S.SummaryVideo>
-							</S.SummaryVideoWrap>
-						</AccodianMenu>
-					</S.SummaryWrap>
-					<S.DepartmentWrap>
-						<AccodianMenu name={'학과'}>
-							<S.DepartmentContent>
-								1학년때에는 공통이며, 2학년 때 소프트웨어개발과 32명, 임베디드소프트웨어과 32명으로 나뉘게 된다.
-							</S.DepartmentContent>
-							<S.DepartmentTitle>소프트웨어개발과</S.DepartmentTitle>
-							<S.DepartmentContent>
-								SW구조에 대한 이해를 바탕으로 다양한 SW개발 도구 및 설계 방법을 학습함으로써 SW분석, 설계, 구현, 시험, 유지 보수 등의
-								<br /> 업무를 능동적으로 수행할 수 있는 진보적이고 창의적인 SW 개발자를 양성한다.
-							</S.DepartmentContent>
-							<S.DepartmentTitle>임베디드소프트웨어과</S.DepartmentTitle>
-							<S.DepartmentContent>
-								전자기기 및 산업용 기기의 HW와 SW에 대한 이해를 바탕으로 제조업 하드웨어를 제어하는 펌웨어 개발, 시험, 유지 보수를
-								<br /> 능동적으로 수행할 수 있는 시스템 SW엔지니어 및 응용 SW엔지니어를 양성한다.
-							</S.DepartmentContent>
-						</AccodianMenu>
-					</S.DepartmentWrap>
-					<S.SongWrap>
-						<AccodianMenu name={'교가'}>
-							<S.SongContent>
-								옛 가야 푸른 정기 서려도는 낙동강 구비
-								<br />
-								새 천년 조국 빛낼 배움터 솟았네
-								<br />
-								저마다 가슴가슴 큰 희망 품어 안고
-								<br />
-								창의와 성실로 진리를 탐구하는
-								<br />
-								우리는 모두 하나 힘 모아 전진하세
-								<br />
-								영원토록 길이 빛날 부산소프트웨어마이스터고
-							</S.SongContent>
-						</AccodianMenu>
-					</S.SongWrap>
-					<S.HistoryWrap>
-						<AccodianMenu name={'학교 연혁'}>
-							<S.HistoryContent>
-								<S.TitleBoxWrap>
-									<S.TableHistoryWrap>
-										<S.TableHistoryName>
-											<S.TableText>날짜</S.TableText>
-										</S.TableHistoryName>
-										<S.TableHistory>
-											<S.TableText>연혁</S.TableText>
-										</S.TableHistory>
-									</S.TableHistoryWrap>
-									<S.TableWrap>
-										<S.TableName>
-											<S.TableText>2021.03.01</S.TableText>
-										</S.TableName>
-										<S.TableContent>
-											<S.TableText>부산소프트웨어마이스터고등학교 개교</S.TableText>
-										</S.TableContent>
-									</S.TableWrap>
-									<S.TableWrap>
-										<S.TableName>
-											<S.TableText>2021.03.01</S.TableText>
-										</S.TableName>
-										<S.TableContent>
-											<S.TableText>제22대 윤혜정 교장 취임</S.TableText>
-										</S.TableContent>
-									</S.TableWrap>
-									<S.TableWrap>
-										<S.TableName>
-											<S.TableText>2020.02.11</S.TableText>
-										</S.TableName>
-										<S.TableContent>
-											<S.TableText>제48회 졸업식(57명), 졸업생 총 9,800명</S.TableText>
-										</S.TableContent>
-									</S.TableWrap>
-									<S.TableWrap>
-										<S.TableName>
-											<S.TableText>2019.09.11</S.TableText>
-										</S.TableName>
-										<S.TableContent>
-											<S.TableText>제21대 김은수 교장 취임</S.TableText>
-										</S.TableContent>
-									</S.TableWrap>
-									<S.TableWrap>
-										<S.TableName>
-											<S.TableText>2010.12.31</S.TableText>
-										</S.TableName>
-										<S.TableContent>
-											<S.TableText>학교평가 최우수학교 선정(교육과학기술부장관상)</S.TableText>
-										</S.TableContent>
-									</S.TableWrap>
-									<S.TableWrap>
-										<S.TableName>
-											<S.TableText>2010.04.14</S.TableText>
-										</S.TableName>
-										<S.TableContent>
-											<S.TableText>부산광역시교육청 우수특성화고로 선정</S.TableText>
-										</S.TableContent>
-									</S.TableWrap>
-									<S.TableWrap>
-										<S.TableName>
-											<S.TableText>2006.12.20</S.TableText>
-										</S.TableName>
-										<S.TableContent>
-											<S.TableText>전국 100대 교육과정 우수학교 선정</S.TableText>
-										</S.TableContent>
-									</S.TableWrap>
-									<S.TableWrap>
-										<S.TableName>
-											<S.TableText>2005.12.20</S.TableText>
-										</S.TableName>
-										<S.TableContent>
-											<S.TableText>학교현장 평가 최우수학교 선정</S.TableText>
-										</S.TableContent>
-									</S.TableWrap>
-									<S.TableWrap>
-										<S.TableName>
-											<S.TableText>2002.12.20</S.TableText>
-										</S.TableName>
-										<S.TableContent>
-											<S.TableText>실험실습 최우수 학교로 교육감상 수상</S.TableText>
-										</S.TableContent>
-									</S.TableWrap>
-									<S.TableWrap>
-										<S.TableName>
-											<S.TableText>2000.03.07</S.TableText>
-										</S.TableName>
-										<S.TableContent>
-											<S.TableText>부산산업과학고등학교 개교</S.TableText>
-										</S.TableContent>
-									</S.TableWrap>
-									<S.TableWrap>
-										<S.TableName>
-											<S.TableText>1992.03.01</S.TableText>
-										</S.TableName>
-										<S.TableContent>
-											<S.TableText>부산서여자상업고등학교로 교명 변경</S.TableText>
-										</S.TableContent>
-									</S.TableWrap>
-									<S.TableWrap>
-										<S.TableName>
-											<S.TableText>1977.03.01</S.TableText>
-										</S.TableName>
-										<S.TableContent>
-											<S.TableText>김해여자상업고등학교로 교명 변경</S.TableText>
-										</S.TableContent>
-									</S.TableWrap>
-									<S.TableWrap>
-										<S.TableName>
-											<S.TableText>1974.03.01</S.TableText>
-										</S.TableName>
-										<S.TableContent>
-											<S.TableText>김해상업고등학교로 교명 변경</S.TableText>
-										</S.TableContent>
-									</S.TableWrap>
-									<S.TableWrap>
-										<S.TableName>
-											<S.TableText>1970.03.26</S.TableText>
-										</S.TableName>
-										<S.TableContent>
-											<S.TableText>가락종합고등학교 개교</S.TableText>
-										</S.TableContent>
-									</S.TableWrap>
-								</S.TitleBoxWrap>
-							</S.HistoryContent>
-						</AccodianMenu>
-					</S.HistoryWrap>
-					<S.BusWrap>
-						<AccodianMenu name={'운행 버스'}>
-							<S.BusContent>
-								세 노선 다 배차간격이 길어 이용하기 어려운 편이다. 심지어 김해 4번과 강서2번, 강서15-1번은 일 8회만 운행한다.
-								<br />
-								그래서 기숙사 입소, 퇴소 날에는 학교에서 셔틀버스를 운행한다.
-							</S.BusContent>
-							<S.BusDescription>
-								<S.TitleBoxWrap>
-									<S.TableWrap style={{ marginTop: '-4px', borderTop: '2px solid #ccc' }}>
-										<S.TableContent>
-											<S.TableText>부산산업과학고교 / 부산소프트웨어마이스터고교</S.TableText>
-										</S.TableContent>
-										<S.TableName>
-											<S.TableText>4, 강서 7-2</S.TableText>
-										</S.TableName>
-									</S.TableWrap>
-									<S.TableWrap>
-										<S.TableContent>
-											<S.TableText>부산산업과학고등학교</S.TableText>
-										</S.TableContent>
-										<S.TableName>
-											<S.TableText>강서 2</S.TableText>
-										</S.TableName>
-									</S.TableWrap>
-									<S.TableWrap style={{ marginTop: '-4px', marginBottom: '80px' }}>
-										<S.TableContent>
-											<S.TableText>덕포마을</S.TableText>
-										</S.TableContent>
-										<S.TableName>
-											<S.TableText>강서 15-1</S.TableText>
-										</S.TableName>
-									</S.TableWrap>
-								</S.TitleBoxWrap>
-							</S.BusDescription>
-						</AccodianMenu>
-					</S.BusWrap>
-					<SubFooter />
-				</Board>
-				<ScrollBtn />
-				<Aside />
-			</S.HomeWrap>
+			<HomeLayout />
 		</>
 	)
 }
diff --git a/pages/mypage/index.tsx b/pages/mypage/index.tsx
index ab6b5f1..007c9a6 100644
--- a/pages/mypage/index.tsx
+++ b/pages/mypage/index.tsx
@@ -9,7 +9,7 @@ import { NextSeo, NextSeoProps } from 'next-seo'
 import MyPageLayout from '@/layout/MyPageLayout'
 
 const MyPage = () => {
-	const { user, isLogined, logout } = useUser()
+	const { user, logout } = useUser()
 	const queryClient = new QueryClient()
 
 	const onLogout = async () => {
@@ -47,7 +47,7 @@ const MyPage = () => {
 	return (
 		<>
 			<NextSeo {...seoConfig} />
-			<MyPageLayout />
+			<MyPageLayout user={user} mutate={mutate} />
 		</>
 	)
 }
diff --git a/pages/oauth/index.tsx b/pages/oauth/index.tsx
index 705c095..7adc62c 100644
--- a/pages/oauth/index.tsx
+++ b/pages/oauth/index.tsx
@@ -1,5 +1,5 @@
-import * as api from '@/api/user'
 import httpClient from '@/lib/httpClient'
+import { NextSeo, NextSeoProps } from 'next-seo'
 import { useRouter } from 'next/router'
 
 import React from 'react'
@@ -35,7 +35,12 @@ const OAuth = () => {
 		// eslint-disable-next-line
 	}, [])
 
-	return <></>
+	const seoConfig: NextSeoProps = {
+		title: `부마위키 - 로그인`,
+		description: `부마위키의 로그인페이지입니다.`,
+	}
+
+	return <NextSeo {...seoConfig} />
 }
 
 export default OAuth
diff --git a/pages/search/[search].tsx b/pages/search/[search].tsx
index fd5d53e..3c0c4d6 100644
--- a/pages/search/[search].tsx
+++ b/pages/search/[search].tsx
@@ -1,13 +1,12 @@
 import * as util from '@/utils'
-import * as S from '../../layout/search/style'
 
 import React from 'react'
 import Docs from '@/types/docs.type'
 import { useRouter } from 'next/router'
 import { GetStaticProps } from 'next'
 import { NextSeo, NextSeoProps } from 'next-seo'
-import { Aside, Board, Classify, ScrollBtn, SubFooter } from '@/components'
 import httpClient from '@/lib/httpClient'
+import SearchLayout from '@/layout/SearchLayout'
 
 interface SingleDocsPropsType {
 	results: Docs[]
@@ -15,16 +14,16 @@ interface SingleDocsPropsType {
 	searchValue: string
 }
 
-const Search = ({ results, redirect, searchValue }: SingleDocsPropsType) => {
+const Search = (props: SingleDocsPropsType) => {
 	const router = useRouter()
 
 	const seoConfig: NextSeoProps = {
-		title: `부마위키 검색 - ${searchValue}`,
-		description: `부마위키의 "${searchValue}" 검색 결과에 관한 페이지입니다.`,
+		title: `부마위키 검색 - ${props.searchValue}`,
+		description: `부마위키의 "${props.searchValue}" 검색 결과에 관한 페이지입니다.`,
 		openGraph: {
 			type: 'website',
-			title: `부마위키 검색 - ${searchValue}`,
-			description: `부마위키의 "${searchValue}" 검색 결과에 관한 페이지입니다.`,
+			title: `부마위키 검색 - ${props.searchValue}`,
+			description: `부마위키의 "${props.searchValue}" 검색 결과에 관한 페이지입니다.`,
 			images: [
 				{
 					url: '/images/meta-img.png',
@@ -34,48 +33,13 @@ const Search = ({ results, redirect, searchValue }: SingleDocsPropsType) => {
 	}
 
 	React.useEffect(() => {
-		if (redirect) router.push(`/docs/${results[0].title}`)
-	}, [redirect, results, router])
+		if (props.redirect) router.push(`/docs/${props.results[0].title}`)
+	}, [props.redirect, props.results, router])
 
 	return (
 		<>
 			<NextSeo {...seoConfig} />
-			<S.SearchWrap>
-				<Board>
-					<S.SearchTitleWrap>
-						<span>&quot;{searchValue}&quot; 검색결과</span>
-					</S.SearchTitleWrap>
-					<S.Classify>
-						<Classify>검색</Classify>
-					</S.Classify>
-					<S.SearchLine />
-					<S.SearchResult>
-						<S.SearchList>
-							{results ? (
-								<>
-									{results.map((result: Docs, index) => (
-										<S.SearchListItem key={index}>
-											<S.SearchLink href={`/docs/${result.title}`}>
-												{result.title}&nbsp;
-												{result.docsType === 'FRAME' ? null : (
-													<span>
-														({util.typeEditor(result.docsType)},{result.enroll})
-													</span>
-												)}
-											</S.SearchLink>
-										</S.SearchListItem>
-									))}
-								</>
-							) : (
-								<S.SearchCreateLink href={`/create?name=${searchValue}`}>검색 결과가 없습니다. 지금 문서를 생성해보세요</S.SearchCreateLink>
-							)}
-						</S.SearchList>
-					</S.SearchResult>
-					<SubFooter />
-				</Board>
-				<ScrollBtn />
-				<Aside />
-			</S.SearchWrap>
+			<SearchLayout {...props} />
 		</>
 	)
 }
diff --git a/pages/student/index.tsx b/pages/student/index.tsx
index 6e4784e..be9b8ec 100644
--- a/pages/student/index.tsx
+++ b/pages/student/index.tsx
@@ -1,15 +1,12 @@
-import * as getApi from '@/api/getDocs'
-import * as S from '../../layout/student/style'
 import * as util from '@/utils'
 
 import React from 'react'
-import Docs from '@/types/docs.type'
 import DocsPropsType from '@/types/static/docs.props.type'
 import { NextSeo, NextSeoProps } from 'next-seo'
-import { AccodianMenu, Aside, Board, Classify, ScrollBtn, SubFooter } from '@/components'
 import httpClient from '@/lib/httpClient'
+import StudentLayout from '@/layout/StudentLayout'
 
-const Student = ({ docs, years }: DocsPropsType) => {
+const Student = (props: DocsPropsType) => {
 	const seoConfig: NextSeoProps = {
 		title: `부마위키 - 학생`,
 		description: `교내의 모든 학생을 담은 페이지입니다.`,
@@ -28,35 +25,7 @@ const Student = ({ docs, years }: DocsPropsType) => {
 	return (
 		<>
 			<NextSeo {...seoConfig} />
-			<S.StudentWrap>
-				<Board>
-					<S.StudentTitleWrap>
-						<S.StudentTitleText>부마위키:학생</S.StudentTitleText>
-					</S.StudentTitleWrap>
-					<S.StudentClassify>
-						<Classify>학생</Classify>
-					</S.StudentClassify>
-					<S.StudentLine />
-					<S.StudentListWrap>
-						{years.map((year) => (
-							<AccodianMenu name={`${year}년도 입학생`} key={year} isOpen={true}>
-								{docs.map((student: Docs, index) => (
-									<S.StudentList key={index}>
-										{student.enroll === year && (
-											<S.StudentListItem>
-												<S.StudentLink href={`/docs/${student.title}`}>{student.title}</S.StudentLink>
-											</S.StudentListItem>
-										)}
-									</S.StudentList>
-								))}
-							</AccodianMenu>
-						))}
-					</S.StudentListWrap>
-					<SubFooter />
-				</Board>
-				<ScrollBtn />
-				<Aside />
-			</S.StudentWrap>
+			<StudentLayout {...props} />
 		</>
 	)
 }
diff --git a/pages/teacher/index.tsx b/pages/teacher/index.tsx
index 181ac59..8683d74 100644
--- a/pages/teacher/index.tsx
+++ b/pages/teacher/index.tsx
@@ -1,21 +1,16 @@
-import * as S from '../../layout/teacher/style'
-import * as getApi from '@/api/getDocs'
-
 import React from 'react'
 import Docs from '@/types/docs.type'
 import { NextSeo, NextSeoProps } from 'next-seo'
-import { AccodianMenu, Aside, Board, Classify, ScrollBtn, SubFooter } from '@/components'
 import httpClient from '@/lib/httpClient'
+import TeacherLayout from '@/layout/TeacherLayout'
 
 interface TeacherDocsPropsType {
-	docs: {
-		common_teacher: Docs[]
-		major_teacher: Docs[]
-		mentor_teacher: Docs[]
-	}
+	common_teacher: Docs[]
+	major_teacher: Docs[]
+	mentor_teacher: Docs[]
 }
 
-const Teacher = ({ docs }: TeacherDocsPropsType) => {
+const Teacher = (props: TeacherDocsPropsType) => {
 	const seoConfig: NextSeoProps = {
 		title: `부마위키 - 선생님`,
 		description: `교내의 모든 선생님을 담은 페이지입니다.`,
@@ -34,51 +29,7 @@ const Teacher = ({ docs }: TeacherDocsPropsType) => {
 	return (
 		<>
 			<NextSeo {...seoConfig} />
-			<S.TeacherWrap>
-				<Board>
-					<S.TeacherTitleWrap>
-						<S.TeacherTitleText>부마위키:선생님</S.TeacherTitleText>
-					</S.TeacherTitleWrap>
-					<Classify>선생님</Classify>
-					<S.TeacherWarnText>※ 필독! 문서 내 대상을 비하하는 내용을 서술하는 사용자는 부마위키 이용에 제한을 받을 수 있습니다 ※</S.TeacherWarnText>
-					<S.TeacherList>
-						<AccodianMenu name={`인문과목 선생님`}>
-							<S.TeacherDetailList>
-								{docs.common_teacher.map((teacher: Docs, index) => (
-									<S.TeacherListItem key={index}>
-										<S.TeacherLink href={`/docs/${teacher.title}`}>{teacher.title}</S.TeacherLink>
-									</S.TeacherListItem>
-								))}
-							</S.TeacherDetailList>
-						</AccodianMenu>
-						<AccodianMenu name={`전공과목 선생님`}>
-							<S.TeacherDetailList>
-								{docs.major_teacher.map((teacher: Docs, index) => (
-									<S.TeacherListItem key={index}>
-										<S.TeacherLink href={`/docs/${teacher.title}`} className="link">
-											{teacher.title}
-										</S.TeacherLink>
-									</S.TeacherListItem>
-								))}
-							</S.TeacherDetailList>
-						</AccodianMenu>
-						<AccodianMenu name={`멘토 선생님`}>
-							<S.TeacherDetailList>
-								{docs.mentor_teacher.map((teacher: Docs) => (
-									<S.TeacherListItem key={teacher.id}>
-										<S.TeacherLink href={`/docs/${teacher.title}`} className="link">
-											{teacher.title}
-										</S.TeacherLink>
-									</S.TeacherListItem>
-								))}
-							</S.TeacherDetailList>
-						</AccodianMenu>
-					</S.TeacherList>
-					<SubFooter />
-				</Board>
-				<ScrollBtn />
-				<Aside />
-			</S.TeacherWrap>
+			<TeacherLayout {...props} />
 		</>
 	)
 }
@@ -90,11 +41,9 @@ export async function getStaticProps() {
 
 	return {
 		props: {
-			docs: {
-				common_teacher,
-				major_teacher,
-				mentor_teacher,
-			},
+			common_teacher,
+			major_teacher,
+			mentor_teacher,
 		},
 	}
 }
diff --git a/pages/update/[title].tsx b/pages/update/[title].tsx
index f8cdac8..294e96c 100644
--- a/pages/update/[title].tsx
+++ b/pages/update/[title].tsx
@@ -1,10 +1,4 @@
-import * as util from '@/utils'
-import * as S from '../../layout/update/style'
-
-import Check from 'assets/check.svg'
-import userState from '@/context/userState'
 import React from 'react'
-import { useRecoilValue } from 'recoil'
 import { useMutation } from 'react-query'
 import UpdateDocsType from '@/types/update.type.'
 import { decodeContents, encodeContents } from '@/utils/document/requestContents'
@@ -14,13 +8,11 @@ import Docs from '@/types/docs.type'
 import { GetStaticProps } from 'next'
 import { Storage } from '@/lib/storage/'
 import { NextSeo, NextSeoProps } from 'next-seo'
-import { Aside, Board, ScrollBtn, SubFooter } from '@/components'
-import Image from 'next/image'
-import theme from '@/styles/theme'
-import DragDrop, { IFileTypes } from '@/components/DragDrop'
+import { IFileTypes } from '@/components/DragDrop'
 import httpClient from '@/lib/httpClient'
 import FileListArray from '@/types/filelistArray.type'
 import useUser from '@/hooks/useUser'
+import UpdateLayout from '@/layout/UpdateLayout'
 
 interface SinglDocsPropsType {
 	defaultDocs: Docs
@@ -106,43 +98,15 @@ const Update = ({ defaultDocs, title }: SinglDocsPropsType) => {
 	return (
 		<>
 			<NextSeo {...seoConfig} />
-			<S.DocsWrap>
-				<Board>
-					<S.DocsTitleWrap>
-						<S.DocsTitleText>문서 편집 : {docs.title}</S.DocsTitleText>
-					</S.DocsTitleWrap>
-					<S.DocsExampleImage src="/images/references.png" alt="문서작성법" />
-					<S.DocsLine />
-					<DragDrop getFiles={setFiles} />
-					<S.DocsContentsWrap>
-						<S.AutoCompleteToggleWrap onClick={onClickAutoComplete}>
-							<S.AutoCompleteToggleText>자동완성</S.AutoCompleteToggleText>
-							<S.AutoCompleteToggleButton color={isOnAutoComplete ? theme.primary : theme.white}>
-								<Image src={Check} alt="" />
-							</S.AutoCompleteToggleButton>
-						</S.AutoCompleteToggleWrap>
-						<S.UpdateTextarea
-							ref={textareaRef}
-							onKeyDown={(e) => util.onKeyDownUseTab(e)}
-							onChange={(e) => setDocs(isOnAutoComplete ? { ...docs, contents: util.autoClosingTag(e) } : { ...docs, contents: e.target.value })}
-							value={decodeContents(docs.contents || '')}
-						/>
-						<S.UpdatePreviewText>미리보기</S.UpdatePreviewText>
-						<S.UpdatePreview
-							dangerouslySetInnerHTML={{
-								__html: util.documentation(docs.contents),
-							}}
-						/>
-						<S.UpdateSubmit>
-							<S.UpdateWarn>※ 타인에 대한 조롱 또는 비방, 비난으로 인해 발생하는 문제에 대한 책임은 본인에게 있습니다. 주의해주세요! ※</S.UpdateWarn>
-							<S.UpdateButton onClick={onClickUpdateDocs}>문서 업데이트</S.UpdateButton>
-						</S.UpdateSubmit>
-					</S.DocsContentsWrap>
-					<SubFooter />
-				</Board>
-				<ScrollBtn />
-				<Aside />
-			</S.DocsWrap>
+			<UpdateLayout
+				docs={docs}
+				setDocs={setDocs}
+				setFiles={setFiles}
+				onClickAutoComplete={onClickAutoComplete}
+				isOnAutoComplete={isOnAutoComplete}
+				textareaRef={textareaRef}
+				onClickUpdateDocs={onClickUpdateDocs}
+			/>
 		</>
 	)
 }
@@ -176,7 +140,3 @@ export const getStaticProps: GetStaticProps = async (context) => {
 }
 
 export default Update
-
-// revalidate :
-// https://github.com/bssm-portfolio/app/blob/develop/pages/api/revalidate-portfolio.ts
-// https://github.com/bssm-portfolio/app/blob/develop/components/portfolio/edit/index.tsx#L78
diff --git a/pages/user/[userId].tsx b/pages/user/[userId].tsx
index dbc24ca..76d5764 100644
--- a/pages/user/[userId].tsx
+++ b/pages/user/[userId].tsx
@@ -1,15 +1,11 @@
-import * as util from '@/utils'
-import * as S from '../../layout/user/style'
-import * as api from '@/api/user'
-
 import React from 'react'
-import Contributors from '@/types/contributors.type'
 import { useQuery } from 'react-query'
 import UserType from '@/types/user.type'
 import { useRouter } from 'next/router'
 import { NextSeo, NextSeoProps } from 'next-seo'
-import { AccodianMenu, Aside, Board, Classify, ScrollBtn } from '@/components'
 import httpClient from '@/lib/httpClient'
+import UserLayout from '@/layout/UserLayout'
+import { initUserState } from '@/context/userState'
 
 const User = () => {
 	const [user, setUser] = React.useState<UserType>()
@@ -42,47 +38,10 @@ const User = () => {
 	}
 
 	return (
-		<div>
+		<>
 			<NextSeo {...seoConfig} />
-			<S.UserWrap>
-				<Board>
-					<S.UserTitleWrap>
-						<S.UserTitleText>유저 : {user?.nickName}</S.UserTitleText>
-					</S.UserTitleWrap>
-					<Classify>{user?.authority}</Classify>
-					<S.UserLine />
-					<S.UserInfoWrap>
-						<AccodianMenu name="정보">
-							<S.UserInfoLoadWrap>
-								{/* {userInfo.authority === 'ADMIN' ? <C.Authority email={ || ''} /> : null} */}
-								<span>
-									이름은 {user?.nickName}이며, 부마위키의
-									{user?.authority === 'ADMIN' ? ' 관리자' : user?.authority === 'BANNED' ? ' 읽기전용 사용자' : ' 사용자'} 중 한 명이다.
-								</span>
-							</S.UserInfoLoadWrap>
-						</AccodianMenu>
-						<AccodianMenu name="기여한 문서">
-							<S.ContributeWrap>
-								<span>이 유저가 기여한 문서의 정보들이다.</span>
-								<S.ContributeList>
-									{user?.contributeDocs.map((docs: Contributors, index) => (
-										<span key={index}>
-											문서명 :&nbsp;
-											<S.ContributeLink href={`/docs/${docs.title}`}>{docs.title}</S.ContributeLink>
-											<br />
-											수정 날짜 : {util.dateParser(docs.createTime)}
-										</span>
-									))}
-								</S.ContributeList>
-							</S.ContributeWrap>
-						</AccodianMenu>
-						<S.UserLine />
-					</S.UserInfoWrap>
-				</Board>
-				<ScrollBtn />
-				<Aside />
-			</S.UserWrap>
-		</div>
+			<UserLayout user={user || initUserState} />
+		</>
 	)
 }
 
diff --git a/pages/version/[docs]/detail/[versionId].tsx b/pages/version/[docs]/detail/[versionId].tsx
index a6ae18d..be99bee 100644
--- a/pages/version/[docs]/detail/[versionId].tsx
+++ b/pages/version/[docs]/detail/[versionId].tsx
@@ -1,14 +1,10 @@
-import * as util from '@/utils'
-import * as S from '@/layout/version/detail/style'
-import * as getApi from '@/api/getDocs'
-
 import React from 'react'
 import { VersionDocsService } from '@/types/version.type'
 import { decodeContents } from '@/utils/document/requestContents'
 import { GetStaticProps } from 'next'
 import { NextSeo, NextSeoProps } from 'next-seo'
-import { AccodianMenu, Aside, Board, Classify, ScrollBtn, SubFooter } from '@/components'
 import httpClient from '@/lib/httpClient'
+import VersionDetailLayout from '@/layout/VersionDetailLayout'
 
 interface VersionDetailPropsType {
 	title: string
@@ -17,14 +13,14 @@ interface VersionDetailPropsType {
 	versionId: string
 }
 
-const VersionDetail = ({ title, docsType, docs, versionId }: VersionDetailPropsType) => {
+const VersionDetail = (props: VersionDetailPropsType) => {
 	const seoConfig: NextSeoProps = {
-		title: `부마위키 문서 기록 - ${title}:${versionId}`,
-		description: `"${title}" 문서의 예전 기록 페이지입니다.`,
+		title: `부마위키 문서 기록 - ${props.title}:${props.versionId}`,
+		description: `"${props.title}" 문서의 예전 기록 페이지입니다.`,
 		openGraph: {
 			type: 'website',
-			title: `부마위키 문서 기록 - ${title}:${versionId}`,
-			description: `"${title}" 문서의 예전 기록 페이지입니다.`,
+			title: `부마위키 문서 기록 - ${props.title}:${props.versionId}`,
+			description: `"${props.title}" 문서의 예전 기록 페이지입니다.`,
 			images: [
 				{
 					url: '/images/meta-img.png',
@@ -34,41 +30,10 @@ const VersionDetail = ({ title, docsType, docs, versionId }: VersionDetailPropsT
 	}
 
 	return (
-		<div>
+		<>
 			<NextSeo {...seoConfig} />
-			<S.DocsWrap>
-				<Board>
-					<S.DocsTitleWrap>
-						<S.DocsTitleText>{title}</S.DocsTitleText>
-					</S.DocsTitleWrap>
-					<S.Classify>
-						<Classify>{util.typeEditor(docsType)}</Classify>
-					</S.Classify>
-					<S.DocsLine />
-					<S.DocsContentsWrap>
-						{docs && (
-							<S.DocsContentsLoadWrap>
-								<S.LastUpdateDate>
-									마지막 수정 : {util.dateParser(docs.thisVersionCreatedAt || '')} | 수정자 : {docs.nickName}
-								</S.LastUpdateDate>
-								<AccodianMenu name="코드 내용" isOpen={false}>
-									<S.DocsContents>{docs?.contents.replace(/<br>/gi, '\n').replace(/&\$\^%/gi, '"')}</S.DocsContents>
-								</AccodianMenu>
-								<AccodianMenu name="개요">
-									<S.DocsContents
-										dangerouslySetInnerHTML={{
-											__html: util.documentation(decodeContents(docs.contents)),
-										}}></S.DocsContents>
-								</AccodianMenu>
-							</S.DocsContentsLoadWrap>
-						)}
-					</S.DocsContentsWrap>
-					<SubFooter />
-				</Board>
-				<ScrollBtn />
-				<Aside />
-			</S.DocsWrap>
-		</div>
+			<VersionDetailLayout {...props} />
+		</>
 	)
 }
 
diff --git a/pages/version/[docs]/index.tsx b/pages/version/[docs]/index.tsx
index a3c9a3c..b831f01 100644
--- a/pages/version/[docs]/index.tsx
+++ b/pages/version/[docs]/index.tsx
@@ -1,28 +1,23 @@
-import * as getApi from '@/api/getDocs'
-import * as util from '@/utils'
-import * as S from '@/layout/docs/style'
-import * as V from '@/layout/version/style'
-
 import React from 'react'
 import { VersionDocs } from '@/types/version.type'
 import { GetStaticProps } from 'next'
 import { NextSeo, NextSeoProps } from 'next-seo'
-import { Aside, Board, ScrollBtn, SubFooter } from '@/components'
 import httpClient from '@/lib/httpClient'
+import VersionLayout from '@/layout/VersionLayout'
 
 interface SingleDocsPropsType {
 	version: VersionDocs[]
 	docsName: string
 }
 
-const Version = ({ version, docsName }: SingleDocsPropsType) => {
+const Version = (props: SingleDocsPropsType) => {
 	const seoConfig: NextSeoProps = {
-		title: `부마위키 문서 수정 기록 - ${docsName}`,
-		description: `"${docsName}" 문서의 수정 기록 페이지입니다.`,
+		title: `부마위키 문서 수정 기록 - ${props.docsName}`,
+		description: `"${props.docsName}" 문서의 수정 기록 페이지입니다.`,
 		openGraph: {
 			type: 'website',
-			title: `부마위키 문서 수정 기록 - ${docsName}`,
-			description: `"${docsName}" 문서의 수정 기록 페이지입니다.`,
+			title: `부마위키 문서 수정 기록 - ${props.docsName}`,
+			description: `"${props.docsName}" 문서의 수정 기록 페이지입니다.`,
 			images: [
 				{
 					url: '/images/meta-img.png',
@@ -34,31 +29,7 @@ const Version = ({ version, docsName }: SingleDocsPropsType) => {
 	return (
 		<>
 			<NextSeo {...seoConfig} />
-			<S.DocsWrap>
-				<Board>
-					<S.DocsTitleWrap>
-						<S.DocsTitleText>문서 수정 기록 : {docsName}</S.DocsTitleText>
-					</S.DocsTitleWrap>
-					<S.DocsLine />
-					<S.DocsContentsWrap>
-						<ul>
-							{version?.map((ver: VersionDocs, index: number) => (
-								<V.VersionList key={index}>
-									<span>
-										<V.VersionLink href={`/version/${docsName}/detail/${index}`}>{util.dateParser(ver.thisVersionCreatedAt)}</V.VersionLink>
-									</span>
-									<span>
-										작성자 : <V.VersionLink href={`/user/${ver.userId}`}>{ver.nickName}</V.VersionLink>
-									</span>
-								</V.VersionList>
-							))}
-						</ul>
-					</S.DocsContentsWrap>
-					<SubFooter />
-				</Board>
-				<ScrollBtn />
-				<Aside />
-			</S.DocsWrap>
+			<VersionLayout {...props} />
 		</>
 	)
 }

From 805f1b22bb7b61b04742bc570d8a379f6dfbb9c7 Mon Sep 17 00:00:00 2001
From: Ubinquitous <ubinquitous1@gmail.com>
Date: Sun, 9 Apr 2023 12:48:45 +0900
Subject: [PATCH 08/20] =?UTF-8?q?FIX=20:=20=EB=9D=BC=EC=9A=B0=ED=84=B0=20?=
 =?UTF-8?q?=EC=BF=BC=EB=A6=AC=20=EC=A0=91=EA=B7=BC=20=EC=98=A4=EB=A5=98=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/Button/Detail/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/Button/Detail/index.tsx b/components/Button/Detail/index.tsx
index 49a868e..c7e6fa3 100644
--- a/components/Button/Detail/index.tsx
+++ b/components/Button/Detail/index.tsx
@@ -49,7 +49,7 @@ const DetailBtn = ({ docsId }: DetailBtnProps) => {
 	})
 
 	const onClickNavigatePage = (type: string) => {
-		if (type === 'VERSION') return router.push(`/version/${router.pathname}`)
+		if (type === 'VERSION') return router.push(`/version/${router.query.title}`)
 		if (type === 'UPDATE' && !user.id) return alert('로그인 후 편집하실 수 있습니다!')
 		router.push(`/update/${router.query.title}`)
 	}

From cda1a0ab18714d6ca553d755aa6e38a455c7c14e Mon Sep 17 00:00:00 2001
From: Ubinquitous <ubinquitous1@gmail.com>
Date: Sun, 9 Apr 2023 12:49:05 +0900
Subject: [PATCH 09/20] =?UTF-8?q?ADD=20:=20=EB=B8=94=EB=A1=9D=20=ED=83=9C?=
 =?UTF-8?q?=EA=B7=B8=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 lib/httpClient/httpClient.ts    | 14 +++++++++++---
 lib/interceptor/index.tsx       |  4 +++-
 pages/user/[userId].tsx         |  6 +-----
 pages/version/[docs]/index.tsx  |  3 ++-
 styles/globals.css              | 11 +++++++++++
 types/helmet.type.ts            |  6 ------
 utils/document/documentation.ts |  2 ++
 7 files changed, 30 insertions(+), 16 deletions(-)
 delete mode 100644 types/helmet.type.ts

diff --git a/lib/httpClient/httpClient.ts b/lib/httpClient/httpClient.ts
index 4a7c56d..9e75d3b 100644
--- a/lib/httpClient/httpClient.ts
+++ b/lib/httpClient/httpClient.ts
@@ -1,5 +1,5 @@
-import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios'
-import { requestInterceptors, responseInterceptors } from '@/lib/interceptor'
+import axios, { AxiosInstance, AxiosRequestConfig } from 'axios'
+import { getAccessToken, requestInterceptors, responseInterceptors } from '@/lib/interceptor'
 import { Storage } from '@/lib/storage'
 
 export interface HttpClientConfig {
@@ -84,6 +84,14 @@ export class HttpClient {
 
 	private setting() {
 		HttpClient.setCommonInterceptors(this.api)
+		this.api.interceptors.request.use(
+			(config) => config,
+			(error) => {
+				Storage.delItem('access_token')
+				getAccessToken()
+				return Promise.reject(error)
+			}
+		)
 	}
 
 	static setAccessToken() {
@@ -121,7 +129,7 @@ export default {
 	create: new HttpClient('api/docs/create', axiosConfig),
 	update: new HttpClient('api/docs/update', axiosConfig),
 	updateType: new HttpClient('api/docs/update/docsType', axiosConfig),
-	version: new HttpClient('api/docs/find/:title/version', axiosConfig),
+	version: new HttpClient('api/docs/find/', axiosConfig),
 	lastModified: new HttpClient('api/docs/find/modified', axiosConfig),
 	search: new HttpClient('api/docs/find/all/title', axiosConfig),
 	updateTitle: new HttpClient('api/docs/update/title', axiosConfig),
diff --git a/lib/interceptor/index.tsx b/lib/interceptor/index.tsx
index 6af4753..64f154f 100644
--- a/lib/interceptor/index.tsx
+++ b/lib/interceptor/index.tsx
@@ -1,7 +1,7 @@
 import { Storage } from '@/lib/storage'
 import axios, { AxiosRequestConfig, AxiosResponse } from 'axios'
 
-const getAccessToken = async () => {
+export const getAccessToken = async () => {
 	try {
 		const res = (
 			await axios.put('/auth/refresh/access', {
@@ -23,6 +23,8 @@ export const requestInterceptors = (requestConfig: AxiosRequestConfig) => {
 	const urlParams = requestConfig.url?.split('/:') || []
 	if (urlParams.length < 2) return requestConfig
 
+	console.log(urlParams)
+
 	const paramParsedUrl = urlParams
 		?.map((paramKey) => {
 			return requestConfig.params[paramKey]
diff --git a/pages/user/[userId].tsx b/pages/user/[userId].tsx
index 76d5764..321bf39 100644
--- a/pages/user/[userId].tsx
+++ b/pages/user/[userId].tsx
@@ -12,11 +12,7 @@ const User = () => {
 	const router = useRouter()
 
 	const onGetUser = async () => {
-		return (
-			await httpClient.user.getById({
-				url: (router.query.userId as string) || '-1',
-			})
-		).data
+		return (await httpClient.user.getByTitle(router.query.userId as string)).data
 	}
 	useQuery('otherUser', onGetUser, {
 		onSuccess: (data) => setUser(data),
diff --git a/pages/version/[docs]/index.tsx b/pages/version/[docs]/index.tsx
index b831f01..1e4a63a 100644
--- a/pages/version/[docs]/index.tsx
+++ b/pages/version/[docs]/index.tsx
@@ -43,8 +43,9 @@ export const getStaticPaths = async () => {
 
 export const getStaticProps: GetStaticProps = async (context) => {
 	const { params } = context
+	console.log(context)
 
-	const res = (await httpClient.version.getByTitle((params?.docs as string) || '')).data
+	const res = (await httpClient.version.getByTitle(`${params?.docs as string}/version`)).data
 
 	return {
 		props: {
diff --git a/styles/globals.css b/styles/globals.css
index 61090e6..9e95d03 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -111,3 +111,14 @@ details[close] {
 	text-decoration: none;
 	color: blue;
 }
+
+.block {
+	width: 100%;
+	height: fit-content;
+	border: 1px solid black;
+	background-color: #f2f3f7;
+	font-weight: 500;
+	display: flex;
+	align-items: center;
+	padding-left: 20px;
+}
diff --git a/types/helmet.type.ts b/types/helmet.type.ts
deleted file mode 100644
index 5207379..0000000
--- a/types/helmet.type.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-interface HelmetType {
-	docsName: string
-	docsType?: string
-}
-
-export default HelmetType
diff --git a/utils/document/documentation.ts b/utils/document/documentation.ts
index c8aecb8..3a08a43 100644
--- a/utils/document/documentation.ts
+++ b/utils/document/documentation.ts
@@ -21,6 +21,8 @@ const documentation = (content: string) => {
 		.replace(/<항목>/gi, `?^li style="list-style: disc;"^?`)
 		.replace(/<어록>/gi, `?^div class="analects" ^?`)
 		.replace(/<\/어록>/gi, `?^@#@#@div^?`)
+		.replace(/<블록>/gi, `?^div class="block" ^?`)
+		.replace(/<\/블록>/gi, `?^@#@#@div^?`)
 		.replace(/<강조>/gi, `?^strong^?`)
 		.replace(/<\/강조>/gi, `?^@#@#@strong^?`)
 		.replace(/<빨강>/gi, `?^span style="color:red;"^?`)

From cb6fe6957d6e96bed5d22e6110d5a90a0740b93c Mon Sep 17 00:00:00 2001
From: Ubinquitous <ubinquitous1@gmail.com>
Date: Sun, 9 Apr 2023 16:22:50 +0900
Subject: [PATCH 10/20] =?UTF-8?q?FIX=20:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8?=
 =?UTF-8?q?=EC=9D=B4=20=EB=90=98=EC=96=B4=EC=9E=88=EB=8A=94=EB=8D=B0=20?=
 =?UTF-8?q?=EC=95=88=EB=90=98=EC=96=B4=EC=9E=88=EB=8B=A4=EA=B3=A0=20?=
 =?UTF-8?q?=ED=91=9C=EA=B8=B0=EB=90=98=EB=8A=94=20=EC=98=A4=EB=A5=98=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 hooks/useUser.tsx                | 30 +++++++++++++++++++-----------
 layout/DocsLayout.tsx            |  3 ++-
 lib/httpClient/getAccessToken.ts | 16 ++++++++++++++++
 lib/httpClient/httpClient.ts     | 17 +++++++++++------
 lib/interceptor/index.tsx        | 19 ++-----------------
 package.json                     |  1 +
 6 files changed, 51 insertions(+), 35 deletions(-)
 create mode 100644 lib/httpClient/getAccessToken.ts

diff --git a/hooks/useUser.tsx b/hooks/useUser.tsx
index 16b3096..627bbe6 100644
--- a/hooks/useUser.tsx
+++ b/hooks/useUser.tsx
@@ -6,26 +6,34 @@ import { useRouter } from 'next/router'
 import { useQuery } from 'react-query'
 import { useRecoilState } from 'recoil'
 import httpClient from '@/lib/httpClient'
+import { getAccessToken } from '@/lib/httpClient/getAccessToken'
 
 interface UseUserOptions {
 	authorizedPage?: boolean
 }
 
+const getUser = async () => {
+	return (
+		await httpClient.myuser.get({
+			headers: {
+				Authorization: Storage.getItem('access_token'),
+			},
+		})
+	).data
+}
+
 const useUser = (options?: UseUserOptions) => {
 	const [user, setUser] = useRecoilState(userState)
 	const router = useRouter()
 
-	const getUser = async () => {
-		return (
-			await httpClient.myuser.get({
-				headers: {
-					Authorization: Storage.getItem('access_token'),
-				},
-			})
-		).data
-	}
-
-	const { data: userInfo, remove, isLoading } = useQuery<UserType>('getUser', getUser, { enabled: !!Storage.getItem('access_token') })
+	const {
+		data: userInfo,
+		remove,
+		isLoading,
+	} = useQuery<UserType>('getUser', getUser, {
+		retry: 1,
+		onError: () => getAccessToken(),
+	})
 
 	const logout = () => {
 		httpClient.logout.delete({
diff --git a/layout/DocsLayout.tsx b/layout/DocsLayout.tsx
index 33e182e..7def197 100644
--- a/layout/DocsLayout.tsx
+++ b/layout/DocsLayout.tsx
@@ -4,6 +4,7 @@ import * as S from './DocsLayout.style'
 import * as util from '@/utils'
 import Docs from '@/types/docs.type'
 import { decodeContents } from '@/utils/document/requestContents'
+import bumawikiEditor from 'bumawiki-editor'
 
 interface DocsLayoutPropsType {
 	docs: Docs
@@ -29,7 +30,7 @@ const DocsLayout = ({ docs }: DocsLayoutPropsType) => {
 						<AccodianMenu name="내용">
 							<S.DocsContents
 								dangerouslySetInnerHTML={{
-									__html: util.documentation(decodeContents(docs?.contents || '')),
+									__html: bumawikiEditor(decodeContents(docs?.contents || '')),
 								}}></S.DocsContents>
 						</AccodianMenu>
 					</S.DocsContentsLoadWrap>
diff --git a/lib/httpClient/getAccessToken.ts b/lib/httpClient/getAccessToken.ts
new file mode 100644
index 0000000..c99bb74
--- /dev/null
+++ b/lib/httpClient/getAccessToken.ts
@@ -0,0 +1,16 @@
+import axios from 'axios'
+import { Storage } from '../storage'
+
+export const getAccessToken = async () => {
+	try {
+		const res = (
+			await axios.put('/auth/refresh/access', {
+				refresh_token: Storage.getItem('refresh_token'),
+			})
+		).data
+		Storage.setItem('access_token', res.accessToken)
+	} catch (err) {
+		console.log(err)
+		Storage.delItem('refresh_token')
+	}
+}
diff --git a/lib/httpClient/httpClient.ts b/lib/httpClient/httpClient.ts
index 9e75d3b..eb1b967 100644
--- a/lib/httpClient/httpClient.ts
+++ b/lib/httpClient/httpClient.ts
@@ -1,11 +1,13 @@
 import axios, { AxiosInstance, AxiosRequestConfig } from 'axios'
-import { getAccessToken, requestInterceptors, responseInterceptors } from '@/lib/interceptor'
+import { requestInterceptors, responseInterceptors } from '@/lib/interceptor'
 import { Storage } from '@/lib/storage'
+import { getAccessToken } from './getAccessToken'
+import { QueryClient } from 'react-query'
 
 export interface HttpClientConfig {
 	baseURL?: string
 	timeout?: number
-	headers?: { Token?: string }
+	headers?: { Authorization?: string }
 }
 
 export class HttpClient {
@@ -18,7 +20,7 @@ export class HttpClient {
 			...axiosConfig,
 			baseURL: `${axiosConfig.baseURL}${url}`,
 		})
-		HttpClient.clientConfig = { headers: { Token: '' } }
+		HttpClient.clientConfig = { headers: { Authorization: '' } }
 		this.setting()
 	}
 
@@ -84,10 +86,13 @@ export class HttpClient {
 
 	private setting() {
 		HttpClient.setCommonInterceptors(this.api)
-		this.api.interceptors.request.use(
-			(config) => config,
+		const queryClient = new QueryClient()
+
+		this.api.interceptors.response.use(
+			(response) => response,
 			(error) => {
 				Storage.delItem('access_token')
+				queryClient.invalidateQueries('getUser')
 				getAccessToken()
 				return Promise.reject(error)
 			}
@@ -98,7 +103,7 @@ export class HttpClient {
 		const accessToken = Storage.getItem('access_token')
 		HttpClient.clientConfig.headers = {
 			...HttpClient.clientConfig.headers,
-			Token: accessToken || undefined,
+			Authorization: accessToken || undefined,
 		}
 	}
 
diff --git a/lib/interceptor/index.tsx b/lib/interceptor/index.tsx
index 64f154f..831b627 100644
--- a/lib/interceptor/index.tsx
+++ b/lib/interceptor/index.tsx
@@ -1,19 +1,6 @@
 import { Storage } from '@/lib/storage'
-import axios, { AxiosRequestConfig, AxiosResponse } from 'axios'
-
-export const getAccessToken = async () => {
-	try {
-		const res = (
-			await axios.put('/auth/refresh/access', {
-				refresh_token: Storage.getItem('refresh_token'),
-			})
-		).data
-		Storage.setItem('access_token', res.accessToken)
-	} catch (err) {
-		console.log(err)
-		Storage.delItem('refresh_token')
-	}
-}
+import { AxiosRequestConfig, AxiosResponse } from 'axios'
+import { getAccessToken } from '../httpClient/getAccessToken'
 
 export const requestInterceptors = (requestConfig: AxiosRequestConfig) => {
 	if (!Storage.getItem('access_token')) getAccessToken()
@@ -23,8 +10,6 @@ export const requestInterceptors = (requestConfig: AxiosRequestConfig) => {
 	const urlParams = requestConfig.url?.split('/:') || []
 	if (urlParams.length < 2) return requestConfig
 
-	console.log(urlParams)
-
 	const paramParsedUrl = urlParams
 		?.map((paramKey) => {
 			return requestConfig.params[paramKey]
diff --git a/package.json b/package.json
index d72a831..0c1a04b 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
 		"@types/styled-components": "^5.1.26",
 		"@types/uuid": "^9.0.1",
 		"axios": "^1.3.4",
+		"bumawiki-editor": "^1.0.6",
 		"eslint": "8.35.0",
 		"eslint-config-next": "13.2.3",
 		"moment": "^2.29.4",

From 44e4261a4de09e128a1bd7c16a56f3994ad6f69d Mon Sep 17 00:00:00 2001
From: Ubinquitous <ubinquitous1@gmail.com>
Date: Sun, 9 Apr 2023 17:14:21 +0900
Subject: [PATCH 11/20] =?UTF-8?q?ADD=20:=20toastify=20+=20Sweet=20alert2?=
 =?UTF-8?q?=EB=A1=9C=20=EB=AA=A8=EB=8B=AC/=ED=8C=9D=EC=97=85=EC=B0=BD=20?=
 =?UTF-8?q?=EC=97=85=EB=8D=B0=EC=9D=B4=ED=8A=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/Button/Authority/index.tsx |  7 ++++++-
 components/Button/Detail/index.tsx    | 29 +++++++++++++++++----------
 components/Section/Header/index.tsx   |  3 ++-
 hooks/useUser.tsx                     |  6 +++++-
 layout/DocsLayout.tsx                 |  2 +-
 layout/HomeLayout.style.ts            |  8 ++++++++
 package.json                          |  2 ++
 pages/_app.tsx                        |  4 ++++
 pages/create/index.tsx                | 22 ++++++++++++--------
 pages/update/[title].tsx              | 19 +++++++++++++-----
 10 files changed, 74 insertions(+), 28 deletions(-)

diff --git a/components/Button/Authority/index.tsx b/components/Button/Authority/index.tsx
index 2617211..c7346c8 100644
--- a/components/Button/Authority/index.tsx
+++ b/components/Button/Authority/index.tsx
@@ -4,6 +4,7 @@ import * as api from '@/api/user'
 import React from 'react'
 import { useMutation } from 'react-query'
 import httpClient from '@/lib/httpClient'
+import Swal from 'sweetalert2'
 
 interface AuthorityProps {
 	email: string
@@ -15,7 +16,11 @@ interface AuthorityApiProps extends AuthorityProps {
 
 const Authority = ({ email }: AuthorityProps) => {
 	const { mutate } = useMutation(({ email, authority }: AuthorityApiProps) => httpClient.authority.put({ email, authority }), {
-		onSuccess: () => alert('유저 권한이 변경되었습니다!'),
+		onSuccess: () =>
+			Swal.fire({
+				icon: 'success',
+				title: '유저 권한이 변경되었습니다!',
+			}),
 	})
 
 	const onClickAuthorityUser = (authority: string) => {
diff --git a/components/Button/Detail/index.tsx b/components/Button/Detail/index.tsx
index c7e6fa3..5114f43 100644
--- a/components/Button/Detail/index.tsx
+++ b/components/Button/Detail/index.tsx
@@ -7,6 +7,9 @@ import { useRecoilValue } from 'recoil'
 import { useRouter } from 'next/router'
 import httpClient from '@/lib/httpClient'
 import { Storage } from '@/lib/storage'
+import { CustomToastContainer } from '@/layout/HomeLayout.style'
+import { toast } from 'react-toastify'
+import Swal from 'sweetalert2'
 
 interface DetailBtnProps {
 	docsId: number
@@ -21,7 +24,10 @@ const DetailBtn = ({ docsId }: DetailBtnProps) => {
 
 	const updateDocsTitleMutation = useMutation(() => httpClient.updateTitle.putByTitle(router.pathname, docsName), {
 		onSuccess: (res) => {
-			alert('문서 이름이 변경되었습니다!')
+			Swal.fire({
+				icon: 'success',
+				title: '문서 이름 변경 완료!',
+			})
 			queryClient.invalidateQueries('lastModifiedDocs')
 			router.push(`/docs/${res.data.title}`)
 		},
@@ -42,7 +48,10 @@ const DetailBtn = ({ docsId }: DetailBtnProps) => {
 
 	const updateDocsTypeMutation = useMutation(onUpdateType, {
 		onSuccess: (res) => {
-			alert('문서 이름이 변경되었습니다!')
+			Swal.fire({
+				icon: 'success',
+				title: '문서 타입 변경 완료!',
+			})
 			queryClient.invalidateQueries('lastModifiedDocs')
 			router.push(`/docs/${res.data.title}`)
 		},
@@ -66,24 +75,21 @@ const DetailBtn = ({ docsId }: DetailBtnProps) => {
 
 	const deleteDocsTitleMutation = useMutation(onDeleteDocsTitle, {
 		onSuccess: () => {
-			alert('문서가 삭제되었습니다!')
+			Swal.fire({
+				icon: 'success',
+				title: '문서 삭제 완료!',
+			})
 			router.push('/')
 		},
 	})
 
 	const onClickChangeDocsName = async () => {
-		if (!docsName.length) {
-			alert('내용이 없습니다.')
-			return
-		}
+		if (!docsName.length) return toast.error('내용이 없습니다.')
 		updateDocsTitleMutation.mutate()
 	}
 
 	const onClickChangeDocsType = async () => {
-		if (!docsType.length) {
-			alert('내용이 없습니다.')
-			return
-		}
+		if (!docsType.length) return toast.error('내용이 없습니다.')
 		updateDocsTypeMutation.mutate()
 	}
 
@@ -93,6 +99,7 @@ const DetailBtn = ({ docsId }: DetailBtnProps) => {
 
 	return (
 		<S.DetailButtonWrap>
+			<CustomToastContainer autoClose={1000} position={toast.POSITION.TOP_RIGHT} />
 			{user.authority === 'ADMIN' ? (
 				<>
 					<S.DetailInput value={docsType} onChange={(e) => setDocsType(e.target.value)} />
diff --git a/components/Section/Header/index.tsx b/components/Section/Header/index.tsx
index 221b0f2..66db36c 100644
--- a/components/Section/Header/index.tsx
+++ b/components/Section/Header/index.tsx
@@ -6,6 +6,7 @@ import React from 'react'
 import { useRouter } from 'next/router'
 import useUser from '@/hooks/useUser'
 import { headerInitState, subheaderInitState } from '@/state/headerInitState'
+import { toast } from 'react-toastify'
 
 const Header = () => {
 	const [search, setSearch] = React.useState('')
@@ -15,7 +16,7 @@ const Header = () => {
 
 	const navigateSearchResult = () => {
 		if (search.length) return router.push(`/search/${search}`)
-		return alert('검색할 문서명을 입력해주세요!')
+		return toast.error('검색할 문서명을 입력해주세요!')
 	}
 
 	return (
diff --git a/hooks/useUser.tsx b/hooks/useUser.tsx
index 627bbe6..cc7c924 100644
--- a/hooks/useUser.tsx
+++ b/hooks/useUser.tsx
@@ -7,6 +7,7 @@ import { useQuery } from 'react-query'
 import { useRecoilState } from 'recoil'
 import httpClient from '@/lib/httpClient'
 import { getAccessToken } from '@/lib/httpClient/getAccessToken'
+import Swal from 'sweetalert2'
 
 interface UseUserOptions {
 	authorizedPage?: boolean
@@ -49,7 +50,10 @@ const useUser = (options?: UseUserOptions) => {
 
 	React.useEffect(() => {
 		if (options?.authorizedPage && !isLoading && !userInfo) {
-			alert('로그인이 필요한 페이지입니다.')
+			Swal.fire({
+				icon: 'error',
+				title: '로그인이 필요한 페이지입니다.',
+			})
 			router.push('/')
 			// openModal()
 		}
diff --git a/layout/DocsLayout.tsx b/layout/DocsLayout.tsx
index 7def197..bd502d3 100644
--- a/layout/DocsLayout.tsx
+++ b/layout/DocsLayout.tsx
@@ -30,7 +30,7 @@ const DocsLayout = ({ docs }: DocsLayoutPropsType) => {
 						<AccodianMenu name="내용">
 							<S.DocsContents
 								dangerouslySetInnerHTML={{
-									__html: bumawikiEditor(decodeContents(docs?.contents || '')),
+									__html: util.documentation(decodeContents(docs?.contents || '')),
 								}}></S.DocsContents>
 						</AccodianMenu>
 					</S.DocsContentsLoadWrap>
diff --git a/layout/HomeLayout.style.ts b/layout/HomeLayout.style.ts
index a47cb0b..6d2427b 100644
--- a/layout/HomeLayout.style.ts
+++ b/layout/HomeLayout.style.ts
@@ -1,5 +1,13 @@
+import { ToastContainer } from 'react-toastify'
 import styled from 'styled-components'
 
+export const CustomToastContainer = styled(ToastContainer)`
+	.Toastify__toast {
+		color: black;
+		font-size: 14px;
+	}
+`
+
 export const HomeWrap = styled.div`
 	display: flex;
 `
diff --git a/package.json b/package.json
index 0c1a04b..6cf825d 100644
--- a/package.json
+++ b/package.json
@@ -30,8 +30,10 @@
 		"react-dom": "18.2.0",
 		"react-helmet": "^6.1.0",
 		"react-query": "^3.39.3",
+		"react-toastify": "^9.1.2",
 		"recoil": "^0.7.7",
 		"styled-components": "^5.3.8",
+		"sweetalert2": "^11.7.3",
 		"typescript": "4.9.5",
 		"uuid": "^9.0.0"
 	},
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 55d7c24..cd581d0 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,8 +1,11 @@
 import { Aside, Footer, Header, ScrollBtn } from '@/components'
+import { CustomToastContainer } from '@/layout/HomeLayout.style'
 import '@/styles/globals.css'
 import axios from 'axios'
 import type { AppProps } from 'next/app'
 import { QueryClient, QueryClientProvider } from 'react-query'
+import { toast } from 'react-toastify'
+import 'react-toastify/dist/ReactToastify.css'
 import { RecoilRoot } from 'recoil'
 
 axios.defaults.baseURL = 'http://bumawiki.kro.kr/api'
@@ -21,6 +24,7 @@ export default function App({ Component, pageProps }: AppProps) {
 	return (
 		<QueryClientProvider client={queryClient}>
 			<RecoilRoot>
+				<CustomToastContainer autoClose={1000} position={toast.POSITION.TOP_RIGHT} />
 				<Header />
 				<Component {...pageProps}>
 					<ScrollBtn />
diff --git a/pages/create/index.tsx b/pages/create/index.tsx
index ac54e1a..e08c2b6 100644
--- a/pages/create/index.tsx
+++ b/pages/create/index.tsx
@@ -15,6 +15,9 @@ import CreateLayout from '@/layout/CreateLayout'
 import { IFileTypes } from '@/components/DragDrop'
 import httpClient from '@/lib/httpClient'
 import { Storage } from '@/lib/storage'
+import { toast } from 'react-toastify'
+import { CustomToastContainer } from '@/layout/HomeLayout.style'
+import Swal from 'sweetalert2'
 
 const Create = () => {
 	const router = useRouter()
@@ -42,21 +45,24 @@ const Create = () => {
 			}),
 		{
 			onSuccess: (res) => {
-				// alert -> modal or popup or toast 로 대체
-				alert('문서가 생성되었습니다!')
+				Swal.fire({
+					icon: 'success',
+					title: '문서 생성 완료!',
+				})
 				router.push(`/docs/${res.data.title}`)
 			},
 		}
 	)
 
 	const onClickCreateDocs = () => {
-		if (['?', '/', '"', '\\'].includes(docs.title)) return alert('문서명에는 물음표나 쌍따옴표, 슬래시나 역슬래시를 넣을 수 없습니다.')
-		if (!isLogined) return alert('로그인 후 이용 가능한 서비스입니다.')
-		if (!docs.enroll) return alert('연도를 선택해주세요!')
-		if (!docs.title) return alert('문서의 이름을 정해주세요!')
-		if (!docs.docsType) return alert('문서의 분류를 선택해주세요!')
-
 		const { title, enroll, contents, docsType } = docs
+		const isInvalid = title.includes('?') || title.includes('\\') || title.includes('//') || title.includes('"')
+
+		if (isInvalid) return toast.error('문서명에 특수문자를 넣을 수 없습니다.')
+		if (!isLogined) return toast.error('로그인 후 이용 가능한 서비스입니다.')
+		if (!enroll) return toast.error('연도를 선택해주세요!')
+		if (!title) return toast.error('문서의 이름을 정해주세요!')
+		if (!docsType) return toast.error('문서의 분류를 선택해주세요!')
 
 		mutate(
 			createDocsForm({
diff --git a/pages/update/[title].tsx b/pages/update/[title].tsx
index 294e96c..19c8cd9 100644
--- a/pages/update/[title].tsx
+++ b/pages/update/[title].tsx
@@ -13,6 +13,9 @@ import httpClient from '@/lib/httpClient'
 import FileListArray from '@/types/filelistArray.type'
 import useUser from '@/hooks/useUser'
 import UpdateLayout from '@/layout/UpdateLayout'
+import { CustomToastContainer } from '@/layout/HomeLayout.style'
+import { toast } from 'react-toastify'
+import Swal from 'sweetalert2'
 
 interface SinglDocsPropsType {
 	defaultDocs: Docs
@@ -38,15 +41,18 @@ const Update = ({ defaultDocs, title }: SinglDocsPropsType) => {
 
 	const { mutate } = useMutation((data) => httpClient.update.putByTitle(docs.title, data), {
 		onSuccess: () => {
-			alert('문서가 편집되었습니다!')
+			Swal.fire({
+				icon: 'success',
+				title: '문서 편집 완료!',
+			})
 			router.push(`/docs/${title}`)
 		},
 		onError: (err) => {
 			if (err instanceof AxiosError) {
 				const { status, message, error } = err?.response?.data
 				if (status === 403) {
-					if (message === 'Cannot Change Your Docs') return alert('자기 자신의 문서는 편집할 수 없습니다.')
-					if (error === 'Forbidden') return alert('읽기전용 사용자는 문서를 편집할 수 없습니다.')
+					if (message === 'Cannot Change Your Docs') toast.error('자기 자신의 문서는 편집할 수 없습니다.')
+					if (error === 'Forbidden') toast.error('읽기전용 사용자는 문서를 편집할 수 없습니다.')
 				}
 			}
 		},
@@ -74,8 +80,11 @@ const Update = ({ defaultDocs, title }: SinglDocsPropsType) => {
 	}
 
 	const onClickUpdateDocs = async () => {
-		if (!user.id) return alert('로그인 후 이용 가능한 서비스입니다.')
-		if (!docs.contents.length) return alert('문서가 비어있습니다!')
+		if (!user.id) {
+			toast.error('로그인 후 이용 가능한 서비스입니다.')
+			return
+		}
+		if (!docs.contents) toast.error('문서가 비어있습니다!')
 
 		mutateUpdateDocs()
 	}

From ee4d6cf9d8fd290aaae40b8ac4ef740a0b097c5e Mon Sep 17 00:00:00 2001
From: Ubinquitous <ubinquitous1@gmail.com>
Date: Sun, 9 Apr 2023 17:16:36 +0900
Subject: [PATCH 12/20] =?UTF-8?q?FIX=20:=20createForm=20=ED=83=80=EC=9E=85?=
 =?UTF-8?q?=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 layout/CreateLayout.tsx  | 6 ++----
 types/createForm.type.ts | 6 ++++++
 2 files changed, 8 insertions(+), 4 deletions(-)
 create mode 100644 types/createForm.type.ts

diff --git a/layout/CreateLayout.tsx b/layout/CreateLayout.tsx
index b9ac27c..330f268 100644
--- a/layout/CreateLayout.tsx
+++ b/layout/CreateLayout.tsx
@@ -6,15 +6,13 @@ import DragDrop, { IFileTypes } from '@/components/DragDrop'
 import UserType from '@/types/user.type'
 import CreateDocsType from '@/types/create.type'
 import FrameType from '@/types/frame.type'
+import CreateFormType from '@/types/createForm.type'
 
 interface CreateLayoutPropsType {
 	userInfo: UserType
 	setDocs: React.Dispatch<React.SetStateAction<CreateDocsType>>
 	docs: CreateDocsType
-	createForm: {
-		id: string
-		title: string
-	}[]
+	createForm: CreateFormType[]
 	years: number[]
 	getFiles: (file: IFileTypes[]) => void
 	size: FrameType
diff --git a/types/createForm.type.ts b/types/createForm.type.ts
new file mode 100644
index 0000000..db1728d
--- /dev/null
+++ b/types/createForm.type.ts
@@ -0,0 +1,6 @@
+interface CreateFormType {
+	id: string
+	title: string
+}
+
+export default CreateFormType

From 6cdc18dc4bb1769a45ed6c809e42b43b95ca15ae Mon Sep 17 00:00:00 2001
From: Ubinquitous <ubinquitous1@gmail.com>
Date: Sun, 9 Apr 2023 17:17:13 +0900
Subject: [PATCH 13/20] =?UTF-8?q?FIX=20:=20=EC=85=80=ED=94=84=20=ED=81=B4?=
 =?UTF-8?q?=EB=A1=9C=EC=A7=95=20=ED=83=9C=EA=B7=B8=20=EC=A7=80=ED=96=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 layout/HomeLayout.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/layout/HomeLayout.tsx b/layout/HomeLayout.tsx
index a45168d..66d8431 100644
--- a/layout/HomeLayout.tsx
+++ b/layout/HomeLayout.tsx
@@ -181,7 +181,8 @@ const HomeLayout = () => {
 								title="YouTube video player"
 								frameBorder="0"
 								allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture;"
-								allowFullScreen></S.SummaryVideo>
+								allowFullScreen
+							/>
 						</S.SummaryVideoWrap>
 					</AccodianMenu>
 				</S.SummaryWrap>

From d28d961ca45192900be6195bd4b0feacf4a21187 Mon Sep 17 00:00:00 2001
From: Ubinquitous <ubinquitous1@gmail.com>
Date: Sun, 9 Apr 2023 17:18:18 +0900
Subject: [PATCH 14/20] =?UTF-8?q?FIX=20:=20=EC=A1=B0=EA=B1=B4=EB=B6=80=20?=
 =?UTF-8?q?=EC=97=B0=EC=82=B0=EC=9E=90=20=EC=82=AC=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 layout/MyPageLayout.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/layout/MyPageLayout.tsx b/layout/MyPageLayout.tsx
index f0f8ca0..c0545a0 100644
--- a/layout/MyPageLayout.tsx
+++ b/layout/MyPageLayout.tsx
@@ -23,7 +23,7 @@ const MyPageLayout = ({ user, mutate }: MyPageLayoutPropsType) => {
 				<S.MyPageInfoWrap>
 					<AccodianMenu name={'정보'}>
 						<S.MyPageInfoLoadWrap>
-							{user.id ? (
+							{user.id && (
 								<>
 									<span>
 										이름은 {user.nickName}이며, 부마위키의{' '}
@@ -37,8 +37,6 @@ const MyPageLayout = ({ user, mutate }: MyPageLayoutPropsType) => {
 										<S.LogoutText onClick={() => mutate()}>로그아웃</S.LogoutText>
 									</div>
 								</>
-							) : (
-								<span>이 유저는 로그인을 하지 않은 유저다. 로그인을 하면 문서를 생성하고 편집할 수 있다.</span>
 							)}
 						</S.MyPageInfoLoadWrap>
 					</AccodianMenu>

From 5d41b213a6d3aef0e0b3e1eaf3b2910d3dded2fe Mon Sep 17 00:00:00 2001
From: Ubinquitous <ubinquitous1@gmail.com>
Date: Sun, 9 Apr 2023 17:19:40 +0900
Subject: [PATCH 15/20] =?UTF-8?q?FIX=20:=20=EC=A1=B0=EA=B1=B4=EB=B6=80=20?=
 =?UTF-8?q?=EB=A0=8C=EB=8D=94=EB=A7=81=20=EC=82=AC=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 layout/SearchLayout.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/layout/SearchLayout.tsx b/layout/SearchLayout.tsx
index b96e6f3..b26354a 100644
--- a/layout/SearchLayout.tsx
+++ b/layout/SearchLayout.tsx
@@ -22,7 +22,7 @@ const SearchLayout = ({ searchValue, results }: SearchLayoutPropsType) => {
 				<S.SearchLine />
 				<S.SearchResult>
 					<S.SearchList>
-						{results ? (
+						{results && (
 							<>
 								{results.map((result: Docs, index) => (
 									<S.SearchListItem key={index}>
@@ -37,9 +37,8 @@ const SearchLayout = ({ searchValue, results }: SearchLayoutPropsType) => {
 									</S.SearchListItem>
 								))}
 							</>
-						) : (
-							<S.SearchCreateLink href={`/create?name=${searchValue}`}>검색 결과가 없습니다. 지금 문서를 생성해보세요</S.SearchCreateLink>
 						)}
+						{!results && <S.SearchCreateLink href={`/create?name=${searchValue}`}>검색 결과가 없습니다. 지금 문서를 생성해보세요</S.SearchCreateLink>}
 					</S.SearchList>
 				</S.SearchResult>
 				<SubFooter />

From e238d2aee04645e235d07b152d3d5bb283f4e67f Mon Sep 17 00:00:00 2001
From: Ubinquitous <ubinquitous1@gmail.com>
Date: Sun, 9 Apr 2023 17:20:30 +0900
Subject: [PATCH 16/20] =?UTF-8?q?FIX=20:=20=EB=B3=80=EC=88=98=20=EC=82=AC?=
 =?UTF-8?q?=EC=9A=A9=EC=95=8A=EB=8A=94=20=EB=AC=B8=EC=9E=90=EC=97=B4=20?=
 =?UTF-8?q?=ED=85=9C=ED=94=8C=EB=A6=BF=20=EB=A6=AC=ED=84=B0=EB=9F=B4=20?=
 =?UTF-8?q?=EC=A7=80=EC=96=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 layout/TeacherLayout.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/layout/TeacherLayout.tsx b/layout/TeacherLayout.tsx
index d93460a..5ef1a29 100644
--- a/layout/TeacherLayout.tsx
+++ b/layout/TeacherLayout.tsx
@@ -19,7 +19,7 @@ const TeacherLayout = ({ common_teacher, major_teacher, mentor_teacher }: Teache
 				<Classify>선생님</Classify>
 				<S.StaticWarnText>※ 필독! 문서 내 대상을 비하하는 내용을 서술하는 사용자는 부마위키 이용에 제한을 받을 수 있습니다 ※</S.StaticWarnText>
 				<S.StaticList>
-					<AccodianMenu name={`인문과목 선생님`}>
+					<AccodianMenu name="인문과목 선생님">
 						<S.StaticDetailList>
 							{common_teacher.map((teacher: Docs, index) => (
 								<S.StaticListItem key={index}>
@@ -28,7 +28,7 @@ const TeacherLayout = ({ common_teacher, major_teacher, mentor_teacher }: Teache
 							))}
 						</S.StaticDetailList>
 					</AccodianMenu>
-					<AccodianMenu name={`전공과목 선생님`}>
+					<AccodianMenu name="전공과목 선생님">
 						<S.StaticDetailList>
 							{major_teacher.map((teacher: Docs, index) => (
 								<S.StaticListItem key={index}>
@@ -39,7 +39,7 @@ const TeacherLayout = ({ common_teacher, major_teacher, mentor_teacher }: Teache
 							))}
 						</S.StaticDetailList>
 					</AccodianMenu>
-					<AccodianMenu name={`멘토 선생님`}>
+					<AccodianMenu name="멘토 선생님">
 						<S.StaticDetailList>
 							{mentor_teacher.map((teacher: Docs) => (
 								<S.StaticListItem key={teacher.id}>

From 4051db4a021baee36e31ca08ef57b05d168ec94d Mon Sep 17 00:00:00 2001
From: Ubinquitous <ubinquitous1@gmail.com>
Date: Sun, 9 Apr 2023 17:20:42 +0900
Subject: [PATCH 17/20] =?UTF-8?q?FIX=20:=20View=EB=8B=A8=EC=97=90=EC=84=9C?=
 =?UTF-8?q?=20=EC=98=B5=EC=85=94=EB=84=90=20=EC=B2=B4=EC=9D=B4=EB=8B=9D=20?=
 =?UTF-8?q?=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 layout/VersionLayout.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/layout/VersionLayout.tsx b/layout/VersionLayout.tsx
index 3428c35..cf8784c 100644
--- a/layout/VersionLayout.tsx
+++ b/layout/VersionLayout.tsx
@@ -19,7 +19,7 @@ const VersionLayout = ({ docsName, version }: VersionLayoutPropsType) => {
 				<S.VersionLine />
 				<S.VersionContentsWrap>
 					<ul>
-						{version?.map((ver: VersionDocs, index: number) => (
+						{version.map((ver: VersionDocs, index: number) => (
 							<S.VersionList key={index}>
 								<span>
 									<S.VersionLink href={`/version/${docsName}/detail/${index}`}>{util.dateParser(ver.thisVersionCreatedAt)}</S.VersionLink>

From 24636e5ba73ea688baa50294dd56b238d5f4c68d Mon Sep 17 00:00:00 2001
From: Ubinquitous <ubinquitous1@gmail.com>
Date: Sun, 9 Apr 2023 17:26:46 +0900
Subject: [PATCH 18/20] =?UTF-8?q?FIX=20:=20Array.map()=EC=97=90=EC=84=9C?=
 =?UTF-8?q?=20index=EB=A1=9C=20key=20=EC=82=AC=EC=9A=A9=20=EC=A7=80?=
 =?UTF-8?q?=EC=96=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 layout/AccidentLayout.tsx |  4 ++--
 layout/CreateLayout.tsx   | 12 ++++++------
 layout/MyPageLayout.tsx   |  4 ++--
 layout/SearchLayout.tsx   |  4 ++--
 layout/StudentLayout.tsx  |  4 ++--
 layout/TeacherLayout.tsx  |  8 ++++----
 layout/UserLayout.tsx     | 14 +++++++-------
 layout/VersionLayout.tsx  |  4 ++--
 pages/search/[search].tsx | 16 ++++++++--------
 9 files changed, 35 insertions(+), 35 deletions(-)

diff --git a/layout/AccidentLayout.tsx b/layout/AccidentLayout.tsx
index e7aec83..2542464 100644
--- a/layout/AccidentLayout.tsx
+++ b/layout/AccidentLayout.tsx
@@ -22,8 +22,8 @@ const AccidentLayout = ({ years, docs }: AccidentLayoutPropsType) => {
 				<S.StaticListWrap>
 					{years.map((year) => (
 						<AccodianMenu name={`${year}년 사건/사고`} key={year} isOpen={true}>
-							{docs.map((accident: Docs, index) => (
-								<S.StaticList key={index}>
+							{docs.map((accident: Docs) => (
+								<S.StaticList key={accident.id}>
 									{accident.enroll === year && (
 										<S.StaticListItem>
 											<S.StaticLink href={`/docs/${accident.title}`}>{accident.title}</S.StaticLink>
diff --git a/layout/CreateLayout.tsx b/layout/CreateLayout.tsx
index 330f268..378dc5c 100644
--- a/layout/CreateLayout.tsx
+++ b/layout/CreateLayout.tsx
@@ -54,15 +54,15 @@ const CreateLayout = ({
 										<S.CreateTableRadio type="radio" onChange={(e) => setDocs({ ...docs, docsType: e.target.id })} id="READONLY" name="radio" />
 									</>
 								)}
-								{createForm.map((info, index) => (
-									<S.CreateTableRadioBox key={index}>
+								{createForm.map((info) => (
+									<S.CreateTableRadioBox key={info.id}>
 										<label htmlFor={info.id}>{info.title}</label>
 										<S.CreateTableRadio type="radio" onChange={(e) => changeDocsType(e)} id={info.id} name="radio" />
 									</S.CreateTableRadioBox>
 								))}
 								<S.CreateTableSelectBox>
-									{createForm.map((info, index) => (
-										<S.CreateTableSelectOption key={index} onChange={(e) => changeDocsType(e as React.ChangeEvent<HTMLOptionElement>)} id={info.id}>
+									{createForm.map((info) => (
+										<S.CreateTableSelectOption key={info.id} onChange={(e) => changeDocsType(e as React.ChangeEvent<HTMLOptionElement>)} id={info.id}>
 											{info.title}
 										</S.CreateTableSelectOption>
 									))}
@@ -78,8 +78,8 @@ const CreateLayout = ({
 						<S.CreateTR>
 							<S.CreateTDTitle>연도</S.CreateTDTitle>
 							<S.CreateTDDisplay>
-								{years.map((year, index) => (
-									<div key={index}>
+								{years.map((year) => (
+									<div key={year}>
 										<S.EnrollLabel htmlFor={`${year}`}>{year}년</S.EnrollLabel>
 										<S.CreateTableRadio
 											type="radio"
diff --git a/layout/MyPageLayout.tsx b/layout/MyPageLayout.tsx
index c0545a0..4e55c54 100644
--- a/layout/MyPageLayout.tsx
+++ b/layout/MyPageLayout.tsx
@@ -45,8 +45,8 @@ const MyPageLayout = ({ user, mutate }: MyPageLayoutPropsType) => {
 							<S.ContributeWrap>
 								<span>이 유저가 기여한 문서의 정보들이다.</span>
 								<S.ContributeList>
-									{user.contributeDocs.map((docs: Contributors, index: number) => (
-										<span key={index}>
+									{user.contributeDocs.map((docs: Contributors) => (
+										<span key={docs.createTime}>
 											문서명 :&nbsp;
 											<S.ContributeLink href={`/docs/${docs.title}`}>{docs.title}</S.ContributeLink>
 											<br />
diff --git a/layout/SearchLayout.tsx b/layout/SearchLayout.tsx
index b26354a..6d9c210 100644
--- a/layout/SearchLayout.tsx
+++ b/layout/SearchLayout.tsx
@@ -24,8 +24,8 @@ const SearchLayout = ({ searchValue, results }: SearchLayoutPropsType) => {
 					<S.SearchList>
 						{results && (
 							<>
-								{results.map((result: Docs, index) => (
-									<S.SearchListItem key={index}>
+								{results.map((result: Docs) => (
+									<S.SearchListItem key={result.id}>
 										<S.SearchLink href={`/docs/${result.title}`}>
 											{result.title}&nbsp;
 											{result.docsType === 'FRAME' ? null : (
diff --git a/layout/StudentLayout.tsx b/layout/StudentLayout.tsx
index 0d30ba9..01728ff 100644
--- a/layout/StudentLayout.tsx
+++ b/layout/StudentLayout.tsx
@@ -22,8 +22,8 @@ const StudentLayout = ({ docs, years }: StudentLayoutPropsType) => {
 				<S.StaticListWrap>
 					{years.map((year) => (
 						<AccodianMenu name={`${year}년도 입학생`} key={year} isOpen={true}>
-							{docs.map((student: Docs, index) => (
-								<S.StaticList key={index}>
+							{docs.map((student: Docs) => (
+								<S.StaticList key={student.id}>
 									{student.enroll === year && (
 										<S.StaticListItem>
 											<S.StaticLink href={`/docs/${student.title}`}>{student.title}</S.StaticLink>
diff --git a/layout/TeacherLayout.tsx b/layout/TeacherLayout.tsx
index 5ef1a29..cba34ee 100644
--- a/layout/TeacherLayout.tsx
+++ b/layout/TeacherLayout.tsx
@@ -21,8 +21,8 @@ const TeacherLayout = ({ common_teacher, major_teacher, mentor_teacher }: Teache
 				<S.StaticList>
 					<AccodianMenu name="인문과목 선생님">
 						<S.StaticDetailList>
-							{common_teacher.map((teacher: Docs, index) => (
-								<S.StaticListItem key={index}>
+							{common_teacher.map((teacher: Docs) => (
+								<S.StaticListItem key={teacher.id}>
 									<S.StaticLink href={`/docs/${teacher.title}`}>{teacher.title}</S.StaticLink>
 								</S.StaticListItem>
 							))}
@@ -30,8 +30,8 @@ const TeacherLayout = ({ common_teacher, major_teacher, mentor_teacher }: Teache
 					</AccodianMenu>
 					<AccodianMenu name="전공과목 선생님">
 						<S.StaticDetailList>
-							{major_teacher.map((teacher: Docs, index) => (
-								<S.StaticListItem key={index}>
+							{major_teacher.map((teacher: Docs) => (
+								<S.StaticListItem key={teacher.id}>
 									<S.StaticLink href={`/docs/${teacher.title}`} className="link">
 										{teacher.title}
 									</S.StaticLink>
diff --git a/layout/UserLayout.tsx b/layout/UserLayout.tsx
index 49d9937..27b4ab9 100644
--- a/layout/UserLayout.tsx
+++ b/layout/UserLayout.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import * as S from './UserLayout.style'
 import * as util from '@/utils'
-import { AccodianMenu, Aside, Board, Classify, ScrollBtn } from '@/components'
+import { AccodianMenu, Aside, Authority, Board, Classify, ScrollBtn } from '@/components'
 import UserType from '@/types/user.type'
 import Contributors from '@/types/contributors.type'
 
@@ -14,17 +14,17 @@ const UserLayout = ({ user }: UserLayoutPropsType) => {
 		<S.UserWrap>
 			<Board>
 				<S.UserTitleWrap>
-					<S.UserTitleText>유저 : {user?.nickName}</S.UserTitleText>
+					<S.UserTitleText>유저 : {user.nickName}</S.UserTitleText>
 				</S.UserTitleWrap>
 				<Classify>{user?.authority}</Classify>
 				<S.UserLine />
 				<S.UserInfoWrap>
 					<AccodianMenu name="정보">
 						<S.UserInfoLoadWrap>
-							{/* {userInfo.authority === 'ADMIN' ? <C.Authority email={ || ''} /> : null} */}
+							{user.authority === 'ADMIN' && <Authority email={user.email} />}
 							<span>
-								이름은 {user?.nickName}이며, 부마위키의
-								{user?.authority === 'ADMIN' ? ' 관리자' : user?.authority === 'BANNED' ? ' 읽기전용 사용자' : ' 사용자'} 중 한 명이다.
+								이름은 {user.nickName}이며, 부마위키의
+								{user.authority === 'ADMIN' ? ' 관리자' : user?.authority === 'BANNED' ? ' 읽기전용 사용자' : ' 사용자'} 중 한 명이다.
 							</span>
 						</S.UserInfoLoadWrap>
 					</AccodianMenu>
@@ -32,8 +32,8 @@ const UserLayout = ({ user }: UserLayoutPropsType) => {
 						<S.ContributeWrap>
 							<span>이 유저가 기여한 문서의 정보들이다.</span>
 							<S.ContributeList>
-								{user?.contributeDocs.map((docs: Contributors, index) => (
-									<span key={index}>
+								{user?.contributeDocs.map((docs: Contributors) => (
+									<span key={docs.createTime}>
 										문서명 :&nbsp;
 										<S.ContributeLink href={`/docs/${docs.title}`}>{docs.title}</S.ContributeLink>
 										<br />
diff --git a/layout/VersionLayout.tsx b/layout/VersionLayout.tsx
index cf8784c..6664b75 100644
--- a/layout/VersionLayout.tsx
+++ b/layout/VersionLayout.tsx
@@ -19,8 +19,8 @@ const VersionLayout = ({ docsName, version }: VersionLayoutPropsType) => {
 				<S.VersionLine />
 				<S.VersionContentsWrap>
 					<ul>
-						{version.map((ver: VersionDocs, index: number) => (
-							<S.VersionList key={index}>
+						{version.map((ver: VersionDocs, index) => (
+							<S.VersionList key={ver.thisVersionCreatedAt}>
 								<span>
 									<S.VersionLink href={`/version/${docsName}/detail/${index}`}>{util.dateParser(ver.thisVersionCreatedAt)}</S.VersionLink>
 								</span>
diff --git a/pages/search/[search].tsx b/pages/search/[search].tsx
index 3c0c4d6..9745fe8 100644
--- a/pages/search/[search].tsx
+++ b/pages/search/[search].tsx
@@ -14,16 +14,16 @@ interface SingleDocsPropsType {
 	searchValue: string
 }
 
-const Search = (props: SingleDocsPropsType) => {
+const Search = ({ searchValue, redirect, results }: SingleDocsPropsType) => {
 	const router = useRouter()
 
 	const seoConfig: NextSeoProps = {
-		title: `부마위키 검색 - ${props.searchValue}`,
-		description: `부마위키의 "${props.searchValue}" 검색 결과에 관한 페이지입니다.`,
+		title: `부마위키 검색 - ${searchValue}`,
+		description: `부마위키의 "${searchValue}" 검색 결과에 관한 페이지입니다.`,
 		openGraph: {
 			type: 'website',
-			title: `부마위키 검색 - ${props.searchValue}`,
-			description: `부마위키의 "${props.searchValue}" 검색 결과에 관한 페이지입니다.`,
+			title: `부마위키 검색 - ${searchValue}`,
+			description: `부마위키의 "${searchValue}" 검색 결과에 관한 페이지입니다.`,
 			images: [
 				{
 					url: '/images/meta-img.png',
@@ -33,13 +33,13 @@ const Search = (props: SingleDocsPropsType) => {
 	}
 
 	React.useEffect(() => {
-		if (props.redirect) router.push(`/docs/${props.results[0].title}`)
-	}, [props.redirect, props.results, router])
+		if (redirect) router.push(`/docs/${results[0].title}`)
+	}, [redirect, results, router])
 
 	return (
 		<>
 			<NextSeo {...seoConfig} />
-			<SearchLayout {...props} />
+			<SearchLayout searchValue={searchValue} results={results} />
 		</>
 	)
 }

From 04228db007aaf246d3be6ef5823a9e9229d62009 Mon Sep 17 00:00:00 2001
From: Ubinquitous <ubinquitous1@gmail.com>
Date: Sun, 9 Apr 2023 17:27:47 +0900
Subject: [PATCH 19/20] =?UTF-8?q?FIX=20:=20View=20=EB=8B=A8=EC=97=90?=
 =?UTF-8?q?=EC=84=9C=20=EC=98=B5=EC=85=94=EB=84=90=20=EC=B2=B4=EC=9D=B4?=
 =?UTF-8?q?=EB=8B=9D=20=EC=A7=80=EC=96=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 layout/DocsLayout.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/layout/DocsLayout.tsx b/layout/DocsLayout.tsx
index bd502d3..2097ea1 100644
--- a/layout/DocsLayout.tsx
+++ b/layout/DocsLayout.tsx
@@ -15,9 +15,9 @@ const DocsLayout = ({ docs }: DocsLayoutPropsType) => {
 		<S.DocsWrap>
 			<Board>
 				<S.DocsTitleWrap>
-					<S.DocsTitleText>{docs?.title.replace(/&\$\^%/gi, '"')}</S.DocsTitleText>
+					<S.DocsTitleText>{docs.title.replace(/&\$\^%/gi, '"')}</S.DocsTitleText>
 					<S.DocsMenu>
-						<DetailBtn docsId={docs?.id || -1} />
+						<DetailBtn docsId={docs.id} />
 					</S.DocsMenu>
 				</S.DocsTitleWrap>
 				<S.Classify>

From 367a5fd8588cf5777c9a4c0552b17071b02c68bc Mon Sep 17 00:00:00 2001
From: Ubinquitous <ubinquitous1@gmail.com>
Date: Sun, 9 Apr 2023 17:29:12 +0900
Subject: [PATCH 20/20] =?UTF-8?q?FIX=20:=20View=20=EB=8B=A8=EC=97=90?=
 =?UTF-8?q?=EC=84=9C=20=EC=98=B5=EC=85=94=EB=84=90=20=EC=B2=B4=EC=9D=B4?=
 =?UTF-8?q?=EB=8B=9D=20=EC=A7=80=EC=96=91,=20Model=EC=97=90=EC=84=9C=20?=
 =?UTF-8?q?=EC=97=90=EB=9F=AC=20=EB=B0=9C=EC=83=9D=EC=8B=9C=20init?=
 =?UTF-8?q?=EC=B2=98=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 layout/MyPageLayout.tsx | 4 +---
 pages/mypage/index.tsx  | 3 ++-
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/layout/MyPageLayout.tsx b/layout/MyPageLayout.tsx
index 4e55c54..0cfc553 100644
--- a/layout/MyPageLayout.tsx
+++ b/layout/MyPageLayout.tsx
@@ -40,7 +40,7 @@ const MyPageLayout = ({ user, mutate }: MyPageLayoutPropsType) => {
 							)}
 						</S.MyPageInfoLoadWrap>
 					</AccodianMenu>
-					{user.id ? (
+					{user.id && (
 						<AccodianMenu name={'기여한 문서'}>
 							<S.ContributeWrap>
 								<span>이 유저가 기여한 문서의 정보들이다.</span>
@@ -56,8 +56,6 @@ const MyPageLayout = ({ user, mutate }: MyPageLayoutPropsType) => {
 								</S.ContributeList>
 							</S.ContributeWrap>
 						</AccodianMenu>
-					) : (
-						''
 					)}
 				</S.MyPageInfoWrap>
 			</Board>
diff --git a/pages/mypage/index.tsx b/pages/mypage/index.tsx
index 007c9a6..5c9bd24 100644
--- a/pages/mypage/index.tsx
+++ b/pages/mypage/index.tsx
@@ -7,6 +7,7 @@ import { QueryClient, useMutation } from 'react-query'
 import { Storage } from '@/lib/storage/'
 import { NextSeo, NextSeoProps } from 'next-seo'
 import MyPageLayout from '@/layout/MyPageLayout'
+import { initUserState } from '@/context/userState'
 
 const MyPage = () => {
 	const { user, logout } = useUser()
@@ -47,7 +48,7 @@ const MyPage = () => {
 	return (
 		<>
 			<NextSeo {...seoConfig} />
-			<MyPageLayout user={user} mutate={mutate} />
+			<MyPageLayout user={user || initUserState} mutate={mutate} />
 		</>
 	)
 }