themoment-team · hyeongrok7874 · Jun 4, 2023 · May 25, 2023 · May 25, 2023 · May 25, 2023
diff --git a/apps/admin/.env.example b/apps/admin/.env.example
@@ -0,0 +1 @@
+CLIENT_API_URL = 'client-api-url'
diff --git a/apps/admin/next.config.js b/apps/admin/next.config.js
@@ -2,10 +2,22 @@
 const nextConfig = {
   reactStrictMode: true,
   swcMinify: true,
-  transpilePackages: ["ui", "common"],
+  transpilePackages: ["ui", "common", "api"],
   compiler: {
     emotion: true,
   },
+  rewrites: async () => {
+    return [
+      {
+        source: "/api/client/:path*",
+        destination: `${process.env.CLIENT_API_URL}/api/:path*`,
+      },
+      // {
+      //   source: "/api/admin/:path*",
+      //   destination: `${process.env.ADMIN_API_URL}/api/:path*`,
+      // },
+    ];
+  },
 };
 
 module.exports = nextConfig;
diff --git a/apps/admin/package.json b/apps/admin/package.json
@@ -11,9 +11,12 @@
   "dependencies": {
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
+    "@tanstack/react-query": "^4.29.7",
+    "@tanstack/react-query-devtools": "^4.29.7",
     "@types/node": "20.1.4",
     "@types/react": "18.2.6",
     "@types/react-dom": "18.2.4",
+    "api": "workspace:^",
     "common": "workspace:^",
     "eslint": "8.40.0",
     "next": "13.4.2",

diff --git a/apps/admin/src/app/layout.tsx b/apps/admin/src/app/layout.tsx
@@ -1,6 +1,9 @@
 "use client";
 
-import GlobalStyle from "common/styles/GlobalStyle";
+import { GlobalStyle } from "common";
+import { queryClient } from "api/common";
+import { QueryClientProvider } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 
 export default function RootLayout({
   children,
@@ -20,8 +23,11 @@ export default function RootLayout({
         />
       </head>
       <body>
-        <GlobalStyle />
-        {children}
+        <QueryClientProvider client={queryClient}>
+          <ReactQueryDevtools />
+          <GlobalStyle />
+          {children}
+        </QueryClientProvider>
       </body>
     </html>
   );

diff --git a/apps/admin/src/app/page.tsx b/apps/admin/src/app/page.tsx
@@ -1,8 +1,17 @@
 "use client";
 
 import { Header } from "components";
+import { useGetPostDetail, useGetPostList } from "api/client";
 
 export default function Home() {
+  // example
+  const { data: postList, isLoading } = useGetPostList("NOTICE", 0);
+
+  const { data: postDetail } = useGetPostDetail(1);
+
+  console.log(postList);
+  console.log(postDetail);
+
   return (
     <div>
       <Header hasNotification={false} name={"정문정"} />

diff --git a/apps/admin/tsconfig.json b/apps/admin/tsconfig.json
@@ -4,6 +4,7 @@
     "jsx": "preserve",
     "baseUrl": "./src",
     "paths": {
+      "client": ["../../../packages/api/client"],
       "admin/*": ["*"]
     }
   },

diff --git a/apps/storybook/.storybook/preview.tsx b/apps/storybook/.storybook/preview.tsx
@@ -1,5 +1,5 @@
 import type { Preview } from "@storybook/react";
-import GlobalStyle from "common/styles/GlobalStyle";
+import { GlobalStyle } from "common";
 import React from "react";
 
 const preview: Preview = {

diff --git a/package.json b/package.json
@@ -4,6 +4,7 @@
     "client": "pnpm --filter client",
     "admin": "pnpm --filter admin",
     "storybook": "pnpm --filter storybook",
+    "api": "pnpm --filter api",
     "common": "pnpm --filter common",
     "ui": "pnpm --filter ui",
     "tsconfig": "pnpm --filter tsconfig",

diff --git a/packages/api/client/index.ts b/packages/api/client/index.ts
@@ -0,0 +1 @@
+export * from "./src";
diff --git a/packages/api/client/src/hooks/api/index.ts b/packages/api/client/src/hooks/api/index.ts
@@ -0,0 +1 @@
+export * from "./post";
diff --git a/packages/api/client/src/hooks/api/post/index.ts b/packages/api/client/src/hooks/api/post/index.ts
@@ -0,0 +1,2 @@
+export * from "./useGetPostDetail";
+export * from "./useGetPostList";
diff --git a/packages/api/client/src/hooks/api/post/useGetPostDetail.ts b/packages/api/client/src/hooks/api/post/useGetPostDetail.ts
@@ -0,0 +1,10 @@
+import { useQuery } from "@tanstack/react-query";
+import { postUrl, get, PostDetailType, postQueryKeys } from "client";
+
+export const useGetPostDetail = (seq: number) => {
+  const query = useQuery<PostDetailType>(postQueryKeys.getPostDetail(seq), () =>
+    get(postUrl.postDetail(seq))
+  );
+
+  return query;
+};
diff --git a/packages/api/client/src/hooks/api/post/useGetPostList.ts b/packages/api/client/src/hooks/api/post/useGetPostList.ts
@@ -0,0 +1,24 @@
+import { useQuery } from "@tanstack/react-query";
+import {
+  PostCategoryType,
+  PostListType,
+  get,
+  postQueryKeys,
+  postUrl,
+} from "client";
+
+export const useGetPostList = (
+  category: PostCategoryType,
+  pageNumber: number
+) => {
+  const query = useQuery<PostListType>(
+    postQueryKeys.getPostList(category, pageNumber),
+    () => get(postUrl.postList(category, pageNumber)),
+    {
+      cacheTime: Infinity,
+      staleTime: Infinity,
+    }
+  );
+
+  return query;
+};
diff --git a/packages/api/client/src/hooks/index.ts b/packages/api/client/src/hooks/index.ts
@@ -0,0 +1 @@
+export * from "./api";
diff --git a/packages/api/client/src/index.ts b/packages/api/client/src/index.ts
@@ -0,0 +1,3 @@
+export * from "./hooks";
+export * from "./libs";
+export * from "./types";
diff --git a/packages/api/client/src/libs/api/client.ts b/packages/api/client/src/libs/api/client.ts
@@ -0,0 +1,34 @@
+import { instance } from "./instance";
+
+export const get = async (...args: Parameters<typeof instance.get>) => {
+  try {
+    const { data } = await instance.get(...args);
+    return data;
+  } catch (error) {
+    return error;
+  }
+};
+
+export const post = async <T>(...args: Parameters<typeof instance.post>) => {
+  try {
+    await instance.post<T>(...args);
+  } catch (error) {
+    return error;
+  }
+};
+
+export const patch = async <T>(...args: Parameters<typeof instance.patch>) => {
+  try {
+    await instance.patch<T>(...args);
+  } catch (error) {
+    return error;
+  }
+};
+
+export const del = async <T>(...args: Parameters<typeof instance.delete>) => {
+  try {
+    await instance.delete<T>(...args);
+  } catch (error) {
+    return error;
+  }
+};
diff --git a/packages/api/client/src/libs/api/index.ts b/packages/api/client/src/libs/api/index.ts
@@ -0,0 +1,2 @@
+export * from "./client";
+export * from "./instance";
diff --git a/packages/api/client/src/libs/api/instance.ts b/packages/api/client/src/libs/api/instance.ts
@@ -0,0 +1,6 @@
+import axios from "axios";
+
+export const instance = axios.create({
+  baseURL: "/api/client",
+  withCredentials: true,
+});
diff --git a/packages/api/client/src/libs/clientUrlController.ts b/packages/api/client/src/libs/clientUrlController.ts
@@ -0,0 +1,7 @@
+import { PostCategoryType } from "../types";
+
+export const postUrl = {
+  postList: (category: PostCategoryType, pageNumber: number) =>
+    `/post?category=${category}&pageNumber=${pageNumber}`,
+  postDetail: (postSeq: number) => `/post/${postSeq}`,
+} as const;
diff --git a/packages/api/client/src/libs/index.ts b/packages/api/client/src/libs/index.ts
@@ -0,0 +1,3 @@
+export * from "./clientUrlController";
+export * from "./api";
+export * from "./queryKeys";
diff --git a/packages/api/client/src/libs/queryKeys.ts b/packages/api/client/src/libs/queryKeys.ts
@@ -0,0 +1,11 @@
+import { PostCategoryType } from "client";
+
+export const postQueryKeys = {
+  getPostList: (category: PostCategoryType, pageNumber: number) => [
+    "post",
+    "list",
+    category,
+    pageNumber,
+  ],
+  getPostDetail: (postSeq: number) => ["post", "detail", postSeq],
+};
diff --git a/packages/api/client/src/types/index.ts b/packages/api/client/src/types/index.ts
@@ -0,0 +1 @@
+export * from "./post";
diff --git a/packages/api/client/src/types/post/index.ts b/packages/api/client/src/types/post/index.ts
@@ -0,0 +1,28 @@
+export type PostCategoryType = "NOTICE" | "FAMILY_NEWSLETTER" | "EVENT_GALLERY";
+
+export interface PostDetailType {
+  postTitle: string;
+  postWriter: string;
+  postContent: string;
+  createdAt: string;
+  fileInfo: FileInfoType[];
+}
+
+interface FileInfoType {
+  fileUrl: string;
+  fileName: string;
+  fileExtension: string;
+}
+
+export interface PostListType {
+  content: ContentType[];
+}
+
+export interface ContentType {
+  postSeq: number;
+  postTitle: string;
+  postWriter: string;
+  createdAt: string;
+  thumbnailUrl: string;
+  fileIsExist: boolean;
+}
diff --git a/packages/api/common/index.ts b/packages/api/common/index.ts
@@ -0,0 +1 @@
+export * from "./src";
diff --git a/packages/api/common/src/index.ts b/packages/api/common/src/index.ts
@@ -0,0 +1 @@
+export * from "./libs";
diff --git a/packages/api/common/src/libs/index.ts b/packages/api/common/src/libs/index.ts
@@ -0,0 +1 @@
+export * from "./queryClient";
diff --git a/packages/api/common/src/libs/queryClient.ts b/packages/api/common/src/libs/queryClient.ts
@@ -0,0 +1,5 @@
+import { QueryClient } from "@tanstack/react-query";
+
+export const queryClient = new QueryClient({
+  // defaultOptions: {},
+});
diff --git a/packages/api/package.json b/packages/api/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "api",
+  "version": "0.0.0",
+  "main": "./index.ts",
+  "dependencies": {
+    "@types/node": "20.1.4",
+    "axios": "^1.4.0"
+  },
+  "devDependencies": {
+    "tsconfig": "workspace:^"
+  },
+  "peerDependencies": {
+    "@tanstack/react-query": "^4.29.7"
+  }
+}
diff --git a/packages/api/tsconfig.json b/packages/api/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "extends": "tsconfig/base.json",
+  "compilerOptions": {
+    "rootDir": ".",
+    "baseUrl": "."
+  },
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}
diff --git a/packages/common/index.ts b/packages/common/index.ts
@@ -0,0 +1 @@
+export * from "./src";
diff --git a/packages/common/package.json b/packages/common/package.json
@@ -1,8 +1,8 @@
 {
   "name": "common",
   "version": "0.0.0",
-  "private": true,
   "license": "MIT",
+  "main": "./index.ts",
   "dependencies": {
     "@emotion/react": "^11.10.6",
     "emotion-reset": "^3.0.1",

diff --git a/packages/common/src/index.ts b/packages/common/src/index.ts
@@ -0,0 +1 @@
+export * from "./styles";
diff --git a/packages/common/styles/GlobalStyle.tsx → packages/common/src/styles/GlobalStyle.tsx b/packages/common/styles/GlobalStyle.tsx → packages/common/src/styles/GlobalStyle.tsx
@@ -1,7 +1,7 @@
 import { Global, css } from "@emotion/react";
 import emotionReset from "emotion-reset";
 
-export default function GlobalStyle() {
+export const GlobalStyle = () => {
   return (
     <Global
       styles={css`
@@ -29,4 +29,4 @@ export default function GlobalStyle() {
       `}
     />
   );
-}
+};
diff --git a/packages/common/src/styles/index.ts b/packages/common/src/styles/index.ts
@@ -0,0 +1 @@
+export * from "./GlobalStyle";
diff --git a/packages/tsconfig/base.json b/packages/tsconfig/base.json
@@ -1,12 +1,11 @@
 {
   "$schema": "https://json.schemastore.org/tsconfig",
   "compilerOptions": {
-    "target": "es5",
+    "target": "es6",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
-    "noEmit": true,
     "esModuleInterop": true,
     "module": "esnext",
     "moduleResolution": "node",

diff --git a/packages/tsconfig/nextjs.json b/packages/tsconfig/nextjs.json
@@ -4,6 +4,7 @@
   "compilerOptions": {
     "jsxImportSource": "@emotion/react",
     "jsx": "preserve",
+    "noEmit": true,
     "plugins": [
       {
         "name": "next"