Refactor/#249: 회원가입 페이지 리팩토링 by SwimmingRiver · Pull Request #144 · we-write/frontend

SwimmingRiver · 2025-06-16T09:50:51Z

변경 사항

서버사이드 렌더링으로 변경하여 로그인한 유저가 접근하지 못하게 변경했습니다.
유효성 검사 함수로 분리했습니다.
로그인 페이지에서도 사용할 수 있도록 입력 폼 필드 분리하였습니다.

구현결과(사진첨부 선택)

(내용)

netlify · 2025-06-16T09:50:55Z

✅ Deploy Preview for we-write ready!

Name	Link
🔨 Latest commit	`a116110`
🔍 Latest deploy log	https://app.netlify.com/projects/we-write/deploys/6853c3a5b429e4000822c158
😎 Deploy Preview	https://deploy-preview-144--we-write.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

myeongheonhong · 2025-06-17T01:20:08Z

src/app/auths/signup/_components/LinkComponent.tsx

사소한 네이밍이긴한데
이미 컴포넌트라는것을 알고 있는데 Component라는 네이밍을 굳이 한번더 명시하지 않아도 될거 같아요!
그 대신 조금 더 이 컴포넌트가 무슨 역할을 하는지 명확한 네이밍되 면 좋을 거 같습니다!
LinkToSignIn 이런식으로?!

처음에 footer 같은 이름을 쓰려다가 링크라는 역할이 모호한거 같아서 컴포넌트라고 했는데
좀 더 명확하게 할 수 있겠네요!

myeongheonhong · 2025-06-17T01:23:53Z

src/hooks/api/auth/useSignUpForm.ts

여기 내부에 useForm이 들어가도 괜찮겠네요!

myeongheonhong · 2025-06-17T01:25:28Z

src/app/auths/signup/_components/SignupForm.tsx

+import Button from '@/components/common/Button/Button';
+
+import { useForm } from 'react-hook-form';
+import { singUpValidate } from '@/utils/validators/auth';


오타발견!!

myeongheonhong · 2025-06-17T01:27:40Z

src/app/auths/_components/FormField.tsx

해당 컴포넌트를 구현한 이유가 궁금합니다!!
왜냐하면 이미 추상화가 되어서 사용하는 컴포넌트를 한번더 추상화한 느낌이라서 말씀드리는겁니다!

validate를 분리하면서 validate에 맞춘 공용 컴포넌트가 필요할 거 같다는 생각으로 개발했습니다.

juyesu · 2025-06-17T00:27:08Z

src/utils/validators/auth.ts

+  }
+};
+
+export const emailValidation = (email: string): string | true => {


유효성 검사를 통과하면 true를 반환하는 구조군요! 큰 차이는 없겠지만, 함수들의 반환 값이 전부 동일해서
타입 별칭을 사용하는 방법도 있을 것 같네요!
지금의 인라인 방식이 더 직관적이긴 해서 편하신데로 해주셔도 상관없을 것 같습니다

juyesu · 2025-06-17T00:30:09Z

src/app/auths/signup/_components/SignupForm.tsx

+      <div className="flex flex-col gap-2">
+        <div className="flex flex-col gap-2">


flex 컨테이너 내부에 요소가 하나뿐이라서 해당 스타일이 실제로 적용되고 있을까요?

juyesu · 2025-06-17T00:31:36Z

src/utils/validators/auth.ts

@@ -0,0 +1,70 @@
+import { SignUpValidateProps } from './type';
+
+export const singUpValidate = ({


오타인 것 같네요~! singUp

juyesu · 2025-06-17T00:44:29Z

src/app/auths/signup/_components/SignupForm.tsx

+        label="닉네임"
+        placeholder="닉네임을 입력해주세요"
+        register={register}
+        validate={singUpValidate}


이 부분의 동작 방식을 잘 이해하지 못했는데 설명해주실 수 있을까요?

외부 함수를 통채로 넘기는 이유?(호출한 반환 값을 넘기는 것과의 차이)

FormField내부에서 validate: (value) => validate({ value, name }) 가 동작하는 방식 (좌측의 validate는 register의 프로퍼티이고, 우측의 validate는 props? value를 넘기는 방식?)

내부에서 함수가 필요할때만 동작하는 것을 생각하고 함수를 넘기는 방식으로 개발했습니다.

말씀하신대로 validate로 커스텀한 검증 함수를 넘겨줍니다.
props로 넘겨준 register의 안에서 validate에서 커스텀 검증함수를 이름과 값을 받아 유효성 검사를 하는 구조입니다.

juyesu · 2025-06-17T00:53:57Z

src/app/auths/signup/_components/SignupForm.tsx

+            register={register}
+            validate={singUpValidate}
+            password={getValues('password') ?? ''}
+            errors={errors}


지금의 구조도 문제는 없지만 확장성과 가독성 측면에서 useFormContext를 사용하는 방법도 있을 것 같네요!

juyesu · 2025-06-17T01:11:47Z

src/app/auths/_components/PasswordFormField.tsx

+      }}
+      suffixIcon={
+        <button
+          aria-label="암호 표시 버튼"


스크린 리더 사용자가 의미를 파악할 수 있는 label 문구로 변경해보면 좋을 것 같아요!
예를 들면 aria-label={isShowPassword ? '비밀번호 숨기기' : '비밀번호 보이기'} 같이 현재 버튼의 역할을 명확하게
전달하는 방법이 있을 것 같습니다.
현재의 suffixIcon에 적용하는 것이 의미가 적절할 지 고민이 필요할 것 같은데,
버튼의 눌림 상태(활성화 여부, 선택 여부)를 사용자에게 전달하는 aria-pressed라는 속성도 존재하니
한번 찾아보셔도 좋을 것 같습니다!

aria-pressed 라는게 있었군요
접근성은 공부할 게 많네요
감사합니다

juyesu · 2025-06-17T01:13:54Z

src/app/auths/_components/PasswordFormField.tsx

+        <button
+          aria-label="암호 표시 버튼"
+          type="button"
+          className="flex items-center justify-center"


flex-center 커스텀 클래스를 사용하는 방법도 있을 것 같네요!

juyesu · 2025-06-17T01:27:32Z

src/app/auths/signup/_components/LinkComponent.tsx

+import { APP_ROUTES } from '@/constants/appRoutes';
+import Link from 'next/link';
+
+const LinkComponent = () => {


이건 개발자 개인의 취향일텐데
저는 개인적으로는 컴포넌트명에 Component 네이밍을 사용하지 않는 것이 좋은 것 같아요

LinkComponent를 기준으로 보면 앞에 있는 'Link'란 단어만으로 이게 어떤 역할을 하는 컴포넌트일 지 유추해야 되서
의미가 명시적이지 않은 느낌이 있는 것 같습니다

juyesu · 2025-06-17T01:31:34Z

src/utils/validators/auth.ts

+  return true;
+};
+
+export const favoriteValidation = (favorite: string): string | true => {


emailValidation, favoriteValidation 등의 함수들이 각각 import되서 사용하는 경우를 고려해서 export 해주신걸까요?

최초에는 별도로 호출하려고 했는데 변경이후에 수정을 안했네요 수정하겠습니다!

juyesu · 2025-06-17T01:36:23Z

src/app/auths/signup/page.tsx

-import { useRouter } from 'next/navigation';
+const SignUp = async () => {
+  const { isSignIn } = await getMyInfoOnServer();
+  const referer = (await headers()).get('referer');


오호 referer 는 useParams나 await params 등으로 가져오지 않고 처음 보는 문법으로 가져오는군요!
만약에 URL에 referer가 없으면 변수에는 null이나 undefined가 담기게 되는걸까요?

null로 반환됩니다
한옥님이 만들어주신 훅 사용가능하면 반영하도록 하겠습니다

hoxey2Front

고생하셨습니다, 페이지를 컴포넌트 단위로 분리하셨군요!
엇 근데 PR 리뷰 제목에 오타가 있네요! (패이지 => 페이지)

…efactor/#249-page-signup

…te/frontend into refactor/#252-page-signin

juyesu · 2025-06-18T08:31:38Z

src/hooks/api/auth/useSignUpForm.ts

+        toast.success('회원가입이 완료되었습니다.');
        router.push(APP_ROUTES.signin);


이 부분 구현하면서 궁금했는데
toast 호출과 router.push를 연이어서 실행하면
페이지가 넘어간 뒤에 toast가 출력되나요? 아니면 페이지 전환되는 순간 toast가 사라지나요?

페이지가 전환돼도 설정했던 시간동안 유지되고 사라지는 걸로 확인했어요

juyesu · 2025-06-18T08:37:32Z

src/hooks/api/auth/useCreateUser.ts

+      toast({
+        type: 'error',
+        title: '회원가입에 실패했습니다.',
+        message: error.message,
+        duration: 5,
+      });


혹시 error.message가 어떤 문자열로 들어올까요?
만약에 '회원가입에 실패했습니다.'라고 들어온다면 title과 message가 중복되서 어색할 수도 있고,
그럴 가능성은 별로 없어보이지만 영어로 된 에러 메시지가 들어온다면 title은 한글인데 message는 영어인 문제가
생길 수 있을지 궁금하네요
어떤 message가 들어오냐에 따라서 만약 부자연스러울 것 같다면
error.message를 아예 toast내부에 띄우지 않는 방법도 있을 것 같아요

이런 형태로 나옵니다.
title에 메시지를 넣는 게 나을까요?

오호 그렇군요! 지금처럼 타이틀이 핵심 설명, 메시지가 부가 설명인 구조가 좋아보이는 것 같아요!

나중에 유저 관리를 DB로 옮기게 되면 회원가입 버튼을 누르기전에 '이메일 중복확인' 같은 버튼을 눌러야 되도록
하는 것도 좋을 것 같네요!

Refactor/#252: 로그인 페이지 리팩토링

hoxey2Front

고생하셨습니다~! 코드가 훨씬 가독성이 좋아진거 같네요!!

…rators Feat: 모임 참여에 성공하면 DB 테이블에 사용자 정보가 입력되는 기능 구현

SwimmingRiver added 6 commits June 16, 2025 16:15

refactor: validate 분리

bd0a431

refactor: 경로 이동replace로 수정

b019f2e

refactor: 회원가입 페이지 ssr로 변경

7dbdbde

refactor: 컴포넌트 분리

381c646

chore: 타입 수정

6c78dc6

refactor: 폼 입력 필드 분리

5e2b217

SwimmingRiver requested review from hoxey2Front, juyesu and myeongheonhong June 16, 2025 09:50

SwimmingRiver self-assigned this Jun 16, 2025

myeongheonhong reviewed Jun 17, 2025

View reviewed changes

juyesu reviewed Jun 17, 2025

View reviewed changes

hoxey2Front reviewed Jun 17, 2025

View reviewed changes

SwimmingRiver added 16 commits June 17, 2025 10:45

refactor: 타입 수정

85e4ec9

refactor: 컴포넌트 분리

5243922

refactor: ssr로 변경

da356cb

fix: 타입 수정

f00632b

refactor: 접근성 설정

3fd1910

fix: 스타일 수정

539d402

chore: 오타수정

4332827

chore: 파일명 변경

74268c5

chore: export 제거

896719e

refactor: useForm 수정

b44c5c9

chore: 불필요한 태그 제거

d69bb98

fix: referr 수정

04c0d58

chore: 파일명 변경

a5428b8

refactor: useForm 수정

8a4f327

Merge branch 'develop' of https://github.com/we-write/frontend into r…

1c03697

…efactor/#249-page-signup

feat: 회원가입 토스트 추가

3a6e59d

SwimmingRiver added 2 commits June 17, 2025 16:10

Merge branch 'refactor/#249-page-signup' of https://github.com/we-wri…

df26c13

…te/frontend into refactor/#252-page-signin

feat: 토스트 추가

992f2da

SwimmingRiver added the Review-Applied 모든 리뷰를 반영완료하였음을 의미합니다. label Jun 18, 2025

SwimmingRiver added 5 commits June 18, 2025 15:08

chore: 타입 수정

604e11f

fix: 불필요한 태그 제거

6a315fe

refactor: hooks 에러 핸들링 분리

f403731

chore: 타입명 수정

83fa5a6

refactor: 회원가입 에러 핸들링 분리

83932bc

SwimmingRiver changed the title ~~Refactor/#249: 회원가입 패이지 리팩토링~~ Refactor/#249: 회원가입 페이지 리팩토링 Jun 18, 2025

juyesu reviewed Jun 18, 2025

View reviewed changes

hoxey2Front approved these changes Jun 19, 2025

View reviewed changes

SwimmingRiver and others added 4 commits June 19, 2025 10:34

refactor: 입력 필드 InputForm 으로 변경

2de7b91

Merge pull request #146 from we-write/refactor/#252-page-signin

e0a7fce

Refactor/#252: 로그인 페이지 리팩토링

Merge branch 'develop' into refactor/#249-page-signup

5414630

fix: getMyInfoOnServer 경로 변경

a116110

hoxey2Front approved these changes Jun 20, 2025

View reviewed changes

juyesu approved these changes Jun 20, 2025

View reviewed changes

SwimmingRiver merged commit 15e4973 into develop Jun 20, 2025
5 checks passed

SwimmingRiver deleted the refactor/#249-page-signup branch June 20, 2025 06:42

myeongheonhong added a commit that referenced this pull request Jun 20, 2025

Merge pull request #93 from we-write/feature/#144-add-user-to-collabo…

0bafd54

…rators Feat: 모임 참여에 성공하면 DB 테이블에 사용자 정보가 입력되는 기능 구현

SwimmingRiver restored the refactor/#249-page-signup branch September 23, 2025 13:51

		<div className="flex flex-col gap-2">
		<div className="flex flex-col gap-2">

		@@ -0,0 +1,70 @@
		import { SignUpValidateProps } from './type';

		export const singUpValidate = ({

		toast.success('회원가입이 완료되었습니다.');
		router.push(APP_ROUTES.signin);

Comments

Conversation

SwimmingRiver commented Jun 16, 2025

변경 사항

구현결과(사진첨부 선택)

Uh oh!

netlify bot commented Jun 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for we-write ready!

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!

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!

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!

hoxey2Front 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!

hoxey2Front left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

netlify bot commented Jun 16, 2025 •

edited

Loading