Merge pull request #75 from KGU-C-Lab/develop

open-bata release

.husky/commit-msg

@@ -0,0 +1 @@
+yarn commitlint --edit $1

apps/auth/app/constants/api.ts

@@ -18,7 +18,7 @@ export const ERROR_MESSAGE = {
 export const REDIRECT = (code: string) => {
   return (
     {
-      'clab.page': 'https://member.clab.page/auth',
+      play: 'https://play.clab.page/auth',
       dev: 'http://localhost:6002/auth',
     }[code] || 'https://clab.page'
   );

apps/member/.env.production

@@ -0,0 +1,2 @@
+VITE_MODE=production
+VITE_API_BASE_URL=https://api.clab.page

apps/member/package.json

@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite --port 6002",
-    "build": "tsc && vite build",
+    "build": "tsc && vite build --mode production",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"
   },

apps/member/src/api/book.ts

@@ -4,7 +4,13 @@ import { END_POINT } from '@constants/api';
 import type { BookItem, BookLoanRecordItem } from '@type/book';
 import type { BaseResponse, PaginationType } from '@type/api';
 
-// 도서 목록 조회
+interface PostBorrowBookArgs extends BookLoanRecordItem {
+  memberId: string;
+}
+
+/**
+ * 도서 목록 조회
+ */
 export const getBooks = async (page: number, size: number) => {
   const params = { page, size };
   const { data } = await server.get<PaginationType<BookItem>>({
@@ -14,17 +20,21 @@ export const getBooks = async (page: number, size: number) => {
   return data;
 };
 
-// 도서 상세 조회
-export const getBookDetail = async (id: string) => {
+/**
+ * 도서 상세 조회
+ */
+export const getBookDetail = async (id: number) => {
   const { data } = await server.get<BaseResponse<BookItem>>({
     url: END_POINT.BOOK_DETAIL(id),
   });
 
   return data;
 };
 
-// 나의 대출내역 조회
-export const getMyBooks = async (page: number, size: number, id: string) => {
+/**
+ * 나의 대출내역 조회
+ */
+export const getMyBooks = async (id: string, page: number, size: number) => {
   const params = { page, size };
   const { data } = await server.get<PaginationType<BookItem>>({
     url: createCommonPagination(END_POINT.BOOK, params),
@@ -33,49 +43,54 @@ export const getMyBooks = async (page: number, size: number, id: string) => {
   return data.items.filter((book) => book.borrowerId === id);
 };
 
-// 도서 대출
-export const postBorrowBook = async (body: BookLoanRecordItem) => {
+/**
+ * 도서 대출
+ */
+export const postBorrowBook = async (body: PostBorrowBookArgs) => {
   const borrowUrl = END_POINT.BOOK_LOAN + '/borrow';
   const { data } = await server.post<BookLoanRecordItem, BaseResponse<number>>({
     url: borrowUrl,
     body,
   });
 
-  return data;
+  return { memberId: body.memberId, bookId: body.bookId, data };
 };
 
-// 도서 반납
+/**
+ * 도서 반납
+ */
 export const postReturnBook = async (body: BookLoanRecordItem) => {
-  const returnUrl = END_POINT.BOOK_LOAN + '/return';
   const { data } = await server.post<BookLoanRecordItem, BaseResponse<number>>({
-    url: returnUrl,
+    url: END_POINT.BOOK_LOAN_RETURN,
     body,
   });
 
-  return data;
+  return { memberId: body.borrowerId, bookId: body.bookId, data };
 };
 
-// 도서 연장
+/**
+ * 도서 연장
+ */
 export const postExtendBook = async (body: BookLoanRecordItem) => {
-  const extendUrl = END_POINT.BOOK_LOAN + '/extend';
   const { data } = await server.post<BookLoanRecordItem, BaseResponse<number>>({
-    url: extendUrl,
+    url: END_POINT.BOOK_LOAN_EXTEND,
     body,
   });
 
-  return data;
+  return { memberId: body.borrowerId, bookId: data };
 };
 
-// 도서 대출 내역 검색
+/**
+ * 도서 대출 내역 검색
+ */
 export const getBookLoanByMemberId = async (
   borrowerId: string,
   page = 0,
   size = 20,
 ) => {
-  const loanUrl = END_POINT.BOOK_LOAN + '/search';
   const params = { borrowerId, page, size };
   const { data } = await server.get<PaginationType<BookLoanRecordItem>>({
-    url: createCommonPagination(loanUrl, params),
+    url: createCommonPagination(END_POINT.BOOK_LOAN_SEARCH, params),
   });
 
   return data;

apps/member/src/api/interceptors.ts

@@ -1,6 +1,6 @@
 import { server } from './server';
 import { API_BASE_URL, END_POINT, HTTP_STATUS_CODE } from '@constants/api';
-import type { Interceptor } from '@gwansikk/server-chain';
+import type { FetchOptions, Interceptor } from '@gwansikk/server-chain';
 import type { TokenType } from '@type/api';
 import {
   authorization,
@@ -32,6 +32,12 @@ const retryRequest = async (
 
 export const tokenHandler: Interceptor<Response> = async (response, method) => {
   const { status } = response;
+  // 서버 에러인 경우 토큰을 삭제하고 페이지를 새로고침
+  if (status === HTTP_STATUS_CODE.INTERNAL_SERVER_ERROR) {
+    removeTokens();
+    window.location.reload();
+    return response;
+  }
   // 토큰 갱신이 필요 없는 경우 바로 반환
   if (status !== HTTP_STATUS_CODE.UNAUTHORIZED) return response;
   const preRefreshToken = getRefreshToken();

apps/member/src/api/member.ts

@@ -26,11 +26,7 @@ export const patchUserInfo = async ({
 }: PatchUserInfoArgs) => {
   let userInfoData;
   if (multipartFile) {
-    const data = await postUploadedFileProfileImage({
-      memberId: body.id,
-      storagePeriod: 30,
-      multipartFile: multipartFile,
-    });
+    const data = await postUploadedFileProfileImage(multipartFile);
 
     userInfoData = {
       ...body,

apps/member/src/api/membershipFee.ts

@@ -1,73 +1,45 @@
-import { API_BASE_URL, END_POINT } from '@constants/api';
-import { PaginationType } from '@type/api';
-import type { MembershipFeeType } from '@type/membershipFee';
-import { createCommonPagination, createPath, getAccessToken } from '@utils/api';
 import { server } from './server';
+import { END_POINT } from '@constants/api';
+import { createCommonPagination } from '@utils/api';
+import { postUploadedFileMembershipFee } from './uploadedFile';
+import type { ArgsWithFiles, BaseResponse, PaginationType } from '@type/api';
+import type { MembershipFeeType } from '@type/membershipFee';
 
-interface postMembershipFeeArgs {
+interface postMembershipFeeArgs extends ArgsWithFiles {
   body: MembershipFeeType;
-  multipartFile?: FormData;
 }
 
+/**
+ * 회비 신청 정보 조회
+ */
+export const getMembershipFee = async (page: number, size: number) => {
+  const params = { page, size };
+  const { data } = await server.get<PaginationType<MembershipFeeType>>({
+    url: createCommonPagination(END_POINT.MEMBERSHIP_FEE, params),
+  });
+  return data;
+};
+
+/**
+ * 회비 신청
+ */
 export const postMembershipFee = async ({
   body,
   multipartFile,
 }: postMembershipFeeArgs) => {
-  const accessToken = getAccessToken();
-  let membershipFeeData;
-
   if (multipartFile) {
-    const storagePeriod = 7;
-    const url = createPath(API_BASE_URL, END_POINT.UPLOADEDFILE_MEMBERSHIP_FEE);
-    const addUrl = `${url}?storagePeriod=${storagePeriod}`;
-    const { data: imageData } = await fetch(addUrl, {
-      method: 'POST',
-      headers: {
-        Authorization: `Bearer ${accessToken}`,
-      },
-      body: multipartFile,
-    })
-      .then((response) => {
-        if (!response.ok) {
-          throw new Error('Network response was not ok');
-        }
-        return response.json();
-      })
-      .catch((e) => console.error(e));
-    console.log('이미지 저장 완료');
+    const data = await postUploadedFileMembershipFee({
+      storagePeriod: 365,
+      multipartFile: multipartFile,
+    });
 
-    membershipFeeData = {
-      ...body,
-      imageUrl: imageData[0],
-    };
-  } else {
-    membershipFeeData = body;
+    body['imageUrl'] = data[0].fileUrl;
   }
 
-  const { data } = await fetch(
-    createPath(API_BASE_URL, END_POINT.MEMBERSHIP_FEE),
-    {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        Authorization: `Bearer ${accessToken}`,
-      },
-      body: JSON.stringify(membershipFeeData),
-    },
-  ).then((response) => {
-    if (!response.ok) {
-      throw new Error('Network response was not ok');
-    }
-    return response.json();
+  const { data } = await server.post<MembershipFeeType, BaseResponse<number>>({
+    url: END_POINT.MEMBERSHIP_FEE,
+    body: body,
   });
 
   return data;
 };
-
-export const getMembershipFee = async (page: number, size: number) => {
-  const params = { page, size };
-  const { data } = await server.get<PaginationType<MembershipFeeType>>({
-    url: createCommonPagination(END_POINT.MEMBERSHIP_FEE, params),
-  });
-  return data;
-};

apps/member/src/api/uploadedFile.ts

@@ -1,12 +1,13 @@
-import { END_POINT, STORAGE_PERIOD } from '@constants/api';
-import { createCommonPagination, createPath, getAccessToken } from '@utils/api';
-import type { BaseResponse, IDType } from '@type/api';
 import { server } from './server';
+import { END_POINT, STORAGE_PERIOD } from '@constants/api';
+import { createPath } from '@utils/api';
+import { ProfileImageFileType } from '@type/uploadFile';
 import type { AssignmentFileType } from '@type/activity';
+import type { BaseResponse, IDType } from '@type/api';
 
 interface postUploadedFileMembershipFeeArgs {
   storagePeriod: number;
-  multipartFile: string;
+  multipartFile: FormData;
 }
 
 interface postUploadedFileAssignmentArgs {
@@ -16,35 +17,31 @@ interface postUploadedFileAssignmentArgs {
   files: FormData;
 }
 
+/**
+ * 회비 증빙 사진 업로드
+ */
 export const postUploadedFileMembershipFee = async ({
   storagePeriod,
   multipartFile,
 }: postUploadedFileMembershipFeeArgs) => {
-  const accessToken = getAccessToken();
-  const params = { storagePeriod };
-  const url = createCommonPagination(
+  const url = createPath(
     END_POINT.UPLOADEDFILE_MEMBERSHIP_FEE,
-    params,
+    STORAGE_PERIOD(storagePeriod),
   );
-
-  const { data } = await fetch(url, {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-      Authorization: `Bearer ${accessToken}`,
-    },
-    body: JSON.stringify(multipartFile),
-  }).then((response) => {
-    if (!response.ok) {
-      throw new Error('Network response was not ok');
-    }
-    return response.json();
+  const { data } = await server.post<
+    FormData,
+    BaseResponse<AssignmentFileType[]>
+  >({
+    url: url,
+    body: multipartFile,
   });
 
   return data;
 };
 
-// 활동 그룹 과제 업로드
+/**
+ * 활동 그룹 과제 업로드
+ */
 export const postUploadedFileAssignment = async ({
   groupId,
   groupBoardId,
@@ -66,14 +63,11 @@ export const postUploadedFileAssignment = async ({
   return data;
 };
 
-export const postUploadedFileProfileImage = async ({
-  memberId,
-  storagePeriod,
-  multipartFile,
-}: postUploadedFileProfileImageArgs) => {
-  const url =
-    createPath(END_POINT.UPLOADEDFILE_PROFILES(memberId)) +
-    `?storagePeriod=${storagePeriod}`;
+/**
+ * 멤버 프로필 사진 업로드
+ */
+export const postUploadedFileProfileImage = async (multipartFile: FormData) => {
+  const url = createPath(END_POINT.UPLOADEDFILE_PROFILES, STORAGE_PERIOD(9999));
   const { data } = await server.post<
     FormData,
     BaseResponse<ProfileImageFileType>

apps/member/src/components/common/Comment/Comment.tsx

@@ -34,8 +34,8 @@ const Comment = ({
       />
       <div className="w-full ml-2">
         <p className="text-sm font-semibold">{writer}</p>
-        <p className="text-sm py-2">{children}</p>
-        <div className="flex justify-end text-sm gap-4">
+        <p className="py-2 text-sm whitespace-pre-wrap">{children}</p>
+        <div className="flex justify-end gap-4 text-sm">
           <p className="text-gray-500">{formattedDate('2021-11-22')}</p>
           <button onClick={onClickReport}>신고</button>
           {!isReply && <button onClick={onClickReply}>답글 쓰기</button>}

apps/member/src/components/common/CommentInput/CommentInput.tsx

@@ -38,10 +38,11 @@ const CommentInput = ({ id, value, onChange, parentId }: CommentInputProps) => {
   };
 
   return (
-    <div className="flex gap-2">
+    <div className="flex items-center gap-2">
       <Textarea
-        className="border p-2 w-full"
+        className="w-full p-2 border"
         placeholder="댓글을 입력해주세요."
+        maxLength={200}
         value={value}
         onChange={onChange}
       />