GETP-119 feature: 로그인 페이지 구현

[chae-won-shin]

✨ 구현한 기능

• 로그인 페이지 기능

📢 논의하고 싶은 내용

• signin 에셋 이미지랑 로그인 div 박스가 align-items: center을 설정해줘도 두개 높이가 안 맞고 둘 사이 간격이 생겨서 margin을 음수값으로 설정해 맞춰 두긴 했는데 좀 더 좋은 방법이 있을지 이야기해보고 싶습니다!

🎸 기타

[toothlessdev]

✨ 구현한 기능

• 로그인 페이지 기능

📢 논의하고 싶은 내용

• signin 에셋 이미지랑 로그인 div 박스가 align-items: center을 설정해줘도 두개 높이가 안 맞고 둘 사이 간격이 생겨서 margin을 음수값으로 설정해 맞춰 두긴 했는데 좀 더 좋은 방법이 있을지 이야기해보고 싶습니다!

🎸 기타

• signin 에셋 이미지랑 로그인 div 박스가 align-items: center을 설정해줘도 두개 높이가 안 맞고 둘 사이 간격이 생겨서 margin을 음수값으로 설정해 맞춰 두긴 했는데 좀 더 좋은 방법이 있을지 이야기해보고 싶습니다!

이거 관련해서는 어떤식으로 안되는지 보기가 어려워서 대면 스프린트때 직접 보는게 좋을것 같네용

[toothlessdev]

해야할일

1. 회원가입 Section 컴포넌트 픽셀단위 너비 100% 로 수정
2. 회원가입 Section 공통 너비 지정 (500px)
3. Footer 컴포넌트 반응형 수정, 리팩토링
4. API & Service Layer 추상화
5. axios interceptor 사용해서 토큰 로직구현 ?
6. React Router Guard 설정 및 Guard 컴포넌트, 토큰관련 훅 구현 ?
7. 로그인 회원가입 페이지에 모달 / 버튼 관련 이벤트 핸들러 바인딩
8. 비밀번호 및 이메일 인증시 하단 오류 라벨 설정 (상태관리)

앞으로 진행방식 ?

• 코드 알아서 짜오고 핵심로직 설명하는 방식으로 진행 ?
• 코드 짜기 직전 공통된 컴포넌트 분리해보기 (Section 의 너비 또는 Layout 같은거)

추가 논의사항 및 학습이 필요한 사항

1. 이미지 처리 (public vs import)
2. 반응형 관련 로직 (breakpoint, 반응형 navBar 동작원리 ..)
3. Axios Interceptor (이건 나도 많이 안써봐서 배워야함.. 아니면 그냥 api layer 로 추상화 ?)
4. 회원가입 Section 공통 너비 지정 (500px) 컴포넌트로 분리 (Ex. AuthSection)
5. https://velog.io/@svk5496/%EB%94%94%EC%9E%90%EC%9D%B8-%EC%8B%9C%EC%8A%A4%ED%85%9C-%EB%A7%8C%EB%93%A4%EC%96%B4%EB%B3%B4%EC%9E%90#%EC%BB%AC%EB%9F%AC%EC%8B%9C%EC%8A%A4%ED%85%9C (컬러 시스템 도입 ?)