+
{items.map((it, idx) => (
@@ -66,13 +70,25 @@ export function DropdownMenu({
setOpen(false);
}}
className={twMerge(
- "flex w-full items-center gap-3 rounding-15 px-5 py-4 text-left font-body1 transition-fast",
+ "group flex w-full items-center gap-3 rounding-15 px-5 py-4 text-left font-body1 transition-fast",
it.active
? "bg-brand-300 text-status-blue"
- : "text-text-main hover:bg-brand-300",
+ : "text-text-main hover:bg-brand-300 hover:text-status-blue",
)}
>
- {it.icon}
+ {it.icon ? (
+
+ ) : null}
(
return (
{label && (
)}
) => void;
+ className?: string;
+ minRows?: number;
+};
+
+export default function TextareaField({
+ id,
+ label,
+ value,
+ placeholder,
+ onChange,
+ className,
+ minRows = 4,
+}: TProps) {
+ const ref = useRef(null);
+ const resize = () => {
+ const el = ref.current;
+ if (!el) return;
+ el.style.height = "auto";
+ el.style.height = `${el.scrollHeight}px`;
+ };
+ useLayoutEffect(() => {
+ resize();
+ }, [value]);
+
+ return (
+
+
+ );
+}
diff --git a/src/layout/main/MainLayout.tsx b/src/layout/main/MainLayout.tsx
index e9787eb..da89024 100644
--- a/src/layout/main/MainLayout.tsx
+++ b/src/layout/main/MainLayout.tsx
@@ -4,10 +4,12 @@ import Sidebar from "@/components/Sidebar/Sidebar";
export default function MainLayout() {
return (
-
+
+
+
+ );
+}
diff --git a/src/components/workspace/WorkspaceCard.tsx b/src/components/workspace/WorkspaceCard.tsx
new file mode 100644
index 0000000..ee83f66
--- /dev/null
+++ b/src/components/workspace/WorkspaceCard.tsx
@@ -0,0 +1,56 @@
+import type { TWorkspace } from "@/types/workspace/workspace";
+
+import {
+ DropdownMenu,
+ type TMenuItem,
+} from "@/components/common/dropdownmenu/DropdownMenu";
+
+import BuildingIcon from "@/assets/icon/workspace/building.svg?react";
+import VectorIcon from "@/assets/icon/workspace/Vector.svg?react";
+
+type TProps = {
+ workspace: TWorkspace;
+ menuItems: TMenuItem[];
+};
+
+export default function WorkspaceCard({ workspace: w, menuItems }: TProps) {
+ return (
+
+
+
+
+ {/* TODO: 스타일 확인을 위해 bg-gray-100넣어둠. API연동할때 삭제예정 */}
+ {w.logoUrl ? (
+ 
+ ) : (
+
+
+
+
+ )}
+
+
+ {w.name}
+
+ {w.description ?? ""}
+
+
+ {w.myRole ?? "내 직책 및 역할"}
+
+
+ }
+ aria-label={`${w.name} 워크스페이스 메뉴`}
+ className="h-10 w-10 cursor-pointer rounded-xl hover:bg-gray-100 transition-colors flex items-center justify-center"
+ items={menuItems}
+ />
+
+
+
-
);
diff --git a/src/pages/workspace/Workspace.tsx b/src/pages/workspace/Workspace.tsx
index 9d0ebac..c2b2625 100644
--- a/src/pages/workspace/Workspace.tsx
+++ b/src/pages/workspace/Workspace.tsx
@@ -1,3 +1,230 @@
-export default function Workspace() {
- return (null);
+ const openFile = () => {
+ if (!fileRef.current) return;
+ fileRef.current.value = "";
+ fileRef.current.click();
+ };
+ const [logoFile, setLogoFile] = useState(null);
+ const [logoPreview, setLogoPreview] = useState(null);
+ const workspaces: TWorkspace[] = useMemo(
+ () => [
+ {
+ id: "1",
+ name: "광고회사1",
+ description: "광고회사1입니다.",
+ myRole: "admin",
+ },
+ {
+ id: "2",
+ name: "광고회사2",
+ description: "광고회사2입니다.",
+ myRole: "admin",
+ },
+ {
+ id: "3",
+ name: "광고회사3",
+ description: "광고회사3입니다.",
+ myRole: "admin",
+ },
+ ],
+ [],
+ );
+ const filtered = useMemo(() => {
+ const q = query.trim().toLowerCase();
+ if (!q) return workspaces;
+ return workspaces.filter((w) => w.name.toLowerCase().includes(q));
+ }, [query, workspaces]);
+
+ const menuItems = (id: TWorkspace["id"]): TMenuItem[] => [
+ {
+ icon: ) => {
+ const file = e.target.files?.[0];
+ if (!file) return;
+ setLogoFile(file);
+ setLogoPreview(URL.createObjectURL(file));
+ };
+
+ // TODO: 모달 닫힐때 preview URL 해제필요
+ useEffect(() => {
+ return () => {
+ if (logoPreview) URL.revokeObjectURL(logoPreview);
+ };
+ }, [logoPreview]);
+
+ // TODO: API 연동 후에 생성 동작 연결하기
+ const onSubmitCreate = () => {
+ const form = new FormData();
+ form.append("name", newName.trim());
+ form.append("description", newDesc.trim());
+ if (logoFile) form.append("logo", logoFile);
+
+ console.log("create payload", {
+ name: newName.trim(),
+ description: newDesc.trim(),
+ logoFile,
+ });
+ alert("API 연동 후에 생성 기능 연결예정");
+ };
+
+ return (
+
+
+
+ setCreateOpen(false)}
+ size="xl"
+ padding="lg"
+ >
+
+
+ );
}
diff --git a/src/pages/workspace/WorkspaceSetting.tsx b/src/pages/workspace/WorkspaceSetting.tsx
new file mode 100644
index 0000000..051c4b5
--- /dev/null
+++ b/src/pages/workspace/WorkspaceSetting.tsx
@@ -0,0 +1,157 @@
+import { useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+
+import Button from "@/components/common/button/Button";
+import Input from "@/components/common/input/Input";
+import Modal from "@/components/common/modal/Modal";
+
+import MessageCircleWarningIcon from "@/assets/icon/workspace/message-circle-warning.svg?react";
+import UpLoadImgIcon from "@/assets/icon/workspace/uploadImg.svg?react";
+import WarningIcon from "@/assets/icon/workspace/warning.svg?react";
+
+export default function WorkspaceSetting() {
+ const navigate = useNavigate();
+ const { workspaceId } = useParams();
+ const [name, setName] = useState("");
+ const [desc, setDesc] = useState("");
+ const [deleteOpen, setDeleteOpen] = useState(false);
+ const onSave = () => {
+ alert(`API 연동후 저장예정 (workspaceId=${workspaceId})`);
+ };
+ const onDelete = () => {
+ alert(`API 연동후 삭제예정 (workspaceId=${workspaceId})`);
+ setDeleteOpen(false);
+ navigate("/workspace", { replace: true });
+ };
+
+ return (
+
+
+
+
Workspace
;
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+import type { TWorkspace } from "@/types/workspace/workspace";
+
+import Button from "@/components/common/button/Button";
+import { type TMenuItem } from "@/components/common/dropdownmenu/DropdownMenu";
+import Input from "@/components/common/input/Input";
+import Modal from "@/components/common/modal/Modal";
+import TextareaField from "@/components/common/textarea/TextareaField";
+import WorkspaceCard from "@/components/workspace/WorkspaceCard";
+
+import EditContainIcon from "@/assets/icon/workspace/edit-contained.svg?react";
+import PlusIcon from "@/assets/icon/workspace/plus.svg?react";
+import SearchIcon from "@/assets/icon/workspace/search.svg?react";
+import UpLoadImgIcon from "@/assets/icon/workspace/uploadImg.svg?react";
+import UserProfileIcon from "@/assets/icon/workspace/userProfile.svg?react";
+
+export default function WorkspacePage() {
+ const navigate = useNavigate();
+
+ const [query, setQuery] = useState("");
+ const [createOpen, setCreateOpen] = useState(false);
+
+ const [newName, setNewName] = useState("");
+ const [newDesc, setNewDesc] = useState("");
+ const fileRef = useRef워크스페이스 관리
++ 워크스페이스 정보를 확인하고 관리하세요. +
+
+
+
+ setQuery(e.target.value)}
+ rightElement={
+
+ -
+ {filtered.map((w) => (
+
-
+
워크스페이스가 없습니다.
+
+ )}
+
+
+ + 워크스페이스 생성 +
+
+ 워크스페이스를 생성한 사용자는 자동으로 관리자 권한을 갖습니다.{" "}
+
로고 이미지와 기본 정보를 입력해 주세요.
+
+ setNewDesc(e.target.value)}
+ />
+
+
+
+
+
+
+ setNewName(e.target.value)}
+ />
+
+
+
+ 로고 이미지
+
+ 워크스페이스 관리
++ 워크스페이스 정보를 확인하고 관리하세요. +
+
+
기본 정보
++ 워크스페이스의 대표적인 정보를 설정합니다. +
+
+
+
+ 로고 이미지
+
+
+
+
+
+
+
+ setName(e.target.value)}
+ />
+
+
+