-
- );
+ )
}
-
-export default ReadingPage;
diff --git a/frontend/src/app/(search)/search-post/[postName]/page.tsx b/frontend/src/app/(search)/search-post/[postName]/page.tsx
new file mode 100644
index 00000000..d9bb46f6
--- /dev/null
+++ b/frontend/src/app/(search)/search-post/[postName]/page.tsx
@@ -0,0 +1,94 @@
+'use client'
+
+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'
+
+type DataObject = {
+ id: number
+ createdAt: string
+ projectName: string
+ description: string
+ techTags: string[]
+ thumbNail: string
+}
+
+type ParamsType = {
+ params: {
+ postName: string
+ }
+}
+
+export default function SearchProjectPage({ params }: ParamsType) {
+ const [data, setData] = useState
{/* AI 고도화 버튼 */}
@@ -147,7 +169,7 @@ function ReadingPage() {
onClick={onClickToggleModal}
type="button"
>
- 
+
- 
+ })
{/** 글 영역* */}
-
@@ -237,7 +259,5 @@ function ReadingPage() {
+
+ )
+}
diff --git a/frontend/src/pages/main/SearchUserPage.tsx b/frontend/src/app/(search)/search-user/[userName]/page.tsx
similarity index 54%
rename from frontend/src/pages/main/SearchUserPage.tsx
rename to frontend/src/app/(search)/search-user/[userName]/page.tsx
index 4a9ba58b..119bf57d 100644
--- a/frontend/src/pages/main/SearchUserPage.tsx
+++ b/frontend/src/app/(search)/search-user/[userName]/page.tsx
@@ -1,62 +1,81 @@
-import { useEffect, useState } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
-import { v4 as uuidv4 } from 'uuid';
+'use client'
-import { tokenApi } from '../../api/axios';
-import WriteIcon from '../../assets/image/pencil-square.svg';
-import ProfileIcon from '../../assets/image/profileIcon.svg';
-import NavBar from '../../components/general/NavBar';
-import Banner from '../../components/main/Banner';
+import { useEffect, useState } from 'react'
+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'
type DataObject = {
- nickname: string;
- email: string;
-};
+ nickname: string
+ email: string
+}
+
+type ParamsType = {
+ params: {
+ userName: string
+ }
+}
-function SearchUserPage() {
- const [data, setData] = useState
+ {/* 프로젝트 공유 버튼 */}
+
+
+
+
+ {/* All */}
+
+
+
+
+ {data.map((item, i) => (
+
+
+
+ ))}
+
-
- );
+ )
}
-
-export default SearchUserPage;
diff --git a/frontend/src/pages/submit/WritingPage.tsx b/frontend/src/app/(submit)/modification/page.tsx
similarity index 56%
rename from frontend/src/pages/submit/WritingPage.tsx
rename to frontend/src/app/(submit)/modification/page.tsx
index ee0fd50b..c6fd64d7 100644
--- a/frontend/src/pages/submit/WritingPage.tsx
+++ b/frontend/src/app/(submit)/modification/page.tsx
@@ -1,12 +1,14 @@
-import React, { useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { useRecoilState } from 'recoil';
+'use client'
-import { tokenApi } from '../../api/axios';
-import NavBar from '../../components/general/NavBar';
-import ImageUploader from '../../components/submit/ImageUploader';
-import QuillEditor from '../../components/submit/QuillEditor';
-import TechStackSelection from '../../components/submit/TechStackSelection';
+import React, { useEffect } from 'react'
+import { useRouter } from 'next/navigation'
+import { useRecoilState, useRecoilValue } 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 {
contentsState,
projectIdState,
@@ -14,94 +16,101 @@ import {
thumbnailUrlState,
titleState,
tldrState,
-} from '../../Recoil';
+} from '../../../utils/atoms'
-function WritingPage() {
- const [title, setTitle] = useRecoilState(titleState);
- const [tldr, setTldr] = useRecoilState(tldrState);
- const [contents, setContents] = useRecoilState(contentsState);
- const [selectedStack, setSelectedStack] = useRecoilState(selectedStackState);
- const [thumbnailUrl, setThumbnailUrl] = useRecoilState(thumbnailUrlState);
- const [, setProjectId] = useRecoilState(projectIdState);
- const accessToken = sessionStorage.getItem('accessToken');
- const persistToken = localStorage.getItem('persistToken');
- const navigate = useNavigate();
+const ToastUIEditor = dynamic(
+ () => import('../../../components/submit/toastUIEditor'),
+ { ssr: false },
+)
- useEffect(() => {
- if (!navigator.onLine) {
- alert('오프라인 상태입니다. 네트워크 연결을 확인해주세요.');
- navigate('/');
- }
- if (!(accessToken || persistToken)) {
- alert('로그인시 이용하실 수 있습니다.');
- navigate('/');
- }
- setTitle(''); // 글쓰기 페이지 렌더링 시 변수 초기화
- setTldr('');
- setContents('');
- setSelectedStack([]);
- setThumbnailUrl('');
- }, []);
+export default function NewPost() {
+ const [title, setTitle] = useRecoilState(titleState)
+ const [tldr, setTldr] = useRecoilState(tldrState)
+ const [thumbnailUrl, setThumbnailUrl] = useRecoilState(thumbnailUrlState)
+ const contents = useRecoilValue(contentsState)
+ const selectedStack = useRecoilValue(selectedStackState)
+ const projectId = useRecoilValue(projectIdState)
+
+ const accessToken =
+ typeof window !== 'undefined' ? sessionStorage.getItem('accessToken') : null
+ const persistToken =
+ typeof window !== 'undefined' ? localStorage.getItem('persistToken') : null
+
+ const router = useRouter()
// 제목 변경 함수
const handleTitleChange = (e: React.ChangeEvent
@@ -69,7 +88,12 @@ function SearchUserPage() {
aria-label="toWritePage"
type="button"
>
- 
+
-
- );
+ )
}
-
-export default WritingPage;
diff --git a/frontend/src/app/(submit)/new-post/page.tsx b/frontend/src/app/(submit)/new-post/page.tsx
new file mode 100644
index 00000000..c5f1e983
--- /dev/null
+++ b/frontend/src/app/(submit)/new-post/page.tsx
@@ -0,0 +1,179 @@
+'use client'
+
+import React, { useEffect } from 'react'
+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 {
+ contentsState,
+ projectIdState,
+ selectedStackState,
+ thumbnailUrlState,
+ titleState,
+ tldrState,
+} from '../../../utils/atoms'
+
+const ToastUIEditor = dynamic(
+ () => import('../../../components/submit/toastUIEditor'),
+ { ssr: false },
+)
+
+export default function NewPost() {
+ const [title, setTitle] = useRecoilState(titleState)
+ const [tldr, setTldr] = useRecoilState(tldrState)
+ const [thumbnailUrl, setThumbnailUrl] = useRecoilState(thumbnailUrlState)
+ const [selectedStack, setSelectedStack] = useRecoilState(selectedStackState)
+ const [contents, setContents] = useRecoilState(contentsState)
+ const [, setProjectId] = useRecoilState(projectIdState)
+
+ const accessToken =
+ typeof window !== 'undefined' ? sessionStorage.getItem('accessToken') : null
+ const persistToken =
+ typeof window !== 'undefined' ? localStorage.getItem('persistToken') : null
+
+ const router = useRouter()
+
+ // 제목 변경 함수
+ const handleTitleChange = (e: React.ChangeEvent
{/* 서식 구역 */}
@@ -136,7 +145,7 @@ function WritingPage() {
{/* 글쓰기 구역 */}
-
{/* 버튼 구역 */}
@@ -149,15 +158,13 @@ function WritingPage() {
+ {/*
+ )
+}
diff --git a/frontend/src/app/(user)/login/error.tsx b/frontend/src/app/(user)/login/error.tsx
new file mode 100644
index 00000000..c65be747
--- /dev/null
+++ b/frontend/src/app/(user)/login/error.tsx
@@ -0,0 +1,18 @@
+'use client'
+
+export default function LoginError({
+ error,
+ reset,
+}: {
+ error: Error & { digest?: string }
+ reset: () => void
+}) {
+ return (
+
+ {/* 서식 구역 */}
+
+
+ {/* 텍스트 구역 */}
+
+ {/* 글쓰기 구역 */}
+
+ {/* 제목 상자 */}
+
+ {/* 한줄 소개 상자 */}
+
+ {/* 사용 기술 상자 */}
+
+ {/* 사진 드롭박스 */}
+
+
+
+
+ {/* 버튼 구역 */}
+
+
+
+
+
+
+ )
+}
diff --git a/frontend/src/pages/user/SigninPage.tsx b/frontend/src/app/(user)/login/page.tsx
similarity index 56%
rename from frontend/src/pages/user/SigninPage.tsx
rename to frontend/src/app/(user)/login/page.tsx
index 5f51cfc0..c33a49fc 100644
--- a/frontend/src/pages/user/SigninPage.tsx
+++ b/frontend/src/app/(user)/login/page.tsx
@@ -1,18 +1,22 @@
-import { yupResolver } from '@hookform/resolvers/yup';
-import { useEffect } from 'react';
-import { SubmitHandler, useForm } from 'react-hook-form';
-import { useNavigate } from 'react-router-dom';
-import { useRecoilState } from 'recoil';
-import * as yup from 'yup';
+'use client'
-import { generalApi } from '../../api/axios';
-import Email from '../../assets/image/email.svg';
-import { autoLoginState } from '../../Recoil';
+/* eslint-disable react/jsx-props-no-spreading */
+
+import { yupResolver } from '@hookform/resolvers/yup'
+import { useEffect, useState } from 'react'
+import { SubmitHandler, useForm } from 'react-hook-form'
+import { useRouter } from 'next/navigation'
+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'
type DataObject = {
- email: string;
- password: string;
-};
+ email: string
+ password: string
+}
const schema = yup.object().shape({
email: yup
@@ -27,32 +31,25 @@ const schema = yup.object().shape({
'1개 이상의 대소문자, 숫자, 특수문자가 포함되어야 합니다.',
)
.required('비밀번호가 필요합니다.'),
-});
-
-function Signin() {
- const navigate = useNavigate();
- const accessToken = sessionStorage.getItem('accessToken');
- const persistToken = localStorage.getItem('persistToken');
- const [autoLogin, setAutoLogin] = useRecoilState(autoLoginState);
+})
- useEffect(() => {
- if (!navigator.onLine) {
- alert('오프라인 상태입니다. 네트워크 연결을 확인해주세요.');
- navigate(`/`);
- }
- if (accessToken || persistToken) {
- alert('이미 로그인 상태입니다.');
- navigate('/');
- }
- }, []);
+export default function Login() {
+ const router = useRouter()
+ const accessToken =
+ typeof window !== 'undefined' ? sessionStorage.getItem('accessToken') : null
+ const persistToken =
+ typeof window !== 'undefined' ? localStorage.getItem('persistToken') : null
+ const [autoLogin, setAutoLogin] = useRecoilState(autoLoginState)
+ const [, setUsername] = useRecoilState(usernameState)
+ const [errorMessage, setErrorMessage] = useState{error.message}
+ +
아직 회원이 아니세요?
- );
+ )
}
-
-export default Signin;
diff --git a/frontend/src/app/(user)/profile/[userName]/page.tsx b/frontend/src/app/(user)/profile/[userName]/page.tsx
new file mode 100644
index 00000000..b05d8b20
--- /dev/null
+++ b/frontend/src/app/(user)/profile/[userName]/page.tsx
@@ -0,0 +1,179 @@
+'use client'
+
+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'
+
+type GetProjectInfoResponse = {
+ id: number
+ content: string
+ projectName: string
+}
+
+type Data = {
+ followerCount: number
+ followingCount: number
+ introduction: string
+ nickname: string
+ getProjectInfoResponseList: GetProjectInfoResponse[]
+}
+
+type Response = {
+ data?: Data
+ message: string
+ code: string
+}
+
+export default function ProfilePage({
+ params,
+}: {
+ params: { userName: string }
+}) {
+ const [introduction, setIntroduction] = useState
+
+ )
+}
diff --git a/frontend/src/app/(user)/profile/page.tsx b/frontend/src/app/(user)/profile/page.tsx
new file mode 100644
index 00000000..c4608db4
--- /dev/null
+++ b/frontend/src/app/(user)/profile/page.tsx
@@ -0,0 +1,62 @@
+'use client'
+
+import { useEffect } from 'react'
+import { useRouter } from 'next/navigation'
+
+type GetProjectInfoResponse = {
+ id: number
+ content: string
+ projectName: string
+}
+
+type Data = {
+ followerCount: number
+ followingCount: number
+ introduction: string
+ nickname: string
+ getProjectInfoResponseList: GetProjectInfoResponse[]
+}
+
+type Response = {
+ data?: Data
+ message: string
+ code: string
+}
+
+export default function MyPage() {
+ const accessToken =
+ typeof window !== 'undefined' ? sessionStorage.getItem('accessToken') : null
+ const persistToken =
+ typeof window !== 'undefined' ? localStorage.getItem('persistToken') : null
+
+ const router = useRouter()
+
+ async function getMyData() {
+ const res = await fetch(
+ `${process.env.NEXT_PUBLIC_BASE_URL}/members/mypage`,
+ {
+ method: 'GET',
+ headers: {
+ 'Content-Type': 'application/json',
+ Authorization: `Bearer ${accessToken || persistToken}`,
+ },
+ },
+ )
+
+ const resData: Response = await res.json()
+
+ if (!res.ok) {
+ throw new Error(resData.message)
+ }
+
+ if (resData.data !== undefined) {
+ router.push(`/profile/${resData.data.nickname}`)
+ }
+ }
+
+ useEffect(() => {
+ getMyData()
+ }, [])
+
+ return
+}
diff --git a/frontend/src/app/(user)/registration/error.tsx b/frontend/src/app/(user)/registration/error.tsx
new file mode 100644
index 00000000..0c95a0f5
--- /dev/null
+++ b/frontend/src/app/(user)/registration/error.tsx
@@ -0,0 +1,18 @@
+'use client'
+
+export default function RegistrationError({
+ error,
+ reset,
+}: {
+ error: Error & { digest?: string }
+ reset: () => void
+}) {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+ {params.userName}
+
+
+
+
+
+
+ {isOpenModal ? (
+
+
+ {introduction}
+
+
+ onClickLike(project.id)}
+ />
+ ))}
+
+
+ 나의 작성 포스트
+
+
+ {getProjectInfoResponseList.map((project) => (
+
+
+ )
+}
diff --git a/frontend/src/pages/user/SignupPage.tsx b/frontend/src/app/(user)/registration/page.tsx
similarity index 54%
rename from frontend/src/pages/user/SignupPage.tsx
rename to frontend/src/app/(user)/registration/page.tsx
index cb44b162..9fbc4718 100644
--- a/frontend/src/pages/user/SignupPage.tsx
+++ b/frontend/src/app/(user)/registration/page.tsx
@@ -1,21 +1,25 @@
-import { yupResolver } from '@hookform/resolvers/yup';
-import { useEffect } from 'react';
-import { SubmitHandler, useForm } from 'react-hook-form';
-import { useNavigate } from 'react-router-dom';
-import { useRecoilState } from 'recoil';
-import * as yup from 'yup';
+'use client'
-import { generalApi } from '../../api/axios';
-import Email from '../../assets/image/email.svg';
-import { autoLoginState } from '../../Recoil';
+/* eslint-disable react/jsx-props-no-spreading */
+
+import { yupResolver } from '@hookform/resolvers/yup'
+import { useEffect, useState } from 'react'
+import { SubmitHandler, useForm } from 'react-hook-form'
+import { useRouter } from 'next/navigation'
+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'
type DataObject = {
- email: string;
- password: string;
- confirmPassword: string;
- nickname: string;
- introduction: string | undefined;
-};
+ email: string
+ password: string
+ confirmPassword: string
+ nickname: string
+ introduction?: string
+}
const schema = yup.object().shape({
email: yup
@@ -41,70 +45,122 @@ const schema = yup.object().shape({
introduction: yup
.string()
.max(20, '한 줄 소개는 최대 20자리까지 가능합니다.'),
-});
+})
-function Signup() {
- const navigate = useNavigate();
- const accessToken = sessionStorage.getItem('accessToken');
- const persistToken = localStorage.getItem('persistToken');
- const [autoLogin] = useRecoilState(autoLoginState);
+export default function Registration() {
+ const router = useRouter()
+ const accessToken =
+ typeof window !== 'undefined' ? sessionStorage.getItem('accessToken') : null
+ const persistToken =
+ typeof window !== 'undefined' ? localStorage.getItem('persistToken') : null
+ const autoLogin = useRecoilValue(autoLoginState)
+ const [, setUsername] = useRecoilState(usernameState)
+ const [errorMessage, setErrorMessage] = useState{error.message}
+ +Something went wrong!
+{error.digest}
+ + + + ) +} diff --git a/frontend/src/index.css b/frontend/src/app/globals.css similarity index 54% rename from frontend/src/index.css rename to frontend/src/app/globals.css index f9f7e8b2..d6724da5 100644 --- a/frontend/src/index.css +++ b/frontend/src/app/globals.css @@ -8,25 +8,25 @@ @font-face { font-family: 'LeferiBaseRegular'; - src: url('./assets/fonts/LeferiBaseRegular.ttf'); + src: url('../../public/fonts/LeferiBaseRegular.ttf'); } @font-face { font-family: 'LeferiBaseBold'; - src: url('./assets/fonts/LeferiBaseBold.ttf'); + src: url('../../public/fonts/LeferiBaseBold.ttf'); } @font-face { font-family: 'LatoBold'; - src: url('./assets/fonts/LatoBold.ttf'); + src: url('../../public/fonts/LatoBold.ttf'); } @font-face { font-family: 'LatoLight'; - src: url('./assets/fonts/LatoLight.ttf'); + src: url('../../public/fonts/LatoLight.ttf'); } @font-face { font-family: 'LatoRegular'; - src: url('./assets/fonts/LatoRegular.ttf'); + src: url('../../public/fonts/LatoRegular.ttf'); } @font-face { font-family: 'LatoSemibold'; - src: url('./assets/fonts/LatoSemibold.ttf'); + src: url('../../public/fonts/LatoSemibold.ttf'); } diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx new file mode 100644 index 00000000..5e8299c0 --- /dev/null +++ b/frontend/src/app/layout.tsx @@ -0,0 +1,28 @@ +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'] }) + +export const metadata: Metadata = { + title: 'Graphy', + description: 'Project Share platform', +} + +export default function RootLayout({ + children, +}: { + children: React.ReactNode +}) { + return ( + + +
-
- );
+ )
}
-
-export default MainPage;
diff --git a/frontend/src/assets/image/icon/192.png b/frontend/src/assets/image/icon/192.png
deleted file mode 100644
index fbcd3c66..00000000
Binary files a/frontend/src/assets/image/icon/192.png and /dev/null differ
diff --git a/frontend/src/assets/image/icon/512.png b/frontend/src/assets/image/icon/512.png
deleted file mode 100644
index e4252dcf..00000000
Binary files a/frontend/src/assets/image/icon/512.png and /dev/null differ
diff --git a/frontend/src/assets/image/icon/96.png b/frontend/src/assets/image/icon/96.png
deleted file mode 100644
index 68fc3fdc..00000000
Binary files a/frontend/src/assets/image/icon/96.png and /dev/null differ
diff --git a/frontend/src/assets/image/icon/screenshot.png b/frontend/src/assets/image/icon/screenshot.png
deleted file mode 100644
index c498e878..00000000
Binary files a/frontend/src/assets/image/icon/screenshot.png and /dev/null differ
diff --git a/frontend/src/assets/lottie.tsx b/frontend/src/assets/lottie.tsx
deleted file mode 100644
index 55bb6573..00000000
--- a/frontend/src/assets/lottie.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import developerAnimation from './lottie/developer.json';
-
-export default developerAnimation;
diff --git a/frontend/src/components/LikeModal.tsx b/frontend/src/components/LikeModal.tsx
deleted file mode 100644
index ad5e0369..00000000
--- a/frontend/src/components/LikeModal.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import React from 'react';
-
-type LikeModalProps = {
- onClickLikeToggleModal: () => void;
- isLike: boolean;
-};
-
-function likeModal({ onClickLikeToggleModal, isLike }: LikeModalProps) {
- return (
-
{/* 프로젝트 공유 버튼 */}
@@ -80,7 +94,12 @@ function MainPage() {
aria-label="toWritePage"
type="button"
>
-
+
@@ -105,7 +124,5 @@ function MainPage() {
-
))}
-
- );
-}
-
-export default likeModal;
diff --git a/frontend/src/components/general/GptResultModal.tsx b/frontend/src/components/general/GptResultModal.tsx
deleted file mode 100644
index 2a8ca55a..00000000
--- a/frontend/src/components/general/GptResultModal.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import { useCallback, useState } from 'react';
-import { useRecoilState, useRecoilValue } from 'recoil';
-
-import {
- gptLoadingState,
- statusOpenState,
- modalContentState,
-} from '../../Recoil';
-
-function GptResultModal() {
- const [resultOpen, setResultOpen] = useState
- {isLike}
-
-
- {/* 모달 배경 */}
-
- {statusOpen ? (
-
- );
-}
-
-export default GptResultModal;
diff --git a/frontend/src/components/general/LoadingSpinner.tsx b/frontend/src/components/general/LoadingSpinner.tsx
deleted file mode 100644
index 7de3fb2d..00000000
--- a/frontend/src/components/general/LoadingSpinner.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import DotLoader from 'react-spinners/DotLoader';
-
-function LoadingSpinner() {
- return (
-
- {gptLoading ? (
-
- ) : null}
- {resultOpen && (
- - AI 고도화 계획을 생성중입니다. 잠시만 기다려주세요. -
- ) : ( - <> - - - - )} -
-
- )}
-
-
- 스피너
-
-
- );
-}
-
-export default LoadingSpinner;
diff --git a/frontend/src/components/general/NavBar.tsx b/frontend/src/components/general/NavBar.tsx
index 77814b90..9b60efc8 100644
--- a/frontend/src/components/general/NavBar.tsx
+++ b/frontend/src/components/general/NavBar.tsx
@@ -1,137 +1,149 @@
-import { ChangeEvent, useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { useRecoilState } from 'recoil';
+'use client'
-import WriteIcon from '../../assets/image/pencil-square.svg';
-import ProfileIcon from '../../assets/image/profileIcon.svg';
-import SearchIcon from '../../assets/image/searchIcon.png';
-import { refreshState, searchTextState } from '../../Recoil';
+import { ChangeEvent, useState, useEffect } from 'react'
+import { useRouter, usePathname } from 'next/navigation'
+import { useRecoilState } from 'recoil'
+import Image from 'next/image'
-function NavBar() {
- const accessToken = sessionStorage.getItem('accessToken');
- const persistToken = localStorage.getItem('persistToken');
- const [refresh, setRefresh] = useRecoilState(refreshState);
- const [searchText, SetSearchText] = useRecoilState(searchTextState);
+import WriteIcon from '../../../public/images/svg/pencil-square.svg'
+import ProfileIcon from '../../../public/images/svg/profileIcon.svg'
+import SearchIcon from '../../../public/images/png/searchIcon.png'
+import { searchTextState, usernameState } from '../../utils/atoms'
- const navigate = useNavigate();
+export default function NavBar({ children }: { children: React.ReactNode }) {
+ const accessToken =
+ typeof window !== 'undefined' ? sessionStorage.getItem('accessToken') : null
+ const persistToken =
+ typeof window !== 'undefined' ? localStorage.getItem('persistToken') : null
+ const [searchText, SetSearchText] = useRecoilState(searchTextState)
+ const [username, setUsername] = useRecoilState(usernameState)
+ const [btnText, setBtnText] = useState로딩중 입니다. . .
-
- {/* 로고 */}
-
-
+ if (pathname === '/login' || pathname === '/registration') {
+ return children
+ }
- {/* 검색창 */}
-
+ {children}
+
+ )
+}
diff --git a/frontend/src/components/main/Banner.tsx b/frontend/src/components/main/Banner.tsx
index d1d751c7..c5d9f34b 100644
--- a/frontend/src/components/main/Banner.tsx
+++ b/frontend/src/components/main/Banner.tsx
@@ -1,23 +1,22 @@
-import Lottie from 'lottie-react';
-import { Pagination } from 'swiper';
-import { Swiper, SwiperSlide } from 'swiper/react';
-import 'swiper/css';
-import 'swiper/scss/pagination';
+import Lottie from 'lottie-react'
+import { Pagination, Autoplay } from 'swiper/modules'
+import { Swiper, SwiperSlide } from 'swiper/react'
+import 'swiper/css'
+import 'swiper/scss/pagination'
+import lotties from '../../utils/lotties'
-import lottie from '../../assets/lottie';
-
-function Banner() {
+export default function Banner() {
return (
{}}
- onSwiper={() => {}}
pagination={{ clickable: true }}
- className="h-40 bg-subbanner sm:h-56 "
+ className="bg-subbanner h-40 sm:h-56 "
data-testid="banner"
+ autoplay={{ delay: 4000, disableOnInteraction: false }}
+ loop
>
- );
+ )
}
-
-export default Banner;
diff --git a/frontend/src/components/main/ProjectCard.tsx b/frontend/src/components/main/ProjectCard.tsx
index 95edb3d1..c8936e86 100644
--- a/frontend/src/components/main/ProjectCard.tsx
+++ b/frontend/src/components/main/ProjectCard.tsx
@@ -1,61 +1,65 @@
-import { useNavigate } from 'react-router-dom';
-import { useRecoilState } from 'recoil';
+'use client'
-import project from '../../assets/image/project.png';
-import { projectIdState } from '../../Recoil';
-import AllStacks from '../../Stack';
+import { useRouter } from 'next/navigation'
+import { useRecoilState } from 'recoil'
+import Image from 'next/image'
+import project from '../../../public/images/png/project.png'
+
+import { projectIdState } from '../../utils/atoms'
+import AllStacks from '../../utils/stacks'
type ProjectCardProps = {
items: {
- id: number;
- createdAt: string;
- projectName: string;
- description: string;
- techTags: string[];
- thumbNail: string;
- };
-};
+ id: number
+ createdAt: string
+ projectName: string
+ description: string
+ techTags: string[]
+ thumbNail: string
+ }
+ index: number
+}
-function ProjectCard({ items }: ProjectCardProps) {
- const [, setProjectId] = useRecoilState(projectIdState);
- const navigate = useNavigate();
+export default function ProjectCard({ items, index }: ProjectCardProps) {
+ const [, setProjectId] = useRecoilState(projectIdState)
+ const router = useRouter()
function findImage(tag: string) {
return AllStacks.map((x) => x.image)[
AllStacks.map((x) => x.name).findIndex((x) => x === tag)
- ];
+ ]
}
function toRead() {
- const urlToCheck = `http://localhost:8080/api/v1/projects/${items.id}`;
+ const urlToCheck = `${process.env.NEXT_PUBLIC_BASE_URL}/projects/${items.id}`
if (
!navigator.onLine &&
'serviceWorker' in navigator &&
navigator.serviceWorker.controller
) {
- const messageChannel = new MessageChannel();
+ const messageChannel = new MessageChannel()
messageChannel.port1.onmessage = (event) => {
if (event.data.hasMatch) {
- navigate(`/read/${items.id}`);
- setProjectId(items.id);
+ router.push(`/post/${items.id}`)
+ setProjectId(items.id)
} else {
- alert('오프라인 상태입니다. 네트워크 연결을 확인해주세요.');
+ alert('오프라인 상태입니다. 네트워크 연결을 확인해주세요.')
}
- };
+ }
Promise.resolve().then(() => {
if (navigator.serviceWorker.controller) {
navigator.serviceWorker.controller.postMessage(
{ action: 'cache-contains', url: urlToCheck },
[messageChannel.port2],
- );
+ )
}
- });
+ })
} else {
- navigate(`/read/${items.id}`);
- setProjectId(items.id);
+ router.push(`/post/${items.id}`)
+ setProjectId(items.id)
}
}
@@ -70,16 +74,17 @@ function ProjectCard({ items }: ProjectCardProps) {
{/*
- {
- if (e.key === 'Enter') {
- handleSearch();
- }
- }}
- />
+ return (
+
- );
+ )
}
-
-export default NavBar;
diff --git a/frontend/src/components/general/Provider.tsx b/frontend/src/components/general/Provider.tsx
new file mode 100644
index 00000000..c80ce5bc
--- /dev/null
+++ b/frontend/src/components/general/Provider.tsx
@@ -0,0 +1,18 @@
+'use client'
+
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { RecoilRoot } from 'recoil'
+
+const queryClient = new QueryClient()
+
+export default function QueryProvider({
+ children,
+}: {
+ children: React.ReactNode
+}) {
+ return (
+
+
+ {children}
+ {/* 로고 */}
-
- {accessToken || persistToken ? (
- ) : (
+
+ {/* 검색창 */}
+
+ {
+ if (e.key === 'Enter') {
+ handleSearch()
+ }
+ }}
+ />
+
+
- )}
- {/* 프로젝트 작성 버튼 */}
-
-
- {/* 마이페이지 아이콘 */}
-
+ onClick={() => router.push('/new-post')}
+ aria-label="toWritePage"
+ type="button"
+ >
+
@@ -42,14 +41,12 @@ function Banner() {
우리 학교 동창회 서비스
moyora
*/}
{items.thumbNail === '' ? (
-
{items.techTags.map((x: string) => (
- );
+ )
}
-
-export default ProjectCard;
diff --git a/frontend/src/components/read/ReadingPage/GptModal.tsx b/frontend/src/components/read/GptModal.tsx
similarity index 75%
rename from frontend/src/components/read/ReadingPage/GptModal.tsx
rename to frontend/src/components/read/GptModal.tsx
index 731464db..94268c6b 100644
--- a/frontend/src/components/read/ReadingPage/GptModal.tsx
+++ b/frontend/src/components/read/GptModal.tsx
@@ -1,15 +1,17 @@
-import React, { useState, PropsWithChildren, useEffect } from 'react';
-import { useRecoilState, useRecoilValue } from 'recoil';
-import { v4 as uuidv4 } from 'uuid';
-
-import { tokenApi } from '../../../api/axios';
-import arrowLeftIcon from '../../../assets/image/arrow-left.svg';
-import arrowRightIcon from '../../../assets/image/arrow-right.svg';
-import desktop from '../../../assets/image/desktop.png';
-import eyes from '../../../assets/image/eyes.png';
-import monster from '../../../assets/image/monster.png';
-import pick from '../../../assets/image/pick.png';
-import plus from '../../../assets/image/plus-circle.svg';
+'use client'
+
+import React, { useState, PropsWithChildren, useEffect } from 'react'
+import { useRecoilState, useRecoilValue } from 'recoil'
+import { v4 as uuidv4 } from 'uuid'
+
+import Image from 'next/image'
+import arrowLeftIcon from 'public/images/svg/arrow-left.svg'
+import arrowRightIcon from '../../../public/images/svg/arrow-right.svg'
+import desktop from '../../../public/images/png/desktop.png'
+import eyes from '../../../public/images/png/eyes.png'
+import monster from '../../../public/images/png/monster.png'
+import pick from '../../../public/images/png/pick.png'
+import plus from '../../../public/images/svg/plus-circle.svg'
import {
featuresState,
gptLoadingState,
@@ -20,39 +22,39 @@ import {
techStacksState,
tldrState,
topicState,
-} from '../../../Recoil';
-import AllStacks from '../../../Stack';
+} from '../../utils/atoms'
+import AllStacks from '../../utils/stacks'
function findImage(tag: string) {
return AllStacks.map((x) => x.image)[
AllStacks.map((x) => x.name).findIndex((x) => x === tag)
- ];
+ ]
}
// 화면 컴포넌트
type Screen1Props = {
- onNext: () => void;
-};
+ onNext: () => void
+}
-const Screen1 = ({ onNext }: Screen1Props) => {
- const [techStacks, setTechStacks] = useRecoilState(techStacksState);
- const selectedStack = useRecoilValue(selectedStackState);
+function Screen1({ onNext }: Screen1Props) {
+ const [techStacks, setTechStacks] = useRecoilState(techStacksState)
+ const selectedStack = useRecoilValue(selectedStackState)
// 기존 선택 기술 스택 삭제 함수
const handleDeleteStack = (stack: string) => {
- setTechStacks(techStacks.filter((s: any) => s !== stack));
- };
+ setTechStacks(techStacks.filter((s: any) => s !== stack))
+ }
// 새로운 기술 스택 추가 함수
const handleAddStack = (stack: string) => {
if (techStacks.length < 6 && !techStacks.includes(stack)) {
- setTechStacks([...techStacks, stack]);
+ setTechStacks([...techStacks, stack])
}
- };
+ }
useEffect(() => {
- setTechStacks(selectedStack);
- }, []);
+ setTechStacks(selectedStack)
+ }, [])
return (
-
+
))}
{
type="button"
>
+ })
{
type="button"
onClick={() => handleAddStack(x.name)}
>
- {
다음
- );
-};
+ )
+}
type Screen2Props = {
- onPrev: () => void;
- onNext: () => void;
-};
+ onPrev: () => void
+ onNext: () => void
+}
-const Screen2 = ({ onPrev, onNext }: Screen2Props) => {
- const [topic, setTopic] = useRecoilState(topicState);
- const tldr = useRecoilValue(tldrState);
+function Screen2({ onPrev, onNext }: Screen2Props) {
+ const [topic, setTopic] = useRecoilState(topicState)
+ const tldr = useRecoilValue(tldrState)
useEffect(() => {
- setTopic(tldr);
- }, []);
+ setTopic(tldr)
+ }, [])
return (
다음
- -
-
+
-
-
+
-
-
+
-
-
+
-
+
{/* 기술 선택 버튼 */}
@@ -111,7 +113,7 @@ const Screen1 = ({ onNext }: Screen1Props) => {
type="button"
onClick={() => handleDeleteStack(x.name)}
>
- {
className="mx-auto mt-5 ml-5 flex items-center font-lef text-gray-400 hover:text-gray-600"
type="button"
>
- 
+
@@ -195,29 +197,37 @@ const Screen2 = ({ onPrev, onNext }: Screen2Props) => {
다음
- -
-
-
-
-
-
-
-
-
+
{/* 프로젝트 설명 입력창 */}
@@ -243,27 +253,27 @@ const Screen2 = ({ onPrev, onNext }: Screen2Props) => {
- );
-};
+ )
+}
type Screen3Props = {
- onPrev: () => void;
- onNext: () => void;
-};
+ onPrev: () => void
+ onNext: () => void
+}
-const Screen3 = ({ onPrev, onNext }: Screen3Props) => {
+function Screen3({ onPrev, onNext }: Screen3Props) {
const [featureObject, setFeatureObject] = useState<
{ id: string; value: string }[]
- >([]);
- const [firstFeature, setFirstFeature] = useState('');
- const [, setFeatures] = useRecoilState(featuresState);
+ >([])
+ const [firstFeature, setFirstFeature] = useState('')
+ const [, setFeatures] = useRecoilState(featuresState)
function Plus() {
if (featureObject.length < 4) {
setFeatureObject((oldFeatures) => [
...oldFeatures,
{ id: uuidv4(), value: '' },
- ]);
+ ])
}
}
@@ -272,16 +282,16 @@ const Screen3 = ({ onPrev, onNext }: Screen3Props) => {
oldFeatures.map((feature) =>
feature.id === id ? { ...feature, value } : feature,
),
- );
- };
+ )
+ }
const handleFirstInputChange = (e: React.ChangeEvent {
className="mx-auto mt-5 ml-5 flex items-center font-lef text-gray-400 hover:text-gray-600"
type="button"
>
-
+
{/* 3단계 */}
다음
- -
-
-
-
-
-
-
-
-
+
{/* 기능 구현 입력창 */}
@@ -368,7 +386,7 @@ const Screen3 = ({ onPrev, onNext }: Screen3Props) => {
onClick={() => Plus()}
type="button"
>
- {
className="mx-auto mt-5 ml-5 flex items-center font-lef text-gray-400 hover:text-gray-600 "
type="button"
>
-
+ 
+
@@ -543,41 +582,43 @@ const Screen4 = ({ onPrev, onClickToggleModal }: Screen4Props) => {
AI 고도화 추천
- );
-};
+ )
+}
type ModalDefaultType = {
- onClickToggleModal: () => void;
-};
+ onClickToggleModal: () => void
+}
-function GptModal({ onClickToggleModal }: PropsWithChildren이전
@@ -475,22 +514,22 @@ const Screen4 = ({ onPrev, onClickToggleModal }: Screen4Props) => {
-
-
-
-
-
-
-
-
-
+
{/* 고도화 기술 입력창 */}
@@ -528,7 +567,7 @@ const Screen4 = ({ onPrev, onClickToggleModal }: Screen4Props) => {
onClick={() => Plus()}
type="button"
>
-
@@ -103,7 +116,5 @@ function PutReply({
- );
+ )
}
-
-export default PutReply;
diff --git a/frontend/src/components/read/ReadingPage/Reply/ReadReply/ReadReReply.tsx b/frontend/src/components/read/ReadReReply.tsx
similarity index 68%
rename from frontend/src/components/read/ReadingPage/Reply/ReadReply/ReadReReply.tsx
rename to frontend/src/components/read/ReadReReply.tsx
index 222cc658..b9caa97b 100644
--- a/frontend/src/components/read/ReadingPage/Reply/ReadReply/ReadReReply.tsx
+++ b/frontend/src/components/read/ReadReReply.tsx
@@ -1,56 +1,71 @@
-import { useState } from 'react';
-import { useRecoilState } from 'recoil';
+import { useState } from 'react'
+import { useRecoilState } from 'recoil'
+import Image from 'next/image'
-import PutReply from './PutReply';
-import { tokenApi } from '../../../../../api/axios';
-import delete_reply from '../../../../../assets/image/delete.svg';
-import pencil_square from '../../../../../assets/image/pencil-square.svg';
-import reply_icon from '../../../../../assets/image/reply_icon.svg';
-import { refreshState } from '../../../../../Recoil';
+import PutReply from './PutReply'
+import delete_reply from '../../../public/images/svg/delete.svg'
+import pencil_square from '../../../public/images/svg/pencil-square.svg'
+import reply_icon from '../../../public/images/svg/reply_icon.svg'
+import { refreshState } from '../../utils/atoms'
type ReadReReplyProps = {
contents: {
- commentId: number;
- childCount?: number;
- content: string;
- createdAt: string;
- };
- setSelectedValue: React.Dispatch
- 
deleteReReply()}
type="button"
>
- 
setPutVis(!putVis)}
type="button"
>
- 
) : null}
- );
+ )
}
-export default ReadReReply;
+export default ReadReReply
diff --git a/frontend/src/components/read/ReadingPage/Reply/ReadReply.tsx b/frontend/src/components/read/ReadReply.tsx
similarity index 64%
rename from frontend/src/components/read/ReadingPage/Reply/ReadReply.tsx
rename to frontend/src/components/read/ReadReply.tsx
index c3d6d55b..484eed79 100644
--- a/frontend/src/components/read/ReadingPage/Reply/ReadReply.tsx
+++ b/frontend/src/components/read/ReadReply.tsx
@@ -1,105 +1,130 @@
-import { act } from '@testing-library/react';
-import { useState } from 'react';
-import { useRecoilState } from 'recoil';
-
-import PutReply from './ReadReply/PutReply';
-import ReadReReply from './ReadReply/ReadReReply';
-import WriteReReply from './ReadReply/WriteReReply';
-import { tokenApi } from '../../../../api/axios';
-import delete_reply from '../../../../assets/image/delete.svg';
-import nested_reply from '../../../../assets/image/nested_reply.svg';
-import pencil_square from '../../../../assets/image/pencil-square.svg';
-import { refreshState } from '../../../../Recoil';
-import useDidMountEffect from '../../../../useDidMountEffect';
+'use client'
+
+import { useState } from 'react'
+import { useRecoilState } from 'recoil'
+import Image from 'next/image'
+
+import PutReply from './PutReply'
+import ReadReReply from './ReadReReply'
+import WriteReReply from './WriteReReply'
+import delete_reply from '../../../public/images/svg/delete.svg'
+import nested_reply from '../../../public/images/svg/nested_reply.svg'
+import pencil_square from '../../../public/images/svg/pencil-square.svg'
+import { refreshState } from '../../utils/atoms'
+import useDidMountEffect from '../../hooks/useDidMountEffect'
type ReadReReplyObject = {
- commentId: number;
- content: string;
- createdAt: string;
-};
+ commentId: number
+ content: string
+ createdAt: string
+}
type ReadReplyProps = {
contents: {
- commentId: number;
- childCount: number;
- content: string;
- createdAt: string;
- };
- setSelectedValue: React.Dispatch>;
-};
+ commentId: number
+ childCount: number
+ content: string
+ createdAt: string
+ }
+ setSelectedValue: React.Dispatch>
+}
+
+export default function ReadReply({
+ contents,
+ setSelectedValue,
+}: ReadReplyProps) {
+ const [writeVis, setWriteVis] = useState(false)
+ const [putVis, setPutVis] = useState(false)
-function ReadReply({ contents, setSelectedValue }: ReadReplyProps) {
- const [writeVis, setWriteVis] = useState(false);
- const [putVis, setPutVis] = useState(false);
+ const [comment, setComment] = useState([])
+ const [commentVis, setCommentVis] = useState(false)
+ const [commentRef, setCommentRef] = useState(false)
- const [comment, setComment] = useState([]);
- const [commentVis, setCommentVis] = useState(false);
- const [commentRef, setCommentRef] = useState(false);
+ const [refresh, setRefresh] = useRecoilState(refreshState)
- const [refresh, setRefresh] = useRecoilState(refreshState);
+ const accessToken =
+ typeof window !== 'undefined' ? sessionStorage.getItem('accessToken') : null
+ const persistToken =
+ typeof window !== 'undefined' ? localStorage.getItem('persistToken') : null
- let buttonContent: JSX.Element | null = null;
+ let buttonContent: JSX.Element | null = null
- const date = new Date(contents.createdAt);
+ const date = new Date(contents.createdAt)
const formattedDate = `${date.getFullYear()}-${
date.getMonth() + 1
}-${date.getDate()} ${date.getHours().toString().padStart(2, '0')}:${date
.getMinutes()
.toString()
- .padStart(2, '0')}:${date.getSeconds().toString().padStart(2, '0')}`;
+ .padStart(2, '0')}:${date.getSeconds().toString().padStart(2, '0')}`
const changeWriteVis = () => {
- setWriteVis(false);
- };
+ setWriteVis(false)
+ }
const changePutVis = () => {
- setPutVis(false);
- };
+ setPutVis(false)
+ }
async function getComment() {
- try {
- const res = await tokenApi.get(`/comments/${contents.commentId}`);
- act(() => {
- setComment(res.data.data);
- });
- } catch (error) {
- console.error(error);
- alert('답글 조회 실패');
+ const res = await fetch(
+ `${process.env.NEXT_PUBLIC_BASE_URL}/comments/${contents.commentId}`,
+ {
+ headers: {
+ 'Content-Type': 'application/json',
+ Authorization: `Bearer ${accessToken || persistToken}`,
+ },
+ },
+ )
+
+ const resData = await res.json()
+ setComment(resData.data)
+
+ if (!res.ok) {
+ alert('답글 조회 실패')
+ throw new Error('답글 조회 실패')
}
}
async function deleteReply() {
- try {
- await tokenApi.delete(`/comments/${contents.commentId}`);
- setRefresh(!refresh);
- } catch (error) {
+ const res = await fetch(
+ `${process.env.NEXT_PUBLIC_BASE_URL}/comments/${contents.commentId}`,
+ {
+ method: 'DELETE',
+ headers: {
+ 'Content-Type': 'application/json',
+ Authorization: `Bearer ${accessToken || persistToken}`,
+ },
+ },
+ )
+
+ setRefresh(!refresh)
+
+ if (!res.ok) {
if (!navigator.onLine) {
- alert('오프라인 상태입니다. 네트워크 연결을 확인해주세요.');
+ alert('오프라인 상태입니다. 네트워크 연결을 확인해주세요.')
} else {
- console.error(error);
- alert('댓글 삭제 실패');
+ alert('댓글 삭제 실패')
+ throw new Error('댓글 삭제 실패')
}
}
}
function openComment() {
- act(() => {
- setCommentVis(true);
- });
- getComment();
+ setCommentVis(true)
+ getComment()
}
const changeCommentRef = () => {
- setCommentRef(!commentRef);
- };
+ setCommentRef(!commentRef)
+ }
useDidMountEffect(() => {
- getComment();
- }, [commentRef]);
+ getComment()
+ }, [commentRef])
if (contents.childCount === 0) {
- buttonContent = null;
+ buttonContent = null
} else if (commentVis) {
buttonContent = (
- );
+ )
} else {
buttonContent = (
- );
+ )
}
return (
@@ -147,7 +172,7 @@ function ReadReply({ contents, setSelectedValue }: ReadReplyProps) {
onClick={() => deleteReply()}
type="button"
>
- setPutVis(!putVis)}
type="button"
>
- setWriteVis(!writeVis)}
type="button"
>
- 
) : null}
- );
+ )
}
-
-export default ReadReply;
diff --git a/frontend/src/components/read/ReadingPage/QuillWritten.tsx b/frontend/src/components/read/ReadingPage/QuillWritten.tsx
deleted file mode 100644
index a90615d0..00000000
--- a/frontend/src/components/read/ReadingPage/QuillWritten.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { useEffect } from 'react';
-import ReactQuill from 'react-quill';
-import 'react-quill/dist/quill.bubble.css';
-import { useRecoilState } from 'recoil';
-
-import { contentsState } from '../../../Recoil';
-
-function QuillWrtten() {
- const [contents, setContents] = useRecoilState(contentsState);
-
- useEffect(() => {
- if (contents) {
- setContents(contents);
- }
- }, [contents]);
-
- return (
- >;
-};
+ contents: ReadReplyObject[]
+ setReadReply: React.Dispatch>
+}
-function Reply({ contents, setReadReply }: ReplyProps) {
- const [count, SetCount] = useState(0);
- const [selectedValue, setSelectedValue] = useState('regist_order');
- const textAreaRef = useRef(null);
- const [value, setValue] = useState('');
- const accessToken = sessionStorage.getItem('accessToken');
- const persistToken = localStorage.getItem('persistToken');
- const projectId = useRecoilValue(projectIdState);
- const [refresh, setRefresh] = useRecoilState(refreshState);
- const [visible, setVisible] = useState(true);
+export default function Reply({ contents, setReadReply }: ReplyProps) {
+ const [count, SetCount] = useState(0)
+ const [selectedValue, setSelectedValue] = useState('regist_order')
+ const textAreaRef = useRef(null)
+ const [value, setValue] = useState('')
+ const accessToken =
+ typeof window !== 'undefined' ? sessionStorage.getItem('accessToken') : null
+ const persistToken =
+ typeof window !== 'undefined' ? localStorage.getItem('persistToken') : null
+ const projectId = useRecoilValue(projectIdState)
+ const [refresh, setRefresh] = useRecoilState(refreshState)
+ const [visible, setVisible] = useState(true)
const handleChange = (e: React.ChangeEvent) => {
- const inputValue = e.target.value;
+ const inputValue = e.target.value
if (textAreaRef.current) {
- textAreaRef.current.style.height = 'auto';
- textAreaRef.current.style.height = `${textAreaRef.current.scrollHeight}px`;
+ textAreaRef.current.style.height = 'auto'
+ textAreaRef.current.style.height = `${textAreaRef.current.scrollHeight}px`
}
if (inputValue.length > 255) {
- setValue(inputValue.substring(0, 255));
- alert('대댓글은 255자까지 입력하실 수 있습니다.');
- return;
+ setValue(inputValue.substring(0, 255))
+ alert('대댓글은 255자까지 입력하실 수 있습니다.')
+ return
}
- setValue(inputValue);
- };
+ setValue(inputValue)
+ }
function MoveToTop() {
// top: 0 >> 맨 위로 behavior: 'smooth' >> 부드럽게 이동할 수 있게 설정하는 속성
- window.scrollTo({ top: 0, behavior: 'smooth' });
+ window.scrollTo({ top: 0, behavior: 'smooth' })
}
async function postData() {
const data = {
content: value,
projectId,
- };
- try {
- await tokenApi.post('/comments', data);
- setRefresh(!refresh);
- setValue('');
- setSelectedValue('regist_order');
- } catch (error) {
+ }
+ const res = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/comments`, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ Authorization: `Bearer ${accessToken || persistToken}`,
+ },
+ body: JSON.stringify(data),
+ })
+
+ if (!res.ok) {
if (!navigator.onLine) {
- alert('오프라인 상태입니다. 네트워크 연결을 확인해주세요.');
+ alert('오프라인 상태입니다. 네트워크 연결을 확인해주세요.')
} else if (value.trim().length === 0) {
- alert('댓글을 입력해주세요.');
+ alert('댓글을 입력해주세요.')
} else {
- console.log(error);
- alert('네트워크 오류');
+ alert('네트워크 오류')
+ throw new Error('네트워크 오류')
}
+ } else {
+ setRefresh(!refresh)
+ setValue('')
+ setSelectedValue('regist_order')
}
}
@@ -75,45 +86,46 @@ function Reply({ contents, setReadReply }: ReplyProps) {
const sortedContents = contents
.slice()
.sort((a: ReadReplyObject, b: ReadReplyObject) => {
- const aTime = new Date(a.createdAt).getTime();
- const bTime = new Date(b.createdAt).getTime();
- return bTime - aTime;
- });
- setReadReply(sortedContents);
- break;
+ const aTime = new Date(a.createdAt).getTime()
+ const bTime = new Date(b.createdAt).getTime()
+ return bTime - aTime
+ })
+ setReadReply(sortedContents)
+ break
}
case 'reply_order': {
const replyedContents = contents
.slice()
- .sort((a: ReadReplyObject, b: ReadReplyObject) => {
- return b.childCount - a.childCount;
- });
- setReadReply(replyedContents);
- break;
+ .sort(
+ (a: ReadReplyObject, b: ReadReplyObject) =>
+ b.childCount - a.childCount,
+ )
+ setReadReply(replyedContents)
+ break
}
default: {
const regisedContents = contents
.slice()
.sort((a: ReadReplyObject, b: ReadReplyObject) => {
- const aTime = new Date(a.createdAt).getTime();
- const bTime = new Date(b.createdAt).getTime();
- return aTime - bTime;
- });
- setReadReply(regisedContents);
- break;
+ const aTime = new Date(a.createdAt).getTime()
+ const bTime = new Date(b.createdAt).getTime()
+ return aTime - bTime
+ })
+ setReadReply(regisedContents)
+ break
}
}
}
function handleselectChange(event: { target: { value: string } }) {
- const selectValue = event.target.value; // 선택된 값 가져오기
- setSelectedValue(selectValue); // 선택된 값 상태 업데이트
- myFunction(selectValue); // 선택된 값 전달하여 실행할 함수 호출
+ const selectValue = event.target.value // 선택된 값 가져오기
+ setSelectedValue(selectValue) // 선택된 값 상태 업데이트
+ myFunction(selectValue) // 선택된 값 전달하여 실행할 함수 호출
}
function handleRefresh() {
- setRefresh(!refresh);
- setSelectedValue('regist_order');
+ setRefresh(!refresh)
+ setSelectedValue('regist_order')
}
useEffect(() => {
@@ -123,8 +135,8 @@ function Reply({ contents, setReadReply }: ReplyProps) {
acc + (cur.content !== '삭제된 댓글입니다.' ? 1 : 0),
0,
),
- );
- }, [contents, setReadReply]);
+ )
+ }, [contents, setReadReply])
return (
- );
+ )
}
-
-export default Reply;
diff --git a/frontend/src/components/read/ToastViewer.tsx b/frontend/src/components/read/ToastViewer.tsx
new file mode 100644
index 00000000..aaa26bd6
--- /dev/null
+++ b/frontend/src/components/read/ToastViewer.tsx
@@ -0,0 +1,35 @@
+import React, { useEffect } from 'react'
+import { Viewer } from '@toast-ui/react-editor'
+import '@toast-ui/editor/dist/toastui-editor-viewer.css'
+import 'prismjs/themes/prism.css'
+import Prism from 'prismjs'
+import codeSyntaxHighlight from '@toast-ui/editor-plugin-code-syntax-highlight'
+
+import { useRecoilState } from 'recoil'
+import { contentsState } from '../../utils/atoms'
+
+export default function ToastViewer() {
+ const [contents, setContents] = useRecoilState(contentsState)
+
+ useEffect(() => {
+ if (contents) {
+ setContents(contents)
+ }
+ }, [contents])
+
+ return (
+
- {contents ? (
-
- );
-}
-
-export default QuillWrtten;
diff --git a/frontend/src/components/read/ReadingPage/Reply.tsx b/frontend/src/components/read/Reply.tsx
similarity index 64%
rename from frontend/src/components/read/ReadingPage/Reply.tsx
rename to frontend/src/components/read/Reply.tsx
index 89b2c8d9..b5e16aa0 100644
--- a/frontend/src/components/read/ReadingPage/Reply.tsx
+++ b/frontend/src/components/read/Reply.tsx
@@ -1,71 +1,82 @@
-import { useEffect, useRef, useState } from 'react';
-import { useRecoilState, useRecoilValue } from 'recoil';
+'use client'
-import ReadReply from './Reply/ReadReply';
-import { tokenApi } from '../../../api/axios';
-import { projectIdState, refreshState } from '../../../Recoil';
+import { useEffect, useRef, useState } from 'react'
+import { useRecoilState, useRecoilValue } from 'recoil'
+
+import ReadReply from './ReadReply'
+import { projectIdState, refreshState } from '../../utils/atoms'
type ReadReplyObject = {
- commentId: number;
- childCount: number;
- content: string;
- createdAt: string;
-};
+ commentId: number
+ childCount: number
+ content: string
+ createdAt: string
+}
type ReplyProps = {
- contents: ReadReplyObject[];
- setReadReply: React.Dispatch
@@ -210,7 +222,5 @@ function Reply({ contents, setReadReply }: ReplyProps) {
) : null}
+ {contents ? (
+
+ )
+}
diff --git a/frontend/src/components/read/ReadingPage/Reply/ReadReply/WriteReReply.tsx b/frontend/src/components/read/WriteReReply.tsx
similarity index 53%
rename from frontend/src/components/read/ReadingPage/Reply/ReadReply/WriteReReply.tsx
rename to frontend/src/components/read/WriteReReply.tsx
index d8dfd9a6..2aeda363 100644
--- a/frontend/src/components/read/ReadingPage/Reply/ReadReply/WriteReReply.tsx
+++ b/frontend/src/components/read/WriteReReply.tsx
@@ -1,77 +1,89 @@
-import { act } from '@testing-library/react';
-import { useEffect, useRef, useState } from 'react';
-import { useRecoilState, useRecoilValue } from 'recoil';
+'use client'
-import { tokenApi } from '../../../../../api/axios';
-import reply_icon from '../../../../../assets/image/reply_icon.svg';
-import { projectIdState, refreshState } from '../../../../../Recoil';
+import { useEffect, useRef, useState } from 'react'
+import { useRecoilState, useRecoilValue } from 'recoil'
+import Image from 'next/image'
+
+import reply_icon from '../../../public/images/svg/reply_icon.svg'
+import { projectIdState, refreshState } from '../../utils/atoms'
interface WriteReReplyProps {
contents: {
- commentId: number;
- childCount: number;
- content: string;
- createdAt: string;
- };
- changeWriteVis: () => void;
- setSelectedValue: React.Dispatch
{/* 대댓글 입력창 */}
- );
+ )
}
-
-export default WriteReReply;
diff --git a/frontend/src/components/submit/QuillEditor.tsx b/frontend/src/components/submit/QuillEditor.tsx
deleted file mode 100644
index eb2501b0..00000000
--- a/frontend/src/components/submit/QuillEditor.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-import hljs from 'highlight.js';
-import { useRef, useMemo } from 'react';
-import ReactS3Client from 'react-aws-s3-typescript';
-import ReactQuill from 'react-quill';
-import 'react-quill/dist/quill.snow.css';
-import 'highlight.js/styles/monokai-sublime.css';
-import { useRecoilState } from 'recoil';
-
-import { contentsState } from '../../Recoil';
-import s3config from '../../s3config';
-
-// 코드 하이라이트 설정
-hljs.configure({
- languages: ['javascript', 'ruby', 'python', 'java', 'cpp', 'kotlin', 'sql'],
-});
-
-const s3 = new ReactS3Client(s3config);
-
-function QuillEditor() {
- const QuillRef = useRef
-
@@ -83,21 +80,27 @@ function ImageUploader() {
/>
- );
+ )
}
-export default ImageUploader;
+export default ImageUploader
diff --git a/frontend/src/components/submit/TechStackSelection.tsx b/frontend/src/components/submit/techStackSelection.tsx
similarity index 83%
rename from frontend/src/components/submit/TechStackSelection.tsx
rename to frontend/src/components/submit/techStackSelection.tsx
index fe463111..d9bacfbd 100644
--- a/frontend/src/components/submit/TechStackSelection.tsx
+++ b/frontend/src/components/submit/techStackSelection.tsx
@@ -1,37 +1,39 @@
-import { useState } from 'react';
-import { useRecoilState } from 'recoil';
+'use client'
-import { selectedStackState } from '../../Recoil';
-import AllStacks from '../../Stack';
+import { useState } from 'react'
+import { useRecoilState } from 'recoil'
-function TechStackSelection() {
- const [selectedStack, setSelectedStack] = useRecoilState(selectedStackState);
- const [searchText, setSearchText] = useState('');
+import { selectedStackState } from '../../utils/atoms'
+import AllStacks from '../../utils/stacks'
+
+export default function TechStackSelection() {
+ const [selectedStack, setSelectedStack] = useRecoilState(selectedStackState)
+ const [searchText, setSearchText] = useState('')
const handleSearchTextChange = (
event: React.ChangeEvent
{image ? (
- })
) : (
- 
+
)}
@@ -89,7 +91,5 @@ function TechStackSelection() {
)}
- );
+ )
}
-
-export default TechStackSelection;
diff --git a/frontend/src/components/submit/toastUIEditor.tsx b/frontend/src/components/submit/toastUIEditor.tsx
new file mode 100644
index 00000000..cfbab986
--- /dev/null
+++ b/frontend/src/components/submit/toastUIEditor.tsx
@@ -0,0 +1,91 @@
+'use client'
+
+import '../../../public/css/toastui-editor.css'
+import '@toast-ui/editor/dist/i18n/ko-kr'
+import 'tui-color-picker/dist/tui-color-picker.css'
+import '@toast-ui/editor-plugin-color-syntax/dist/toastui-editor-plugin-color-syntax.css'
+import 'prismjs/themes/prism.css'
+import '@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight.css'
+
+import { Editor } from '@toast-ui/react-editor'
+import colorSyntax from '@toast-ui/editor-plugin-color-syntax'
+import Prism from 'prismjs'
+import codeSyntaxHighlight from '@toast-ui/editor-plugin-code-syntax-highlight'
+import { useEffect, useRef, useState } from 'react'
+import { useRecoilState } from 'recoil'
+import { contentsState } from '../../utils/atoms'
+
+export default function ToastUIEditor() {
+ const toastRef = useRef의 팔로워
+ }
+ if (modenumber === 1) {
+ return 의 팔로잉
+ }
+ return 의 포스트에 반응한 사람
+}
+
+function modeImage(modenumber: number) {
+ if (modenumber === 0) {
+ return (
+
+
+ )
+}
diff --git a/frontend/src/components/user/MyPage/FollowModal.tsx b/frontend/src/components/user/MyPage/FollowModal.tsx
deleted file mode 100644
index 1a420fa0..00000000
--- a/frontend/src/components/user/MyPage/FollowModal.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import React from 'react';
-import { useRecoilValue } from 'recoil';
-
-import followerIcon from '../../../assets/image/followerIcon.svg';
-import followingIcon from '../../../assets/image/followingIcon.svg';
-import LikeIcon from '../../../assets/image/likeIcon.svg';
-import { nicknameState } from '../../../Recoil';
-
-type FollowModalProps = {
- onClickToggleModal: () => void;
- isFollowing: number;
-};
-
-function followModal({ onClickToggleModal, isFollowing }: FollowModalProps) {
- const nickname = useRecoilValue(nicknameState);
- function mode(modenumber: number) {
- if (modenumber === 0) {
- return
+
+
+ {/* 모달 배경 버튼 */}
+
+
+
+ {/* 구분선 */}
+
+
+ {userList.map((user) => (
+ {userName}
+ {modeText(modeNumber)}
+
+ {modeImage(modeNumber)}
+
+ ))}
+
+ {user.nickname}
+
+
+ 본인을 소개하는 한 마디 두 마디 세 마디
+
+ 의 팔로워
;
- }
- if (modenumber === 1) {
- return 의 팔로잉
;
- }
- return 의 포스트에 반응한 사람
;
- }
-
- function modeImage(modenumber: number) {
- if (modenumber === 0) {
- return (
-
-
- );
-}
-
-export default followModal;
diff --git a/frontend/src/components/user/MyPage/PostModal.tsx b/frontend/src/components/user/MyPage/PostModal.tsx
deleted file mode 100644
index 1e932c9c..00000000
--- a/frontend/src/components/user/MyPage/PostModal.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import React from 'react';
-
-type PostModalProps = {
- onClickPostToggleModal: () => void;
-};
-
-function PostModal({ onClickPostToggleModal }: PostModalProps) {
- return (
-
-
-
- {/* 모달 배경 버튼 */}
-
- 
*/}
-
-
- {/* 구분선 */}
-
-
- {nickname}
- {mode(isFollowing)}
- {/*
- {modeImage(isFollowing)}
-
-
- 강민아
-
-
- 본인을 소개하는 한 마디 두 마디 세 마디
-
-
-
- );
-}
-
-export default PostModal;
diff --git a/frontend/src/components/user/WritedPost.tsx b/frontend/src/components/user/WritedPost.tsx
new file mode 100644
index 00000000..cb03011c
--- /dev/null
+++ b/frontend/src/components/user/WritedPost.tsx
@@ -0,0 +1,50 @@
+import Image from 'next/image'
+import Link from 'next/link'
+
+import Like from '../../../public/images/svg/Like.svg'
+
+type GetProjectInfoResponse = {
+ id: number
+ content: string
+ projectName: string
+}
+
+type WritedPostProps = {
+ getProjectInfoResponse: GetProjectInfoResponse
+ onClickLike: () => void
+}
+
+export default function WritedPost({
+ getProjectInfoResponse,
+ onClickLike,
+}: WritedPostProps) {
+ const content = getProjectInfoResponse.content.replace(/<[^>]*>?/g, '')
+ return (
+
- {/* {isPost} */}
-
-
- {/* 모달 영역 외의 배경을 클릭하면 모달이 닫히게 하는 컨테이너, 이벤트핸들러를 사용하여 클릭 이벤트 발생 시 onClickToggleModal 함수 호출하여 모달 닫음 */}
-
- */}
-
-
- 제목
- {/*
- 개발자를 준비하다 보면, 좋은 프로젝트에 대한 고민이 많아진다. 하지만
- 처음부터 좋은 프로젝트를 개발하는 것은 어렵기에 대부분 프로젝트
- 레퍼런스를 참고하거나, 주변에 평가를 받아 개선하기도 한다. Graphy는
- 이를 도와줄 수 있는 프로젝트 공유 플랫폼이다. 개발자로 취업 준비 중인
- 사용자를 타겟팅한 포트폴리오 기록 사이트로, 사람들이 보다 좋은
- 프로젝트를 개발할 수 있도록 도와주는 것을 목표로 하고 있다. 개발자를
- 준비하다 보면, 좋은 프로젝트에 대한 고민이 많아진다. 하지만 처음부터
- 좋은 프로젝트를 개발하는 것은 어렵기에 대부분 프로젝트 레퍼런스를
- 참고하거나, 주변에 평가를 받아 개선하기도 한다. Graphy는 이를 도와줄
- 수 있는 프로젝트 공유 플랫폼이다. 개발자로 취업 준비 중인 사용자를
- 타겟팅한 포트폴리오 기록 사이트로, 사람들이 보다 좋은 프로젝트를
- 개발할 수 있도록 도와주는 것을 목표로 하고 있다.
-
-
+ {/* 좋아요 */}
+
+
+ {/* 제목 */}
+
+ )
+}
diff --git a/frontend/src/hooks/useDidMountEffect.ts b/frontend/src/hooks/useDidMountEffect.ts
new file mode 100644
index 00000000..b2a269b4
--- /dev/null
+++ b/frontend/src/hooks/useDidMountEffect.ts
@@ -0,0 +1,16 @@
+import { DependencyList, useEffect, useRef } from 'react'
+
+const useDidMountEffect = (
+ func: () => void,
+ deps: DependencyList | undefined,
+) => {
+ const didMount = useRef(false)
+
+ useEffect(() => {
+ if (didMount.current) func()
+ else didMount.current = true
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, deps)
+}
+
+export default useDidMountEffect
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
deleted file mode 100644
index 5bc59607..00000000
--- a/frontend/src/main.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-
-import App from './App';
-import './index.css';
-
-ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
-
+ {getProjectInfoResponse.projectName}
+
+ {/* 본문 미리보기 */}
+
+ {content}
+
+
+
+
-
- );
-}
-
-export default SearchProjectPage;
diff --git a/frontend/src/pages/submit/ModifyingPage.tsx b/frontend/src/pages/submit/ModifyingPage.tsx
deleted file mode 100644
index 1e420d06..00000000
--- a/frontend/src/pages/submit/ModifyingPage.tsx
+++ /dev/null
@@ -1,157 +0,0 @@
-import React, { useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { useRecoilState, useRecoilValue } from 'recoil';
-
-import { tokenApi } from '../../api/axios';
-import NavBar from '../../components/general/NavBar';
-import ImageUploader from '../../components/submit/ImageUploader';
-import QuillEditor from '../../components/submit/QuillEditor';
-import TechStackSelection from '../../components/submit/TechStackSelection';
-import {
- contentsState,
- projectIdState,
- selectedStackState,
- thumbnailUrlState,
- titleState,
- tldrState,
-} from '../../Recoil';
-
-function ModifyingPage() {
- const [title, setTitle] = useRecoilState(titleState);
- const [tldr, setTldr] = useRecoilState(tldrState);
- const contents = useRecoilValue(contentsState);
- const selectedStack = useRecoilValue(selectedStackState);
- const [thumbnailUrl, setThumbnailUrl] = useRecoilState(thumbnailUrlState);
-
- const accessToken = sessionStorage.getItem('accessToken');
- const persistToken = localStorage.getItem('persistToken');
-
- const projectId = useRecoilValue(projectIdState);
- const navigate = useNavigate();
-
- const handleTitleChange = (e: React.ChangeEvent
- {/* 프로젝트 공유 버튼 */}
-
-
-
-
- {/* All */}
-
-
-
-
- {data.map((item) => (
-
-
-
- ))}
-
-
- );
-}
-
-export default ModifyingPage;
diff --git a/frontend/src/pages/user/MyPage.tsx b/frontend/src/pages/user/MyPage.tsx
deleted file mode 100644
index f068d44d..00000000
--- a/frontend/src/pages/user/MyPage.tsx
+++ /dev/null
@@ -1,194 +0,0 @@
-import { useEffect, useState, useCallback } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { useRecoilState, useRecoilValue } from 'recoil';
-
-import { tokenApi } from '../../api/axios';
-import Like from '../../assets/image/Like.svg';
-import myProfile from '../../assets/image/myProfile.png';
-import WriteIcon from '../../assets/image/pencil-square.svg';
-import NavBar from '../../components/general/NavBar';
-import FollowModal from '../../components/user/MyPage/FollowModal';
-import PostModal from '../../components/user/MyPage/PostModal';
-import { refreshState, nicknameState } from '../../Recoil';
-
-function MyPage() {
- const refresh = useRecoilValue(refreshState);
-
- const [nickname, setNickname] = useRecoilState(nicknameState);
- const [introduction, setIntroduction] = useState
- {/* 서식 구역 */}
-
-
- {/* 텍스트 구역 */}
-
- {/* 글쓰기 구역 */}
-
- {/* 제목 상자 */}
-
- {/* 한줄 소개 상자 */}
-
- {/* 사용 기술 상자 */}
-
- {/* 사진 드롭박스 */}
-
-
-
-
- {/* 버튼 구역 */}
-
-
-
-
-
-
- );
-}
-
-export default MyPage;
diff --git a/frontend/src/s3config.ts b/frontend/src/s3config.ts
deleted file mode 100644
index 98c43551..00000000
--- a/frontend/src/s3config.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-const s3Config = {
- bucketName: process.env.VITE_APP_BUCKET_NAME?.replace(/"/g, '') || '',
- region: process.env.VITE_APP_REGION?.replace(/"/g, '') || '',
- accessKeyId: process.env.VITE_APP_ACCESS?.replace(/"/g, '') || '',
- secretAccessKey: process.env.VITE_APP_SECRET?.replace(/"/g, '') || '',
-};
-
-export default s3Config;
diff --git a/frontend/src/test/components/general/LoadingSpinner.test.tsx b/frontend/src/test/components/general/LoadingSpinner.test.tsx
deleted file mode 100644
index 80c27939..00000000
--- a/frontend/src/test/components/general/LoadingSpinner.test.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import '@testing-library/jest-dom';
-import { render, screen } from '@testing-library/react';
-
-import LoadingSpinner from '../../../components/general/LoadingSpinner';
-
-test('LoadingSpinner 테스트', () => {
- render(
- {/* 프로젝트 공유 버튼 */}
-
-
-
-
-
-
- {/* 프로필카드 아이콘 */}
- 
-
-
- {/* ----------------------------- */}
-
-
-
-
-
-
- {nickname}
-
-
-
-
-
-
-
- {isOpenModal ? (
-
-
- {introduction}
-
-
-
- {isPostOpenModal ? (
-
- 나의 작성 포스트
-
-
- {/* 구분선 */}
-
-
- {/* 내가 쓴 글 리스트 */}
-
-
-
- test
', - createdAt: '2000-00-00T00:00:00.000000', - description: 'description', - id: 1, - projectName: 'projectName', - techTags: ['React', 'TypeScript'], - thumbNail: '', -}; - -describe('ProjectCard', () => { - // 테스트 끝난후 온라인 상태로 다시 변경 - afterEach(() => { - Object.defineProperty(navigator, 'onLine', { - value: true, - writable: true, - configurable: true, - }); - }); - - test('ProjectCard 테스트', () => { - render( -