✨[Feat] SSR(서버 사이드 렌더링) 방식으로 초기 데이터를 가져오기 #308

.github/workflows/ci.yml

@@ -25,6 +25,9 @@ jobs:
         with:
           node-version: ${{ matrix.node-version }}
 
+      - name: Set environment variables
+        run: echo "NEXT_PUBLIC_API_URL=${{ secrets.NEXT_PUBLIC_API_URL }}" >> .env
+
       - name: Install dependencies
         run: npm install
 
@@ -35,6 +38,8 @@ jobs:
         run: npm test
 
       - name: Build Next.js app
+        env:
+          NEXT_PUBLIC_API_URL: ${{ secrets.NEXT_PUBLIC_API_URL }}
         run: npm run build
 
       - name: Build Storybook

README.md

@@ -1,36 +1,113 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+<div align="center">
+<img width="652"  alt="image" src="https://github.com/user-attachments/assets/ddde3e13-b5d5-4dc0-880b-29dec240bdd1" />
 
-## Getting Started
+> 📖 당신의 독서 생활에 새로운 페이지를 열어보세요!
+<br/> 새로운 사람들과 함께 읽고 나누는 특별한 독서 경험, **북코**가 함께합니다.
+> <br/>
+<br/>[![Bookco](https://img.shields.io/badge/BOOKCO.SITE-00a991?style=for-the-badge)](https://bookco.vercel.app/)
+</div
 
-First, run the development server:
+<br/>
+<br/>
+<br/>
 
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
-```
+## 🎯 Bookco에서 할 수 있는 일
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+- **👥 독서 모임**
+
+    비슷한 취향을 가진 사람들과 함께 책을 읽고 이야기를 나눌 수 있습니다.
+    - 정해진 책으로 독서 모임에 참여하거나, 직접 모임을 만들 수 있습니다.
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+- 💬 **채팅하기**
+
+    다른 북코 유저들과 채팅 기능을 통해 소통할 수 있습니다.
+    - 모임의 호스트나 교환하고 싶은 책을 가진 유저와 대화를 나눌 수 있습니다.
+
+- **📚 교환하기 (추후 개발 예정..)**
+
+    안 보게 된 책을 등록하면, 다른 사람의 책과 바꿔 읽을 수 있습니다.
+    - 집에서 방치되던 책을 다른 유저와 공유할 수 있습니다.
 
-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+<br/>
+<br/>
 
-## Learn More
+## 📚 서비스 소개
 
-To learn more about Next.js, take a look at the following resources:
+<img width="1328" alt="image" src="https://github.com/user-attachments/assets/25ef2ed8-3cef-4b7a-b897-2f95324de9d9" />
+<img width="1325" alt="image" src="https://github.com/user-attachments/assets/3f812c80-5b20-45ac-8c21-86bb87e76856" />
+<img width="1329" alt="image" src="https://github.com/user-attachments/assets/25d9a7f6-8419-4f0b-86d3-f3d11ac38afa" />
+<img width="1327" alt="image" src="https://github.com/user-attachments/assets/3a293a66-b502-4be0-a6d8-b02ed88f233f" />
+<img width="1325" alt="image" src="https://github.com/user-attachments/assets/4b90f89f-b3d6-4331-8429-4a2280879f58" />
+<img width="1324" alt="image" src="https://github.com/user-attachments/assets/4257b49f-c552-4963-866f-7c3338ab307b" />
+<img width="1323" alt="image" src="https://github.com/user-attachments/assets/545fc19d-7ed6-4848-afb0-7452563bf8fb" />
+<img width="1325" alt="image" src="https://github.com/user-attachments/assets/c751accd-74ec-4258-b285-5a976562759e" />
+<img width="1326" alt="image" src="https://github.com/user-attachments/assets/f7824ee7-864b-4671-a889-d7181701ee9e" />
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+<br/>
+<br/>
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+## 🛠️ 기술스택
 
-## Deploy on Vercel
+### 💻 Core
+![Next.js](https://img.shields.io/badge/Next.js-000000?style=for-the-badge&logo=next.js&logoColor=white)
+![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?style=for-the-badge&logo=typescript&logoColor=white)
+
+### 🔄 상태 관리
+![TanStack Query](https://img.shields.io/badge/TanStack_Query-FF4154?style=for-the-badge&logo=reactquery&logoColor=white)
+![Zustand](https://img.shields.io/badge/Zustand-000000?style=for-the-badge)
+
+### 🌐 통신
+![Axios](https://img.shields.io/badge/Axios-5A29E4?style=for-the-badge&logo=axios&logoColor=white)
+![SockJS](https://img.shields.io/badge/SockJS-000000?style=for-the-badge&logo=socket.io&logoColor=white)
+![STOMP](https://img.shields.io/badge/STOMP-000000?style=for-the-badge)
+
+### 🎨 스타일링
+![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-06B6D4?style=for-the-badge&logo=tailwindcss&logoColor=white)
+
+### ⚙️ 유틸리티
+![Zod](https://img.shields.io/badge/Zod-3E67B1?style=for-the-badge&logo=zod&logoColor=white)
+
+### 🧪 테스팅
+![Jest](https://img.shields.io/badge/Jest-C21325?style=for-the-badge&logo=jest&logoColor=white)
+![React Testing Library](https://img.shields.io/badge/React_Testing_Library-E33332?style=for-the-badge&logo=testing-library&logoColor=white)
+![Storybook](https://img.shields.io/badge/Storybook-FF4785?style=for-the-badge&logo=storybook&logoColor=white)
+
+### 📋 코드 품질
+![ESLint](https://img.shields.io/badge/ESLint-4B32C3?style=for-the-badge&logo=eslint&logoColor=white)
+![Prettier](https://img.shields.io/badge/Prettier-F7B93E?style=for-the-badge&logo=prettier&logoColor=black)
+![Husky](https://img.shields.io/badge/Husky-000000?style=for-the-badge)
+
+<br/>
+<br/>
+
+## 🤝 팀 협업 방식, 브랜치 전략
+
+### ✅ **PR 리뷰 방식**
+- **2명 Approve** 방식
+- PR 확인 시간 고정: `09:00`, `13:00`, `18:00`
+- **Pn 룰**과 **Dn 룰** 적용
+- **데일리 스크럼** 진행
+
+### ✅ **브랜치 전략**
+- **GitHub Flow** 적용
+    - `feature` → `develop` → `main`
+    - `hotfix` 는 Main에서 급하게 수정할 일 있을 때 사용
+
+### ✅ **CI/CD 전략**
+- **Husky**를 통한 코드 품질 관리
+    - 커밋시 린트 검사
+- **디스코드 웹훅 연결**로 실시간 알림
+- PR 작성시 Lint 검사, test 코드 실행, 스토리북 빌드, 프로덕션 빌드 실행하여 검사
+
+<br/>
+<br/>
+
+## 👥 팀원 구성
+
+|FE|FE|FE|FE|
+|:---:|:---:|:---:|:---:|
+|<img src="https://avatars.githubusercontent.com/u/108677235?v=4" width="150"/>|<img src="https://avatars.githubusercontent.com/u/97824352?v=4" width="150"/>|<img src="https://avatars.githubusercontent.com/u/104830526?v=4" width="150"/>|<img src="https://avatars.githubusercontent.com/u/32586926?v=4" width="150"/>|
+|[김선구](https://github.com/haegu97)|[김민경](https://github.com/wynter24)|[신선](https://github.com/sunnwave)|[김정호](https://github.com/cloud0406)|
+<br>
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

jest.config.js

@@ -11,6 +11,9 @@ const config = {
   coverageProvider: 'v8',
   testEnvironment: 'jsdom',
   // setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'],
+  moduleNameMapper: {
+    '^@/(.*)$': '<rootDir>/src/$1',
+  },
 };
 
 // createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async

src/api/auth/react-query/customHooks.ts

@@ -1,5 +1,6 @@
 import { useMutation } from '@tanstack/react-query';
 import { showToast } from '@/components/toast/toast';
+import { TOAST_MESSAGES } from '@/constants/messages/toast';
 import { authClientAPI } from '../authClientAPI';
 import { getUserInfo } from '@/features/auth/api/auth';
 
@@ -9,10 +10,16 @@ export function useEditInfoMutation() {
     mutationFn: (formData: FormData) => authClientAPI.editInfo(formData),
     onSuccess: () => {
       getUserInfo();
-      showToast({ message: '프로필 수정이 완료되었습니다.', type: 'success' });
+      showToast({
+        message: TOAST_MESSAGES.SUCCESS.PROFILE_EDIT,
+        type: 'success',
+      });
     },
     onError: (error) => {
-      showToast({ message: '프로필 수정을 실패하였습니다', type: 'error' });
+      showToast({
+        message: TOAST_MESSAGES.ERROR.PROFILE_EDIT_FAILED,
+        type: 'error',
+      });
       console.error(error);
     },
   });

src/api/book-club/react-query/customHooks.ts

@@ -1,6 +1,7 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { bookClubs } from './queries';
 import { showToast } from '@/components/toast/toast';
+import { TOAST_MESSAGES } from '@/constants/messages/toast';
 import {
   bookClubLikeAPI,
   bookClubMainAPI,
@@ -10,6 +11,7 @@ import {
 import { WriteReviewParams } from '../types';
 import { AxiosError } from 'axios';
 import { likeOnError, likeOnMutate } from './likeOptimisticUpdate';
+import { BookClubParams } from '@/types/bookclubs';
 
 export function useBookClubCreateMutation() {
   const queryClient = useQueryClient();
@@ -25,7 +27,10 @@ export function useBookClubCreateMutation() {
       });
     },
     onError: () => {
-      showToast({ message: '북클럽 생성에 실패했습니다.', type: 'error' });
+      showToast({
+        message: TOAST_MESSAGES.ERROR.CLUB_CREATE_FAILED,
+        type: 'error',
+      });
     },
   });
 }
@@ -74,12 +79,18 @@ export function useWriteReview() {
       queryClient.invalidateQueries({
         queryKey: bookClubs.my()._ctx.reviews().queryKey,
       });
-      showToast({ message: '리뷰 작성을 완료하였습니다', type: 'success' });
+      showToast({
+        message: TOAST_MESSAGES.SUCCESS.REVIEW_CREATE,
+        type: 'success',
+      });
     },
     onError: (error) => {
       console.error(error);
 
-      showToast({ message: '리뷰 작성을 실패하였습니다.', type: 'error' });
+      showToast({
+        message: TOAST_MESSAGES.ERROR.REVIEW_CREATE_FAILED,
+        type: 'error',
+      });
     },
   });
 }
@@ -103,21 +114,22 @@ export function useCancelBookClub() {
   });
 }
 
-export function useLikeBookClub() {
+export function useLikeBookClub(filter: BookClubParams) {
   const queryClient = useQueryClient();
 
   return useMutation<void, AxiosError<{ message: string }>, number>({
     mutationFn: (id: number) => bookClubLikeAPI.like(id),
 
     onMutate: async (id) => {
-      return likeOnMutate(queryClient, id, true);
+      return likeOnMutate(queryClient, id, true, filter);
     },
     //TODO: 로직 확인 후 변경 필요
-    onSuccess: () => {
-      queryClient.invalidateQueries({
-        queryKey: bookClubs._def,
-      });
-    },
+    // onSuccess: () => {
+    //   queryClient.invalidateQueries({
+    //     queryKey: ['bookClubs', 'list', DEFAULT_FILTERS],
+    //   });
+    //   // console.log(bookClubs._def)
+    // },
 
     onError: (_error, id, context) => {
       if (context) {
@@ -127,21 +139,21 @@ export function useLikeBookClub() {
   });
 }
 
-export function useUnLikeBookClub() {
+export function useUnLikeBookClub(filter: BookClubParams) {
   const queryClient = useQueryClient();
 
   return useMutation<void, AxiosError<{ message: string }>, number>({
     mutationFn: (id: number) => bookClubLikeAPI.unlike(id),
 
     onMutate: async (id) => {
-      return likeOnMutate(queryClient, id, false);
+      return likeOnMutate(queryClient, id, false, filter);
     },
     //TODO: 로직 확인 후 변경 필요
-    onSuccess: () => {
-      queryClient.invalidateQueries({
-        queryKey: bookClubs._def,
-      });
-    },
+    // onSuccess: () => {
+    //   queryClient.invalidateQueries({
+    //     queryKey: bookClubs._def,
+    //   });
+    // },
 
     onError: (_error, id, context) => {
       if (context) {

src/api/book-club/react-query/likeOptimisticUpdate.ts

@@ -1,45 +1,45 @@
 import { QueryClient } from '@tanstack/react-query';
-import { BookClub } from '@/types/bookclubs';
+import { BookClub, BookClubParams } from '@/types/bookclubs';
 import { bookClubs } from './queries';
 import { DEFAULT_FILTERS } from '@/lib/constants/filters';
 
 export const likeOnMutate = async (
   queryClient: QueryClient,
   id: number,
   isLiked: boolean,
+  filter?: BookClubParams,
 ) => {
-  const listQueryKey = bookClubs.list(DEFAULT_FILTERS).queryKey;
+  const listQueryKey = ['bookClubs', 'list', filter || DEFAULT_FILTERS];
   const detailQueryKey = bookClubs.detail(id).queryKey;
 
-  const previousBookClubs = queryClient.getQueryData<{
-    bookClubs: BookClub[];
-  }>(listQueryKey);
+  await queryClient.cancelQueries({ queryKey: listQueryKey });
+  await queryClient.cancelQueries({ queryKey: detailQueryKey });
+
+  // console.log('🔍 수정된 listQueryKey:', listQueryKey);
+  // console.log('🔍 현재 활성화된 모든 쿼리키:', queryClient.getQueriesData({}));
 
+  const previousBookClubs = queryClient.getQueryData<{ bookClubs: BookClub[] }>(
+    listQueryKey,
+  );
   const previousDetail = queryClient.getQueryData<BookClub>(detailQueryKey);
 
-  // 목록 캐시 업데이트
+  // if (!previousBookClubs) {
+  //   console.warn('⚠️ 캐시된 데이터가 없습니다. queryKey 확인 필요:', listQueryKey);
+  //   queryClient.invalidateQueries({ queryKey: listQueryKey });
+  // }
+
   if (previousBookClubs) {
-    queryClient.setQueryData(listQueryKey, {
-      ...previousBookClubs,
-      bookClubs: previousBookClubs.bookClubs.map((club) =>
+    queryClient.setQueryData(listQueryKey, (old: any) =>
+      old?.map((club: BookClub) =>
         club.id === id ? { ...club, isLiked } : club,
       ),
-    });
+    );
   }
 
-  // 상세 캐시 업데이트
   if (previousDetail) {
-    queryClient.setQueryData(detailQueryKey, {
-      ...previousDetail,
-      isLiked,
-    });
+    queryClient.setQueryData(detailQueryKey, { ...previousDetail, isLiked });
   }
 
-  //TODO: 로직 확인 후 변경 필요
-  queryClient.invalidateQueries({
-    queryKey: bookClubs._def,
-  });
-
   return { previousBookClubs, previousDetail };
 };
 

src/app/bookclub/page.tsx

@@ -1,5 +1,23 @@
 import BookClubMainPage from '@/features/bookclub/components/BookClubMainPage';
+import { DEFAULT_FILTERS } from '@/lib/constants/filters';
+import { fetchBookClubs } from '@/lib/utils/fetchBookClubs';
+import {
+  dehydrate,
+  HydrationBoundary,
+  QueryClient,
+} from '@tanstack/react-query';
 
-export default function Home() {
-  return <BookClubMainPage />;
+export default async function Home() {
+  const queryClient = new QueryClient();
+
+  await queryClient.prefetchQuery({
+    queryKey: ['bookClubs', 'list', DEFAULT_FILTERS],
+    queryFn: () => fetchBookClubs(DEFAULT_FILTERS),
+  });
+
+  return (
+    <HydrationBoundary state={dehydrate(queryClient)}>
+      <BookClubMainPage />
+    </HydrationBoundary>
+  );
 }