From efc42432b3b604abd0cea4b77ec7ee11924c4423 Mon Sep 17 00:00:00 2001 From: chanyeol123 Date: Sat, 25 Nov 2023 10:46:12 +0900 Subject: [PATCH 1/8] =?UTF-8?q?chore:=20axios=20=EC=84=A4=EC=B9=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 4 ++-- yarn.lock | 8 ++++---- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 2de8a10..a6a5f44 100644 --- a/package.json +++ b/package.json @@ -18,14 +18,14 @@ "@emotion/react": "^11.11.1", "@emotion/server": "^11.11.0", "@emotion/styled": "^11.11.0", - "@stomp/stompjs": "^7.0.0", "@mui/icons-material": "^5.14.1", "@mui/material": "^5.14.1", + "@stomp/stompjs": "^7.0.0", "@tanstack/react-query": "^4.29.15", "@types/node": "20.3.1", "@types/react": "18.2.13", "@types/react-dom": "18.2.6", - "axios": "^1.4.0", + "axios": "^1.6.2", "eslint": "^8.43.0", "eslint-config-next": "13.4.7", "next": "13.4.7", diff --git a/yarn.lock b/yarn.lock index 9d03359..337fb5e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1935,10 +1935,10 @@ axe-core@^4.6.2: resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.7.2.tgz#040a7342b20765cb18bb50b628394c21bccc17a0" integrity sha512-zIURGIS1E1Q4pcrMjp+nnEh+16G56eG/MUllJH8yEvw7asDo7Ac9uhC9KIH5jzpITueEZolfYglnCGIuSBz39g== -axios@^1.4.0: - version "1.4.0" - resolved "https://registry.yarnpkg.com/axios/-/axios-1.4.0.tgz#38a7bf1224cd308de271146038b551d725f0be1f" - integrity sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA== +axios@^1.6.2: + version "1.6.2" + resolved "https://registry.yarnpkg.com/axios/-/axios-1.6.2.tgz#de67d42c755b571d3e698df1b6504cde9b0ee9f2" + integrity sha512-7i24Ri4pmDRfJTR7LDBhsOTtcm+9kjX5WiY1X3wIisx6G9So3pfMkEiU7emUBe46oceVImccTEM3k6C5dbVW8A== dependencies: follow-redirects "^1.15.0" form-data "^4.0.0" From 3514019f6f34aa79c1c6afe231e0c72a111fb6bf Mon Sep 17 00:00:00 2001 From: chanyeol123 Date: Sat, 25 Nov 2023 10:47:00 +0900 Subject: [PATCH 2/8] =?UTF-8?q?feat:=20newsfeed=20api=EC=97=B0=EA=B2=B0=20?= =?UTF-8?q?=EC=9E=91=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/newsfeed.ts | 24 ++++++++++++++++++++++++ src/pages/newsfeed/NewsFeedList.tsx | 27 ++++++++++++++++++++++++++- src/pages/newsfeed/index.tsx | 2 ++ 3 files changed, 52 insertions(+), 1 deletion(-) create mode 100644 src/apis/newsfeed.ts diff --git a/src/apis/newsfeed.ts b/src/apis/newsfeed.ts new file mode 100644 index 0000000..1a72cef --- /dev/null +++ b/src/apis/newsfeed.ts @@ -0,0 +1,24 @@ +import { httpClient } from '@/lib/httpClient'; +import axios from 'axios'; + +export async function getNewsfeedList() { + const response = await httpClient.get(`posts?page=1&size=4`); + return response.data; + +} + +export function getNewsfeed(postId: number) { + return httpClient.get(`posts/${postId}`); +} + +export function postNewsfeed() { + return httpClient.post(`posts`); +} + +export function patchNewsfeed(postId: number) { + return httpClient.patch(`posts/${postId}`); + } + +export function deleteNewsfeed(postId: number) { + return httpClient.delete(`posts/${postId}`); +} \ No newline at end of file diff --git a/src/pages/newsfeed/NewsFeedList.tsx b/src/pages/newsfeed/NewsFeedList.tsx index 6574aa2..82e0c3d 100644 --- a/src/pages/newsfeed/NewsFeedList.tsx +++ b/src/pages/newsfeed/NewsFeedList.tsx @@ -3,9 +3,32 @@ import ThumbUpOffAltIcon from '@mui/icons-material/ThumbUpOffAlt'; import ChatBubbleOutlineIcon from '@mui/icons-material/ChatBubbleOutline'; import ShareIcon from '@mui/icons-material/Share'; +import { useQuery } from '@tanstack/react-query'; +import { getNewsfeedList } from '@/apis/newsfeed'; +import { getNewsfeed } from '@/apis/newsfeed'; + function NewsFeedList() { + + const newsFeedLists = useQuery(['newsFeedList'], async () => { + const response = await getNewsfeedList(); + const newsFeedList = response.data; + + console.log(response); + return { newsFeedList }; + }); + + + + // const {} = useQuery(['newsFeed'], async () => { + // const response = await getNewsfeed(1); + // const newsFeed = response.data; + + // return { newsFeed }; + // }); + return ( - +
+ @@ -28,7 +51,9 @@ function NewsFeedList() {   공유 하기 +
); + } export default NewsFeedList; diff --git a/src/pages/newsfeed/index.tsx b/src/pages/newsfeed/index.tsx index 27754bf..e187c28 100644 --- a/src/pages/newsfeed/index.tsx +++ b/src/pages/newsfeed/index.tsx @@ -2,6 +2,8 @@ import NewsFeedHeader from './NewsFeedHeader'; import NewsFeedTab from './NewsFeedTab'; import NewsFeedList from './NewsFeedList'; + + function NewsFeed() { return ( <> From 40872609932d34a8164c527157b73fea5a90cab3 Mon Sep 17 00:00:00 2001 From: chanyeol123 Date: Sat, 25 Nov 2023 10:47:28 +0900 Subject: [PATCH 3/8] =?UTF-8?q?feat:=20feedupload=20api=EC=97=B0=EA=B2=B0?= =?UTF-8?q?=20=EC=9E=91=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/feedupload/feeduploadList.tsx | 49 ++++++++++++++++++++++--- 1 file changed, 44 insertions(+), 5 deletions(-) diff --git a/src/pages/feedupload/feeduploadList.tsx b/src/pages/feedupload/feeduploadList.tsx index 25fb305..4afd289 100644 --- a/src/pages/feedupload/feeduploadList.tsx +++ b/src/pages/feedupload/feeduploadList.tsx @@ -1,23 +1,62 @@ import tw from 'twin.macro'; import React from 'react'; +import { useState } from "react"; +import { useQuery } from '@tanstack/react-query'; +import { postNewsfeed } from '@/apis/newsfeed'; + + +type MyFormProps = { + onSubmit: (form: { name: string; description: string }) => void; +}; +function FeedUploadList({ onSubmit }: MyFormProps) { + + // const {} = useQuery(['newsFeedList'], async () => { + // const response = await postNewsfeed(); + // const Newsfeed = response.data; + // console.log(response); + + // return { Newsfeed }; + // }); + + const [img, setImg] = useState(""); + const [title, setTitle] = useState(""); + const [content, setContent] = useState(""); + + const onSubmitHandler = (e:React.MouseEvent) => { + e.preventDefault(); + + const confirmForm = { + img, + title, + content + }; + console.log(confirmForm) + }; -function FeedUploadList() { return ( <> 사진추가 - + {setImg(e.target.value); + }} > 제목 - + {setTitle(e.target.value); + }} placeholder="본명을 입력해 주세요."> 내용 - {setContent(e.target.value); + }} placeholder="최소 10자 이상 내용을 입력해 주세요." minLength={10}> - 등록 + 등록 ); } + + export default FeedUploadList; const FeedUploadImgLabel = tw.label` From 2a79afffc78ae39635a7899c88434c03b072f123 Mon Sep 17 00:00:00 2001 From: chanyeol123 Date: Sat, 25 Nov 2023 10:49:28 +0900 Subject: [PATCH 4/8] =?UTF-8?q?feat:=20=EA=B8=80=20=EC=9E=91=EC=84=B1?= =?UTF-8?q?=ED=95=98=EA=B8=B0=20user=20validation=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/feedupload/index.tsx | 37 ++++++++++++++++++++++++++++++++++ 1 file changed, 37 insertions(+) diff --git a/src/pages/feedupload/index.tsx b/src/pages/feedupload/index.tsx index b5fe36e..c3b008e 100644 --- a/src/pages/feedupload/index.tsx +++ b/src/pages/feedupload/index.tsx @@ -4,6 +4,11 @@ import Layout from './feeduploadLayout'; import FeedUploadHead from './feeduploadHeader'; import FeedUploadList from './feeduploadList'; +import { GetServerSidePropsContext, GetServerSideProps } from 'next'; +import parseCookies from '@/utils/parseCookies'; +import { userValidate } from '@/apis/auth'; + + function Home() { return ( <> @@ -28,4 +33,36 @@ function Home() { ); } +export const getServerSideProps: GetServerSideProps = async ( + context: GetServerSidePropsContext, +) => { + const cookies = parseCookies(context.req.headers.cookie || ''); + + const accessToken = cookies.accessToken; + + if (!accessToken) { + return { + redirect: { + destination: '/auth/login', + permanent: false, + }, + }; + } + + try { + const response = await userValidate(accessToken); + return { + props: { user: response.data, token: accessToken }, + }; + } catch (e) { + console.log(e); + return { + redirect: { + destination: '/auth/login', + permanent: false, + }, + }; + } +}; + export default Home; From 9f66e7a4b3caac7cfa900cc3355dcde58a3cbca2 Mon Sep 17 00:00:00 2001 From: chanyeol123 Date: Fri, 1 Dec 2023 18:07:17 +0900 Subject: [PATCH 5/8] =?UTF-8?q?chore:=20prettier=20=EC=84=A4=EC=A0=95=20?= =?UTF-8?q?=EC=A0=81=EC=9A=A9=EB=90=98=EA=B2=8C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/newsfeed.ts | 7 +-- src/pages/feedupload/feeduploadList.tsx | 60 ++++++++++-------- src/pages/feedupload/index.tsx | 1 - src/pages/newsfeed/NewsFeedList.tsx | 82 ++++++++++++++++--------- src/pages/newsfeed/index.tsx | 2 - src/types/newsfeed.ts | 6 ++ 6 files changed, 94 insertions(+), 64 deletions(-) create mode 100644 src/types/newsfeed.ts diff --git a/src/apis/newsfeed.ts b/src/apis/newsfeed.ts index 1a72cef..8fc4b99 100644 --- a/src/apis/newsfeed.ts +++ b/src/apis/newsfeed.ts @@ -4,7 +4,6 @@ import axios from 'axios'; export async function getNewsfeedList() { const response = await httpClient.get(`posts?page=1&size=4`); return response.data; - } export function getNewsfeed(postId: number) { @@ -16,9 +15,9 @@ export function postNewsfeed() { } export function patchNewsfeed(postId: number) { - return httpClient.patch(`posts/${postId}`); - } + return httpClient.patch(`posts/${postId}`); +} export function deleteNewsfeed(postId: number) { return httpClient.delete(`posts/${postId}`); -} \ No newline at end of file +} diff --git a/src/pages/feedupload/feeduploadList.tsx b/src/pages/feedupload/feeduploadList.tsx index 4afd289..090e728 100644 --- a/src/pages/feedupload/feeduploadList.tsx +++ b/src/pages/feedupload/feeduploadList.tsx @@ -1,53 +1,61 @@ import tw from 'twin.macro'; import React from 'react'; -import { useState } from "react"; +import { useState } from 'react'; import { useQuery } from '@tanstack/react-query'; import { postNewsfeed } from '@/apis/newsfeed'; - - -type MyFormProps = { - onSubmit: (form: { name: string; description: string }) => void; -}; -function FeedUploadList({ onSubmit }: MyFormProps) { - +function FeedUploadList() { // const {} = useQuery(['newsFeedList'], async () => { // const response = await postNewsfeed(); // const Newsfeed = response.data; - // console.log(response); + // console.log(response); // return { Newsfeed }; // }); - const [img, setImg] = useState(""); - const [title, setTitle] = useState(""); - const [content, setContent] = useState(""); + const [img, setImg] = useState(''); + const [title, setTitle] = useState(''); + const [content, setContent] = useState(''); - const onSubmitHandler = (e:React.MouseEvent) => { + const onSubmitHandler = ( + e: React.MouseEvent, + ) => { e.preventDefault(); - + const confirmForm = { img, title, - content + content, }; - console.log(confirmForm) + console.log(confirmForm); }; return ( <> 사진추가 - {setImg(e.target.value); - }} > + { + setImg(e.target.value); + }}> 제목 - {setTitle(e.target.value); - }} placeholder="본명을 입력해 주세요."> + { + setTitle(e.target.value); + }} + placeholder="본명을 입력해 주세요."> 내용 - {setContent(e.target.value); - }} + { + setContent(e.target.value); + }} placeholder="최소 10자 이상 내용을 입력해 주세요." minLength={10}> 등록 @@ -55,8 +63,6 @@ function FeedUploadList({ onSubmit }: MyFormProps) { ); } - - export default FeedUploadList; const FeedUploadImgLabel = tw.label` diff --git a/src/pages/feedupload/index.tsx b/src/pages/feedupload/index.tsx index c3b008e..df2eea2 100644 --- a/src/pages/feedupload/index.tsx +++ b/src/pages/feedupload/index.tsx @@ -8,7 +8,6 @@ import { GetServerSidePropsContext, GetServerSideProps } from 'next'; import parseCookies from '@/utils/parseCookies'; import { userValidate } from '@/apis/auth'; - function Home() { return ( <> diff --git a/src/pages/newsfeed/NewsFeedList.tsx b/src/pages/newsfeed/NewsFeedList.tsx index 82e0c3d..239e6ec 100644 --- a/src/pages/newsfeed/NewsFeedList.tsx +++ b/src/pages/newsfeed/NewsFeedList.tsx @@ -8,16 +8,35 @@ import { getNewsfeedList } from '@/apis/newsfeed'; import { getNewsfeed } from '@/apis/newsfeed'; function NewsFeedList() { - - const newsFeedLists = useQuery(['newsFeedList'], async () => { + const { + data: newsFeedData, + isLoading, + error, + } = useQuery(['newsFeedList'], async () => { const response = await getNewsfeedList(); - const newsFeedList = response.data; + const newsFeedList = response.data.list; + const nickname = newsFeedList[0].users.nickname; + const profileimg = newsFeedList[0].users.profileImageUrl; + const title = newsFeedList[0].title; + const content = newsFeedList[0].content; + const likestatus = newsFeedList[0].likestatus; - console.log(response); - return { newsFeedList }; + console.log(newsFeedList); + return { newsFeedList, nickname, profileimg, title, content, likestatus }; }); - + if (isLoading) { + return

Loading...

; + } + + if (error) { + return

Error!!!

; + } + const nickname = newsFeedData?.nickname; + const profileimg = newsFeedData?.profileimg; + const title = newsFeedData?.title; + const content = newsFeedData?.content; + const likestauts = newsFeedData?.likestatus; // const {} = useQuery(['newsFeed'], async () => { // const response = await getNewsfeed(1); @@ -25,35 +44,35 @@ function NewsFeedList() { // return { newsFeed }; // }); - + return (
- - + + - - 청바지 - ?분야 선호 - 제목 - 내용 - 좋아요 ?개 - - -   좋아요 - - - - -   댓글 달기 - - - -   공유 하기 - - + + + {nickname} + ?분야 선호 + {title} + {content} + 좋아요 {likestauts}개 + + +   좋아요 + + + + +   댓글 달기 + + + +   공유 하기 + +
); - } export default NewsFeedList; @@ -63,6 +82,9 @@ flex w-[600px] h-[300px] px-[15px] mt-5 py-5 border rounded-2xl bg-gray-100 `; const StyledProfileImg = tw.img` h-[40px] ml-2 mr-5 +`; +const StyledCreatedTime = tw.div` + `; const StyledProfileBox = tw.div` flex-col diff --git a/src/pages/newsfeed/index.tsx b/src/pages/newsfeed/index.tsx index e187c28..27754bf 100644 --- a/src/pages/newsfeed/index.tsx +++ b/src/pages/newsfeed/index.tsx @@ -2,8 +2,6 @@ import NewsFeedHeader from './NewsFeedHeader'; import NewsFeedTab from './NewsFeedTab'; import NewsFeedList from './NewsFeedList'; - - function NewsFeed() { return ( <> diff --git a/src/types/newsfeed.ts b/src/types/newsfeed.ts new file mode 100644 index 0000000..14f1cbc --- /dev/null +++ b/src/types/newsfeed.ts @@ -0,0 +1,6 @@ +export interface newsFeedData { + newsFeedList: string[]; + nickname: any; + profileimg: any; + likestatus: any; +} From 7e00678440a50c4b4a3a0868a4fea648817b759e Mon Sep 17 00:00:00 2001 From: chanyeol123 Date: Sat, 2 Dec 2023 08:41:33 +0900 Subject: [PATCH 6/8] =?UTF-8?q?fix:=20api=20url=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/newsfeed.ts | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/src/apis/newsfeed.ts b/src/apis/newsfeed.ts index 8fc4b99..90096fd 100644 --- a/src/apis/newsfeed.ts +++ b/src/apis/newsfeed.ts @@ -1,8 +1,9 @@ import { httpClient } from '@/lib/httpClient'; -import axios from 'axios'; +import { userValidate } from './auth'; +import { postForm } from '../types/newsfeed'; export async function getNewsfeedList() { - const response = await httpClient.get(`posts?page=1&size=4`); + const response = await httpClient.get(`/posts?page=1&size=4`); return response.data; } @@ -10,8 +11,12 @@ export function getNewsfeed(postId: number) { return httpClient.get(`posts/${postId}`); } -export function postNewsfeed() { - return httpClient.post(`posts`); +export async function postNewsfeed(data: postForm) { + const formdata = new FormData(); + + const response = await httpClient.post('/posts', formdata); + + return response; } export function patchNewsfeed(postId: number) { From 488c3bf75f03c9baceaf1d747e3ac1adcabb92ef Mon Sep 17 00:00:00 2001 From: chanyeol123 Date: Sat, 2 Dec 2023 08:42:31 +0900 Subject: [PATCH 7/8] =?UTF-8?q?feat:=20img=20=ED=8C=8C=EC=9D=BC=20handler?= =?UTF-8?q?=20=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/feedupload/feeduploadList.tsx | 41 +++++++++++++++++-------- 1 file changed, 28 insertions(+), 13 deletions(-) diff --git a/src/pages/feedupload/feeduploadList.tsx b/src/pages/feedupload/feeduploadList.tsx index 090e728..209477c 100644 --- a/src/pages/feedupload/feeduploadList.tsx +++ b/src/pages/feedupload/feeduploadList.tsx @@ -1,32 +1,49 @@ import tw from 'twin.macro'; import React from 'react'; import { useState } from 'react'; -import { useQuery } from '@tanstack/react-query'; +import { useQueryClient, useMutation } from '@tanstack/react-query'; import { postNewsfeed } from '@/apis/newsfeed'; + function FeedUploadList() { - // const {} = useQuery(['newsFeedList'], async () => { - // const response = await postNewsfeed(); - // const Newsfeed = response.data; - // console.log(response); + const queryClient = useQueryClient(); - // return { Newsfeed }; - // }); + const mutation = useMutation(postNewsfeed, { + onSuccess: () => { + alert('작성 완료!'); + }, + onError: () => { + alert('작성 오류!'); + }, + }); - const [img, setImg] = useState(''); + const [img, setImg] = useState(null); const [title, setTitle] = useState(''); const [content, setContent] = useState(''); + const onChangeImg = (e: React.ChangeEvent) => { + e.preventDefault(); + const formData = new FormData(); + + if (e.target.files) { + const uploadimg = e.target.files[0]; + formData.append('img', uploadimg); + setImg(uploadimg); + console.log(uploadimg); + console.log(img); + } + }; + const onSubmitHandler = ( e: React.MouseEvent, ) => { e.preventDefault(); const confirmForm = { - img, title, content, }; console.log(confirmForm); + mutation.mutate(confirmForm); }; return ( @@ -34,13 +51,11 @@ function FeedUploadList() { 사진추가 { - setImg(e.target.value); - }}> + onChange={onChangeImg}> 제목 Date: Sat, 2 Dec 2023 08:43:13 +0900 Subject: [PATCH 8/8] =?UTF-8?q?feat:=20=EB=89=B4=EC=8A=A4=ED=94=BC?= =?UTF-8?q?=EB=93=9C=20=EC=9E=91=EC=84=B1=20=ED=83=80=EC=9E=85=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/types/newsfeed.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/types/newsfeed.ts b/src/types/newsfeed.ts index 14f1cbc..5a6a4c8 100644 --- a/src/types/newsfeed.ts +++ b/src/types/newsfeed.ts @@ -4,3 +4,8 @@ export interface newsFeedData { profileimg: any; likestatus: any; } + +export interface postForm { + title: string; + content: string; +}