[4주차 기본/심화/공유 과제] 회원가입 & 로그인 by imddoy · Pull Request #5 · AND-SOPT-WEB/ChaeHyunKim

imddoy · 2024-11-12T14:55:16Z

✨ 구현 기능 명세

💡 기본 과제

React + TypeScript
Axios 라이브러리 사용
ThemeProvider, GlobalStyle 사용

로그인

로그인 타이틀
아이디(이름) 입력 Input
비밀번호 입력 Input
로그인 버튼 (hover시 배경색 바꾸기 (transition 적용))
회원가입 버튼 (회원가입 페이지로 이동)

회원가입

이름 - 비밀번호 - 취미 입력이 한 페이지에서 일어남 (컴포넌트만 갈아끼우기)
상단에 회원가입 타이틀
하단에는 로그인 페이지로 가는 링크

회원가입(이름)

이름 입력 Input
다음 버튼 (비밀번호 입력 폼 나옴)
Input 비어있을 때 버튼 비활성화

회원가입(비밀번호)

비밀번호 입력 Input
비밀번호 확인 Input
둘 중 하나라도 비어있으면 버튼 비활성화
두 비밀번호가 다르면 버튼 비활성화
다음 버튼 (취미 입력 폼 나옴)

회원가입(취미)

취미 입력 Input
회원가입 버튼
Input 비어있을 때 버튼 비활성화
회원가입 실패 시 에러메시지 alert 출력
회원가입 성공 시 회원번호 alert 출력하고, login 페이지로 이동

마이페이지

헤더에 취미, 내 정보 메뉴 탭
헤더에 로그아웃 버튼
로그아웃 버튼 클릭 시 token 저장 정보 삭제하고 로그인 페이지로 이동 (token 저장 위치는 자율)
헤더 취미, 내 정보 취미 페이지, 내 정보 페이지 출력 (1개의 페이지로 구현해도 되고, url 달라도 됨)

마이페이지(취미)

마이페이지(내 정보)

비밀번호만 입력하면 비밀번호만 변경
취미만 입력하면 취미만 변경
둘 다 입력하면 둘다 변경
둘 다 비어있으면 alert

🔥 심화 과제

any 사용하지 않기

회원가입 (이름)

8글자 넘어가도 버튼 비활성화 처리
8글자 넘어가는 것에 대해 에러메시지 출력

회원가입 (비밀번호)

비밀번호 보이기 버튼 추가
8글자 넘어가도 버튼 비활성화 처리
8글자 넘어가는 것에 대해 에러메시지 출력
비밀번호 불일치 에러 메시지 출력
(선택) 에러메시지 한개만 출력해도 됨 (우선순위는 알아서)

회원가입 (취미)

8글자 넘어가도 버튼 비활성화 처리
8글자 넘어가는 것에 대해 에러메시지 출력

공유과제

https://wave-web.tistory.com/125

❗️ 내가 새로 알게 된 점

~ 부분 이렇게 구현했어요, 피드백 부탁해요!

❓ 구현 과정에서의 어려웠던/고민했던 부분

~ 부분이 잘 구현한건지 잘 모르겠어요!
~부분 다른 방법이 있는지 궁금해요!
유효성검사 부분이 어려웠어요

🥲 소요 시간

12h

🖼️ 구현 결과물

https://imdevdoy.notion.site/4-13c8a5b7422b80eb9064c89cf318f76f?pvs=4

youtheyeon

👏👏👏 과제 너무 잘하셨네요!
코드 읽으면서 계속 아 이렇게 구현할 수도 있구나! 아 이렇게 하면 더 깔끔해지는구나를 반복했습니다.
다만, 과제가 굉장히 가볍고 간단한 사이트인데 그에 비해 파일이 너무 잘게 쪼개져 있어 개인적으로 조금 복잡하게 느껴지기도 합니다..!
또한, 별 거 아니지만 코드 보다보니 {" "} 이렇게 남아있는 부분이 있던데 요런 부분들은 삭제하면 더 깔끔할 것 같습니다:)
그치만 이것들 제외하곤 코멘트 달 게 거의 없네용... 많이 배워 갑니다! 수고하셨어요~!

youtheyeon · 2024-11-13T09:19:01Z

week4-user/src/routes/MyPageRoutes.tsx

+  const user = localStorage.getItem("user");
+  if (!user) {
+    alert("로그인 후 이용하세요.");
+    return redirect("/login");


우와 이런 식으로 리다이렉트를 구현하는 거군요! 새롭게 알아갑니다💡

그냥 navigate로 url 주는거랑 redirect 사용하는거랑 어떤 차이가 있나요?

youtheyeon · 2024-11-15T14:27:09Z

week4-user/src/styles/generator.ts

+export const Generators = {
+  flexGenerator: (flexDirection = "row", alignItems = "center", justifyContent = "center") => css`
+    display: flex;
+    flex-direction: ${flexDirection};
+    align-items: ${alignItems};
+    justify-content: ${justifyContent};
+  `,
+};


항상 여러 줄로 작성했던 코드인데 이렇게 하니까 한 줄에 작성할 수 있어 훨씬 간결해지네요!👍

youtheyeon · 2024-11-15T14:28:18Z

week4-user/src/components/common/input/Input.tsx

+        {type === "password" && (
+          <S.ToggleVisibilityIcon
+            onClick={handlePasswordVisibility}
+            as={isPasswordVisible ? IconEyeOn : IconEyeOff}


as라는 prop은 처음 보네요..! 새로 알아갑니당

youtheyeon · 2024-11-15T15:32:14Z

week4-user/src/pages/Hobby.tsx

+        const errorMsg =
+          status === 401 && data.code === "00"
+            ? "토큰이 없습니다. 다시 로그인하세요."
+            : status === 403 && data.code === "00"
+            ? "유효하지 않은 토큰입니다."
+            : status === 404 && data.code === "00"
+            ? "유효하지 않은 경로입니다."
+            : "알 수 없는 오류가 발생했습니다.";
+        alert(errorMsg);


조건 별로 alert 문을 중복해서 작성하는 게 아니라 메시지만 바꾸니까 훨씬 깔끔한 것 같네요!
저도 이 방식으로 리팩토링 해야겠습니다.

저도 이렇게 할 수 있겠네요

gwagjiug

코리하면서 많이 공부했네요 css 제네레이터, 에러처리 로직에 대한 고민까지 해볼 수 있는 시간이였고

alert 를 errorMessage 로 묶어서 처리한 거 전 생각못했는데 인상 깊었습니다 ㅎ

gwagjiug · 2024-11-17T03:02:13Z

week4-user/.yarn/sdks/eslint/lib/types/index.d.ts

+  : exports => exports;
+
+// Defer to the real eslint your application uses
+module.exports = wrapWithUserWrapper(absRequire(`eslint`));


이건 무슨 코드인가요???

gwagjiug · 2024-11-17T03:10:27Z

week4-user/src/pages/Hobby.tsx

+        const errorMsg =
+          status === 401 && data.code === "00"
+            ? "토큰이 없습니다. 다시 로그인하세요."
+            : status === 403 && data.code === "00"
+            ? "유효하지 않은 토큰입니다."
+            : status === 404 && data.code === "00"
+            ? "유효하지 않은 경로입니다."
+            : "알 수 없는 오류가 발생했습니다.";
+        alert(errorMsg);


저도 이렇게 할 수 있겠네요

gwagjiug · 2024-11-17T03:13:29Z

week4-user/src/components/signup/SignUpForm.tsx

+      <S.Title>{title}</S.Title>
+      {children}
+      <p>
+        이미 회원이신가요? <S.SignupBtn onClick={goToLogin}>로그인</S.SignupBtn>


goToLogin 이라는 함수명 맘에드네요 😎

gwagjiug · 2024-11-17T03:19:08Z

week4-user/src/apis/userApi.ts

+export const login = async (username: string, password: string) => {
+  const response = await apiClient.post("/login", { username, password });
+  return response.data.result;
+};


이 부분에서는 결과값만 넘겨주고 페이지에서 결과를 기준으로 에러 관련 alert를 보여주는 것 맞나요??

저도 api 레벨에서 에러처리가 되는 것 vs 호출하는 곳에서 에처 처리 하는 것에 대해서 리뷰하면서 찾아봤는데

재사용성 측면에서는 api 에서 에러처리를 하는 것이 로직 처리를 일관적으로 구현할 수 있어서 좋다고 하고, 사용자 경험 측면에서는 호출한 곳에서 UI/UX 를 자유롭게 제어가능하다는 점때문에

호출하는 곳에서 에러처리가 더 유리하다고 알려져있네용

그래서 여러 곳에서 동일한 API 호출을 사용하는 경우에는 api 레벨에서 에러처리하는 것이 더 권장되고,

에러를 호출한 컴포넌트/페이지에서 세부적 으로 처리해야 하는 경우에는 채현님 방식이 더 적합한 것 같아요

덕분에 하나 더 공부했네요 😎

gwagjiug · 2024-11-17T03:20:34Z

week4-user/src/components/common/input/Input.style.ts

+
+export const InputWrapper = styled.article`
+  position: relative;
+  ${Generators.flexGenerator("row", "center", "center")}


이런식으로 사용하는거네요 이거 저도 한번 써보겠습니다 ㅎㅎ

gwagjiug · 2024-11-17T03:20:47Z

week4-user/src/components/common/input/Input.style.ts

+  position: relative;
+  ${Generators.flexGenerator("row", "center", "center")}
+
+  width: inherit;


inherit 는 무슨 속성인가요?

gwagjiug · 2024-11-17T03:21:42Z

week4-user/src/hooks/useNavigation.ts

+    navigate("/login");
+  };
+
+  const goToMyPageTab = (tab) => {


함수명 짓기에 달인 ㅋㅋ goTo 좋네요

gardening-y · 2024-11-17T11:23:02Z

과제 되게 열심히 하시네영. 멋진 오비다!!!!!!!!! 꺄르륵

imddoy added 15 commits November 11, 2024 17:53

init: 프로젝트 초기세팅

be633d3

feat: 헤더 구현

3b700e8

feat: input 컴포넌트 구현

9a6d68c

feat: button 컴포넌트 구현

b6b98d5

design: 로그인 페이지 퍼블리싱

643a6b6

design: 회원가입 페이지 퍼블리싱

1f4fb4e

feat: 로그인, 회원가입 api 연결

98123ff

feat: 로그인 api 응답 처리

ec0931e

feat: 회원가입 api 응답 처리

51dac4a

feat: 회원가입 input 유효성 검사

db0845c

feat: 마이페이지 구현

e3b1af3

feat: 로그아웃 구현

54c56ba

design: 버튼 hover 시 transition 배경색 전환 적용

825812a

refactor: 중복 코드 분리

8739604

fix: 헤더 tab 초기화 오류 수정

f6c5575

imddoy requested review from bongtta, gwagjiug and youtheyeon November 12, 2024 14:55

imddoy self-assigned this Nov 12, 2024

youtheyeon reviewed Nov 15, 2024

View reviewed changes

gwagjiug reviewed Nov 17, 2024

View reviewed changes

Conversation

imddoy commented Nov 12, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✨ 구현 기능 명세

💡 기본 과제

🔥 심화 과제

공유과제

❗️ 내가 새로 알게 된 점

❓ 구현 과정에서의 어려웠던/고민했던 부분

🥲 소요 시간

🖼️ 구현 결과물

Uh oh!

youtheyeon left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

gwagjiug left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

gardening-y commented Nov 17, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

imddoy commented Nov 12, 2024 •

edited

Loading

youtheyeon left a comment •

edited

Loading