ONAANDALL/frontend
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[common/features] refactor: 통합 검색 기능 공통 기능으로 변경

Browse Source
This commit is contained in:
chanii8
2025-08-02 02:42:20 +09:00
parent 98cc45162d
commit aabd810571
17 changed files with 126 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/common/components/src/ui/header/index.tsx
+34 -30
View File
@@ -22,6 +22,7 @@ import {
import { Button } from "../button";
import { SidebarTrigger } from "../sidebar";
import { Skeleton } from "../skeleton";
import { SearchForm } from "./search-form";
const appConfig = getConfig();
const siteId = appConfig.SITE_ID ?? "";
@@ -135,36 +136,39 @@ export function Header({ viewOnly }: { viewOnly?: boolean }) {
</span>
</h1>
</div>
{mounted ? (
isLoggedIn && (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
className="group m-0 flex h-[3rem] items-center !bg-background px-4 py-0 text-label"
data-trigger="dropdown"
>
<i className="diveicon di-account-circle static translate-y-0.5 pr-2 text-3xl" />
{userInfo?.userName}
<i className="diveicon di-chevron-down static p-0 transition-transform group-data-[state=open]:rotate-180" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem>프로필 설정</DropdownMenuItem>
<div className="flex flex-col items-start gap-0 px-4 py-3">
<p className="text-base text-label">최종접속일</p>
<p>{userInfo?.lastLoginDate}</p>
</div>
<div className="flex flex-col items-start gap-0 px-4 py-3">
<p className="text-base text-label">접속 IP</p>
<p></p>
</div>
<DropdownMenuItem onClick={logout}>로그아웃</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
)
) : (
<Skeleton className="mx-4 h-[3rem] w-[15rem]" />
)}
<div className="flex items-center gap-2">
<SearchForm />
{mounted ? (
isLoggedIn && (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
className="group m-0 flex h-[3rem] items-center !bg-background px-4 py-0 text-label"
data-trigger="dropdown"
>
<i className="diveicon di-account-circle static translate-y-0.5 pr-2 text-3xl" />
{userInfo?.userName}
<i className="diveicon di-chevron-down static p-0 transition-transform group-data-[state=open]:rotate-180" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem>프로필 설정</DropdownMenuItem>
<div className="flex flex-col items-start gap-0 px-4 py-3">
<p className="text-base text-label">최종접속일</p>
<p>{userInfo?.lastLoginDate}</p>
</div>
<div className="flex flex-col items-start gap-0 px-4 py-3">
<p className="text-base text-label">접속 IP</p>
<p></p>
</div>
<DropdownMenuItem onClick={logout}>로그아웃</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
)
) : (
<Skeleton className="mx-4 h-[3rem] w-[15rem]" />
)}
</div>
</header>
);
}
packages/common/components/src/ui/header/search-form.tsx
+32
View File
@@ -0,0 +1,32 @@
import { Button } from "../button";
import { Input } from "../input";
export function SearchForm() {
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
const formData = new FormData(e.target as HTMLFormElement);
const keyword = formData.get("keyword") as string;
if (keyword && keyword.trim().length > 0) {
window.location.href = `/cms/search?keyword=${encodeURIComponent(keyword)}`;
}
};
return (
<form onSubmit={handleSubmit} className="relative flex items-center gap-2">
<Input
type="text"
name="keyword"
className="h-[3.6rem] w-96 rounded-[3.6rem] pl-4 pr-12"
placeholder="검색어를 입력해주세요."
/>
<Button
type="submit"
size="icon"
className="absolute right-[0.4rem] top-[0.4rem] size-[2.8rem] rounded-full p-2"
>
<i className="diveicon di-search" />
</Button>
</form>
);
}