-
Notifications
You must be signed in to change notification settings - Fork 0
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.
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
[NDD-363] 문제집이 하나도 없을 때 생성 유도, QuestionSelectionBox 에서 면접세트 보러가기 페이지 유도(1.5h / 2h) #199
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. [p-5] 나중에 꼭 foundation으로 빼보아요 |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,68 @@ | ||
import { Box, Button, Icon, Typography } from '@foundation/index'; | ||
import { css, keyframes } from '@emotion/react'; | ||
import { theme } from '@styles/theme'; | ||
import { PATH } from '@constants/path'; | ||
import { Link } from 'react-router-dom'; | ||
import { useState } from 'react'; | ||
|
||
const ShowDialog = keyframes` | ||
0% { | ||
transform: translateX(-100%); | ||
} | ||
100% { | ||
transform: translateX(0); | ||
} | ||
`; | ||
|
||
const NoticeDialog = () => { | ||
const [visible, setVisible] = useState(true); | ||
|
||
if (!visible) return null; | ||
return ( | ||
<Box | ||
css={css` | ||
position: fixed; | ||
left: 1rem; | ||
bottom: 1rem; | ||
display: flex; | ||
flex-direction: column; | ||
align-items: flex-end; | ||
row-gap: 0.5rem; | ||
margin-right: 30rem; | ||
padding: 1rem; | ||
width: 15rem; | ||
height: auto; | ||
background-color: ${theme.colors.surface.default}; | ||
z-index: ${theme.zIndex.contentOverlay.overlay3}; | ||
animation: 1s cubic-bezier(0.5, 1.5, 0.5, 1) 0s 1 ${ShowDialog}; | ||
`} | ||
> | ||
<Button | ||
variants="secondary" | ||
size="sm" | ||
onClick={() => setVisible(false)} | ||
css={css` | ||
position: absolute; | ||
top: 0.75rem; | ||
right: 0.5rem; | ||
display: flex; | ||
border: none; | ||
z-index: ${theme.zIndex.contentOverlay.overlay5}; | ||
`} | ||
> | ||
<Icon id="close-black" /> | ||
</Button> | ||
<Typography variant="body1"> | ||
원하는 질문이 없나요? | ||
<br /> | ||
다른 사람이 만든 면접 세트를 가져오거나 | ||
<br />새 면접 세트를 만들어보세요 | ||
</Typography> | ||
<Link to={PATH.WORKBOOK}> | ||
<Button size="sm">면접 세트 보러가기</Button> | ||
</Link> | ||
</Box> | ||
); | ||
}; | ||
|
||
export default NoticeDialog; |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -11,6 +11,7 @@ import { | |
import { css } from '@emotion/react'; | ||
import { useState } from 'react'; | ||
import useBreakpoint from '@hooks/useBreakPoint'; | ||
import QuestionTabPanelBlank from '@common/QuestionSelectionBox/QuestionTabPanelBlank'; | ||
|
||
const QuestionSelectionBox = () => { | ||
const isDeviceBreakpoint = useBreakpoint(); | ||
|
@@ -19,7 +20,7 @@ const QuestionSelectionBox = () => { | |
|
||
const [isSidebarToggleOn, setIsSidebarToggleOn] = useState(true); | ||
|
||
if (!workbookListData) return; | ||
if (!workbookListData) return null; | ||
return ( | ||
<> | ||
<Box | ||
|
@@ -45,19 +46,23 @@ const QuestionSelectionBox = () => { | |
<QuestionTabList workbookListData={workbookListData} /> | ||
</QuestionSelectionBoxSidebarAreaDiv> | ||
<QuestionSelectionBoxTabPanelAreaDiv> | ||
{workbookListData.map((workbook, index) => ( | ||
<TabPanelItem | ||
key={workbook.workbookId} | ||
tabIndex={index.toString()} | ||
workbook={workbook} | ||
isSidebarOpen={ | ||
isSidebarToggleOn && isDeviceBreakpoint('tablet') | ||
} | ||
onSidebarToggleClick={() => | ||
setIsSidebarToggleOn((prev) => !prev) | ||
} | ||
/> | ||
))} | ||
{workbookListData.length ? ( | ||
workbookListData.map((workbook, index) => ( | ||
<TabPanelItem | ||
key={workbook.workbookId} | ||
tabIndex={index.toString()} | ||
workbook={workbook} | ||
isSidebarOpen={ | ||
isSidebarToggleOn && isDeviceBreakpoint('tablet') | ||
} | ||
onSidebarToggleClick={() => | ||
setIsSidebarToggleOn((prev) => !prev) | ||
} | ||
/> | ||
)) | ||
) : ( | ||
<QuestionTabPanelBlank /> | ||
)} | ||
Comment on lines
+49
to
+65
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. [p-5] errorboundary suspense empty 세개를 묶은 하나의 선언형 컴포넌트를 만들면 재미있을거 같네요 ㅎㅎ There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 좋은데요!??? 근데 이 부분은 요청이 성공했는데 응답 배열이 비어있는 경우도 표현해줘야해서 suspense를 활용하긴 힘들겠네요ㅠㅠ |
||
</QuestionSelectionBoxTabPanelAreaDiv> | ||
</Tabs> | ||
</Box> | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,66 @@ | ||
import { Button, Typography } from '@foundation/index'; | ||
import { css } from '@emotion/react'; | ||
import { theme } from '@styles/theme'; | ||
import BlankBear from '@assets/images/blank-bear.png'; | ||
import { Link } from 'react-router-dom'; | ||
import { PATH } from '@constants/path'; | ||
import WorkbookAddButton from '@common/QuestionSelectionBox/WorkbookAddButton'; | ||
import useBreakpoint from '@hooks/useBreakPoint'; | ||
|
||
const QuestionTabPanelBlank = () => { | ||
const isDeviceBreakpoint = useBreakpoint(); | ||
return ( | ||
<div | ||
css={css` | ||
display: flex; | ||
flex-direction: column; | ||
justify-content: space-between; | ||
align-items: center; | ||
row-gap: 1rem; | ||
padding: 1rem; | ||
height: 100%; | ||
`} | ||
> | ||
<div | ||
css={css` | ||
display: flex; | ||
flex-direction: column; | ||
row-gap: 1rem; | ||
padding: 1rem; | ||
width: 100%; | ||
border-radius: 1rem; | ||
background-color: ${theme.colors.surface.default}; | ||
`} | ||
> | ||
<Typography variant="body1"> | ||
이런! 면접 질문이 하나도 없군요😥 | ||
<br /> | ||
다른 사람이 만든 면접 세트를 가져오거나 | ||
<br />새 면접 세트를 만들어보세요 | ||
</Typography> | ||
<div | ||
css={css` | ||
display: flex; | ||
justify-content: flex-end; | ||
gap: 0.5rem; | ||
`} | ||
> | ||
{isDeviceBreakpoint('tablet') && <WorkbookAddButton />} | ||
<Link to={PATH.WORKBOOK}> | ||
<Button | ||
css={css` | ||
width: 100%; | ||
height: 100%; | ||
`} | ||
> | ||
면접 세트 보러가기 | ||
</Button> | ||
</Link> | ||
</div> | ||
</div> | ||
<img height="350" src={BlankBear} alt="박스 옆에서 손을 흔드는 곰" /> | ||
</div> | ||
); | ||
}; | ||
|
||
export default QuestionTabPanelBlank; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
[p-5] 뭔가 억울해 보여....