허브 페이지 레이아웃

apps/hub/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+    "extends": ["next/core-web-vitals", "next/typescript"]
+}

apps/hub/.gitignore

@@ -0,0 +1,40 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

apps/hub/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+-   [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+-   [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

apps/hub/next.config.ts

@@ -0,0 +1,7 @@
+import type { NextConfig } from 'next';
+
+const nextConfig: NextConfig = {
+    /* config options here */
+};
+
+export default nextConfig;

apps/hub/package.json

@@ -0,0 +1,26 @@
+{
+    "name": "hub",
+    "version": "0.1.0",
+    "private": true,
+    "scripts": {
+        "dev": "next dev",
+        "build": "next build",
+        "start": "next start",
+        "lint": "next lint"
+    },
+    "dependencies": {
+        "react": "19.0.0-rc-66855b96-20241106",
+        "react-dom": "19.0.0-rc-66855b96-20241106",
+        "next": "15.0.3"
+    },
+    "devDependencies": {
+        "typescript": "^5",
+        "@types/node": "^20",
+        "@types/react": "^18",
+        "@types/react-dom": "^18",
+        "postcss": "^8",
+        "tailwindcss": "^3.4.1",
+        "eslint": "^8",
+        "eslint-config-next": "15.0.3"
+    }
+}

apps/hub/postcss.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+    plugins: {
+        tailwindcss: {},
+    },
+};
+
+export default config;

apps/hub/src/app/architectures/[id]/page.tsx

@@ -0,0 +1,89 @@
+'use client';
+import { Button } from '@/components/Button';
+import { useParams } from 'next/navigation';
+import { useEffect, useState } from 'react';
+
+interface PublicArchitecture {
+    id: string;
+    title: string;
+    author: string;
+    createdAt: Date;
+    architecture: string;
+    stars: number;
+    imports: number;
+}
+
+export default function ArchitectureDetailPage() {
+    const params = useParams<{ id: string }>();
+    const [architecture, setArchitecture] = useState<PublicArchitecture>(
+        {} as any,
+    );
+
+    useEffect(() => {
+        const fetchedArchitecture = {
+            id: params.id,
+            title: 'Architecture for Cloud Canvas',
+            author: 'Web37-team',
+            createdAt: new Date(),
+            architecture: 'Architecture Content',
+            stars: 4,
+            imports: 2,
+        };
+        setArchitecture(fetchedArchitecture);
+    }, []);
+
+    const handleImport = () => {
+        console.log('Imported!');
+    };
+
+    return (
+        <div className="mx-auto max-w-3xl flex flex-col gap-10">
+            <header className="flex flex-col gap-4">
+                <h2 className="text-4xl font-extrabold">
+                    {architecture.title}
+                </h2>
+                <div className="flex gap-6 text-gray-500 text-sm">
+                    <div className="flex gap-1">
+                        <span>by</span>
+                        <span className="text-black">
+                            {architecture.author}
+                        </span>
+                    </div>
+                    <div>{architecture.createdAt?.toLocaleString()}</div>
+                    <div className="flex gap-1">
+                        <span className="text-black">
+                            {architecture.imports}
+                        </span>
+                        <span>imported</span>
+                    </div>
+                </div>
+                <div className="flex gap-4 justify-end">
+                    <Button onClick={handleImport}>
+                        <span className="font-bold">☆ </span>
+                        {architecture.stars}
+                    </Button>
+                    <Button onClick={handleImport}>Import</Button>
+                </div>
+                <hr />
+            </header>
+            <ArchitectureImageExample />
+        </div>
+    );
+}
+
+const ArchitectureImageExample = () => (
+    <svg
+        width="full"
+        viewBox="0 0 224 148"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <rect width="224" height="148" rx="8" fill="#4B5563" />
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M122.87 66.1598C124.894 66.1598 126.535 64.4415 126.535 62.3218C126.535 60.2022 124.894 58.4839 122.87 58.4839C120.846 58.4839 119.205 60.2022 119.205 62.3218C119.205 64.4415 120.846 66.1598 122.87 66.1598ZM112.726 89.4003H90.5708C89.7935 89.4003 89.3134 88.5524 89.7132 87.8859L104.829 62.6872C105.211 62.0497 106.128 62.0329 106.526 62.6603C108.484 65.7407 113.409 73.5017 117.599 80.1967L122.143 72.5763C122.511 71.9598 123.374 71.9396 123.784 72.5379L134.246 87.8172C134.705 88.4872 134.259 89.4045 133.469 89.4125L123.317 89.5162L112.726 89.4003Z"
+            fill="#6B7280"
+        />
+    </svg>
+);

apps/hub/src/app/canvas/page.tsx

@@ -0,0 +1,3 @@
+export default function CanvasPage() {
+    return <div>this is canvas page</div>;
+}

apps/hub/src/app/globals.css

@@ -0,0 +1,21 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* :root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+body {
+  color: var(--foreground);
+  background: var(--background);
+  font-family: Arial, Helvetica, sans-serif;
+} */

apps/hub/src/app/layout.tsx

@@ -0,0 +1,21 @@
+import type { Metadata } from 'next';
+import './globals.css';
+import { GlobalHeader } from '@/components/GlobalHeader';
+
+export const metadata: Metadata = {
+    title: 'Create Next App',
+    description: 'Generated by create next app',
+};
+
+export default function RootLayout({
+    children,
+}: Readonly<{ children: React.ReactNode }>) {
+    return (
+        <html lang="ko">
+            <body className={`antialiased`}>
+                <GlobalHeader />
+                <main className="max-w-7xl mx-auto mt-10">{children}</main>
+            </body>
+        </html>
+    );
+}

apps/hub/src/app/login/page.tsx

@@ -0,0 +1,3 @@
+export default function LoginPage() {
+    return <div>this is login page</div>;
+}

apps/hub/src/app/my/architectures/page.tsx

@@ -0,0 +1,5 @@
+import { Architectures } from '@/components/Architectures';
+
+export default function MyArchitecturesPage() {
+    return <Architectures />;
+}

apps/hub/src/app/my/layout.tsx

@@ -0,0 +1,22 @@
+import { MyPageSidebar } from '@/components/MyPageSidebar';
+import React from 'react';
+
+export default function MyPageLayout({
+    children,
+}: Readonly<{ children: React.ReactNode }>) {
+    return (
+        <>
+            <aside
+                id="sidebar"
+                className="fixed bottom-0 top-16 mt-10 w-60 overflow-y-auto pr-8"
+            >
+                <nav>
+                    <MyPageSidebar />
+                </nav>
+            </aside>
+            <div id="content" className="pl-60">
+                {children}
+            </div>
+        </>
+    );
+}

apps/hub/src/app/my/shared/page.tsx

@@ -0,0 +1,5 @@
+import { Architectures } from '@/components/Architectures';
+
+export default function MySharedPage() {
+    return <Architectures />;
+}

apps/hub/src/app/my/starred/page.tsx

@@ -0,0 +1,5 @@
+import { Architectures } from '@/components/Architectures';
+
+export default function MyStarredPage() {
+    return <Architectures />;
+}

apps/hub/src/app/my/withdrawal/page.tsx

@@ -0,0 +1,3 @@
+export default function MyWithdrawalPage() {
+    return <div>회원 탈퇴 페이지</div>;
+}

apps/hub/src/app/page.tsx

@@ -0,0 +1,13 @@
+import { Architectures } from '@/components/Architectures';
+import { Pagination } from '@/components/Pagination';
+import { SearchBar } from '@/components/SearchBar';
+
+export default function Home() {
+    return (
+        <>
+            <SearchBar />
+            <Architectures />
+            <Pagination />
+        </>
+    );
+}

apps/hub/src/components/Architectures/header.tsx

@@ -0,0 +1,45 @@
+export const ArchitectureHeader = () => {
+    const data = [
+        {
+            title: 'Architecture',
+        },
+        {
+            title: 'AUTHOR',
+        },
+        {
+            title: 'DATE',
+        },
+        {
+            title: 'STARS',
+        },
+        {
+            title: 'COST',
+        },
+        {
+            title: 'IMPORTS',
+        },
+    ];
+
+    // const handleSort = () => {
+    //     // Sorting logic here
+    // };
+
+    return (
+        <div className="bg-gray-50 flex border-b p-3 font-semibold">
+            <div className="w-full">Architecture</div>
+            <div className="flex items-center">
+                <div className="w-24">Costs</div>
+                <div className="w-24">Imports</div>
+                <div className="w-24">Stars</div>
+            </div>
+            {/* {data.map((item) => (
+                <div
+                    key={item.title}
+                    className="p-4 border-b cursor-pointer hover:bg-gray-100 text-left"
+                >
+                    {item.title}
+                </div>
+            ))} */}
+        </div>
+    );
+};