diff --git a/src/pages/QSpacePost/CategorySelectPage.tsx b/src/pages/QSpacePost/CategorySelectPage.tsx index 6597367..80a0c3d 100644 --- a/src/pages/QSpacePost/CategorySelectPage.tsx +++ b/src/pages/QSpacePost/CategorySelectPage.tsx @@ -10,19 +10,18 @@ import { import theme from '@/styles/theme'; import { Button } from '@chakra-ui/react'; import { useState } from 'react'; +import { useNavigate } from 'react-router'; const CategorySelectPage = () => { const [selectedCategory, setSelectedCategory] = useState(null); + const navigate = useNavigate(); const handleCategorySelect = (categoryId: string) => { setSelectedCategory(categoryId); }; const handleNext = () => { - if (selectedCategory) { - // 다음 단계 처리 로직 - console.log('Selected category:', selectedCategory); - } + navigate('/qspace/post'); }; return ( diff --git a/src/pages/QSpacePost/PostGroupPage.styles.ts b/src/pages/QSpacePost/PostGroupPage.styles.ts index e778626..7a07372 100644 --- a/src/pages/QSpacePost/PostGroupPage.styles.ts +++ b/src/pages/QSpacePost/PostGroupPage.styles.ts @@ -4,8 +4,8 @@ import styled from '@emotion/styled'; export const Container = styled.div` background-color: ${theme.colors.background}; - min-height: calc(100vh - 5rem); // Footer 높이 5rem 제외 - padding-bottom: 5rem; // Footer 높이만큼 padding + padding-bottom: 6rem; + position: relative; `; export const Header = styled.header` @@ -43,17 +43,7 @@ export const CharCount = styled.span` color: ${theme.colors.gray[400]}; `; -export const ButtonWrapper = styled.div` - position: fixed; - bottom: 5rem; // Footer 높이만큼 띄우기 - left: 1rem; - right: 1rem; - padding: 1rem 0; - background-color: ${theme.colors.background}; -`; - export const CreateButton = styled(Button)` - width: 100%; - margin-bottom: 1rem; + bottom: 0; border-radius: 1rem; `; diff --git a/src/pages/QSpacePost/PostGroupPage.tsx b/src/pages/QSpacePost/PostGroupPage.tsx index 22d5bf6..a9497b0 100644 --- a/src/pages/QSpacePost/PostGroupPage.tsx +++ b/src/pages/QSpacePost/PostGroupPage.tsx @@ -4,7 +4,6 @@ import theme from '@/styles/theme'; import BackButton from '@/components/ui/BackButton/BackButton'; import { ImageUpload } from '@/components/ui/ImageUpload/ImageUpload'; import { - ButtonWrapper, CharCount, Container, Content, @@ -13,17 +12,20 @@ import { InputWrapper, Label, } from '@/pages/QSpacePost/PostGroupPage.styles'; +import { useNavigate } from 'react-router'; const PostGroupPage = () => { const [title, setTitle] = useState(''); const [description, setDescription] = useState(''); const [imageFile, setImageFile] = useState(null); + const navigate = useNavigate(); const handleCreateGroup = () => { - console.log('Create group:', { title, description, imageFile }); + navigate('/qspace'); }; const handleImageUpload = (file: File | null) => { + console.log('Uploading image:', imageFile); setImageFile(file); }; @@ -68,18 +70,16 @@ const PostGroupPage = () => { - - - 방 만들기 - - + + 방 만들기 + );