Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: 커피챗 업로드 뷰 데스크탑, 모바일 레이아웃 구현 #1599

Merged
merged 3 commits into from
Oct 25, 2024
Merged

feat: 커피챗 업로드 뷰 데스크탑, 모바일 레이아웃 구현 #1599

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
22ff044
feat: 데스크탑 레이아웃 구현
seojisoosoo Oct 21, 2024
0e345b2
feat: 모바일 레이아웃 구현
seojisoosoo Oct 21, 2024
59ab759
chore: 컴포넌트 형식 변경
seojisoosoo Oct 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 20 additions & 4 deletions src/components/coffeechat/page/CoffeechatUploadPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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<CoffeechatFormContent>({ resolver: yupResolver(coffeChatchema), defaultValues: form });
const { handleSubmit } = methods;

return (
<FormProvider {...methods}>
<form onSubmit={handleSubmit(onSubmit)}>
<CoffeechatForm />
<Responsive only='desktop'>
<DesktopCoffeechatUploadLayout
main={<CoffeechatForm />}
aside={<ProgressBox uploadType={uploadType} myInfoInprogress={false} coffeechatInfoInprogress={false} />}
submitButton={<UploadButton />}
/>
</Responsive>
<Responsive only='mobile'>
<MobileCoffeechatUploadLayout main={<CoffeechatForm />} submitButton={<UploadButton />} />
</Responsive>
</form>
</FormProvider>
);
Expand Down
49 changes: 49 additions & 0 deletions src/components/coffeechat/page/layout/DesktopCoffeechatUploadLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<Layout>
<Main>
<Body>{main}</Body>
<Footer>{submitButton}</Footer>
</Main>
<Aside>{aside}</Aside>
</Layout>
);
}
Comment on lines +10 to +24
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more. 

<Layout>
      <Main>
        <Body>
            <CoffeechatForm />
        </Body>
        <Footer>
          <UploadButton />
        </Footer>
      </Main>
      <Aside>
          <ProgressBox uploadType={uploadType} myInfoInprogress={false} coffeechatInfoInprogress={false} />
      </Aside>
</Layout>

Q:
이런식으로 바로 넣어주는 방법도 있을 것 같은데 main, submitButton, aside를 prop으로 넘겨서 삽입한 이유가 궁금해요!!

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이것은 취향의 차이일 것 같긴 한데용! 데스크탑이랑 모바일이랑 progress box의 유무로 인해 보여지는 레이아웃이 다르다보니 한 번 분기 처리를 해주었습니다! 또한 1260, 768, 430 bp에 따라 마진값이 다른 스타일을 넘겨주어야했다보니(이건 뒷 pr에 추가했습니닷) 데탑/모바일 레이아웃 컴포넌트를 따로 만들면 좀 더 간결해보일 것 같아서 나누어보았어요!


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``;
27 changes: 27 additions & 0 deletions src/components/coffeechat/page/layout/MobileCoffeechatUploadLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<Layout>
<>{main}</>
<Footer>{submitButton}</Footer>
</Layout>
);
}

const Layout = styled.div`
display: flex;
flex-direction: column;
margin: 0 20px;
`;

const Footer = styled.footer`
margin: 40px 0 56px;
width: 100%;
`;
9 changes: 7 additions & 2 deletions src/components/coffeechat/upload/CoffeechatForm/UploadButton/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import styled from '@emotion/styled';
import { IconPlus } from '@sopt-makers/icons';
import { Button } from '@sopt-makers/ui';

Expand All @@ -16,10 +17,14 @@ export default function UploadButton({ onClick }: UploadButtonProps) {
</Button>
</Responsive>
<Responsive only='mobile'>
<Button size='lg' LeftIcon={IconPlus} type='submit'>
<MobileButton size='lg' LeftIcon={IconPlus} type='submit'>
커피챗 오픈하기
</Button>
</MobileButton>
</Responsive>
</div>
);
}

const MobileButton = styled(Button)`
width: 100%;
`;
7 changes: 4 additions & 3 deletions src/components/coffeechat/upload/ProgressBox/index.tsx
View file
Open in desktop
Copy link
Member

@simeunseo simeunseo Oct 25, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P1:
이 PR 변경사항에 포함된 내용은 아닌데,

여기 선 gray600인데 gray800으로 잘못 들어간거같아요!

image 
  &::before {
    position: absolute;
    top: 20px;
    bottom: 20px;
    left: 7px;
    transform: translateX(-50%);
    background-color: ${colors.gray800}; 👈
    width: 1px;
    content: '';
  }

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

어머나!!! 정말 감사합니다!!!

Original file line number Diff line number Diff line change
Expand Up @@ -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};
`;

Expand Down
2 changes: 2 additions & 0 deletions src/components/common/form/TextFieldLineBreak/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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};
Expand Down
30 changes: 30 additions & 0 deletions src/pages/coffeechat/upload.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<AuthRequired>
<CoffeechatUploadPage uploadType='오픈' form={defaultForm} onSubmit={() => console.log('클릭')} />
</AuthRequired>
);
};

setLayout(CoffeechatUpload, 'header');

export default CoffeechatUpload;
Loading