✨ Feat: 대시보드 수정 페이지 기초 UI 작업

src/app/dashboard/[id]/edit/components/EditInfo.tsx

@@ -0,0 +1,3 @@
+export default function EditInfo() {
+  return <p>대시보드 수정 페이지</p>
+}

src/app/dashboard/[id]/edit/components/EditInvitation.tsx

@@ -0,0 +1,3 @@
+export default function EditInvitation() {
+  return <p>대시보드 초대 수정 페이지</p>
+}

src/app/dashboard/[id]/edit/components/EditMember.tsx

@@ -0,0 +1,3 @@
+export default function EditMember() {
+  return <p>대시보드 멤버 수정 페이지</p>
+}

src/app/dashboard/[id]/edit/page.tsx

@@ -1,24 +1,37 @@
 'use client'
 
+import EditInfo from '@dashboard/components/edit/EditInfo'
+import EditInvitation from '@dashboard/components/edit/EditInvitation'
+import EditMember from '@dashboard/components/edit/EditMember'
 import { showError, showSuccess } from '@lib/toast'
+import Image from 'next/image'
 
 export default function DashBoardEditPage() {
   const handleSuccess = () => {
-    showSuccess('대시보드가 성공적으로 저장되었습니다.')
+    showSuccess('대시보드가 성공적으로 수정되었습니다.')
   }
 
   const handleError = () => {
-    showError('저장 중 오류가 발생했습니다.')
+    showError('수정 중 오류가 발생했습니다.')
   }
 
   return (
-    <div className="space-y-4 p-6">
-      <p className="text-xl font-semibold">대시보드 수정 페이지</p>
-
-      <div className="flex gap-4">
-        <button onClick={handleSuccess}>성공 토스트</button>
-        <button onClick={handleError}>에러 토스트</button>
+    <div className="BG-gray">
+      <div
+        className="flex cursor-pointer items-center gap-12 p-16"
+        onClick={() => window.history.back()}
+      >
+        <Image src="/images/back.png" alt="돌아가기" width={8} height={4} />
+        <p>돌아가기</p>
+      </div>
+      <div className="flex w-500 flex-col gap-16 p-16">
+        <EditInfo />
+        <EditMember />
+        <EditInvitation />
       </div>
+      <button className="Text-btn Border-btn ml-16 rounded-md px-64 py-12">
+        대시보드 삭제하기
+      </button>
     </div>
   )
 }

src/app/features/dashboard/components/edit/EditInfo.tsx

@@ -0,0 +1,129 @@
+import api from '@lib/axios'
+import Image from 'next/image'
+import { useRouter } from 'next/navigation'
+import React, { useEffect, useState } from 'react'
+
+import { DASHBOARD_COLORS } from '@/app/shared/constants/colors'
+import { CreateDashboardRequest } from '@/app/shared/types/dashboard'
+
+export default function EditInfo() {
+  const router = useRouter()
+  const [formData, setFormData] = useState<CreateDashboardRequest>({
+    title: '',
+    color: DASHBOARD_COLORS[0],
+  })
+
+  const [isSubmitting, setIsSubmitting] = useState(false)
+
+  /// 입력값 변경 처리
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target
+    setFormData((prev) => ({
+      ...prev,
+      [name]: value,
+    }))
+  }
+  // 색상 선택 처리
+  const handleColorSelect = (color: string) => {
+    setFormData((prev) => ({ ...prev, color }))
+  }
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+
+    if (!formData.title || !formData.color) {
+      return
+    }
+    try {
+      setIsSubmitting(true)
+
+      if (!process.env.NEXT_PUBLIC_TEAM_ID) {
+        throw new Error('NEXT_PUBLIC_TEAM_ID 환경변수가 설정되지 않았습니다.')
+      }
+
+      const response = await api.post(
+        `/${process.env.NEXT_PUBLIC_TEAM_ID}/dashboards`,
+        formData,
+      )
+
+      const data = response.data
+
+      // 성공 시 대시보드 상세 페이지로 이동
+      router.push(`/dashboard/${data.id}`)
+    } catch (error) {
+      console.error('대시보드 생성 오류:', error)
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  return (
+    <div>
+      {/* 컨테이너 */}
+      <div className="BG-white h-300 w-584 rounded-16 px-32 py-24">
+        <h2 className="Text-black mb-24 text-18 font-bold">새로운 대시보드</h2>
+
+        <form onSubmit={handleSubmit}>
+          {/* 제목 입력 */}
+          <div className="mb-16">
+            <label htmlFor="title" className="Text-black mb-8 block text-16">
+              대시보드 이름
+            </label>
+            <input
+              type="text"
+              id="title"
+              name="title"
+              value={formData.title}
+              onChange={handleChange}
+              placeholder="대시보드 이름을 입력해주세요."
+              className="Border-section w-512 rounded-8 px-12 py-10 text-16 outline-none"
+              required
+            />
+          </div>
+
+          {/* 색상 선택 */}
+          <div className="mb-30">
+            <div className="flex gap-8">
+              {DASHBOARD_COLORS.map((color) => (
+                <button
+                  key={color}
+                  type="button"
+                  onClick={() => handleColorSelect(color)}
+                  className="relative flex size-30 items-center justify-center rounded-full"
+                  style={{ backgroundColor: color }}
+                  aria-label={`색상 ${color}`}
+                >
+                  {/* 선택된 색상 체크 */}
+                  {formData.color === color && (
+                    <div className="relative size-24 items-center justify-center">
+                      <Image
+                        src="/images/check.svg"
+                        alt="check"
+                        fill
+                        className="object-contain"
+                      />
+                    </div>
+                  )}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* 하단 버튼 */}
+          <div>
+            <button
+              type="submit"
+              disabled={!formData.title || !formData.color || isSubmitting}
+              className={`BG-violet h-48 w-512 rounded-8 px-16 py-10 text-16 font-semibold text-white transition-opacity ${
+                !formData.title || !formData.color || isSubmitting
+                  ? 'cursor-not-allowed opacity-50'
+                  : 'hover:opacity-90'
+              }`}
+            >
+              변경
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}

src/app/features/dashboard/components/edit/EditInvitation.tsx

@@ -0,0 +1,67 @@
+import { UserInfo } from '@components/common/UserInfo'
+import { cn } from '@lib/cn'
+import Image from 'next/image'
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+import React from 'react'
+
+import { mockMembers } from './mockMember'
+
+export default function EditInvitation() {
+  const pathname = usePathname()
+  return (
+    <div>
+      {/* 컨테이너 */}
+      <div className="BG-white h-360 w-584 rounded-16 px-32 py-24">
+        <div className="mb-24 flex items-center justify-between">
+          <h2 className="Text-black text-18 font-bold">초대 내역</h2>
+
+          <div className="flex items-center">
+            <p className="Text-gray mr-16 text-12">1 페이지 중 1</p>
+            <Image src="/images/prev.png" alt="이전" width={36} height={36} />
+            <Image src="/images/next.png " alt="다음" width={36} height={36} />
+            <Link
+              href="/modal"
+              className={cn(
+                'BG-violet ml-16 flex items-center gap-8 rounded-5 px-12 py-6',
+                pathname === '/modal' && 'font-semibold',
+              )}
+            >
+              <div className="relative flex size-12">
+                <Image
+                  src="/images/invitation-white.png"
+                  fill
+                  alt="초대 버튼"
+                />
+              </div>
+              <p className="text-14 text-white">초대하기</p>
+            </Link>
+          </div>
+        </div>
+
+        <form>
+          <label htmlFor="title" className="Text-black mb-8 block text-16">
+            이메일
+          </label>
+          <div className="flex flex-col gap-4">
+            {mockMembers.map((member, index) => (
+              <div
+                key={index}
+                className="Border-bottom flex items-center justify-between py-4"
+              >
+                <UserInfo
+                  key={index}
+                  nickname={member.nickname}
+                  imageUrl={member.imageUrl}
+                />
+                <button className="Text-btn Border-btn rounded-md px-16 py-2">
+                  취소
+                </button>
+              </div>
+            ))}
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}

src/app/features/dashboard/components/edit/EditMember.tsx

@@ -0,0 +1,48 @@
+import Image from 'next/image'
+import React from 'react'
+
+import { UserInfo } from '@/app/shared/components/common/UserInfo'
+
+import { mockMembers } from './mockMember'
+
+export default function EditMember() {
+  return (
+    <div>
+      {/* 컨테이너 */}
+      <div className="BG-white h-360 w-584 rounded-16 px-32 py-24">
+        <div className="mb-24 flex items-center justify-between">
+          <h2 className="Text-black text-18 font-bold">구성원</h2>
+
+          <div className="flex items-center">
+            <p className="Text-gray mr-16 text-12">1 페이지 중 1</p>
+            <Image src="/images/prev.png" alt="이전" width={36} height={36} />
+            <Image src="/images/next.png " alt="다음" width={36} height={36} />
+          </div>
+        </div>
+
+        <form>
+          <label htmlFor="title" className="Text-black mb-8 block text-16">
+            이름
+          </label>
+          <div className="flex flex-col gap-4">
+            {mockMembers.map((member, index) => (
+              <div
+                key={index}
+                className="Border-bottom flex items-center justify-between py-4"
+              >
+                <UserInfo
+                  key={index}
+                  nickname={member.nickname}
+                  imageUrl={member.imageUrl}
+                />
+                <button className="Text-btn Border-btn rounded-md px-16 py-2">
+                  삭제
+                </button>
+              </div>
+            ))}
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}

src/app/features/dashboard/components/edit/mockMember.js

@@ -0,0 +1,24 @@
+// mockMember.js
+
+export const mockMembers = [
+  {
+    nickname: '민준',
+    imageUrl: '/images/profile.gif',
+  },
+  {
+    nickname: '서연',
+    imageUrl: null,
+  },
+  {
+    nickname: 'James',
+    imageUrl: null,
+  },
+  {
+    nickname: '나연 ',
+    imageUrl: '/images/profile.gif',
+  },
+  {
+    nickname: 'Emily',
+    imageUrl: null,
+  },
+]

src/app/globals.css

@@ -40,6 +40,9 @@ body {
 .Text-error {
   @apply text-[#D6173A];
 }
+.Text-btn {
+  @apply text-[#5FBBFF] dark:text-[#228DFF];
+}
 .Border-error {
   @apply border border-[#D6173A];
 }

src/app/shared/components/common/UserInfo.tsx

@@ -4,7 +4,7 @@ import { Avatar } from './Avatar'
 
 type UserInfoProps = {
   nickname: string
-  imageUrl?: string
+  imageUrl?: string | null
   size?: number
 }
 

src/app/shared/components/common/header/Header.tsx

@@ -13,7 +13,7 @@ export default function Header() {
   const pathname = usePathname()
 
   return (
-    <header className="BG-white Border-bottom Text-black w-full overflow-x-hidden border-b px-48 py-12">
+    <header className="BG-white Border-bottom Text-black w-full overflow-x-hidden border-b px-48 py-10">
       <div className="flex w-full items-center justify-between pr-16">
         {/* 좌측 대시보드명 */}
         <div className="flex shrink-0 items-center gap-8 pr-16">
@@ -41,7 +41,7 @@ export default function Header() {
             <Link
               href="/modal"
               className={cn(
-                'Border-btn mr-16 flex items-center gap-6 rounded-md border px-12 py-6',
+                'Border-btn mr-16 flex items-center gap-6 rounded-md px-12 py-6',
                 pathname === '/modal' && 'font-semibold',
               )}
             >
@@ -52,8 +52,8 @@ export default function Header() {
             </Link>
           </nav>
           {/* 협업자 목록 */}
-          <CollaboratorList />|
-          <div className="flex items-center gap-32">
+          <CollaboratorList />
+          <div className="flex items-center gap-32 border-l pl-16">
             {/* 사용자 정보 드롭다운 */}
             <UserDropdown />
             {/* 다크모드 토글 */}