@potenlab/ui 0.1.2 → 0.2.1

package/template/admin/src/features/user-management/components/user-columns.tsx

@@ -0,0 +1,101 @@
+"use client";
+
+import type { ColumnDef } from "@tanstack/react-table";
+import { Avatar, AvatarImage, AvatarFallback, Button, DataTableColumnHeader } from "@potenlab/ui";
+import type { User } from "@/features/user-management/types";
+
+interface GetUserColumnsOptions {
+  onDelete?: (user: User) => void;
+}
+
+export function getUserColumns(
+  options?: GetUserColumnsOptions
+): ColumnDef<User>[] {
+  return [
+    {
+      accessorKey: "nickname",
+      header: "닉네임",
+      meta: { className: "flex-1" },
+    },
+    {
+      accessorKey: "grade",
+      header: "등급",
+      meta: { className: "flex-1" },
+    },
+    {
+      accessorKey: "avatar",
+      header: "아바타",
+      meta: { className: "w-[80px] text-center", headerClassName: "w-[80px] text-center" },
+      cell: ({ row }) => (
+        <div className="flex items-center justify-center">
+          <Avatar>
+            <AvatarImage
+              src={row.original.avatar}
+              alt={`${row.original.nickname} avatar`}
+            />
+            <AvatarFallback>{row.original.nickname.charAt(0)}</AvatarFallback>
+          </Avatar>
+        </div>
+      ),
+    },
+    {
+      accessorKey: "phone",
+      header: "휴대폰 번호",
+      meta: { className: "flex-1" },
+    },
+    {
+      accessorKey: "age",
+      header: "나이",
+      meta: { className: "flex-1" },
+    },
+    {
+      accessorKey: "gender",
+      header: "성별",
+      meta: { className: "flex-1" },
+    },
+    {
+      accessorKey: "region",
+      header: "지역",
+      meta: { className: "flex-1" },
+    },
+    {
+      accessorKey: "joinDate",
+      header: ({ column }) => (
+        <DataTableColumnHeader column={column} title="가입일" />
+      ),
+      meta: { className: "flex-1" },
+      enableSorting: true,
+    },
+    {
+      accessorKey: "withdrawalDate",
+      header: ({ column }) => (
+        <DataTableColumnHeader column={column} title="탈퇴일" />
+      ),
+      meta: { className: "flex-1" },
+      enableSorting: true,
+    },
+    {
+      id: "delete",
+      header: "삭제",
+      meta: { className: "w-[57px]" },
+      cell: ({ row }) => (
+        <Button
+          variant="ghost"
+          size="ghost"
+          onClick={(e) => {
+            e.stopPropagation();
+            options?.onDelete?.(row.original);
+          }}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.stopPropagation();
+            }
+          }}
+          aria-label={`Delete user ${row.original.nickname}`}
+        >
+          삭제
+        </Button>
+      ),
+    },
+  ];
+}

package/template/admin/src/features/user-management/components/user-detail.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { Pencil } from "lucide-react";
+
+import { Card, CardContent, PageHeader } from "@potenlab/ui";
+import { UserDetailForm } from "@/components/user-management/user-detail-form";
+import { mockUsers } from "@/lib/mock-data";
+import type { UserDetailFormValues } from "@/features/user-management/types";
+
+export interface UserDetailProps {
+  userId: string;
+}
+
+export function UserDetail({ userId }: UserDetailProps) {
+  const user = mockUsers.find((u) => u.id === userId) || mockUsers[0];
+
+  const [profileImages, setProfileImages] = useState<string[]>(user.profileImages);
+
+  const form = useForm<UserDetailFormValues>({
+    defaultValues: {
+      role: user.role,
+      nickname: user.nickname,
+      phone: user.phone,
+      age: user.age,
+      gender: user.gender,
+      exerciseStyle: user.exerciseStyle,
+      gymRelocation: user.gymRelocation,
+      region: user.region,
+      bench: user.bench,
+      deadlift: user.deadlift,
+      squat: user.squat,
+      intro: user.intro,
+      profilePublic: user.settings.profilePublic,
+      matchChatNotification: user.settings.matchChatNotification,
+      marketingNotification: user.settings.marketingNotification,
+    },
+  });
+
+  const handleImageUpload = (index: number, file: File) => {
+    const previewUrl = URL.createObjectURL(file);
+    setProfileImages((prev) => {
+      const updated = [...prev];
+      if (index < updated.length) {
+        updated[index] = previewUrl;
+      } else {
+        updated.push(previewUrl);
+      }
+      return updated;
+    });
+  };
+
+  const handleSave = form.handleSubmit((data) => {
+    // TODO: implement save logic
+    console.log("Save:", data);
+  });
+
+  return (
+    <Card>
+      <CardContent className="p-8">
+        <PageHeader
+          title="사용자관리"
+          subtitle="사용자 정보를 수정할 수 있습니다."
+          actionLabel="변경사항 저장"
+          actionIcon={Pencil}
+          onAction={handleSave}
+        />
+
+        <UserDetailForm
+          user={user}
+          form={form}
+          profileImages={profileImages}
+          onImageUpload={handleImageUpload}
+        />
+      </CardContent>
+    </Card>
+  );
+}

package/template/admin/src/features/user-management/components/user-list.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { useState, useMemo } from "react";
+import { useRouter } from "next/navigation";
+import { Pencil } from "lucide-react";
+
+import { Card, CardContent, PageHeader, TabNavigation, SearchBar, PaginationControls, DataTable } from "@potenlab/ui";
+import { getUserColumns } from "@/features/user-management/components/user-columns";
+import { mockUsers, totalUserCount } from "@/lib/mock-data";
+
+export function UserList() {
+  const router = useRouter();
+  const [searchValue, setSearchValue] = useState("");
+  const [activeTab, setActiveTab] = useState("all");
+  const [currentPage, setCurrentPage] = useState(1);
+  const [itemsPerPage, setItemsPerPage] = useState(10);
+
+  const columns = useMemo(
+    () =>
+      getUserColumns({
+        onDelete: (user) => {
+          // TODO: implement delete confirmation dialog
+          console.log("Delete user:", user.id);
+        },
+      }),
+    []
+  );
+
+  return (
+    <Card>
+      <CardContent className="p-8">
+        <div className="flex flex-col gap-6">
+          <PageHeader
+            title="사용자관리"
+            subtitle="사용자 리스트 관리 페이지"
+            badgeCount={totalUserCount}
+            actionLabel="작성"
+            actionIcon={Pencil}
+          />
+
+          <TabNavigation
+            tabs={[
+              { value: "all", label: "전체" },
+              { value: "tab2", label: "Tab" },
+              { value: "tab3", label: "Tab" },
+            ]}
+            defaultValue={activeTab}
+            onTabChange={setActiveTab}
+          />
+
+          <SearchBar
+            value={searchValue}
+            onChange={setSearchValue}
+          />
+
+          <PaginationControls
+            currentPage={currentPage}
+            totalPages={1}
+            itemsPerPage={itemsPerPage}
+            onPageChange={setCurrentPage}
+            onItemsPerPageChange={setItemsPerPage}
+          />
+
+          <DataTable
+            columns={columns}
+            data={mockUsers}
+            enableSorting
+            onRowClick={(user) => router.push(`/users/${user.id}`)}
+          />
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

package/template/admin/src/features/user-management/types/index.ts

@@ -0,0 +1,113 @@
+// src/features/user-management/types/index.ts
+
+export interface UserSettings {
+  profilePublic: boolean;
+  matchChatNotification: boolean;
+  marketingNotification: boolean;
+}
+
+export interface User {
+  id: string;
+  nickname: string;
+  grade: string;
+  avatar: string;
+  phone: string;
+  age: string;
+  gender: string;
+  region: string;
+  joinDate: string;
+  withdrawalDate: string;
+  role: string;
+  exerciseStyle: string;
+  gymRelocation: string;
+  bench: string;
+  deadlift: string;
+  squat: string;
+  intro: string;
+  profileImages: string[];
+  settings: UserSettings;
+}
+
+export interface UserDetailFormValues {
+  role: string;
+  nickname: string;
+  phone: string;
+  age: string;
+  gender: string;
+  exerciseStyle: string;
+  gymRelocation: string;
+  region: string;
+  bench: string;
+  deadlift: string;
+  squat: string;
+  intro: string;
+  profilePublic: boolean;
+  matchChatNotification: boolean;
+  marketingNotification: boolean;
+}
+
+/** @deprecated Use ColumnDef<User> from @tanstack/react-table with getUserColumns() instead */
+export interface UserTableColumn {
+  key: keyof User | "delete";
+  label: string;
+  width: string; // CSS width: "flex-1", "80px", "57px"
+  sortable: boolean;
+  alignment: "left" | "center";
+}
+
+/** @deprecated Use getUserColumns() from @/features/user-management/components/user-columns instead */
+export const USER_TABLE_COLUMNS: UserTableColumn[] = [
+  { key: "nickname",       label: "닉네임",       width: "flex-1", sortable: false, alignment: "left" },
+  { key: "grade",          label: "등급",         width: "flex-1", sortable: false, alignment: "left" },
+  { key: "avatar",         label: "아바타",       width: "80px",   sortable: false, alignment: "center" },
+  { key: "phone",          label: "휴대폰 번호",  width: "flex-1", sortable: false, alignment: "left" },
+  { key: "age",            label: "나이",         width: "flex-1", sortable: false, alignment: "left" },
+  { key: "gender",         label: "성별",         width: "flex-1", sortable: false, alignment: "left" },
+  { key: "region",         label: "지역",         width: "flex-1", sortable: false, alignment: "left" },
+  { key: "joinDate",       label: "가입일",       width: "flex-1", sortable: true,  alignment: "left" },
+  { key: "withdrawalDate", label: "탈퇴일",       width: "flex-1", sortable: true,  alignment: "left" },
+  { key: "delete",         label: "삭제",         width: "57px",   sortable: false, alignment: "left" },
+];
+
+export interface PaginationState {
+  currentPage: number;
+  totalPages: number;
+  itemsPerPage: number;
+  pageJumpInput: string;
+}
+
+export const DEFAULT_PAGINATION: PaginationState = {
+  currentPage: 1,
+  totalPages: 1,
+  itemsPerPage: 10,
+  pageJumpInput: "",
+};
+
+export type FormFieldType = "input" | "select";
+
+export interface FormField {
+  key: keyof User;
+  label: string;
+  type: FormFieldType;
+  options?: string[]; // Only for type "select"
+}
+
+export const BASIC_INFO_ROW_1: FormField[] = [
+  { key: "role",     label: "역할",     type: "select", options: ["사용자", "관리자"] },
+  { key: "nickname", label: "닉네임",   type: "input" },
+  { key: "phone",    label: "휴대폰",   type: "input" },
+  { key: "age",      label: "나이",     type: "input" },
+];
+
+export const BASIC_INFO_ROW_2: FormField[] = [
+  { key: "gender",         label: "성별",          type: "select", options: ["남자", "여자"] },
+  { key: "exerciseStyle",  label: "운동 스타일",    type: "select", options: ["보디빌딩", "크로스핏", "유산소"] },
+  { key: "gymRelocation",  label: "헬스장 이전",    type: "select", options: ["가능", "불가능"] },
+  { key: "region",         label: "지역",          type: "select", options: ["서울 마포구", "강남구", "송파구"] },
+];
+
+export const BASIC_INFO_ROW_3: FormField[] = [
+  { key: "bench",    label: "벤치프레스",  type: "input" },
+  { key: "deadlift", label: "데드리프트",  type: "input" },
+  { key: "squat",    label: "스쿼트",     type: "input" },
+];

package/template/admin/src/features/user-management/utils/format.ts

@@ -0,0 +1,2 @@
+/** @deprecated Import from "@potenlab/ui" instead */
+export { formatNumber } from "@potenlab/ui";

package/template/admin/src/lib/mock-data.ts

@@ -0,0 +1,131 @@
+import type { User } from "@/features/user-management/types";
+
+export const mockUsers: User[] = [
+  {
+    id: "1",
+    nickname: "닉네임입니다.",
+    grade: "매니아",
+    avatar: "/avatars/user1.svg",
+    phone: "010-1234-1234",
+    age: "1999년생",
+    gender: "남자",
+    region: "강남구",
+    joinDate: "2022년 11월 1일",
+    withdrawalDate: "2022년 11월 1일",
+    role: "사용자",
+    exerciseStyle: "보디빌딩",
+    gymRelocation: "가능",
+    bench: "100kg",
+    deadlift: "100kg",
+    squat: "100kg",
+    intro: "한줄 소개 내용입니다.",
+    profileImages: ["/profile/img1.svg", "/profile/img2.svg", "/profile/img3.svg"],
+    settings: {
+      profilePublic: false,
+      matchChatNotification: true,
+      marketingNotification: false,
+    },
+  },
+  {
+    id: "2",
+    nickname: "닉네임입니다.",
+    grade: "매니아",
+    avatar: "/avatars/user2.svg",
+    phone: "010-1234-1234",
+    age: "1999년생",
+    gender: "남자",
+    region: "강남구",
+    joinDate: "2022년 11월 1일",
+    withdrawalDate: "2022년 11월 1일",
+    role: "사용자",
+    exerciseStyle: "보디빌딩",
+    gymRelocation: "가능",
+    bench: "100kg",
+    deadlift: "100kg",
+    squat: "100kg",
+    intro: "한줄 소개 내용입니다.",
+    profileImages: ["/profile/img1.svg", "/profile/img2.svg", "/profile/img3.svg"],
+    settings: {
+      profilePublic: false,
+      matchChatNotification: true,
+      marketingNotification: false,
+    },
+  },
+  {
+    id: "3",
+    nickname: "닉네임입니다.",
+    grade: "매니아",
+    avatar: "/avatars/user3.svg",
+    phone: "010-1234-1234",
+    age: "1999년생",
+    gender: "남자",
+    region: "강남구",
+    joinDate: "2022년 11월 1일",
+    withdrawalDate: "2022년 11월 1일",
+    role: "사용자",
+    exerciseStyle: "보디빌딩",
+    gymRelocation: "가능",
+    bench: "100kg",
+    deadlift: "100kg",
+    squat: "100kg",
+    intro: "한줄 소개 내용입니다.",
+    profileImages: ["/profile/img1.svg", "/profile/img2.svg", "/profile/img3.svg"],
+    settings: {
+      profilePublic: false,
+      matchChatNotification: true,
+      marketingNotification: false,
+    },
+  },
+  {
+    id: "4",
+    nickname: "닉네임입니다.",
+    grade: "매니아",
+    avatar: "/avatars/user4.svg",
+    phone: "010-1234-1234",
+    age: "1999년생",
+    gender: "남자",
+    region: "강남구",
+    joinDate: "2022년 11월 1일",
+    withdrawalDate: "2022년 11월 1일",
+    role: "사용자",
+    exerciseStyle: "보디빌딩",
+    gymRelocation: "가능",
+    bench: "100kg",
+    deadlift: "100kg",
+    squat: "100kg",
+    intro: "한줄 소개 내용입니다.",
+    profileImages: ["/profile/img1.svg", "/profile/img2.svg", "/profile/img3.svg"],
+    settings: {
+      profilePublic: false,
+      matchChatNotification: true,
+      marketingNotification: false,
+    },
+  },
+  {
+    id: "5",
+    nickname: "닉네임입니다.",
+    grade: "매니아",
+    avatar: "/avatars/user5.svg",
+    phone: "010-1234-1234",
+    age: "1999년생",
+    gender: "남자",
+    region: "강남구",
+    joinDate: "2022년 11월 1일",
+    withdrawalDate: "2022년 11월 1일",
+    role: "사용자",
+    exerciseStyle: "보디빌딩",
+    gymRelocation: "가능",
+    bench: "100kg",
+    deadlift: "100kg",
+    squat: "100kg",
+    intro: "한줄 소개 내용입니다.",
+    profileImages: ["/profile/img1.svg", "/profile/img2.svg", "/profile/img3.svg"],
+    settings: {
+      profilePublic: false,
+      matchChatNotification: true,
+      marketingNotification: false,
+    },
+  },
+];
+
+export const totalUserCount = 100000;

package/template/admin/src/styles/globals.css

@@ -0,0 +1,26 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+@import "@potenlab/ui/styles/globals.css";
+@source "../node_modules/@potenlab/ui/dist";
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+    background-color: #FCFCFC;
+    font-family: 'Pretendard Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/template/admin/tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts",
+    "**/*.mts"
+  ],
+  "exclude": ["node_modules"]
+}