feat: 커피챗 업로드 뷰 데스크탑, 모바일 레이아웃 구현 #1599
Conversation
|
|
🚀 프리뷰 배포 확인하기 🚀 |
|
요거 변경된 bp로 수정된 후에 노티한번 주시면 리뷰 남길게요!! 감사합니다 |
|
bp 기존 768픽셀로 유지하기로 해서, 리뷰해주시면 될 것 같습니당!!! |
| export default function DesktopCoffeechatUploadLayout({ | ||
| main, | ||
| aside, | ||
| submitButton, | ||
| }: DesktopCoffeechatUploadLayoutProps) { | ||
| return ( | ||
| <Layout> | ||
| <Main> | ||
| <Body>{main}</Body> | ||
| <Footer>{submitButton}</Footer> | ||
| </Main> | ||
| <Aside>{aside}</Aside> | ||
| </Layout> | ||
| ); | ||
| } |
There was a problem hiding this comment.
<Layout>
<Main>
<Body>
<CoffeechatForm />
</Body>
<Footer>
<UploadButton />
</Footer>
</Main>
<Aside>
<ProgressBox uploadType={uploadType} myInfoInprogress={false} coffeechatInfoInprogress={false} />
</Aside>
</Layout>
Q:
이런식으로 바로 넣어주는 방법도 있을 것 같은데 main, submitButton, aside를 prop으로 넘겨서 삽입한 이유가 궁금해요!!
There was a problem hiding this comment.
이것은 취향의 차이일 것 같긴 한데용! 데스크탑이랑 모바일이랑 progress box의 유무로 인해 보여지는 레이아웃이 다르다보니 한 번 분기 처리를 해주었습니다! 또한 1260, 768, 430 bp에 따라 마진값이 다른 스타일을 넘겨주어야했다보니(이건 뒷 pr에 추가했습니닷) 데탑/모바일 레이아웃 컴포넌트를 따로 만들면 좀 더 간결해보일 것 같아서 나누어보았어요!
There was a problem hiding this comment.
P1:
이 PR 변경사항에 포함된 내용은 아닌데,
여기 선 gray600인데 gray800으로 잘못 들어간거같아요!
&::before {
position: absolute;
top: 20px;
bottom: 20px;
left: 7px;
transform: translateX(-50%);
background-color: ${colors.gray800}; 👈
width: 1px;
content: '';
}
🤫 쉿, 나한테만 말해줘요. 이슈넘버
🧐 어떤 것을 변경했어요~?
🤔 그렇다면, 어떻게 구현했어요~?
❤️🔥 당신이 생각하는 PR포인트, 내겐 매력포인트.
📸 스크린샷, 없으면 이것 참,, 섭섭한데요?