Docs(README): update frontend README.md

spec-trackr-app/README.md

@@ -1,70 +1,93 @@
-# Getting Started with Create React App
-
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
-
-## Available Scripts
-
-In the project directory, you can run:
-
-### `npm start`
-
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
-
-The page will reload when you make changes.\
-You may also see any lint errors in the console.
-
-### `npm test`
-
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
-
-### `npm run build`
-
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
-
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
-
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
-
-### `npm run eject`
-
-**Note: this is a one-way operation. Once you `eject`, you can't go back!**
-
-If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
-
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
-
-You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
-
-## Learn More
-
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
-
-To learn React, check out the [React documentation](https://reactjs.org/).
-
-### Code Splitting
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
-
-### Analyzing the Bundle Size
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
-
-### Making a Progressive Web App
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
-
-### Advanced Configuration
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
-
-### Deployment
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
-
-### `npm run build` fails to minify
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
+# SpecTrackr 프로젝트 개요 및 컴포넌트 설명
+
+---
+
+## 1. 개요
+
+**SpecTrackr**는 사용자가 직업(분야), 회사, 직무에 따른 채용 정보와 지원자 스펙 정보를 검색할 수 있는 React 기반 웹 애플리케이션이다.  
+주요 기능은 크게 두 가지 검색 방식으로 나누어진다:
+
+- **회사 기준 검색** (`com_sp.jsx`)
+- **스펙 기준 검색** (`sp_com.jsx`)
+
+---
+
+## 2. 파일 설명 및 주요 기능
+
+### 2.1 `com_sp.jsx` — 회사 기준 검색 컴포넌트
+
+#### 역할  
+사용자가 직업 분류 → 회사 → 직무 순으로 필터링하여 해당 조건에 맞는 채용 공고를 조회할 수 있도록 한다.
+
+#### 주요 기능
+- 직업 분류(예: 생산/제조, 연구개발/설계, IT/인터넷) 버튼으로 카테고리 선택  
+- 선택한 직업에 맞는 회사와 직무 리스트를 API에서 받아와 드롭다운에 표시  
+- 회사 선택 시 그 회사에 맞는 직무만 필터링, 직무 선택 시 그 직무에 맞는 회사만 필터링 (상호 필터링)  
+- 세 가지 조건(직업 분류, 회사, 직무)이 모두 선택되면 해당 조건에 맞는 채용 공고 데이터를 API에서 받아 화면에 출력  
+- 채용 공고는 이미지가 있으면 이미지로, 없으면 텍스트 상세 정보로 보여줌  
+- 상단 탭 버튼으로 ‘회사 기준 검색’과 ‘스펙 기준 검색’ 간 전환 (후자는 `sp_com.jsx` 컴포넌트)  
+
+#### 주요 상태값(State)
+| 상태명                | 설명                                   |
+|-----------------------|--------------------------------------|
+| `selectedJobCategory` | 선택된 직업 분류                      |
+| `selectedCompany`     | 선택된 회사명                        |
+| `selectedPosition`    | 선택된 직무명                        |
+| `companyOptions`      | 현재 보여지는 회사 목록               |
+| `positionOptions`     | 현재 보여지는 직무 목록               |
+| `rawOptions`          | 직업 분류 API에서 받아온 원본 데이터 (회사 + 직무 포함) |
+| `jobPostingResults`   | 현재 조건에 맞는 채용 공고 목록      |
+| `activeTab`           | 화면 내 탭 상태 (회사 기준, 스펙 기준, 채용 공고 등) |
+
+#### API 호출 흐름
+- 직업 분류 선택 시 회사명 및 직무명 데이터를 가져옴  
+- 회사 또는 직무 선택에 따라 각각 직무/회사를 필터링  
+- 직업, 회사, 직무가 모두 선택되면 채용 공고 데이터 호출 및 표시  
+
+#### 기타
+- `onSpecTabClick` 함수 props를 통해 상위 컴포넌트에 ‘스펙 기준 검색’ 탭 클릭 이벤트 전달 가능  
+- 스타일링은 `total.css` 적용  
+
+---
+
+### 2.2 `sp_com.jsx` — 스펙 기준 검색 컴포넌트
+
+#### 역할  
+사용자가 회사와 직무를 선택하고 본인의 스펙(학력, 성적, 사회경험, 어학, 수상, 자격증)을 입력하면 해당 조건에 맞는 합격자 스펙을 조회하고 추천해주는 기능을 제공한다.
+
+#### 주요 기능
+- 회사, 직무 드롭다운: 회사 선택 시 직무 필터링, 직무 선택 시 회사 필터링 (상호 필터링)  
+- 전체 대학 목록 API 호출 및 학교명 선택 지원  
+- 사용자 스펙 입력 폼 제공 (학교, 성적, 사회경험, 어학, 수상, 자격증)  
+- 입력한 스펙과 선택한 회사/직무 조건에 맞는 합격자 데이터를 API에서 받아 추천 및 순서대로 조회 가능  
+- 추천 합격자 리스트는 캐러셀 형식으로 표시, 사용자 클릭으로 다음/이전 지원자 보기 가능  
+- 상단 탭 버튼으로 ‘스펙 기준 검색’과 ‘회사 기준 검색’ 간 전환 (후자는 `com_sp.jsx` 컴포넌트)  
+
+#### 주요 상태값(State)
+| 상태명                  | 설명                                |
+|-------------------------|-----------------------------------|
+| `selectedCompany`       | 선택된 회사                       |
+| `selectedPosition`      | 선택된 직무                       |
+| `companyOptions`        | 드롭다운 표시용 회사 리스트         |
+| `positionOptions`       | 드롭다운 표시용 직무 리스트         |
+| `rawCompanyOptions`     | API에서 받아온 전체 회사 리스트     |
+| `rawPositionOptions`    | API에서 받아온 전체 직무 리스트     |
+| `allSchools`            | 전체 대학 리스트                  |
+| `mySpec`                | 사용자가 입력한 스펙 정보 객체 (학교, 성적, 어학 등) |
+| `applicants`            | API에서 받아온 합격자 스펙 리스트    |
+| `recommendedApplicants` | 필터링된 추천 합격자 리스트          |
+| `carouselIndex`         | 캐러셀에서 현재 보여주는 합격자 인덱스 |
+| `activeTab`             | 현재 활성 탭 상태 (‘스펙 기준 검색’ 등) |
+
+#### API 호출 흐름
+- 초기 렌더링 시 전체 대학 목록, 회사 및 직무 전체 리스트 불러오기  
+- 회사 선택 시 해당 회사의 직무 목록, 직무 선택 시 해당 직무의 회사 목록 필터링  
+- 회사와 직무가 선택되고 스펙 입력 완료 시 해당 조건에 맞는 합격자 목록 호출 및 추천 제공  
+
+#### 기타
+- `onCompanyTabClick` 함수 props로 ‘회사 기준 검색’ 탭 클릭 이벤트 상위 전달 가능  
+- 스타일링은 `total.css` 적용  
+
+---
+
+*위 설명은 SpecTrackr 프로젝트의 두 주요 컴포넌트 구조 및 흐름을 이해하는 데 도움을 주기 위한 문서이다.*