[Edit] show all boards and create board

Types/index.tsx

@@ -24,7 +24,8 @@ export type LayoutType = React.PropsWithChildren & {
 export interface FeedInfoType {
   id: number;
   nickName: string;
-  content: string;
-  time: string;
-  img: string;
+  contents: string;
+  title: string;
+  imageUrl: string;
+  updated_at: string;
 }

app/components/Feed/Feed.tsx

@@ -32,7 +32,7 @@ const Feed: React.FC<Props> = ({ feeds }) => {
             </svg> */}
           </FeedFlex>
           <Background>
-            <FeedImg src="https://mblogthumb-phinf.pstatic.net/MjAyMTAzMDFfNjUg/MDAxNjE0NTI4ODc2NzQ0.pWSoz-Jz0w_oGaU0CGeY5ft44-JR0-imABKI8c75HZUg.TzCOn_c2cG2Z_Ih5q1hT9tNMozqbha7PYXK0NyMUObog.JPEG.qkrchdud5/output_2772876332.jpg?type=w800"></FeedImg>
+            <FeedImg src={feed.imageUrl}></FeedImg>
           </Background>
           {/* 다음 버전 */}
           {/* <FeedFlex style={{ margin: "4px 0" }}>
@@ -93,9 +93,9 @@ const Feed: React.FC<Props> = ({ feeds }) => {
             {/* <LikeNum>{`좋아요 ${feed.likeNum}개`}</LikeNum> */}
             <FlexBox>
               <ContentNickName>{feed.nickName}</ContentNickName>
-              <Discription>{feed.content}</Discription>
+              <Discription>{feed.contents}</Discription>
             </FlexBox>
-            <Time>{feed.time}</Time>
+            <Time>{feed.updated_at}</Time>
           </Content>
         </div>
       ))}

app/create/FileLoader.tsx

@@ -41,21 +41,9 @@ const FileLoader = () => {
   const makeBoard = () => {
     const formData = new FormData();
 
-    images.forEach((image) => {
-      formData.append("files", image);
-    });
-    formData.append(
-      "request",
-      new Blob(
-        [
-          JSON.stringify({
-            title,
-            contents,
-          }),
-        ],
-        { type: "application/json" }
-      )
-    );
+    formData.append("files", images[0][0]);
+    formData.append("request", `{"title":"${title}","contents":"${contents}"}`);
+
     const res = createBoard(formData);
     res.then((info) => {
       if (info.code !== 200) console.log(info.message);
@@ -83,7 +71,9 @@ const FileLoader = () => {
 
   return (
     <div>
-      <AbsoluteIcon onClick={makeBoard}>등록</AbsoluteIcon>
+      <AbsoluteIcon onClick={makeBoard} style={{ right: "16px", top: "14px" }}>
+        등록
+      </AbsoluteIcon>
       <div style={{ flex: 1 }}>
         {!showImages.length ? (
           <ImgBox className="input-file-button" htmlFor="input-file">
@@ -198,8 +188,8 @@ const Image = styled.img`
 `;
 const AbsoluteIcon = styled.button`
   position: absolute;
-  right: 16px;
-  top: 14px;
+  right: -14px;
+  top: -14px;
   color: #6f85a8;
   font-family: Pretendard;
   font-size: 16px;

app/home/page.tsx

@@ -6,6 +6,8 @@ import styled from "styled-components";
 import FriendsList from "../components/FriendList/FriendList";
 import Feed from "../components/\bFeed/Feed";
 import { Scroll } from "@/styles/base";
+import { useEffect, useState } from "react";
+import { getBoards } from "@/axios/boards";
 
 const Container = styled.div`
   height: 100%;
@@ -47,11 +49,20 @@ const feedsMock = [
   },
 ];
 const Home: NextPage = () => {
+  const [feeds, setFeeds] = useState([]);
+
+  useEffect(() => {
+    const result = getBoards();
+    result.then((data) => {
+      setFeeds(data.data);
+    });
+  }, []);
+
   return (
     <Layout menu="home">
       <Scroll>
         <FriendsList Friends={friendListMock} />
-        <Feed feeds={feedsMock} />
+        <Feed feeds={feeds} />
       </Scroll>
     </Layout>
   );

axios/boards/index.tsx

@@ -4,15 +4,21 @@ const client = useAxiosWithAuth();
 
 export const createBoard = async (formData: any) => {
   try {
-    // eslint-disable-next-line no-restricted-syntax
-    for (const key of formData.keys()) {
-      console.log(key, ":", formData.get(key));
-    }
     const response = await client.post("/boards", formData, {
       headers: {
         "Content-Type": "multipart/form-data",
       },
     });
+    return response.data;
+  } catch (error: any) {
+    console.log(error);
+    // alert('다시 시도해주세요');
+    return error;
+  }
+};
+export const getBoards = async () => {
+  try {
+    const response = await client.get("/boards");
 
     return response.data;
   } catch (error: any) {

axios/useAxiosWithAuth.tsx

@@ -36,7 +36,7 @@ const useAxiosWithAuth = (): AxiosInstance => {
       if (statusCode === 401) {
         error.response.statusText = "Unauthorized";
         error.response.status = 401;
-        window.location.href = "/";
+        window.location.href = "/login";
       }
       return Promise.reject(error);
     }