refactor: 토론방 등록 버튼 레이아웃 수정

prgrms-web-devcourse-final-project · Dec 3, 2024 · 6edb24e · 6edb24e
1 parent 256494a
commit 6edb24e
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 31 deletions.
diff --git 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<string | null>(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
@@ -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
@@ -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<File | null>(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 = () => {
           <ImageUpload onImageUpload={handleImageUpload} />
         </InputWrapper>
 
-        <ButtonWrapper>
-          <CreateButton
-            colorScheme="none"
-            bg={theme.colors.primary}
-            color="white"
-            width="100%"
-            height="3.5rem"
-            onClick={handleCreateGroup}
-          >
-            방 만들기
-          </CreateButton>
-        </ButtonWrapper>
+        <CreateButton
+          colorScheme="none"
+          bg={theme.colors.primary}
+          color="white"
+          width="100%"
+          height="3.5rem"
+          onClick={handleCreateGroup}
+        >
+          방 만들기
+        </CreateButton>
       </Content>
     </Container>
   );