Merge branch 'develop'

src/apis/domains/host/useFetchHostInfo.ts

@@ -0,0 +1,28 @@
+import { useSuspenseQuery } from '@tanstack/react-query';
+
+import { get } from '@apis/api';
+import { QUERY_KEY } from '@apis/queryKeys/queryKeys';
+
+import { components } from '@schema';
+import { ApiResponseType } from '@types';
+
+type HostIntroGetResponse = components['schemas']['HostIntroGetResponse'];
+
+const getHostInfo = async (hostId: number): Promise<HostIntroGetResponse | null> => {
+  try {
+    const response = await get<ApiResponseType<HostIntroGetResponse>>(`/v2/host/${hostId}/intro`);
+    return response.data.data;
+  } catch (error) {
+    console.error('An error occurred while fetching the host info:', error);
+    return null;
+  }
+};
+
+export const useFetchHostInfo = (hostId: number) => {
+  return useSuspenseQuery({
+    queryKey: [QUERY_KEY.HOST_INFO, hostId],
+    queryFn: () => getHostInfo(hostId),
+    staleTime: 1000 * 10,
+    gcTime: 1000 * 10,
+  });
+};

src/apis/domains/host/usePatchHostInfo.ts

@@ -0,0 +1,65 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { SetStateAction } from 'jotai';
+import { Dispatch, RefObject } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { patch } from '@apis/api';
+import { QUERY_KEY } from '@apis/queryKeys/queryKeys';
+
+import { smoothScroll } from '@utils';
+
+import { components } from '@schema';
+import { ApiResponseType, ErrorResponse, ErrorType, MutateResponseType } from '@types';
+
+type HostUpdateRequest = components['schemas']['HostUpdateRequest'];
+export interface PatchHostInfoRequest {
+  hostId: number;
+  hostInfoValue: HostUpdateRequest;
+}
+
+const patchHostInfo = async ({
+  hostId,
+  hostInfoValue,
+}: PatchHostInfoRequest): Promise<MutateResponseType> => {
+  try {
+    const response = await patch<ApiResponseType<MutateResponseType>>(
+      `/v2/host/${hostId}`,
+      hostInfoValue
+    );
+    return response.data.data;
+  } catch (error) {
+    const errorResponse = error as ErrorResponse;
+    const errorData = errorResponse.response.data;
+    throw errorData;
+  }
+};
+
+export const usePatchHostInfo = (
+  hostId: number,
+  setIsNicknameDuplicate: Dispatch<SetStateAction<boolean>>,
+  nicknameRef: RefObject<HTMLInputElement>
+) => {
+  const queryClient = useQueryClient();
+  const navigate = useNavigate();
+
+  return useMutation({
+    mutationFn: ({ hostId, hostInfoValue }: PatchHostInfoRequest) =>
+      patchHostInfo({ hostId, hostInfoValue }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: [QUERY_KEY.HOST_INFO, hostId],
+      });
+      navigate(`/host/info/${hostId}`);
+    },
+
+    onError: (error: ErrorType) => {
+      if (error.status === 40008) {
+        setIsNicknameDuplicate(true);
+        nicknameRef.current?.focus();
+        smoothScroll(0);
+      } else {
+        alert(error.message);
+      }
+    },
+  });
+};

src/apis/domains/moim/useFetchMoimListByHost.ts

@@ -0,0 +1,31 @@
+import { useSuspenseQuery } from '@tanstack/react-query';
+
+import { get } from '@apis/api';
+import { QUERY_KEY } from '@apis/queryKeys/queryKeys';
+
+import { components } from '@schema';
+import { ApiResponseType } from '@types';
+
+type MoimListByHostResponse = components['schemas']['MoimListByHostGetResponse'];
+
+const getMoimListByHost = async (hostId: number): Promise<MoimListByHostResponse[] | null> => {
+  try {
+    const response = await get<ApiResponseType<MoimListByHostResponse[]>>(
+      `/v2/host/${hostId}/moim-list`
+    );
+
+    return response.data.data;
+  } catch (error) {
+    console.error('An error occurred while fetching the category:', error);
+    return null;
+  }
+};
+
+export const useFetchMoimListByHost = (hostId: number) => {
+  return useSuspenseQuery({
+    queryKey: [QUERY_KEY.HOST_INFO_CLASS, hostId],
+    queryFn: () => getMoimListByHost(hostId),
+    staleTime: 1000 * 30, // 30초
+    gcTime: 1000 * 60 * 5, // 5분
+  });
+};

src/apis/domains/review/useFetchReviewByHost.ts

@@ -0,0 +1,31 @@
+import { useSuspenseQuery } from '@tanstack/react-query';
+
+import { get } from '@apis/api';
+import { QUERY_KEY } from '@apis/queryKeys/queryKeys';
+
+import { components } from '@schema';
+import { ApiResponseType } from '@types';
+
+type ReviewByHostResponse = components['schemas']['ReviewListGetByHostResponse'];
+
+const getReviewByHost = async (hostId: number): Promise<ReviewByHostResponse[] | null> => {
+  try {
+    const response = await get<ApiResponseType<ReviewByHostResponse[]>>(
+      `/v2/host/${hostId}/review-list`
+    );
+
+    return response.data.data;
+  } catch (error) {
+    console.error('An error occurred while fetching the category:', error);
+    return null;
+  }
+};
+
+export const useFetchReviewByHost = (hostId: number) => {
+  return useSuspenseQuery({
+    queryKey: [QUERY_KEY.HOST_INFO_REVIEW, hostId],
+    queryFn: () => getReviewByHost(hostId),
+    staleTime: 1000 * 30, // 30초
+    gcTime: 1000 * 60 * 5, // 5분
+  });
+};

src/apis/queryKeys/queryKeys.ts

@@ -26,6 +26,9 @@ export const QUERY_KEY = {
   HOST_SUBMIT_REQUEST: 'hostSubmitRequest',
   MOIM_SUBMITTER_ALL: 'moimSubmitterAll',
   MOIM_SUBMITTER_ALL_REQUEST: 'miomSubmitterAllRequest',
+  HOST_INFO: 'hostInfo',
+  HOST_INFO_CLASS: 'hostInfoClass',
+  HOST_INFO_REVIEW: 'hostInfoReview',
   REVIEW_MOIM_INFO: 'reviewMoimInfo',
   REVIEW_TAG_LIST: 'reviewTagList',
   MOIM_NOTICE_DETAIL: 'moimNoticeDetail',

src/assets/svg/IcCamera.tsx

@@ -0,0 +1,11 @@
+import type { SVGProps } from 'react';
+const SvgIcCamera = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 25 24" {...props}>
+    <circle cx={12.75} cy={12} r={12} fill="#5451FF" />
+    <path
+      fill="#fff"
+      d="M18.063 7.13h-.771a2 2 0 0 1-1.664-.89l-.311-.466a.53.53 0 0 0-.442-.237h-4.25a.53.53 0 0 0-.442.237l-.312.467a2 2 0 0 1-1.663.89h-.77a1.594 1.594 0 0 0-1.594 1.594v7.437a1.594 1.594 0 0 0 1.593 1.594h10.625a1.594 1.594 0 0 0 1.594-1.594V8.725a1.594 1.594 0 0 0-1.593-1.594m-2.922 5.048a2.39 2.39 0 1 1-4.781 0 2.39 2.39 0 0 1 4.78 0"
+    />
+  </svg>
+);
+export default SvgIcCamera;

src/assets/svg/IcEdit.tsx

@@ -0,0 +1,11 @@
+import type { SVGProps } from 'react';
+const SvgIcEdit = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 25 24" {...props}>
+    <circle cx={12.75} cy={12} r={12} fill="#5451FF" />
+    <path
+      fill="#fff"
+      d="m12.366 15.943 4.734-4.734a6.6 6.6 0 0 1-2.129-1.43 6.6 6.6 0 0 1-1.43-2.129l-4.734 4.733c-.369.37-.554.555-.713.758q-.281.361-.48.775c-.11.233-.192.482-.358.977l-.871 2.613a.678.678 0 0 0 .859.859l2.613-.872c.496-.165.744-.247.977-.358q.414-.197.774-.48c.204-.158.389-.343.758-.712m6.047-6.047a2.517 2.517 0 0 0-3.559-3.56l-.568.568.025.071A5.6 5.6 0 0 0 15.649 9.1a5.6 5.6 0 0 0 2.196 1.364z"
+    />
+  </svg>
+);
+export default SvgIcEdit;