Conversation
Qodo reviews are paused for this user.Troubleshooting steps vary by plan Learn more → On a Teams plan? Using GitHub Enterprise Server, GitLab Self-Managed, or Bitbucket Data Center? |
There was a problem hiding this comment.
Code Review
이번 풀리퀘스트는 구글 로그인 기능을 제거하고, 기존의 드로어(Drawer) UI 대신 이메일 로그인 페이지로 직접 연결되는 링크를 추가하여 로그인 섹션을 간소화했습니다. 코드 리뷰에서는 사용하지 않는 LoginMethodDrawer.tsx 파일을 주석 처리하거나 더미 컴포넌트를 만들어 방치하는 대신, 버전 관리 시스템을 믿고 파일을 완전히 삭제하여 프로젝트 구조를 청결하게 유지할 것을 권장했습니다. 또한, '이메일로 로그인'과 같이 사용자에게 노출되는 문자열을 하드코딩하지 말고 상수나 로케일 파일을 통해 관리하여 유지보수성을 높이도록 피드백을 제공했습니다.
| // "use client"; | ||
| // import React from "react"; | ||
| // import Link from "next/link"; | ||
| // import { KakaoLoginButton } from "./SocialButtonList"; | ||
| // // import { KakaoLoginButton, GoogleLoginButton } from "./SocialButtonList"; | ||
| // import { | ||
| // Drawer, | ||
| // DrawerContent, | ||
| // DrawerTitle, | ||
| // DrawerTrigger, | ||
| // } from "@/components/ui/drawer"; | ||
| // | ||
| // interface LoginMethodDrawerProps { | ||
| // children: React.ReactNode; | ||
| // onKakaoLogin: () => void; | ||
| // onGoogleLogin: () => void; | ||
| // } | ||
| // | ||
| // export default function LoginMethodDrawer({ | ||
| // children, | ||
| // onKakaoLogin, | ||
| // onGoogleLogin, | ||
| // }: LoginMethodDrawerProps) { | ||
| // return ( | ||
| // <Drawer> | ||
| // <div className="typo-14-600 text-color-text-caption2 flex flex-col items-center leading-[1.6]"> | ||
| // <span>또는</span> | ||
| // <DrawerTrigger asChild>{children}</DrawerTrigger> | ||
| // </div> | ||
| // <DrawerContent | ||
| // showHandle={false} | ||
| // className="mx-auto flex h-auto min-h-[44.33dvh] w-full flex-col items-center px-4 pt-6 pb-[32px] md:max-w-[430px]" | ||
| // > | ||
| // <DrawerTitle className="sr-only">다른 로그인 방법</DrawerTitle> | ||
| // <div className="flex w-full flex-col items-start gap-2"> | ||
| // <span className="typo-20-700 text-bottomsheet-text-title"> | ||
| // 로그인/회원가입 | ||
| // </span> | ||
| // <span className="typo-14-500 text-[#999]"> | ||
| // 로그인과 회원가입 수단은 동일합니다. | ||
| // <br /> | ||
| // 원하는 계정으로 시작하세요. | ||
| // </span> | ||
| // </div> | ||
| // <KakaoLoginButton onClick={onKakaoLogin} className="mt-8 mb-4"> | ||
| // 카카오로 시작하기 | ||
| // </KakaoLoginButton> | ||
| // {/* <GoogleLoginButton className="w-full" onClick={onGoogleLogin}> | ||
| // 구글로 시작하기 | ||
| // </GoogleLoginButton> */} | ||
| // <div className="typo-14-500 text-bottomsheet-text-caption mt-6 flex flex-col items-center"> | ||
| // <span>혹은</span> | ||
| // <Link href="/login" className="all-[unset] cursor-pointer underline"> | ||
| // 이메일로 로그인 | ||
| // </Link> | ||
| // </div> | ||
| // </DrawerContent> | ||
| // </Drawer> | ||
| // ); | ||
| // } | ||
|
|
||
| interface LoginMethodDrawerProps { | ||
| children: React.ReactNode; | ||
| onKakaoLogin: () => void; | ||
| onGoogleLogin: () => void; | ||
| } | ||
|
|
||
| export default function LoginMethodDrawer({ | ||
| children, | ||
| onKakaoLogin, | ||
| onGoogleLogin, | ||
| }: LoginMethodDrawerProps) { | ||
| return ( | ||
| <Drawer> | ||
| <div className="typo-14-600 text-color-text-caption2 flex flex-col items-center leading-[1.6]"> | ||
| <span>또는</span> | ||
| <DrawerTrigger asChild>{children}</DrawerTrigger> | ||
| </div> | ||
| <DrawerContent | ||
| showHandle={false} | ||
| className="mx-auto flex h-auto min-h-[44.33dvh] w-full flex-col items-center px-4 pt-6 pb-[32px] md:max-w-[430px]" | ||
| > | ||
| <DrawerTitle className="sr-only">다른 로그인 방법</DrawerTitle> | ||
| <div className="flex w-full flex-col items-start gap-2"> | ||
| <span className="typo-20-700 text-bottomsheet-text-title"> | ||
| 로그인/회원가입 | ||
| </span> | ||
| <span className="typo-14-500 text-[#999]"> | ||
| 로그인과 회원가입 수단은 동일합니다. | ||
| <br /> | ||
| 원하는 계정으로 시작하세요. | ||
| </span> | ||
| </div> | ||
| <KakaoLoginButton onClick={onKakaoLogin} className="mt-8 mb-4"> | ||
| 카카오로 시작하기 | ||
| </KakaoLoginButton> | ||
| {/* <GoogleLoginButton className="w-full" onClick={onGoogleLogin}> | ||
| 구글로 시작하기 | ||
| </GoogleLoginButton> */} | ||
| <div className="typo-14-500 text-bottomsheet-text-caption mt-6 flex flex-col items-center"> | ||
| <span>혹은</span> | ||
| <Link href="/login" className="all-[unset] cursor-pointer underline"> | ||
| 이메일로 로그인 | ||
| </Link> | ||
| </div> | ||
| </DrawerContent> | ||
| </Drawer> | ||
| ); | ||
| // TypeScript 빌더 경고 우회용 Dummy Export | ||
| export default function DummyLoginMethodDrawer() { | ||
| return null; | ||
| } |
There was a problem hiding this comment.
사용하지 않는 코드를 대량으로 주석 처리하여 방치하고, 빌드 경고를 피하기 위해 더미 컴포넌트를 export하는 것은 코드베이스의 가독성과 유지보수성을 저해합니다. Git과 같은 버전 관리 시스템을 통해 코드 이력이 보존되므로, 불필요해진 파일과 코드는 과감히 삭제하여 프로젝트 구조를 직관적으로 유지하는 것을 권장합니다.
References
- 파일 구조가 직관적인지 확인하고 서버/클라이언트 코드를 명확히 분리해야 합니다. 사용하지 않는 더미 파일은 구조적 혼란을 야기합니다. (link)
| 다른 방법으로 로그인 | ||
| </button> | ||
| </LoginMethodDrawer> | ||
| 이메일로 로그인 |
No description provided.