From 22ff044cef4ac96446a9311502d07a9d38413f64 Mon Sep 17 00:00:00 2001 From: Seojisoo20191941 Date: Mon, 21 Oct 2024 21:58:10 +0900 Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=EB=8D=B0=EC=8A=A4=ED=81=AC?= =?UTF-8?q?=ED=83=91=20=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../coffeechat/page/CoffeechatUploadPage.tsx | 19 +++++-- .../layout/DesktopCoffeechatUploadLayout.tsx | 49 +++++++++++++++++++ .../coffeechat/upload/ProgressBox/index.tsx | 7 +-- .../common/form/TextFieldLineBreak/index.tsx | 2 + src/pages/coffeechat/upload.tsx | 28 +++++++++++ 5 files changed, 98 insertions(+), 7 deletions(-) create mode 100644 src/components/coffeechat/page/layout/DesktopCoffeechatUploadLayout.tsx create mode 100644 src/pages/coffeechat/upload.tsx diff --git a/src/components/coffeechat/page/CoffeechatUploadPage.tsx b/src/components/coffeechat/page/CoffeechatUploadPage.tsx index 3c4032891..1446b4622 100644 --- a/src/components/coffeechat/page/CoffeechatUploadPage.tsx +++ b/src/components/coffeechat/page/CoffeechatUploadPage.tsx @@ -1,22 +1,33 @@ +import { yupResolver } from '@hookform/resolvers/yup'; +import { FormProvider, useForm } from 'react-hook-form'; + +import DesktopCoffeechatUploadLayout from '@/components/coffeechat/page/layout/DesktopCoffeechatUploadLayout'; 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'; 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={} + /> + {/* */}
); 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/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..f22d91952 --- /dev/null +++ b/src/pages/coffeechat/upload.tsx @@ -0,0 +1,28 @@ +import AuthRequired from '@/components/auth/AuthRequired'; +import CoffeechatUploadPage from '@/components/coffeechat/page/CoffeechatUploadPage'; +import { setLayout } from '@/utils/layout'; + +export default function CoffeechatUpload() { + const defaultForm = { + memberInfo: { + career: '주니어', + introduction: '안녕하세요! 저는 프론트엔드 개발자로 다양한 프로젝트 경험을 쌓고 있습니다.', + }, + coffeeChatInfo: { + sections: ['프론트엔드', '디자인'], // 다중 선택 가능 (전체, 기획, 디자인, 웹, 서버, 안드로이드, iOS) + bio: '프론트엔드 커리어 상담', + topicTypes: ['커리어', '포트폴리오'], // 창업, 네트워킹, 프로젝트, 커리어 등 다중 선택 가능 + topic: '프론트엔드 개발자로서의 커리어에 대해 상담하고 싶습니다.\n포트폴리오 제작과 인터뷰 팁도 나누고자 합니다.', + meetingType: '온라인', // 무관, 온라인, 오프라인 중 하나 선택 + guideline: '시간 약속을 꼭 지켜주세요.\n질문은 미리 준비해 오시면 더욱 좋습니다.', + }, + }; + + return ( + + console.log('클릭')} /> + + ); +} + +setLayout(CoffeechatUpload, 'header'); From 0e345b27394b8970738e64d5efea2b689b13340f Mon Sep 17 00:00:00 2001 From: Seojisoo20191941 Date: Mon, 21 Oct 2024 22:27:47 +0900 Subject: [PATCH 2/3] =?UTF-8?q?feat:=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20?= =?UTF-8?q?=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../coffeechat/page/CoffeechatUploadPage.tsx | 19 ++++++++----- .../layout/MobileCoffeechatUploadLayout.tsx | 27 +++++++++++++++++++ .../CoffeechatForm/UploadButton/index.tsx | 9 +++++-- 3 files changed, 46 insertions(+), 9 deletions(-) create mode 100644 src/components/coffeechat/page/layout/MobileCoffeechatUploadLayout.tsx diff --git a/src/components/coffeechat/page/CoffeechatUploadPage.tsx b/src/components/coffeechat/page/CoffeechatUploadPage.tsx index 1446b4622..f1193f311 100644 --- a/src/components/coffeechat/page/CoffeechatUploadPage.tsx +++ b/src/components/coffeechat/page/CoffeechatUploadPage.tsx @@ -2,11 +2,13 @@ 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 UploadButton from '@/components/coffeechat/upload/CoffeechatForm/UploadButton'; import ProgressBox from '@/components/coffeechat/upload/ProgressBox'; +import Responsive from '@/components/common/Responsive'; interface CoffeechatUploadPageProps { uploadType: '오픈' | '수정'; @@ -21,13 +23,16 @@ export default function CoffeechatUploadPage({ uploadType, form, onSubmit }: Cof return (
- {/* */} - } - aside={} - submitButton={} - /> - {/* */} + + } + aside={} + submitButton={} + /> + + + } submitButton={} /> +
); 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%; +`; From 59ab759df01749f0ec6b8b2b002edc87bf5f0e41 Mon Sep 17 00:00:00 2001 From: Seojisoo20191941 Date: Mon, 21 Oct 2024 22:47:09 +0900 Subject: [PATCH 3/3] =?UTF-8?q?chore:=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=ED=98=95=EC=8B=9D=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/coffeechat/upload.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/pages/coffeechat/upload.tsx b/src/pages/coffeechat/upload.tsx index f22d91952..8fd1bb2c4 100644 --- a/src/pages/coffeechat/upload.tsx +++ b/src/pages/coffeechat/upload.tsx @@ -2,7 +2,7 @@ import AuthRequired from '@/components/auth/AuthRequired'; import CoffeechatUploadPage from '@/components/coffeechat/page/CoffeechatUploadPage'; import { setLayout } from '@/utils/layout'; -export default function CoffeechatUpload() { +const CoffeechatUpload = () => { const defaultForm = { memberInfo: { career: '주니어', @@ -23,6 +23,8 @@ export default function CoffeechatUpload() { console.log('클릭')} /> ); -} +}; setLayout(CoffeechatUpload, 'header'); + +export default CoffeechatUpload;