From 62b4cd6716eaca34ca8e93220c76388db35f9949 Mon Sep 17 00:00:00 2001 From: Pyotato Date: Sat, 5 Aug 2023 13:36:47 +0900 Subject: [PATCH 01/54] merge conflict --- src/components/user/forms/SignupForm.tsx | 44 +++++++++++------------- src/index.tsx | 2 +- src/pages/main/commentPage.tsx | 8 ++--- src/pages/main/roadmapRecommendation.jsx | 2 +- 4 files changed, 26 insertions(+), 30 deletions(-) diff --git a/src/components/user/forms/SignupForm.tsx b/src/components/user/forms/SignupForm.tsx index 23fe9d8..1b03b4b 100644 --- a/src/components/user/forms/SignupForm.tsx +++ b/src/components/user/forms/SignupForm.tsx @@ -4,12 +4,10 @@ import { Box, Button, Center, - createStyles, Modal, Paper, PaperProps, PasswordInput, - rem, Text, TextInput, Title, @@ -25,29 +23,29 @@ import { useNavigate } from 'react-router-dom'; import { useAuth } from '../../../auth/useAuth'; import { useInput } from '../../common/hooks/useInput'; -const useStyles = createStyles((theme) => ({ - container: { - height: rem(300), - width: '100%', - backgroundColor: '#52EB9A', +// const useStyles = createStyles((theme) => ({ +// container: { +// height: rem(300), +// width: '100%', +// backgroundColor: '#52EB9A', - // // Media query with value from theme - // [`@media (max-width: ${em(getBreakpointValue(theme.breakpoints.xl) - 1)})`]: - // { - // backgroundColor: theme.colors.pink[6], - // }, +// // // Media query with value from theme +// // [`@media (max-width: ${em(getBreakpointValue(theme.breakpoints.xl) - 1)})`]: +// // { +// // backgroundColor: theme.colors.pink[6], +// // }, - // // Simplify media query writing with theme functions - // [theme.fn.smallerThan('lg')]: { - // backgroundColor: theme.colors.yellow[6], - // }, +// // // Simplify media query writing with theme functions +// // [theme.fn.smallerThan('lg')]: { +// // backgroundColor: theme.colors.yellow[6], +// // }, - // // Static media query - // [`@media (max-width: ${em(800)})`]: { - // backgroundColor: theme.colors.orange[6], - // }, - }, -})); +// // // Static media query +// // [`@media (max-width: ${em(800)})`]: { +// // backgroundColor: theme.colors.orange[6], +// // }, +// }, +// })); function SignUpForm(props: PaperProps): ReactElement { const [email, onChangeEmail, setEmail] = useInput(''); const [nickname, onChangeNickname, setNickname] = useInput(''); @@ -56,7 +54,7 @@ function SignUpForm(props: PaperProps): ReactElement { useInput(''); const auth = useAuth(); const navigate = useNavigate(); - const { classes } = useStyles(); + // const { classes } = useStyles(); const form = useForm({ initialValues: { diff --git a/src/index.tsx b/src/index.tsx index 3eca59a..9f3d573 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -64,4 +64,4 @@ root.render( // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals -reportWebVitals(); \ No newline at end of file +reportWebVitals(); diff --git a/src/pages/main/commentPage.tsx b/src/pages/main/commentPage.tsx index d4a3be9..b067601 100644 --- a/src/pages/main/commentPage.tsx +++ b/src/pages/main/commentPage.tsx @@ -1,7 +1,6 @@ /* eslint-disable @typescript-eslint/no-unused-vars */ /* eslint-disable no-console */ import { - ActionIcon, Button, Center, createStyles, @@ -15,11 +14,10 @@ import { Textarea, TextInput, } from '@mantine/core'; -import { useCounter, useDisclosure } from '@mantine/hooks'; -import { IconHeart } from '@tabler/icons-react'; +import { useDisclosure } from '@mantine/hooks'; import axios from 'axios'; import { baseUrl } from 'axiosInstance/constants'; -import { useCallback, useEffect, useMemo, useState } from 'react'; +import { useCallback, useEffect, useState } from 'react'; import InfiniteScroll from 'react-infinite-scroller'; import { useInfiniteQuery } from 'react-query'; import { useLocation } from 'react-router-dom'; @@ -246,4 +244,4 @@ function CommentPage() { ); } -export default CommentPage; \ No newline at end of file +export default CommentPage; diff --git a/src/pages/main/roadmapRecommendation.jsx b/src/pages/main/roadmapRecommendation.jsx index dfdbe40..30cbc3b 100644 --- a/src/pages/main/roadmapRecommendation.jsx +++ b/src/pages/main/roadmapRecommendation.jsx @@ -219,4 +219,4 @@ export default function RoadmapRecommendation() { )} ); -} \ No newline at end of file +} From 128a33cd020364182a899e2b9497b00596d1f039 Mon Sep 17 00:00:00 2001 From: Pyotato Date: Sun, 6 Aug 2023 12:55:07 +0900 Subject: [PATCH 02/54] =?UTF-8?q?zustand=20=EA=B2=BD=EA=B3=A0=20=EB=A9=94?= =?UTF-8?q?=EC=84=B8=EC=A7=80=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 16 +- public/img/logo.png | Bin 11014 -> 6495 bytes public/img/shortLogo.png | Bin 0 -> 5234 bytes public/index.html | 2 +- public/manifest.json | 25 - src/App.tsx | 6 +- src/components/comments/index.tsx | 220 +++++++ src/components/editor/RoadMapEditor.tsx | 5 +- src/components/roadmaps/posts/Roadmap.tsx | 191 ++++++ src/components/roadmaps/posts/RoadmapInfo.jsx | 448 +++++++++++++ src/components/user/userProfile.tsx | 16 +- src/index.tsx | 39 +- src/layout/mainLayout/footer/Footer.tsx | 192 ++++++ src/layout/mainLayout/index.tsx | 5 +- src/pages/main/index.tsx | 7 +- src/pages/resetInfo/index.tsx | 8 +- src/pages/roadmap/posts/byKeyword/index.tsx | 7 +- src/pages/roadmap/posts/completeRoadmap.tsx | 116 ---- src/pages/roadmap/posts/index.tsx | 16 + src/pages/roadmap/posts/postedRoadmap.jsx | 596 ------------------ tsconfig.json | 3 +- 21 files changed, 1116 insertions(+), 802 deletions(-) create mode 100644 public/img/shortLogo.png delete mode 100644 public/manifest.json create mode 100644 src/components/comments/index.tsx create mode 100644 src/components/roadmaps/posts/Roadmap.tsx create mode 100644 src/components/roadmaps/posts/RoadmapInfo.jsx create mode 100644 src/layout/mainLayout/footer/Footer.tsx delete mode 100644 src/pages/roadmap/posts/completeRoadmap.tsx create mode 100644 src/pages/roadmap/posts/index.tsx delete mode 100644 src/pages/roadmap/posts/postedRoadmap.jsx diff --git a/package.json b/package.json index cd4bbc5..fe0a590 100644 --- a/package.json +++ b/package.json @@ -18,14 +18,11 @@ "@mantine/prism": "^6.0.16", "@mantine/spotlight": "^6.0.16", "@mantine/tiptap": "^6.0.16", - "@monaco-editor/react": "^4.5.1", "@reactflow/node-toolbar": "^1.2.3", "@syncedstore/core": "^0.5.2", "@syncedstore/react": "^0.5.2", "@tabler/icons-react": "^2.25.0", "@tiptap/core": "^2.0.4", - "@tiptap/extension-collaboration": "^2.0.4", - "@tiptap/extension-collaboration-cursor": "^2.0.4", "@tiptap/extension-color": "^2.0.4", "@tiptap/extension-highlight": "^2.0.4", "@tiptap/extension-history": "^2.0.4", @@ -51,12 +48,7 @@ "http-proxy-middleware": "^2.0.6", "jsonpatch": "^3.1.0", "lowlight": "^2.9.0", - "monaco-editor": "^0.40.0", "nanoid": "^4.0.2", - "prosemirror-keymap": "^1.2.2", - "prosemirror-model": "^1.19.3", - "prosemirror-state": "^1.4.3", - "prosemirror-view": "^1.31.6", "react": "^18.2.0", "react-dom": "^18.2.0", "react-draft-wysiwyg": "^1.15.0", @@ -69,11 +61,7 @@ "styled-reset": "^4.5.1", "tiptap": "^1.32.2", "web-vitals": "^2.1.4", - "y-leveldb": "^0.1.2", - "y-monaco": "^0.1.4", - "y-prosemirror": "^1.2.1", - "yjs": "^13.6.7", - "zustand": "^4.3.9" + "zustand": "4.3.9" }, "scripts": { "start": "react-scripts start", @@ -105,7 +93,7 @@ "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "@types/jest": "^27.5.2", - "@types/node": "^16.18.38", + "@types/node": "^20.4.8", "@types/react": "^18.2.15", "@types/react-dom": "^18.2.7", "@types/react-draft-wysiwyg": "^1.13.4", diff --git a/public/img/logo.png b/public/img/logo.png index 6b5d811736344f5cc283b6a7b104d16ebf4b3289..4f764700a88af6b77e79df27a1ad1761c9ad675a 100644 GIT binary patch literal 6495 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 FV1mT{c=!MS literal 11014 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 C - + , }, - // { path: '/roadmap/post/:id', element: }, // origin initialMerge - { path: '/roadmap/post/:Id', element: }, + // { path: '/roadmap/post/:Id', element: }, + { path: '/roadmap/post/:Id', element: }, { path: '/roadmap/post/search/:keyword', element: , diff --git a/src/components/comments/index.tsx b/src/components/comments/index.tsx new file mode 100644 index 0000000..5d45c33 --- /dev/null +++ b/src/components/comments/index.tsx @@ -0,0 +1,220 @@ +import { + Button, + Center, + createStyles, + Group, + Modal, + Paper, + rem, + Select, + SimpleGrid, + Text, + Textarea, + TextInput, +} from '@mantine/core'; +import { useDisclosure } from '@mantine/hooks'; +import axios from 'axios'; +import { baseUrl } from 'axiosInstance/constants'; +import { useUser } from 'components/user/hooks/useUser'; +import { useCallback, useEffect, useState } from 'react'; +import InfiniteScroll from 'react-infinite-scroller'; +import { useInfiniteQuery } from 'react-query'; +import { useLocation } from 'react-router-dom'; + +const useStyles = createStyles((theme) => ({ + body: { + paddingLeft: rem(54), + paddingTop: theme.spacing.sm, + }, +})); + +function CommentSection() { + const [opened, { open, close }] = useDisclosure(false); + const { classes, theme } = useStyles(); + // const [count, handlers] = useCounter(0, { min: 0, max: 1000 }); + const [commentPage, setCommentPage] = useState(1); + const { pathname } = useLocation(); + const [title, setTitle] = useState(''); + const [content, setContent] = useState([]); + const [commentInput, setCommentInput] = useState(''); + const { user } = useUser(); + const [counts, setCounts] = useState([]); + + const fetchComments = useCallback(() => { + axios + .get( + `${baseUrl}/roadmaps/load-roadmap/${pathname.slice( + pathname.lastIndexOf('/') + 1, + )}/comments?page=${commentPage}&size=5`, + { + headers: { + 'Content-Type': 'application/json', + }, + }, + ) + .then((v) => { + setContent(v?.data); + // setCounts(new Array(commentContents.length).fill(0)); + // setNickname(v?.data?.commentNickname); + }) + .catch((e) => console.log(e)); + }, [commentPage, pathname]); + + const { + refetch, + data, + fetchNextPage, + hasNextPage, + isLoading, + isError, + error, + } = useInfiniteQuery( + 'comments', + ({ pageParam = initialUrl }) => fetchUrl(pageParam), + { + getNextPageParam: (lastPage) => { + console.log(lastPage.result); + if (lastPage.result.length !== 0) { + return lastPage.next; + } + return undefined; + }, + }, + ); + + useEffect(() => { + setCommentPage(1); // pathname이 변경될 때 commentPage 초기화 + refetch(); // refetch 함수를 호출하여 데이터를 다시 로드 + fetchComments(); + }, [commentPage, fetchComments, pathname, refetch, user.accessToken]); + + const initialUrl = `${baseUrl}/roadmaps/load-roadmap/${pathname.slice( + pathname.lastIndexOf('/') + 1, + )}/comments?page=${commentPage}&size=5`; + + const fetchUrl = async (url) => { + const response = await fetch(url); + return response.json(); + }; + + if (isLoading) return
Loading...
; + if (isError) return
Error! {error.toString()}
; + + const handleCommentTitleChange = (event) => { + setTitle(event.target.value); + }; + + const handleCommentContentChange = (event) => { + setCommentInput(event.target.value); + }; + + function handleSubmit() { + axios + .post( + `${baseUrl}/comments/save-comment`, + { + // commentTitle: title, + content: commentInput, + roadmapId: Number(pathname.slice(pathname.lastIndexOf('/') + 1)), + }, + { + headers: { + Authorization: `Bearer ${user?.accessToken}`, + 'Content-Type': 'application/json', + }, + }, + ) + .then(() => { + fetchComments(); + refetch(); + }) + .catch((e) => console.log('err', e)); + } + return ( + <> + +
+

코멘트 작성

+
+ +