직장 관리를 혁신할 준비가 되셨나요? 이 포괄적인 튜토리얼에서는 얼굴 인증을 활용하는 최첨단 직원 대시보드를 만드는 방법을 자세히 살펴보겠습니다. 우리는 웹 개발에서 가장 인기 있는 도구 중 일부인 Next.js, FACEIO 및 Shadcn UI를 사용할 것입니다. 이 가이드를 마치면 직원들이 미래에 살고 있는 듯한 느낌을 줄 수 있는 세련되고 안전한 대시보드를 갖게 될 것입니다!
자세히 살펴보기 전에 모든 오리를 연속해서 확보했는지 확인하세요.
다 알아냈나요? 엄청난! 이동 중에도 이 쇼를 감상해 보세요.
먼저 Next.js 프로젝트를 만들어 보겠습니다. 터미널을 열고 다음 마법의 단어를 입력하세요:
npx create-next-app@latest faceio-app cd faceio-app
몇 가지 질문을 받게 됩니다. 답변하는 방법은 다음과 같습니다.
이제 필요한 물품을 모두 챙기세요. 종속 항목을 설치하려면 다음 명령을 실행하세요.
npm install @faceio/fiojs @shadcn/ui class-variance-authority clsx tailwind-merge
프로젝트 루트에 .env.local이라는 파일을 만듭니다. 여기에 비밀 FACEIO 앱 ID를 보관할 것입니다:
NEXT_PUBLIC_FACEIO_APP_ID=your-super-secret-faceio-app-id
'your-super-secret-faceio-app-id'를 실제 FACEIO 애플리케이션 ID로 바꾸는 것을 잊지 마세요. 안전하게 보관하세요!
프로젝트 구조는 다음과 같아야 합니다.
faceio-app/ ├── app/ │ ├── layout.tsx │ ├── page.tsx │ └── components/ │ ├── FaceAuth.tsx │ └── EmployeeDashboard.tsx ├── public/ ├── .env.local ├── next.config.js ├── package.json ├── tsconfig.json └── tailwind.config.js
Tailwind를 새롭게 단장할 시간입니다. 다음과 같은 멋진 구성으로 tailwind.config.js 파일을 업데이트하세요.
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: ["class"],
content: [
'./app/**/*.{ts,tsx}',
],
theme: {
container: {
center: true,
padding: "2rem",
screens: {
"2xl": "1400px",
},
},
extend: {
colors: {
border: "hsl(var(--border))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
background: "hsl(var(--background))",
foreground: "hsl(var(--foreground))",
primary: {
DEFAULT: "hsl(var(--primary))",
foreground: "hsl(var(--primary-foreground))",
},
secondary: {
DEFAULT: "hsl(var(--secondary))",
foreground: "hsl(var(--secondary-foreground))",
},
destructive: {
DEFAULT: "hsl(var(--destructive))",
foreground: "hsl(var(--destructive-foreground))",
},
muted: {
DEFAULT: "hsl(var(--muted))",
foreground: "hsl(var(--muted-foreground))",
},
accent: {
DEFAULT: "hsl(var(--accent))",
foreground: "hsl(var(--accent-foreground))",
},
popover: {
DEFAULT: "hsl(var(--popover))",
foreground: "hsl(var(--popover-foreground))",
},
card: {
DEFAULT: "hsl(var(--card))",
foreground: "hsl(var(--card-foreground))",
},
},
borderRadius: {
lg: "var(--radius)",
md: "calc(var(--radius) - 2px)",
sm: "calc(var(--radius) - 4px)",
},
keyframes: {
"accordion-down": {
from: { height: 0 },
to: { height: "var(--radix-accordion-content-height)" },
},
"accordion-up": {
from: { height: "var(--radix-accordion-content-height)" },
to: { height: 0 },
},
},
animation: {
"accordion-down": "accordion-down 0.2s ease-out",
"accordion-up": "accordion-up 0.2s ease-out",
},
},
},
plugins: [require("tailwindcss-animate")],
}
우리 쇼의 스타인 FaceAuth 구성 요소를 만들어 보겠습니다. 새 파일 app/comComponents/FaceAuth.tsx를 만들고 다음 코드를 붙여넣습니다.
import { useEffect } from 'react';
import faceIO from '@faceio/fiojs';
import { Button, Card, CardHeader, CardTitle, CardContent } from '@shadcn/ui';
import { useToast } from '@shadcn/ui';
interface FaceAuthProps {
onSuccessfulAuth: (data: any) => void;
}
const FaceAuth: React.FC<FaceAuthProps> = ({ onSuccessfulAuth }) => {
const { toast } = useToast();
useEffect(() => {
const faceio = new faceIO(process.env.NEXT_PUBLIC_FACEIO_APP_ID);
const enrollNewUser = async () => {
try {
const userInfo = await faceio.enroll({
locale: 'auto',
payload: {
email: 'employee@example.com',
pin: '12345',
},
});
toast({
title: "Success!",
description: "You're now enrolled in the facial recognition system!",
});
console.log('User Enrolled!', userInfo);
} catch (errCode) {
toast({
title: "Oops!",
description: "Enrollment failed. Please try again.",
variant: "destructive",
});
console.error('Enrollment Failed', errCode);
}
};
const authenticateUser = async () => {
try {
const userData = await faceio.authenticate();
toast({
title: "Welcome back!",
description: "Authentication successful.",
});
console.log('User Authenticated!', userData);
onSuccessfulAuth({
name: 'John Doe',
position: 'Software Developer',
department: 'Engineering',
photoUrl: 'https://example.com/john-doe.jpg',
});
} catch (errCode) {
toast({
title: "Authentication failed",
description: "Please try again or enroll.",
variant: "destructive",
});
console.error('Authentication Failed', errCode);
}
};
const enrollBtn = document.getElementById('enroll-btn');
const authBtn = document.getElementById('auth-btn');
if (enrollBtn) enrollBtn.onclick = enrollNewUser;
if (authBtn) authBtn.onclick = authenticateUser;
return () => {
if (enrollBtn) enrollBtn.onclick = null;
if (authBtn) authBtn.onclick = null;
};
}, [toast, onSuccessfulAuth]);
return (
<Card className="w-full max-w-md mx-auto">
<CardHeader>
<CardTitle>Facial Authentication</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<Button id="enroll-btn" variant="outline" className="w-full">
Enroll New Employee
</Button>
<Button id="auth-btn" variant="default" className="w-full">
Authenticate
</Button>
</CardContent>
</Card>
);
};
export default FaceAuth;
이제 직원들이 보게 될 대시보드를 만들어 보겠습니다. 앱/구성 요소/EmployeeDashboard.tsx 만들기:
import { useState } from 'react';
import { Card, CardHeader, CardTitle, CardContent } from '@shadcn/ui';
import { Button, Avatar, Badge, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@shadcn/ui';
import FaceAuth from './FaceAuth';
interface EmployeeData {
name: string;
position: string;
department: string;
photoUrl: string;
}
const EmployeeDashboard: React.FC = () => {
const [isAuthenticated, setIsAuthenticated] = useState(false);
const [employeeData, setEmployeeData] = useState<EmployeeData | null>(null);
const handleSuccessfulAuth = (data: EmployeeData) => {
setIsAuthenticated(true);
setEmployeeData(data);
};
const mockAttendanceData = [
{ date: '2024-07-14', timeIn: '09:00 AM', timeOut: '05:30 PM' },
{ date: '2024-07-13', timeIn: '08:55 AM', timeOut: '05:25 PM' },
{ date: '2024-07-12', timeIn: '09:05 AM', timeOut: '05:35 PM' },
];
return (
<div className="space-y-6">
{!isAuthenticated ? (
<FaceAuth onSuccessfulAuth={handleSuccessfulAuth} />
) : (
<>
<Card>
<CardHeader>
<CardTitle>Employee Profile</CardTitle>
</CardHeader>
<CardContent className="flex items-center space-x-4">
<Avatar className="h-20 w-20" src={employeeData?.photoUrl} alt={employeeData?.name} />
<div>
<h2 className="text-2xl font-bold">{employeeData?.name}</h2>
<p className="text-gray-500">{employeeData?.position}</p>
<Badge variant="outline">{employeeData?.department}</Badge>
</div>
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle>Quick Actions</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<Button className="w-full">Check-in</Button>
<Button className="w-full" variant="secondary">Request Leave</Button>
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle>Attendance Records</CardTitle>
</CardHeader>
<CardContent>
<Table>
<TableHeader>
<TableRow>
<TableHead>Date</TableHead>
<TableHead>Time In</TableHead>
<TableHead>Time Out</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{mockAttendanceData.map((record, index) => (
<TableRow key={index}>
<TableCell>{record.date}</TableCell>
<TableCell>{record.timeIn}</TableCell>
<TableCell>{record.timeOut}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</CardContent>
</Card>
</>
)}
</div>
);
};
export default EmployeeDashboard;
마지막으로 메인 페이지를 업데이트하여 우리의 노력을 보여드리겠습니다. app/page.tsx 업데이트:
import EmployeeDashboard from './components/EmployeeDashboard';
export default function Home() {
return (
<main className="flex min-h-screen flex-col items-center justify-center p-4">
<EmployeeDashboard />
</main>
);
}
이제 전체 앱을 감싸는 레이아웃을 설정해 보겠습니다. 다음 코드를 추가하세요: app/layout.tsx
import './globals.css'
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
const inter = Inter({ subsets: ['latin'] })
export const metadata: Metadata = {
title: 'Employee Dashboard with Facial Authentication',
description: 'A cutting-edge employee dashboard featuring facial recognition for secure authentication and efficient workplace management.',
}
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body className={inter.className}>
<header className="bg-primary text-white p-4">
<h1 className="text-2xl font-bold">Faceio Solutions</h1>
</header>
<main className="container mx-auto p-4">
{children}
</main>
<footer className="bg-gray-100 text-center p-4 mt-8">
<p>© 2024 Faceio . All rights reserved.</p>
</footer>
</body>
</html>
)
}
이 레이아웃은 집의 틀과 같아서 전체 앱에 구조를 제공합니다. 여기에는 회사 이름이 포함된 헤더, 대시보드가 표시될 기본 콘텐츠 영역 및 바닥글이 포함됩니다. 게다가 메타데이터로 SEO 마법을 설정합니다!
자세한 내용은 FACEIO 모범 사례를 참조하세요.
취약한 PIN 거부
중복등록 방지
딥 페이크로부터 보호
미성년자 등록 금지
인증을 위해 PIN 필요
고유 PIN 시행
가려진 얼굴 무시
누락된 헤더 거부
인스턴스화 제한
웹훅 활성화
자세한 내용은 FACEIO 보안 모범 사례를 참조하세요.
이제 멋진 대시보드를 만들었으니 "이걸 실제로 어디에 사용할 수 있지?"라고 궁금해하실 것입니다. 글쎄요, 가능성은 무한합니다! 다음은 몇 가지 아이디어입니다.
사무실 관리: 기존의 펀치 카드와 작별하세요! 이 시스템은 출석을 추적하고, 사무실의 다양한 영역에 대한 접근을 제어하고, 직원 정보를 관리하는 방법을 혁신적으로 바꿀 수 있습니다.
보안 시스템: Fort Knox에 사무실이 있으면서도 번거로움이 없는 세상을 상상해 보세요. 이 얼굴 인식 시스템은 강력한 보안 프로토콜의 초석이 될 수 있습니다.
고객 서비스 키오스크: 고객이 키오스크에 다가가면 즉시 인식하고 맞춤형 서비스를 제공합니다. 더 이상 공상과학 소설이 아닙니다!
축하합니다, 기술 마법사님! 얼굴 인증 기능을 갖춘 최첨단 직원 대시보드를 구축하셨습니다. 그런데 왜 여기서 멈춰야 할까요? 이 시스템의 장점은 유연성입니다. 다음 단계로 나아가기 위한 몇 가지 아이디어는 다음과 같습니다.
기술 세계에서 유일한 한계는 상상력(그리고 카페인 섭취량)뿐이라는 점을 기억하세요.
그럼 어떻게 생각하시나요? 귀하의 업무 공간을 미래로 바꿀 준비가 되셨나요? 이 프로젝트를 시도해보고 어떻게 진행되는지 알려주세요. 귀하의 경험, 추가한 멋진 기능 또는 그 과정에서 직면한 어려움에 대해 듣고 싶습니다.
즐거운 코딩 되시기 바랍니다. 얼굴 인식 기능을 사무실 식물로 오해하지 않으시길 바랍니다!
위 내용은 얼굴 인증으로 안전한 직원 대시보드 구축: 종합적인 Next.js 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
