Skip to content

Commit 4e70179

Browse files
sooh329sooh329
authored
[feat] 로그인 페이지 구현
* feat: Login UI 구현 * feat: 로그인 기능 추가 * feat: enter 이벤트 추가
1 parent ef4a656 commit 4e70179

File tree

5 files changed

+195
-61
lines changed

5 files changed

+195
-61
lines changed

‎package-lock.json‎

Lines changed: 32 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 62 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,64 @@
11
{
2-
"name": "dasom-web-frontend",
3-
"version": "0.1.0",
4-
"private": true,
5-
"dependencies": {
6-
"@testing-library/react": "^13.0.0",
7-
"@testing-library/user-event": "^13.2.1",
8-
"@tsparticles/engine": "^3.8.1",
9-
"@tsparticles/react": "^3.0.0",
10-
"@tsparticles/slim": "^3.8.1",
11-
"@types/aria-query": "^5.0.4",
12-
"@types/node": "^16.7.13",
13-
"@types/react": "^19.0.8",
14-
"@types/react-dom": "^19.0.3",
15-
"class-variance-authority": "^0.7.1",
16-
"clsx": "^2.1.1",
17-
"framer-motion": "^12.4.1",
18-
"lucide-react": "^0.475.0",
19-
"react": "^18.3.1",
20-
"react-dom": "^18.0.0",
21-
"react-router-dom": "^7.1.5",
22-
"react-scripts": "5.0.1",
23-
"tailwind-merge": "^3.0.1",
24-
"tailwindcss-animate": "^1.0.7",
25-
"typescript": "^4.9.5",
26-
"web-vitals": "^2.1.0"
27-
},
28-
"scripts": {
29-
"start": "react-scripts start",
30-
"build": "react-scripts build",
31-
"test": "react-scripts test",
32-
"eject": "react-scripts eject"
33-
},
34-
"eslintConfig": {
35-
"extends": [
36-
"react-app",
37-
"react-app/jest"
38-
]
39-
},
40-
"browserslist": {
41-
"production": [
42-
">0.2%",
43-
"not dead",
44-
"not op_mini all"
45-
],
46-
"development": [
47-
"last 1 chrome version",
48-
"last 1 firefox version",
49-
"last 1 safari version"
50-
]
51-
},
52-
"devDependencies": {
53-
"@testing-library/dom": "^10.4.0",
54-
"@types/babel__core": "^7.20.5",
55-
"@types/eslint": "^9.6.1",
56-
"@types/jest": "^29.5.14",
57-
"@types/webpack-env": "^1.18.8",
58-
"@typescript-eslint/eslint-plugin": "^8.23.0",
59-
"@typescript-eslint/parser": "^8.23.0",
60-
"eslint": "^9.20.0"
61-
}
2+
"name": "dasom-web-frontend",
3+
"version": "0.1.0",
4+
"private": true,
5+
"dependencies": {
6+
"@testing-library/react": "^13.0.0",
7+
"@testing-library/user-event": "^13.2.1",
8+
"@tsparticles/engine": "^3.8.1",
9+
"@tsparticles/react": "^3.0.0",
10+
"@tsparticles/slim": "^3.8.1",
11+
"@types/aria-query": "^5.0.4",
12+
"@types/node": "^16.7.13",
13+
"@types/react": "^19.0.8",
14+
"@types/react-dom": "^19.0.3",
15+
"axios": "^1.7.9",
16+
"class-variance-authority": "^0.7.1",
17+
"clsx": "^2.1.1",
18+
"framer-motion": "^12.4.1",
19+
"lucide-react": "^0.475.0",
20+
"react": "^18.3.1",
21+
"react-dom": "^18.0.0",
22+
"react-router-dom": "^7.1.5",
23+
"react-scripts": "5.0.1",
24+
"tailwind-merge": "^3.0.1",
25+
"tailwindcss-animate": "^1.0.7",
26+
"typescript": "^4.9.5",
27+
"web-vitals": "^2.1.0"
28+
},
29+
"scripts": {
30+
"start": "react-scripts start",
31+
"build": "react-scripts build",
32+
"test": "react-scripts test",
33+
"eject": "react-scripts eject"
34+
},
35+
"eslintConfig": {
36+
"extends": [
37+
"react-app",
38+
"react-app/jest"
39+
]
40+
},
41+
"browserslist": {
42+
"production": [
43+
">0.2%",
44+
"not dead",
45+
"not op_mini all"
46+
],
47+
"development": [
48+
"last 1 chrome version",
49+
"last 1 firefox version",
50+
"last 1 safari version"
51+
]
52+
},
53+
"devDependencies": {
54+
"@testing-library/dom": "^10.4.0",
55+
"@types/babel__core": "^7.20.5",
56+
"@types/eslint": "^9.6.1",
57+
"@types/jest": "^29.5.14",
58+
"@types/webpack-env": "^1.18.8",
59+
"@typescript-eslint/eslint-plugin": "^8.23.0",
60+
"@typescript-eslint/parser": "^8.23.0",
61+
"eslint": "^9.20.0"
62+
},
63+
"packageManager": "[email protected]+sha512.5383cc12567a95f1d668fbe762dfe0075c595b4bfff433be478dbbe24e05251a8e8c3eb992a986667c1d53b6c3a9c85b8398c35a960587fbd9fa3a0915406728"
6264
}

‎src/App.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React from 'react'
22
import './assets/styles/index.css'
33
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
44
import Main from './pages/Main'
5+
import Login from './pages/Login'
56
import RecruitMeeting from './pages/RecruitMeeting'
67
import RecruitSubmitMeeting from './pages/RecruitSubmitMeeting'
78

@@ -11,6 +12,7 @@ function App() {
1112
<Router>
1213
<Routes>
1314
<Route path='/' element={<Main />} />
15+
<Route path='/login' element={<Login />} />
1416
<Route path='/recruit-meeting' element={<RecruitMeeting />} />
1517
<Route path='/recruit-meeting/submit' element={<RecruitSubmitMeeting />} />
1618
</Routes>

‎src/pages/Login.tsx‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
import React, { useState } from 'react'
2+
import axios from 'axios'
3+
import MobileLayout from '../components/layout/MobileLayout'
4+
import { useNavigate } from 'react-router-dom'
5+
6+
const Login: React.FC = () => {
7+
const [email, setEmail] = useState('')
8+
const [password, setPassword] = useState('')
9+
const navigate = useNavigate()
10+
11+
const handleLogin = async () => {
12+
if (!email || !password) {
13+
alert('아이디와 비밀번호를 입력하세요.')
14+
return
15+
}
16+
17+
try {
18+
const response = await axios.post('http://dmu-dasom.or.kr/api/auth/login', {
19+
email,
20+
password
21+
},{ withCredentials: true }) // 쿠키허용
22+
console.log('로그인 성공:', response.data)
23+
navigate('/') // 메인으로 리다이렉트
24+
} catch (err: any) {
25+
const errorCode = err.response?.data?.code
26+
if (errorCode === 'C005') {
27+
alert('이메일 또는 비밀번호가 잘못되었습니다.')
28+
} else {
29+
alert('로그인 실패. 다시 시도해주세요.')
30+
}
31+
}
32+
}
33+
34+
const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
35+
if (event.key === 'Enter') {
36+
handleLogin()
37+
}
38+
}
39+
40+
return (
41+
<MobileLayout>
42+
<div className='h-screen flex flex-col items-center justify-center'>
43+
<div className='font-pretendardBlack text-mainColor text-2xl mb-[32px]'>
44+
DASOM
45+
</div>
46+
<div className='w-full text-[12px] flex flex-col items-center font-pretendardRegular'>
47+
<input
48+
type='text'
49+
value={email}
50+
onChange={(e) => setEmail(e.target.value)}
51+
className='bg-subGrey h-[32px] w-[80%] rounded-[6px] mb-[16px] pl-[12px] outline-mainColor focus:ring-1 ring-white'
52+
placeholder='Email'
53+
onKeyDown={handleKeyDown}
54+
/>
55+
<input
56+
type='password'
57+
value={password}
58+
onChange={(e) => setPassword(e.target.value)}
59+
className='bg-subGrey h-[32px] w-[80%] rounded-[6px] mb-[16px] pl-[12px] outline-mainColor focus:ring-1 ring-white'
60+
placeholder='Password'
61+
onKeyDown={handleKeyDown}
62+
/>
63+
<div
64+
className='cursor-pointer bg-mainColor h-[32px] w-[80%] rounded-[6px] font-pretendardBold tracking-[1px] text-white flex justify-center items-center hover:bg-[#00A889]'
65+
onClick={handleLogin}
66+
>
67+
로그인
68+
</div>
69+
</div>
70+
</div>
71+
</MobileLayout>
72+
)
73+
}
74+
75+
export default Login

‎yarn.lock‎

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3270,6 +3270,15 @@ axe-core@^4.10.0:
32703270
resolved "https://registry.npmjs.org/axe-core/-/axe-core-4.10.2.tgz"
32713271
integrity sha512-RE3mdQ7P3FRSe7eqCWoeQ/Z9QXrtniSjp1wUjt5nRC3WIpz5rSCve6o3fsZ2aCpJtrZjSZgjwXAoTO5k4tEI0w==
32723272

3273+
axios@^1.7.9:
3274+
version "1.7.9"
3275+
resolved "https://registry.npmjs.org/axios/-/axios-1.7.9.tgz"
3276+
integrity sha512-LhLcE7Hbiryz8oMDdDptSrWowmB4Bl6RCt6sIJKpRB4XtVf0iEgewX3au/pJqm+Py1kCASkb/FFKjxQaLtxJvw==
3277+
dependencies:
3278+
follow-redirects "^1.15.6"
3279+
form-data "^4.0.0"
3280+
proxy-from-env "^1.1.0"
3281+
32733282
axobject-query@^4.1.0:
32743283
version "4.1.0"
32753284
resolved "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz"
@@ -5350,7 +5359,7 @@ flatted@^3.2.9:
53505359
resolved "https://registry.npmjs.org/flatted/-/flatted-3.3.2.tgz"
53515360
integrity sha512-AiwGJM8YcNOaobumgtng+6NHuOqC3A7MixFeDafM3X9cIUM+xUXoS5Vfgf+OihAYe20fxqNM9yPBXJzRtZ/4eA==
53525361

5353-
follow-redirects@^1.0.0:
5362+
follow-redirects@^1.0.0, follow-redirects@^1.15.6:
53545363
version "1.15.9"
53555364
resolved "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz"
53565365
integrity sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==
@@ -5398,6 +5407,15 @@ form-data@^3.0.0:
53985407
combined-stream "^1.0.8"
53995408
mime-types "^2.1.12"
54005409

5410+
form-data@^4.0.0:
5411+
version "4.0.1"
5412+
resolved "https://registry.npmjs.org/form-data/-/form-data-4.0.1.tgz"
5413+
integrity sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==
5414+
dependencies:
5415+
asynckit "^0.4.0"
5416+
combined-stream "^1.0.8"
5417+
mime-types "^2.1.12"
5418+
54015419
[email protected]:
54025420
version "0.2.0"
54035421
resolved "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz"
@@ -8508,6 +8526,11 @@ proxy-addr@~2.0.7:
85088526
forwarded "0.2.0"
85098527
ipaddr.js "1.9.1"
85108528

8529+
proxy-from-env@^1.1.0:
8530+
version "1.1.0"
8531+
resolved "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz"
8532+
integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==
8533+
85118534
psl@^1.1.33:
85128535
version "1.15.0"
85138536
resolved "https://registry.npmjs.org/psl/-/psl-1.15.0.tgz"

0 commit comments

Comments
 (0)