-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
8 changed files
with
281 additions
and
36 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| import React from "react"; | ||
| import { useLocation } from "react-router-dom"; | ||
| import { FaHome, FaKey, FaTag, FaUser } from "react-icons/fa"; | ||
|
|
||
| const BottomNavigation = () => { | ||
| const location = useLocation(); | ||
|
|
||
| const navItems = [ | ||
| { id: "home", label: "홈", icon: <FaHome />, path: "/app/home" }, | ||
| { id: "auth", label: "인증", icon: <FaKey />, path: "/app/auth" }, | ||
| { id: "token", label: "토큰", icon: <FaTag />, path: "/app/myinfo/token" }, | ||
| { id: "mypage", label: "마이페이지", icon: <FaUser />, path: "/app/mypage" }, | ||
| ]; | ||
|
|
||
| return ( | ||
| <div className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-300"> | ||
| <div className="flex justify-around items-center h-16"> | ||
| {navItems.map((item) => ( | ||
| <button | ||
| key={item.id} | ||
| className={`flex flex-col items-center justify-center w-full h-full ${ | ||
| location.pathname.startsWith(item.path) ? "text-blue-600" : "text-gray-600" | ||
| }`} | ||
| > | ||
| <div className="text-xl">{item.icon}</div> | ||
| <span className="text-xs mt-1">{item.label}</span> | ||
| </button> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default BottomNavigation; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| import React from "react"; | ||
| import BottomNavigation from "./BottomNavigation"; | ||
|
|
||
| interface MobileContainerProps { | ||
| children: React.ReactNode; | ||
| } | ||
|
|
||
| const MobileContainer: React.FC<MobileContainerProps> = ({ children }) => { | ||
| return ( | ||
| <div className="min-h-screen w-full bg-white flex flex-col"> | ||
| <div className="flex-1 overflow-y-auto">{children}</div> | ||
| <BottomNavigation /> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default MobileContainer |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,81 @@ | ||
| import React from "react"; | ||
| import MobileContainer from "../../components/mobile/MobileContainer"; | ||
| import { Link } from "react-router-dom"; | ||
|
|
||
| const MobileLoginPage = () => { | ||
| const [formData, setFormData] = React.useState({ | ||
| email: "", | ||
| password: "", | ||
| rememberMe: false, | ||
| }); | ||
|
|
||
| const handleInputChange = (e: { | ||
| target: { name: any; value: any; type: any; checked: any }; | ||
| }) => { | ||
| const { name, value, type, checked } = e.target; | ||
| setFormData((prev) => ({ | ||
| ...prev, | ||
| [name]: type === "checkbox" ? checked : value, | ||
| })); | ||
| }; | ||
|
|
||
| const handleLogin = (type: string) => { | ||
| console.log(`Logging in with ${type}`, formData); | ||
| }; | ||
|
|
||
| return ( | ||
| <MobileContainer> | ||
| <div className="p-6 pt-12"> | ||
| <h1 className="text-3xl font-bold mb-8">로그인</h1> | ||
| <form className="space-y-6"> | ||
| <div className="space-y-4"> | ||
| <input | ||
| type="email" | ||
| name="email" | ||
| placeholder="Enter Email" | ||
| className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-blue-500 focus:outline-none" | ||
| value={formData.email} | ||
| onChange={handleInputChange} | ||
| /> | ||
| <input | ||
| type="password" | ||
| name="password" | ||
| placeholder="Enter Password" | ||
| className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-blue-500 focus:outline-none" | ||
| value={formData.password} | ||
| onChange={handleInputChange} | ||
| /> | ||
| </div> | ||
| <a | ||
| href="https://sre.nanu.cc/nanuid/forgetpassword.html" | ||
| className="block text-center text-sm text-blue-600" | ||
| > | ||
| 비밀번호를 잊으셨나요? | ||
| </a> | ||
|
|
||
| <div className="space-y-3 pt-4"> | ||
| <button | ||
| type="button" | ||
| onClick={() => handleLogin("app")} | ||
| className="w-full bg-blue-600 text-white py-4 rounded-lg font-medium hover:bg-blue-700 transition-colors" | ||
| > | ||
| 서비스 로그인 | ||
| </button> | ||
| </div> | ||
| </form> | ||
|
|
||
| <div className="mt-8 text-center text-sm text-gray-600"> | ||
| 계정이 없으신가요?{" "} | ||
| <Link | ||
| to="/app/register" | ||
| className="text-blue-600 hover:underline" | ||
| > | ||
| NANU ID 생성하기 | ||
| </Link> | ||
| </div> | ||
| </div> | ||
| </MobileContainer> | ||
| ); | ||
| }; | ||
|
|
||
| export default MobileLoginPage; |
Oops, something went wrong.