[Feature/BAR-37] 토스트 컴포넌트 개발 #16
Conversation
.eslintrc.json
Outdated
| @@ -23,6 +23,7 @@ | |||
| "noUselessIndex": true | |||
| } | |||
| ], | |||
| "react-hooks/exhaustive-deps": "off", | |||
There was a problem hiding this comment.
@wonjin-dev
요거 deps에 넣고 싶지 않은 내용까지 넣으라고 추천하고 있어서 빼긴 했습니다.
요 룰 필요할까요??
There was a problem hiding this comment.
@wonjin-dev
70f54ca
요 부분 반영해보았습니다. 감사합니다 ㅎㅎ
src/stores/toastStore.ts
Outdated
| }, | ||
| })); | ||
|
|
||
| export const useToastStore = <T>( |
There was a problem hiding this comment.
useToast 등을 통해 한 번 더 래핑해서,
사용처에서 셀렉터가 아니라 const { showToast } = useToast();
요런 느낌이면 더 편할것 같은데, 어떻게 생각하시나용 ??
There was a problem hiding this comment.
@wonjin-dev @dmswl98
감사합니다 ㅎㅎ 해당 형태가 훨씬 좋겠네요!
634e3df
해당 커밋에 반영해보았습니다 ㅎㅎ
pages/index.tsx
Outdated
| const showToast = useToastStore((state) => state.showToast); | ||
|
|
||
| return ( | ||
| <div> | ||
| <button | ||
| type="button" | ||
| onClick={() => showToast({ message: '토스트 노출' })} | ||
| > | ||
| 토스트 노출 | ||
| </button> | ||
| </div> | ||
| ); |
There was a problem hiding this comment.
여기에 작성하는 대신 스토리 파일을 만들면 좋을 것 같아요!
src/components/Toast/Toast.tsx
Outdated
| return ( | ||
| <div className={clsx(toast, isToastVisible && open)} role="alert"> | ||
| <span>{message}</span> | ||
| </div> | ||
| ); |
There was a problem hiding this comment.
clsx 대신, 이렇게 작성할 수도 있습니다.
const TabsItem = ({ children, path }: PropsWithChildren<TabsItemProps>) => {
const pathname = usePathname();
return (
<a href={path} className={styles.tabItem({ isActive: path === pathname })}>
{children}
</a>
);
};export const tabItem = recipe({
base: {
fontSize: '16px',
letterSpacing: '-0.5px',
paddingBottom: '4px',
borderBottom: '2px solid transparent',
},
variants: {
isActive: {
true: {
fontWeight: 700,
borderBottomColor: '#121212',
},
},
},
});
src/stores/toastStore.ts
Outdated
| }, | ||
| })); | ||
|
|
||
| export const useToastStore = <T>( |
| export const toastStore = createStore<State & Action>((set, get) => ({ | ||
| toastData: INITIAL_TOAST_DATA, |
There was a problem hiding this comment.
create가 아니라 createStore는 어떤 걸까요..? 문서에서 찾지 못했어요ㅜㅜ
There was a problem hiding this comment.
miro-ring
force-pushed
the
feature/BAR-37
branch
from
2389f5c to
e7ee68c
Compare
|
@wonjin-dev @dmswl98 lint-staged/lint-staged#825 |
Summary
To Reviewers
애니메이션과 관련해서는 배포 이후에 디자인 기획쪽에 확인 요청 드릴 예정입니다.
097f55b
토스트 테스트를 위한 환경은 머지 직전에 제거할 에정입니다.
2줄 이상의 토스트는 디자인에 보이지 않아서 일단 대응하지 않았습니다.
How To Test
홈 페이지에서 "토스트 노출" 클릭시 토스트가 정상 노출되어야 합니다.