feat(member): 문의 페이지 생성

apps/member/package.json

@@ -48,6 +48,7 @@
     "eslint-plugin-react-refresh": "^0.4.5",
     "postcss": "^8.4.33",
     "prettier": "^3.1.1",
+    "prettier-plugin-tailwindcss": "^0.5.13",
     "tailwindcss": "^3.4.1",
     "typescript": "^5.2.2",
     "vite": "^5.0.8"

apps/member/src/api/support.ts

@@ -0,0 +1,135 @@
+import { createPagination } from '@clab-platforms/utils';
+
+import { END_POINT } from '@constants/api';
+
+import type {
+  BaseResponse,
+  ResponsePagination,
+  WithPaginationParams,
+} from '@type/api';
+import type {
+  Support,
+  SupportAnswerRequest,
+  SupportDetail,
+  SupportWriteRequest,
+} from '@type/support';
+
+import { server } from './server';
+import {
+  postFilesSupportImages,
+  postUploadedFileBoard,
+  uploadFiles,
+} from './uploadedFile';
+
+export interface PostSupportsWriteParams extends SupportWriteRequest {
+  file?: File;
+}
+export interface PatchSupportsParams extends SupportWriteRequest {
+  id: number;
+  file?: File;
+}
+export interface PostAnswersParams extends SupportAnswerRequest {
+  id: number;
+}
+export interface PatchAnswersParams extends SupportAnswerRequest {
+  id: number;
+}
+
+/**
+ * 내가 작성한 문의 조회
+ */
+export async function getMySupports({ page, size }: WithPaginationParams) {
+  const { data } = await server.get<ResponsePagination<Support>>({
+    url: createPagination(END_POINT.MY_SUPPORTS, { page, size }),
+  });
+
+  return data;
+}
+
+/**
+ * 문의 목록 조회
+ */
+export async function getSupportList({ page, size }: WithPaginationParams) {
+  const { data } = await server.get<ResponsePagination<Support>>({
+    url: createPagination(END_POINT.SUPPORTS, { page, size }),
+  });
+  return data;
+}
+
+/**
+ * 문의 작성
+ */
+export async function postSupportsWrite(data: PostSupportsWriteParams) {
+  if (data.file) {
+    const files = await uploadFiles([data.file], postUploadedFileBoard);
+    if (!files?.[0]?.fileUrl) {
+      throw new Error('파일 업로드에 실패했습니다.');
+    }
+    data.imageUrl = files[0].fileUrl;
+  }
+
+  return server.post<SupportWriteRequest, BaseResponse<number>>({
+    url: END_POINT.SUPPORTS,
+    body: data,
+  });
+}
+
+/**
+ * 문의 상세 조회
+ */
+export function getSupportsDetail(id: number) {
+  return server.get<BaseResponse<SupportDetail>>({
+    url: END_POINT.SUPPORTS_ITEM(id),
+  });
+}
+
+/**
+ * 문의 수정
+ */
+export async function patchSupports({
+  id,
+  file,
+  ...data
+}: PatchSupportsParams) {
+  if (file) {
+    const uploadedFile = await uploadFiles([file], postFilesSupportImages);
+    if (!uploadedFile?.[0]?.fileUrl) {
+      throw new Error('파일 업로드에 실패했습니다.');
+    }
+    data.imageUrl = uploadedFile[0].fileUrl;
+  }
+
+  return server.patch<SupportWriteRequest, BaseResponse<number>>({
+    url: END_POINT.SUPPORTS_ITEM(id),
+    body: data,
+  });
+}
+
+/**
+ * 문의 삭제
+ */
+export function deleteSupports(id: number) {
+  return server.del<never, BaseResponse<number>>({
+    url: END_POINT.SUPPORTS_ITEM(id),
+  });
+}
+
+/**
+ * 답변 작성
+ */
+export async function postAnswersWrite({ id, ...data }: PostAnswersParams) {
+  return server.post<SupportAnswerRequest, BaseResponse<number>>({
+    url: END_POINT.ANSWERS_ITEM(id),
+    body: data,
+  });
+}
+
+/**
+ * 답변 수정
+ */
+export async function patchAnswers({ id, ...data }: PatchAnswersParams) {
+  return server.patch<SupportAnswerRequest, BaseResponse<number>>({
+    url: END_POINT.ANSWERS_ITEM(id),
+    body: data,
+  });
+}

apps/member/src/api/uploadedFile.ts

@@ -154,3 +154,15 @@ export async function postUploadedFileSubmit({
 
   return data;
 }
+
+/**
+ * 문의 이미지 업로드
+ */
+export async function postFilesSupportImages(multipartFile: FormData) {
+  const { data } = await server.post<FormData, BaseResponse<ResponseFile[]>>({
+    url: createURL(END_POINT.UPLOADEDFILE_SUPPORT, STORAGE_PERIOD(5)), // 문의 이미지는 5년간 보관
+    body: multipartFile,
+  });
+
+  return data;
+}

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

@@ -77,11 +77,17 @@ const Nav = () => {
             >
               도서관
             </Menubar.Item>
+            <Menubar.Item
+              selected={pathName.startsWith(PATH.MEMBERSHIP_FEE)}
+              onClick={() => handleMenubarItemClick(PATH.MEMBERSHIP_FEE)}
+            >
+              회비
+            </Menubar.Item>
             <Menubar.Item
               selected={pathName.startsWith(PATH.SUPPORT)}
               onClick={() => handleMenubarItemClick(PATH.SUPPORT)}
             >
-              회비
+              문의
             </Menubar.Item>
             {data.roleLevel! >= ROLE_LEVEL.ADMIN && (
               <>

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

@@ -86,11 +86,17 @@ const Sidebar = () => {
           >
             도서관
           </Menubar.Item>
+          <Menubar.Item
+            selected={pathName.startsWith(PATH.MEMBERSHIP_FEE)}
+            onClick={() => handleMenubarItemClick(PATH.MEMBERSHIP_FEE)}
+          >
+            회비
+          </Menubar.Item>
           <Menubar.Item
             selected={pathName.startsWith(PATH.SUPPORT)}
             onClick={() => handleMenubarItemClick(PATH.SUPPORT)}
           >
-            회비
+            문의
           </Menubar.Item>
           {data.roleLevel! >= ROLE_LEVEL.ADMIN && (
             <>

apps/member/src/components/support/SupportHistorySection.tsx → apps/member/src/components/membership/membershipFee/MembershipFeeHistorySection.tsx

@@ -3,7 +3,7 @@ import { Table } from '@clab-platforms/design-system';
 import ActionButton from '@components/common/ActionButton/ActionButton';
 import Pagination from '@components/common/Pagination/Pagination';
 import Section from '@components/common/Section/Section';
-import MembershipStatusBadge from '@components/membership/MembershipStatusBadge/MembershipStatusBadge';
+import MembershipStatusBadge from '@components/membership/membershipStatusBadge/MembershipStatusBadge';
 
 import { ROLE_LEVEL } from '@constants/state';
 import { usePagination } from '@hooks/common/usePagination';
@@ -23,7 +23,7 @@ interface Props {
   hasPermission?: boolean;
 }
 
-export function SupportHistorySection({
+export function MembershipFeeHistorySection({
   title,
   size: defaultSize,
   withPagination,
@@ -98,7 +98,7 @@ export function SupportHistorySection({
   );
 }
 
-export function SupportHistorySectionSkeleton() {
+export function MembershipFeeHistorySectionSkeleton() {
   return (
     <Section className="h-96 animate-pulse">
       <Section.Header title={TITLE} />

apps/member/src/constants/api.ts

@@ -79,6 +79,7 @@ export const END_POINT = {
     `/v1/files/notices/${groupId}`,
   UPLOADEDFILE_ACTIVITY_ASSIGNMENT: (groupId: number) =>
     `/v1/files/assignments/${groupId}`,
+  UPLOADEDFILE_SUPPORT: '/v1/files/supports',
   // -- 활동그룹 멤버
   ACTIVITY_GROUP_MEMBER: (id: number) => `/v1/activity-group/member/${id}`,
   ACTIVITY_GROUP_MEMBER_MY: `/v1/activity-group/member/my`,
@@ -114,6 +115,11 @@ export const END_POINT = {
   RECRUITMENT: `/v1/recruitments`,
   // -- 해시태그
   HASHTAG: `/v1/hashtags`,
+  // -- 문의
+  SUPPORTS: `/v1/supports`,
+  SUPPORTS_ITEM: (supportId: number) => `/v1/supports/${supportId}`,
+  MY_SUPPORTS: `/v1/supports/my-supports`,
+  ANSWERS_ITEM: (supportId: number) => `/v1/supports/${supportId}/answer`,
 } as const;
 
 /**

apps/member/src/constants/head.ts

@@ -40,6 +40,7 @@ export const TABLE_HEAD = {
     '생성',
   ] as const,
   MEMBER_MANAGE_TABLE: ['번호', '학번', '이름', '상태'],
+  SUPPORT_TABLE: ['번호', '제목', '문의자', '문의일', '상태'],
 } as const;
 /**
  * 관리자 페이지에서 기능을 나타내는 상수

apps/member/src/constants/key.ts

@@ -302,3 +302,18 @@ export const RECRUITMENT_QUERY_KEY = {
   ALL: ['Application'],
   LIST: () => [...APPLICATION_QUERY_KEY.ALL, 'list'],
 } as const;
+
+/**
+ * 문의 관련 쿼리 키
+ */
+export const SUPPORT_QUERY_KEY = {
+  ALL: ['Support'],
+  MY: () => [...SUPPORT_QUERY_KEY.ALL, 'my'],
+  DETAILS: () => [...SUPPORT_QUERY_KEY.ALL, 'details'],
+  COLLECTIONS: () => [...SUPPORT_QUERY_KEY.ALL, 'collections'],
+  DETAIL: (id: number) => [...SUPPORT_QUERY_KEY.DETAILS(), id],
+  COLLECTION: (pagination: WithPaginationParams) => [
+    ...SUPPORT_QUERY_KEY.COLLECTIONS(),
+    pagination,
+  ],
+} as const;

apps/member/src/constants/path.ts

@@ -32,12 +32,15 @@ export const PATH = {
   BLOG_DETAIL: '/blog/:id',
   LIBRARY: '/library',
   LIBRARY_DETAIL: '/library/:id',
-  SUPPORT: '/support',
+  MEMBERSHIP_FEE: '/membershipFee',
   SITEMAP: '/sitemap',
   MANAGE: '/manage',
   LOGIN: '/login',
   AUTH: '/auth',
   APPLICATION: '/application',
+  SUPPORT: '/support',
+  SUPPORT_WRITE: '/support/write',
+  SUPPORT_LIST: '/support/list',
 } as const;
 /**
  * 페이지의 URL을 생성하는 함수입니다.

apps/member/src/constants/select.ts

@@ -2,8 +2,12 @@ import type {
   CommunityCategoryKorType,
   CommunityCategoryType,
 } from '@type/community';
+import type {
+  SupportCategoryKorType,
+  SupportCategoryType,
+} from '@type/support';
 
-import { APPLICATION_TYPE } from './state';
+import { APPLICATION_TYPE, SUPPORT_CATEGORY_STATE } from './state';
 
 type Options<N = string, V = string> = {
   name: N;
@@ -70,3 +74,17 @@ export const SELECT_ACTIVITY_GROUP_CATEGORY_TYPE = {
   STUDY: 'STUDY',
   PROJECT: 'PROJECT',
 } as const;
+
+export const SELECT_OPTIONS_INQUIRY_TYPE: Options<
+  SupportCategoryKorType,
+  SupportCategoryType
+>[] = [
+  {
+    name: '버그',
+    value: SUPPORT_CATEGORY_STATE.BUG,
+  },
+  {
+    name: '문의',
+    value: SUPPORT_CATEGORY_STATE.INQUIRY,
+  },
+] as const;

apps/member/src/constants/state.ts

@@ -142,3 +142,33 @@ export const APPLICATION_TYPE = {
   OPERATION: 'OPERATION',
   CORE_TEAM: 'CORE_TEAM',
 } as const;
+
+/**
+ * 문의 카테고리를 정의합니다.
+ */
+export const SUPPORT_CATEGORY_STATE = {
+  BUG: 'BUG',
+  INQUIRY: 'INQUIRY',
+} as const;
+/**
+ * 문의 답변 상태를 정의합니다.
+ */
+export const SUPPORT_ANSWER_STATE = {
+  PENDING: 'PENDING',
+  COMPLETED: 'COMPLETED',
+} as const;
+/**
+ * 문의 제목의 최대 길이
+ * 100자
+ */
+export const SUPPORT_TITLE_MAX_LENGTH = 100;
+/**
+ * 문의 내용의 최대 길이
+ * 5000자
+ */
+export const SUPPORT_CONTENT_MAX_LENGTH = 5000;
+/**
+ * 문의 답변의 최대 길이
+ * 5000자
+ */
+export const SUPPORT_ANSWER_MAX_LENGTH = 5000;

apps/member/src/hooks/modal/useMembershipInfoModal.tsx

@@ -4,8 +4,8 @@ import { DetailsList } from '@clab-platforms/design-system';
 import { formatWon } from '@clab-platforms/utils';
 
 import Image from '@components/common/Image/Image';
-import MembershipCategoryBadge from '@components/membership/MembershipCategoryBadge/MembershipCategoryBadge';
-import MembershipStatusBadge from '@components/membership/MembershipStatusBadge/MembershipStatusBadge';
+import MembershipCategoryBadge from '@components/membership/membershipCategoryBadge/MembershipCategoryBadge';
+import MembershipStatusBadge from '@components/membership/membershipStatusBadge/MembershipStatusBadge';
 
 import { MODAL_TITLE } from '@constants/modal';
 import { UseModalResult, useModal } from '@hooks/common/useModal';

apps/member/src/hooks/queries/index.ts

@@ -3,6 +3,7 @@ export * from './blog';
 export * from './board';
 export * from './book-loan';
 export * from './comment';
+export * from './support';
 export * from './my';
 export * from './schedule';
 export * from './queryClient';

apps/member/src/hooks/queries/support/index.ts

@@ -0,0 +1,8 @@
+export * from './useSupportList';
+export * from './useAnswerModifyMutation';
+export * from './useAnswerWriteMutation';
+export * from './useMySupports';
+export * from './useSupportDeleteMutation';
+export * from './useSupportDetail';
+export * from './useSupportModifyMutation';
+export * from './useSupportWriteMutation';