모임상세, 모임 참여 API 연결 로직 구현 #79

jaeml06 · 2024-07-19T07:43:15Z

PR의 목적이 무엇인가요?

2-2차 스프린트의 요구사항인 모임 상세, 모임 참여 API 연결 로직 구현

이슈 ID는 무엇인가요?

closed 모임상세, 모임 참여 API 연결 로직 구현 #67

설명

모임 상세 페이지를 위한 모임 상세 API 연결 구현
모임 참여를 위한 모임 상세 API 연결 구현
이에 따른 MoimInfo 데이터 타입 변경

질문 혹은 공유 사항 (Optional)

ss0526100

고생하셨습니다~

tmpPage만 올려주시면 될 것 같아요

approve 드릴게용~

ss0526100 · 2024-07-20T12:21:33Z

frontend/src/apis/apiconfig.ts

@@ -0,0 +1,16 @@
+export const defaultHeaders = {


defaultHeader에 대해서 같이 조금 더 생각을 해봐야 할 것 같아요

저는 json이 아닌 다른 요청들도 필요할 수 있다고 생각이 들어요.(제가 잘 몰라서 그럼)

넵 같은 의견입니다. 다만 현재는 header의 형태가 하나여서 이렇게 네이밍한것일 뿐 언제나 수정 가능합니다. 좋은 의견이네요

ss0526100 · 2024-07-20T12:25:43Z

frontend/src/components/Card/MoimCard.tsx

@@ -6,18 +6,20 @@ import {
 } from '../../utils/formatters';


이렇게 작업 공간이 겹치는 파일이 있을 때(ex:api가 component를 건드는 경우) 어떻게 하면 좋을지 생각해봐야 할 것 같아요

아마 merge하는 사람이 충돌을 해결해야 할 것 같은데 추후에 다시 의견을 나누어 보죠

ss0526100 · 2024-07-20T12:35:22Z

frontend/src/constants/routes.ts

@@ -1,6 +1,7 @@
 const ROUTES = {
  main: '/',
  addMoim: '/add-moim',
+  detail: '/:moimId',


detail을 읽을때에 main 뒤에 바로 아이디를 넣는 건 생각을 조금 더 해봐야 할 것 같아요.

주소도 전역 공간이라고 생각하는데, 전역 공간을 해치는 느낌이 들어서요.

/moim-detail/:id 와 같이 바꾸는 건 어떨까하는 생각이 드네요

좋은 지점인 것 같아요.
개인적으로는 url이 mouda.com/moim/1 이렇게 표현되는게 적절해 보입니다.

현재 moim/1과 같은 형태로 변경하였습니다.

ss0526100 · 2024-07-20T12:36:42Z

frontend/src/router.tsx

@@ -12,6 +13,10 @@ const router = createBrowserRouter([
    path: ROUTES.addMoim,
    element: <MoimCreationPage />,
  },
+  {


이 부분에 대한 커밋이 안올라온 것 같아요ㅜㅜ

다시 올려주시면 좋을 것 같아요.

올렸습니다. 구현 자체랑 상관없어서 올리지 않았는데 올리는 것이 이해하는데 더 좋았겠네요

ss0526100 · 2024-07-20T12:42:43Z

frontend/src/types/index.d.ts

  authorNickname: string;
  description?: string;
 }
+
+export type MoimInputInfo = Omit<MoimInfo, 'moimId' | 'currentPeople'>;


Omit 굿굿~~

cys4585

고생하셨습니다~
다음주에 코드 병합하면서 정리해보아요

cys4585 · 2024-07-21T03:23:32Z

frontend/src/apis/apiconfig.ts

+export const checkStatus = async (response: Response) => {
+  const statusHead = Math.floor(response.status / 100);
+  if (statusHead === 4 || statusHead === 5) {
+    const json = await response.json();
+    throw new Error(json.message);
+  }
+  return response;
+};


checkStatus 함수 분리, 네이밍 아주 좋네요~
근데 config라는 파일에 있는 게 어색한 것 같습니다 :)

네이밍도 한번 고민해보아야 겠네요

다만 header라는 것이 api통신을 위한 환경설정이라는 의미로 붙인 것이긴 합니다.

cys4585 · 2024-07-21T03:27:27Z

frontend/src/apis/gets.ts

+export const getMoim = async (moimId: number): Promise<MoimInfo> => {
+  const url = `${ENDPOINTS.moims}/${moimId}`;


const url = ${ENDPOINTS.moim}/${moimId};
이어야 할 것 같아요!

넵 수정했습니다

cys4585 · 2024-07-21T03:36:46Z

frontend/src/constants/routes.ts

@@ -1,6 +1,7 @@
 const ROUTES = {
  main: '/',
  addMoim: '/add-moim',
+  detail: '/:moimId',


좋은 지점인 것 같아요.
개인적으로는 url이 mouda.com/moim/1 이렇게 표현되는게 적절해 보입니다.

cys4585 · 2024-07-21T03:39:21Z

frontend/src/hooks/mutaions/useJoinMoim.ts

+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: [QUERY_KEYS.moim],
+      });
+      onSuccess();
+    },


참여 신청이 성공했을 때, QUERY_KEYS.moim을 refetching 해야하는 이유가 있을까요??

페이지에서 현재 참여 인원수를 반영하기 위해 refetching 하고 있습니다.

cys4585 · 2024-07-21T03:42:22Z

frontend/src/hooks/queries/useMoim.ts

+  const { data: moim, isLoading } = useQuery({
+    queryKey: [QUERY_KEYS.moim, moimId],
+    queryFn: () => getMoim(moimId),
+  });


queryKey를 두 개를 두면 nesting이 되는 걸까요?? 꿀팁 ㄱㅅㄱㅅ~

cys4585 · 2024-07-21T03:43:50Z

frontend/src/pages/MoimCreationPage/MoimCreationPage.tsx

@@ -26,7 +27,7 @@ export default function MoimCreationPage() {

  return (
    <FormLayout>
-      <FormLayout.Header onBackArrowClick={() => navigate(ROUTES.main)}>
+      <FormLayout.Header onBackArrowClick={() => navigate(-1)}>


cys4585 · 2024-07-21T03:44:50Z

frontend/src/types/index.d.ts

  authorNickname: string;
  description?: string;
 }
+
+export type MoimInputInfo = Omit<MoimInfo, 'moimId' | 'currentPeople'>;


jaeml06 · 2024-07-19T07:57:59Z

frontend/src/apis/apiconfig.ts

+  headers: defaultHeaders,
+};
+
+export const checkStatus = async (response: Response) => {


공통 API 에러처리 분리

jaeml06 · 2024-07-19T07:58:58Z

frontend/src/queryClient.ts

@@ -6,10 +6,14 @@ const createQueryClient = () => {
      queries: {
        networkMode: 'always',
      },
+      mutations: {


queryClient 에러 처리 추가

jaeml06 · 2024-07-21T04:30:47Z

frontend/src/hooks/mutaions/useJoinMoim.ts

+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: [QUERY_KEYS.moim],
+      });
+      onSuccess();
+    },


페이지에서 현재 참여 인원수를 반영하기 위해 refetching 하고 있습니다.

jaeml06 · 2024-07-21T04:57:45Z

frontend/src/apis/gets.ts

+export const getMoim = async (moimId: number): Promise<MoimInfo> => {
+  const url = `${ENDPOINTS.moims}/${moimId}`;


넵 수정했습니다

jaeml06 · 2024-07-21T05:02:26Z

frontend/src/router.tsx

@@ -12,6 +13,10 @@ const router = createBrowserRouter([
    path: ROUTES.addMoim,
    element: <MoimCreationPage />,
  },
+  {


올렸습니다. 구현 자체랑 상관없어서 올리지 않았는데 올리는 것이 이해하는데 더 좋았겠네요

jaeml06 · 2024-07-21T05:02:48Z

frontend/src/constants/routes.ts

@@ -1,6 +1,7 @@
 const ROUTES = {
  main: '/',
  addMoim: '/add-moim',
+  detail: '/:moimId',


현재 moim/1과 같은 형태로 변경하였습니다.

jaeml06 · 2024-07-21T05:03:42Z

frontend/src/apis/apiconfig.ts

@@ -0,0 +1,16 @@
+export const defaultHeaders = {


넵 같은 의견입니다. 다만 현재는 header의 형태가 하나여서 이렇게 네이밍한것일 뿐 언제나 수정 가능합니다. 좋은 의견이네요

jaeml06 · 2024-07-21T05:04:16Z

frontend/src/components/Card/MoimCard.tsx

@@ -6,18 +6,20 @@ import {
 } from '../../utils/formatters';


아마 merge하는 사람이 충돌을 해결해야 할 것 같은데 추후에 다시 의견을 나누어 보죠

jaeml06 · 2024-07-21T05:04:57Z

frontend/src/apis/apiconfig.ts

+export const checkStatus = async (response: Response) => {
+  const statusHead = Math.floor(response.status / 100);
+  if (statusHead === 4 || statusHead === 5) {
+    const json = await response.json();
+    throw new Error(json.message);
+  }
+  return response;
+};


네이밍도 한번 고민해보아야 겠네요

jaeml06 · 2024-07-21T06:47:07Z

frontend/src/apis/apiconfig.ts

+export const checkStatus = async (response: Response) => {
+  const statusHead = Math.floor(response.status / 100);
+  if (statusHead === 4 || statusHead === 5) {
+    const json = await response.json();
+    throw new Error(json.message);
+  }
+  return response;
+};


다만 header라는 것이 api통신을 위한 환경설정이라는 의미로 붙인 것이긴 합니다.

jaeml06 added 11 commits July 18, 2024 16:43

feat: 모임 상세 fetch 함수 구현

a76ca7e

refactor: 중복된 로직 분리

4faf1d2

feat: 현재 참여 인원 수 표시 추가

71c018f

feat: 모임 참여 함수 구현

b0ae104

feat: checkStatus 에러메세지 수정

ac1d56b

fix: 응답 데이터 타입 수정

e344d61

refactor: 불필요한 console.log 삭제

0af623f

fix: queryKey 무효화가 제대로 적용되지 않는 문제 수정

a1ce49a

feat: queryKey에 moimId추가

7c53588

feat: 모임 생성 시, 모임 상세 페이지로 이동 구현

835451b

feat: Error발생 시, alert 호출

fcff584

jaeml06 added FE 프론트엔드 관련 이슈입니다. 🌱 기능추가 feature (새로운 기능 구현) labels Jul 19, 2024

jaeml06 requested review from ss0526100 and cys4585 and removed request for ss0526100 July 19, 2024 07:44

ss0526100 approved these changes Jul 20, 2024

View reviewed changes

feat: 임시 모임 상세 페이지 구현

91ab84c

cys4585 approved these changes Jul 21, 2024

View reviewed changes

jaeml06 added 2 commits July 21, 2024 14:00

refactor: endpont 변경

92cf203

refactor: 모임 상세 페이지 라우터 주소 변경

7bdbfcb

jaeml06 commented Jul 21, 2024

View reviewed changes

jaeml06 merged commit 0903adc into develop-frontend Jul 22, 2024

jaeml06 deleted the feat/#67 branch July 22, 2024 05:13

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

모임상세, 모임 참여 API 연결 로직 구현 #79

모임상세, 모임 참여 API 연결 로직 구현 #79

jaeml06 commented Jul 19, 2024

ss0526100 left a comment

ss0526100 Jul 20, 2024

jaeml06 Jul 21, 2024

ss0526100 Jul 20, 2024

jaeml06 Jul 21, 2024

ss0526100 Jul 20, 2024

cys4585 Jul 21, 2024

jaeml06 Jul 21, 2024

ss0526100 Jul 20, 2024

jaeml06 Jul 21, 2024

ss0526100 Jul 20, 2024

cys4585 left a comment

cys4585 Jul 21, 2024

jaeml06 Jul 21, 2024

jaeml06 Jul 21, 2024

cys4585 Jul 21, 2024

jaeml06 Jul 21, 2024

cys4585 Jul 21, 2024

cys4585 Jul 21, 2024

jaeml06 Jul 21, 2024

cys4585 Jul 21, 2024

cys4585 Jul 21, 2024

cys4585 Jul 21, 2024

jaeml06 Jul 19, 2024

jaeml06 Jul 19, 2024

jaeml06 Jul 21, 2024

jaeml06 Jul 21, 2024

jaeml06 Jul 21, 2024

jaeml06 Jul 21, 2024

jaeml06 Jul 21, 2024

jaeml06 Jul 21, 2024

jaeml06 Jul 21, 2024

jaeml06 Jul 21, 2024

		export const getMoim = async (moimId: number): Promise<MoimInfo> => {
		const url = `${ENDPOINTS.moims}/${moimId}`;

모임상세, 모임 참여 API 연결 로직 구현 #79

모임상세, 모임 참여 API 연결 로직 구현 #79

Conversation

jaeml06 commented Jul 19, 2024

PR의 목적이 무엇인가요?

이슈 ID는 무엇인가요?

설명

질문 혹은 공유 사항 (Optional)

ss0526100 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

cys4585 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment