ci(github action): apply conventional commits validation to PR commits

.gitignore

@@ -0,0 +1,4 @@
+.DS_Store
+**/.DS_Store
+Gemfile.lock
+_site/

README.md

@@ -1,25 +1,38 @@
-# FOSSLight
+# FOSSLight Hub
+[FOSSLight Hub](https://github.com/fosslight/fosslight)는 오픈소스와 라이선스를 관리하고, 오픈소스 컴플라이언스 프로세스를 순차적으로 처리할 수 있는 통합 시스템이자 보안 취약점, Supply Chain 관리 및 SBOM(Software Bill of Materials) 관리 등 오픈소스와 관련된 모든 것을 관리할 수 있는 올인원 시스템입니다.  
+본 가이드 페이지는 FOSSLight Hub 기본 사용 방법과 tutorial, 개발 환경 세팅 방법 및 maintenance 팁 등 고급 기능들에 대해 설명하고 있습니다.
 
-FOSSLight 프로젝트는 오픈소스를 통합적으로 관리할 수 있는 시스템인 [FOSSLight Hub](#fosslight-hub)와 오픈소스 분석을 수행하는 [FOSSLight Scanner](#fosslight-scanner)로 구성되어 있습니다.
 
+## Contents
 
-## FOSSLight Hub
-[FOSSLight Hub](https://github.com/fosslight/fosslight)는 오픈소스와 라이선스를 관리하고, 오픈소스 컴플라이언스 프로세스를 순차적으로 처리할 수 있는 통합 시스템이자 보안 취약점, Supply Chain 관리 및 Software BOM(Bill of Materials) 관리 등 오픈소스와 관련된 모든 것을 관리할 수 있는 올인원 시스템입니다.  
-본 가이드 페이지는 FOSSLight Hub 기본 사용 방법과 tutorial, 개발 환경 세팅 방법 및 maintenance 팁 등 고급 기능들에 대해 설명하고 있습니다. [FOSSLight Hub 목차](about) 페이지에서 해당 내용 확인하실 수 있습니다.
+### FOSSLight Hub 메뉴
+- [로그인 및 계정 등록](menu/1_sign.md)
+- [License 정보](menu/2_license.md)
+- [Open Source 정보](menu/3_oss.md)
+- [Project](menu/4_project.md)
+- [3rd Party](menu/5_third-party.md)
+- [Binary DB](menu/10_binarydb.md)
+- [Vulnerability](menu/7_vulnerability.md)
+- [Self-Check](menu/6_self-check.md)
+- [(LGE Only)Compliance Status](menu/11.compliance_status.md)
+- [System](menu/9_system.md)
 
-## FOSSLight Scanner
-[FOSSLight Scanner](scanner)는 Prechecker, Dependency Scanner, Source Scanner, Binary Scanner 4가지의 스캐너로 구성되어 있으며, FOSSLight Scanner를 통해 4개 스캐너의 통합 결과를 생성하도록 수행할 수 있습니다.
-![](about/images/fosslight_scanner.png)
+### FOSSLight Hub 기본 Tutorial
+- [Project Tutorial](tutorial/1_project/README.md) : Project를 등록하여 Open Source Compliance 순차적으로 수행하기
+- [Self-check Tutorial](tutorial/2_self_check/README.md) : Self-check로 Open Source 의무 사항 및 보안취약점 간단히 확인하기
 
-각 Scanner에 대한 설치 및 사용 방법에 대한 가이드는 FOSSLight Scanner 하위 가이드 페이지에서 확인하실 수 있습니다.
-#### FOSSLight Prechecker
-[FOSSLight Prechecker](scanner/1_prechecker.md)는 소스 코드 내에 저작권 및 라이선스 규칙을 준수했는지 확인하고 또 저작권 및 라이선스, Download Location 정보를 쉽게 추가할 수 있도록 도와주는 도구로, 잘 활용할수록 불필요한 오픈소스 스캐닝을 막을 수 있습니다. 예를 들어 개발 초기부터 FOSSLight Prechecker를 활용하여 직접 개발한 소스 코드와 오픈소스 코드에 대하여 저작권 및 라이선스, Download Location 정보를 명확하게 표기하도록 관리한다면 별도의 스캐닝 작업 없이도 오픈소스 사용을 정확하게 파악할 수 있습니다.
+### FOSSLight Hub 고급 기능
+- [개발 환경 세팅](advanced/1_developer.md)
+- [REST API](advanced/2_rest_api_2.md)
+- [Maintenance](advanced/3_maintenance.md)
 
-#### FOSSLight Source Scanner
-[FOSSLight Source Scanner](scanner/2_source.md)는 소스 코드 스캐닝을 수행하는 도구로, 소스 코드의 문자열을 검색하여 저작권과 라이선스 문구를 검출하는 ScanCode 와 코드 조각 스캐닝을 지원하는 scanoss 를 이용하여 오픈소스 분석을 수행합니다.
+### CONTRIBUTION
+- [Report an issue](contribution/1_contribution.md)
 
-#### FOSSLight Dependency Scanner
-[FOSSLight Dependency Scanner](scanner/3_dependency.md)는 여러 패키지 매니저에 대한 종속성 분석을 통하여 오픈소스 정보를 추출하는 도구로, 패키지 매니저의 Manifest 파일을 자동으로 감지하고 각 패키지 매니저별로 종속성을 분석한 후 오픈소스 정보가 포함된 보고서 파일을 생성합니다. 이때 재귀적으로 종속성 분석을 해주기 때문에, 1차 종속성만 분석하는 디펜던시 스캐너에 비해 실제 사용된 모든 오픈소스 정보를 추출할 수 있습니다.
+### LEARN MORE
+- [FOSSLight Report](learn/2_fosslight_report.md)
 
-#### FOSSLight Binary Scanner
-[FOSSLight Binary Scanner](scanner/4_binary.md)는 바이너리 형태의 파일을 찾아서 바이너리 파일 목록을 추출한 후, 연계된 데이터베이스에 검출한 바이너리의 오픈소스 정보가 있다면 자동으로 오픈소스 정보를 출력해주는 도구입니다. 이는 바이너리 자체를 분석하는 방법이 아니기 때문에, 데이터베이스 정보가 많아야 바이너리 분석이 잘 수행될 수 있으니 참고하시기 바랍니다.
+## License
+FOSSLight Hub는 Open Source License인 [AGPL-3.0][agpl]로 배포되고 있습니다.
+
+[agpl]: https://github.com/fosslight/fosslight/blob/main/LICENSE

_config.yml

@@ -1,18 +1,18 @@
-base_url: /fosslight-guide
-title: FOSSLight Guide
+base_url: /hub-guide
+title: FOSSLight Hub Guide
 lang: ko
-description: FOSSLight Korean Guide
+description: FOSSLight Hub Korean Guide
 
 remote_theme: fosslight/guide_theme
 
-top_link: "https://fosslight.github.io/fosslight-guide-en"
+top_link: "https://fosslight.github.io/hub-guide-en"
 top_link_word: "English"
 
 addons_title: "FOSSLight Homepage"
-addons_url: "https://fosslight.org/ko"
+addons_url: "https://fosslight.org"
 
 google:
-  gtag: UA-196813776-3
+  gtag: G-7EHWGTQYDY
 
 readme_index:
   with_frontmatter: true

_includes/extra/styles.scss

@@ -279,4 +279,271 @@ body {
   margin: 0 0 40px;
   padding: 0;
   font-size: 16px;
+}
+
+//style 추가 
+$border-color: #DDDDDD; // 테두리 색상
+$highlight-color: #0066CC; // 강조 색상
+$font-family: 'Courier New'; // 폰트 패밀리
+$padding: 2px 6px; // 패딩
+$border-radius: 4px; // 테두리 반경
+
+// 테이블 스타일
+table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+// 강조 스타일
+.highlight {
+    font-family: $font-family;
+    font-weight: 600;
+    color: $highlight-color;
+    border: 1px solid $border-color;
+    padding: $padding;
+    border-radius: $border-radius;
+}
+
+.highlight-black {
+    font-family: $font-family;
+    font-weight: 600;
+    border: 1px solid $border-color;
+    padding: $padding;
+    border-radius: $border-radius;
+}
+
+.highlight_table {
+  font-weight: bold;  /* 글씨 굵게 */
+  padding: 6px 12px;  /* 여백 추가 */
+  display: inline-block;
+}
+
+.gray-text {
+  color: gray;
+}
+
+// 도트 및 화살표 스타일
+.large-dot {
+    font-size: 1em; // 도트 크기 조정
+    color: inherit; // 기본 텍스트 색상으로 설정
+}
+
+
+// 설명 스타일
+.description {
+    padding-left: 20px; // 왼쪽 여백 추가
+}
+
+//h3 제목 스타일 
+.specific-title {
+  font-size: 16px !important;
+  color: #000000;
+  text-align: left;
+  margin-top: 5px;
+  margin-bottom: 0;  // 제목 아래의 간격을 없앰
+  padding: 7px;
+  border: none; 
+  background: linear-gradient(to bottom,  #ffe4e1, #fff3f3); /* 회색에서 핑크로 그라데이션 */
+  //background-color: #ffe4e1;
+  border-radius: 5px;
+  display: inline-block; 
+  border-left: 3px solid #f8a8a8;
+  /*width: 100%; */
+}
+
+//h2 제목 스타일 
+.left-bar-title {
+  color: #000000;
+  text-align: left;
+  padding: 10px 2px;  /* 패딩으로 높이를 조절  */
+  padding-left: 15px;
+  //border-left: 10px solid #413f3f; 
+  border-left: 5px solid #444444; 
+  border-radius: 5px;
+  display: block;
+  background-color:#E6E6E6;
+  background: linear-gradient(to bottom,  #797979, #ffffff);
+  width: 100%;
+  margin: 150px 0 20px 0;
+}
+
+//h4 제목 스타일 
+.under-bar-title {
+  position: relative; // 위치 설정
+  display: inline-block;
+  font-size: 0.9rem !important;
+      // 헤더 아래에 선 추가
+      &::after {
+        content: ""; // 가상 요소 생성
+        display: block; // 블록 요소로 설정
+        width: calc(100% - 10px); // 텍스트 너비에서 오른쪽 여백을 줄임
+        height: 2px; // 선의 두께를 2px로 설정 (현재의 2배)
+        background: linear-gradient(to right, #413f3f, #ffe4e1 ); // 그라데이션 색상
+        margin-top: 5px; // 헤더와 선 사이의 여백
+        position: absolute; // 절대 위치
+        left: 0; // 왼쪽 정렬
+        bottom: -5px; // 헤더 아래 위치
+    }
+}
+
+
+// h5 제목 스타일
+.under-2bar-title {
+  position: relative; // 위치 설정
+  display: inline-block;
+  font-size: 0.85rem !important;
+  text-indent: 20px;  // 텍스트 첫 번째 줄에 20px 들여쓰기 추가
+
+  // 첫 번째 파란색 선
+  &::after {
+    content: ""; // 가상 요소 생성
+    display: block; // 블록 요소로 설정
+    width: 100%; // 전체 너비
+    height: 2px; // 선의 두께
+    background-color: #0000ff; // 파란색
+    margin-top: 5px; // 제목과 선 사이의 간격
+    position: absolute;
+    left: 0; // 왼쪽 정렬
+    bottom: -5px; // 첫 번째 선의 위치
+  }
+
+  // 두 번째 파란색 선
+  &::before {
+    content: ""; // 가상 요소 생성
+    display: block; // 블록 요소로 설정
+    width: 100%; // 전체 너비
+    height: 2px; // 선의 두께
+    background-color: #0000ff; // 파란색
+    margin-top: 2px; // 첫 번째 선과 두 번째 선 사이의 간격
+    position: absolute;
+    left: 0; // 왼쪽 정렬
+    bottom: -7px; // 두 번째 선의 위치 (첫 번째 선보다 아래로)
+  }
+}
+
+
+.markdown-body p,
+.markdown-body ul li,
+.markdown-body ol li,
+.markdown-body details summary,
+.markdown-body table th,
+.markdown-body table td {
+    font-size: 0.85rem; /* 폰트 크기 설정 */
+    color: inherit; /* 부모의 색상 상속 */
+    padding: 1px; /* 셀 안의 여백 조정 */
+    line-height: 1.4;         /* 줄 간격 줄이기 (기본은 보통 1.5~1.6) */
+    margin-top: 2px;          /* 요소 위 간격 살짝 */
+    margin-bottom: 2px;       /* 요소 아래 간격도 살짝 */
+}
+
+
+.note {
+  background-color: #faf9f4; /* 연한 노란색 배경 */
+  border: 1px solid #ffeeba; /* 노란색 테두리 */
+  color: #5e4701; /* 어두운 노란색 글자 */
+  padding: 10px; /* 내부 여백 */
+  border-radius: 4px; /* 모서리 둥글게 */
+  font-size: 0.85rem; /* 폰트 크기 설정 */
+}
+
+.youtube-container {
+  text-align: left;  // 왼쪽 정렬
+  margin-top: 0;  // YouTube 비디오 위 간격
+  margin-bottom: 0;  // YouTube 비디오 아래 간격
+  position: relative;
+  display: block;  // display를 block 새로운 줄에 배치
+  background-color: #f5f5f5; // 배경 색상
+  padding: 10px;  // 여백을 줄여서 비디오 주변 공간을 최소화
+  border-radius: 8px;
+  width: 560px;  // 고정된 YouTube iframe의 너비
+  height: 315px;  // 고정된 YouTube iframe의 높이
+  margin-left: 0;  // 왼쪽 정렬을 확실하게 적용하기 위해서 margin-left 추가
+  margin-right: 0; // 오른쪽 여백을 없애기
+
+  iframe {
+    width: 100%;  // iframe을 div 크기에 맞게 조정
+    height: 100%; // iframe 높이를 부모 요소의 높이에 맞게 설정
+    display: block;  // 블록 요소로 설정
+    margin: 0;  // 여백을 0으로 설정하여 왼쪽으로 정렬
+    border-radius: 8px;
+  }
+}
+
+
+.styled-image {
+  max-width: 100%;             /* 화면 크기에 맞게 이미지를 크기 조정 */
+  height: auto;                /* 비율을 유지하면서 높이 자동 설정 */
+  display: block;              /* 블록 요소로 설정하여 새로운 줄에 배치 */
+  float: none; /* <-- 명시적으로 float 제거 */
+  clear: both;
+  margin: 0;                   /* 여백을 0으로 설정 */
+  margin-right: 20px;          /* 이미지와 텍스트 사이에 간격 추가 */
+  margin-bottom: 20px;
+  border: 2px solid #ddd;      /* 얇은 테두리 추가 */
+  border-radius: 8px;          /* 둥근 테두리 */
+  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* 부드러운 그림자 */
+}
+
+
+.styled-image_nofloat {
+  max-width: 100%;           /* 화면 크기에 맞게 이미지를 크기 조정 */
+  display: block;            /* 블록 요소로 설정하여 새로운 줄에 배치 */
+  margin: 0;                 /* 여백을 0으로 설정 */
+  margin-right: 20px;        /* 이미지와 텍스트 사이에 간격 추가 */
+  margin-bottom: 20px;       /* 이미지 아래에 20px의 마진 추가 */
+  border: 2px solid #ddd;    /* 얇은 테두리 추가 */
+  border-radius: 8px;        /* 둥근 테두리 */
+  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* 부드러운 그림자 */
+  clear: both;               /* float된 요소 아래로 텍스트가 내려가도록 처리 */
+}
+
+.list-with-dot {
+  padding-left: 10px;
+  margin: 0;
+  list-style-type: disc;
+}
+
+.oss-warning-table {
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    table-layout: fixed; // 열 너비 고정을 위해 추가
+    font-family: Arial, sans-serif;
+
+    th, td {
+      border: 1px solid #ccc;
+      padding: 10px 10px; // 원래보다 간결한 여백
+      text-align: left;
+      vertical-align: top;
+      background-color: white;
+      word-break: keep-all;    // ★ 단어 기준 줄바꿈
+      white-space: normal; 
+    }
+
+    th {
+      background-color: #f2f2f2;
+      font-weight: bold;
+      text-align: center;
+    }
+    // 2번째 컬럼(Warning message) 너비 고정
+    th.warning-col {
+      width: 250px;
+    }
+
+     // 커스텀 도트가 붙는 줄 정의
+    .dot-line {
+      position: relative;
+      padding-left: 1em;
+
+      &::before {
+        content: "●";
+        position: absolute;
+        left: 0;
+        top: 0;
+        color: #000; // 도트 색상
+        font-size: 0.75em;
+        line-height: 1.4;
+      }
+    }
+  }
 }