Merge pull request #66 from Team-INSERT/feat/post/crud

게시판 도메인 CRUD 작업 완료

package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@apollo/client": "^3.8.1",
     "@playwright/test": "^1.29.1",
+    "@tanstack/react-query": "^4.35.3",
     "@tinymce/tinymce-react": "^4.3.0",
     "@types/d3": "^7.4.0",
     "@types/node": "18.16.19",
@@ -22,8 +23,12 @@
     "@types/styled-components": "^5.1.26",
     "@types/tinymce": "^4.6.5",
     "@typescript-eslint/eslint-plugin": "^5.43.0",
+    "@uiw/react-markdown-preview": "^4.1.16",
+    "@uiw/react-md-editor": "3.6.0",
     "axios": "^1.4.0",
+    "babel-loader": "^9.1.3",
     "babel-plugin-styled-components": "^2.1.4",
+    "babel-plugin-transform-remove-imports": "^1.7.0",
     "d3": "^7.8.5",
     "dayjs": "^1.11.9",
     "dotenv": "^16.3.1",
@@ -33,14 +38,14 @@
     "graphql": "^16.8.0",
     "jest": "^29.3.1",
     "msw": "^1.2.3",
-    "next": "13.4.4",
+    "next": "13.5.2",
+    "next-remove-imports": "^1.0.12",
     "prettier": "^2.8.8",
     "react": "18.2.0",
     "react-circular-progressbar": "^2.1.0",
     "react-d3-radar": "^1.0.0-rc6",
     "react-dom": "18.2.0",
     "react-infinite-scroll-component": "^6.1.0",
-    "react-query": "^3.39.3",
     "react-scroll-horizontal": "^1.6.6",
     "react-slick": "^0.29.0",
     "react-spinner": "^0.2.7",
@@ -49,8 +54,8 @@
     "react-toastify": "^9.1.3",
     "recoil": "^0.7.7",
     "slick-carousel": "^1.8.1",
-    "styled-components": "^5.3.11",
-    "sweetalert2": "^11.7.8",
+    "styled-components": "^6.0.8",
+    "sweetalert2": "^11.7.28",
     "tinymce": "^6.6.0",
     "typescript": "5.0.4"
   },
@@ -63,7 +68,6 @@
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/npm": "^9.0.1",
     "@semantic-release/release-notes-generator": "^10.0.3",
-    "@tanstack/react-query-devtools": "^4.22.0",
     "@types/graphql": "^14.5.0",
     "@types/jest": "^29.2.4",
     "@types/react-beautiful-dnd": "^13.1.3",

public/mockServiceWorker.js

@@ -2,7 +2,7 @@
 /* tslint:disable */
 
 /**
- * Mock Service Worker (1.2.3).
+ * Mock Service Worker (1.3.1).
  * @see https://github.com/mswjs/msw
  * - Please do NOT modify this file.
  * - Please do NOT serve this file on production.

src/apis/httpClient/httpClient.ts

@@ -1,7 +1,7 @@
 import axios, { AxiosInstance, AxiosRequestConfig } from "axios";
 import { requestInterceptors, responseInterceptors } from "@/apis/interceptor";
 import { KEY, TOKEN } from "@/constants/";
-import { QueryClient } from "react-query";
+import { QueryClient } from "@tanstack/react-query";
 import Storage from "../storage";
 
 export interface HttpClientConfig {
@@ -161,4 +161,5 @@ export default {
   bamboo: new HttpClient("api/bamboo", axiosConfig),
   admin: new HttpClient("api/bamboo/admin", axiosConfig),
   like: new HttpClient("api/likes/update", axiosConfig),
+  image: new HttpClient("api/image/save", axiosConfig),
 };

src/apis/storage/index.ts

@@ -4,7 +4,7 @@ type StorageKey = StorageSettingKey | StorageTokenKey;
 
 export default class Storage {
   static getItem(key: StorageKey) {
-    return typeof window !== "undefined" ? localStorage.getItem(key) : null;
+    return typeof window !== "undefined" ? localStorage.getItem(key) : "";
   }
 
   static setItem(key: StorageKey, value: string) {

src/app/post/[id]/update/page.tsx

@@ -0,0 +1,15 @@
+"use client";
+
+import UpdatePage from "@/page/forum-edit";
+
+interface IPostUpdateAppPageParams {
+  params: {
+    id: number;
+  };
+}
+
+const Update = ({ params }: IPostUpdateAppPageParams) => {
+  return <UpdatePage {...params} />;
+};
+
+export default Update;

src/assets/data/emptyCategories.ts

@@ -18,8 +18,12 @@ const categories = [
     name: FORUM.CODE_REVIEW.NAME,
   },
   {
-    type: FORUM.LOST_FOUND.TYPE,
-    name: FORUM.LOST_FOUND.NAME,
+    type: FORUM.LOST.TYPE,
+    name: FORUM.LOST.NAME,
+  },
+  {
+    type: FORUM.FOUND.TYPE,
+    name: FORUM.FOUND.NAME,
   },
 ];
 

src/assets/data/emptyInputPost.ts

@@ -0,0 +1,19 @@
+import { POST } from "@/constants";
+import { IInputPost } from "@/interfaces";
+
+const emptyInputPost: IInputPost = {
+  id: "",
+  title: "",
+  category: POST.COMMON,
+  content: "",
+  prUrl: "",
+  isFinished: false,
+  lostThingImage: "",
+  place: "",
+  keepingPlace: "",
+  startTime: "",
+  endTime: "",
+  field: "",
+};
+
+export default emptyInputPost;

src/assets/data/index.ts

@@ -2,3 +2,4 @@ export { default as emptyCategories } from "./emptyCategories";
 export { default as emptyClassInfo } from "./emptyClassInfo";
 export { default as emptyClassLevel } from "./emptyClassLevel";
 export { default as emptyTimetable } from "./emptyTimetable";
+export { default as emptyInputPost } from "./emptyInputPost";

src/assets/icons/LikeIcon.tsx

@@ -1,16 +1,17 @@
 import { SVGAttribute } from "@/interfaces";
+import Like from "./Like";
 
 interface ILikeIconProps extends SVGAttribute {
-  color?: string;
+  isLiked?: boolean;
 }
 
 const LikeIcon = ({
   width = 15,
   height = 13,
-  color = "#E54F5A",
+  isLiked,
   isPointable,
 }: ILikeIconProps) => {
-  return (
+  return isLiked ? (
     <svg
       width={width}
       height={height}
@@ -21,9 +22,11 @@ const LikeIcon = ({
     >
       <path
         d="M7.42676 12.9334L6.41176 12.0094C2.80676 8.74038 0.426758 6.57738 0.426758 3.93838C0.426758 1.77538 2.12076 0.0883789 4.27676 0.0883789C5.49476 0.0883789 6.66376 0.655379 7.42676 1.54438C8.18976 0.655379 9.35876 0.0883789 10.5768 0.0883789C12.7328 0.0883789 14.4268 1.77538 14.4268 3.93838C14.4268 6.57738 12.0468 8.74038 8.44176 12.0094L7.42676 12.9334Z"
-        fill={color}
+        fill="#E54F5A"
       />
     </svg>
+  ) : (
+    <Like width={width} height={height} cursor={isPointable ? "pointer" : ""} />
   );
 };
 

src/assets/icons/UploadIcon.tsx

@@ -0,0 +1,40 @@
+import { color, flex } from "@/styles";
+import React from "react";
+import styled from "styled-components";
+
+const UploadIcon = ({
+  ...props
+}: React.ButtonHTMLAttributes<HTMLButtonElement>) => {
+  return (
+    <StyledButton {...props}>
+      <svg
+        width="12"
+        height="12"
+        viewBox="0 0 19 21"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M5.70691 7.20337V9.20337H2.70691V18.2034H16.7069V9.20337H13.7069V7.20337H16.7069C17.2373 7.20337 17.746 7.41409 18.1211 7.78916C18.4962 8.16423 18.7069 8.67294 18.7069 9.20337V18.2034C18.7069 18.7338 18.4962 19.2425 18.1211 19.6176C17.746 19.9927 17.2373 20.2034 16.7069 20.2034H2.70691C2.17648 20.2034 1.66777 19.9927 1.2927 19.6176C0.917623 19.2425 0.706909 18.7338 0.706909 18.2034V9.20337C0.706909 8.67294 0.917623 8.16423 1.2927 7.78916C1.66777 7.41409 2.17648 7.20337 2.70691 7.20337H5.70691ZM10.5909 0.672374L13.9499 4.03037C14.1375 4.21801 14.243 4.47251 14.243 4.73787C14.243 5.00324 14.1375 5.25773 13.9499 5.44537C13.7623 5.63301 13.5078 5.73843 13.2424 5.73843C12.977 5.73843 12.7225 5.63301 12.5349 5.44537L10.7069 3.61637V13.2034C10.7069 13.4686 10.6016 13.7229 10.414 13.9105C10.2265 14.098 9.97213 14.2034 9.70691 14.2034C9.44169 14.2034 9.18734 14.098 8.9998 13.9105C8.81227 13.7229 8.70691 13.4686 8.70691 13.2034V3.61637L6.87891 5.44537C6.786 5.53828 6.6757 5.61198 6.55431 5.66227C6.43291 5.71255 6.3028 5.73843 6.17141 5.73843C6.04001 5.73843 5.90991 5.71255 5.78851 5.66227C5.66712 5.61198 5.55682 5.53828 5.46391 5.44537C5.371 5.35246 5.2973 5.24216 5.24702 5.12077C5.19673 4.99938 5.17085 4.86927 5.17085 4.73787C5.17085 4.60648 5.19673 4.47637 5.24702 4.35498C5.2973 4.23358 5.371 4.12328 5.46391 4.03037L8.82391 0.672374C9.0583 0.438188 9.37608 0.306641 9.70741 0.306641C10.0387 0.306641 10.3565 0.438188 10.5909 0.672374Z"
+          fill="black"
+        />
+      </svg>
+    </StyledButton>
+  );
+};
+
+const StyledButton = styled.button`
+  padding: 4px;
+  ${flex.CENTER};
+
+  &:hover {
+    background-color: ${color.gray};
+    svg {
+      path {
+        fill: #0066cc;
+      }
+    }
+  }
+`;
+
+export default UploadIcon;

src/assets/icons/index.ts

@@ -18,3 +18,4 @@ export { default as Laughing } from "./emojis/Laughing";
 export { default as Relaxed } from "./emojis/Relaxed";
 export { default as Curve } from "./Curve";
 export { default as HistorySeparator } from "./HistorySeparator";
+export { default as UploadIcon } from "./UploadIcon";