[7주차] 갓챠 미션 제출합니다. #5
Conversation
Feature/1 initial setting
Feature/2 design setting
# Conflicts: # src/App.tsx # src/pages/signup.tsx
Feature/2 api connenct
Feature/2 api connenct
Feature/2 api connenct
chore : 디테일 수정 (드롭다운, 탑 바, 사용자 이름)
| const [emailValue, setEmailValue] = useState(''); | ||
| const [nameValue, setNameValue] = useState(''); | ||
| const [idValue, setIdValue] = useState(''); | ||
| const [teamValue, setTeamValue] = useState(''); | ||
| const [partValue, setPartValue] = useState(''); | ||
| const [passwordValue, setPasswordValue] = useState(''); | ||
| const [passwordCheckValue, setPasswordCheckValue] = useState(''); | ||
| const [isFilled, setIsFilled] = useState(false); |
There was a problem hiding this comment.
react hook에도 타입 지정을 할 수 있어서 ts 쓰신 김에 이부분들 각각의 타입에 맞게 지정해보시는 것도 좋을 것 같아요~~~
| const [emailValue, setEmailValue] = useState(''); | |
| const [nameValue, setNameValue] = useState(''); | |
| const [idValue, setIdValue] = useState(''); | |
| const [teamValue, setTeamValue] = useState(''); | |
| const [partValue, setPartValue] = useState(''); | |
| const [passwordValue, setPasswordValue] = useState(''); | |
| const [passwordCheckValue, setPasswordCheckValue] = useState(''); | |
| const [isFilled, setIsFilled] = useState(false); | |
| const [emailValue, setEmailValue] = useState<string>(''); | |
| const [nameValue, setNameValue] = useState<string>(''); | |
| const [idValue, setIdValue] = useState<string>(''); | |
| const [teamValue, setTeamValue] = useState<string>(''); | |
| const [partValue, setPartValue] = useState<string>(''); | |
| const [passwordValue, setPasswordValue] = useState<string>(''); | |
| const [passwordCheckValue, setPasswordCheckValue] = useState<string>(''); | |
| const [isFilled, setIsFilled] = useState<boolean>(false); |
| const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => { | ||
| const { name, value } = event.target; | ||
| if (name === 'name') { | ||
| setNameValue(value); | ||
| } else if (name === 'id') { | ||
| setIdValue(value); | ||
| } else if (name === 'password') { | ||
| setPasswordValue(value); | ||
| } else if (name === 'passwordCheck') { | ||
| setPasswordCheckValue(value); | ||
| } else if (name === 'email') { | ||
| setEmailValue(value); | ||
| } | ||
| }; |
There was a problem hiding this comment.
input handler를 추상화하여 여러 input에 맞게 사용하신 부분 상당히 효율적인 것 같습니다~~
| setIsFilled( | ||
| nameValue.trim() !== '' && | ||
| idValue.trim() !== '' && | ||
| passwordValue.trim() !== '' && | ||
| passwordValue === passwordCheckValue | ||
| ); |
There was a problem hiding this comment.
회원가입 같은 경우는 단순히 입력 여부만 따져도 괜찮지만 각각 검증로직을 갖추는 것도 좋을 것 같습니다~~ 정규표현식을 통해서 입력값을 쉽게 검증할 수 있어요!
https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Regular_expressions
| }, [passwordValue, passwordCheckValue]); | ||
|
|
||
| return ( | ||
| <> |
There was a problem hiding this comment.
뭔가 최상위의 태그에 대한 스타일링이 명확하지 않아서 그런지 모바일로 봤을 때 width가 적절하게 설정되지 않는 것 같아요! 확인해보시면 좋을 것 같아요~
| BACKEND: "BE", | ||
| }; | ||
|
|
||
| const TopBar = () => { |
There was a problem hiding this comment.
TopBar 컴포넌트를 각각의 페이지 컴포넌트마다 포함해서 나타내신 것 같아요! 많은 페이지에서 TopBar가 사용된다면 최상위인 App 컴포넌트에 선언해서 라우팅 시에도 지속적으로 유지되도록 하고, TopBar가 필요없는 페이지에서는 동적으로 pathname을 참조하여 TopBar가 사라지도록 구현해보는 것도 좋을 것 같습니다~~
|
|
||
| export const usePostLogin = () => { | ||
| const navigate = useNavigate(); | ||
| const { mutate, isPending, error, isSuccess } = useMutation({ |
There was a problem hiding this comment.
| const { mutate, isPending, error, isSuccess } = useMutation({ | |
| const { mutate:loginRequest, isPending:isLoginPending, error:loginError, isSuccess:isLoginSuccess } = useMutation({ |
위와 같은 방식으로 바로 네이밍을 할 수 있어요! 혹시 여러 데이터 fetching 기능이 한 컴포넌트에서 사용될 때에는 위와 같이 서로 다르게 네이밍해서 사용해봐도 좋을 것 같습니다~
| */ | ||
| export const useGetTeamResult = () => { | ||
| const navigate = useNavigate(); | ||
| const { isLoading, data, error } = useQuery({ |
There was a problem hiding this comment.
useQuery 버전 5로 사용하셨네요..!! 저는 버전4가 편해서 4로 했는데 5로어떻게 하는지 배워갑니다~
| }); | ||
|
|
||
| // 요청 인터셉터 | ||
| axiosInstance.interceptors.request.use((config) => { |
There was a problem hiding this comment.
axios intercepotor 사용하는 방법도 배워갑니다~
| //응답데이터 처리 | ||
| if (res.status === 201) { | ||
| alert("로그인 성공!"); | ||
| localStorage.setItem("accessToken", res.data.accessToken); |
There was a problem hiding this comment.
localStorage로 로그인 유지해주신 거 좋은것 같습니다!
| name: nameValue, | ||
| partName: partValue, | ||
| teamName: teamValue, | ||
| }); |
There was a problem hiding this comment.
근데 회원가입하다보니,, 저희 팀 이름 REDDI 인데 READY라고 되어있습니다...
배포 링크
🗳️🎉🗳️
피그마 디자인
피그마 링크🎨
과제 필수 요건에 UI/UX에 대한 감각을 최대한 발휘해 디자인을 적용 해보라고 하셔서.. 없는 감각이지만 피그마를 새로 팠습니다.😅 1차적으로 다양한 의견 제시해 만든 다음 프론트 내부에서 피드백하여 디벨롭하는 식으로 진행했습니다! 개발 과정에서 품이 많이 드는 디자인의 경우 소소하게 수정해가며 개발했습니다. 피그마를 백지에서부터 만들어보는 게 처음이었는데 디자이너분들의 소중함을 뼈저리게 느낄 수 있었던 시간이었습니다..🥲 dev 모드로 봤을 때 확실히 그룹화, padding 등등 엉성한 부분이 많이 보여서 협업의 중요성을 잘 깨달을 수 있었습니다.
타입스크립트
저희 갓챠 프로젝트에서 CSR방식이 좀 더 적합하다고 생각해 Next가 아닌 Reat+typescript로 구현하기로해서 이번 투표 과제도 CSR로 구현해봤습니다~!
react-query를 적극 활용해 페이지나 컴포넌트 상에서는 마크업만 구현하고 api통신 관련한 요청이나 응답처리는 모두 custom-hook내에서 처리했습니다
custom-hook을 쓰는 과정에서 자잘한 오류가 있어서 처음으로 stackoverflow에 질문도 남겨보며 많이 배울 수 있었습니다 ㅎㅎ
미디어 쿼리
모바일로도 투표할 수 있도록 따로 설정하였습니다 ~! 탑바에 로그인 로그아웃 뿐만 아니라 사용자 정보가 나와있어 이부분이 버튼을 가리면 불편할 것 같아서, 그리고 또 예쁘지 않아보여서..ㅎㅎ 단계를 조금 더 나눠서 구분했습니다.
느낀 점
지혜_ 백엔드 팀원들과 협업하면서 진행할 수 있어서 뜻깊었던 과제였습니다! 과제 도중 커스텀 훅을 만드는 게 나을까 등의 고민을 하다 그냥 넘겨버렸던 몇몇 부분들이 조금 아쉽게 느껴집니다. 메인 프로젝트에서는 조금 더 효율을 고려한 코드를 작성해야겠다 싶습니다. 😅
은비_ CORS오류부터 프론트 상 필요한 API수정요청까지 백엔드 팀원분들께 요청드린 부분이 많았는데 바로바로 처리해주셔서 감사한 시간이었습니다 ㅎㅎ gitflow를 따라 PR멘트로 소통하며 협업이 원활하게 굴러간 것도 좋았습니다~!