Merge pull request #5 from Team-INSERT/refactor/layout

Refactor/layout

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) => {

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,16 +48,18 @@ 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}`)
 		},
 	})
 
 	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('로그인 후 편집하실 수 있습니다!')
-		console.log(router)
 		router.push(`/update/${router.query.title}`)
 	}
 
@@ -67,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()
 	}
 
@@ -94,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)} />

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 (

hooks/useUser.tsx

@@ -6,26 +6,35 @@ 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'
+import Swal from 'sweetalert2'
 
 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({
@@ -41,7 +50,10 @@ const useUser = (options?: UseUserOptions) => {
 
 	React.useEffect(() => {
 		if (options?.authorizedPage && !isLoading && !userInfo) {
-			alert('로그인이 필요한 페이지입니다.')
+			Swal.fire({
+				icon: 'error',
+				title: '로그인이 필요한 페이지입니다.',
+			})
 			router.push('/')
 			// openModal()
 		}

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) => (
+								<S.StaticList key={accident.id}>
+									{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

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

layout/create/style.ts → 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;