목차

1. 프로젝트 소개
2. 기술 스택
3. 주요 기능
4. 아키텍처
5. 팀 소개
6. 성능 최적화
7. 폴더 구조

📌 프로젝트 소개

• 소개

  • AI를 통해 취약점을 분석하고 해결책을 제공하는 보안 솔루션 시스템, FlawDetector
    

  • 서비스 바로가기 Click ! 👈

• 깃허브 레포

  • FE Github 👈

• 설치 및 실행

  https://github.com/luc7yvicky/flaw-detector.git
  cd flaw-detector
  pnpm install
  pnpm run dev

  http://localhost:3000 에서 확인 가능합니다.

📌 기술 스택

Environment

FrontEnd

Generative AI

Database

Managing & Communication

📌 주요 기능

1. 취약점 코드 검사 및 분석 기능

1.1. 로그인 사용자가 선택한 github 레포지토리의 코드 취약점 분석

1.2. 코드 취약점 분석 기능

1.2.1. 레포지토리 전체 검사

1.2.2. 특정 파일 검사 중 선택 가능

1.3. 검사 진행 상황과 결과 요약 실시간으로 확인 가능

2. 보안 취약점 DB

2.1. 크롤링한 보안 취약점 기사 제공

2.1.1. 로그인 전

2.1.2. 로그인 후

• 인기 게시글, 최신 게시글 필터 기능
• 실시간 Topic : 매 정시에 상위 10개 인기 검색어 업데이트

2.2. 게시글 조회 기능

• CNNVD 및 CERT/CC에서 크롤링한 보안 취약점 기사 제공

• 비슷한 정보글 : 최신 게시글 기반 추천 기능

• 게시글 스크랩 기능

• 게시물 공유 기능

3. Profile Information

3.1. 깃허브 연동 계정 확인 및 로그아웃

3.2. 스크랩한 게시글 조회

3.3. 고객센터 문의 메일 발송

📌 아키텍처

📌 팀 소개

이름	개발 내용
심정아	프로젝트 세팅, 깃허브 API 연동, 레포지토리 파일 리스트, 파일 선택, 코드뷰어
김다솔	파이어베이스 환경설정, 취약점 DB 웹크롤링, 공유기능
유지수	취약점 분석 검사 기능, 생성형 AI 프롬프팅, 깃허브 SNS 로그인
유의진	취약점 DB 웹크롤링 및 크롤링 자동화, 게시글 필터 및 스크랩 기능, 실시간 Topic, 비슷한 정보글, 고객센터

📌 성능 최적화

BEFORE	AFTER

📌 폴더 구조

폴더 구조 보기

── README.md
├── build.sh
├── firebase.json
├── firebaseConfig.ts
├── firestore.indexes.json
├── firestore.rules
├── functions
├── next-env.d.ts
├── next.config.mjs
├── node_modules
├── package.json
├── pnpm-lock.yaml
├── postcss.config.mjs
├── public
│   ├── fonts
│   ├── images
├── src
│   ├── app
│   │   ├── api
│   │   ├── favicon.ico
│   │   ├── globals.css
│   │   ├── layout.tsx
│   │   └── page.tsx
│   ├── auth.config.ts
│   ├── auth.ts
│   ├── components
│   ├── hooks
│   ├── lib
│   ├── middleware.ts
│   ├── stores
│   └── types
├── storage.rules
├── tailwind.config.ts
└── tsconfig.json

---

✅ 개발 기간 : 7주 - 24.08.05 ~ 24.09.20