feat: API 연동에 따른 page별 이동 이벤트 구현

src/components/group/MyGroupBox.tsx

@@ -3,6 +3,7 @@ import { useInfiniteCarousel } from '../../hooks/useInfiniteCarousel';
 import styled from '@emotion/styled';
 import rightChevron from '../../assets/common/right-Chevron.svg';
 import { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { getJoinedRooms, type JoinedRoomItem } from '@/api/rooms/getJoinedRooms';
 import { colors, typography } from '@/styles/global/global';
 
@@ -35,6 +36,7 @@ export function MyGroupBox({ onMyGroupsClick }: MyGroupProps) {
   const [groups, setGroups] = useState<Group[]>([]);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const navigate = useNavigate();
 
   const fetchJoinedRooms = async () => {
     try {
@@ -59,6 +61,10 @@ export function MyGroupBox({ onMyGroupsClick }: MyGroupProps) {
     fetchJoinedRooms();
   }, []);
 
+  const handleCardClick = (roomId: number | string) => {
+    navigate(`detail/joined/${roomId}`);
+  };
+
   const { scrollRef, cardRefs, infiniteGroups, current } = useInfiniteCarousel(groups);
 
   return (
@@ -87,6 +93,7 @@ export function MyGroupBox({ onMyGroupsClick }: MyGroupProps) {
                 ref={el => {
                   cardRefs.current[i] = el;
                 }}
+                onClick={() => handleCardClick(g.id)}
               />
             ))}
           </Carousel>

src/components/group/MyGroupCard.tsx

@@ -5,11 +5,13 @@ import type { Group } from './MyGroupBox';
 
 interface MyGroupCardProps {
   group: Group;
+  onClick?: () => void;
 }
 
-export const MyGroupCard = forwardRef<HTMLDivElement, MyGroupCardProps>(({ group }, ref) => {
+export const MyGroupCard = forwardRef<HTMLDivElement, MyGroupCardProps>((props, ref) => {
+  const { group, onClick } = props;
   return (
-    <Card ref={ref}>
+    <Card ref={ref} onClick={onClick}>
       <Thumbnail src={group.coverUrl} alt="책 표지" />
       <Info>
         <div>

src/pages/group/CreateGroup.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useLocation } from 'react-router-dom';
 import TitleHeader from '../../components/common/TitleHeader';
 import BookSearchBottomSheet from '../../components/common/BookSearchBottomSheet/BookSearchBottomSheet';
 import BookSelectionSection from '../../components/creategroup/BookSelectionSection';
@@ -24,7 +24,21 @@ interface Book {
 
 const CreateGroup = () => {
   const navigate = useNavigate();
-  const [selectedBook, setSelectedBook] = useState<Book | null>(null);
+  const location = useLocation();
+
+  function convertBookInfoToBook(bookInfo: Book): Book | null {
+    if (!bookInfo) return null;
+    return {
+      title: bookInfo.title,
+      author: bookInfo.author,
+      cover: bookInfo.cover,
+      isbn: bookInfo.isbn,
+    };
+  }
+
+  const [selectedBook, setSelectedBook] = useState<Book | null>(
+    convertBookInfoToBook(location.state?.selectedBook ?? location.state?.bookInfo),
+  );
   const [selectedGenre, setSelectedGenre] = useState('');
   const [roomTitle, setRoomTitle] = useState('');
   const [roomDescription, setRoomDescription] = useState('');

src/pages/groupDetail/GroupDetail.tsx

@@ -27,7 +27,6 @@ import {
   BottomButton,
 } from './GroupDetail.styled';
 import leftArrow from '../../assets/common/leftArrow.svg';
-import moreIcon from '../../assets/common/more.svg';
 import { useNavigate, useParams } from 'react-router-dom';
 import { IconButton } from '@/components/common/IconButton';
 import lockIcon from '../../assets/group/lock.svg';
@@ -54,8 +53,6 @@ const GroupDetail = () => {
     navigate(-1);
   };
 
-  const handleMoreButton = () => {};
-
   const convertRecommendRoomToGroup = (room: RecommendRoom): Group => {
     return {
       id: room.roomId.toString(),
@@ -134,12 +131,22 @@ const GroupDetail = () => {
     recommendRooms,
   } = roomData;
 
+  const handleBookSectionClick = () => {
+    const isbn = roomData?.isbn;
+    if (isbn) {
+      navigate(`/search/book/${isbn}`);
+    }
+  };
+
+  const handleRecommendGroupCardClick = (roomId: number | string) => {
+    navigate(`/group/detail/${roomId}`);
+  };
+
   return (
     <Wrapper>
       <TopBackground genre={category}>
         <Header>
           <IconButton src={leftArrow} onClick={handleBackButton} />
-          <IconButton src={moreIcon} onClick={handleMoreButton} />
         </Header>
         <BannerSection>
           <GroupTitle>
@@ -179,10 +186,10 @@ const GroupDetail = () => {
           </TagRow>
         </BannerSection>
       </TopBackground>
-      <BookSection>
+      <BookSection onClick={handleBookSectionClick}>
         <BookHeader>
           <h3>{bookTitle}</h3>
-          <IconButton src={rightChevron} alt="책 이동 버튼"></IconButton>
+          <IconButton src={rightChevron} alt="책 이동 버튼" />
         </BookHeader>
         <BookInfo>
           <BookCover src={bookImageUrl} alt={bookTitle} />
@@ -205,6 +212,7 @@ const GroupDetail = () => {
               isOngoing={true}
               isRecommend={true}
               type={'modal'}
+              onClick={() => handleRecommendGroupCardClick(room.roomId)}
             />
           ))}
         </GroupCardBox>

src/pages/post/CreatePost.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useLocation } from 'react-router-dom';
 import TitleHeader from '../../components/common/TitleHeader';
 import BookSearchBottomSheet from '../../components/common/BookSearchBottomSheet/BookSearchBottomSheet';
 import BookSelectionSection from '../../components/creategroup/BookSelectionSection';
@@ -34,7 +34,7 @@ const makeIsbnCandidates = (raw: string) => {
 };
 
 interface Book {
-  id: number;
+  id?: number;
   title: string;
   author: string;
   cover: string;
@@ -43,7 +43,21 @@ interface Book {
 
 const CreatePost = () => {
   const navigate = useNavigate();
-  const [selectedBook, setSelectedBook] = useState<Book | null>(null);
+  const location = useLocation();
+
+  function convertBookInfoToBook(bookInfo: Book): Book | null {
+    if (!bookInfo) return null;
+    return {
+      title: bookInfo.title,
+      author: bookInfo.author,
+      cover: bookInfo.cover,
+      isbn: bookInfo.isbn,
+    };
+  }
+
+  const [selectedBook, setSelectedBook] = useState<Book | null>(
+    convertBookInfoToBook(location.state?.selectedBook),
+  );
   const [postContent, setPostContent] = useState('');
   const [selectedPhotos, setSelectedPhotos] = useState<File[]>([]);
   const [isPrivate, setIsPrivate] = useState(false);

src/pages/searchBook/SearchBook.styled.ts

@@ -59,7 +59,7 @@ export const BannerSection = styled.section`
   flex-direction: column;
   width: 100%;
   padding: 20px;
-  margin-top: 66px;
+  margin-top: 24%;
   gap: 32px;
   color: ${colors.white};
   z-index: 10;

src/pages/searchBook/SearchBook.tsx

@@ -23,7 +23,6 @@ import {
 } from './SearchBook.styled';
 import { useNavigate, useParams } from 'react-router-dom';
 import leftArrow from '../../assets/common/leftArrow.svg';
-import moreIcon from '../../assets/common/more.svg';
 import { IconButton } from '@/components/common/IconButton';
 import saveIcon from '../../assets/common/SaveIcon.svg';
 import filledSaveIcon from '../../assets/common/filledSaveIcon.svg';
@@ -100,8 +99,6 @@ const SearchBook = () => {
 
   const handleCloseIntroModal = () => setShowIntroModal(false);
 
-  const handleMoreButton = () => {};
-
   const handleRecruitingGroupButton = () => {
     if (bookDetail) {
       navigate('/search/book/group', {
@@ -123,7 +120,19 @@ const SearchBook = () => {
     }
   };
 
-  const handleWritePostButton = () => {};
+  const handleWritePostButton = () => {
+    if (bookDetail) {
+      const selectedBook = {
+        title: bookDetail.title,
+        author: bookDetail.authorName,
+        cover: bookDetail.imageUrl,
+        isbn: bookDetail.isbn,
+      };
+      navigate('/post/create', { state: { selectedBook } });
+    } else {
+      navigate('/post/create');
+    }
+  };
 
   const handleSaveButton = async () => {
     if (!isbn || isSaving) return;
@@ -149,7 +158,6 @@ const SearchBook = () => {
       <Wrapper>
         <Header>
           <IconButton src={leftArrow} onClick={handleBackButton} />
-          <IconButton src={moreIcon} onClick={handleMoreButton} />
         </Header>
         <div style={{ padding: '100px 20px', textAlign: 'center', color: 'white' }}>
           {isLoading ? '로딩 중...' : error || '책 정보를 찾을 수 없습니다.'}
@@ -163,7 +171,6 @@ const SearchBook = () => {
       <TopBackground bookImgUrl={bookDetail.imageUrl} />
       <Header>
         <IconButton src={leftArrow} onClick={handleBackButton} />
-        <IconButton src={moreIcon} onClick={handleMoreButton} />
       </Header>
       <BannerSection>
         <BookInfo>

src/pages/searchBook/SearchBookGroup.tsx

@@ -24,7 +24,15 @@ const SearchBookGroup = () => {
   const handleBackButton = () => {
     navigate(-1);
   };
-  const handleMakeGroup = () => {};
+  const handleMakeGroup = () => {
+    const selectedBook = {
+      title: bookInfo.title,
+      author: bookInfo.author,
+      cover: bookInfo.imageUrl,
+      isbn: bookInfo.isbn,
+    };
+    navigate('/group/create', { state: { selectedBook } });
+  };
 
   const groupList = recruitingRooms?.recruitingRoomList || [];
   const totalCount = recruitingRooms?.totalRoomCount || 0;