refactor: my page refactor

[gahyuun]

📌 작업 내용

close #138
마이페이지에 있는 에러와 개선 사항들을 수정했습니다
merge는 백엔드 업데이트와 동시에 진행하겠습니다

구현 내용 및 작업 했던 내역

• 미이수 과목 삭제 시 안내 toast를 노출
• 기이수 과목 채플 점수 0->0.5로 변경
• 모든 사용자 성적표 재업로드 문구 노출
• 캐싱으로 인해 올바르지 않은 검색 결과가 노출되었고 수정
• 검색 결과가 존재하지 않았을 때 UI 구현

🤔모든 사용자 성적표 재업로드 문구 노출

• 백엔드가 이번에 업데이트 되면 업데이트 전 성적표를 업로드했던 모든 사용자가 성적표를 재업로드를 해야했고 재업로드에 대한 안내 UI를 구현했습니다 ( 재업로드를 안하면 로직 변경으로 인해 결과값이 이상하게 보인다고 하네요 )
• 흐름은 다음과 같습니다

1. 사용자가 로그인
2. 업데이트 전 성적표 미입력한 유저: grade-upload 페이지이동, 업데이트 후 성적표 미입력한 유저: grade-upload 페이지 이동, 업데이트 전 성적표 입력한 유저: 안내문 노출 후 grade-upload 페이지 이동, 업데이트 후 성적표 입력한 유저: my page이동

9월 3일이라고 표기되어있는데, 날짜는 백엔드 업데이트 날짜로 변경될 예정입니다.

🔊 도움이 필요한 부분

• 안내문은 페이지 컴포넌트에 존재하는데 안내문을 open하는 코드는 Sign-in-Form에 존재합니다. 이렇게 되면 도메인 컴포넌트가 페이지 컴포넌트를 알아야 하는건데, 어떻게 수정하면 좋을지 모르겠습니다. 안내문이 도메인 컴포넌트라고 생각되진 않아서요!

[seonghunYang]

• 많은 작업이 이뤄졌네요! 수고 많으셨습니다.

[seonghunYang]

파일 이름을 케밥 케이스로 변경하는게 좋겠습니다

[gahyuun]

수정했습니다!
f8b52be

[seonghunYang]

credit 외 속성은 모두 그대로 사용하니, 구조 분해 할당을 사용하면 코드가 더 보기 편할 것 같아요.

Suggested change

	const processChapel = (takenLectures: TakenLectureInfoResponse[]) => {
	return takenLectures.map((lecture) => {
	return {
	id: lecture.id,
	year: lecture.year,
	semester: lecture.semester,
	lectureCode: lecture.lectureCode,
	lectureName: lecture.lectureName,
	credit: lecture.lectureName === '채플' ? 0.5 : lecture.credit,
	};
	});
	};
	const processChapel = (takenLectures: TakenLectureInfoResponse[]) => {
	return takenLectures.map((lecture) => {
	return {
	...lecture,
	credit: lecture.lectureName === '채플' ? 0.5 : lecture.credit,
	};
	});
	};

[gahyuun]

알려주셔서 감사합니다
f0c4e62

[seonghunYang]

과목을 여러 개 삭제하면 어떤 과목이 삭제되었는지 확인하기 어려울 것 같아서 lectureName이나 코드 정보를 ID로 가져오는 것이 어렵지 않다면, 토스트 메시지에 추가하는 것도 좋아보여요.

[gahyuun]

f0c4e62
기존 delete logic을 수정함으로써 해결했습니다
이전에 lecture 컴포넌트 관련해서 어떻게 구현할지 고민을 많이 했어서 그런지 간단하게 수정할 수 있었습니다-!

[seonghunYang]

• useDialog 훅은 유틸 훅이므로 계층과 상관없이 사용할 수 있습니다. 제 생각에는 UpdateInstriction 컴포넌트가 이 위치에 있을 필요는 없다고 봅니다. 페이지 수준에 위치시켜도 useDialog로 켜고 닫을 수 있으니, 페이지 컴포넌트로 올려도 괜찮다고 생각해요.
• 또 다른 방법이자 가장 좋다고 생각하는 방법은, Sign-in-form 컴포넌트가 성공 시 작동하는 props를 받고 호출하는 겁니다. 그리고 페이지 컴포넌트에서 dialog를 여는 open 함수를 핸들러로 넘겨주는 거죠. 이렇게 하면 Sign-in-form 컴포넌트는 재업로드 dialog에 대해 모르고, 페이지 수준에서 전부 처리할 수 있을 것 같습니다.

[yougyung]

수고많으셨어요!

[yougyung]

로그인시에 만료유저여부를 식별하는만큼 SignInPage에 위치시키는 것은 어떨까요?
제가 생각하는 방법도 선배가 생각하시는 그림과 동일한 것 같은데, 모달을 키는 함수를 props로 전달하는 방법을 통해 로그인 성공시에 모달을 노출하는 방식이 좋아보여요. SignUpForm에서 해당 구조를 사용하고 있어요!

[gahyuun]

@seonghunYang @yougyung
의견 주신대로 signInForm에 모달 키는 함수를 props로 전달하여 해결했습니다! 다만 SignInPage에서 모달을 open 하는 함수를 구현하기엔 SignInPage가 client component가 되어야 해서, SignInFormContainer 라는 페이지 컴포넌트를 따로 구현했습니다
next는 서버 컴포넌트와 클라이언트 컴포넌트를 구분하다보니,감싸는 컴포넌트들이 생겨나는 점이 아쉽네요

의견주셔서 감사합니다~
62d9865

• 추가적으로 isExpiredUser는 return false로 변경했습니다 해당 PR이 빨리 머지되면 좋겠는데 백엔드 업데이트가 언제 마무리가 될지 모르겠어서,. ㅠㅠ 일단 return false로 하고 머지를 한 다음에 백엔드 업데이트가 되면 원래 코드대로 수정하겠습니다.

[gahyuun]

@seonghunYang @yougyung 정확한 원인은 모르겠으나 development 모드일때 쿠키가 잘 동작하지 않네요 그래서 크로마틱도 실패하는 것 같아요 이 문제는 해당 PR 머지 후 새로운 PR에서 작업하겠습니다!

[seonghunYang]

• 수고하셨습니다