Day 21 - Milestone

haxxru log;·2026년 3월 31일

프로그래머스_데브코스

목록 보기

19/53

이 글은 2026년 03월 31일 작성된 글입니다

오늘은 프로젝트 최종 발표회가 있어서 오전에는 기능 개선과 오류 수정,
그리고 팀원들과 함께 발표 준비를 진행했다.
발표 전 피드백을 반영해 로그인 UI를 개선했고, 발표 이후 강사님의 코드
리뷰와 피드백을 들을 수 있었다.

1. 로그인 비밀번호 보기 토글 기능 추가

오전에 FT님께서 배포된 서비스를 확인하시면서 로그인 / 회원가입
화면에서 비밀번호를 확인할 수 있는 토글 기능이 있으면 좋겠다는
피드백을 주셨다.

바로 useState를 사용하여 비밀번호 표시 여부를 제어하는 기능을
추가했다.

const [showPassword, setShowPassword] = useState(false)

input의 type을 상태값에 따라 변경하도록 구현했다.

<input
  type={showPassword ? 'text' : 'password'}
/>

버튼을 클릭하면 상태가 토글되도록 처리했다.

<button
  type="button"
  onClick={() => setShowPassword((prev) => !prev)}
>
  <EyeIcon show={showPassword} />
</button>

간단한 기능이지만 사용자 경험 측면에서 중요한 부분이라 빠르게 반영했다.

2. 발표 준비 및 프로젝트 발표

오전에는 팀원들과 함께 프로젝트 발표 자료를 준비했고, 오후에는 최종
발표를 진행했다.

발표 이후 강사님의 질의응답 시간에서 우리 팀 프로젝트에 대해 몇 가지
좋은 피드백을 들을 수 있었다.

특히 다음 부분을 좋게 봐주셨다.

GitHub Issue / PR / 컨벤션을 통한 협업 관리
컴포넌트와 앱 구조를 잘 분리한 점
로직과 인터페이스(UI) 구조 분리

프로젝트 구조를 설계할 때 신경 썼던 부분이었는데, 그 부분을 좋게
평가해주셔서 인상 깊었다.

3. 소셜 로그인 로직 구조화

내가 담당했던 Auth 파트에서도 구조를 잘 나누었다는 피드백을 받을 수
있었다.

특히 소셜 로그인 로직을 하나의 함수로 묶어 처리한 부분을 좋게
평가해주셨다.

const signInWithOAuth = async (
  provider: 'google' | 'kakao',
  onSubmittingChange: (value: boolean) => void,
  failureMessage: string,
) => {
  setErrorMessage('')
  setInfoMessage('')
  onSubmittingChange(true)

  const supabase = createClient();
  const { error } = await supabase.auth.signInWithOAuth({
    provider,
    options: {
      redirectTo: `${window.location.origin}/auth/callback`,
    },
  });

  if (error) {
    setErrorMessage(failureMessage)
    onSubmittingChange(false)
  }
}