Skip to content

Commit a4ff06b

Browse files
LSBerylLSBeryl
committed
first commit
1 parent 57303b1 commit a4ff06b

File tree

6 files changed

+1604
-0
lines changed

6 files changed

+1604
-0
lines changed

‎.gitignore

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
# Created by https://www.toptal.com/developers/gitignore/api/nextjs
2+
# Edit at https://www.toptal.com/developers/gitignore?templates=nextjs
3+
4+
### NextJS ###
5+
# dependencies
6+
/node_modules
7+
/.pnp
8+
.pnp.js
9+
10+
# testing
11+
/coverage
12+
13+
# next.js
14+
/.next/
15+
/out/
16+
17+
# production
18+
/build
19+
20+
# misc
21+
.DS_Store
22+
*.pem
23+
24+
# debug
25+
npm-debug.log*
26+
yarn-debug.log*
27+
yarn-error.log*
28+
.pnpm-debug.log*
29+
30+
# local env files
31+
.env*.local
32+
33+
# vercel
34+
.vercel
35+
36+
# typescript
37+
*.tsbuildinfo
38+
next-env.d.ts
39+
40+
# End of https://www.toptal.com/developers/gitignore/api/nextjs
41+
42+
.env

‎app/layout.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
export const metadata = {
2+
title: "Jobke",
3+
description: "Generated by Next.js",
4+
};
5+
6+
export default function RootLayout({ children }) {
7+
return (
8+
<html lang="en">
9+
<head>
10+
<style>
11+
{`
12+
body { margin: 0; }
13+
`}
14+
</style>
15+
</head>
16+
<body>{children}</body>
17+
</html>
18+
);
19+
}

‎app/page.jsx

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
"use client";
2+
3+
import { styled } from "styled-components";
4+
import { useEffect, useState, useNavigate } from "react";
5+
import { auth } from "../firebase";
6+
import { signInWithEmailAndPassword } from "firebase/auth";
7+
8+
const Wrap = styled.div`
9+
width: 100vw;
10+
height: 100vh;
11+
box-sizing: border-box;
12+
display: flex;
13+
justify-content: center;
14+
align-items: center;
15+
flex-direction: column;
16+
`;
17+
18+
const Form = styled.form`
19+
display: flex;
20+
flex-direction: column;
21+
gap: 1rem;
22+
`;
23+
24+
const Input = styled.input``;
25+
26+
const Error = styled.div`
27+
color: #ff0000;
28+
margin-top: 1rem;
29+
display: flex;
30+
flex-direction: column;
31+
align-items: center;
32+
`;
33+
34+
export default function Page() {
35+
const [isReady, setReady] = useState(false);
36+
const [password, setPassword] = useState("");
37+
const [isLoading, setLoading] = useState(false);
38+
const [error, setError] = useState("");
39+
const [isLogin, setLogin] = useState(false);
40+
41+
const init = async () => {
42+
await auth.authStateReady();
43+
setReady(true);
44+
};
45+
useEffect(() => {
46+
init();
47+
}, []);
48+
49+
async function submit(e) {
50+
e.preventDefault();
51+
try {
52+
setLoading(true);
53+
await signInWithEmailAndPassword(
54+
auth,
55+
"[email protected]",
56+
password
57+
).then((credential) => {
58+
console.log(credential);
59+
setLogin(true);
60+
});
61+
} catch (e) {
62+
console.error(e);
63+
setError(e);
64+
} finally {
65+
setLoading(false);
66+
}
67+
}
68+
69+
return (
70+
<Wrap>
71+
{isReady ? (
72+
isLogin ? (
73+
<>로그인 된 상태</>
74+
) : (
75+
<>
76+
<Form onSubmit={submit}>
77+
<Input
78+
type="password"
79+
placeholder="비밀번호"
80+
onChange={(e) => setPassword(e.target.value)}
81+
/>
82+
<Input type="submit" value={isLoading ? "인증 중..." : "인증"} />
83+
</Form>
84+
<Error>
85+
{error ? (
86+
<>
87+
<div>인증 도중 오류가 발생하였습니다.</div>
88+
<div>오류 메시지 : {error.message}</div>
89+
</>
90+
) : null}
91+
</Error>
92+
</>
93+
)
94+
) : null}
95+
</Wrap>
96+
);
97+
}

‎firebase.js

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { initializeApp } from "firebase/app";
2+
import { getAuth } from "firebase/auth";
3+
4+
const firebaseConfig = {
5+
apiKey: process.env.NEXT_API_KEY,
6+
authDomain: process.env.NEXT_AUTH_DOMAIN,
7+
projectId: process.env.NEXT_PROJECT_ID,
8+
storageBucket: process.env.NEXT_STORAGE_BUCKET,
9+
messagingSenderId: process.env.NEXT_MESSAGING_SENDER_ID,
10+
appId: process.env.NEXT_APP_ID,
11+
};
12+
13+
const app = initializeApp(firebaseConfig);
14+
15+
export const auth = getAuth(app);

0 commit comments

Comments
 (0)