Skip to content

Commit ab2a89b

Browse files
DongEun02DongEun02
authored
Merge pull request #17 from DeveloperBlog-Devflow/feature/login-page
feat: 깃허브 소셜 로그인
2 parents 2727c43 + 68df4b0 commit ab2a89b

18 files changed

Lines changed: 115 additions & 49 deletions

‎app/(auth)/login/page.tsx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
'use client';
22

3-
import { AuthCard } from '@/components/auth/AuthCard';
4-
import { FindPasswordModal } from '@/components/auth/FindPasswordModal';
5-
import { LoginForm } from '@/components/auth/LoginForm';
3+
import AuthCard from '@/components/auth/AuthCard';
4+
import FindPasswordModal from '@/components/auth/FindPasswordModal';
5+
import LoginForm from '@/components/auth/LoginForm';
66
import { useState } from 'react';
77

8-
export default function Page() {
8+
const Page = () => {
99
// 비밀번호 재설정 모달 state
1010
const [isModalOpen, setIsModalOpen] = useState(false);
1111

@@ -25,4 +25,6 @@ export default function Page() {
2525
{isModalOpen && <FindPasswordModal onClose={handleCloseModal} />}
2626
</div>
2727
);
28-
}
28+
};
29+
30+
export default Page;

‎app/(auth)/signup/page.tsx‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
1-
import { AuthCard } from '@/components/auth/AuthCard';
2-
import { SignupForm } from '@/components/auth/SignupForm';
3-
export default function Page() {
1+
import AuthCard from '@/components/auth/AuthCard';
2+
import SignupForm from '@/components/auth/SignupForm';
3+
4+
const Page = () => {
45
return (
56
<div className="bg-background">
67
<AuthCard title="회원가입" description="회원가입하여 계정을 생성하세요">
78
<SignupForm />
89
</AuthCard>
910
</div>
1011
);
11-
}
12+
};
13+
14+
export default Page;

‎app/main/page.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
const Page = () => {
2+
return <div>main</div>;
3+
};
4+
5+
export default Page;

‎app/not-found.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import Link from 'next/link';
22

3-
export default function NotFound() {
3+
const NotFound = () => {
44
return (
55
<main className="bg-background flex min-h-screen flex-col items-center justify-center px-4">
66
<h1 className="text-7xl font-extrabold text-gray-900">404</h1>
@@ -14,4 +14,6 @@ export default function NotFound() {
1414
</Link>
1515
</main>
1616
);
17-
}
17+
};
18+
19+
export default NotFound;

‎app/page.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
import { LandingHeader } from '@/components/landing/LandingHeader';
2-
import { HeroSection } from '@/components/landing/HeroSection';
3-
import { FeatureList } from '@/components/landing/FeatureList';
4-
import { LandingPreview } from '@/components/landing/LandingPreview';
1+
import LandingHeader from '@/components/landing/LandingHeader';
2+
import HeroSection from '@/components/landing/HeroSection';
3+
import FeatureList from '@/components/landing/FeatureList';
4+
import LandingPreview from '@/components/landing/LandingPreview';
5+
56
export default function Home() {
67
return (
78
<div className="bg-background h-full space-y-60">

‎components/auth/AuthCard.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ type Props = {
66
children: React.ReactNode;
77
};
88

9-
export function AuthCard({ title, description, children }: Props) {
9+
const AuthCard = ({ title, description, children }: Props) => {
1010
return (
1111
<div className="flex h-screen w-screen -translate-y-6 flex-col items-center justify-center">
1212
<Link
@@ -24,4 +24,6 @@ export function AuthCard({ title, description, children }: Props) {
2424
</div>
2525
</div>
2626
);
27-
}
27+
};
28+
29+
export default AuthCard;

‎components/auth/Button.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,13 @@ type ButtonProps = {
99
onClick?: () => void;
1010
};
1111

12-
export function Button({
12+
const Button = ({
1313
children,
1414
variant = 'primary',
1515
className,
1616
type = 'button',
1717
onClick,
18-
}: ButtonProps) {
18+
}: ButtonProps) => {
1919
return (
2020
<button
2121
type={type}
@@ -35,4 +35,6 @@ export function Button({
3535
{children}
3636
</button>
3737
);
38-
}
38+
};
39+
40+
export default Button;

‎components/auth/FindPasswordModal.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
'use client';
22

33
import { useEffect, useRef, useState } from 'react';
4-
import { Button } from './Button';
5-
import { FormField } from './FormField';
4+
import Button from './Button';
5+
import FormField from './FormField';
66

77
type FindPasswordModalProps = {
88
onClose: () => void;
99
};
1010

11-
export function FindPasswordModal({ onClose }: FindPasswordModalProps) {
11+
const FindPasswordModal = ({ onClose }: FindPasswordModalProps) => {
1212
// 이메일 state
1313
const [email, setEmail] = useState('');
1414
const emailInputRef = useRef<HTMLInputElement>(null);
@@ -88,4 +88,6 @@ export function FindPasswordModal({ onClose }: FindPasswordModalProps) {
8888
</div>
8989
</div>
9090
);
91-
}
91+
};
92+
93+
export default FindPasswordModal;

‎components/auth/FormField.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ type FieldProps = {
99
const inputClass =
1010
'border-border placeholder:text-muted hover:border-border-hover focus:border-border-focus focus:ring-border-focus h-10 w-full rounded-md border px-3 text-sm transition-colors focus:ring-1 focus:outline-none';
1111

12-
export const FormField = forwardRef<HTMLInputElement, FieldProps>(
12+
const FormField = forwardRef<HTMLInputElement, FieldProps>(
1313
({ id, label, type = 'text', ...rest }, ref) => {
1414
return (
1515
<div className="space-y-1">
@@ -23,3 +23,5 @@ export const FormField = forwardRef<HTMLInputElement, FieldProps>(
2323
);
2424

2525
FormField.displayName = 'FormField';
26+
27+
export default FormField;

‎components/auth/LoginForm.tsx‎

Lines changed: 35 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,41 @@
1-
import { FormField } from '@/components/auth/FormField';
1+
'use client';
2+
3+
import FormField from '@/components/auth/FormField';
24
import { FaGithub } from 'react-icons/fa';
3-
import { Button } from '@/components/auth/Button';
5+
import Button from '@/components/auth/Button';
46
import Link from 'next/link';
7+
import { auth } from '@/lib/firebase';
8+
import {
9+
GithubAuthProvider,
10+
signInWithPopup,
11+
UserCredential,
12+
} from 'firebase/auth';
13+
import { useRouter } from 'next/navigation';
514

615
type LoginFormProps = {
716
handleOpenModal: () => void;
817
};
918

10-
export function LoginForm({ handleOpenModal }: LoginFormProps) {
19+
const LoginForm = ({ handleOpenModal }: LoginFormProps) => {
20+
const router = useRouter();
21+
22+
const githubProvider = new GithubAuthProvider();
23+
const handleGithubLogin = async () => {
24+
try {
25+
const result: UserCredential = await signInWithPopup(
26+
auth,
27+
githubProvider
28+
);
29+
const user = result.user;
30+
console.log('로그인 성공 : ', user);
31+
router.push('/main');
32+
} catch (error: unknown) {
33+
if (error instanceof Error) {
34+
console.log('로그인 에러 : ', error.message);
35+
}
36+
}
37+
};
38+
1139
return (
1240
<>
1341
<div className="space-y-6">
@@ -41,8 +69,10 @@ export function LoginForm({ handleOpenModal }: LoginFormProps) {
4169

4270
<Button variant="github">
4371
<FaGithub className="text-xl" />
44-
<span>Github로 로그인</span>
72+
<span onClick={handleGithubLogin}>Github로 로그인</span>
4573
</Button>
4674
</>
4775
);
48-
}
76+
};
77+
78+
export default LoginForm;

0 commit comments

Comments
 (0)