리뷰 방법 안내 페이지 구현 (issue#52) #56
Conversation
| const { selectedIndex, tabList } = useTabs(); | ||
|
|
||
| return ( | ||
| <S.TabCurrentContentContainer>{tabList[selectedIndex].content}</S.TabCurrentContentContainer> |
There was a problem hiding this comment.
사소하지만, 여기 컴포넌트 명에 따라서 CurrentTabContainer로 바꿔도 좋을 것 같아요~!
| <S.TabCurrentContentContainer>{tabList[selectedIndex].content}</S.TabCurrentContentContainer> | |
| <S.CurrentTabContainer>{tabList[selectedIndex].content}</S.CurrentTabContainer> |
frontend/src/pages/GuidePage.tsx
Outdated
|
|
||
| //TODO 여기서만 쓰일 데이터 같아서 일단 위에 선언해놓습니다. @버건디 | ||
|
|
||
| const TAB_LIST: TabData[] = [ |
There was a problem hiding this comment.
Guide와 관련된 Tab List라는 걸 드러내기 위해 GUIDE라는 단어를 앞에 붙여주는 건 어떻게 생각하시나요~?
추가로, TabList라는 컴포넌트가 있어서 헷갈릴 수도 있을 것 같은데, 혹시 이 상수가 Tab의 정보를 담았다는 사실을 드러내기 위해 data나 Info라는 사용해보면 어떨까요!
(개인적으로는, Data라는 단어는 api 관련 데이터로 오해할 여지가 있을 것 같아서 Info가 더 낫다고 생각합니다 ㅎㅎ)
| const TAB_LIST: TabData[] = [ | |
| const GUIDE_TAB_INFO: TabInfo[] = [ | |
| const GUIDE_TAB_DATA: TabData[] = [ |
There was a problem hiding this comment.
TabInfo 라고 변경해보았습니다. 짚어주셔서 감사합니다~! 🙇
|
잘 만들어주셨네요~!!! 버건디 고생하셨습니다! 👍🏻 |
| animation: ${fadeIn} 0.3s ease-out; | ||
| `; | ||
|
|
||
| export const TabContainer = styled.div<{ selected: boolean }>` |
There was a problem hiding this comment.
| export const TabContainer = styled.div<{ selected: boolean }>` | |
| export const TabContainer = styled.div<{ isSelected: boolean }>` |
앞에 is 붙여주면 좋을 것 같습니다 🫡
There was a problem hiding this comment.
수정하였어요! 짚어주셔서 감사합니다 🙇
| tabList: TabData[]; | ||
| } | ||
|
|
||
| export default function Tabs({ children, tabList }: TabsProps) { |
There was a problem hiding this comment.
TabList와 Tabs가 네이밍만 봤을 때는 헷갈릴 수도 있겠다는 생각이 들었습니다. 그런데 어떻게 개선해볼 수 있을지는 잘 안 떠오르네요 🥲🥲 혹시 버건디에게 좋은 아이디어가 있으실까요?
There was a problem hiding this comment.
TabList는 TabMenu 어떨까요? 혹은 TabHeader도 제안드려요! (더 좋은 네이밍 있으면 적극 환영입니다🙌)
There was a problem hiding this comment.
두분 다 감사드려용~~ 한번 수정해보았는데, 추가적으로 수정할 부분 있으면 말씀 주세요!!
| export const TabCurrentContentContainer = styled.div` | ||
| word-break: break-all; | ||
| margin-top: 2rem; | ||
| animation: ${fadeIn} 0.3s ease-out; |
frontend/src/hooks/useTabs.ts
Outdated
| tabList: TabData[]; | ||
| } | ||
|
|
||
| // TODO 컨텍스트 폴더를 따로 뺄지 안뺄지 이야기 나눠보아야 할거 같아요 ! @버건디 |
There was a problem hiding this comment.
저는 컨텍스트 폴더 분리하는 것 좋습니다!
| tabList: TabData[]; | ||
| } | ||
|
|
||
| export default function Tabs({ children, tabList }: TabsProps) { |
There was a problem hiding this comment.
TabList는 TabMenu 어떨까요? 혹은 TabHeader도 제안드려요! (더 좋은 네이밍 있으면 적극 환영입니다🙌)
frontend/src/pages/GuidePage.tsx
Outdated
| @@ -0,0 +1,35 @@ | |||
| import Tabs from '@/components/tab/Tabs'; | |||
| import HowToFork from '@/components/guide/HowToFork'; | |||
| import { TabData } from '@/types'; | |||
There was a problem hiding this comment.
type import 추가하면 좋을 것 같아요~!
There was a problem hiding this comment.
엉엉 맨날 놓치네요..
수정했습니다! 감사해요~!
구현 요약
리뷰 방법 안내 페이지를 구현합니다.
연관 이슈
close #52