각 화면에 해당하는 설명들을 구성해야 해... 동적 방식이 아닌 정적 방식으로 구현하자 - 파일 설명의 작성 부분에 llm 을 적용시킬 수 있음 코드 내용 요약 등등

string 형식으로 단순히 저장되어 있는 코드들, 

이를 동적으로 관리할 수 있는 방법이 있을까?

 

그런데 이 또한 문제로 하이라이트에 해당하는 부분의 지정 문제가 발생함...

이를 동적으로 구현하기는 힘들 것 

 

1. 파일 이름과 내용을 직접 FilesData.js에 작성

FilesData.js에 각 파일의 내용을 문자열로 작성합니다. 파일을 동적으로 읽지 않고, 데이터를 명시적으로 선언합니다.

const files = [
  {
    fileName: "App.js",
    code: `
import React from "react";
import FileViewer from "./FileViewer";
import files from "./FilesData";

const App = () => {
  return (
    <div>
      <h1>Code Files Viewer</h1>
      <FileViewer files={files} />
    </div>
  );
};

export default App;
    `,
  },
  {
    fileName: "FileViewer.js",
    code: `
import React from "react";
import { Link } from "react-router-dom";

const FileViewer = ({ files }) => {
  return (
    <div>
      <h1>Code Files</h1>
      <ul>
        {files.map((file, index) => (
          <li key={index}>
            <Link to={\`/file/\${file.fileName}\`}>
              {file.fileName}
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default FileViewer;
    `,
  },
  {
    fileName: "FileDetail.js",
    code: `
import React from "react";
import { useParams, Link } from "react-router-dom";
import { Light as SyntaxHighlighter } from "react-syntax-highlighter";
import { docco } from "react-syntax-highlighter/dist/esm/styles/hljs";

const FileDetail = ({ files }) => {
  const { fileName } = useParams();
  const file = files.find((f) => f.fileName === fileName);

  if (!file) {
    return <div>File not found</div>;
  }

  return (
    <div>
      <h2>{file.fileName}</h2>
      <SyntaxHighlighter language="javascript" style={docco}>
        {file.code}
      </SyntaxHighlighter>
      <Link to="/">Back to file list</Link>
    </div>
  );
};

export default FileDetail;
    `,
  },
];

export default files;

 

파일 데이터를 컴포넌트에서 사용

App.js에서 FilesData.js를 가져와 FileViewer와 FileDetail에 전달합니다.

import React from "react";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import FileViewer from "./FileViewer";
import FileDetail from "./FileDetail";
import files from "./FilesData";

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<FileViewer files={files} />} />
        <Route path="/file/:fileName" element={<FileDetail files={files} />} />
      </Routes>
    </Router>
  );
};

export default App;

 

 

필요할 때 데이터 추가

새로운 파일을 추가하려면 FilesData.js에 객체를 추가하면 됩니다.

 

각 페이지에 설명을 추가하려면 FilesData.js에 설명 필드를 추가하고, 이를 컴포넌트에서 렌더링하면 됩니다.

 

FilesData.js에 설명 필드 추가

description 필드를 추가하여 각 파일에 대한 설명을 포함합니다. - 여기서 llm 이 사용될 수 있음 description 의 내용을 불러오는 등의 로직 구현

const files = [
  {
    fileName: "App.js",
    description: "This is the main entry point of the React application.",
    code: `
import React from "react";
import FileViewer from "./FileViewer";
import files from "./FilesData";

const App = () => {
  return (
    <div>
      <h1>Code Files Viewer</h1>
      <FileViewer files={files} />
    </div>
  );
};

export default App;
    `,
  },
  {
    fileName: "FileViewer.js",
    description: "This component renders the list of files with links to their details.",
    code: `
import React from "react";
import { Link } from "react-router-dom";

const FileViewer = ({ files }) => {
  return (
    <div>
      <h1>Code Files</h1>
      <ul>
        {files.map((file, index) => (
          <li key={index}>
            <Link to={\`/file/\${file.fileName}\`}>
              {file.fileName}
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default FileViewer;
    `,
  },
  {
    fileName: "FileDetail.js",
    description: "This component shows the detailed code and description of a file.",
    code: `
import React from "react";
import { useParams, Link } from "react-router-dom";
import { Light as SyntaxHighlighter } from "react-syntax-highlighter";
import { docco } from "react-syntax-highlighter/dist/esm/styles/hljs";

const FileDetail = ({ files }) => {
  const { fileName } = useParams();
  const file = files.find((f) => f.fileName === fileName);

  if (!file) {
    return <div>File not found</div>;
  }

  return (
    <div>
      <h2>{file.fileName}</h2>
      <p>{file.description}</p> {/* 설명 출력 */}
      <SyntaxHighlighter language="javascript" style={docco}>
        {file.code}
      </SyntaxHighlighter>
      <Link to="/">Back to file list</Link>
    </div>
  );
};

export default FileDetail;
    `,
  },
];

export default files;

 

FileDetail.js에서 설명 출력

파일 세부 정보 페이지에서 description 필드를 출력합니다.

import React from "react";
import { useParams, Link } from "react-router-dom";
import { Light as SyntaxHighlighter } from "react-syntax-highlighter";
import { docco } from "react-syntax-highlighter/dist/esm/styles/hljs";

const FileDetail = ({ files }) => {
  const { fileName } = useParams();
  const file = files.find((f) => f.fileName === fileName);

  if (!file) {
    return <div>File not found</div>;
  }

  return (
    <div>
      <h2>{file.fileName}</h2>
      <p style={{ fontStyle: "italic", color: "#555" }}>{file.description}</p> {/* 설명 추가 */}
      <SyntaxHighlighter language="javascript" style={docco}>
        {file.code}
      </SyntaxHighlighter>
      <Link to="/">Back to file list</Link>
    </div>
  );
};

export default FileDetail;

 

FileViewer.js에서 설명 추가 (선택 사항)

목록에서도 파일 설명을 간략하게 보여줄 수 있습니다.

import React from "react";
import { Link } from "react-router-dom";

const FileViewer = ({ files }) => {
  return (
    <div>
      <h1>Code Files</h1>
      <ul>
        {files.map((file, index) => (
          <li key={index} style={{ marginBottom: "16px" }}>
            <Link to={`/file/${file.fileName}`} style={{ fontWeight: "bold" }}>
              {file.fileName}
            </Link>
            <p style={{ margin: "4px 0", color: "#555" }}>{file.description}</p> {/* 간략 설명 추가 */}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default FileViewer;