[개발용어사전] 스타일링과 MDE 값 가져오기

오늘은 CRA + TS에서 스타일링과 마크다운 에디터의 값을 가져올 수 있도록 useState 처리를 해줬다.

import React, { useState } from "react";
import SimpleMdeReact from "react-simplemde-editor";

export const ControlledUsage = () => {
  const [value, setValue] = useState("Initial value");

  const onChange = (value: string) => {
    setValue(value);
  };

  return <SimpleMdeReact value={value} onChange={onChange} />;
};

마크다운 에디터 React-simplemde-editor에서 직접 값을 다룰 수 있도록 Controlled Usage 컴포넌트를 받아와서 적용시켰다. 이제 본격적으로 라우터 처리를 해서 우선 메인 페이지와 용어 작성 페이지를 분류한 뒤 Next.js에 적용시켜야겠다.

그리고 그 외에도 그냥 잡다한 스타일링을 했다.

해결해야 할 부분

1. CSS: overflow 처리가 안되어있음

여기까지는 잘 나오는데, 이제 body의 width를 넘어가면

한 줄에 전부 넣으려는 성질 때문에 스타일링이 망가짐

 

2. Next.js: 아직 CRA에서 바꾸지 않음. 사실 다 만들고 바꾸는 것보다 최대한 빨리 바꾼 다음에 Next에 더 적응할 수 있도록 하는 게 좋은데, 일단 기능구현은 완료하자는 생각에 우선 미뤄두고 있다.

 

3. 기타: 며칠내로 기능구현은 완성할 것 같은데, REST API가 언제 나오냐에 따라 완성 시기가 달라질 것 같다. 그 전에 API만 넣으면 완성할 수 있게끔 SWR과 axios처리도 해두자.