View My Startup

View My Startup 바로가기

목차

1. 서비스 소개
2. 팀 소개
3. 기술 및 개발 환경
4. 개발 일정
5. 역할 분담
6. 구현 기능
7. 컨벤션
8. 프로젝트 구조
9. 협업 문화
10. 버그 문제

📈 1. 서비스 소개

'View My Startup'은 개인 투자자들이 스타트업의 정보를 쉽게 확인하고, 가상 투자 및 기업 간 비교를 통해 투자 결정을 모의 체험할 수 있는 서비스입니다.

• 스타트업 정보 조회: 전체 스타트업 목록에서 기업의 투자금액, 매출액 등을 비교할 수 있습니다.
• 기업 간 비교: 최대 5개의 기업을 선택하여 상세한 비교 결과를 확인할 수 있습니다.
• 가상 투자: 가상 투자 기능을 통해 원하는 스타트업에 투자하고, 투자 내역을 관리할 수 있습니다.
• 순위 및 선택 현황 조회: 각 기업의 투자 순위 및 선택된 횟수를 조회할 수 있습니다.
• 투자 내역 수정 및 삭제: 가상 투자 내역을 쉽게 수정하거나 삭제할 수 있습니다.

시연 영상

👉 시연 영상 보러 가기

🧑🏻‍💻👩🏻‍💻 2. 팀 소개

고종민	김현우	김민서	김소희	정준호
charlieko123	Accreditus	claudia99503	S2OHEE	J-Jun5

🛠️ 3. 기술 및 개발 환경

Frontend

Backend

Database

Design

협업방식

배포

📅 4. 개발 일정 [2024-08-13 ~ 2024-09-02]

1. 기획 완료

• 요구사항 분석 및 수집
• 기술 스택 검토 및 선정
• GitBranch 전략 수립
• PR 규칙 등 팀 컨벤션 확립 [2024-08-13 ~ 2024-08-14]

2. 프론트엔드 개발

• 각 단위별 담당자 지정 [2024-08-13]
• 최소 단위 컴포넌트 개발 (Component 1) [2024-08-14 ~ 2024-08-16]
• 중간 단위 컴포넌트 개발 (Component 2) [2024-08-17 ~ 2024-08-19]
• 페이지 단위 컴포넌트 개발 [2024-08-20 ~ 2024-08-22]

3. 프론트엔드 개발 마무리, 중간 점검 및 중간 발표

• 중간발표 [2024-08-22]
• 백엔드 API 구성, 담당자 지정 및 DB 구축 [2024-08-22]
• 중간 회의
• 리액트 기반 View My Startup ( initial/react 브랜치) 작업 완료
• 배포 주소 : 리액트 기반 배포 주소
• Next.js로 마이그레이션 시작 ( refactor/nextjs-migration 브랜치) [2024-11-11]
• Next.js 프로젝트 마이그레이션 완료 ( main , refactor/nextjs-migration 브랜치) [2024-11-12]
• 배포 주소 : Next.js 기반 배포 주소

4. 백엔드 개발 및 프론트엔드 통합 과정

• 백엔드 API 구현 [2024-08-23]
• 백엔드 - 프론트엔드 통합 및 디테일 수정, 프로젝트 마무리 단계 [2024-08-25 ~ 2024-08-29]
• 단위 테스트 수행 [2024-08-30]

5. 릴리스

• 최종 검토
• 최종 발표 [2024-09-02]

TOP👆🏻

📝 5. 역할 분담

고종민

🎶 공통 컴포넌트

• SearchBar
• CompanyCard
• MessagePopUpOneBtn
• MessagePopUpTwoBtn

🎨 프론트엔드

• 전체 스타트업 목록 페이지 구현
• 스타트업 리스트 조회 API를 호출하여 페이지네이션, 검색, 정렬된 데이터를 화면에 렌더링

🛠️ 백엔드

• 기업 비교 API (POST /api/companies/compare) 구현
  • 기업 비교 요청 처리: 클라이언트로부터 여러 기업 ID와 나의 기업 ID를 받아 비교 작업을 수행
  • 유효성 검사: 기업 ID 배열이 1개 이상 6개 이하인지 확인하고, checkMyCompanyRanking 옵션이 활성화된 경우 나의 기업 ID가 제공된 기업 ID 목록에 포함되는지 검증
  • 선택 횟수 업데이트: incrementMySelection과 incrementCompareSelection 옵션에 따라 나의 기업 및 다른 기업의 선택 횟수를 증가시키도록 구현
  • 기업 정보 조회 및 정렬: 주어진 기업 ID 목록에 대한 정보를 조회하고, sortBy와 order 파라미터에 따라 기업을 정렬하여 반환 정렬 기준으로는 totalInvestment, revenue, employees, mySelectionCount, CompareSelectionCount 등이 포함
  • 순위 포함 옵션 처리: includeRank 옵션이 활성화된 경우, 정렬된 기업 목록에 각 기업의 순위를 포함하여 반환
  • 에러 처리: 유효하지 않은 입력이나 서버 오류 발생 시 적절한 오류 메시지를 반환하도록 처리

✨ 전체 스타트업 목록 페이지

데스크탑 & 태블릿 버전	모바일 버전

• View My Startup에 등록된 모든 스타트업 목록 조회가 가능합니다
  
• 기업명, 기업 소개, 카테고리, 누적 투자 금액, 매출액, 고용 인원이 조회됩니다
  
• 페이지네이션, 기업명 검색 기능, 누적 투자 금액, 매출액, 고용 인원 별 오름차순/내림차순 정렬을 제공합니다
  

TOP👆🏻

김현우

🎶 공통 컴포넌트

• LargeBtn
• MediumBtn
• ModalInvestMent
• ModalInvestMentUpdate
• ModalSelect

🎨 프론트엔드

• 기업 상세 페이지 구현
• 기업 상세 조회 API를 호출하여 해당 기업의 정보와 가상 투자 내역을 화면에 렌더링 / 투자자 댓글 추가, 수정, 삭제기능 호출
• 예외 페이지 구현

🛠️ 백엔드

• 커스텀 에러클래스 정의 및 HTTP 상태 코드와 예외 코드 매핑

  • 클래스는 status, code, message, identifier, reason, stack, origin, occuredAt 등으로 구성함.

• 가상 투자 생성 API (POST /api/investments)

  • 클라이언트로부터 companyId, investorName, investmentAmount, investmentComment, password 등의 데이터를 받아 가상 투자를 생성하는 기능 구현
  • 필수 필드 검증: 필수 필드(companyId, investorName, investmentAmount, investmentComment, password)가 누락되지 않았는지 검증
  • 회사 존재 여부 확인: companyId를 기반으로 해당 회사가 존재하는지 확인하고, 존재하지 않을 경우 404 오류 반환
  • VirtualInvestment 업데이트: 가상 투자 생성 후, 해당 기업의 virtualInvestment 값을 업데이트하는 로직 구현
  • 보안관련 비밀번호 해시화: bcrypt 라이브러리로 비밀번호 해시화하여 데이터베이스에 저장함

• 가상 투자자 상세조회 및 순위 정렬 API (GET /api/investments/:investmentId)

  • investmentId를 기반으로 특정 가상 투자자의 상세 정보를 조회
  • 회사 내 투자자 목록 조회: 투자자의 companyId를 사용해 해당 회사의 모든 투자자 목록을 조회하고, 투자 금액을 기준으로 내림차순 정렬
  • 순위 계산: 각 투자자의 순위를 계산하여, 요청된 투자자의 상세 정보와 함께 반환
  • 응답 데이터 구성: 요청된 투자자의 상세 정보, 해당 투자자의 순위, 그리고 전체 투자자 수를 JSON 형식으로 반환

✨ 기업 상세 페이지

데스크탑 & 태블릿 버전	모바일 버전

• 전체 스타트업 목록 페이지에서 각 기업을 클릭할 경우, 스타트업 정보 상세 조회가 가능합니다
• 기업명, 카테고리, 누적 투자 금액, 매출액, 고용 인원, 기업 소개, View My Startup에서 받은 투자(=가상투자) 정보 조회가 가능합니다
• View My Startup에서 받은 투자(=가상투자) 정보는 투자 이름, 투자 금액, 투자 코멘트가 조회됩니다

✅ 특정 기업에 가상 투자하기 기능

데스크탑 & 태블릿 버전	모바일 버전

✅ 투자 정보 수정하기 기능

데스크탑 & 태블릿 버전	모바일 버전

✅ 투자 정보 삭제하기 기능

데스크탑 & 태블릿 버전	모바일 버전

TOP👆🏻

김민서

🎶 공통 컴포넌트

• TextareaBar
• Dropdown
• DropdownSmallSize
• AddCompanyBtn
• CompareCompanyBtn
• CompareOtherCompanyBtn
• ResetBtn
• ModalPassword

🎨 프론트엔드

• 나의 기업 비교 페이지 구현
• 기업 비교 API를 호출하여 나의 기업과 선택한 기업의 비교 결과를 화면에 렌더링
  • 비교 결과 확인하기 섹션: 나의 기업과 선택한 기업 간의 비교 결과를 화면에 렌더링
  • 기업 순위 확인하기 섹션: 나의 기업과 전체 기업에서 나의 기업을 제외한 후, 나의 기업과 근접한 위 2개, 아래 2개 기업을 조회하여 순위와 함께 렌더링
    (나의 기업이 상위 또는 하위에 있을 경우, 나의 기업 포함 5개 기업 조회)
    • 나의 기업의 순위를 계산하고, 근접한 상위 및 하위 기업들과 함께 순위를 반환하는 기능을 구현하여, 이를 바탕으로 나의 기업비교 페이지에서 순위와 비교 결과를 화면에 렌더링

🛠️ 백엔드

• 기업 리스트 조회 API (GET /api/companies) 구현
  • 페이지네이션 기능: 클라이언트 요청에 따라 page와 limit 값을 활용해 결과를 페이지 단위로 분할하여 반환
  • 검색 기능: 기업명 또는 카테고리에 대한 부분 일치 검색을 가능하게 하며, 대소문자 구분 없이 검색 실행
  • 정렬 기능: sort_by와 order 매개변수를 사용해 원하는 필드와 정렬 순서(오름차순/내림차순)로 결과를 정렬하여 반환
  • 필터링 및 카운팅: 검색 조건에 따른 기업 목록을 필터링하고, 해당 조건에 맞는 총 기업 수를 함께 반환하여 클라이언트가 전체 결과를 쉽게 파악할 수 있도록 구현
  • 에러 처리: API 호출 중 발생할 수 있는 서버 측 오류를 처리하고, 사용자에게 적절한 오류 메시지를 반환하도록 구현

✨ 나의 기업 비교 페이지

데스크탑 & 태블릿 버전	모바일 버전

• 비교할 기업 선택
  • 나의 기업 및 비교 대상 기업(최대 5개)를 선택합니다
  • 나의 기업 선택 시, 페이지네이션, 기업명 검색 기능, 최근 선택된 기업 조회(최대 5개)를 제공합니다. 또한 선택 횟수가 누적됩니다
  • 비교 대상 기업 선택 시, 최대 5개까지 가능하며, 페이지네이션, 기업명 검색 기능, 선택한 기업 목록을 제공을 제공하고, 선택 횟수가 누적됩니다. 선택 완료 버튼을 클릭해야 선택이 완료되며 1개 이상 5개 이하일 경우에만 활성화됩니다
  • 선택 취소 및 전체 선택 초기화 기능을 제공합니다
• 기업 비교 결과 확인 (나의 기업 vs 비교 대상 선택 기업)
  • 내 기업과 비교 대상 기업들 비교 결과 조회 가능합니다. 기업명, 기업 소개, 카테고리, 누적 투자 금액, 매출액, 고용 인원이 조회됩니다
  • 누적 투자 금액, 매출액, 고용 인원 별 오름차순/내림차순 정렬을 제공합니다
• 나의 기업 순위 확인 (나의 기업 vs 전체 기업)
  • 나의 기업으로 선택한 기업의 매출액, 고용 인원 별 오름차순/내림차순 기준 순위 조회가 가능합니다. 기업명, 기업 소개, 카테고리, 누적 투자 금액, 매출액, 고용 인원이 조회됩니다
  • 나의 기업의 순위와 근접한 위 2개, 아래 2개 기업의 기업명, 기업 소개, 카테고리, 누적 투자 금액, 매출액, 고용 인원이 조회됩니다
  • 다만 나의 기업의 순위가 중간 순위가 아닐(ex. 2위) 경우 나의 기업 포함해서 5개의 기업이 조회됩니다
• 나의 기업에 가상 투자 하기
  • 비교 결과 조회 페이지에서 나의 기업에 가상 투자하기 버튼을 클릭하면 나의 기업 상세페이지로 이동을 하여 나의 기업에 가상 투자가 가능합니다

✅ 나의 기업 선택하기 기능

데스크탑 & 태블릿 버전	모바일 버전

✅ 비교 대상 기업 선택하기 기능

데스크탑 & 태블릿 버전	모바일 버전

✅ 나의 기업과 비교 대상 기업 목록

데스크탑 & 태블릿 버전	모바일 버전

✅ 기업 비교 결과 확인 (나의 기업 vs 비교 대상 선택 기업), 나의 기업 순위 확인 (나의 기업 vs 전체 기업) 결과 불러오기 기능 - 나의 기업은 자동 하이라이트 표시

데스크탑 & 태블릿 버전	모바일 버전

TOP👆🏻

김소희

🎶 공통 컴포넌트

• Pagenation
• InputBar
• CompanyInfoList

🎨 프론트엔드

• 투자 현황 페이지 구현
• 투자 현황 API를 호출하여 전체 스타트업의 투자 정보를 화면에 렌더링

🛠️ 백엔드

• 데이터베이스 모델링
• 기업 상세 조회 API (GET /api/companies/:companyId) 구현
  • 기업 상세 정보 조회: companyId를 사용하여 특정 기업의 상세 정보를 조회
  • 투자 정보 포함: 조회된 기업의 상세 정보에 해당 기업의 투자 관련 정보(investments)를 포함하여 반환
  • 존재 여부 확인: 해당 companyId로 기업이 존재하지 않을 경우, 404 상태 코드와 함께 "찾으시는 기업이 존재하지 않습니다." 메시지를 반환
  • 기업 정보 반환: 기업의 ID, 이름, 로고 URL, 설명, 카테고리, 총 투자금액, 가상 투자금액, 수익, 직원 수, 그리고 투자 내역을 포함한 JSON 응답을 반환
  • 에러 처리: API 호출 중 발생할 수 있는 서버 측 오류를 처리하고, 사용자에게 적절한 오류 메시지를 반환하도록 구현

✨ 투자 현황 페이지

데스크탑 & 태블릿 버전	모바일 버전

• 투자 현황 페이지에서 가상 투자 및 실제 투자 금액 조회가 가능합니다. 순위, 기업명, 기업 소개, 카테고리,View My Startup에서 받은 투자 금액, 실제 누적 투자 금액이 조회됩니다
• 페이지네이션, View My Startup에서 받은 투자 금액, 실제 누적 투자 금액 별 오름차순/내림차순 정렬을 제공합니다

TOP👆🏻

정준호

🎶 공통 컴포넌트

• CompanyInfoPerRow
• HeaderColumn
• PageNav

🎨 프론트엔드

• 비교 현황 페이지 구현
• 기업 비교 API를 호출하여 기업들의 비교 정보를 화면에 렌더링

🛠️ 백엔드

• 가상 투자 수정 API (PUT /api/investments/:investmentId)

  • investmentId를 통해 특정 가상 투자 항목을 수정하는 기능 구현
  • 필수 필드 검증: investorName, investmentAmount, investmentComment, password 등의 필드가 올바르게 제공되었는지 확인
  • 투자 정보 존재 여부 확인: investmentId를 기반으로 해당 투자 항목이 존재하는지 확인하고, 존재하지 않을 경우 404 오류 반환
  • 비밀번호 확인: 제공된 비밀번호와 기존 투자 항목의 비밀번호를 비교하여 일치하지 않을 경우 400 오류 반환
  • 투자 정보 업데이트: 검증이 완료되면 투자자 이름, 투자 금액, 투자 코멘트를 업데이트
  • VirtualInvestment 업데이트: 투자 정보 수정 후, 해당 기업의 virtualInvestment 값을 업데이트하는 로직 구현

• 가상 투자 삭제 API (DELETE /api/investments/:investmentId)

  • investmentId를 통해 특정 가상 투자 항목을 삭제하는 기능 구현
  • 투자 정보 존재 여부 확인: investmentId를 기반으로 해당 투자 항목이 존재하는지 확인하고, 존재하지 않을 경우 404 오류 반환
  • 비밀번호 확인: 제공된 비밀번호와 기존 투자 항목의 비밀번호를 비교하여 일치하지 않을 경우 400 오류 반환
  • 투자 정보 삭제: 비밀번호 확인이 완료되면 해당 투자 항목을 데이터베이스에서 삭제
  • VirtualInvestment 업데이트: 투자 항목 삭제 후, 해당 기업의 virtualInvestment 값을 업데이트하는 로직 구현

✨ 비교 현황 페이지

데스크탑 & 태블릿 버전	모바일 버전

• 각 기업이 선택된 횟수 현황을 조회할 수 있습니다. 기업명, 기업 소개, 카테고리, 나의 기업 선택 횟수, 비교 기업 선택 횟수가 조회됩니다
• 페이지네이션 기능, 각 기업별 나의 기업 선택 횟수, 비교 기업 선택 횟수 별 오름차순/내림차순 정렬을 제공합니다

TOP👆🏻

✨ 6. 구현 기능

• 🔗 전체 스타트업 목록 페이지 - 고종민
• 🔗 기업 상세 페이지 - 김현우
• 🔗 나의 기업 비교 페이지 - 김민서
• 🔗 비교 현황 페이지 - 정준호
• 🔗 투자 현황 페이지 - 김소희

API 명세

API 이름	엔드포인트	메서드	설명	요청 매개변수	응답 본문(성공 시)	에러 응답 예시
기업 리스트 조회 API	/api/companies	GET	전체 기업 리스트를 조회하는 API. 페이지네이션, 검색, 정렬 기능 제공	page (정수, 선택) limit (정수, 선택) search (문자열, 선택) sort_by (문자열, 선택) order (문자열, 선택)	페이지 번호, 한 페이지당 기업 수, 총 기업 수, 기업 정보 목록 포함 기업 정보: id, name, logoUrl, description, category, totalInvestment, revenue, employees	{"error": "기업 리스트를 가져오는 중 오류가 발생했습니다."}
기업 상세조회 API	/api/companies/:companyId	GET	특정 기업의 상세 정보를 가져오는 API	companyId (정수, 필수, URL 매개변수)	기업 상세 정보: id, name, logoUrl, description, category, totalInvestment, revenue, employees, investments	{"error": "찾으시는 기업이 존재하지 않습니다."}
기업 비교 API	/api/companies/compare	POST	기업들의 비교 정보를 가져오고, 선택한 기업들의 선택 횟수를 증가시킴	companyIds (배열, 필수) myCompanyId (정수, 선택) sortBy (문자열, 선택) order (문자열, 선택) includeRank (불린, 선택) checkMyCompanyRanking (불린, 선택)	비교된 기업들의 정보 배열 기업 정보: id, name, logoUrl, description, category, totalInvestment, revenue, employees, selections, rank (선택 사항)	{"error": "기업 ID는 1개이상 6개이하 제공되어야 합니다."} {"error": "내 기업 ID는 제공된 기업 ID 목록에 포함되어야 합니다."} {"error": "정렬 기준이 유효하지 않습니다."} {"error": "기업 비교 정보를 가져오는 중 오류가 발생했습니다."}
투자자 생성 API	/investments	POST	투자자 정보를 생성하는 API	요청 바디: companyId (정수) investorName (문자열) investmentAmount (정수) investmentComment (문자열) password (문자열)	투자자 정보: companyId, investorName, investmentAmount, investmentComment, password	필드 누락: {"status": 404, "code": "RESOURCE_NOT_FOUND", "message": "해당 회사 정보가 존재하지 않습니다", "identifier": "RESOURCE_ERROR", "occuredAt": "날짜"} 서버 에러: {"status": 500, "code": "DATABASE_ERROR", "message": "예상 외 에러가 발생했습니다", "identifier": "SYSTEM_ERROR", "occuredAt": "날짜"}
투자자 상세조회 API	/investments/:investmentId	GET	특정 투자자의 상세 정보를 조회하는 API	investmentId (정수, 필수, URL 매개변수)	투자자 정보: companyId, investorName, investmentAmount, investmentComment, password 총 투자 수와 순위 포함	{"status": 404, "code": "RESOURCE_NOT_FOUND", "message": "해당 투자 정보가 존재하지 않습니다", "identifier": "RESOURCE_ERROR", "occuredAt": "날짜"}
투자 정보 수정 API	/api/investments/:id	PUT	특정 투자 정보를 수정하는 API	id (정수, 필수, URL 매개변수)	수정된 투자 정보: id, companyId, investorName, investmentAmount, investmentComment, password	{"error": "해당 투자 정보가 존재하지 않습니다."}
투자 정보 삭제 API	/api/investments/:id	DELETE	특정 투자 정보를 삭제하는 API	id (정수, 필수, URL 매개변수)	(응답 본문 없음)	{"error": "해당 투자 정보가 존재하지 않습니다."}

TOP👆🏻

🖌️ 7. 컨벤션

Git 컨벤션

Emoji	Code	기능	Description
✨	:sparkles:	Feat	새 기능
♻️	:recycle:	Refactor	코드 리팩토링
📦	:wrench:	Chore	리소스 수정/삭제
🐛	:bug:	Fix	버그 수정
📝	:memo:	Docs	문서 추가/수정
🎨	:art:	Style	UI/스타일 파일 추가/수정
🎉	:tada:	Init	프로젝트 시작 / Init
✅	:white_check_mark:	Test	테스트 추가/수정
⏪	:rewind:	Rewind	변경 사항 되돌리기
🔀	:twisted_rightwards_arrows:	Merge	브랜치 합병
🗃	:card_file_box:	DB	데이터베이스 관련 수정
💡	:bulb:	Comment	주석 추가/수정
🚀	:rocket:	Deploy	배포

Code 컨벤션

• 변수/함수
  • Camel 표기법 사용 (상수는 대문자)
• 컴포넌트/파일명
  • Pascal 표기법 사용
• 이미지 파일
  • Snake 표기법 사용 - (형태)(의미)(순서)_(상태) / 예: btn_login_001_off.png
• ClassName - Kebab 표기법 사용

TOP👆🏻

🌱 8. 프로젝트 구조

🎨 프론트엔드

• public/ : 애플리케이션의 정적 자원 파일을 포함

  • assets/ : 애플리케이션에서 사용하는 다양한 자원 파일들을 포함
    • images/ : 애플리케이션에서 사용하는 이미지 파일을 포함
    • favicon/ : 웹사이트의 파비콘 이미지 파일
    • index.html : 애플리케이션의 기본 HTML 파일

• src/ : 애플리케이션의 주요 소스 코드와 관련 자원을 포함

  • API/ : 기업 데이터 조회 등 다양한 API 호출 함수들이 포함된 파일

    • api.js : 기업 데이터 조회 함수들이 포함된 파일
    • CompanyInvestDetailAPI.js : 기업 투자 상세 정보와 관련된 데이터를 페이징 및 정렬 옵션에 따라 가져오는 함수
    • DefaultPageAPI.js : 기본 페이지와 관련된 데이터를 처리하는 API 호출 함수들

  • assets/ : 애플리케이션에서 사용하는 이미지 파일들이 포함된 폴더

    • images/ : 다양한 이미지 파일들을 포함

  • components/ : 여러 페이지에서 공통으로 사용되는 컴포넌트들을 포함하는 폴더

  • context/ : 애플리케이션에서 전역 상태를 관리하는 데 사용되는 Context API를 포함하는 폴더

    • CompanyDataContext.js : 기업과 관련된 데이터를 관리하고 제공하는 Context
    • DropdownContext.js : 드롭다운 메뉴의 표시 상태를 관리하는 Context

  • hook/ : 사용자 정의 훅을 정의하여 컴포넌트에서 재사용 가능한 상태 및 로직을 제공하는 파일들

    • useGetCompanyData.js : 기업 데이터를 비동기로 가져오고 상태를 관리하는 훅
    • usePageHandler.js : 페이지 상태를 관리하고 페이지 변경을 처리하는 훅

  • pages/ : 각 서비스 페이지를 정의하는 파일들을 포함하며, 페이지 라우팅 및 페이지별 데이터 제공을 담당

    • [id]/[companyId].js : 특정 기업 상세 페이지
    • compare.js : 기업 비교 현황 페이지
    • index.js : 전체 스타트업 목록 페이지
    • investinfo.js : 투자 현황 페이지
    • mycompany.js : 나의 기업 비교 페이지

  • styles/ : 공통 색상, 폰트, 전역 스타일 등을 정의하여 애플리케이션에 일관된 스타일을 제공

    • pages/ : 각 페이지에 특화된 스타일 파일들을 포함
      • CompanyInvestDetail.module.css : 기업 투자 상세 페이지 스타일
      • CurrentStateCompare.module.css : 기업 비교 현황 페이지 스타일
      • CurrentStateInvest.module.css : 투자 현황 페이지 스타일
      • DefaultPage.module.css : 전체 스타트업 목록 페이지 스타일
      • MyCompanyCompare.module.css : 나의 기업 비교 페이지 스타일
    • App.css : 애플리케이션의 전반적인 스타일을 정의하는 CSS 파일
    • resets.css : 기본 리셋 스타일 정의

  • utils/ : 다양한 유틸리티 함수와 도구를 제공하여 코드의 재사용성을 높이고 공통된 기능을 중앙에서 관리

    • convertTo100mil.js : 주어진 금액을 1억 단위로 변환하는 함수. 소수점 자리수는 기본값으로 1을 사용
    • similarity.js : 문자열 유사도 측정 및 관련 함수들을 제공
    • sorting.js : 기본 페이지에서 사용되는 다양한 정렬 옵션을 처리

  • debug.log : 디버그 로그 파일

  • jsconfig.json : JavaScript 구성 파일

  • package-lock.json : 프로젝트 의존성 버전 고정 파일

  • package.json : 프로젝트의 의존성 및 설정을 관리하는 파일

📦vms_fe
 ┣ 📂public
 ┃ ┣ 📂assets
 ┃ ┃ ┗ 📂images
 ┃ ┃ ┃ ┣ 📜backgroundImge.jpg
 ┃ ┃ ┃ ┣ 📜ic_check.svg
 ┃ ┃ ┃ ┣ 📜ic_circle.svg
 ┃ ┃ ┃ ┣ 📜ic_delete.svg
 ┃ ┃ ┃ ┣ 📜ic_delete_circle_small.svg
 ┃ ┃ ┃ ┣ 📜ic_kebab.svg
 ┃ ┃ ┃ ┣ 📜ic_minus.svg
 ┃ ┃ ┃ ┣ 📜ic_password_eye_close.svg
 ┃ ┃ ┃ ┣ 📜ic_password_eye_open.svg
 ┃ ┃ ┃ ┣ 📜ic_plus.svg
 ┃ ┃ ┃ ┣ 📜ic_restart.svg
 ┃ ┃ ┃ ┣ 📜ic_search.svg
 ┃ ┃ ┃ ┣ 📜ic_toggle.svg
 ┃ ┃ ┃ ┣ 📜logo_desktop_tablet.svg
 ┃ ┃ ┃ ┣ 📜logo_home.js
 ┃ ┃ ┃ ┣ 📜logo_home.module.css
 ┃ ┃ ┃ ┣ 📜logo_mobile.svg
 ┃ ┃ ┃ ┣ 📜placeHolder1.jpg
 ┃ ┃ ┃ ┣ 📜placeHolder2.jpg
 ┃ ┃ ┃ ┣ 📜placeHolder3.jpg
 ┃ ┃ ┃ ┣ 📜placeHolder4.jpg
 ┃ ┃ ┃ ┣ 📜placeHolder5.jpg
 ┃ ┃ ┃ ┗ 📜placeHolder6.jpg
 ┃ ┣ 📂images
 ┃ ┃ ┣ 📜company_logo_1.png
 ┃ ┃ ┣ 📜company_logo_10.png
 ┃ ┃ ┣ 📜company_logo_11.png
 ┃ ┃ ┣ 📜company_logo_12.png
 ┃ ┃ ┣ 📜company_logo_13.png
 ┃ ┃ ┣ 📜company_logo_14.png
 ┃ ┃ ┣ 📜company_logo_15.png
 ┃ ┃ ┣ 📜company_logo_16.png
 ┃ ┃ ┣ 📜company_logo_17.png
 ┃ ┃ ┣ 📜company_logo_18.png
 ┃ ┃ ┣ 📜company_logo_19.png
 ┃ ┃ ┣ 📜company_logo_2.png
 ┃ ┃ ┣ 📜company_logo_20.png
 ┃ ┃ ┣ 📜company_logo_21.png
 ┃ ┃ ┣ 📜company_logo_22.png
 ┃ ┃ ┣ 📜company_logo_23.png
 ┃ ┃ ┣ 📜company_logo_24.png
 ┃ ┃ ┣ 📜company_logo_25.png
 ┃ ┃ ┣ 📜company_logo_26.png
 ┃ ┃ ┣ 📜company_logo_27.png
 ┃ ┃ ┣ 📜company_logo_28.png
 ┃ ┃ ┣ 📜company_logo_29.png
 ┃ ┃ ┣ 📜company_logo_3.png
 ┃ ┃ ┣ 📜company_logo_30.png
 ┃ ┃ ┣ 📜company_logo_31.png
 ┃ ┃ ┣ 📜company_logo_32.png
 ┃ ┃ ┣ 📜company_logo_33.png
 ┃ ┃ ┣ 📜company_logo_34.png
 ┃ ┃ ┣ 📜company_logo_35.png
 ┃ ┃ ┣ 📜company_logo_36.png
 ┃ ┃ ┣ 📜company_logo_37.png
 ┃ ┃ ┣ 📜company_logo_38.png
 ┃ ┃ ┣ 📜company_logo_39.png
 ┃ ┃ ┣ 📜company_logo_4.png
 ┃ ┃ ┣ 📜company_logo_40.png
 ┃ ┃ ┣ 📜company_logo_41.png
 ┃ ┃ ┣ 📜company_logo_42.png
 ┃ ┃ ┣ 📜company_logo_43.png
 ┃ ┃ ┣ 📜company_logo_5.png
 ┃ ┃ ┣ 📜company_logo_6.png
 ┃ ┃ ┣ 📜company_logo_7.png
 ┃ ┃ ┣ 📜company_logo_8.png
 ┃ ┃ ┗ 📜company_logo_9.png
 ┃ ┣ 📜favicon.png
 ┃ ┗ 📜index.html
 ┣ 📂src
 ┃ ┣ 📂API
 ┃ ┃ ┣ 📜CompanyInvestDetailAPI.js
 ┃ ┃ ┣ 📜DefaultPageAPI.js
 ┃ ┃ ┗ 📜api.js
 ┃ ┣ 📂assets
 ┃ ┃ ┗ 📂images
 ┃ ┃ ┃ ┣ 📜backgroundImge.jpg
 ┃ ┃ ┃ ┣ 📜ic_check.svg
 ┃ ┃ ┃ ┣ 📜ic_circle.svg
 ┃ ┃ ┃ ┣ 📜ic_delete.svg
 ┃ ┃ ┃ ┣ 📜ic_delete_circle_small.svg
 ┃ ┃ ┃ ┣ 📜ic_kebab.svg
 ┃ ┃ ┃ ┣ 📜ic_minus.svg
 ┃ ┃ ┃ ┣ 📜ic_password_eye_close.svg
 ┃ ┃ ┃ ┣ 📜ic_password_eye_open.svg
 ┃ ┃ ┃ ┣ 📜ic_plus.svg
 ┃ ┃ ┃ ┣ 📜ic_restart.svg
 ┃ ┃ ┃ ┣ 📜ic_search.svg
 ┃ ┃ ┃ ┣ 📜ic_toggle.svg
 ┃ ┃ ┃ ┣ 📜logo_desktop_tablet.svg
 ┃ ┃ ┃ ┣ 📜logo_home.js
 ┃ ┃ ┃ ┣ 📜logo_home.module.css
 ┃ ┃ ┃ ┣ 📜logo_mobile.svg
 ┃ ┃ ┃ ┣ 📜placeHolder1.jpg
 ┃ ┃ ┃ ┣ 📜placeHolder2.jpg
 ┃ ┃ ┃ ┣ 📜placeHolder3.jpg
 ┃ ┃ ┃ ┣ 📜placeHolder4.jpg
 ┃ ┃ ┃ ┣ 📜placeHolder5.jpg
 ┃ ┃ ┃ ┗ 📜placeHolder6.jpg
 ┃ ┣ 📂components
 ┃ ┃ ┣ 📂common
 ┃ ┃ ┃ ┣ 📜AddCompanyBtn.js
 ┃ ┃ ┃ ┣ 📜AddCompanyBtn.module.css
 ┃ ┃ ┃ ┣ 📜CompanyCard.js
 ┃ ┃ ┃ ┣ 📜CompanyCard.module.css
 ┃ ┃ ┃ ┣ 📜CompanyDataPerRow.js
 ┃ ┃ ┃ ┣ 📜CompanyDataPerRow.module.css
 ┃ ┃ ┃ ┣ 📜CompanyDataPerRowNoRank.js
 ┃ ┃ ┃ ┣ 📜CompanyDataPerRowNoRank.module.css
 ┃ ┃ ┃ ┣ 📜CompareCompanyBtn.js
 ┃ ┃ ┃ ┣ 📜CompareCompanyBtn.module.css
 ┃ ┃ ┃ ┣ 📜CompareOtherCompanyBtn.js
 ┃ ┃ ┃ ┣ 📜CompareOtherCompanyBtn.module.css
 ┃ ┃ ┃ ┣ 📜Dropdown.js
 ┃ ┃ ┃ ┣ 📜Dropdown.module.css
 ┃ ┃ ┃ ┣ 📜DropdownForEdit.js
 ┃ ┃ ┃ ┣ 📜DropdownForEdit.module.css
 ┃ ┃ ┃ ┣ 📜DropdownMiddleSize.js
 ┃ ┃ ┃ ┣ 📜DropdownMiddleSize.module.css
 ┃ ┃ ┃ ┣ 📜DropdownSmallSize.js
 ┃ ┃ ┃ ┣ 📜DropdownSmallSize.module.css
 ┃ ┃ ┃ ┣ 📜HeaderColumns.js
 ┃ ┃ ┃ ┣ 📜HeaderColumns.module.css
 ┃ ┃ ┃ ┣ 📜InputBar.js
 ┃ ┃ ┃ ┣ 📜InputBar.module.css
 ┃ ┃ ┃ ┣ 📜InvestmentComment.js
 ┃ ┃ ┃ ┣ 📜InvestmentComment.module.css
 ┃ ┃ ┃ ┣ 📜LargeBtn.js
 ┃ ┃ ┃ ┣ 📜LargeBtn.module.css
 ┃ ┃ ┃ ┣ 📜MediumBtn.js
 ┃ ┃ ┃ ┣ 📜MediumBtn.module.css
 ┃ ┃ ┃ ┣ 📜OutlineBtn.js
 ┃ ┃ ┃ ┣ 📜OutlineBtn.module.css
 ┃ ┃ ┃ ┣ 📜Pagination.js
 ┃ ┃ ┃ ┣ 📜Pagination.module.css
 ┃ ┃ ┃ ┣ 📜ResetBtn.js
 ┃ ┃ ┃ ┣ 📜ResetBtn.module.css
 ┃ ┃ ┃ ┣ 📜SearchBar.js
 ┃ ┃ ┃ ┣ 📜SearchBar.module.css
 ┃ ┃ ┃ ┣ 📜SearchBarSmall.js
 ┃ ┃ ┃ ┣ 📜SearchBarSmall.module.css
 ┃ ┃ ┃ ┣ 📜SelectBtn.js
 ┃ ┃ ┃ ┗ 📜SelectBtn.module.css
 ┃ ┃ ┣ 📜DataRowSetRender.js
 ┃ ┃ ┣ 📜DataRowSetRender.module.css
 ┃ ┃ ┣ 📜DataRowSetRenderNoRank.js
 ┃ ┃ ┣ 📜DataRowSetRenderNoRank.module.css
 ┃ ┃ ┣ 📜MessagePopUpOneBtn.js
 ┃ ┃ ┣ 📜MessagePopUpOneBtn.module.css
 ┃ ┃ ┣ 📜MessagePopUpTwoBtn.js
 ┃ ┃ ┣ 📜MessagePopUpTwoBtn.module.css
 ┃ ┃ ┣ 📜ModalInvestment.js
 ┃ ┃ ┣ 📜ModalInvestment.module.css
 ┃ ┃ ┣ 📜ModalInvestmentUpdate.js
 ┃ ┃ ┣ 📜ModalInvestmentUpdate.module.css
 ┃ ┃ ┣ 📜ModalPassword.js
 ┃ ┃ ┣ 📜ModalPassword.module.css
 ┃ ┃ ┣ 📜ModalSelectComparision.js
 ┃ ┃ ┣ 📜ModalSelectComparision.module.css
 ┃ ┃ ┣ 📜ModalSelectMyEnterprise.js
 ┃ ┃ ┣ 📜ModalSelectMyEnterprise.module.css
 ┃ ┃ ┣ 📜PageNav.js
 ┃ ┃ ┣ 📜PageNav.module.css
 ┃ ┃ ┣ 📜companyInfoList.js
 ┃ ┃ ┣ 📜companyItem.js
 ┃ ┃ ┗ 📜companyItem.module.css
 ┃ ┣ 📂context
 ┃ ┃ ┣ 📜CompanyDataContext.js
 ┃ ┃ ┣ 📜DropdownContext.js
 ┃ ┃ ┗ 📜ModalContext.js
 ┃ ┣ 📂hook
 ┃ ┃ ┣ 📜useGetCompanyData.js
 ┃ ┃ ┗ 📜usePageHandler.js
 ┃ ┣ 📂pages
 ┃ ┃ ┣ 📂[id]
 ┃ ┃ ┃ ┗ 📜[companyId].js
 ┃ ┃ ┣ 📜_app.js
 ┃ ┃ ┣ 📜_document.js
 ┃ ┃ ┣ 📜compare.js
 ┃ ┃ ┣ 📜index.js
 ┃ ┃ ┣ 📜investinfo.js
 ┃ ┃ ┗ 📜mycompany.js
 ┃ ┣ 📂styles
 ┃ ┃ ┣ 📂pages
 ┃ ┃ ┃ ┣ 📜CompanyInvestDetail.module.css
 ┃ ┃ ┃ ┣ 📜CurrentStateCompare.module.css
 ┃ ┃ ┃ ┣ 📜CurrentStateInvest.module.css
 ┃ ┃ ┃ ┣ 📜DefaultPage.module.css
 ┃ ┃ ┃ ┗ 📜MyCompanyCompare.module.css
 ┃ ┃ ┣ 📜App.css
 ┃ ┃ ┗ 📜resets.css
 ┃ ┗ 📂utils
 ┃ ┃ ┣ 📜convertTo100mil.js
 ┃ ┃ ┣ 📜similarity.js
 ┃ ┃ ┗ 📜sorting.js
 ┣ 📜.env
 ┣ 📜.gitignore
 ┣ 📜README.md
 ┣ 📜debug.log
 ┣ 📜jsconfig.json
 ┣ 📜package-lock.json
 ┗ 📜package.json

TOP👆🏻

🛠️ 백엔드

• prisma/ : Prisma 설정 파일과 데이터베이스 스키마를 포함
  • migrations/ : 데이터베이스 스키마 변경을 위한 마이그레이션 파일이 포함
  • schema.prisma : 데이터베이스의 데이터 모델을 정의하는 파일
• seeders/ : 데이터베이스를 초기화하기 위한 스크립트와 이미지를 포함
  • CompanyData.js, investmentData.js : 초기 데이터가 포함된 JavaScript 파일들
  • seed.js : 기업, 투자 데이터의 시딩 스크립트
• src/ : 애플리케이션의 주요 코드가 포함
  • errors/ : 커스텀 오류 처리를 정의
    • CommonException.js : 애플리케이션의 공통 예외를 정의
    • CustomExceptions.js : 특정 케이스에 대한 커스텀 예외를 정의
  • src/middlewares/ : 요청 처리용 미들웨어 함수가 포함
    • asyncHandler.js : 비동기 작업을 처리하는 미들웨어
    • errorHandler.js : 중앙집중식 오류 처리를 위한 미들웨어
  • src/routes/ : 기업 및 투자 API 요청을 처리하는 라우트 정의
    • companyRoutes.js : 기업 관련 API 엔드포인트 라우트
    • investmentRoutes.js : 투자 관련 API 엔드포인트 라우트
  • utils/ : 유틸리티 함수와 도우미 함수가 포함
    • initializeVirtualInvestment.js : 가상 투자 초기화 및 업데이트를 수행하는 스크립트
    • resetIdSequence.js : 데이터베이스의 ID 시퀀스를 리셋하는 스크립트
• api_test.http : API 테스트를 위한 HTTP 요청이 포함된 파일
• server.js : 서버 애플리케이션의 진입점

📦vms_be
 ┣ 📂prisma
 ┃ ┣ 📂migrations
 ┃ ┃ ┣ 📂20240819094145_init
 ┃ ┃ ┃ ┗ 📜migration.sql
 ┃ ┃ ┣ 📂20240820003106_add
 ┃ ┃ ┃ ┗ 📜migration.sql
 ┃ ┃ ┣ 📂20240826093414_add_new_selection_count
 ┃ ┃ ┃ ┗ 📜migration.sql
 ┃ ┃ ┣ 📂20240826101216_add_new_field_vms_investment
 ┃ ┃ ┃ ┗ 📜migration.sql
 ┃ ┃ ┣ 📂20240826101732_add_delete_model_selection
 ┃ ┃ ┃ ┗ 📜migration.sql
 ┃ ┃ ┗ 📂20240826124937_add_virtual_investment_type_modify
 ┃ ┃ ┃ ┗ 📜migration.sql
 ┃ ┗ 📜schema.prisma
 ┣ 📂seeders
 ┃ ┣ 📜CompanyData.js
 ┃ ┣ 📜investmentData.js
 ┃ ┗ 📜seed.js
 ┣ 📂src
 ┃ ┣ 📂errors
 ┃ ┃ ┣ 📜CommonException.js
 ┃ ┃ ┗ 📜CustomExceptions.js
 ┃ ┣ 📂middlewares
 ┃ ┃ ┣ 📜asyncHandler.js
 ┃ ┃ ┗ 📜errorHandler.js
 ┃ ┗ 📂routes
 ┃ ┃ ┣ 📜companyRoutes.js
 ┃ ┃ ┗ 📜investmentRoutes.js
 ┣ 📂utils
 ┃ ┣ 📜initializeVirtualInvestment.js
 ┃ ┗ 📜resetIdSequence.js
 ┣ 📜.env
 ┣ 📜api_test.http
 ┣ 📜package-lock.json
 ┣ 📜package.json
 ┗ 📜server.js

TOP👆🏻

💪🏻 9. 협업 문화

• 일시: 평일 오전 9시 ~ 오후 7시 협업 + 월, 수, 금 오후 5시 ~ 7시 PR 리뷰
• 내용: PR 내용 발표 및 코드 리뷰, 진행 상황 점검, 추가 이후 계획 논의

TOP👆🏻

버그 문제

1. ModalSelectComparison 검색 기능 로직 최적화: 검색 기능이 예상대로 작동하지 않는 문제가 발견되어, 사용자가 원하는 결과를 찾는 데 어려움이 있었습니다. 이에 따라 검색 로직을 전반적으로 최적화하여 성능을 크게 개선했습니다.
   이를 통해 검색 기능이 보다 정확하고 빠르게 작동하게 되었으며, 사용자 편의성이 크게 향상되었습니다.

2. 비교 페이지 콤보박스 정렬 시 로딩 문제 해결: 비교 페이지에서 콤보박스 정렬 시 발생하던 로딩 시간 지연 문제를 해결하기 위해, 로딩 인디케이터(스피너 등)를 추가하여 사용자에게 시각적 피드백을 제공했습니다.
   이를 통해 사용자는 로딩 상태를 명확하게 인지할 수 있게 되었으며, 로딩 시간이 길어질 경우에도 불편함을 느끼지 않도록 사용자 편의성이 향상되었습니다.
   이러한 개선은 사용자 만족도를 높이는 데 기여했습니다.