Feature/newsfeed/layout

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",

src/apis/newsfeed.ts

@@ -0,0 +1,28 @@
+import { httpClient } from '@/lib/httpClient';
+import { userValidate } from './auth';
+import { postForm } from '../types/newsfeed';
+
+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 async function postNewsfeed(data: postForm) {
+  const formdata = new FormData();
+
+  const response = await httpClient.post('/posts', formdata);
+
+  return response;
+}
+
+export function patchNewsfeed(postId: number) {
+  return httpClient.patch(`posts/${postId}`);
+}
+
+export function deleteNewsfeed(postId: number) {
+  return httpClient.delete(`posts/${postId}`);
+}

src/pages/feedupload/feeduploadList.tsx

@@ -1,19 +1,79 @@
 import tw from 'twin.macro';
 import React from 'react';
+import { useState } from 'react';
+import { useQueryClient, useMutation } from '@tanstack/react-query';
+import { postNewsfeed } from '@/apis/newsfeed';
 
 function FeedUploadList() {
+  const queryClient = useQueryClient();
+
+  const mutation = useMutation(postNewsfeed, {
+    onSuccess: () => {
+      alert('작성 완료!');
+    },
+    onError: () => {
+      alert('작성 오류!');
+    },
+  });
+
+  const [img, setImg] = useState<File | null>(null);
+  const [title, setTitle] = useState('');
+  const [content, setContent] = useState('');
+
+  const onChangeImg = (e: React.ChangeEvent<HTMLInputElement>) => {
+    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<HTMLButtonElement, MouseEvent>,
+  ) => {
+    e.preventDefault();
+
+    const confirmForm = {
+      title,
+      content,
+    };
+    console.log(confirmForm);
+    mutation.mutate(confirmForm);
+  };
+
   return (
     <>
       <FeedUploadListBox />
       <FeedUploadImgLabel htmlFor="file">사진추가</FeedUploadImgLabel>
-      <FeedUploadImg type="file" name="file" id="file"></FeedUploadImg>
+      <FeedUploadImg
+        multiple
+        type="file"
+        name="file"
+        id="file"
+        onChange={onChangeImg}></FeedUploadImg>
       <FeedUpLoadTitle>제목</FeedUpLoadTitle>
-      <FeedUpLoadTitleInput placeholder="본명을 입력해 주세요."></FeedUpLoadTitleInput>
+      <FeedUpLoadTitleInput
+        id={title}
+        value={title}
+        onChange={e => {
+          setTitle(e.target.value);
+        }}
+        placeholder="본명을 입력해 주세요."></FeedUpLoadTitleInput>
       <FeedUpLoadbody>내용</FeedUpLoadbody>
       <FeedUpLoadbodyInput
+        id={content}
+        value={content}
+        onChange={e => {
+          setContent(e.target.value);
+        }}
         placeholder="최소 10자 이상 내용을 입력해 주세요."
         minLength={10}></FeedUpLoadbodyInput>
-      <FeedUpLoadButton>등록</FeedUpLoadButton>
+      <FeedUpLoadButton onClick={onSubmitHandler}>등록</FeedUpLoadButton>
     </>
   );
 }

src/pages/feedupload/index.tsx

@@ -4,6 +4,10 @@ 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 +32,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;

src/pages/newsfeed/NewsFeedList.tsx

@@ -3,31 +3,75 @@ 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 {
+    data: newsFeedData,
+    isLoading,
+    error,
+  } = useQuery(['newsFeedList'], async () => {
+    const response = await getNewsfeedList();
+    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(newsFeedList);
+    return { newsFeedList, nickname, profileimg, title, content, likestatus };
+  });
+
+  if (isLoading) {
+    return <p>Loading...</p>;
+  }
+
+  if (error) {
+    return <p>Error!!!</p>;
+  }
+  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);
+  //   const newsFeed = response.data;
+
+  //   return { newsFeed };
+  // });
+
   return (
-    <StyledNewsFeedList>
-      <StyledProfileImg src="/images/profile.png" alt="Profile" />
+    <div>
+      <StyledNewsFeedList>
+        <StyledProfileImg src={profileimg} alt="Profile" />
 
-      <StyledProfileBox>
-        <StyledProfileName>청바지</StyledProfileName>
-        <StyledProfileDetail>?분야 선호</StyledProfileDetail>
-        <StyledTitle> 제목</StyledTitle>
-        <StyledDetail>내용</StyledDetail>
-        <StyledShowLike>좋아요 ?개</StyledShowLike>
-        <StyledLike>
-          <ThumbUpOffAltIcon />
-          &nbsp;&nbsp;좋아요
-        </StyledLike>
-      </StyledProfileBox>
-      <StyledComment>
-        <ChatBubbleOutlineIcon />
-        &nbsp;&nbsp;댓글 달기
-      </StyledComment>
-      <StyledShare>
-        <ShareIcon />
-        &nbsp;&nbsp;공유 하기
-      </StyledShare>
-    </StyledNewsFeedList>
+        <StyledProfileBox>
+          <StyledCreatedTime></StyledCreatedTime>
+          <StyledProfileName>{nickname}</StyledProfileName>
+          <StyledProfileDetail>?분야 선호</StyledProfileDetail>
+          <StyledTitle>{title}</StyledTitle>
+          <StyledDetail>{content}</StyledDetail>
+          <StyledShowLike>좋아요 {likestauts}개</StyledShowLike>
+          <StyledLike>
+            <ThumbUpOffAltIcon />
+            &nbsp;&nbsp;좋아요
+          </StyledLike>
+        </StyledProfileBox>
+        <StyledComment>
+          <ChatBubbleOutlineIcon />
+          &nbsp;&nbsp;댓글 달기
+        </StyledComment>
+        <StyledShare>
+          <ShareIcon />
+          &nbsp;&nbsp;공유 하기
+        </StyledShare>
+      </StyledNewsFeedList>
+    </div>
   );
 }
 
@@ -38,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

src/types/newsfeed.ts

@@ -0,0 +1,11 @@
+export interface newsFeedData {
+  newsFeedList: string[];
+  nickname: any;
+  profileimg: any;
+  likestatus: any;
+}
+
+export interface postForm {
+  title: string;
+  content: string;
+}

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"