Merge pull request #46 from Team-INSERT/api/post

게시판 API 디테일 연동

next.config.js

@@ -1,8 +1,12 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  images: {
-    domains: ["bssm.kro.kr"],
-  },
+  // images: {
+  //   domains: [
+  //     process.env.NEXT_PUBLIC_DOMAIN,
+  //     process.env.NEXT_PUBLIC_TEST_DOMAIN,
+  //     process.env.NEXT_PUBLIC_AUTH_DOMAIN,
+  //   ],
+  // },
 };
 
 module.exports = nextConfig;

package.json

@@ -30,6 +30,7 @@
     "next": "13.4.4",
     "prettier": "^2.8.8",
     "react": "18.2.0",
+    "react-cookie": "^4.1.1",
     "react-dom": "18.2.0",
     "react-query": "^3.39.3",
     "react-slick": "^0.29.0",

src/apis/cookie/index.ts

@@ -0,0 +1,19 @@
+import { Cookies } from "react-cookie";
+
+const cookies = new Cookies();
+
+export default class Cookie {
+  static getItem(key: string) {
+    return typeof window !== "undefined" ? cookies.get(key) : null;
+  }
+
+  static setItem(key: string, value: string) {
+    if (typeof window === "undefined") return;
+    cookies.set(key, value);
+  }
+
+  static delItem(key: string) {
+    if (typeof window === "undefined") return;
+    cookies.remove(key);
+  }
+}

src/apis/httpClient/httpClient.ts

@@ -1,7 +1,9 @@
 import axios, { AxiosInstance, AxiosRequestConfig } from "axios";
 import { requestInterceptors, responseInterceptors } from "@/apis/interceptor";
-import { KEY } from "@/constants/";
+import { KEY, STORAGE_KEY } from "@/constants/";
 import { QueryClient } from "react-query";
+import { IPostListQuery } from "@/interfaces";
+import Storage from "../storage";
 
 export interface HttpClientConfig {
   baseURL?: string;
@@ -18,6 +20,7 @@ export class HttpClient {
     this.api = axios.create({
       ...axiosConfig,
       baseURL: `${axiosConfig.baseURL}${url}`,
+      withCredentials: true,
     });
     HttpClient.clientConfig = { headers: { Authorization: "" } };
     this.setting();
@@ -49,7 +52,19 @@ export class HttpClient {
   }
 
   getPost(requestConfig?: AxiosRequestConfig) {
-    return this.api.get("", {
+    return this.api.get("/:postType/:id", {
+      ...HttpClient.clientConfig,
+      ...requestConfig,
+    });
+  }
+
+  getPostList(postConfig: IPostListQuery, requestConfig?: AxiosRequestConfig) {
+    const limit = Storage.getItem(STORAGE_KEY.POST_LIMIT) || 20;
+
+    const params = { limit, ...postConfig };
+
+    return this.api.get("/:postType", {
+      params,
       ...HttpClient.clientConfig,
       ...requestConfig,
     });
@@ -62,10 +77,13 @@ export class HttpClient {
     });
   }
 
-  postOAuth(data: unknown, requestConfig?: AxiosRequestConfig) {
-    return this.api.post(`?code=${data}`, {
+  login(code: unknown, requestConfig?: AxiosRequestConfig) {
+    return this.api.post("", {
       ...HttpClient.clientConfig,
       ...requestConfig,
+      params: {
+        code,
+      },
     });
   }
 
@@ -126,4 +144,5 @@ export default {
   user: new HttpClient("api/user", axiosConfig),
   timetable: new HttpClient("api/timetable", axiosConfig),
   post: new HttpClient("api/post/", axiosConfig),
+  comment: new HttpClient("api/post/", axiosConfig),
 };

src/app/page.tsx

@@ -1,10 +1,7 @@
 "use client";
 
-import initMockAPI from "@/mocks";
 import HomePage from "@/page/home";
 
-if (process.env.NODE_ENV === "development") initMockAPI();
-
 const Home = () => {
   return <HomePage />;
 };

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

@@ -2,8 +2,15 @@
 
 import PostPage from "@/page/forum-post";
 
-const Post = () => {
-  return <PostPage />;
+interface IPostAppPageParams {
+  params: {
+    postType: string;
+    id: number;
+  };
+}
+
+const Post = ({ params }: IPostAppPageParams) => {
+  return <PostPage {...params} />;
 };
 
 export default Post;

src/components/atoms/CommentBox.tsx

@@ -6,13 +6,17 @@ import useEmoji from "@/hooks/useEmoji";
 import { AnonymousBox } from "@/components/atoms";
 import { EmojiModal } from "@/components/common";
 
-const CommentBox = () => {
+interface ICommentBoxProps {
+  totalComments: number;
+}
+
+const CommentBox = ({ totalComments }: ICommentBoxProps) => {
   const [isAnonymous, setIsAnonymous] = React.useState(false);
   const { openEmoji, closeEmoji, visible } = useEmoji();
 
   return (
     <Container>
-      <CommentCount>124</CommentCount>
+      <CommentCount>{totalComments}</CommentCount>
       <CommentWriteBox>
         <CommentTextArea />
         <CommentToolBox>

src/components/atoms/ImageWithFallback.tsx

@@ -7,6 +7,7 @@ interface ImageWithFallbackProps extends ImageProps {
   fallbackSrc: StaticImageData | string;
   alt: string;
   size?: string;
+  rounded?: boolean;
   isShouldHide?: boolean;
 }
 
@@ -16,6 +17,7 @@ const ImageWithFallback = ({
   alt,
   size,
   isShouldHide,
+  rounded,
   ...props
 }: ImageWithFallbackProps) => {
   const [imgSrc, setImgSrc] = React.useState<StaticImageData | string>(src);
@@ -27,20 +29,27 @@ const ImageWithFallback = ({
       alt={alt}
       isShouldHide={isShouldHide}
       onError={() => setImgSrc(fallbackSrc)}
-      width={0}
-      height={0}
       sizes={size}
+      rounded={rounded}
     />
   );
 };
 
-const StyledImage = styled(Image)<{ isShouldHide?: boolean }>`
+const StyledImage = styled(Image)<{
+  isShouldHide?: boolean;
+  rounded?: boolean;
+}>`
   height: auto;
   ${({ isShouldHide }) =>
     isShouldHide &&
     css`
       display: none;
     `}
+  ${({ rounded }) =>
+    rounded &&
+    css`
+      border-radius: 999px;
+    `}
 `;
 
 export default ImageWithFallback;

src/components/common/Aside/InfomationBox.tsx

@@ -6,32 +6,36 @@ import { defaultProfile } from "@/assets/images";
 import { USER, ROUTER } from "@/constants";
 import { IUser } from "@/interfaces";
 import { Row, Column } from "@/components/Flex";
+import { getUserRole } from "@/helpers";
+import flex from "@/styles/flex";
 
 interface IInfomationBoxProps {
   user: IUser;
   isLogined: boolean;
 }
 
 const InfomationBox = ({ user, isLogined }: IInfomationBoxProps) => {
+  const ifLoginedStudent = isLogined && user.role === USER.STUDENT;
+
   return (
     <Container>
       <ProfileImage
-        src={user.profile ?? defaultProfile}
+        src={user.profile || defaultProfile}
         alt="profile"
         width={50}
         height={50}
       />
-      {isLogined && user.role === USER.STUDENT && (
+      {ifLoginedStudent && (
         <>
           <Column>
-            <Row>
+            <Row gap="4px">
               <UserInfoText>{user.student.grade}학년</UserInfoText>
               <UserInfoText>{user.student.classNo}반</UserInfoText>
               <UserInfoText>{user.student.studentNo}번</UserInfoText>
             </Row>
             <Row gap="4px">
               <UserName>{user.student.name}</UserName>
-              <UserType>{user.role}</UserType>
+              <UserType>{getUserRole(user.role)}</UserType>
             </Row>
           </Column>
           <InfomationButton href={ROUTER.MYPAGE}>내 정보</InfomationButton>
@@ -52,11 +56,10 @@ const InfomationBox = ({ user, isLogined }: IInfomationBoxProps) => {
 };
 
 const Container = styled.main`
+  ${flex.CENTER};
   width: 100%;
   height: 85px;
   background-color: ${color.white};
-  display: flex;
-  align-items: center;
   gap: 12px;
   padding: 0px 18px;
   border-radius: 5px;
@@ -72,27 +75,24 @@ const UserName = styled.span`
 `;
 
 const UserType = styled.span`
-  margin-top: auto;
   ${font.p3};
   color: ${color.gray};
+  margin-top: auto;
 `;
 
 const InfomationButton = styled(Link)`
+  ${flex.CENTER};
+  ${font.btn3};
   width: 76px;
   height: 26px;
   background-color: ${color.primary_blue};
   border-radius: 5px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
   margin-left: auto;
-  ${font.btn3};
   color: ${color.white};
 `;
 
 const ProfileImage = styled(Image)`
   border-radius: 50%;
-  background-color: black;
   flex-shrink: 0;
 `;
 

src/components/common/Aside/MeisterBox.tsx

@@ -9,8 +9,8 @@ const scores = [
     type: SERVICE.MEISTER.TYPE,
   },
   {
-    name: SERVICE.MEISTER.NAME,
-    type: SERVICE.MEISTER.TYPE,
+    name: SERVICE.REWARD_POINTS.NAME,
+    type: SERVICE.REWARD_POINTS.TYPE,
   },
 ];
 
@@ -21,8 +21,8 @@ const MeisterBox = () => {
         <ScoreHGroup key={score.type}>
           <ScoreName>{score.name}</ScoreName>
           <Row gap="4px">
-            <Score>214.2</Score>
-            <Rank>48</Rank>
+            <Score>{score.name === SERVICE.MEISTER.NAME ? 159.8 : 26}</Score>
+            <Rank>{score.name === SERVICE.MEISTER.NAME ? 11 : 4}</Rank>
           </Row>
         </ScoreHGroup>
       ))}

src/constants/forum.constant.ts

@@ -1,7 +1,7 @@
 const FORUM = {
   FREE: {
     NAME: "자유",
-    TYPE: "free",
+    TYPE: "board",
   },
   STUDENT: {
     NAME: "학생",

src/constants/index.ts

@@ -8,3 +8,4 @@ export { default as ROUTER } from "./router.constant";
 export { default as SERVICE } from "./service.constant";
 export { default as TOKEN } from "./token.constant";
 export { default as USER } from "./user.constant";
+export { default as STORAGE_KEY } from "./storageKey.constant";

src/constants/key.constant.ts

@@ -2,6 +2,7 @@ const KEY = {
   USER: "useUser",
   TIMETABLE: "useTimetable",
   POST: "usePost",
+  COMMENT: "useComment",
 } as const;
 
 export default KEY;

src/constants/router.constant.ts

@@ -13,6 +13,7 @@ const ROUTER = {
   },
   TIMETABLE: "/timetable",
   MYPAGE: "/mypage",
+  NOTFOUND: "*",
 } as const;
 
 export default ROUTER;

src/constants/storageKey.constant.ts

@@ -0,0 +1,6 @@
+const STORAGE_KEY = {
+  POST_LIMIT: "postLimit",
+  THEME: "theme",
+} as const;
+
+export default STORAGE_KEY;

src/constants/token.constant.ts

@@ -3,8 +3,8 @@ export interface IToken {
 }
 
 const TOKEN = {
-  ACCESS: "access_token",
-  REFRESH: "refresh_token",
+  ACCESS: "bsm_token_v1",
+  REFRESH: "bsm_refresh_token_v1",
   POST_RENDER_LIMIT: "post_render_limit",
 } as const;
 

src/fixture/index.ts

@@ -0,0 +1,2 @@
+export { default as post } from "./post";
+export { default as postList } from "./postList";

src/fixture/post.ts

@@ -0,0 +1,18 @@
+import { IPost } from "@/interfaces";
+
+const post: IPost = {
+  id: 0,
+  user: {
+    code: 0,
+    nickname: "",
+  },
+  category: "all",
+  content: "",
+  title: "",
+  createdAt: "",
+  view: 0,
+  totalComments: 0,
+  totalLikes: 0,
+};
+
+export default post;

src/fixture/postList.ts

@@ -0,0 +1,19 @@
+import { PostListType } from "@/types";
+
+const postList: PostListType = [
+  {
+    id: 0,
+    user: {
+      code: 0,
+      nickname: "",
+    },
+    category: "all",
+    title: "",
+    createdAt: "",
+    view: 0,
+    totalComments: 0,
+    totalLikes: 0,
+  },
+];
+
+export default postList;