Post 작성 서버 연결

client/src/app/(protectedRoute)/new-post/page.tsx

@@ -2,8 +2,8 @@
 
 import {
   AppBar,
-  Avatar,
   Box,
+  Button,
   ButtonBase,
   Container,
   Paper,
@@ -15,25 +15,71 @@ import GoBackIcon from "@/assets/icons/GoBackIcon.svg";
 import InputSearchIcon from "@/assets/icons/InputSearchIcon.svg";
 import AlcholeSearchIcon from "@/assets/icons/AlcholeSearchIcon.svg";
 import { useRouter } from "next/navigation";
-import { ChangeEvent, useState } from "react";
+import { ChangeEvent, useEffect, useState } from "react";
 import { useUserInfoQuery } from "@/queries/auth/useUserInfoQuery";
+import axios from "@/libs/axios";
+import HOME from "@/const/clientPath";
 
 export default function NewpostPage() {
-  const router = useRouter();
   const [formValue, setFormValue] = useState({
-    alcoholNo: "",
-    alcoholFeature: "",
     postContent: "",
     postType: "BASIC",
     positionInfo: "",
-    tagList: ["string"],
+    tagList: [] as string[],
   });
+
   const changeHadler = ({
     target,
   }: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
     setFormValue((prev) => ({ ...prev, [target.name]: target.value }));
   };
 
+  const token = localStorage.getItem("accessToken");
+
+  const router = useRouter();
+
+  const submitHandler = () => {
+    let userId;
+    let pk;
+    axios
+      .get("/user/me", { headers: { Authorization: token } })
+      .then((res) => {
+        userId = res.data.id;
+      })
+      .then(() => {
+        axios
+          .post(
+            "/posts",
+            { ...formValue },
+            { headers: { Authorization: token } }
+          )
+          .then(({ data }) => {
+            pk = data.postNo;
+            const formData = new FormData();
+            if (file) {
+              formData.append("image", file);
+            }
+            axios
+              .post(`/attach/resources/POST/${pk}`, formData, {
+                headers: {
+                  Authorization: token,
+                  "Content-Type": "multipart/form-data",
+                },
+                transformRequest: [
+                  function () {
+                    return formData;
+                  },
+                ],
+              })
+              .then(() => {
+                router.push(HOME);
+              });
+          });
+      });
+  };
+  const [userTypedTag, setUserTypedTag] = useState<string>();
+  const [file, setFile] = useState<File>();
+
   return (
     <>
       <AppBar position={"static"}>
@@ -59,35 +105,83 @@ export default function NewpostPage() {
             p: 2,
           }}
           component="form"
+          onSubmit={(e) => {
+            e.preventDefault();
+            submitHandler();
+          }}
         >
           <TextField
-            placeholder="검색어를 입력해주세요"
+            placeholder="지금 어떤 술을 마시고 있나요?"
             autoFocus
+            name="positionInfo"
             InputProps={{
               startAdornment: (
                 <AlcholeSearchIcon style={{ marginRight: "8px" }} />
               ),
               endAdornment: <InputSearchIcon />,
             }}
+            onChange={changeHadler}
+          />
+
+          <TextField
+            id="filled-multiline-flexible"
+            placeholder="입력해주세요"
+            multiline
+            name={"postContent"}
+            onChange={changeHadler}
+            value={formValue.postContent}
+            rows={6}
           />
 
-          <Box>
-            <TextField
-              id="filled-multiline-flexible"
-              placeholder="입력해주세요"
-              multiline
-              name={"postContent"}
-              onChange={changeHadler}
-              value={formValue.postContent}
-              rows={6}
-            />
-          </Box>
           <Typography variant="label" sx={{ textAlign: "right" }}>
             {formValue.postContent.length} /{" "}
             <Typography variant="label" color="primary.main" component="span">
               200자
             </Typography>
           </Typography>
+          {formValue.tagList.map((tag) => {
+            return <Typography variant="label">{tag}</Typography>;
+          })}
+          <Box>
+            <TextField
+              onChange={({ target }) => setUserTypedTag(target.value)}
+              value={userTypedTag}
+            ></TextField>
+            <Button
+              onClick={(e) => {
+                e.preventDefault();
+                setFormValue((prev) => {
+                  if (!userTypedTag) return prev;
+                  return { ...prev, tagList: [...prev.tagList, userTypedTag] };
+                });
+                setUserTypedTag("");
+              }}
+            >
+              태그 추가
+            </Button>
+          </Box>
+          <Button component="label" variant="contained">
+            Upload file
+            <input
+              id="image"
+              type="file"
+              accept="image/*"
+              name="image"
+              onChange={(e) => {
+                if (e.target.files) {
+                  setFile(e.target.files[0]);
+                  let reader = new FileReader();
+                  reader.readAsDataURL(e.target.files[0]);
+                  reader.onloadend = () => {
+                    // 2. 읽기가 완료되면 아래코드가 실행됩니다.
+                    const base64 = reader.result;
+                  };
+                  // setFile(e.target.files[0]);
+                }
+              }}
+            />
+          </Button>
+          <Button type="submit">작성하기</Button>
         </Paper>
       </Container>
     </>

client/src/components/post/PostCard.tsx

@@ -21,6 +21,8 @@ import CommentIcon from "@/assets/icons/CommentIcon.svg";
 import QuoteIcon from "@/assets/icons/QuoteIcon.svg";
 import AlcoleNameTag from "./AlcoleNameTag";
 import dayjs from "dayjs";
+import useLikePostMutation from "@/queries/post/useLikePostMutation";
+import useUnLikePostMutation from "@/queries/post/useUnLikePostMutation";
 
 const PostCard = ({
   postAttachUrls,
@@ -35,9 +37,12 @@ const PostCard = ({
   alcoholName,
   alcoholType,
   commentCount,
+  likedByme,
 }: PostInterface) => {
   const openPostDetailPage = useOpenPostDetailPage();
   const hasImage = useMemo(() => postAttachUrls.length !== 0, [postAttachUrls]);
+  const { mutate: likeHandler } = useLikePostMutation();
+  const { mutate: unLikeHandler } = useUnLikePostMutation();
 
   return (
     <Card sx={{ display: "flex", gap: 2, p: 2 }}>
@@ -82,7 +87,9 @@ const PostCard = ({
             <MoreVertOutlined />
           </ButtonBase>
         </Box>
-        <AlcoleNameTag alcoholName={alcoholName} alcoholType={alcoholType} />
+        {alcoholName && (
+          <AlcoleNameTag alcoholName={alcoholName} alcoholType={alcoholType} />
+        )}
 
         <CardContent sx={{ px: 0 }}>
           {/* Contents */}
@@ -104,8 +111,8 @@ const PostCard = ({
             data-testid="postImg"
             component="img"
             height="142"
-            onClick={() => openPostDetailPage(id, id)}
-            image={postAttachUrls[0]}
+            onClick={() => openPostDetailPage(id, String(postNo))}
+            image={postAttachUrls[0].attachUrl}
             alt={`${id}의 포스트`}
             sx={{ borderRadius: 2, bgcolor: "background.default" }}
           />
@@ -121,8 +128,16 @@ const PostCard = ({
               {commentCount ?? 0}
             </Typography>
           </ButtonBase>
-          <ButtonBase data-testid="likeBtn" aria-label="like">
-            <LikeIcon />
+          <ButtonBase
+            data-testid="likeBtn"
+            aria-label="like"
+            onClick={() => {
+              likedByme ? unLikeHandler(postNo) : likeHandler(postNo);
+            }}
+          >
+            <Box style={{ color: likedByme ? "primary.main" : "#d9d9d9" }}>
+              <LikeIcon />
+            </Box>
             <Typography variant="label">{likeCount ?? 0}</Typography>
           </ButtonBase>
           <ButtonBase data-testid="QuoteBtn" aria-label="Quote">

client/src/components/post/PostCardList.tsx

@@ -12,7 +12,7 @@ import Image from "next/image";
 import NoResult from "@/assets/images/noResult.png";
 
 function PostCardList(props: UseGetPostListQueryInterface) {
-  const { data, fetchNextPage, isFetchingNextPage, isSuccess, hasNextPage } =
+  const { data, fetchNextPage, isFetchingNextPage, hasNextPage } =
     useGetPostListInfiniteQuery({
       ...props,
     });

client/src/libs/axios.ts

@@ -11,7 +11,6 @@ export const axiosPrivate = axios.create({
     "Content-Type": "application/json",
   },
   withCredentials: true,
-  baseURL: `${process.env.NEXT_PUBLIC_CLIENT_BASE_URL}/api`
 });
 
 /**

client/src/queries/post/useGetPostListInfiniteQuery.tsx

@@ -12,14 +12,17 @@ export const useGetPostListInfiniteQuery = ({
   searchKeyword,
 }: UseGetPostListQueryInterface) => {
   return useSuspenseInfiniteQuery({
-    queryKey: ["posts", searchKeyword ?? ""],
+    queryKey: getPostListInfiniteQueryKey.byKeyword(searchKeyword),
+
     queryFn: async ({ pageParam = 0 }) =>
       await getPostListQueryFn({ page: pageParam, size, searchKeyword }),
+
     getNextPageParam: ({
       currentPage,
       hasNextPage,
     }: AugmentedGetPostListResponse) =>
       hasNextPage ? currentPage + 1 : undefined,
+
     getPreviousPageParam: ({ currentPage }: AugmentedGetPostListResponse) =>
       currentPage > 0 ? currentPage - 1 : undefined,
     initialPageParam: 0,
@@ -63,8 +66,13 @@ export const getPostListQueryFn = async ({
   return {
     ...data,
     currentPage: page,
-    hasNextPage: data.totalCount / (page + 1 * size) > 1,
+    hasNextPage: data.totalCount / ((page + 1) * size) > 1,
   };
 };
 
+export const getPostListInfiniteQueryKey = {
+  all: ["posts"] as const,
+  byKeyword: (keyword?: string) => ["posts", keyword ?? ""] as const,
+};
+
 export default useGetPostListInfiniteQuery;

client/src/queries/post/useLikePostMutation.tsx

@@ -0,0 +1,35 @@
+"use client";
+import axios from "@/libs/axios";
+import { PostInterface } from "@/types/post/PostInterface";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { getPostListInfiniteQueryKey } from "./useGetPostListInfiniteQuery";
+/**
+ * 좋아요를 수행하고, 게시글을 invalidation 하는 쿼리
+ * @returns
+ */
+const useLikePostMutation = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (id: PostInterface["postNo"]) => useLikePostMutationFn(id),
+    onSuccess: () =>
+      queryClient.invalidateQueries({
+        queryKey: getPostListInfiniteQueryKey.all,
+      }),
+  });
+};
+
+/**
+ * PostNo 를 기반으로 좋아요를 수행하는 함수
+ * @param id PostNo (게시글 PK)
+ * @returns
+ */
+export const useLikePostMutationFn = async (id: PostInterface["postNo"]) => {
+  const token = localStorage.getItem("accessToken");
+  // FIXME 리터럴제거
+  const { data } = await axios.post(`/posts/like/${id}`, null, {
+    headers: { Authorization: token },
+  });
+  return data;
+};
+
+export default useLikePostMutation;

client/src/queries/post/useUnLikePostMutation.tsx

@@ -0,0 +1,35 @@
+"use client";
+import axios from "@/libs/axios";
+import { PostInterface } from "@/types/post/PostInterface";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { getPostListInfiniteQueryKey } from "./useGetPostListInfiniteQuery";
+/**
+ * 좋아요를 취소하고, 게시글을 invalidation 하는 쿼리
+ * @returns
+ */
+const useLikePostMutation = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (id: PostInterface["postNo"]) => useLikePostMutationFn(id),
+    onSuccess: () =>
+      queryClient.invalidateQueries({
+        queryKey: getPostListInfiniteQueryKey.all,
+      }),
+  });
+};
+
+/**
+ * PostNo 를 기반으로 좋아요를 취소하는 함수
+ * @param id PostNo (게시글 PK)
+ * @returns
+ */
+export const useLikePostMutationFn = async (id: PostInterface["postNo"]) => {
+  const token = localStorage.getItem("accessToken");
+  // FIXME 리터럴제거
+  const { data } = await axios.post(`/posts/like-cancel/${id}`, null, {
+    headers: { Authorization: token },
+  });
+  return data;
+};
+
+export default useLikePostMutation;

client/src/types/post/PostInterface.ts

@@ -45,7 +45,7 @@ export interface PostInterface {
   /**
    * 이미지 Href 배열
    */
-  postAttachUrls: string[];
+  postAttachUrls: postAttachUrlsType[];
   /**
    * 사용자가 추가한 해시태그
    */
@@ -80,3 +80,9 @@ type QuoteInfoType = {
   quoteNo: number;
   quoteContent: string;
 };
+
+type postAttachUrlsType = {
+  attachNo:string;
+  attachUrl:string;
+  attachType:string
+}