diff --git a/src/components/ui/ImageUpload/ImageUpload.tsx b/src/components/ui/ImageUpload/ImageUpload.tsx index 1e8825c..2571424 100644 --- a/src/components/ui/ImageUpload/ImageUpload.tsx +++ b/src/components/ui/ImageUpload/ImageUpload.tsx @@ -4,7 +4,7 @@ import { LuImagePlus, LuImageOff } from 'react-icons/lu'; import theme from '@/styles/theme'; interface ImageUploadProps { - onImageUpload?: (file: File) => void; // 이미지 업로드 이벤트 콜백 + onImageUpload?: (file: File | null) => void; // 이미지 업로드 이벤트 콜백 } export const ImageUpload: React.FC = ({ onImageUpload }) => { @@ -46,6 +46,7 @@ export const ImageUpload: React.FC = ({ onImageUpload }) => { if (preview) { setPreview(null); setError(null); + onImageUpload?.(null); } }; @@ -88,7 +89,7 @@ const UploadBox = styled.div<{ hasPreview: boolean }>` display: flex; justify-content: center; align-items: center; - width: 23.562rem; + width: 100%; height: 16.25rem; border: ${({ hasPreview }) => (hasPreview ? '0.125rem solid' : '0.125rem dashed')} ${theme.colors.primary}; border-radius: 1rem; diff --git a/src/pages/QSpacePost/PostGroupPage.tsx b/src/pages/QSpacePost/PostGroupPage.tsx index c2863cf..880bc7a 100644 --- a/src/pages/QSpacePost/PostGroupPage.tsx +++ b/src/pages/QSpacePost/PostGroupPage.tsx @@ -14,7 +14,7 @@ const PostGroupPage = () => { console.log('Create group:', { title, description, imageFile }); }; - const handleImageUpload = (file: File) => { + const handleImageUpload = (file: File | null) => { setImageFile(file); }; diff --git a/src/pages/Question/index.tsx b/src/pages/Question/index.tsx new file mode 100644 index 0000000..245f893 --- /dev/null +++ b/src/pages/Question/index.tsx @@ -0,0 +1,194 @@ +import { useState } from 'react'; +import styled from '@emotion/styled'; +import { IoLockClosed, IoLockOpen } from "react-icons/io5"; +import { ImageUpload } from '@/components/ui/ImageUpload/ImageUpload'; +import theme from '@/styles/theme'; +import Header from '@/components/common/Header'; + +const QuestionPage = () => { + const [answer, setAnswer] = useState(''); + const [isPrivate, setIsPrivate] = useState(true); + const [uploadedImage, setUploadedImage] = useState(null); + + const handleImageUpload = (file: File | null) => { + setUploadedImage(file); + }; + + const handleLockToggle = () => { + setIsPrivate((prev) => !prev); + }; + + const handleSubmit = () => { + alert(`답변: ${answer}\n공개 여부: ${isPrivate ? '비공개' : '공개'}\n이미지: ${uploadedImage ? uploadedImage.name : '없음'}`); + }; + + return ( + <> +
+ + + 오늘의 질문 + D+32 + + 맛집을 고르는 기준은 무엇인가요? + + + + + + 답변을 입력해주세요. + + {isPrivate ? : } + + + setAnswer(e.target.value)} + maxLength={100} + /> + + {`${answer.length}/100`} + 등록하기 + + + ); +}; + +const Container = styled.div` + display: flex; + flex-direction: column; + align-items: center; + padding: 1.5rem; + background-color: ${theme.colors.background}; + width: 100%; + min-height: calc(100vh - 8.25rem); + margin-bottom: 5.25rem; +`; + +const TitleContainer = styled.div` + text-align: center; + margin-bottom: 2.5rem; +`; + +const Title = styled.h1` + font-size: 1.125rem; + font-weight: bold; + margin-bottom: 0.125rem; + font-family: ${theme.typography.fontFamily.korean}; + color: ${theme.colors.gray[600]}; +`; + +const Date = styled.p` + font-size: 1rem; + font-family: ${theme.typography.fontFamily.english}; + color: ${theme.colors.gray[600]}; +`; + +const Question = styled.p` + font-family: ${theme.typography.header1.fontFamily.korean}; + font-weight: bold; + font-size: 1.25rem; + color: ${theme.colors.primary}; + text-align: center; + margin-bottom: 1.875rem; +`; + +const ImageUploadContainer = styled.div` + width: 100%; + margin-bottom: 1rem; +`; + +const AnswerContainer = styled.div` + width: 100%; +`; + +const InputLabel = styled.div` + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 0.5rem; +`; + +const LabelText = styled.span` + font-size: 1rem; + color: ${theme.colors.gray[300]}; +`; + +const LockButton = styled.button<{ isPrivate: boolean }>` + display: flex; + align-items: center; + justify-content: center; + gap: 0.5rem; + background: transparent; + border: 1px solid ${({ isPrivate }) => (isPrivate ? '#FF480E' : '#00796B')}; + color: ${theme.colors.black}; + border-radius: 0.875rem; + padding: 0.25rem 0.75rem; + font-size: 0.875rem; + cursor: pointer; + transition: all 0.2s ease-in-out; + + &:hover { + scale: 1.05; + } +`; + +const Input = styled.textarea` + width: 100%; + height: 7rem; + border: 1px solid ${theme.colors.gray[300]}; + padding: 0.875rem; + resize: none; + border-radius: 0.5rem; + font-size: 0.875rem; + outline: none; + font-family: ${theme.typography.fontFamily.korean}; + color: ${theme.colors.primary}; + + &:focus { + border-color: ${theme.colors.primary}; + } + + &::-webkit-scrollbar { + width: 0.5rem; + } + + &::-webkit-scrollbar-thumb { + background-color: ${theme.colors.primary}; + border-radius: 0.25rem; + } + + &::-webkit-scrollbar-thumb:hover { + background-color: ${theme.colors.gray[500]}; + } + + &::-webkit-scrollbar-track { + background-color: ${theme.colors.gray[100]}; + border-radius: 0.25rem; + } +`; + +const CharacterCount = styled.p` + font-size: 0.75rem; + color: ${theme.colors.gray[300]}; + margin-bottom: 1rem; + align-self: flex-end; +`; + +const SubmitButton = styled.button` + width: 100%; + padding: 0.75rem; + background-color: ${theme.colors.primary}; + color: ${theme.colors.white}; + border: none; + border-radius: 1rem; + font-size: 1rem; + cursor: pointer; + transition: all 0.2s ease-in-out; + + &:hover { + scale: 1.02; + } +`; + +export default QuestionPage; diff --git a/src/router/index.tsx b/src/router/index.tsx index 39d52ed..ad9845d 100644 --- a/src/router/index.tsx +++ b/src/router/index.tsx @@ -11,6 +11,7 @@ import { createBrowserRouter } from 'react-router-dom'; import { LandingPage } from '@/pages/Landing'; import ChatRoom from '@/pages/ChatRoom'; import QSpaceDetailPage from '@/pages/QSpaceDetail'; +import QuestionPage from '@/pages/Question'; const router = createBrowserRouter([ { @@ -61,6 +62,10 @@ const router = createBrowserRouter([ path: '/chatroom/:id', element: , }, + { + path: '/question/:category', + element: , + }, ], }, ]);