-
Notifications
You must be signed in to change notification settings - Fork 1
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
[FE] assignment : Daystar #4
base: main
Are you sure you want to change the base?
Conversation
…to test page(/Daystar) on footer
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.
(과제한정) 주석 자세히 달아놓으니까 좋네요!
머지 안 할거라서 approve는 안 하는데 만약 코멘트 보고 수정한 것 검사 받고 싶으면 따로 알려주세요
다음 과제할 때는 같은 브랜치/PR로 작업하고 PR 내용 업데이트 해주시면 됩니다
수고하셨어요!
const handleSecondTextChange = (value: string) => { | ||
setSecondText(value); | ||
setSecondHasError(value.length < 5); // 5글자보다 짧으면 에러 뜨는 것으로 테스트 | ||
}; |
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.
(optional) 여기서 이 input을 한 번도 클릭하지 않았을 때는 에러가 안 뜨게 하려면 어떻게 해야할까요!
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.
secondHasError
state의 초깃값을 false로 하면 되는 것 같습니다!
2024-summer-FE-seminar/packages/web/src/common/components/Daystar/DaystarTextInput.tsx
Outdated
Show resolved
Hide resolved
2024-summer-FE-seminar/packages/web/src/common/components/Daystar/DaystarItemNumberInput.tsx
Show resolved
Hide resolved
2024-summer-FE-seminar/packages/web/src/common/components/Daystar/DaystarItemNumberInput.tsx
Outdated
Show resolved
Hide resolved
2024-summer-FE-seminar/packages/web/src/common/components/Daystar/DaystarItemNumberInput.tsx
Outdated
Show resolved
Hide resolved
2번째 과제 & 1번째 과제 코멘트 반영까지 완료했습니다! |
방금 커밋에서, API 콜로 바꾼 DaystarMyServiceFrame 쪽이 제대로 로딩되지 않고 에러를 띄웁니다. mock=true일 때는 mock data를 반영하여야 할 것 같은데 이렇게 되는 이유가 무엇인지 궁금합니다ㅠㅠ |
3번째 과제까지 모두 완료하였습니다! |
|
||
import DaystarMyPageMainFrame from "@sparcs-clubs/web/features/Daystar/my/frames/DaystarMyPageMainFrame"; | ||
|
||
const DaystarMy = () => <DaystarMyPageMainFrame />; |
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.
페이지에 프레임이 하나일 때는 웬만하면 프레임 쓰지 말기!
const DaystarWrapper = styled.div` | ||
display: flex; | ||
flex-direction: column; | ||
gap: 8px; | ||
`; |
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.
FlexWrapper를 사용합시당
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.
이렇게 한 페이지에서 다 가져오지 않고 사용하는 경우도 있을 수 있으니 파일은 분리하는게 좋을 것 같아요!
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.
수고하셨습니다! 추가로 질문 있으면 슬랙 디엠 주세요~
1차시 결과물은
Daystar
에서, 2~3차시 결과물은Daystar/my
에서 확인 가능합니다.1차시 과제
InputText
와ItemNumberInput
컴포넌트를, 각각DaystarInputText
와DaystarItemNumberInput
이라는 이름으로 구현하였습니다./Daystar
에 있으며, footer를 통해 편하게 접근할 수 있도록 홈 화면 footer 수정도 했습니다!예전 사진
2차시 과제
DaystarMyPageMainFrame
을 구현하였습니다. 이를 통해Daystar/my
경로로 접근할 수 있는 마이페이지를 만들었습니다.로그
오류 사진
3차시 과제
features
아래에Daystar
디렉토리를 추가하였습니다.AsyncBoundary
는 각각의 섹션을 구성하는 Frame 단위로 사용했습니다. (나의 정보 / 서비스 신청 내역)undefined
를 허용하는 형태로 props 타입을 수정했습니다. 또한 API 응답 값이undefined
라면 Error를 띄우도록 하였습니다. (해당 작업에 있어서AsyncBoundary
를 사용하려 했으나, list 값의undefined
가능성으로 인해 에러가 떠서 따로 작업했습니다)useGetInfos.ts
에 모아 두었는데, 좋은 방식인지 모르겠습니다.DaystarMyInfoFrame
에서, 기존의MyInfoFrame
코드를 가지고 (DB에서 가져온 전화번호)와 (입력되어 있는 전화번호)의 일치 여부를 바탕으로 저장 버튼의 활성화 여부를 결정할 수 있도록 일부 리팩토링을 진행했습니다.스크린샷