Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 7 additions & 15 deletions app/_components/LoginActionSection.tsx
Original file line number Diff line number Diff line change
@@ -1,17 +1,11 @@
"use client";
import BubbleDiv from "@/app/_components/BubbleDiv";
import { KakaoLoginButton, GoogleLoginButton } from "./SocialButtonList";
import LoginMethodDrawer from "./LoginMethodDrawer";
import { KakaoLoginButton } from "./SocialButtonList";
import Link from "next/link";

export default function ScreenLoginActionSection() {
const handleKakaoLogin = () => {
window.location.href = `${process.env.NEXT_PUBLIC_API_URL}/oauth2/authorization/kakao`;
// alert("코매칭 서비스는 10/13일부로 종료되었습니다.");
};

const handleGoogleLogin = () => {
window.location.href = `${process.env.NEXT_PUBLIC_API_URL}/oauth2/authorization/google`;
// alert("코매칭 서비스는 10/13일부로 종료되었습니다.");
};

return (
Expand All @@ -24,14 +18,12 @@ export default function ScreenLoginActionSection() {
>
카카오로 빠르게 시작하기
</KakaoLoginButton>
<LoginMethodDrawer
onKakaoLogin={handleKakaoLogin}
onGoogleLogin={handleGoogleLogin}
<Link
href="/login"
className="all-[unset] typo-12-500 text-color-gray-500 hover:text-color-gray-700 mt-2 cursor-pointer underline transition-colors"
>
<button type="button" className="all-[unset] cursor-pointer underline">
다른 방법으로 로그인
</button>
</LoginMethodDrawer>
이메일로 로그인
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

'이메일로 로그인'과 같은 사용자 노출 문자열이 하드코딩되어 있습니다. 프로젝트의 유지보수성과 향후 다국어 지원(i18n) 가능성을 고려하여, 이러한 문자열은 별도의 로케일 파일이나 상수 관리 파일을 통해 관리하는 것이 좋습니다.

</Link>
<span className="typo-12-600 text-footo-text-main mt-[6.75vh] mb-[6.15vh]">
Developed By Team Comatching, Catholic University of Korea
</span>
Expand Down
121 changes: 63 additions & 58 deletions app/_components/LoginMethodDrawer.tsx
Original file line number Diff line number Diff line change
@@ -1,60 +1,65 @@
"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";
// "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;
}
Comment on lines +1 to 65
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

사용하지 않는 코드를 대량으로 주석 처리하여 방치하고, 빌드 경고를 피하기 위해 더미 컴포넌트를 export하는 것은 코드베이스의 가독성과 유지보수성을 저해합니다. Git과 같은 버전 관리 시스템을 통해 코드 이력이 보존되므로, 불필요해진 파일과 코드는 과감히 삭제하여 프로젝트 구조를 직관적으로 유지하는 것을 권장합니다.

References
  1. 파일 구조가 직관적인지 확인하고 서버/클라이언트 코드를 명확히 분리해야 합니다. 사용하지 않는 더미 파일은 구조적 혼란을 야기합니다. (link)

Loading