📝 팀 프로젝트 담당 파트 - 이력서 등록

---

이력서 등록 페이지 만들기

Project code - FrontEnd

Project code - BackEnd

---

1. 파트 설명

ㅤAI 비대면 면접 연습을 위해 focusjob 사이트를 방문한 사용자들은 필수적으로 이력서를 등록해야합니다.

ㅤ이유는 등록한 사용자의 이력서 정보를 바탕으로 AI 면접 질문이 맞춤 생성되기 때문입니다.

ㅤ이력서 관련 페이지는 세개의 파트로 나뉩니다.

• 이력서 등록

• 이력서 관리

• 맞춤법 검사 및 AI첨삭

ㅤㅤ페이지 내에서 사용되는 주요 기능은 아래와 같습니다.

[ 기능 ]	[ 설명 ]
UI	React (next.js) 기반 이력서 등록 및 관리 페이지 UI 설계 및 구현
백엔드	사용자 이력서 등록 및 삭제 백엔드 기능 구현 및 DB설계
맞춤법 검사	한스펠(by 부산대학교) API사용 이력서 맞춤법 검사 기능 구현
이력서 첨삭	gpt 3.5 turbo 모델 활용 이력서 AI 첨삭 기능 구현
PDF변환 및 저장	html2canvas, jspdf 라이브러리 활용 html 페이지 캡쳐, pdf 변환 및 DB 저장 기능 구현

---

2. 시연 영상

(1) 이력서 등록 및 관리

(2) 맞춤법 검사 및 AI 첨삭

---

3. 로직 및 주요 코드

전체 코드는 페이지 상단의 깃허브 링크를 참고해주세요

이력서 등록 유효성 검사

아래 코드는 사용자가 작성한 이력서 데이터를 검증하기 위한 로직입니다.

이력서 제목, 인적사항 (프로필 이미지, 성별, 상세주소), 자기소개, 지원동기, 학력 섹션에 대한 유효성을 점검합니다.

오류가 있는 경우 사용자가 해당 입력 필드로 바로 이동할 수 있도록 스크롤 동작을 설정합니다.

  // 1. 이력서 제목 유효성 검사
  if (formData.resume_title.trim() === '') {
    setShowTitleError(true); // 제목이 비어있으면 에러 표시
    if (!hasError) {
      firstErrorField = () => window.scrollTo(0, 0); // 첫 번째 에러 필드로 스크롤 이동
    }
    hasError = true;
  }

  // 2. 인적사항 섹션 유효성 검사

  // 프로필 이미지 확인
  if (!profileImage) {
    setProfileImageError(true); // 프로필 이미지가 없으면 에러 표시
    if (!hasError) {
      firstErrorField = () => sectionsRef.personalInfo.current.scrollIntoView({ behavior: 'smooth' }); // 에러 필드로 스크롤
    }
    hasError = true;
  }

  // 성별 확인
  if (!formData.gender || !['male', 'female', 'other'].includes(formData.gender)) {
    setGenderError(true); // 성별이 유효하지 않으면 에러 표시
    if (!hasError) {
      firstErrorField = () => sectionsRef.personalInfo.current.scrollIntoView({ behavior: 'smooth' });
    }
    hasError = true;
  }

  // 상세주소 확인
  if (specificAddress.trim() === '') {
    setPostcodeError(true); // 상세주소가 비어있으면 에러 표시
    if (!hasError) {
      firstErrorField = () => sectionsRef.address.current.scrollIntoView({ behavior: 'smooth' });
    }
    hasError = true;
  }

  // 3. 자기소개 유효성 검사
  if (selfIntroduction.trim() === '') {
    setShowSelfIntroError(true); // 자기소개가 비어있으면 에러 표시
    if (!hasError) {
      firstErrorField = () => sectionsRef.selfIntroduction.current.scrollIntoView({ behavior: 'smooth' });
    }
    hasError = true;
  }

  // 4. 지원동기 유효성 검사
  if (motivation.trim() === '') {
    setShowMotivationError(true); // 지원동기가 비어있으면 에러 표시
    if (!hasError) {
      firstErrorField = () => sectionsRef.motivation.current.scrollIntoView({ behavior: 'smooth' });
    }
    hasError = true;
  }

  // 5. 학력 섹션 유효성 검사
  const newEducationErrors = educationErrors.map((error) => ({ ...error }));
  educationFields.forEach((field, index) => {
    let fieldHasError = false;

    // 각 교육 항목에 대한 유효성 검사
    if (field.school_name.trim() === '') {
      if (!newEducationErrors[index]) newEducationErrors[index] = {}; // 초기화
      newEducationErrors[index].school_name = true;
      fieldHasError = true;
    }

    if (field.major.trim() === '') {
      if (!newEducationErrors[index]) newEducationErrors[index] = {}; // 초기화
      newEducationErrors[index].major = true;
      fieldHasError = true;
    }

    if (field.start_date === '') {
      if (!newEducationErrors[index]) newEducationErrors[index] = {}; // 초기화
      newEducationErrors[index].start_date = true;
      fieldHasError = true;
    }

    if (field.end_date === '') {
      if (!newEducationErrors[index]) newEducationErrors[index] = {}; // 초기화
      newEducationErrors[index].end_date = true;
      fieldHasError = true;
    }

    if (field.graduation_status === '') {
      if (!newEducationErrors[index]) newEducationErrors[index] = {}; // 초기화
      newEducationErrors[index].graduation_status = true;
      fieldHasError = true;
    }

    // 첫 번째 오류 필드로 스크롤 이동 설정
    if (fieldHasError && !hasError) {
      firstErrorField = () => sectionsRef.education.current.scrollIntoView({ behavior: 'smooth' });
      hasError = true;
    }
  });

  // 학력 오류 상태 업데이트
  setEducationErrors(newEducationErrors);

  // 첫 번째 에러 필드로 스크롤
  if (firstErrorField) {
    firstErrorField();
  }

  // 에러가 있으면 종료
  if (hasError) return;

  // 오류 없으면 면제 사항 확인 및 모달 띄우기
  checkAndSetExemptions();
  setModalContent('작성 내용은 PDF 파일로 저장됩니다
이력서를 저장하시겠습니까?');
  setIsModalOpen(true);

이력서 등록 페이지 캡쳐 및 PDF 변환

아래 코드는 이력서 등록 페이지의 내용을 캡처하고, 이를 PDF 파일로 변환하는 기능을 구현합니다.

HTML 요소를 캡처하여 이미지로 변환한 후, 이를 PDF로 삽입하고, 여러 페이지에 걸쳐 출력됩니다.

      
      
      
  // 이력서 내용을 캡처하여 PDF로 변환하는 기능을 담은 함수
  const generatePDF = async () => {
    // 페이지의 모든 버튼을 숨김 (PDF 변환 시 버튼을 제외한 내용만 포함)
    const buttons = document.querySelectorAll('button');
    buttons.forEach(button => button.style.display = 'none');
    
    // 'resume-content' ID를 가진 요소를 가져옵니다 (이력서 내용)
    const content = document.getElementById('resume-content');
    
    // html2canvas를 사용하여 이력서 내용의 스크린샷을 캡처
    const canvas = await html2canvas(content, { 
      scale: 2,  // 캡처의 해상도를 2배로 설정
      useCORS: true,  // CORS 문제를 피하기 위해 사용
      scrollX: 0,
      scrollY: 0,
    });
    
    // 캡처한 이미지를 PNG 형식으로 변환
    const imgData = canvas.toDataURL('image/png');
    
    // jsPDF를 사용하여 새로운 PDF 문서를 생성
    const pdf = new jsPDF('p', 'mm', 'a4', true);
    
    const imgWidth = 207;  // 이미지 너비 (A4 용지 기준)
    const pageHeight = 295;  // A4 용지 높이
    const imgHeight = (canvas.height * imgWidth) / canvas.width;  // 이미지 비율에 맞는 높이 계산
    
    let heightLeft = imgHeight;  // 남은 페이지 높이
    let position = 0;  // 이미지가 추가될 위치
    
    // 첫 페이지에 이미지를 추가
    pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
    heightLeft -= pageHeight;  // 남은 높이에서 한 페이지의 높이를 뺌
    
    // 페이지에 이미지가 남아있으면 추가 페이지를 생성하고 이미지를 추가
    while (heightLeft >= 0) {
      position = heightLeft - imgHeight;  // 새로운 페이지에 맞는 위치 계산
      pdf.addPage();  // 새 페이지 추가
      pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);  // 새로운 페이지에 이미지 추가
      heightLeft -= pageHeight;
    }
    
    // PDF 문서를 Blob 형식으로 반환
    const pdfBlob = pdf.output('blob');
    
    // 버튼을 다시 표시합니다 (PDF 변환이 끝난 후)
    buttons.forEach(button => button.style.display = '');
    
    return pdfBlob;  // 생성된 PDF Blob 반환
  };

이력서 저장 - 프론트엔드

아래 코드는 이력서를 저장하는 프론트엔드 로직입니다.

사용자가 이력서를 PDF 파일로 저장하고 서버로 업로드하는 과정과 그에 대한 응답 처리를 담당합니다.

  const confirmAction = async () => {
    // 모달에서 '이력서를 저장하시겠습니까?' 메시지가 보여지면 실행
    if (modalContent === '작성 내용은 PDF 파일로 저장됩니다
이력서를 저장하시겠습니까?') {
        try {
            setLoadingSave(true); // 저장 시작 시 로딩 모달 표시

            // PDF 파일 생성
            const pdfData = await generatePDF();
            const formDataToSend = new FormData();

            // 생성된 PDF 데이터를 FormData에 추가
            formDataToSend.append('file', new Blob([pdfData], { type: 'application/pdf' }), `${formData.resume_title}.pdf`); // 제목을 파일 이름으로 설정
            formDataToSend.append('title', formData.resume_title); // 이력서 제목
            formDataToSend.append('email', formData.email); // 이메일
            formDataToSend.append('desired_company', formData.desired_company); // 희망 기업

            // 이력서 파일 업로드 요청
            const uploadResponse = await axios.post('http://localhost:8080/api/resume/upload', formDataToSend, {
                headers: {
                    'Content-Type': 'multipart/form-data', // 파일 업로드 시 필요한 헤더
                },
            });

            const resumeId = uploadResponse.data.resumeId; // 업로드된 이력서 ID

            // 이력서에 대한 추가 정보(자기소개, 지원동기) 저장
            await axios.post('http://localhost:8080/api/resume/proofread/save', {
                resumeId: resumeId,
                selfIntroduction: selfIntroduction,
                motivation: motivation
            });
            
            // 키워드 업데이트 요청
            const keywordResponse = await axios.post('http://localhost:8080/api/resume/update-keywords', {
                resumeId: resumeId,
                selfIntroduction: selfIntroduction,
                motivation: motivation
            });

            // 모달 닫기 및 확인 모달 열기
            setIsModalOpen(false);
            setIsConfirmationOpen(true);
        } catch (error) {
            console.error('에러 발생:', error); // 에러 발생 시 콘솔에 로그 출력
        } finally {
            setLoadingSave(false); // 로딩 모달 숨기기
        }
    } else {
        // '저장하지 않고 돌아가기' 선택 시 이력서 목록 페이지로 이동
        setIsModalOpen(false);
        router.push('/resume/resumeList');
    }
};

이력서 저장 - 백엔드

아래 코드는 이력서 관리 로직 서비스입니다.

사용자가 업로드한 이력서를 데이터베이스에 저장하고, 이력서의 교정 내용과 키워드를 처리하는 작업을 담당합니다.

  @Service
  public class ResumeService {

      @Autowired
      private ResumeRepository resumeRepository; // ResumeRepository 주입

      @Autowired
      private ResumeProofreadRepository proofreadRepository; // ResumeProofreadRepository 주입

      @Autowired
      private ExtractKeywordsService extractKeywordsService; // ExtractKeywordsService 주입

      @Autowired
      private UserService userService; // UserService 주입

      @Transactional
      public ResumeEntity saveResume(MultipartFile file, String title, String desiredCompany, User user) throws IOException {
          ResumeEntity resumeEntity = ResumeEntity.builder()
                  .resumePdf(file.getBytes()) // 이력서 PDF 파일 저장
                  .title(title) // 이력서 제목 저장
                  .desiredCompany(desiredCompany) // 입사 희망 기업명 설정
                  .user(user) // 사용자 정보 설정
                  .createdDate(LocalDateTime.now()) // 생성 날짜 설정
                  .build();
          return resumeRepository.save(resumeEntity);  // 저장된 ResumeEntity를 반환
      }

      @Transactional
      public void saveProofread(ResumeEntity resume, String selfIntroduction, String motivation) {
          ResumeProofreadEntity proofreadEntity = ResumeProofreadEntity.builder()
                  .resume(resume) // 이력서와 연결
                  .selfIntroduction(selfIntroduction) // 자기소개 저장
                  .motivation(motivation) // 지원동기 저장
                  .build();
          proofreadRepository.save(proofreadEntity); // 교정 내용 저장
      }

      public List<ResumeEntity> findResumesByUser(User user) {
          return resumeRepository.findByUser(user); // 사용자가 업로드한 이력서 리스트 반환
      }

      public Optional<ResumeEntity> findResumeById(Long resumeId) {
          return resumeRepository.findById(resumeId); // 이력서 ID로 이력서 검색
      }

      @Transactional
      public void deleteResume(Long resumeId) {
          Optional<ResumeEntity> resumeOpt = resumeRepository.findById(resumeId); // 이력서 찾기
          if (resumeOpt.isPresent()) {
              ResumeEntity resume = resumeOpt.get();
              proofreadRepository.deleteByResume(resume); // 해당 이력서의 교정 내용 삭제
              resumeRepository.delete(resume); // 이력서 삭제
          }
      }

      public Optional<ResumeProofreadEntity> getProofreadByResume(ResumeEntity resume) {
          return proofreadRepository.findByResume(resume); // 이력서에 대한 교정 내용 조회
      }

      public Optional<ResumeProofreadEntity> getProofreadByResumeId(Long resumeId) {
          return proofreadRepository.findByResume_ResumeId(resumeId); // 이력서 ID로 교정 내용 조회
      }

      @Transactional
      public void updateKeywords(Long resumeId, String selfIntroduction, String motivation) throws IOException {
          Optional<ResumeEntity> resumeOpt = resumeRepository.findById(resumeId); // 이력서 ID로 이력서 찾기
          if (resumeOpt.isPresent()) {
              ResumeEntity resume = resumeOpt.get();
              
              String[] keywordsSelfIntroduction = extractKeywordsService.extractKeywords(selfIntroduction); // 자기소개에서 키워드 추출
              String[] keywordsMotivation = extractKeywordsService.extractKeywords(motivation); // 지원동기에서 키워드 추출
              
              resume.setKeywordsSelfIntroduction(String.join(", ", keywordsSelfIntroduction)); // 키워드 자기소개 저장
              resume.setKeywordsMotivation(String.join(", ", keywordsMotivation)); // 키워드 지원동기 저장
              resumeRepository.save(resume); // 이력서 저장
          }
      }
  }
  

아래 코드는 이력서 관리 로직 컨트롤러입니다.

사용자가 이력서를 업로드, 조회, 다운로드, 삭제하고 교정된 내용을 저장 및 조회하는 기능을 제공합니다.

또한, 이력서에 포함된 키워드를 업데이트하는 기능도 포함되어 있습니다.

  ResumeController.java

  @RestController
  @RequestMapping("/api/resume") // 이 URL 경로로 들어오는 요청을 처리하는 컨트롤러
  @CrossOrigin(origins = "http://localhost:3000") // CORS 설정: 다른 도메인에서 요청을 허용
  public class ResumeController {

      @Autowired
      private ResumeService resumeService; // 이력서 처리 서비스

      @Autowired
      private UserService userService; // 사용자 서비스
      
      @Autowired
      private ResumeProofreadRepository resumeProofreadRepository; // 이력서 첨삭 데이터 저장소

      @PostMapping("/upload") // 이력서 업로드 API
      public ResponseEntity<?> uploadResume(@RequestParam("email") String email,
                                            @RequestParam("file") MultipartFile file,
                                            @RequestParam("title") String title,
                                            @RequestParam("desired_company") String desiredCompany) { // 원하는 기업명 추가
          try {
              Optional<User> user = userService.findByEmail(email); // 이메일로 사용자 찾기
              if (user.isPresent()) { // 사용자가 존재하면
                  ResumeEntity savedResume = resumeService.saveResume(file, title, desiredCompany, user.get()); // 이력서 저장
                  return ResponseEntity.ok(Map.of("message", "이력서가 성공적으로 업로드되었습니다.", "resumeId", savedResume.getResumeId())); // 성공 응답
              } else {
                  return ResponseEntity.status(HttpStatus.NOT_FOUND).body("사용자를 찾을 수 없습니다."); // 사용자 없음
              }
          } catch (Exception e) { // 예외 처리
              return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("이력서 업로드 중 오류 발생.");
          }
      }

      @GetMapping("/user-resumes") // 사용자의 모든 이력서 조회 API
      public ResponseEntity<?> getUserResumes(@RequestParam("email") String email) {
          Optional<User> user = userService.findByEmail(email); // 이메일로 사용자 찾기
          if (user.isPresent()) { // 사용자가 존재하면
              List<ResumeEntity> resumes = resumeService.findResumesByUser(user.get()); // 사용자에 해당하는 이력서 목록 조회
              return ResponseEntity.ok(resumes); // 이력서 목록 반환
          } else {
              return ResponseEntity.status(HttpStatus.NOT_FOUND).body("사용자를 찾을 수 없습니다."); // 사용자 없음
          }
      }

      @GetMapping("/download/{resumeId}") // 이력서 다운로드 API
      public ResponseEntity<?> downloadResume(@PathVariable Long resumeId) throws UnsupportedEncodingException {
          Optional<ResumeEntity> resume = resumeService.findResumeById(resumeId); // 이력서 ID로 이력서 찾기
          if (resume.isPresent()) { // 이력서가 존재하면
              ResumeEntity resumeEntity = resume.get(); // 이력서 엔티티 가져오기
              String resumeTitle = resumeEntity.getTitle().replaceAll("[^a-zA-Z0-9가-힣]", "_") + ".pdf";  // 제목에서 특수문자를 _로 대체하고 확장자 추가

              // UTF-8로 인코딩된 파일 이름을 지원하기 위해 filename* 사용
              String encodedFilename = URLEncoder.encode(resumeTitle, StandardCharsets.UTF_8.toString()).replace("+", "%20"); // 파일명 인코딩
              
              ResponseEntity.BodyBuilder responseBuilder = ResponseEntity.ok()
                  .header(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename*=UTF-8''" + encodedFilename) // 파일 다운로드 설정
                  .header(HttpHeaders.CONTENT_TYPE, "application/pdf");  // MIME 타입 설정

              return responseBuilder.body(resumeEntity.getResumePdf()); // PDF 파일 본문 반환
          } else {
              return ResponseEntity.status(HttpStatus.NOT_FOUND).body("이력서를 찾을 수 없습니다."); // 이력서 없음
          }
      }

      @DeleteMapping("/delete/{resumeId}") // 이력서 삭제 API
      public ResponseEntity<?> deleteResume(@PathVariable Long resumeId) {
          try {
              resumeService.deleteResume(resumeId); // 이력서 삭제
              return ResponseEntity.ok("이력서가 성공적으로 삭제되었습니다."); // 성공 응답
          } catch (Exception e) { // 예외 처리
              return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("이력서 삭제 중 오류 발생."); // 오류 발생
          }
      }

      @GetMapping("/proofread/{resumeId}") // 이력서 첨삭 정보 조회 API
      public ResponseEntity<?> getProofread(@PathVariable Long resumeId) {
          Optional<ResumeProofreadEntity> proofread = resumeProofreadRepository.findByResume_ResumeId(resumeId); // 첨삭 정보 조회
          if (proofread.isPresent()) { // 첨삭 정보가 있으면
              Map<String, String> response = new HashMap<>();
              response.put("selfIntroduction", proofread.get().getSelfIntroduction()); // 자기소개 첨삭 내용
              response.put("motivation", proofread.get().getMotivation()); // 동기 첨삭 내용
              return ResponseEntity.ok(response); // 첨삭 내용 반환
          } else {
              return ResponseEntity.status(HttpStatus.NOT_FOUND).body("첨삭 정보를 찾을 수 없습니다."); // 첨삭 정보 없음
          }
      }

      @PostMapping("/proofread/save") // 첨삭 정보 저장 API
      public ResponseEntity<?> saveProofread(@RequestBody Map<String, Object> requestData) {
          Long resumeId = Long.parseLong(requestData.get("resumeId").toString()); // 이력서 ID
          String selfIntroduction = (String) requestData.get("selfIntroduction"); // 자기소개 첨삭 내용
          String motivation = (String) requestData.get("motivation"); // 동기 첨삭 내용

          Optional<ResumeEntity> resume = resumeService.findResumeById(resumeId); // 이력서 조회
          if (resume.isPresent()) { // 이력서가 존재하면
              resumeService.saveProofread(resume.get(), selfIntroduction, motivation); // 첨삭 내용 저장
              return ResponseEntity.ok("AI 첨삭 정보가 성공적으로 저장되었습니다."); // 성공 응답
          } else {
              return ResponseEntity.status(HttpStatus.NOT_FOUND).body("이력서를 찾을 수 없습니다."); // 이력서 없음
          }
      }
      
      @PostMapping("/update-keywords") // 키워드 업데이트 API
      public ResponseEntity<?> updateKeywords(@RequestBody Map<String, Object> requestData) {
          Long resumeId = Long.parseLong(requestData.get("resumeId").toString()); // 이력서 ID
          String selfIntroduction = (String) requestData.get("selfIntroduction"); // 자기소개
          String motivation = (String) requestData.get("motivation"); // 동기

          try {
              resumeService.updateKeywords(resumeId, selfIntroduction, motivation); // 키워드 업데이트
              return ResponseEntity.ok("키워드가 성공적으로 업데이트되었습니다."); // 성공 응답
          } catch (IOException e) { // 예외 처리
              return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("키워드 업데이트 중 오류 발생."); // 오류 발생
          }
      }
  }

맞춤법 검사 - 한스펠 라이브러리

아래 코드는 express 서버를 사용하여 한국어 맞춤법 검사 기능을 제공하는 API입니다.

CORS 설정을 통해 다른 도메인에서의 요청을 허용하고, POST 요청으로 받은 문장을 hanspell 모듈을 사용해 맞춤법을 검사합니다.

서버는 포트 3001에서 실행되며, 클라이언트가 맞춤법 검사를 요청하면 결과를 JSON 형식으로 반환합니다.

오류가 발생할 경우 500 상태 코드와 함께 오류 메시지가 전송됩니다.

  // hanspellsever.js

  // express 모듈
  const express = require('express');
  // hanspell 모듈
  const hanspell = require('hanspell');
  // body-parser 모듈 - 요청 본문을 파싱하는 데 사용
  const bodyParser = require('body-parser');
  // cors 모듈 - CORS 설정을 위해 사용
  const cors = require('cors');  

  // express 애플리케이션 객체를 생성
  const app = express();

  // CORS 설정
  app.use(cors({
    origin: 'http://localhost:3000', // 요청을 허용할 출처 설정
    methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'], // 허용할 HTTP 메서드 설정
    allowedHeaders: ['Content-Type', 'Authorization'], // 허용할 요청 헤더 설정
  }));

  // 모든 경로에 대해 OPTIONS 메서드를 처리하도록 설정
  app.options('*', cors());

  // 요청 본문을 JSON 형식으로 파싱하도록 설정
  app.use(bodyParser.json());

  // 맞춤법 검사 API 엔드포인트
  app.post('/check-spelling', (req, res) => {
    const sentence = req.body.sentence; // 클라이언트에서 받은 문장

    let isResponseSent = false; // 응답이 이미 전송되었는지 추적하는 변수

    // hanspell 모듈을 사용하여 맞춤법 검사
    hanspell.spellCheckByDAUM(
      sentence, // 클라이언트에서 받은 문장
      6000, // 요청 시간 초과 시간 (밀리초)
      (result) => {
        if (!isResponseSent) {
          isResponseSent = true; // 응답을 보냈음을 표시
          res.json(result); // 맞춤법 검사 결과를 JSON 형식으로 응답
        }
      },
      (err) => {
        if (!isResponseSent) {
          isResponseSent = true; // 응답을 보냈음을 표시
          res.status(500).send('Spelling check error'); // 오류 발생 시 500 상태 코드와 함께 오류 메시지 응답
        }
      }
    );
  });

  // 서버가 실행될 포트 설정
  const PORT = 3001;
  // 서버를 지정된 포트에서 실행
  app.listen(PORT, () => {
    console.log(`Server running on port ${PORT}`); // 서버 실행 확인 메시지
  });

아래 코드는 우측 사이드바에서 맞춤법 검사 결과를 보여주는 기능을 구현한 부분입니다.

맞춤법 검사 결과는 'proofreadResult' 배열을 통해 표시됩니다.

배열에 데이터가 있으면 각 항목을 리스트 형식으로 보여줍니다.

검사 결과가 없을 경우 "맞춤법 검사 결과가 없습니다."라는 메시지가 출력됩니다.

  결과화면 (우측 사이드바)

  {isProofreadSidebarOpen && (  // isProofreadSidebarOpen이 true일 경우에만 사이드바가 열리도록 조건 처리
    <div className={`$ {proofreadStyles.proofreadSidebar} $ {isProofreadSidebarOpen ? proofreadStyles.open : ''} $ {isSidebarCollapsed ? proofreadStyles.collapsed : ''}`}> 
      <div className={proofreadStyles.sidebarHeader}>  // 사이드바의 헤더 부분
        <h3 style=>맞춤법 검사 결과</h3>  // "맞춤법 검사 결과" 제목
        <div className={proofreadStyles.sidebarIcons}>  // 사이드바에 있는 아이콘 영역
          {isSidebarCollapsed ? (  // 사이드바가 접혀 있으면 아래 화살표 아이콘을 표시
            <KeyboardArrowDownIcon onClick={toggleSidebarHeight} style= /> 
          ) : (  // 사이드바가 펼쳐져 있으면 위 화살표 아이콘을 표시
            <KeyboardArrowUpIcon onClick={toggleSidebarHeight} style= /> 
          )} 
          <button className={proofreadStyles.closeButton} onClick={closeProofreadSidebar}>  // 사이드바 닫기 버튼
            <CloseIcon style= />  // 닫기 아이콘
          </button> 
        </div> 
      </div> 
      <div className={proofreadStyles.sidebarContent}>  // 사이드바의 내용 부분
        {proofreadResult.length > 0 ? (  // 검사 결과가 있을 경우
          <ul> 
            {proofreadResult.map((item, index) => (  // 맞춤법 검사 결과 리스트를 순회하여 출력
              <li key={index} className={proofreadStyles.resultItem}>  // 각 항목에 대한 리스트 아이템
                <p><strong>잘못된 표현 :</strong> {item.token}</p>  // 잘못된 표현을 표시
                <p><strong>수정 제안 :</strong> {item.suggestions.join(', ')}</p>  // 수정 제안들을 쉼표로 구분하여 표시
                <p><strong>수정 이유 :</strong> {item.info}</p>  // 수정 이유를 표시
              </li> 
            ))} 
          </ul> 
        ) : (  // 검사 결과가 없을 경우
          <p>맞춤법 검사 결과가 없습니다.</p>  // 결과가 없음을 표시
        )} 
      </div> 
    </div> 
  )}

AI첨삭 - gpt 3.5 turbo API 호출 및 프롬프트 작성

아래 코드는 클라이언트에서 전송한 텍스트를 받아 GPT에 텍스트 첨삭을 요청하고, 결과를 반환하는 RESTful API 컨트롤러입니다.

" / api / chatgpt - self " 로 POST 요청이 들어오면, 해당 텍스트를 " ProofreadSelfService " 로 전달하여 검사 결과를 받아옵니다.

  @RestController  // RESTful 웹 서비스 컨트롤러
  public class ProofreadSelfController {

      private final ProofreadSelfService proofreadService;  // ProofreadSelfService 객체를 주입받아 사용할 변수

      // 생성자 주입을 통해 ProofreadSelfService를 받아옴
      public ProofreadSelfController(ProofreadSelfService proofreadService) {
          this.proofreadService = proofreadService;  // proofreadService를 해당 클래스의 멤버 변수에 할당
      }

      // 클라이언트에서 /api/chatgpt-self로 POST 요청을 보내면 호출되는 메서드
      @PostMapping("/api/chatgpt-self")
      public String getChatGPTResponse(@RequestBody Map<String, String> requestData) {  // 요청 데이터는 Map 형태로 받아옴
          try {
              String text = requestData.get("text");  // 요청에서 'text' 값을 추출
              return proofreadService.getChatGPTResponse(text);  // proofreadService의 메서드를 호출하여 ChatGPT 응답을 받음
          } catch (IOException e) {  // IO 예외 발생 시 처리
              e.printStackTrace();  // 예외 메시지를 콘솔에 출력
              return "Error occurred while processing your request: " + e.getMessage();  // 에러 메시지 반환
          } catch (Exception e) {  // 그 외 모든 예외 처리
              e.printStackTrace();  // 예외 메시지를 콘솔에 출력
              return "An unexpected error occurred: " + e.getMessage();  // 일반적인 에러 메시지 반환
          }
      }
  }

아래 코드는 OpenAI GPT-3.5 모델을 사용하여 사용자가 작성한 자기소개서를 첨삭하는 서비스입니다.

API 키와 URL을 설정하고, OkHttp를 사용해 API 호출을 통해 자기소개서를 분석합니다.

비격식적인 문체를 격식 있는 문체로 수정하고, 명확성과 간결성을 높이는 수정 작업을 진행합니다.

수정된 텍스트와 그 이유를 사용자에게 보여주는 방식으로 동작합니다.

  @Service
  public class ProofreadSelfService {
      // API 키를 프로퍼티 파일에서 가져옵니다
      @Value("${proofread.api-key}")
      private String apiKey;

      // API URL 설정
      private static final String API_URL = "https://api.openai.com/v1/chat/completions";

      // ObjectMapper 객체 생성 (JSON 처리용)
      private final ObjectMapper objectMapper = new ObjectMapper();

      // ChatGPT API로 요청을 보내고 응답을 받는 메소드
      public String getChatGPTResponse(String text) throws IOException {
          // OkHttpClient를 설정하여 API 호출을 위한 클라이언트를 생성
          OkHttpClient client = new OkHttpClient.Builder()
              .connectTimeout(120, TimeUnit.SECONDS)
              .writeTimeout(120, TimeUnit.SECONDS)
              .readTimeout(120, TimeUnit.SECONDS)
              .build();

          // 프롬프트 생성: 사용자가 작성한 자기소개를 분석하고 첨삭을 요청하는 텍스트
          StringBuilder promptBuilder = new StringBuilder();
          promptBuilder.append("우리는 웹페이지의 이용자가 이력서의 '자기소개' 파트에 작성한 텍스트를 기반으로 자기소개 첨삭을 할거야.");
          promptBuilder.append("이용자는 아직 회사에 입사하지 않은 상태고, 회사 입사를 위한 이력서의 자기소개란에 자기소개를 적고있는 상황이야.");
          promptBuilder.append("회사 입사를 위한 공식적인 자기소개서 작성이니까 이용자는 공식적이고 격식있는 문체로 텍스트를 작성하겠지.");
          promptBuilder.append("우리는 이 텍스트를 사용자에게 받아서 분석한 뒤 AI첨삭을 해주는 역할을 하는거야.");
          promptBuilder.append("이용자에게 첨삭 결과를 보여줄 때는 반드시 존댓말을 사용하고 일정한 어투를 유지해야 해.");
          promptBuilder.append("텍스트를 읽고 자기소개 첨삭을 해주는 기준을 알려줄게. 그에 맞게 너가 메시지를 표시해주면 돼.");
          promptBuilder.append("첫번째 기준은 이용자가 작성한 텍스트가 공식적인 이력서 작성에 맞지 않는 문체인 경우야.");
          promptBuilder.append("비격식적인 표현이나 구어체를 사용하는 경우 수정을 해줘. 사용자가 자신을 표현할 때는 '나', '내가'라고 적었을경우 '저', '제가'로 수정해줘.");
          promptBuilder.append("두번째 기준은 명료성과 간결성이야. 비슷한 단어나 문장이 계속 사용되거나 문장이 완전하게 끝나지 않은 문장이 있는지 파악해주고 있다면 문장을 간결하고 명확하게 끝나게 수정해주면 돼.");
          promptBuilder.append("문장이 완전하게 끝나지 않은 문장의 예시로는 '은,는,이,가' 등으로 문장이 불완전하게 끝나는 경우가 있겠지. 또한 명사로 문장이 끝나버리는 경우에도 완전한 문장으로 수정해줘.");
          promptBuilder.append("위의 기준들에 따라 사용자의 텍스트를 수정하여 첨삭 결과 메시지를 띄울 때, '▶ 첨삭 결과는 다음과 같습니다."로 제목을 보여주고 밑에 수정 결과 메시지를 띄워줘.");
          promptBuilder.append("반드시 수정이 완료된 사용자의 텍스트 전체 문장을 한 번에 보내줘.");
          promptBuilder.append("또한 사용자의 텍스트를 수정할 때는 요약을 하거나 글의 흐름을 바꾸면 안돼.");
          promptBuilder.append("원래의 문장 구조를 유지하되, 위의 기준에 맞지 않는 부분만 수정하는 식으로 해야 해.");

          promptBuilder.append("수정된 텍스트 전체 문장을 보냈다면, 다시 두 줄 띄우고 '▶ 수정 부분은 다음과 같습니다."로 제목을 보여주고 밑에 수정 이유 메세지를 보여줘.");
          promptBuilder.append("수정 이유를 보여줄때는 - 하이푼으로 틀을 시작하고 '수정이유' : '수정 전 문장' → '수정 후 문장' 이런 형식이 하나의 틀이라고 생각하면돼. 하나의 틀에는 하나의 반드시 하나의 하이푼만 들어가야해. 따라서 반드시 '수정이유' 앞에만 하이푼이 붙어야겠지. ");
          
          promptBuilder.append("위의 틀에서 '수정 이유' 에는 너가 수정을 한 이유가 들어가야하고 '수정 전 문장'에는 수정을 거치기 전 사용자의 텍스트 원본만 들어가야해. '수정 후 문장'은 너가 수정을 완료한 문장만 들어가야해.");
          promptBuilder.append("수정이유 틀인 '수정 전 문장' 과 '수정 후 문장' 이 텍스트는 포함시키지 마. 이건 내가 너에게 알려주는 틀일뿐이야. 저 틀안에 내가 요청한 문장만 사용자에게 보여주면돼. ");
          promptBuilder.append("너가 이해하기 쉽게 수정이유 예시를 보여주자면 다음과같아. ");
          promptBuilder.append(" - 수정이유 : 문체가 비격식적인 표현을 포함하고 있어 격식 있는 문체로 수정했습니다.\r\n");
          promptBuilder.append("'대학교에서 여러 가지 프로젝트를 진행했습니더." → "'대학교에서 여러 가지 프로젝트를 진행했습니다."");
          promptBuilder.append("위의 예시를 참고해서 같은 틀과 형식으로 수정이유를 보여주면돼.");
          promptBuilder.append("<필수>");
          promptBuilder.append("위에서 언급한 내용들을 모두 반드시 지켜야 해.");
          promptBuilder.append("그리고 너는 첨삭 결과 외에는 아무것도 표시하면 안 돼.");
          promptBuilder.append("너가 수정한 부분들은 하나도 빠뜨리지 않고 반드시 모두 수정이유 메시지로 사용자에게 보여줘야해.");
          promptBuilder.append("내가 너에게 주는 지시 사항이나, 너가 나한테 대답하는 내용은 절대로 첨삭 결과에 포함되면 안 돼.");
          promptBuilder.append("결과에는 오직 첨삭 메시지와 관련된 내용만 포함시키고, 그 외의 불필요한 텍스트나 내용은 절대로 포함시키지 마.");
          promptBuilder.append("사용자에게는 오직 첨삭 결과와 수정 이유만 보여줘야 해.");
          promptBuilder.append("자 그럼 아래 텍스트를 읽고 위의 지시사항에 맞게 첨삭 결과를 출력해줘.");
          promptBuilder.append(text);
          promptBuilder.append("텍스트를 분석할때는 반드시 원본 그대로 분석을 한 뒤 첨삭을 진행해야해.");

          String prompt = promptBuilder.toString();

          // JSON 요청 본문 생성
          Map<String, Object> jsonBody = new HashMap<>();
          jsonBody.put("model", "gpt-3.5-turbo");

          Map<String, String> message = new HashMap<>();
          message.put("role", "user");
          message.put("content", prompt);

          jsonBody.put("messages", new Object[] { message });

          MediaType mediaType = MediaType.parse("application/json");
          RequestBody body = RequestBody.create(objectMapper.writeValueAsString(jsonBody), mediaType);

          // API 호출
          Request request = new Request.Builder()
              .url(API_URL)
              .addHeader("Authorization", "Bearer " + apiKey)
              .post(body)
              .build();

          Response response = client.newCall(request).execute();
          if (response.isSuccessful()) {
              // 응답 받은 JSON에서 결과 텍스트 추출
              String responseBody = response.body().string();
              JsonNode root = objectMapper.readTree(responseBody);
              JsonNode choices = root.path("choices");
              JsonNode messageNode = choices.get(0).path("message");
              return messageNode.path("content").asText();
          } else {
              throw new IOException("Failed to get response from API");
          }
      }
  }

---

4. DB 설계

ㅤ데이터베이스는 Oracle DB 를 사용하여 설계하였습니다.

ㅤ작성한 이력서 (Resume Entity + Resume Proofread Entity) 는 사용자 정보 (User Entity) 에 저장됩니다.

ㅤ저장된 이력서 정보를 바탕으로 AI 면접 (Videos Entity) 이 이루어집니다.

Resume Entity

ResumeEntity 클래스는 이력서를 저장하기 위한 JPA 엔티티입니다.

User와 다대일(@ManyToOne) 관계를 맺고 있으며, LAZY 로딩을 사용해 필요 시 데이터베이스에서 User 정보를 가져옵니다.

  @Data // Lombok 어노테이션 - Getter, Setter, equals, hashCode, toString 메서드 자동 생성
  @Entity // JPA 어노테이션 - 데이터베이스 테이블과 매핑
  @Builder // Lombok 어노테이션 - 빌더 패턴 사용해 객체 생성
  @NoArgsConstructor // Lombok 어노테이션 - 파라미터가 없는 기본 생성자 생성
  @AllArgsConstructor // Lombok 어노테이션 - 모든 필드를 파라미터로 받는 생성자 생성
  @Table(name = "resume") // JPA 어노테이션 - 매핑되는 데이터베이스 테이블 이름 지정

  public class ResumeEntity {
    @ManyToOne(fetch = FetchType.LAZY) // ResumeEntity - User가 다대일 관계 - 지연 로딩(FetchType.LAZY) 설정으로 필요할 때만 User 데이터 로드
    @JoinColumn(name = "user_id", nullable = false) // user_id 컬럼이 User 테이블의 기본 키와 조인
    private User user; // 이력서를 작성한 사용자 정보
    
      @Id // 기본 키
      @SequenceGenerator(name = "resume_seq", sequenceName = "resume_seq", allocationSize = 1, initialValue = 1) // 시퀀스 통해 기본 키 생성. allocationSize는 증가 값, initialValue는 초기 값
      @GeneratedValue(strategy = GenerationType.SEQUENCE, generator = "resume_seq") // 기본 키 값을 시퀀스 통해 자동 생성
      @Column(name = "resume_id") // 데이터베이스의 resume_id 컬럼에 매핑
      private Long resumeId; // 이력서 고유 ID

      @Lob // 대용량 바이너리 데이터 저장
      @Column(name = "resume_pdf", nullable = false)
      private byte[] resumePdf; // 이력서 PDF 파일 데이터
      
      @Column(name = "created_date", nullable = false)
      private LocalDateTime createdDate; // 이력서 생성 날짜 및 시간
      
      @Column(name = "title", nullable = false)
      private String title; // 이력서 제목
      
      @Column(name = "keywords_self_introduction", length = 2000)
      private String keywordsSelfIntroduction; // 자기소개 키워드
      

      @Column(name = "keywords_motivation", length = 2000)
      private String keywordsMotivation; // 지원 동기 키워드
      
      @Column(name = "desired_company")
      private String desiredCompany; // 지원자가 희망하는 회사명
  }

Resume Proofread Entity

ResumeProofreadEntity 클래스는 데이터베이스 테이블 resume_proofread와 매핑되는 JPA 엔티티입니다.

이력서 첨삭 내용을 저장하며 자기소개서 첨삭, 지원동기 첨삭 정보를 포함합니다.

  @Data // Lombok 어노테이션 - Getter, Setter, equals, hashCode, toString 메서드 자동 생성
  @Entity // JPA 어노테이션 - 데이터베이스 테이블과 매핑
  @Builder // Lombok 어노테이션 - 빌더 패턴 사용해 객체 생성
  @NoArgsConstructor // Lombok 어노테이션 - 파라미터가 없는 기본 생성자 생성
  @AllArgsConstructor // Lombok 어노테이션 - 모든 필드를 파라미터로 받는 생성자 생성
  @Table(name = "resume_proofread") // JPA 어노테이션 - 매핑되는 데이터베이스 테이블 이름 지정

  public class ResumeProofreadEntity {

      @Id
      @SequenceGenerator(
          name = "proofread_seq",
          sequenceName = "proofread_seq",
          allocationSize = 1,
          initialValue = 1
      )
      @GeneratedValue(strategy = GenerationType.SEQUENCE, generator = "proofread_seq")
      @Column(name = "proofread_id")
      private Long proofreadId; // 검토 고유 ID

      @ManyToOne(fetch = FetchType.LAZY) // JPA 어노테이션: `ResumeEntity`와 다대일 관계 설정, 지연 로딩(FetchType.LAZY) 사용
      @JoinColumn(name = "resume_id", nullable = false) // 데이터베이스의 `resume_id` 컬럼과 매핑. `ResumeEntity`의 기본 키와 조인
      private ResumeEntity resume; // 검토 대상 이력서

      @Lob // JPA 어노테이션: 대용량 데이터(텍스트)를 저장하기 위해 사용
      @Column(name = "self_introduction", nullable = false)
      private String selfIntroduction; // 자기소개서 검토 내용

      @Lob // 대용량 데이터(텍스트)를 저장하기 위한 어노테이션
      @Column(name = "motivation", nullable = false)
      private String motivation; // 지원 동기 검토 내용
  }

ㅤ관계도는 아래와 같습니다.