develp branch 작업내용 머지 : develop -> main

src/api/record/createAiReview.ts

@@ -0,0 +1,31 @@
+import { apiClient } from '../index';
+import type { CreateAiReviewData, ApiResponse } from '@/types/record';
+
+// API 응답 타입
+export type CreateAiReviewResponse = ApiResponse<CreateAiReviewData>;
+
+// AI 독서감상문 생성 API 함수
+export const createAiReview = async (roomId: number) => {
+  const response = await apiClient.post<CreateAiReviewResponse>(
+    `/rooms/${roomId}/record/ai-review`,
+  );
+  return response.data;
+};
+
+/*
+사용 예시:
+try {
+  const result = await createAiReview(1);
+  if (result.isSuccess) {
+    console.log("생성된 독서감상문:", result.data.content);
+    console.log("잔여 이용 횟수:", result.data.count);
+    // 성공 처리 로직
+  } else {
+    console.error("AI 독서감상문 생성 실패:", result.message);
+    // 실패 처리 로직
+  }
+} catch (error) {
+  console.error("API 호출 오류:", error);
+  // 에러 처리 로직
+}
+*/

src/api/record/getAiUsage.ts

@@ -0,0 +1,31 @@
+import { apiClient } from '../index';
+import type { AiUsageData, ApiResponse } from '@/types/record';
+
+// API 응답 타입
+export type GetAiUsageResponse = ApiResponse<AiUsageData>;
+
+// AI 이용 횟수 조회 API 함수
+export const getAiUsage = async (roomId: number) => {
+  const response = await apiClient.get<GetAiUsageResponse>(
+    `/rooms/${roomId}/users/ai-usage`,
+  );
+  return response.data;
+};
+
+/*
+사용 예시:
+try {
+  const result = await getAiUsage(1);
+  if (result.isSuccess) {
+    console.log("AI 독서감상문 작성 가능 횟수:", result.data.recordReviewCount);
+    console.log("기록 작성 횟수:", result.data.recordCount);
+    // 성공 처리 로직
+  } else {
+    console.error("AI 이용 횟수 조회 실패:", result.message);
+    // 실패 처리 로직
+  }
+} catch (error) {
+  console.error("API 호출 오류:", error);
+  // 에러 처리 로직
+}
+*/

src/api/record/index.ts

@@ -3,4 +3,6 @@ export * from './createVote';
 export * from './deleteRecord';
 export * from './deleteVote';
 export * from './postVote';
-export * from './pinRecordToFeed';
+export * from './pinRecordToFeed';
+export * from './createAiReview';
+export * from './getAiUsage';

src/components/common/BookSearchBottomSheet/BookSearchBottomSheet.tsx

@@ -15,9 +15,10 @@ interface BookSearchBottomSheetProps {
   isOpen: boolean;
   onClose: () => void;
   onSelectBook: (book: Book) => void;
+  showGroupTab?: boolean;
 }
 
-const BookSearchBottomSheet = ({ isOpen, onClose, onSelectBook }: BookSearchBottomSheetProps) => {
+const BookSearchBottomSheet = ({ isOpen, onClose, onSelectBook, showGroupTab = true }: BookSearchBottomSheetProps) => {
   const {
     searchQuery,
     filteredBooks,
@@ -37,7 +38,7 @@ const BookSearchBottomSheet = ({ isOpen, onClose, onSelectBook }: BookSearchBott
     loadMoreSearchResults,
     loadMoreSavedBooks,
     loadMoreGroupBooks,
-  } = useBookSearch();
+  } = useBookSearch(showGroupTab);
 
   // 컴포넌트가 열릴 때 초기 데이터 로드
   useEffect(() => {
@@ -109,7 +110,7 @@ const BookSearchBottomSheet = ({ isOpen, onClose, onSelectBook }: BookSearchBott
           />
 
           {/* 탭 영역 */}
-          {showTabs && <BookSearchTabs activeTab={activeTab} onTabChange={handleTabChange} />}
+          {showTabs && <BookSearchTabs activeTab={activeTab} onTabChange={handleTabChange} showGroupTab={showGroupTab} />}
 
           {/* 책 목록 영역 */}
           <BookListContainer>

src/components/common/BookSearchBottomSheet/BookSearchTabs.tsx

@@ -5,17 +5,20 @@ export type TabType = 'saved' | 'group';
 interface BookSearchTabsProps {
   activeTab: TabType;
   onTabChange: (tab: TabType) => void;
+  showGroupTab?: boolean;
 }
 
-const BookSearchTabs = ({ activeTab, onTabChange }: BookSearchTabsProps) => {
+const BookSearchTabs = ({ activeTab, onTabChange, showGroupTab = true }: BookSearchTabsProps) => {
   return (
     <TabContainer>
       <Tab active={activeTab === 'saved'} onClick={() => onTabChange('saved')}>
         저장한 책
       </Tab>
-      <Tab active={activeTab === 'group'} onClick={() => onTabChange('group')}>
-        모임 책
-      </Tab>
+      {showGroupTab && (
+        <Tab active={activeTab === 'group'} onClick={() => onTabChange('group')}>
+          모임 책
+        </Tab>
+      )}
     </TabContainer>
   );
 };

src/components/common/BookSearchBottomSheet/useBookSearch.ts

@@ -4,7 +4,7 @@ import { getSearchBooks, convertToSearchedBooks, type SearchedBook } from '@/api
 import type { Book } from './BookList';
 import type { TabType } from './BookSearchTabs';
 
-export const useBookSearch = () => {
+export const useBookSearch = (showGroupTab: boolean = true) => {
   const [searchQuery, setSearchQuery] = useState('');
   const [filteredBooks, setFilteredBooks] = useState<Book[]>([]);
   const [activeTab, setActiveTab] = useState<TabType>('saved');
@@ -17,7 +17,7 @@ export const useBookSearch = () => {
   const [currentPage, setCurrentPage] = useState(1);
   const [hasNextPage, setHasNextPage] = useState(false);
   const [isLoadingMore, setIsLoadingMore] = useState(false);
-  
+
   // 저장한 책/모임 책 무한 스크롤 관련 상태
   const [savedBooksCursor, setSavedBooksCursor] = useState<string | null>(null);
   const [groupBooksCursor, setGroupBooksCursor] = useState<string | null>(null);
@@ -185,7 +185,7 @@ export const useBookSearch = () => {
     if (isLoadingMoreSavedBooks || !hasSavedBooksNext) {
       return;
     }
-    
+
     await fetchSavedBooks(true);
   };
 
@@ -194,7 +194,7 @@ export const useBookSearch = () => {
     if (isLoadingMoreGroupBooks || !hasGroupBooksNext) {
       return;
     }
-    
+
     await fetchGroupBooks(true);
   };
 
@@ -251,7 +251,7 @@ export const useBookSearch = () => {
   const loadInitialData = () => {
     if (activeTab === 'saved' && savedBooks.length === 0) {
       fetchSavedBooks();
-    } else if (activeTab === 'group' && groupBooks.length === 0) {
+    } else if (activeTab === 'group' && groupBooks.length === 0 && showGroupTab) {
       fetchGroupBooks();
     }
   };
@@ -262,7 +262,7 @@ export const useBookSearch = () => {
   const hasBooks = isSearchMode ? searchResults.length > 0 : currentTabBooks.length > 0;
   const showEmptyState = !isLoading && !error && !hasBooks;
   const showTabs = !isSearchMode; // 검색 모드가 아닐 때는 항상 탭 표시
-  
+
   // 현재 탭의 무한 스크롤 상태
   const currentTabHasNext = activeTab === 'saved' ? hasSavedBooksNext : hasGroupBooksNext;
   const currentTabIsLoadingMore = activeTab === 'saved' ? isLoadingMoreSavedBooks : isLoadingMoreGroupBooks;

src/components/common/MainHeader.tsx

@@ -1,6 +1,5 @@
 import { useEffect, useState } from 'react';
 import headerLogo from '../../assets/header/header-logo.svg';
-import groupDoneLogo from '../../assets/header/group-done.svg';
 import findUserLogo from '../../assets/header/findUser.svg';
 import bellLogo from '../../assets/header/bell.svg';
 import bellExistLogo from '../../assets/header/exist-bell.svg';
@@ -40,11 +39,10 @@ const MainHeader = ({ type, leftButtonClick, rightButtonClick }: MainHeaderProps
     <HeaderWrapper>
       <LogoImg src={headerLogo} alt="headerLogo" />
       <Actions>
-        <IconButton
-          onClick={leftButtonClick}
-          src={type === 'group' ? groupDoneLogo : findUserLogo}
-          alt={type === 'group' ? '모임 완료 아이콘' : '사용자 찾기 아이콘'}
-        />
+        {type === 'home' && (
+          <IconButton onClick={leftButtonClick} src={findUserLogo} alt={'사용자 찾기 아이콘'} />
+        )}
+
         <IconButton
           onClick={rightButtonClick}
           src={hasUnchecked ? bellExistLogo : bellLogo}

src/components/common/Modal/ConfirmModal.tsx

@@ -2,17 +2,28 @@ import styled from '@emotion/styled';
 import { colors, typography } from '@/styles/global/global';
 import type { ConfirmModalProps } from '@/stores/usePopupStore';
 
-const ConfirmModal = ({ title, disc, onConfirm, onClose }: ConfirmModalProps) => {
+const ConfirmModal = ({
+  title,
+  disc,
+  onConfirm,
+  onClose,
+  confirmText = '예',
+  cancelText = '아니요',
+}: ConfirmModalProps) => {
+  const handleContainerClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+  };
+
   return (
-    <Container>
+    <Container onClick={handleContainerClick}>
       <div className="title">{title}</div>
       <div className="disc" dangerouslySetInnerHTML={{ __html: disc }} />
       <ButtonContainer>
         <Button variant="no" onClick={onClose}>
-          아니요
+          {cancelText}
         </Button>
         <Button variant="yes" onClick={onConfirm}>
-          예
+          {confirmText}
         </Button>
       </ButtonContainer>
     </Container>

src/components/common/Modal/PopupContainer.tsx

@@ -41,7 +41,7 @@ const PopupContainer = () => {
     switch (popupType) {
       case 'confirm-modal':
         return (
-          <Wrapper>
+          <Wrapper onClick={closePopup}>
             <ConfirmModal {...(popupProps as ConfirmModalProps)} onClose={closePopup} />
           </Wrapper>
         );