diff --git a/src/components/group/MyGroupBox.tsx b/src/components/group/MyGroupBox.tsx index a040cba0..3d104d07 100644 --- a/src/components/group/MyGroupBox.tsx +++ b/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([]); const [loading, setLoading] = useState(false); const [error, setError] = useState(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)} /> ))} diff --git a/src/components/group/MyGroupCard.tsx b/src/components/group/MyGroupCard.tsx index e06586e6..8734c2b8 100644 --- a/src/components/group/MyGroupCard.tsx +++ b/src/components/group/MyGroupCard.tsx @@ -5,11 +5,13 @@ import type { Group } from './MyGroupBox'; interface MyGroupCardProps { group: Group; + onClick?: () => void; } -export const MyGroupCard = forwardRef(({ group }, ref) => { +export const MyGroupCard = forwardRef((props, ref) => { + const { group, onClick } = props; return ( - +
diff --git a/src/pages/group/CreateGroup.tsx b/src/pages/group/CreateGroup.tsx index 0f9e84e0..e405b9ae 100644 --- a/src/pages/group/CreateGroup.tsx +++ b/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(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( + convertBookInfoToBook(location.state?.selectedBook ?? location.state?.bookInfo), + ); const [selectedGenre, setSelectedGenre] = useState(''); const [roomTitle, setRoomTitle] = useState(''); const [roomDescription, setRoomDescription] = useState(''); diff --git a/src/pages/groupDetail/GroupDetail.tsx b/src/pages/groupDetail/GroupDetail.tsx index 596974b7..ac9e5440 100644 --- a/src/pages/groupDetail/GroupDetail.tsx +++ b/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 (
-
@@ -179,10 +186,10 @@ const GroupDetail = () => {
- +

{bookTitle}

- +
@@ -205,6 +212,7 @@ const GroupDetail = () => { isOngoing={true} isRecommend={true} type={'modal'} + onClick={() => handleRecommendGroupCardClick(room.roomId)} /> ))} diff --git a/src/pages/post/CreatePost.tsx b/src/pages/post/CreatePost.tsx index 9cf4885b..3c36d722 100644 --- a/src/pages/post/CreatePost.tsx +++ b/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(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( + convertBookInfoToBook(location.state?.selectedBook), + ); const [postContent, setPostContent] = useState(''); const [selectedPhotos, setSelectedPhotos] = useState([]); const [isPrivate, setIsPrivate] = useState(false); diff --git a/src/pages/searchBook/SearchBook.styled.ts b/src/pages/searchBook/SearchBook.styled.ts index 20f5c38c..303d62da 100644 --- a/src/pages/searchBook/SearchBook.styled.ts +++ b/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; diff --git a/src/pages/searchBook/SearchBook.tsx b/src/pages/searchBook/SearchBook.tsx index 3aeb03b7..287dfcf6 100644 --- a/src/pages/searchBook/SearchBook.tsx +++ b/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 = () => {
-
{isLoading ? '로딩 중...' : error || '책 정보를 찾을 수 없습니다.'} @@ -163,7 +171,6 @@ const SearchBook = () => {
-
diff --git a/src/pages/searchBook/SearchBookGroup.tsx b/src/pages/searchBook/SearchBookGroup.tsx index 7db261db..c3aff3d3 100644 --- a/src/pages/searchBook/SearchBookGroup.tsx +++ b/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;