Self-Check 프로젝트의 상세 페이지에서 OSS 탭에 해당하는 영역에서 필요로 하는 각종 기능을 구현합니다.

1. OSS Exclude 기능 구현

react-toggle 라이브러리를 활용하여 <Toggle /> 컴포넌트를 정의하고, 이를 통해 다음과 같이 Exclude 기능을 구현합니다.

2. OSS 추가/편집 모달 구현

상단의 + 버튼을 눌러서 OSS를 추가할 수 있는 모달, 그리고 동일한 디자인으로 각 OSS의 연필 아이콘을 클릭하여 해당 OSS를 수정할 수 있는 모달을 구현합니다. 디자인은 아래와 같습니다.

3. OSS 필터링, 정렬, 페이지네이션 구현

다음과 같은 디자인으로 필터링, 정렬, 페이지네이션을 구현합니다. 필터링은 일반적인 목록 페이지와 디자인이 동일하고, 여기에 추가로 정렬을 위한 Select 바를 배치합니다. Select 바에서 정렬의 기준을 선택하면 바로 아래에 그 정렬 기준이 추가되고, 각 정렬 기준은 클릭 시 오름차순/내림차순 방향이 Toggle 됩니다. [Apply] 버튼을 클릭하면 현재 설정되어 있는 필터링 및 정렬 조건이 적용됩니다. 일반적인 목록 페이지와 달리, 한 프로젝트에 속한 OSS의 개수가 많아봐야 1,000개 단위일 것으로 보이므로 여기서는 한 번에 모든 OSS를 로드하고 프론트에서 필터링, 정렬, 페이지네이션을 구현하는 것으로 합니다.

#16, #21 이슈를 통해, OSS 목록 페이지를 대표로 삼아 각종 목록 페이지가 공통적으로 필요로 하는 정적/동적 기능들을 구현하였습니다. 이번 이슈에서는 그러한 공통 기능들을 나머지 목록 페이지(아래 항목 참조)에도 적용하도록 합니다. 그리고 그 과정에서 #20 이슈에서 다룬 내용과 같이 각 테이블에 대해 보여줘야 하는 데이터의 종류 및 순서 등도 결정하도록 합니다.

• License 목록 페이지
• Vulnerability 목록 페이지
• Self-Check 목록 페이지

#16 이슈에서 각종 목록 페이지를 위한 템플릿을 구축하였습니다. 해당 이슈가 각종 목록 페이지의 공통적인 '정적' 기능을 구현한 거라면, 이번 이슈에서는 각종 목록 페이지의 공통적인 '동적' 기능을 구현합니다. 마찬가지로 우선은 OSS List 페이지에만 구현하고, 나중에 나머지 목록 페이지에도 적용하도록 합니다.

※ 기존에 Tailwind CSS 컴포넌트 라이브러리로서 설치했던 @headlessui/react 패키지는 단순한 컴포넌트를 제외하고 나면 유료로 이용해야 하므로 삭제하도록 합니다.

1. 필터, 정렬, 페이지네이션 구현

react-hook-form을 활용하여 필터 기능을 구현하고, 이를 URL 쿼리 파라미터와 연동합니다. (+ 필터가 너무 많은 경우를 보완하기 위한 히든 필터도 별도로 구현하고, 이를 접었다 펼칠 수 있는 기능까지 구현합니다.) 그리고 URL 쿼리 파라미터를 기반으로 정렬 및 페이지네이션 기능도 구현합니다. 필터, 정렬, 또는 페이지네이션의 상태에 따라 리스트의 데이터를 읽어올 수 있어야 합니다.

2. 로딩 효과 구현

데이터를 읽어오는 동안 사용자의 경험을 개선하기 위해 로딩 효과를 추가합니다. 이때, 사이드 바와 전체 검색 바가 위치한 영역을 제외한 페이지 본문 영역만 흐리게 처리합니다.

3. 컬럼 선택기 구현

테이블에서 원하는 컬럼의 데이터만 조회할 수 있도록 선택하는 기능을 추가합니다.

Self-Check 프로젝트의 상세 정보 조회/생성/수정/삭제 기능을 구현합니다.

조회를 제외한 나머지 세 기능은 기존의 API를 활용하여 구현하였으며, 이후 백엔드에서 새롭게 엔드포인트를 파면 그 엔드포인트로 옮기기만 하면 됩니다. 조회는 Rest API가 구현되어 있지 않아 백엔드에서 구현된 이후에 연결할 예정으로, 지금은 하드 코딩한 값을 설정하도록 구현해두었습니다.

TODO

DB

• OSS
  • 추가, 조회
• Licenses
  • 추가, 조회
• Vulnerability
  • 조회

Self-Check

• Project list

ETC

• Dashbard
  • 전체검색, OSS, Vulnerability 등의 최신 추가 순 정렬 등
• User list
• Code list

• 일부 endpoint의 경우 기존 V1에서 open된 endpoint와 비슷하게 겹치는 것도 생길 수 있어, V1에서 input/output이 너무 바뀌지 않으면서 frontend에서도 적합하게 쓸 수 있게 설계하는게 간건인듯
• Self-Check의 경우 Lite버전에 적합한 용도의 Self-Check 스키마를 새로 정의해야 함
  • LiteSelfCheckService를 따로 구현해야 함

(일단 다 묶었지만 개발 도중 굵직한 것들은 별개의 이슈로 빼내는게 좋을 듯 하다)

Self-Check 프로젝트의 생성과 편집을 위한 모달을 구현합니다. Self-Check 프로젝트의 기본 정보는 프로젝트 이름, 프로젝트 버전, 댓글 정도로만 이뤄져 있기 때문에 페이지가 아닌 모달을 통해 간소화된 UI를 제공하도록 합니다.

1. Modal 컴포넌트 리팩토링

기존에는 모바일의 상단 바에 존재하는 프로필 아이콘을 클릭했을 때 뜨는 모달이 유일한 모달이었는데, 본 이슈의 작업을 비롯하여 앞으로도 모달을 활용할 경우가 많을 것이기에 Modal이라는 이름의 컴포넌트를 별도로 정의하도록 합니다.

export default function Modal({
  show,
  onHide,
  hideByBackdrop = true,
  children
}: {
  show: boolean;
  onHide: () => void;
  hideByBackdrop?: boolean;
  children: React.ReactNode;
}) {
  ...
}

2. Self-Check 프로젝트 생성/편집 모달 구현

• 입력 기능이 존재하는 모달이므로, Backdrop을 클릭해도 모달이 닫히지 않도록 합니다.
• 프로젝트 이름만 필수 입력으로 두고, 나머지는 선택 입력으로 합니다.
• 생성 시에는 모든 입력이 처음에 비어 있도록 하고, 수정 시에는 기존 값이 채워져 있도록 합니다.

50글자 제한을 끄자

오픈되어 있는 V1 api들을 먼저 V2로 옮긴다.

• ApiOSSController
• ApiPartnerController (써드파티)
• ApiProjectController
• ApiVulnerabilityController
• ApiSelfCheckController
• ApiCodeController
• ApiBatController (바이너리 정보 조회)

패키지: oss.fosslight.api.controller.v2

수정해야 할 사항들:

• Exception 발생 시 상황에 맞는 http status를 리턴하기 위해 ExceptionAdvice 추가
• Swagger Api V2 화면 추가
• Restful한 리턴값 전용 responseService 구현
• 하나의 endpoint로 통합 가능한 Api의 통합 + mapper query 수정

전체적인 웹사이트 디자인의 기반(템플릿)을 구축합니다.

1. 웹사이트의 아이콘 및 제목 설정

• 웹사이트의 아이콘(favicon)은 기존의 FOSSLight Hub 웹사이트와 동일한 것을 사용합니다.
• 웹사이트의 제목(title)은 간단히 FOSSLight Hub Lite로 설정합니다.
• 어차피 SEO가 필요 없기 때문에 다른 메타 태그의 설정은 우선 생략합니다.

2. 기본 폰트 및 자주 사용하는 색상의 팔레트 설정

• 기존의 FOSSLight Hub 웹사이트에서 사용하는 SourceSansPro 폰트를 기본 폰트로 설정합니다. (단, 기본 폰트는 추후 UI의 개선을 위해 변경될 여지가 있습니다.)
• 다음과 같이 자주 사용하는 색상의 목록을 Tailwind CSS 설정 파일에 정의합니다.

charcoal: '#34393f',
crimson: '#b02a42',
semiwhite: '#eeeeee',
semiblack: '#222222',
gray: '#bbbbbb',
semigray: '#cccccc',
darkgray: '#aaaaaa'

※ charcoal을 charcol로 오타를 냈어서, #16 이슈에서 이를 수정하였습니다.

3. 로그인, 회원가입, 비밀번호 재설정 페이지 UI 구현

로그인, 회원가입, 비밀번호 재설정 페이지의 UI를 구현합니다. 디자인은 아래와 같습니다.

3-1. 로그인 페이지

3-2. 회원가입 페이지

3-3. 비밀번호 재설정 페이지

※ 세 페이지 모두, 모바일 버전에서도 동일한 UI를 사용합니다.

4. 사이드 바, 전체 검색 바 컴포넌트 UI 구현

메인 페이지의 템플릿을 구성하는 사이드 바와 전체 검색 바의 UI를 구현합니다. 디자인은 아래와 같습니다.

• 각종 아이콘은 fontawesome 라이브러리에서 가져와 사용합니다.
• 좌상단의 햄버거 버튼을 클릭할 시 사이드 바가 숨겨집니다.
• 현재 페이지에 해당하는 메뉴가 하이라이트되어 보입니다.
• 사이드 바의 높이가 뷰포트보다 작다면 사이드 바 내에 스크롤을 구성합니다. 이때, 스크롤바는 숨깁니다.
• 사이드 바와 페이지 본문의 스크롤은 별도로 구성합니다. 즉, 본문을 스크롤해도 사이드 바는 고정됩니다.
• 전체 검색 바에 포커스할 시 주변 음영이 더욱 진해집니다.

※ 모바일 버전의 UI는 별도의 이슈에서 구현할 예정입니다.

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

System Environment (please complete the following information):

• Browser [e.g. chrome, safari]
• Version [e.g. 22]
• Etc

Additional context
Add any other context about the problem here.

프론트만 수정하면 빌드 안돌리게 수정

Construct the base of website design (template) 이슈에서 진행한 작업의 연장선으로, 모바일 버전의 템플릿을 구축합니다.

1. 모바일 뷰포트 감지를 위한 패키지 설치

Tailwind CSS를 사용하고 있기 때문에 CSS의 미디어 쿼리를 통해 모바일 뷰포트를 감지하여 반응형 CSS를 구성하는 방법은 클래스를 작성하는 부분의 코드를 매우 번잡하게 만듭니다. 따라서 JavaScript를 이용하여 모바일 뷰포트를 감지하고, 이에 맞게 렌더링을 분기하는 방향을 택합니다.

이를 위해, 브라우저의 resize 이벤트를 통해 모바일 뷰포트를 감지하는 코드를 추상화를 해둔 react-responsive 패키지를 설치하고, 해당 패키지에서 제공하는 커스텀 Hook을 사용합니다. 해당 패키지는 아래와 같이 설치합니다.

npm install react-responsive

사용 방법은 대략 다음과 같습니다. 뷰포트의 너비가 768px 이하일 때를 모바일 뷰포트로 정의합니다.

import { useMediaQuery } from 'react-responsive';

const isMobile = useMediaQuery({ maxWidth: 768 });

2. 네비게이션 구조 변경

모바일 버전의 템플릿을 구축하기에 앞서, 메뉴의 네비게이션 구조를 다음과 같이 변경합니다.

• Self-Check라는 메뉴는 소메뉴가 한 개이므로 Project라는 단일 메뉴로 변경합니다.
• 중요도와 UI를 고려하여 Project 메뉴를 Dashboard 메뉴의 바로 다음으로 옮깁니다.

3. 하단 바, 전체 검색 바 컴포넌트 UI 구현

모바일 전용의, 메인 페이지의 템플릿을 구성하는 하단 바와 전체 검색 바의 UI를 구현합니다. 네비게이션을 위해 하단 바를 택한 것은 최근 모바일 앱 UI의 트렌드를 따른 것입니다. 디자인은 아래와 같습니다.

전체 검색 바를 활용하여 검색을 했을 때 이동하게 되는 검색 결과 페이지를 구현합니다.

기본적인 디자인은 앞서 구현한 대시보드 페이지에서 Vulnerability, OSS, License 정보를 리스트업해주는 부분을 그대로 가져와 사용합니다. 다만 show more here 텍스트를 삭제하고, 검색 결과가 없는 경우 No entries가 아니라 No results를 보여주게 합니다.

또한, 검색 키워드와 매칭되는 부분(실제로 검색 쿼리에 활용한 부분)은 노란색 형광펜 표시를 해주도록 합니다.

1. PC 디자인

2. 모바일 디자인

• Vulnerability 데이터의 노출 순서를 변경합니다. (OSS 먼저, 그 다음에 CVE ID)
• FOSSLight 로고 클릭 시 대시보드 페이지로 이동하도록 합니다.
• (모바일에서) 프로필 아이콘 클릭 시 프로필 정보가 팝업으로 뜨도록 합니다.

TODO (for now)

• Force lint
• Check build errors
• Deploy to gh page(?)

Use merged identifiers rather than single full name

OSS, License, Vulnerability의 상세 정보를 확인할 수 있는 모달을 구현합니다.

1. 상세 모달 엔트리 포인트 설정

• OSS 목록 페이지 → OSS 상세 모달
• License 목록 페이지 → License 상세 모달
• Vulnerability 목록 페이지 → Vulnerability 상세 모달
• 대시보드 페이지, 전체 검색 결과 페이지 → OSS 상세 모달, License 상세 모달, Vulnerability 상세 모달
• Self-Check 프로젝트 상세 페이지 → OSS 상세 모달, Vulnerability 상세 모달

2. OSS, License, Vulnerability 상세 모달 구현

2-1. OSS 상세 모달 디자인

2-2. License 상세 모달 디자인

2-3. Vulnerability 상세 모달 디자인

백엔드의 API를 프론트엔드에 연결하면서 발생하는 여러 가지 이슈를 처리합니다.

FOSSLight Hub Lite 프로젝트의 개발을 진행하기 위한 초기 설정을 진행합니다.

1. Next.js 프로젝트 생성

Next.js 공식 문서의 가이드에 따라, create-next-app 패키지를 활용하여 Next.js 프로젝트를 생성합니다. (현재 기준 13.5.4 버전)

npx create-next-app

# What is your project named? fosslight-lite
# Would you like to use TypeScript? Yes
# Would you like to use ESLint? Yes
# Would you like to use Tailwind CSS? Yes
# Would you like to use `src/` directory? No
# Would you like to use App Router? (recommended) Yes
# Would you like to customize the default import alias? No

1-1. 프로젝트명 / 패키지명

위 명령어에서 요구하는 프로젝트명으로는 fosslight-lite를 입력하되, 생성 이후에 실제 디렉토리명은 lite로 수정합니다. 이는 하나의 패키지로서 가지는 패키지명과 fosslight 저장소의 하위 프로젝트로서 가지는 프로젝트명을 구분하기 위함입니다.

1-2. 추가 설정

TypeScript 및 ESLint 설정도 포함하도록 합니다.

2. ESLint, Prettier 설정

Airbnb 코드 스타일 가이드에 따라 ESLint를 설정하고, Prettier 플러그인도 설정하여 Prettier의 검사 규칙이 ESLint의 규칙으로 검사되도록 합니다. 또한, 패키지의 import 순서를 일관된 규칙으로 관리하기 위한 Prettier 플러그인도 함께 설정합니다.

npx install-peerdeps --dev eslint-config-airbnb-base

npm install --save-dev eslint-config-airbnb-typescript \
            @typescript-eslint/eslint-plugin@^6.0.0 \
            @typescript-eslint/parser@^6.0.0

npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier

npm install --save-dev @trivago/prettier-plugin-sort-imports

3. 각종 패키지 설치

npm install recoil

npm install axios react-query

npm install dayjs

npm install react-hook-form

npm install @headlessui/react

• Add notice api
• add parameters to listing

Self-Check 프로젝트의 상세 페이지를 구현합니다. OSS, Package, Notice의 탭으로 구성되어 있습니다.

1. 공통

• 페이지 위쪽에는 해당 프로젝트에 관한 기본 정보를 노출합니다.
• 페이지 중간에는 탭 전환을 위한 UI를 배치하고, 현재 탭에 관한 간략한 설명문을 노출합니다.

2. OSS 탭

프로젝트에 속한 OSS의 목록을 기입하는 페이지입니다.

• 파일 업로드 또는 소스 코드의 URL 입력을 통해 OSS 목록을 불러올 수 있습니다.
• OSS를 선택하고 휴지통 아이콘을 클릭하면 선택한 OSS들을 삭제할 수 있습니다.
• 기존에 존재하던 여러 종류의 버튼들을 간략화하여 우측 상단에 배치합니다.
• OSS 목록의 UI는 사용성과 외관을 향상시키기 위해 카드 형식을 채택합니다.
• [+ Add another OSS] 영역을 클릭하면 OSS를 수기로도 기입할 수 있습니다.

3. Package 탭

프로젝트에 속한 OSS 중 소스 코드 공개가 필요한 OSS의 소스 코드를 업로드하는 페이지입니다. 아래에는 소스 코드 공개가 필요한 OSS의 목록을 테이블 형식으로 나열합니다.

4. Notice 탭

OSS 및 라이센스 정보를 담은 고지문을 생성하는 페이지입니다. 디폴트 혹은 커스텀 버전으로 생성할 수 있고, [Preview] 버튼을 통해 미리보기도 할 수 있습니다. 디폴트 버전을 선택하는 경우 커스텀 필드 영역은 비활성화됩니다.

• oss/ossNicknames
• oss/licenses/identifiers
• oss/attribution
• license/licenseType

Self-Check 프로젝트의 Notice 탭에서, Notice를 생성 또는 미리보기 할 수 있는 기능을 구현합니다.

기존의 API를 활용하여 구현하였으며, 이후 백엔드에서 새롭게 엔드포인트를 파면 그 엔드포인트로 옮기기만 하면 됩니다.

• implement api for vulnerability details
• implement api for License details

• oss
• licenses

• Restrict Account for Login
• Fetch Only My Self-Check Projects
• Fix Incorrect Deactivate Response
• Resolve CORS Issue of Private IPs
• API for Loading Users/Divisions
• Save Original OSS for Detecting Diff
• Change Endpoints of Existing APIs

메인 페이지에 해당하는 대시보드 페이지를 구현합니다.

대시보드 페이지는 크게 두 종류의 파트로 구성됩니다. 첫 번째 파트는 사용자가 만든 Self-Check 프로젝트에 대한 Insight을 제공하는 부분이고, 두 번째 파트는 최근 DB에 반영된 Vulnerability, OSS, License 정보를 리스트업 해주는 부분입니다.

아직 Self-Check 페이지의 구현을 진행하지 않은 관계로, 이번 이슈에서는 두 번째 파트에 대한 구현 먼저 진행합니다. 나중에 Self-Check 페이지의 구현이 완료되고 나면 이를 바탕으로 첫 번째 파트도 기획/개발을 진행할 예정입니다.

PC/모바일 디자인은 아래의 내용을 참고하고, 공통적인 기능은 다음과 같습니다.

• show more here 텍스트를 클릭하면 해당하는 데이터의 페이지로 이동하도록 합니다. 단, 이때 수정 일시를 기준으로 자동으로 정렬이 걸리도록 URL 쿼리 파라미터도 함께 지정합니다.
• 각 섹션별로 접었다 펼칠 수 있는 기능을 구현합니다.
• created(Vulnerability라면 published) 필드와 modified 필드의 값을 비교하여, 더 최신인 값을 보여주도록 합니다.

1. PC 디자인

2. 모바일 디자인

https://www.notion.so/API-b34df9c4da984988bf234c0f5380b9ed

• add a V2 api endpoint corresponding to POST https://demo.fosslight.org/project/save3rd

OSS, License, Vulnerability에 해당하는 데이터베이스 스키마(모델링)를 파악하고, 이를 토대로 각 스키마에 대해 실제로 표현해야 하는 데이터의 종류 및 순서 등을 이곳에 정리합니다.

1. OSS 관련

1-1. OSS_MASTER

1-2. OSS_NICKNAME

1-3. OSS_MASTER_LICENSE_FLAG

1-4. OSS_LICENSE_DECLARED

1-5. OSS_LICENSE_DETECTED

1-6. 목록/상세 페이지에 보여줄 정보

2. License 관련

2-1. LICENSE_MASTER

2-2. LICENSE_NICKNAME

2-3. 목록/상세 페이지에 보여줄 정보

3. Vulnerability 관련

3-1. NVD_CVE_V3

• Fetched by NVD API at midnight every day

3-2. NVD_DATA_V3

• Fetched by NVD API at midnight every day

3-3. NVD_DATA_SCORE_V3

• Created by apply max aggregation on (NVD_CVE_V3 JOIN NVD_DATA_V3) at midnight every day

3-4. 목록/상세 페이지에 보여줄 정보

• pre-project listing
• oss
• package
• notice

각종 목록 페이지를 위한 템플릿을 구축합니다. 우선은 OSS List 페이지에만 구현하고, 나중에 나머지 목록 페이지에도 적용하도록 합니다. 디자인은 검색을 위한 필터, 각종 버튼들이 위치하는 영역, 그리고 테이블로 이뤄집니다.

1. PC 디자인

2. 모바일 디자인

반복적으로 자주 사용되는 스타일의 경우 Tailwind CSS의 커스텀 유틸리티 클래스로 정의하여 코드의 재활용성을 향상시킵니다.

• center-x, center-y, center
• breadcrumb
• shadow-box, shadow-box-header
• default-btn, crimson-btn

+) ListTable 컴포넌트를 수정하여, 테이블의 각 행(Row)을 클릭할 경우 해당하는 상세 페이지로 이동하도록 링크합니다.

Self-Check 프로젝트 상세 페이지의 OSS 탭에서, 기입한 OSS와 License를 확인하여 데이터베이스에 존재하는 것과 다른 경우 그것으로 바꿀 수 있도록 하는 기능을 구현합니다. 해당 기능은 서브윈도우에서 동작합니다.

[Check] 버튼을 클릭할 경우 아래와 같이 바꿀 수 있는 OSS/License의 정보가 테이블의 형식으로 나열되는 서브윈도우가 열립니다. 또한, 각 기능에 해당하는 빨간 버튼을 클릭하고 나면, 서브윈도우가 꺼지지 않고 서브윈도우와 Opener 페이지의 데이터가 리로드됩니다.

• implement api to api/lite/selfchecks/{id}

Implement:

• Dashboard api
• Global search api

2023.10.12 LG 전자 담당자 님과의 논의 결과, 본 웹사이트의 메뉴 구성이 변경되었기에, 이를 템플릿에 반영합니다.

• Etc 대메뉴의 페이지(User/Code Management)를 삭제합니다.
• 대메뉴가 하나 줄어 여유가 생겼기 때문에, 이제는 메뉴 이름으로 약칭을 쓰지 않고 풀네임을 그대로 쓰도록 변경합니다.
• 기존의 FOSSLight Hub 웹사이트에서 Project를 다른 의미로 쓰기에, 혼란을 막기 위해 Self-Check로 워딩을 변경합니다.
• Database 대메뉴의 아이콘을 변경합니다. 다른 대메뉴 아이콘의 너비와 비슷한 것을 사용해서 UI를 개선하기 위함입니다.