Release/v1.4.2 (#642)

* Feature: community api 연결 (댓글 제외) (#587) * feat: api 스팩에 맞춰 수정, 기획안과 차이나는 부분 수정 * feat: community 게시글 생성 api 연결 * feat: api 스팩에 맞춰 수정, 기획안과 차이나는 부분 수정 * feat: community 게시글 생성 api 연결 * feat: 모든 카테고리 조회 페이지 추가 * feat: kpop, qna, lang 페이지 게시글 조회 추가 * fix: 무한 스크롤 안되는 버그 수정 * fix: 상세페이지 api 연결 * fix: page route app router로 변경 * feat : middleware에 community 추가 * feat : 페이지단에서 params 넘겨주기 * feat: 게시글 좋아요 api 연결 * feat: DropDown 컴포넌트 추가 * feat: 게시물 삭제 api 연동 * feat: 생성, 삭제, 좋아요 행위에 조회 쿼리를 모두 reset * feat: footer community tab 주석 해제 * feat: 상세 페이지 더보기 버튼 다국어 적용 * feat: api 스팩에 맞춰 수정, 기획안과 차이나는 부분 수정 * feat: community 게시글 생성 api 연결 * feat: 모든 카테고리 조회 페이지 추가 * feat: kpop, qna, lang 페이지 게시글 조회 추가 * fix: 무한 스크롤 안되는 버그 수정 * fix: 상세페이지 api 연결 * fix: page route app router로 변경 * feat : middleware에 community 추가 * feat : 페이지단에서 params 넘겨주기 * feat: 게시글 좋아요 api 연결 * feat: DropDown 컴포넌트 추가 * feat: 게시물 삭제 api 연동 * feat: 생성, 삭제, 좋아요 행위에 조회 쿼리를 모두 reset * feat: footer community tab 주석 해제 * feat: 상세 페이지 더보기 버튼 다국어 적용 * fix: 컨벤션 오류 수정 * fix: 코드리뷰 수정사항 반영, 좋아요 낙관적 업데이트 * fix : 인자로 category id 넘김 * feat: Community 페이지 Hydration적용 으로 성능 개선 --------- Co-authored-by: Kuesung Park <[email protected]> * Feature : 성능 개선 (#588) * feat : 무한스크롤에서 다음 페이지 불러올 때, 조건 변경 * feat : 그루핑 페이지 react-query Hydration * fix: Hydration에러로 인해 if분기 처리 제거 * fix : 브라우저 단에서 QueryClient 생성하도록 useState 활용 * feat : 평가 탭의 api prefetching * feat : QueryClient 객체 서버단에서 새로 생성 서버 단에서는 QueryClient를 처음 생성할텐데 cache가 필요한 지 모르겠습니다. * feat : Footer에서 NavLink로 교체 * feat : 이미지 placeholder 컴포넌트 구현 * feat : onClick에서 NavLink로 교체 * Revert "feat : 무한스크롤에서 다음 페이지 불러올 때, 조건 변경" This reverts commit 7e78b9f. * fix : group페이지에서도 Hydration적용되도록 queryFn 추가 * Hotfix: 인수 누락 * Feature : 이미지 업로드 에러 해결 (#592) * fix: cancleQueries로 쿼리 취소 후, onSettled에서 항상 데이터 요청 * refactor: 함수명 분명하게 수정 * fix : 이미지 업로드 에러 해결 * refactor : previewImage상태를 useFileUpload훅에서 관리 * Feature : NextJS의 Footer에서 React Native의 TabBar로 교체 (#594) * feat: 로그인 성공 시 RN에 메세지 전송 * feat : 앱이라면 Footer 제거 * feat : Footer Lazy Loading * feat : 각 기기 체크 유틸 함수 * refactor : Footer 공용 컴포넌트로 수정 * fix : getIsApp 유틸 함수 수정 * Feature : 커뮤니티 댓글 기능 추가 (#595) * feat: Community 게시글 댓글 조회 API 연동 * feat: 댓글 작성 API 연동 * feat: 댓글 좋아요 API 연동 * feat: 댓글 삭제 API 연동 * feat: CardHeader가 children을 선택적으로 받을 수 있도록 수정 * feat: 대댓글(Reply) 생성 API 연결 * feat: 대댓글(Reply) 조회 API 연결 * feat: 생성 날짜 포멧 변경 * feat: Avatar에서 국기 이미지를 보여주도록 수정 * feat: 글자 튀어나감 방지 * feat: CommentForm i18n 적용 * refactor: CommentProvider 이름 변경 * refactor: ArticleDetail commentsList -> commentList 수정 * refactor: 경로 수정, button -> submit, form -> onSubmit 수정 * refactor: ArticleDetail CommentSection -> CommentProvider * refactor: CommentList pb-102 -> Spacing 컴포넌트로 수정 * refactor: className + 제거 cn 으로 수정 * refactor: children && 연산 제거 * refactor: CommentForm input -> textarea 수정 * refactor: CardHeader children -> PropsWithChildren수정 --------- Co-authored-by: Kuesung Park <[email protected]> * fix: 대댓글 입력시 CommentForm에 Focus가 되도록 수정 (#597) * Hotfix : 이미지 업로드 이슈 해결 (#598) * Feature : 로그인, 로그아웃 모듈화 (#603) * feat : useLogin 커스텀훅으로 만들기 * feat : useLogout 커스텀훅으로 만들기 * refactor : 타입명 수정 * refactor : 불필요한 코드 줄이기 * refactor : useLogin커스텀훅으로 교체 * feat : useLoginMuation추상화 * feat : 로그인 및 토큰 설정 비동기 처리 * feat : 토큰 제거 후 로그아웃 * feat : RN에서 메시지 수신 커스텀 훅으로 뺴기 * feat : 로그인 시 토큰 전송 * Feature: Broadcast Channel를 사용한 커뮤니티 페이지 Browsing Context 공유 (#600) * Feature : 이미지 업로드 에러 해결 (#592) * fix: cancleQueries로 쿼리 취소 후, onSettled에서 항상 데이터 요청 * refactor: 함수명 분명하게 수정 * fix : 이미지 업로드 에러 해결 * refactor : previewImage상태를 useFileUpload훅에서 관리 * Feature : 성능 개선 (#588) * feat : 무한스크롤에서 다음 페이지 불러올 때, 조건 변경 * feat : 그루핑 페이지 react-query Hydration * fix: Hydration에러로 인해 if분기 처리 제거 * fix : 브라우저 단에서 QueryClient 생성하도록 useState 활용 * feat : 평가 탭의 api prefetching * feat : QueryClient 객체 서버단에서 새로 생성 서버 단에서는 QueryClient를 처음 생성할텐데 cache가 필요한 지 모르겠습니다. * feat : Footer에서 NavLink로 교체 * feat : 이미지 placeholder 컴포넌트 구현 * feat : onClick에서 NavLink로 교체 * Revert "feat : 무한스크롤에서 다음 페이지 불러올 때, 조건 변경" This reverts commit 7e78b9f. * fix : group페이지에서도 Hydration적용되도록 queryFn 추가 * Feature : 이미지 업로드 에러 해결 (#592) * fix: cancleQueries로 쿼리 취소 후, onSettled에서 항상 데이터 요청 * refactor: 함수명 분명하게 수정 * fix : 이미지 업로드 에러 해결 * refactor : previewImage상태를 useFileUpload훅에서 관리 * feat: broadcast-channel 라이브러리 추가 * feat: 커뮤니티 Broadcast Channel 적용 * feat: [email protected]로 추가된 broadcast api 페키지 * fix: build 오류 수정 * fix: 파일 이름 오타 수정 --------- Co-authored-by: Kuesung Park <[email protected]> * Feature : Sentry 설정 (#604) * feat: sentry 초기 세팅 * refactor : 주석 제거 * refactor : 모듈 재설치 * feat : Suspense + ErrorBoundary 컴포넌트 구현 * feat : react-error-boundary 설치 * refactor : RejectedFallback 컴포넌트 제거 * feat : 기존 Suspense를 LocalApiAsyncBoundary로 교체 * refactor : 기존 LocalApiAsyncBoundary에서 LocalErrorSuspenseBoundary로 네이밍 수정 * refactor : error.js 제거 * fix : error.message제거 * fix: 커스텀 ErrorBoundary 내 useEffect, useCallback 훅 제거 * feat : @sentry/utils 버전업 * feat : Suspense에서 LocalErrorSuspenseBoundary로 교체 * refactor : LocalErrorSuspenseBoundary에서 LocalSuspenseErrorBoundary로 네이밍 수정 * feat : Footer Lazy Loading * fix : return문 제거 * feat : yarn 업데이트 * Feature : 모노레포 적용 (#606) * feat : packages/web으로 폴더 묶기 * feat : 루트 workspace 관리 * feat : gitignore 추가 * feat : 의존성 모듈 설치 * refactor : .github폴더 루트로 이동 * fix : 배포 경로 수정 * refactor : husky 루트로 이동 * feat : packages/app 추가 * refactor : 앱 name 수정 * refactor : 형식 변환 * chore : yarn 버전 수정 및 nohoist * feat : node-modules 사용할 수 있도록 설정 * feat : yarn ignore 설정 * feat : 앱 패키지 설치 * feat : 모듈 설치 * refactor : yarn 버전 수정 * feat : yarn 버전 3.6.0 통일 * refactor : web의 .yarnrc 파일 제거 * Feature : 모노 레포 typescript, eslint, prettier 설정 (#609) * feat : typescript, eslint, prettier 설치 및 세팅 * refactor : typescript, prettier, eslint 설정을 루트에서 관리 * fix : typescritp 버전 다운그레이드 * refactor : prettier 설정 루트로 이동 * fix : typescript 버전 5.1.3으로 맞추기 * refactor : typescript 설정 루트에서 상속 * refactor : eslint 설정 루트에서 관리 * feat : baseUrl으로 절대 경로 설정 * fix: yarn web 버전 3.6.4 업그레이드 (#608) * Fix: tailwindcss 의존성 문제 해결 (#612) * fix : CD 설정 * fix : Featuring에서 Feture로 라벨명 수정 * fix : master CD도 루트로 경로 수정 * refactor : app에서 install - 루트에서 type 모듈 관리 * fix: yarn web 버전 3.6.4 업그레이드 (#608) * fix: tailwindcss 설치 수정 * fix: 불필요한 주석 취소 * test: cd test * text: cd test * test: test용 코드 제거 --------- Co-authored-by: Kuesung Park <[email protected]> * Fix: 커뮤니티 QA 사항 반영 (#610) * fix: 커뮤니티 검색 아이콘 제거 * fix: 게시글 제목 1줄 제한 ...표시 * fix: 게시글 작성 취소 메시지 수정 * fix: 게시글 생성 날짜 포멧 수정 * fix: 게시글 상세 제목 길이 수정, content 복사 * fix: comment form을 HydrationProvider하위로 이동 * fix: formatDate함수 컴포넌트 외부로 분리 * Fix/616 monorepo fix (#617) * fix: prettier, eslint 에러 사항 수정 * fix: eslint format fix * fix: 실수로 삭제한 page 추가 * fix : 오타 수정 * refactor : alert 경고 제거 * fix: RN monorepo 환경 설정 * fix: RN android * fix: RN lint 수정 * fix: web lint * fix: externalDir 설정 제거 --------- Co-authored-by: Kuesung Park <[email protected]> * Feature: 커뮤니티 게시글, 댓글, 대댓글 차단 기능 추가 (#615) * feat: 게시글 차단 기능 추가 * feat: 게시글 삭제 확인 모달 추가 * feat: 댓글 대댓글 차단 기능 추가 * fix: 대댓글 차단 버그 해결 * fix: llint 수정, .gitignore .yarn/cache 추가 * Fix: RN 토큰 저장 로직 제거 (#619) * fix: RN Token 저장 제거 * fix: 온보딩 수정, 웹뷰 주석 제거 * fix: ci 경로 수정 * fix: ci 의존성 캐시 변경 * fix: ci 디버깅 * fix: 토큰 * fix : api 요청 전, access token 재발급 --------- Co-authored-by: Kuesung Park <[email protected]> * Chore : 기존 TabBar, Stack 제거 (#622) * chore : Footer를 앱에서도 보여준다 * feat : podfile.lock 버전 관리 * chore : 로그인 시 Stack 교체하는 코드 제거 * Feature : 리팩토링 (#624) * fix : Footer를 서버 컴포넌트로 교체 * refactor : prettier 포맷팅 * refactor : @types/react를 루트에서 관리 * refactor : pnp관련 파일 제거 * refactor : 불필요한 파일 제거 * refactor : 불필요한 파일 제거 * refactor : pnp관련 설정 제거 * refactor : CI과정에서 test coverage 체크 제거 * refactor : gitignore을 축약한다 * fix : 로그인 시, 페이지 라우팅 * fix : 로그아웃 시, 페이지 라우팅 * refactor : 불필요한 코드 제거 * Feature : 리팩토링 (#634) * refactor : export *로 컨벤션을 통일한다 * refactor : cn의 import 컨벤션을 통일한다 * refactor(web) : util함수들의 import 선언을 통일한다 * refactor(app) : util함수들의 export를 묶는다 * refactor(web) : 커스텀 훅의 export 컨벤션을 통일한다 * refactor(app): : 컴포넌트의 export 컨벤션을 통일한다 * refactor(app) : 훅을 묶어서 export한다 * refactor : hook의 import를 통일한다 * refactor(web) : store의 import, export 컨벤션을 통일한다 * refactor : 훅에 'use client' 추가한다 * Refactor : yarn 관련 리팩토링 (#629) * fix : node 버전을 20으로 통일한다 * refactor : pnp관련 모듈을 제거한다 * refactor : gitignore의 중복된 설정 제거 * Revert "Feature : 리팩토링 (#634)" This reverts commit 588cf85. * Fix : 로그인 에러 해결 (#638) * fix : 토큰 설정 로직을 제거한다 * fix : isUserLogin 분기처리를 제거한다 * Fix: Community API 변경사항 반영 문제 해결 (#639) * fix: BroadCastCannel Api 제거 * fix: refetchOnWindowFocus 제거 * feat : 무한 스크롤 로딩화면 구현 * fix: categoryId 파라미터 제거 --------- Co-authored-by: Kuesung Park <[email protected]> * fix: typo --------- Co-authored-by: Kuesung Park <[email protected]>
gloddy-dev · Feb 23, 2024 · e99d679 · e99d679
1 parent d75a51a
commit e99d679
Show file tree

Hide file tree

Showing 21 changed files with 38 additions and 165 deletions.
diff --git a/.gitignore b/.gitignore
@@ -5,7 +5,6 @@
 !.yarn/plugins
 !.yarn/sdks
 !.yarn/versions
-.yarn/cache
 
 # testing
 coverage

diff --git a/.yarn/sdks/integrations.yml b/.yarn/sdks/integrations.yml
diff --git a/.yarn/sdks/typescript/bin/tsc b/.yarn/sdks/typescript/bin/tsc
diff --git a/.yarn/sdks/typescript/bin/tsserver b/.yarn/sdks/typescript/bin/tsserver
diff --git a/packages/app/src/components/OnBoarding.tsx b/packages/app/src/components/OnBoarding.tsx
@@ -1,7 +1,7 @@
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import { useNavigation } from '@react-navigation/native';
-import React, { useEffect, useRef, useState } from 'react';
-import { Alert, Animated, Dimensions, Image, Text, TouchableOpacity, View } from 'react-native';
+import { useEffect, useRef, useState } from 'react';
+import { Animated, Dimensions, Image, Text, TouchableOpacity, View } from 'react-native';
 import { ExpandingDot } from 'react-native-animated-pagination-dots';
 import * as RNLocalize from 'react-native-localize';
 import SplashScreen from 'react-native-splash-screen';
@@ -33,16 +33,10 @@ export default function OnBoarding() {
   const [lang, setlang] = useState(null);
   const preloading = async () => {
     const isUserOnBoardSeen = await AsyncStorage.getItem('onBoarding');
-    const isUserLogin = await AsyncStorage.getItem('isUserLogin');
     if (!isUserOnBoardSeen) return;
-    if (isUserLogin === 'true')
-      navigation.replace('WebViewContainer', {
-        url: `${SOURCE_URL}/grouping`,
-      });
-    else
-      navigation.replace('WebViewContainer', {
-        url: `${SOURCE_URL}/join?step=1`,
-      });
+    navigation.replace('WebViewContainer', {
+      url: `${SOURCE_URL}`,
+    });
   };
 
   useEffect(() => {

diff --git a/packages/web/.nvmrc b/packages/web/.nvmrc
@@ -1 +1 @@
-v17.5.0
+v20.9.0
diff --git a/packages/web/src/apis/auth/mutations.ts b/packages/web/src/apis/auth/mutations.ts
@@ -1,3 +1,5 @@
+import { useMutation } from '@tanstack/react-query';
+
 import {
   LoginResponse,
   SignUpResponse,
@@ -9,21 +11,12 @@ import {
   postSMSVerify,
   postSignUp,
 } from '.';
+
 import useLogin from '@/hooks/token/useLogin';
-import { useMutation } from '@tanstack/react-query';
 
 export const useLoginMutation = () => {
-  const { login } = useLogin();
-
   return useMutation({
     mutationFn: postLogin,
-    onSuccess: async (response: LoginResponse) => {
-      await login({
-        accessToken: response.token.accessToken,
-        refreshToken: response.token.refreshToken,
-        userId: response.userId,
-      });
-    },
   });
 };
 

diff --git a/packages/web/src/apis/community/mutations.tsx b/packages/web/src/apis/community/mutations.tsx
@@ -1,3 +1,5 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
 import {
   deleteCommunityCommentLike,
   postCommunityArticleLike,
@@ -9,44 +11,21 @@ import {
 } from '@/apis/community/apis';
 import { Keys } from '@/apis/community/keys';
 import { CommunityArticle } from '@/apis/community/type';
-import { CommunityChannelMessage } from '@/app/[lng]/(main)/community/components/ContentSection.client';
 import useAppRouter from '@/hooks/useAppRouter';
-import { useBroadcastChannel } from '@/hooks/useBroadcast';
-import { getIsAndroid } from '@/utils/getIsAndroid';
-import { getIsIOS } from '@/utils/getIsIOS';
-import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { useGetCommunityArticleDetail } from './queries';
 
 export const usePostCreateCommunityArticle = () => {
-  const queryClient = useQueryClient();
   const { back } = useAppRouter();
-  const { postMessage } = useBroadcastChannel<CommunityChannelMessage>('community');
-
-  const isIOS = getIsIOS();
-  const isAndroid = getIsAndroid();
 
   return useMutation({
     mutationFn: postCreateCommunityArticle,
-    onSuccess: (data, variables) => {
-      const { categoryId } = variables;
-
-      if (isIOS || isAndroid) {
-        postMessage({ categoryId: Number(categoryId) });
-      } else {
-        queryClient.invalidateQueries({ queryKey: Keys.getCommunityArticles(0) }); // 전체 카테고리
-        queryClient.invalidateQueries({ queryKey: Keys.getCommunityArticles(categoryId) }); // 작성한 게시글 카테고리
-      }
+    onSuccess: () => {
       back();
     },
   });
 };
 
-export const usePostCommunityArticleLike = (articleId: number, categoryId: number) => {
+export const usePostCommunityArticleLike = (articleId: number) => {
   const queryClient = useQueryClient();
-  const { postMessage } = useBroadcastChannel<CommunityChannelMessage>('community');
-
-  const isIOS = getIsIOS();
-  const isAndroid = getIsAndroid();
 
   return useMutation({
     mutationFn: () => postCommunityArticleLike(articleId),
@@ -76,56 +55,28 @@ export const usePostCommunityArticleLike = (articleId: number, categoryId: numbe
       } else throw new Error('No previous Data');
     },
     onSettled: () => {
-      if (isIOS || isAndroid) {
-        postMessage({ categoryId });
-      } else {
-        queryClient.invalidateQueries({ queryKey: Keys.getCommunityArticles(0) });
-        queryClient.invalidateQueries({ queryKey: Keys.getCommunityArticles(categoryId) });
-      }
       queryClient.invalidateQueries({ queryKey: Keys.getCommunityArticleDetail(articleId) });
     },
   });
 };
 
-export const usePostDeleteCommunityArticle = (articleId: number, categoryId: number) => {
-  const queryClient = useQueryClient();
+export const usePostDeleteCommunityArticle = (articleId: number) => {
   const { back } = useAppRouter();
-  const { postMessage } = useBroadcastChannel<CommunityChannelMessage>('community');
-
-  const isIOS = getIsIOS();
-  const isAndroid = getIsAndroid();
 
   return useMutation({
     mutationFn: () => postDeleteCommunityArticle(articleId),
     onSuccess: () => {
-      if (isIOS || isAndroid) {
-        postMessage({ categoryId });
-      } else {
-        queryClient.invalidateQueries({ queryKey: Keys.getCommunityArticles(categoryId) });
-        queryClient.invalidateQueries({ queryKey: Keys.getCommunityArticles(0) });
-      }
       back();
     },
   });
 };
 
-export const usePostCreateComment = (articleId: number, categoryId: number) => {
+export const usePostCreateComment = (articleId: number) => {
   const queryClient = useQueryClient();
-  const { postMessage } = useBroadcastChannel<CommunityChannelMessage>('community');
-
-  const isIOS = getIsIOS();
-  const isAndroid = getIsAndroid();
 
   return useMutation({
     mutationFn: postCreateCommunityComment,
     onSuccess: () => {
-      if (isIOS || isAndroid) {
-        postMessage({ categoryId });
-      } else {
-        queryClient.invalidateQueries({ queryKey: Keys.getCommunityArticles(categoryId) });
-        queryClient.invalidateQueries({ queryKey: Keys.getCommunityArticles(0) });
-      }
-      queryClient.invalidateQueries({ queryKey: Keys.getCommunityArticleDetail(articleId) });
       queryClient.invalidateQueries({ queryKey: Keys.getCommunityComments(articleId) });
     },
   });
@@ -168,17 +119,10 @@ export const useDeleteCommunityComment = (
   categoryId: number
 ) => {
   const queryClient = useQueryClient();
-  const { postMessage } = useBroadcastChannel<CommunityChannelMessage>('community');
-
-  const isIOS = getIsIOS();
-  const isAndroid = getIsAndroid();
 
   return useMutation({
     mutationFn: () => deleteCommunityCommentLike(articleId, commentId),
     onSuccess: () => {
-      if (isIOS || isAndroid) {
-        postMessage({ categoryId });
-      }
       queryClient.invalidateQueries({ queryKey: Keys.getCommunityComments(articleId) });
     },
   });

diff --git a/packages/web/src/apis/community/queries.ts b/packages/web/src/apis/community/queries.ts
@@ -1,11 +1,12 @@
+import { useSuspenseInfiniteQuery, useSuspenseQuery } from '@tanstack/react-query';
+
 import {
   getCommunityArticleDetail,
   getCommunityArticles,
   getCommunityComments,
   getCommunityReply,
 } from '@/apis/community/apis';
 import { Keys } from '@/apis/community/keys';
-import { useSuspenseInfiniteQuery, useSuspenseQuery } from '@tanstack/react-query';
 
 export const useGetCommunityArticles = (categoryId: number) => {
   const { data, ...rest } = useSuspenseInfiniteQuery({

diff --git a/packages/web/src/apis/config/privateApi.ts b/packages/web/src/apis/config/privateApi.ts
@@ -20,15 +20,7 @@ privateApi.interceptors.request.use(
   async (config: InternalAxiosRequestConfig) => {
     try {
       const { accessToken, refreshToken } = await getTokenFromCookie();
-      if (!accessToken || !refreshToken) return config;
-      const {
-        token: { accessToken: reIssuedAccessToken },
-      } = await postReissue(
-        { accessToken, refreshToken },
-        { headers: { 'X-AUTH-TOKEN': accessToken } }
-      );
-
-      config.headers['X-AUTH-TOKEN'] = reIssuedAccessToken;
+      config.headers['X-AUTH-TOKEN'] = accessToken;
       return config;
     } catch (error) {
       return Promise.reject(error);

diff --git a/packages/web/src/app/[lng]/(main)/community/[articleId]/components/ArticleDetailHeader.tsx b/packages/web/src/app/[lng]/(main)/community/[articleId]/components/ArticleDetailHeader.tsx
@@ -48,10 +48,7 @@ function IconButtonAction() {
   const { back } = useAppRouter();
   const { data: articleData } = useGetCommunityArticleDetail(articleId);
   const { open: openModal, exit: closeModal } = useModal();
-  const { mutate: mutateDelete } = usePostDeleteCommunityArticle(
-    articleId,
-    articleData.data.article.category.id
-  );
+  const { mutate: mutateDelete } = usePostDeleteCommunityArticle(articleId);
 
   const handleBlockArticle = () => {
     openModal(() => (

diff --git a/packages/web/src/app/[lng]/(main)/community/[articleId]/components/ArticleItem.tsx b/packages/web/src/app/[lng]/(main)/community/[articleId]/components/ArticleItem.tsx
@@ -44,7 +44,7 @@ export default function ArticleItem({ article }: ArticleItemProps) {
     reliabilityLevel,
   } = article.writer;
 
-  const { mutate: mutateLike } = usePostCommunityArticleLike(articleId, category.id);
+  const { mutate: mutateLike } = usePostCommunityArticleLike(articleId);
 
   const handleLikeClick = () => {
     mutateLike();

diff --git a/packages/web/src/app/[lng]/(main)/community/[articleId]/components/CommentForm.tsx b/packages/web/src/app/[lng]/(main)/community/[articleId]/components/CommentForm.tsx
@@ -24,8 +24,7 @@ export default function CommentForm() {
   const { t } = useTranslation('community');
   const { articleId } = useNumberParams<['articleId']>();
   const { commentType, commentId, setCommentType } = useCommentContext();
-  const categoryId = useGetCommunityArticleDetail(articleId).data.data.article.category.id;
-  const { mutate: mutateComment } = usePostCreateComment(articleId, categoryId);
+  const { mutate: mutateComment } = usePostCreateComment(articleId);
   const { mutate: mutateReply } = useCreateCommunityReply(articleId);
   const hookForm = useForm<CreateCommentRequest>({
     mode: 'onChange',

diff --git a/packages/web/src/app/[lng]/(main)/community/[articleId]/page.tsx b/packages/web/src/app/[lng]/(main)/community/[articleId]/page.tsx
@@ -1,7 +1,6 @@
 import { Keys, getCommunityArticleDetail } from '@/apis/community';
 import ArticleDetail from '@/app/[lng]/(main)/community/[articleId]/components/ArticleDetail';
 import ArticleDetailHeader from '@/app/[lng]/(main)/community/[articleId]/components/ArticleDetailHeader';
-import CommentForm from '@/app/[lng]/(main)/community/[articleId]/components/CommentForm';
 import { LocalSuspenseErrorBoundary } from '@/components/ErrorBoundary';
 import { HydrationProvider } from '@/components/Provider';
 import { Spacing } from '@/components/Spacing';

diff --git a/packages/web/src/app/[lng]/(main)/community/components/AllContent.client.tsx b/packages/web/src/app/[lng]/(main)/community/components/AllContent.client.tsx
@@ -7,12 +7,13 @@ import { useGetCommunityArticles } from '@/apis/community/queries';
 import ArticleItem from '@/app/[lng]/(main)/community/components/ArticleItem.client';
 import Empty from '@/app/[lng]/(main)/community/components/Empty';
 import { ItemList } from '@/components/List';
+import { Loading } from '@/components/Loading';
 import { useBlockStore } from '@/store/useBlockStore';
 
 export default function AllContent() {
   const { ref, inView } = useInView();
   const { blockCommunityArticleIds } = useBlockStore();
-  const { data: articleList, fetchNextPage } = useGetCommunityArticles(0);
+  const { data: articleList, fetchNextPage, isFetching } = useGetCommunityArticles(0);
 
   useEffect(() => {
     if (inView) fetchNextPage();
@@ -32,6 +33,7 @@ export default function AllContent() {
         renderEmpty={() => <Empty />}
       />
       <div ref={ref} />
+      {isFetching && <Loading className="h-10" />}
     </>
   );
 }
diff --git a/packages/web/src/app/[lng]/(main)/community/components/ContentSection.client.tsx b/packages/web/src/app/[lng]/(main)/community/components/ContentSection.client.tsx
@@ -1,30 +1,21 @@
 'use client';
 
-import { useQueryClient } from '@tanstack/react-query';
 import { Suspense } from 'react';
 
 import AllContent from './AllContent.client';
-import CreateArticleButton from './CreateArticleButton';
 import KpopContent from './KpopContent';
 import LanguageContent from './LanguageContent.client';
 import QuestionContent from './QuestionContent.client';
 
-import { Keys } from '@/apis/community';
 import { useTranslation } from '@/app/i18n/client';
 import { Tabs } from '@/components/Tabs';
-import { useBroadcastChannel } from '@/hooks/useBroadcast';
 
 export interface CommunityChannelMessage {
   categoryId: number;
 }
 
 export default function ContentSection() {
   const { t } = useTranslation('community');
-  const queryClient = useQueryClient();
-  const { postMessage } = useBroadcastChannel<CommunityChannelMessage>('community', (message) => {
-    queryClient.invalidateQueries({ queryKey: Keys.getCommunityArticles(0) });
-    queryClient.invalidateQueries({ queryKey: Keys.getCommunityArticles(message.categoryId) });
-  });
 
   return (
     <Tabs>

diff --git a/packages/web/src/app/[lng]/(main)/community/components/KpopContent.tsx b/packages/web/src/app/[lng]/(main)/community/components/KpopContent.tsx
@@ -8,12 +8,13 @@ import Empty from './Empty';
 
 import { useGetCommunityArticles } from '@/apis/community/queries';
 import { ItemList } from '@/components/List';
+import { Loading } from '@/components/Loading';
 import { useBlockStore } from '@/store/useBlockStore';
 
 export default function KpopContent() {
   const { ref, inView } = useInView();
   const { blockCommunityArticleIds } = useBlockStore();
-  const { data: articleList, fetchNextPage } = useGetCommunityArticles(1);
+  const { data: articleList, fetchNextPage, isFetching } = useGetCommunityArticles(1);
 
   useEffect(() => {
     if (inView) fetchNextPage();
@@ -33,6 +34,7 @@ export default function KpopContent() {
         renderEmpty={() => <Empty />}
       />
       <div ref={ref} />
+      {isFetching && <Loading className="h-10" />}
     </>
   );
 }