react/next.js로 만드는 online-judge 사이트 #4 문제관리 프론트엔드

다음 명령을 통해 next.js 프로젝트를 생성한다.

sevity@sevityubuntu:~/workspace/online_judge$ mkdir problem-frontend
sevity@sevityubuntu:~/workspace/online_judge/problem-frontend$ npx create-next-app .
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias? … No / Yes

Would you like to use TypeScript? - 추천: 예
Would you like to use ESLint? - 추천: 예
Would you like to use Tailwind CSS? - 추천: 아니오
Would you like to use src/ directory? - 추천: 예
Would you like to use App Router? - 추천: 예
Would you like to customize the default import alias? - 추천: 아니오

 

Bootstrap 테마변경

 Bootswatch와 같은 웹사이트에서 무료로 제공하는 Bootstrap 테마를 선택가능

테마적용방법

1. 테마 CSS 파일 다운로드: 먼저, 테마 페이지에 접속. 페이지 상단의 "Download" 버튼을 클릭하고, "bootstrap.min.css" 파일을 다운로드

2. 프로젝트에 CSS 파일 추가: 다운로드한 CSS 파일을 public/css 디렉토리를 만들고 그 안에 CSS 파일을 추가

3. CSS 파일 import: _app.js 파일을 열고, 다음 코드를 추가

import '../public/css/bootstrap.min.css';

 

next.js pages

/create 아래와 같이 문제를 새로 입력한다.(아래는 아직 실제입력,실제출력등 빠진부분들이 많다)

 

/problems 문제 목록을 아래와 같이 출력한다.

(로그인 상태가 아니라서 username이 없을 경우, frontend-service/login 으로 direct 된다)