diff --git a/src/components/coffeechat/page/CoffeechatUploadPage.tsx b/src/components/coffeechat/page/CoffeechatUploadPage.tsx index 3c4032891..f1193f311 100644 --- a/src/components/coffeechat/page/CoffeechatUploadPage.tsx +++ b/src/components/coffeechat/page/CoffeechatUploadPage.tsx @@ -1,22 +1,38 @@ +import { yupResolver } from '@hookform/resolvers/yup'; +import { FormProvider, useForm } from 'react-hook-form'; + +import DesktopCoffeechatUploadLayout from '@/components/coffeechat/page/layout/DesktopCoffeechatUploadLayout'; +import MobileCoffeechatUploadLayout from '@/components/coffeechat/page/layout/MobileCoffeechatUploadLayout'; import CoffeechatForm from '@/components/coffeechat/upload/CoffeechatForm'; import { coffeChatchema } from '@/components/coffeechat/upload/CoffeechatForm/schema'; import { CoffeechatFormContent } from '@/components/coffeechat/upload/CoffeechatForm/types'; -import { yupResolver } from '@hookform/resolvers/yup'; -import { FormProvider, useForm } from 'react-hook-form'; +import UploadButton from '@/components/coffeechat/upload/CoffeechatForm/UploadButton'; +import ProgressBox from '@/components/coffeechat/upload/ProgressBox'; +import Responsive from '@/components/common/Responsive'; interface CoffeechatUploadPageProps { + uploadType: '오픈' | '수정'; form: CoffeechatFormContent; onSubmit: () => void; } -export default function CoffeechatUploadPage({ form, onSubmit }: CoffeechatUploadPageProps) { +export default function CoffeechatUploadPage({ uploadType, form, onSubmit }: CoffeechatUploadPageProps) { const methods = useForm({ resolver: yupResolver(coffeChatchema), defaultValues: form }); const { handleSubmit } = methods; return (
- + + } + aside={} + submitButton={} + /> + + + } submitButton={} /> +
); diff --git a/src/components/coffeechat/page/layout/DesktopCoffeechatUploadLayout.tsx b/src/components/coffeechat/page/layout/DesktopCoffeechatUploadLayout.tsx new file mode 100644 index 000000000..1795a0fed --- /dev/null +++ b/src/components/coffeechat/page/layout/DesktopCoffeechatUploadLayout.tsx @@ -0,0 +1,49 @@ +import styled from '@emotion/styled'; +import { ReactNode } from 'react'; + +interface DesktopCoffeechatUploadLayoutProps { + main: ReactNode; + aside: ReactNode; + submitButton: ReactNode; +} + +export default function DesktopCoffeechatUploadLayout({ + main, + aside, + submitButton, +}: DesktopCoffeechatUploadLayoutProps) { + return ( + +
+ {main} +
{submitButton}
+
+ + + ); +} + +const Footer = styled.footer` + margin: 62px 0 50px; +`; + +const Layout = styled.div` + display: flex; + gap: 30px; + justify-content: center; + margin: 0 30px; +`; + +const Body = styled.section` + display: flex; + flex-direction: column; +`; + +const Main = styled.main` + display: flex; + flex-direction: column; + align-items: flex-end; + margin: 0 40px; +`; + +const Aside = styled.aside``; diff --git a/src/components/coffeechat/page/layout/MobileCoffeechatUploadLayout.tsx b/src/components/coffeechat/page/layout/MobileCoffeechatUploadLayout.tsx new file mode 100644 index 000000000..c2185b614 --- /dev/null +++ b/src/components/coffeechat/page/layout/MobileCoffeechatUploadLayout.tsx @@ -0,0 +1,27 @@ +import styled from '@emotion/styled'; +import { ReactNode } from 'react'; + +interface MobileCoffeechatUploadLayoutProps { + main: ReactNode; + submitButton: ReactNode; +} + +export default function MobileCoffeechatUploadLayout({ main, submitButton }: MobileCoffeechatUploadLayoutProps) { + return ( + + <>{main} +
{submitButton}
+ + ); +} + +const Layout = styled.div` + display: flex; + flex-direction: column; + margin: 0 20px; +`; + +const Footer = styled.footer` + margin: 40px 0 56px; + width: 100%; +`; diff --git a/src/components/coffeechat/upload/CoffeechatForm/UploadButton/index.tsx b/src/components/coffeechat/upload/CoffeechatForm/UploadButton/index.tsx index cbaa466f1..a16f23674 100644 --- a/src/components/coffeechat/upload/CoffeechatForm/UploadButton/index.tsx +++ b/src/components/coffeechat/upload/CoffeechatForm/UploadButton/index.tsx @@ -1,3 +1,4 @@ +import styled from '@emotion/styled'; import { IconPlus } from '@sopt-makers/icons'; import { Button } from '@sopt-makers/ui'; @@ -16,10 +17,14 @@ export default function UploadButton({ onClick }: UploadButtonProps) { - + ); } + +const MobileButton = styled(Button)` + width: 100%; +`; diff --git a/src/components/coffeechat/upload/ProgressBox/index.tsx b/src/components/coffeechat/upload/ProgressBox/index.tsx index 0ccb12877..126f0499e 100644 --- a/src/components/coffeechat/upload/ProgressBox/index.tsx +++ b/src/components/coffeechat/upload/ProgressBox/index.tsx @@ -30,16 +30,17 @@ export default function ProgressBox({ uploadType, myInfoInprogress, coffeechatIn ); } -const Box = styled.aside` +const Box = styled.div` display: flex; - position: fixed; + position: sticky; + top: 80px; flex-direction: column; gap: 36px; align-items: flex-start; border: 1px solid ${colors.gray800}; border-radius: 15px; padding: 50px 40px 60px; - width: 100%; + width: 290px; color: ${colors.gray10}; `; diff --git a/src/components/common/form/TextFieldLineBreak/index.tsx b/src/components/common/form/TextFieldLineBreak/index.tsx index 461c6bd4a..f4777b4cd 100644 --- a/src/components/common/form/TextFieldLineBreak/index.tsx +++ b/src/components/common/form/TextFieldLineBreak/index.tsx @@ -49,6 +49,8 @@ const TextAreaWrapper = styled.div` const Placeholder = styled.div` position: absolute; top: 8px; + right: 16px; + bottom: 8px; left: 16px; white-space: pre-wrap; color: ${colors.gray300}; diff --git a/src/pages/coffeechat/upload.tsx b/src/pages/coffeechat/upload.tsx new file mode 100644 index 000000000..8fd1bb2c4 --- /dev/null +++ b/src/pages/coffeechat/upload.tsx @@ -0,0 +1,30 @@ +import AuthRequired from '@/components/auth/AuthRequired'; +import CoffeechatUploadPage from '@/components/coffeechat/page/CoffeechatUploadPage'; +import { setLayout } from '@/utils/layout'; + +const CoffeechatUpload = () => { + const defaultForm = { + memberInfo: { + career: '주니어', + introduction: '안녕하세요! 저는 프론트엔드 개발자로 다양한 프로젝트 경험을 쌓고 있습니다.', + }, + coffeeChatInfo: { + sections: ['프론트엔드', '디자인'], // 다중 선택 가능 (전체, 기획, 디자인, 웹, 서버, 안드로이드, iOS) + bio: '프론트엔드 커리어 상담', + topicTypes: ['커리어', '포트폴리오'], // 창업, 네트워킹, 프로젝트, 커리어 등 다중 선택 가능 + topic: '프론트엔드 개발자로서의 커리어에 대해 상담하고 싶습니다.\n포트폴리오 제작과 인터뷰 팁도 나누고자 합니다.', + meetingType: '온라인', // 무관, 온라인, 오프라인 중 하나 선택 + guideline: '시간 약속을 꼭 지켜주세요.\n질문은 미리 준비해 오시면 더욱 좋습니다.', + }, + }; + + return ( + + console.log('클릭')} /> + + ); +}; + +setLayout(CoffeechatUpload, 'header'); + +export default CoffeechatUpload;