Remix 관리 경로 재검토

이전 글에서는 먼저 shared layouts in Remix을 살펴보았습니다.

하지만 이것을 약간 리팩터링할 수 있는 방법에 대해 자세히 살펴보겠습니다.

이전 예제에서는 /posts/admin 구조를 사용했는데, 이는 관리 섹션에만 게시물이 있는 경우에는 괜찮습니다.
하지만 카테고리를 추가하면 어떻게 될까요? 이제 전체 관리 구조를 거기에 복제해야 합니다.

제가 이루고자 하는 것은 별도의/admin/{something} 구조입니다.

Note: You would fully split your admin from the front-end part in most projects.

우리의 경우 쇼케이스 예제를 쉽게 하기 위해 프런트 엔드와 관리 부분을 혼합할 것입니다.

관리 경로 만들기

가장 먼저 변경하고 싶은 것은 기본 관리 폴더를 갖는 것입니다.
route 디렉터리 내에 이 admin 폴더를 만듭니다.

우리는 이전 기사에서 route 디렉토리에 admin.tsx 파일을 생성해야 한다는 것을 배웠습니다. 이 파일은 관리 부분의 기본 레이아웃 역할을 합니다.

계속해서 이 파일을 만들고 다음 마크업을 사용하십시오.

import { Link, Outlet } from '@remix-run/react';

export default function PostAdmin() {
  return (
    <div className='mx-auto max-w-4xl'>
      <h1 className='my-6 mb-2 border-b-2 text-center text-3xl'>
        My super cool admin
      </h1>
      <header className='border-b-2 mb-2 p-2'>
        <ul className='flex gap-3'>
          <li>
            <Link to={'/admin'} className='text-blue-600 underline'>
              Admin
            </Link>
          </li>
          <li>
            <Link to={'posts'} className='text-blue-600 underline'>
              Posts
            </Link>
          </li>
        </ul>
      </header>
      <main className='p-4'>
        <Outlet />
      </main>
    </div>
  );
}

이렇게 하면 관리자 대시보드와 관리자 게시물 섹션에 연결할 수 있는 기본 헤더가 렌더링됩니다.

이제 index.tsx 폴더 안에 매우 간단한 admin를 생성하면 이 라우터 콘센트가 작동하는지 확인할 수 있습니다.

export default function AdminIndex() {
  return <p>Welcome to the admin panel</p>;
}

계속해서 앱을 실행하십시오. 이 시점에서 다음 결과가 표시되어야 합니다.



이미지는 큰 헤더, 두 개의 링크가 있는 메뉴 및 콘센트 내부의 인덱스 파일을 렌더링했습니다.

관리자 게시물 섹션 만들기

이제 admin 폴더 안에 posts 폴더를 만들 수 있습니다. 이것은 기존 포스트 관리자의 홈이 될 것입니다.

그리고 다시 특정 레이아웃 방법을 활용하여 admin 폴더에 posts.tsx 파일을 만들 수 있습니다. (따라서 admin/posts/ 폴더에서 한 수준 위)

이것은 다시 우리의 레이아웃이 될 것입니다.

따라하고 있는 경우 이전에 posts/admin.tsx 파일이었던 이 레이아웃이 이미 있습니다.

이 파일을 이동하고 이름을 바꾸거나 아래 코드를 복사하여 붙여넣으십시오.

import { json } from "@remix-run/node";
import { Link, Outlet, useLoaderData } from "@remix-run/react";
import { getPosts } from "~/models/post.server";
import { LoaderFunction } from "@remix-run/node";

type LoaderData = {
  posts: Awaited<ReturnType<typeof getPosts>>;
};

export const loader: LoaderFunction = async () => {
  return json({ posts: await getPosts() });
};

export default function PostAdmin() {
  const { posts } = useLoaderData() as LoaderData;

  return (
      <div className="grid grid-cols-4 gap-6">
        <nav className="col-span-4 md:col-span-1">
          <ul>
            {posts.map((post) => (
              <li key={post.slug}>
                <Link
                  to={`/posts/${post.slug}`}
                  className="text-blue-600 underline"
                >
                  {post.title}
                </Link>
              </li>
            ))}
          </ul>
        </nav>
        <main className="col-span-4 md:col-span-3">
          <Outlet />
        </main>
      </div>
  );
}

admin/posts 폴더 안에 게시물 섹션의 시작 화면인 index.tsx 파일을 만듭니다.

import { Link } from '@remix-run/react';

export default function AdminIndex() {
  return (
    <p>
      <Link to='new' className='text-blue-600 underline'>
        Create a New Post
      </Link>
    </p>
  );
}

그런 다음 우리가 만든 새 게시물 페이지를 사용하려고 합니다. new.tsx 파일을 이 admin/posts 폴더로 이동하거나 다음 내용으로 새 게시물을 만들 수 있습니다.

import { Form } from '@remix-run/react';
import { redirect } from '@remix-run/node';
import { createPost } from '~/models/post.server';

const inputClassName = `w-full rounded border border-gray-500 px-2 py-1 text-lg`;

export const action = async ({ request }) => {
  const formData = await request.formData();

  const title = formData.get('title');
  const slug = formData.get('slug');
  const content = formData.get('content');

  await createPost({ title, slug, content });
  return redirect('/posts/admin');
};

export default function NewPost() {
  return (
    <Form method='post'>
      <p>
        <label>
          Post Title:{' '}
          <input type='text' name='title' className={inputClassName} />
        </label>
      </p>
      <p>
        <label>
          Post Slug:{' '}
          <input type='text' name='slug' className={inputClassName} />
        </label>
      </p>
      <p>
        <label>
          Content:{' '}
          <input type='text' name='content' className={inputClassName} />
        </label>
      </p>
      <p className='text-right'>
        <button
          type='submit'
          className='rounded bg-blue-500 py-2 px-4 text-white hover:bg-blue-600 focus:bg-blue-400 disabled:bg-blue-300'
        >
          Create Post
        </button>
      </p>
    </Form>
  );
}

그리고 그게 다야. 이제 게시물 관리 섹션을 전역 관리 섹션으로 마이그레이션했습니다.

이렇게 하면 나중에 관리 옵션을 더 쉽게 추가할 수 있습니다.

완성된 코드는 GitHub에서 찾을 수 있습니다.

읽어주셔서 감사합니다. 연결해 봅시다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나