From 9ceed79cf32c896f8a998399bf1b296506b2cd4a Mon Sep 17 00:00:00 2001 From: dujinkim Date: Tue, 8 Apr 2025 03:08:19 +0000 Subject: 로그인 및 미들웨어 처리. 구조 변경 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/layout/GroupedMenuRender.tsx | 80 ++++++++ components/layout/Header.tsx | 215 ++++++++++---------- components/layout/MobileMenu.tsx | 8 +- components/login/login-form-shi.tsx | 318 ++++++++++++++++++++++++++++++ components/login/login-form.tsx | 201 +++++++++++++++---- components/pq/client-pq-input-wrapper.tsx | 90 +++++++++ components/pq/pq-review-detail.tsx | 9 +- 7 files changed, 773 insertions(+), 148 deletions(-) create mode 100644 components/layout/GroupedMenuRender.tsx create mode 100644 components/login/login-form-shi.tsx create mode 100644 components/pq/client-pq-input-wrapper.tsx (limited to 'components') diff --git a/components/layout/GroupedMenuRender.tsx b/components/layout/GroupedMenuRender.tsx new file mode 100644 index 00000000..e2a5a225 --- /dev/null +++ b/components/layout/GroupedMenuRender.tsx @@ -0,0 +1,80 @@ +import React from 'react'; +import Link from 'next/link'; +import { NavigationMenuLink } from "@/components/ui/navigation-menu"; +import { cn } from "@/lib/utils"; +import * as LucideIcons from "lucide-react"; +import { MenuItem } from '@/config/menuConfig'; + +type GroupedMenuItems = { + [key: string]: MenuItem[]; +}; + +interface GroupedMenuRendererProps { + items: MenuItem[]; + lng: string; +} + +const GroupedMenuRenderer = ({ items, lng }: GroupedMenuRendererProps) => { + // 그룹별로 아이템 분류 + const groupItems = (items: MenuItem[]): GroupedMenuItems => { + return items.reduce((groups, item) => { + const group = item.group || 'default'; + if (!groups[group]) { + groups[group] = []; + } + groups[group].push(item); + return groups; + }, {} as GroupedMenuItems); + }; + + const groupedItems = groupItems(items); + const groups = Object.keys(groupedItems); + + return ( +
+ {groups.map((groupName, index) => ( +
+ {groupName !== 'default' && ( +

{groupName}

+ )} +
+ {groupedItems[groupName].map((item) => ( + + ))} +
+
+ ))} +
+ ); +}; + +const MenuListItem = ({ item, lng }: { item: MenuItem; lng: string }) => { + + + + + return ( + + +
+
{item.title}
+ {item.description && ( +

+ {item.description} +

+ )} +
+ + + ); +}; + +export default GroupedMenuRenderer; \ No newline at end of file diff --git a/components/layout/Header.tsx b/components/layout/Header.tsx index 1b6c45bb..498668eb 100644 --- a/components/layout/Header.tsx +++ b/components/layout/Header.tsx @@ -26,19 +26,20 @@ import { SearchIcon, BellIcon, Menu } from "lucide-react"; import { useParams, usePathname } from "next/navigation"; import { cn } from "@/lib/utils"; import Image from "next/image"; -import { mainNav, additionalNav, MenuSection, mainNavVendor, additionalNavVendor } from "@/config/menuConfig"; // 메뉴 구성 임포트 +import { mainNav, additionalNav, MenuSection, MenuItem, mainNavVendor, additionalNavVendor } from "@/config/menuConfig"; // 메뉴 구성 임포트 import { MobileMenu } from "./MobileMenu"; import { CommandMenu } from "./command-menu"; import { useSession, signOut } from "next-auth/react"; - +import GroupedMenuRenderer from "./GroupedMenuRender"; export function Header() { const params = useParams(); - const lng = params.lng as string; + const lng = params?.lng as string; const pathname = usePathname(); const { data: session } = useSession(); - const userName = session?.user?.name || ""; // 없을 수도 있으니 안전하게 처리 + const userName = session?.user?.name || ""; + const domain = session?.user?.domain || ""; const initials = userName .split(" ") .map((word) => word[0]?.toUpperCase()) @@ -51,7 +52,7 @@ export function Header() { setIsMobileMenuOpen(!isMobileMenuOpen); }; - const isPartnerRoute = pathname.includes("/partners"); + const isPartnerRoute = pathname?.includes("/partners"); const main = isPartnerRoute ? mainNavVendor : mainNav; const additional = isPartnerRoute ? additionalNavVendor : additionalNav; @@ -60,10 +61,10 @@ export function Header() { return ( <> -
+
- + {/* 햄버거 메뉴 버튼 (모바일) */} - -
- - {/* 로고 영역 */} -
- - EVCP Logo - eVCP - -
- {/* 데스크탑 네비게이션 메뉴 */} - - - {main.map((section: MenuSection) => ( - - {section.title} - -
    - {section.items.map((item) => ( - - {item.description} - - ))} -
- - - ))} - - - {/* 추가 네비게이션 항목 */} - {additional.map((item) => ( - - - - {item.title} - - - - ))} - + {/* 로고 영역 - 항상 표시 */} +
+ + EVCP Logo + eVCP + +
+ + {/* 네비게이션 메뉴 - 내부 스크롤 적용, 드롭다운은 제약 없이 표시 */} +
+ {/* NavigationMenu는 z-index를 높게 설정하여 드롭다운이 제대로 표시되도록 함 */} + + {/* 스크롤 가능한 메뉴 리스트 컨테이너 */} +
+ + {main.map((section: MenuSection) => ( + + + {section.title} + + + {/* 그룹핑이 필요한 메뉴의 경우 GroupedMenuRenderer 사용 */} + {section.useGrouping ? ( + + + + ) : ( + +
    + {section.items.map((item) => ( + + {item.description} + + ))} +
+ + )} + + ))} + + {/* 추가 네비게이션 항목 */} + {additional.map((item) => ( + + + + {item.title} + + + + ))} + +
- -
- - {/* 우측 영역 */} -
- - - - -
- {/* 알림 버튼 */} - - - {/* 사용자 메뉴 (DropdownMenu) */} - - - - - - {initials || "?"} - - - - - My Account - - {/* - Profile - */} - - Settings - - - signOut({ callbackUrl: `/${lng}/login` })}> - Logout - - - - - {/* 모바일 햄버거 메뉴 버튼 */} - + {/* 우측 영역 - 고정 너비와 우선순위로 항상 표시되도록 함 */} +
+ {/* 데스크탑에서는 CommandMenu, 모바일에서는 검색 아이콘만 */} +
+
+ + + {/* 알림 버튼 */} + + + {/* 사용자 메뉴 (DropdownMenu) */} + + + + + + {initials || "?"} + + + + + My Account + + + Settings + + + signOut({ callbackUrl: `/${lng}/${domain}` })}> + Logout + + +
diff --git a/components/layout/MobileMenu.tsx b/components/layout/MobileMenu.tsx index d2e6b927..2e70aeba 100644 --- a/components/layout/MobileMenu.tsx +++ b/components/layout/MobileMenu.tsx @@ -4,10 +4,10 @@ import * as React from "react"; import Link from "next/link"; -import { useRouter,usePathname } from "next/navigation"; +import { useRouter, usePathname } from "next/navigation"; import { MenuSection, mainNav, additionalNav, MenuItem, mainNavVendor, additionalNavVendor } from "@/config/menuConfig"; import { cn } from "@/lib/utils"; -import { Drawer, DrawerContent,DrawerTitle,DrawerTrigger } from "@/components/ui/drawer"; +import { Drawer, DrawerContent, DrawerTitle, DrawerTrigger } from "@/components/ui/drawer"; import { Button } from "@/components/ui/button"; interface MobileMenuProps { @@ -24,14 +24,14 @@ export function MobileMenu({ lng, onClose }: MobileMenuProps) { onClose(); }; const pathname = usePathname(); - const isPartnerRoute = pathname.includes("/partners"); + const isPartnerRoute = pathname?.includes("/partners"); const main = isPartnerRoute ? mainNavVendor : mainNav; const additional = isPartnerRoute ? additionalNavVendor : additionalNav; return ( - + diff --git a/components/login/login-form-shi.tsx b/components/login/login-form-shi.tsx new file mode 100644 index 00000000..fb985592 --- /dev/null +++ b/components/login/login-form-shi.tsx @@ -0,0 +1,318 @@ +'use client'; + +import { useState, useEffect } from "react"; +import { cn } from "@/lib/utils" +import { Button } from "@/components/ui/button" +import { Card, CardContent } from "@/components/ui/card" +import { Input } from "@/components/ui/input" +import { SendIcon, Loader2, GlobeIcon, ChevronDownIcon, Ship } from "lucide-react"; +import { useToast } from "@/hooks/use-toast"; +import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuRadioItem } from "@/components/ui/dropdown-menu" +import { useTranslation } from '@/i18n/client' +import { useRouter, useParams, usePathname, useSearchParams } from 'next/navigation'; +import { + InputOTP, + InputOTPGroup, + InputOTPSlot, +} from "@/components/ui/input-otp" +import { signIn } from 'next-auth/react'; +import { sendOtpAction } from "@/lib/users/send-otp"; +import { verifyTokenAction } from "@/lib/users/verifyToken"; +import { buttonVariants } from "@/components/ui/button" +import Link from "next/link" +import Image from 'next/image'; // 추가: Image 컴포넌트 import + +export function LoginFormSHI({ + className, + ...props +}: React.ComponentProps<"div">) { + + const params = useParams() || {}; + const pathname = usePathname() || ''; + const router = useRouter(); + const searchParams = useSearchParams(); + const token = searchParams?.get('token') || null; + + + const lng = params.lng as string; + const { t, i18n } = useTranslation(lng, 'login'); + + const { toast } = useToast(); + + const handleChangeLanguage = (lang: string) => { + const segments = pathname.split('/'); + segments[1] = lang; + router.push(segments.join('/')); + }; + + const currentLanguageText = i18n.language === 'ko' ? t('languages.korean') : t('languages.english'); + + const [email, setEmail] = useState(''); + const [otpSent, setOtpSent] = useState(false); + const [isLoading, setIsLoading] = useState(false); + const [otp, setOtp] = useState(''); + + const handleSubmit = async (e: React.FormEvent) => { + e.preventDefault(); + setIsLoading(true); + try { + const result = await sendOtpAction(email, lng); + + if (result.success) { + setOtpSent(true); + toast({ + title: t('otpSentTitle'), + description: t('otpSentMessage'), + }); + } else { + // Handle specific error types + let errorMessage = t('defaultErrorMessage'); + + // You can handle different error types differently + if (result.error === 'userNotFound') { + errorMessage = t('userNotFoundMessage'); + } + + toast({ + title: t('errorTitle'), + description: result.message || errorMessage, + variant: 'destructive', + }); + } + } catch (error) { + // This will catch network errors or other unexpected issues + console.error(error); + toast({ + title: t('errorTitle'), + description: t('networkErrorMessage'), + variant: 'destructive', + }); + } finally { + setIsLoading(false); + } + }; + + async function handleOtpSubmit(e: React.FormEvent) { + e.preventDefault(); + setIsLoading(true); + + try { + // next-auth의 Credentials Provider로 로그인 시도 + const result = await signIn('credentials', { + email, + code: otp, + redirect: false, // 커스텀 처리 위해 redirect: false + }); + + if (result?.ok) { + // 토스트 메시지 표시 + toast({ + title: t('loginSuccess'), + description: t('youAreLoggedIn'), + }); + + router.push(`/${lng}/evcp/report`); + + } else { + toast({ + title: t('errorTitle'), + description: t('defaultErrorMessage'), + variant: 'destructive', + }); + } + } catch (error) { + console.error('Login error:', error); + toast({ + title: t('errorTitle'), + description: t('defaultErrorMessage'), + variant: 'destructive', + }); + } finally { + setIsLoading(false); + } + } + + useEffect(() => { + const verifyToken = async () => { + if (!token) return; + setIsLoading(true); + + try { + const data = await verifyTokenAction(token); + + if (data.valid) { + setOtpSent(true); + setEmail(data.email ?? ''); + } else { + toast({ + title: t('errorTitle'), + description: t('invalidToken'), + variant: 'destructive', + }); + } + } catch (error) { + toast({ + title: t('errorTitle'), + description: t('defaultErrorMessage'), + variant: 'destructive', + }); + } finally { + setIsLoading(false); + } + }; + verifyToken(); + }, [token, toast, t]); + + return ( +
+ {/* Left Content */} +
+ {/* Top bar with Logo + eVCP (left) and "Request Vendor Repository" (right) */} +
+
+ {/* logo */} + + eVCP +
+
+ + {/* Content section that occupies remaining space, centered vertically */} +
+ {/* Your form container */} +
+ + {/* Here's your existing login/OTP forms: */} + {!otpSent ? ( +
+
+
+

{t('loginMessage')}

+
+
+ setEmail(e.target.value)} + /> +
+ +
+ + + + + + handleChangeLanguage(value)} + > + + {t('languages.english')} + + + {t('languages.korean')} + + + + +
+
+
+ ) : ( +
+
+
+

{t('loginMessage')}

+
+
+ setOtp(value)} + > + + + + + + + + + +
+ +
+ + + + + + handleChangeLanguage(value)} + > + + {t('languages.english')} + + + {t('languages.korean')} + + + + +
+
+
+ )} + +
+ {t('termsMessage')} {t('termsOfService')} {t('and')} + {t('privacyPolicy')}. +
+
+
+
+ + {/* Right BG 이미지 영역 - Image 컴포넌트로 수정 */} +
+ {/* Image 컴포넌트로 대체 */} +
+ Background image +
+
+
+

“{t("blockquote")}”

+ {/*
SHI
*/} +
+
+
+
+ ) +} \ No newline at end of file diff --git a/components/login/login-form.tsx b/components/login/login-form.tsx index 41d232f8..92fa6e2c 100644 --- a/components/login/login-form.tsx +++ b/components/login/login-form.tsx @@ -32,7 +32,8 @@ export function LoginForm({ const router = useRouter(); const searchParams = useSearchParams(); const token = searchParams?.get('token') || null; - + const [showCredentialsForm, setShowCredentialsForm] = useState(false); + const lng = params.lng as string; const { t, i18n } = useTranslation(lng, 'login'); @@ -51,6 +52,8 @@ export function LoginForm({ const [otpSent, setOtpSent] = useState(false); const [isLoading, setIsLoading] = useState(false); const [otp, setOtp] = useState(''); + const [username, setUsername] = useState(''); + const [password, setPassword] = useState(''); const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); @@ -58,17 +61,33 @@ export function LoginForm({ try { const result = await sendOtpAction(email, lng); - if (result?.success) { + if (result.success) { setOtpSent(true); toast({ title: t('otpSentTitle'), description: t('otpSentMessage'), }); + } else { + // Handle specific error types + let errorMessage = t('defaultErrorMessage'); + + // You can handle different error types differently + if (result.error === 'userNotFound') { + errorMessage = t('userNotFoundMessage'); + } + + toast({ + title: t('errorTitle'), + description: result.message || errorMessage, + variant: 'destructive', + }); } } catch (error) { + // This will catch network errors or other unexpected issues + console.error(error); toast({ title: t('errorTitle'), - description: t('defaultErrorMessage'), + description: t('networkErrorMessage'), variant: 'destructive', }); } finally { @@ -76,11 +95,10 @@ export function LoginForm({ } }; - async function handleOtpSubmit(e: React.FormEvent) { e.preventDefault(); setIsLoading(true); - + try { // next-auth의 Credentials Provider로 로그인 시도 const result = await signIn('credentials', { @@ -88,30 +106,16 @@ export function LoginForm({ code: otp, redirect: false, // 커스텀 처리 위해 redirect: false }); - + if (result?.ok) { // 토스트 메시지 표시 toast({ title: t('loginSuccess'), description: t('youAreLoggedIn'), }); - - // NextAuth에서 유저 정보 API 호출 (최신 상태 보장) - const response = await fetch('/api/auth/session'); - const session = await response.json(); - - // domain 값에 따라 동적으로 리다이렉션 - const userDomain = session?.user?.domain; - console.log(session) - - if (userDomain === 'evcp') { - router.push(`/${lng}/evcp/report`); - } else if (userDomain === 'partners') { - router.push(`/${lng}/partners/dashboard`); - } else { - // 기본 리다이렉션 경로 - router.push(`/${lng}/dashboard`); - } + + router.push(`/${lng}/partners/dashboard`); + } else { toast({ title: t('errorTitle'), @@ -131,6 +135,53 @@ export function LoginForm({ } } + // 새로운 로그인 처리 함수 추가 + const handleCredentialsLogin = async () => { + if (!username || !password) { + toast({ + title: t('errorTitle'), + description: t('credentialsRequired'), + variant: 'destructive', + }); + return; + } + + setIsLoading(true); + + try { + // next-auth의 다른 credentials provider로 로그인 시도 + const result = await signIn('credentials-password', { + username, + password, + redirect: false, + }); + + if (result?.ok) { + toast({ + title: t('loginSuccess'), + description: t('youAreLoggedIn'), + }); + + router.push(`/${lng}/partners/dashboard`); + } else { + toast({ + title: t('errorTitle'), + description: t('invalidCredentials'), + variant: 'destructive', + }); + } + } catch (error) { + console.error('Login error:', error); + toast({ + title: t('errorTitle'), + description: t('defaultErrorMessage'), + variant: 'destructive', + }); + } finally { + setIsLoading(false); + } + }; + useEffect(() => { const verifyToken = async () => { if (!token) return; @@ -197,20 +248,92 @@ export function LoginForm({

{t('loginMessage')}

-
- setEmail(e.target.value)} - /> -
- + + {/* S-chips 로그인 폼이 표시되지 않을 때만 이메일 입력 필드 표시 */} + {!showCredentialsForm && ( + <> +
+ setEmail(e.target.value)} + /> +
+ + + {/* 구분선과 "Or continue with" 섹션 추가 */} +
+
+ +
+
+ + {t('orContinueWith')} + +
+
+ + {/* S-chips 로그인 버튼 */} + + + )} + + {/* ID/비밀번호 로그인 폼 - 버튼 클릭 시에만 표시 */} + {showCredentialsForm && ( + <> +
+ setUsername(e.target.value)} + /> + setPassword(e.target.value)} + /> + + + {/* 뒤로 가기 버튼 */} + +
+ + )} +
@@ -302,8 +425,8 @@ export function LoginForm({
{/* Image 컴포넌트로 대체 */}
- Background image p.projectId === projectId) + : null + + // 필요한 경우 여기서 PQ 데이터를 필터링할 수 있음 + // 예: 모든 데이터를 가져왔는데 현재 projectId에 따라 필터링이 필요한 경우 + // const filteredPQData = projectId ? allPQData.filter(...) : allPQData; + + return ( + + {/* 헤더 - 프로젝트 정보 포함 */} +
+

+ Pre-Qualification Check Sheet + {currentProject && ( + + - {currentProject.projectCode} + + )} +

+

+ PQ에 적절한 응답을 제출하시기 바랍니다. +

+
+ + {/* 일반/프로젝트 PQ 선택 탭 */} + {projectPQs.length > 0 && ( +
+ + + + 일반 PQ + + + {projectPQs.map(project => ( + + + {project.projectCode} + + + ))} + + +
+ )} + + {/* PQ 입력 탭 */} + }> + + + + ) +} \ No newline at end of file diff --git a/components/pq/pq-review-detail.tsx b/components/pq/pq-review-detail.tsx index 18af02ed..e1bc5510 100644 --- a/components/pq/pq-review-detail.tsx +++ b/components/pq/pq-review-detail.tsx @@ -56,7 +56,9 @@ interface VendorPQAdminReviewProps { projectId?: number projectName?: string projectStatus?: string - loadData: () => Promise + // loadData: () => Promise + loadData: (vendorId: number, projectId?: number) => Promise + pqType: 'general' | 'project' } @@ -81,7 +83,8 @@ export default function VendorPQAdminReview({ const fetchData = async () => { setIsDataLoading(true) try { - const freshData = await loadData() + const freshData = await loadData(vendor.id, projectId) + setPqData(freshData) } catch (error) { console.error("Error loading PQ data:", error) @@ -98,7 +101,7 @@ export default function VendorPQAdminReview({ } else { setPqData(data) } - }, [data, loadData, toast]) + }, [data, loadData, vendor.id, projectId, toast]) // 다이얼로그 상태들 const [showRequestDialog, setShowRequestDialog] = React.useState(false) -- cgit v1.2.3