Merge pull request #294 from techeer-sv/FE/#293

refactor : 프로젝트 폴더 구조 수정
techeer-sv · Nov 10, 2023 · 6f681c2 · 6f681c2
2 parents 89d217b + 9c315c6
commit 6f681c2
Show file tree

Hide file tree

Showing 33 changed files with 187 additions and 142 deletions.
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
@@ -2,7 +2,6 @@ import './globals.css'
 import type { Metadata } from 'next'
 import { Inter } from 'next/font/google'
 import Provider from '../components/general/Provider'
-import NavBar from '../components/general/NavBar'
 
 const inter = Inter({ subsets: ['latin'] })
 
@@ -19,9 +18,7 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className={inter.className}>
-        <Provider>
-          <NavBar>{children}</NavBar>
-        </Provider>
+        <Provider>{children}</Provider>
       </body>
     </html>
   )

diff --git a/...end/src/app/(read)/post/[postId]/page.tsx → ...app/project/(read)/post/[postId]/page.tsx b/...end/src/app/(read)/post/[postId]/page.tsx → ...app/project/(read)/post/[postId]/page.tsx
@@ -4,20 +4,20 @@ import Image from 'next/image'
 import { useEffect, useState, useCallback } from 'react'
 import { useRouter } from 'next/navigation'
 import { useRecoilState, useRecoilValue } from 'recoil'
-import gptIcon from '../../../../../public/images/svg/gptIcon.svg'
-import ProfileIcon from '../../../../../public/images/svg/profileIcon.svg'
-import GptModal from '../../../../components/read/GptModal'
-import ToastViewer from '../../../../components/read/ToastViewer'
-import Reply from '../../../../components/read/Reply'
+import gptIcon from '../../../../../../public/images/svg/gptIcon.svg'
+import ProfileIcon from '../../../../../../public/images/svg/profileIcon.svg'
+import GptModal from '../../../../../components/project/read/GptModal'
+import ToastViewer from '../../../../../components/project/read/ToastViewer'
+import Reply from '../../../../../components/project/read/Reply'
 
 import {
   contentsState,
   selectedStackState,
   titleState,
   tldrState,
   refreshState,
-} from '../../../../utils/atoms'
-import AllStacks from '../../../../utils/stacks'
+} from '../../../../../utils/atoms'
+import AllStacks from '../../../../../utils/stacks'
 
 type ReadReplyObject = {
   commentId: number
@@ -54,11 +54,11 @@ export default function ReadingPage({ params }: ParamsType) {
   }, [isOpenModal])
 
   function toWrite() {
-    router.push('/write')
+    router.push('/project/write')
   }
 
   function toModify() {
-    router.push('/modify')
+    router.push('/project/modification')
   }
   // GET요청 보내서 데이터 가져오고 받은 데이터 변수에 넣어주는 함수
   async function getData() {
@@ -79,7 +79,7 @@ export default function ReadingPage({ params }: ParamsType) {
         alert('프로젝트 상세 조회 실패')
         throw new Error('프로젝트 상세 조회 실패')
       }
-      router.push('/')
+      router.push('/project')
     }
 
     const resData = await res.json()
@@ -119,10 +119,10 @@ export default function ReadingPage({ params }: ParamsType) {
           alert('프로젝트 삭제 실패')
           throw new Error('프로젝트 삭제 실패')
         }
-        router.push('/')
+        router.push('/project')
       } else {
         alert('프로젝트 삭제 성공')
-        router.push('/')
+        router.push('/project')
       }
     }
   }

diff --git a/.../(search)/search-post/[postName]/page.tsx → .../(search)/search-post/[postName]/page.tsx b/.../(search)/search-post/[postName]/page.tsx → .../(search)/search-post/[postName]/page.tsx
@@ -3,9 +3,9 @@
 import { useEffect, useState } from 'react'
 import { useRouter } from 'next/navigation'
 
-import WriteIcon from '../../../../../public/images/svg/pencil-square.svg'
-import Banner from '../../../../components/main/Banner'
-import ProjectCard from '../../../../components/main/ProjectCard'
+import WriteIcon from '../../../../../../public/images/svg/pencil-square.svg'
+import Banner from '../../../../../components/project/main/Banner'
+import ProjectCard from '../../../../../components/project/main/ProjectCard'
 
 type DataObject = {
   id: number
@@ -27,7 +27,7 @@ export default function SearchProjectPage({ params }: ParamsType) {
   const router = useRouter() // react-router-dom useNavigate 사용 선언
 
   function toWrite() {
-    router.push('/write')
+    router.push('/project/write')
   }
 
   async function getData() {

diff --git a/.../(search)/search-user/[userName]/page.tsx → .../(search)/search-user/[userName]/page.tsx b/.../(search)/search-user/[userName]/page.tsx → .../(search)/search-user/[userName]/page.tsx
@@ -5,9 +5,9 @@ import { useRouter } from 'next/navigation'
 import { v4 as uuidv4 } from 'uuid'
 import Image from 'next/image'
 
-import WriteIcon from '../../../../../public/images/svg/pencil-square.svg'
-import ProfileIcon from '../../../../../public/images/svg/profileIcon.svg'
-import Banner from '../../../../components/main/Banner'
+import WriteIcon from '../../../../../../public/images/svg/arrow-right.svg'
+import ProfileIcon from '../../../../../../public/images/svg/arrow-left.svg'
+import Banner from '../../../../../components/project/main/Banner'
 
 type DataObject = {
   nickname: string

diff --git a/...nd/src/app/(submit)/modification/page.tsx → ...pp/project/(submit)/modification/page.tsx b/...nd/src/app/(submit)/modification/page.tsx → ...pp/project/(submit)/modification/page.tsx
@@ -7,19 +7,19 @@ import dynamic from 'next/dynamic'
 
 // TODO: NavBar 만들어야 함
 // import NavBar from '../../components/general/NavBar'
-import ImageUploader from '../../../components/submit/imageUploader'
-import TechStackSelection from '../../../components/submit/techStackSelection'
+import ImageUploader from '../../../../components/project/submit/imageUploader'
+import TechStackSelection from '../../../../components/project/submit/techStackSelection'
 import {
   contentsState,
   projectIdState,
   selectedStackState,
   thumbnailUrlState,
   titleState,
   tldrState,
-} from '../../../utils/atoms'
+} from '../../../../utils/atoms'
 
 const ToastUIEditor = dynamic(
-  () => import('../../../components/submit/toastUIEditor'),
+  () => import('../../../../components/project/submit/toastUIEditor'),
   { ssr: false },
 )
 
@@ -65,14 +65,17 @@ export default function NewPost() {
       thumbNail: thumbnailUrl,
     }
 
-    const res = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/projects`, {
-      method: 'PUT',
-      headers: {
-        'Content-Type': 'application/json',
-        Authorization: `Bearer ${accessToken || persistToken}`,
+    const res = await fetch(
+      `${process.env.NEXT_PUBLIC_BASE_URL}/projects/${projectId}`,
+      {
+        method: 'PUT',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${accessToken || persistToken}`,
+        },
+        body: JSON.stringify(data),
       },
-      body: JSON.stringify(data),
-    })
+    )
 
     if (!res.ok) {
       if (!navigator.onLine) {
@@ -89,12 +92,12 @@ export default function NewPost() {
     }
 
     setThumbnailUrl('')
-    router.push(`/read/${projectId}`)
+    router.push(`/project/post/${projectId}`)
   }
 
   // 취소 버튼 누를시 메인페이지 이동
   function toMain() {
-    router.push('/')
+    router.push('/project')
   }
 
   useEffect(() => {
@@ -104,7 +107,7 @@ export default function NewPost() {
     if (!(accessToken || persistToken)) {
       // eslint-disable-next-line no-alert
       alert('로그인시 이용하실 수 있습니다.')
-      router.push('/')
+      router.push('/project')
     }
   }, [])
 

diff --git a/frontend/src/app/(submit)/new-post/page.tsx → ...rc/app/project/(submit)/new-post/page.tsx b/frontend/src/app/(submit)/new-post/page.tsx → ...rc/app/project/(submit)/new-post/page.tsx
@@ -5,21 +5,19 @@ import { useRouter } from 'next/navigation'
 import { useRecoilState } from 'recoil'
 import dynamic from 'next/dynamic'
 
-// TODO: NavBar 만들어야 함
-// import NavBar from '../../components/general/NavBar'
-import ImageUploader from '../../../components/submit/imageUploader'
-import TechStackSelection from '../../../components/submit/techStackSelection'
+import ImageUploader from '../../../../components/project/submit/imageUploader'
+import TechStackSelection from '../../../../components/project/submit/techStackSelection'
 import {
   contentsState,
   projectIdState,
   selectedStackState,
   thumbnailUrlState,
   titleState,
   tldrState,
-} from '../../../utils/atoms'
+} from '../../../../utils/atoms'
 
 const ToastUIEditor = dynamic(
-  () => import('../../../components/submit/toastUIEditor'),
+  () => import('../../../../components/project/submit/toastUIEditor'),
   { ssr: false },
 )
 
@@ -92,12 +90,12 @@ export default function NewPost() {
 
     setProjectId(resData.data.projectId)
     setThumbnailUrl('')
-    router.push(`/read/${resData.data.projectId}`)
+    router.push(`/project/post/${resData.data.projectId}`)
   }
 
   // 취소 버튼 누를시 메인페이지 이동
   function toMain() {
-    router.push('/')
+    router.push('/project')
   }
 
   useEffect(() => {
@@ -107,7 +105,7 @@ export default function NewPost() {
     if (!(accessToken || persistToken)) {
       // eslint-disable-next-line no-alert
       alert('로그인시 이용하실 수 있습니다.')
-      router.push('/')
+      router.push('/project')
     }
     // 글쓰기 페이지 렌더링 시 변수 초기화
     setTitle('')

diff --git a/frontend/src/app/(user)/login/error.tsx → ...nd/src/app/project/(user)/login/error.tsx b/frontend/src/app/(user)/login/error.tsx → ...nd/src/app/project/(user)/login/error.tsx
diff --git a/frontend/src/app/(user)/login/page.tsx → ...end/src/app/project/(user)/login/page.tsx b/frontend/src/app/(user)/login/page.tsx → ...end/src/app/project/(user)/login/page.tsx
@@ -10,8 +10,8 @@ import { useRecoilState } from 'recoil'
 import * as yup from 'yup'
 
 import Image from 'next/image'
-import Email from '../../../../public/images/svg/email.svg'
-import { autoLoginState, usernameState } from '../../../utils/atoms'
+import Email from '../../../../../public/images/svg/email.svg'
+import { autoLoginState, usernameState } from '../../../../utils/atoms'
 
 type DataObject = {
   email: string
@@ -60,11 +60,11 @@ export default function Login() {
   })
 
   function toMain() {
-    router.push('/')
+    router.push('/project')
   }
 
   function toRegistration() {
-    router.push('/registration')
+    router.push('/project/registration')
   }
 
   const onSubmit: SubmitHandler<DataObject> = async (data: DataObject) => {
@@ -112,7 +112,7 @@ export default function Login() {
 
     setUsername(myInfoData.data.nickname)
 
-    router.push('/')
+    router.push('/project')
   }
 
   useEffect(() => {

diff --git a/...rc/app/(user)/profile/[userName]/page.tsx → ...roject/(user)/profile/[userName]/page.tsx b/...rc/app/(user)/profile/[userName]/page.tsx → ...roject/(user)/profile/[userName]/page.tsx
@@ -4,10 +4,10 @@ import { useEffect, useState, useCallback } from 'react'
 import { useRouter } from 'next/navigation'
 import Image from 'next/image'
 
-import WritedPost from '../../../../components/user/WritedPost'
-import myProfile from '../../../../../public/images/png/myProfile.png'
-import WriteIcon from '../../../../../public/images/svg/pencil-square.svg'
-import FollowListModal from '../../../../components/user/FollowListModal'
+import WritedPost from '../../../../../components/project/user/WritedPost'
+import myProfile from '../../../../../../public/images/png/myProfile.png'
+import WriteIcon from '../../../../../../public/images/svg/pencil-square.svg'
+import FollowListModal from '../../../../../components/project/user/FollowListModal'
 
 type GetProjectInfoResponse = {
   id: number

diff --git a/frontend/src/app/(user)/profile/page.tsx → ...d/src/app/project/(user)/profile/page.tsx b/frontend/src/app/(user)/profile/page.tsx → ...d/src/app/project/(user)/profile/page.tsx
@@ -50,7 +50,7 @@ export default function MyPage() {
     }
 
     if (resData.data !== undefined) {
-      router.push(`/profile/${resData.data.nickname}`)
+      router.push(`/project/profile/${resData.data.nickname}`)
     }
   }
 

diff --git a/...end/src/app/(user)/registration/error.tsx → ...app/project/(user)/registration/error.tsx b/...end/src/app/(user)/registration/error.tsx → ...app/project/(user)/registration/error.tsx
diff --git a/...tend/src/app/(user)/registration/page.tsx → .../app/project/(user)/registration/page.tsx b/...tend/src/app/(user)/registration/page.tsx → .../app/project/(user)/registration/page.tsx
@@ -10,8 +10,8 @@ import { useRecoilState, useRecoilValue } from 'recoil'
 import * as yup from 'yup'
 
 import Image from 'next/image'
-import Email from '../../../../public/images/svg/email.svg'
-import { autoLoginState, usernameState } from '../../../utils/atoms'
+import Email from '../../../../../public/images/svg/email.svg'
+import { autoLoginState, usernameState } from '../../../../utils/atoms'
 
 type DataObject = {
   email: string
@@ -65,11 +65,11 @@ export default function Registration() {
   })
 
   function toMain() {
-    router.push('/')
+    router.push('/project')
   }
 
   function toLogin() {
-    router.push('/login')
+    router.push('/project/login')
   }
 
   const onSubmit: SubmitHandler<DataObject> = async (data: DataObject) => {
@@ -142,7 +142,7 @@ export default function Registration() {
 
     setUsername(myInfoData.data.nickname)
 
-    router.push('/')
+    router.push('/project')
   }
 
   useEffect(() => {
@@ -152,7 +152,7 @@ export default function Registration() {
     if (accessToken || persistToken) {
       // eslint-disable-next-line no-alert
       alert('이미 로그인 상태입니다.')
-      router.push('/')
+      router.push('/project')
     }
   }, [])
 

diff --git a/frontend/src/app/project/layout.tsx b/frontend/src/app/project/layout.tsx
@@ -0,0 +1,9 @@
+import ProjectNavBar from '../../components/general/ProjectNavBar'
+
+export default function ProjectLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return <ProjectNavBar>{children}</ProjectNavBar>
+}
diff --git a/frontend/src/app/page.tsx → frontend/src/app/project/page.tsx b/frontend/src/app/page.tsx → frontend/src/app/project/page.tsx
@@ -6,10 +6,10 @@ import { useRouter } from 'next/navigation'
 import { useRecoilValue } from 'recoil'
 import Image from 'next/image'
 
-import WriteIcon from '../../public/images/svg/pencil-square.svg'
-import Banner from '../components/main/Banner'
-import ProjectCard from '../components/main/ProjectCard'
-import { searchTextState } from '../utils/atoms'
+import WriteIcon from '../../../public/images/svg/pencil-square.svg'
+import Banner from '../../components/project/main/Banner'
+import ProjectCard from '../../components/project/main/ProjectCard'
+import { searchTextState } from '../../utils/atoms'
 
 type DataObject = {
   id: number
@@ -20,13 +20,13 @@ type DataObject = {
   thumbNail: string
 }
 
-export default function Main() {
+export default function ProjectMain() {
   const searchText = useRecoilValue(searchTextState)
 
   const router = useRouter()
 
   function toWrite() {
-    router.push('/write')
+    router.push('/project/write')
   }
 
   async function getData({ pageParam = 1 }) {

diff --git a/frontend/src/app/recruitment/layout.tsx b/frontend/src/app/recruitment/layout.tsx
@@ -0,0 +1,9 @@
+import RecruitmentNavBar from '../../components/general/RecruitmentNavBar'
+
+export default function ProjectLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return <RecruitmentNavBar>{children}</RecruitmentNavBar>
+}
diff --git a/frontend/src/app/(error)/error/page.tsx → frontend/src/app/recruitment/page.tsx b/frontend/src/app/(error)/error/page.tsx → frontend/src/app/recruitment/page.tsx