feat: 가이드 페이지 구현 #134
feat: 가이드 페이지 구현 #134
Conversation
|
🔗 배포된 storybook 주소: https://65f015a4aed45406385006ee-suswxoaeut.chromatic.com/ |
|
🔗 배포된 storybook 주소: https://65f015a4aed45406385006ee-opanqpyawv.chromatic.com/ |
| return ( | ||
| <div className={contentWrapper}> | ||
| <div className={titleWrapper}> | ||
| <Text weight="bold" color="yellow" style={{ fontSize: '12px' }}> |
| <Text size="display1" weight="semiBold" color="sub" style={{ whiteSpace: 'pre-wrap', textAlign: 'center' }}> | ||
| {description} | ||
| </Text> |
There was a problem hiding this comment.
style을 className으로 추가해주면 더 좋을것 같아용
| import { container, stepper, wrapper } from './stepper.css'; | ||
|
|
||
| interface StepperProps { | ||
| selectedStepper: string; |
There was a problem hiding this comment.
이 selectedStepper을 string으로 관리하는 이유가 있나요? 다른 곳 보면 parseInt를 하거나 밑에서 String으로 변환시키는 것 같은데 number로 관리하면 안그래도 되지 않나 싶어서요!
There was a problem hiding this comment.
이게 useTabMenu 훅이 string을 받고 있어서 저렇게 썼던 거 같아요!
number로 받게 하고, 사용처에서
const selectedStepper = parseInt(selectedTabMenu);요렇게 묶는 방식으로 변경했슴다!
| <button | ||
| className={isSelected ? stepper['active'] : stepper['default']} | ||
| type="button" | ||
| value={String(index)} |
There was a problem hiding this comment.
value는 뽑아서 쓸 때 아마 string으로 변환될거에요
|
🔗 배포된 storybook 주소: https://65f015a4aed45406385006ee-qtfmzhggsw.chromatic.com/ |
|
@Leejin-Yang |
Issue
✨ 구현한 기능
가이드 페이지를 구현하였습니다.
왕펑이 만든 useMenu custom hook 재사용했슴니당.
최상단에 있는 bar 이름은 material-ui에 있는 stepper의 이름을 참고했습니다!
📢 논의하고 싶은 내용
1. 이거 연결을 어디다가 할까요?
보통 홈페이지에 첫 진입하면 뜨지 않아요...?????
일단은 가이드 배너에 연결시켜놨습니다!
(요기에,,,!)
2. 높이
피그마 보면, 각 step마다 글자와 이미지 사이의 높이가 다르더라구요!
이거를 어떻게 하죵...?
(지금은 세 화면 다 높이 똑같음)
젤 쉬운 방법은 props로 높이를 받는건데, 뭔가 부자연스러운 느낌이라....
다른 방법 아시는 분 있나용?!?!
🎸 기타
x
⏰ 일정