[B팀] 웹 프론트엔드파트 코드리뷰용 PR

.gitignore

@@ -22,3 +22,8 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+# .env 
+.env
+.env.local
+.env.*.local

.husky/pre-commit

@@ -1,7 +1,6 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
-npx eslint . --fix
 npx prettier --write .
 npx lint-staged
 npx tsc --noEmit

.prettierrc

@@ -0,0 +1,12 @@
+{
+  "trailingComma": "all",
+  "semi": true,
+  "tabWidth": 2,
+  "jsxSingleQuote": false,
+  "useTabs": false,
+  "printWidth": 80,
+  "bracketSpacing": true,
+  "endOfLine": "auto",
+  "arrowParens": "always",
+  "plugins": ["prettier-plugin-tailwindcss"]
+}

README.md

@@ -1,3 +1,164 @@
+## **🔗 배포 링크**
+
+[[The Monitor](https://the-monitor.vercel.app/)](https://the-monitor.vercel.app/)
+——
+![서비스 소개](https://github.com/user-attachments/assets/e8d433a8-409b-4d9b-8291-ec33306d16bf)
+
+![팀 소개 1](https://github.com/user-attachments/assets/26e42796-f199-4002-923a-15d11fedeae0)
+
+![배경](https://github.com/user-attachments/assets/60a87162-fb1b-4cb2-81b8-06762ed36de9)
+![배경1](https://github.com/user-attachments/assets/8e4c9d72-2e1e-4419-a415-dd871f8b9a04)
+
+<aside>
+
+## 📝 이해를 돕기 위한 실무자의 글
+
+[[[PR/홍보대행사 인턴 업무_모니터링]](https://blog.naver.com/lifefor0/222058462827)](https://blog.naver.com/lifefor0/222058462827)
+
+[[[PR]뉴스 모니터링… 반복의 업무 그러나 실수의 연속](https://blog.naver.com/ggggggggguda/222650339397)](https://blog.naver.com/ggggggggguda/222650339397)
+
+</aside>
+
+# 🧑‍💻 타겟 인사이트
+
+![1  서비스타겟](https://github.com/user-attachments/assets/ef96237c-3de2-4882-aefd-cb674364729a)
+
+서비스 특성 상 User 와 Customer 가 다르다고 판단하였습니다.
+![서비스타겟](https://github.com/user-attachments/assets/660a4ee0-dd8e-475c-9097-4d901aee32fd)
+
+![2 리서치](https://github.com/user-attachments/assets/a2d78264-69c0-4c99-b170-c2c655ead159)
+![리서치](https://github.com/user-attachments/assets/9cc11924-8061-4da8-9637-174380a49486)
+![2-1데스크리서치](https://github.com/user-attachments/assets/02f6c121-599f-4b7d-a16d-e7164a3d6df2)
+![데스크리서치-1](https://github.com/user-attachments/assets/ee0e190c-ae64-4ee2-9342-d55c77b14a26)
+![2-2 데스크리서치](https://github.com/user-attachments/assets/84549f50-516f-4c8f-9973-7393405a6adf)
+![데스크리서치-2](https://github.com/user-attachments/assets/e1ba65c5-a7ec-45f8-a38c-55effbe7ff1c)
+
+![3  업무영상분석](https://github.com/user-attachments/assets/b1cf035c-3701-430b-98d9-674601a6e0c0)
+![업무영상분석](https://github.com/user-attachments/assets/792e13b2-e9cf-4674-874f-19aac5ee990a)
+![4 유저리서치](https://github.com/user-attachments/assets/dd68a0c0-89a5-4709-958e-65edcdc8a3d4)
+
+<aside>
+
+### 👥  인터뷰이
+
+</aside>
+
+![인터뷰이](https://github.com/user-attachments/assets/a118b2ef-9bf5-4a7d-90db-9a9451947cf6)
+
+<aside>
+💡
+
+### 인터뷰 질문
+
+</aside>
+
+- 가설 1 현재 시장에 존재하는 모니터링 서비스는 대행사의 직원들에게는 적합하지 않을 것이다
+  1. 모니터링 업무 시 보조 서비스를 사용하시나요?
+  2. ’뉴스럴‘이라는 서비스가 존재한다는 것을 알고 있으신가요?
+  3. 모니터링 업무에서 가장 시간이 많이 필요한 부분은 어느 부분인가요?
+- 가설 2. 고객사 별로 모니터링에 대한 요구사항이 다르기 때문에 대행사에서는 수기 업무를 선호할 것이다
+  1. 고객사 별로 모니터링 보고서의 양식이 다른 이유는 무엇인가요?
+  2. 보고서의 양식은 대행사와 고객사 중 어느 쪽에서 제공하나요?
+  3. 서비스를 사용한다면 회사 메일이 아닌, 서비스의 메일로 모니터링이 갈텐데 괜찮나요?
+- 가설 3. 성과 보고를 간편화하기 위한 모니터링 서비스가 있다면 사용할 의향이 있을 것이다.
+  1. 모니터링 보고서를 통해 만들어지는 2차 산출물에는 무엇이 있나요?
+  2. 모니터링 결과물을 해당 산출물로 옮기기 위해 수기 이외의 방법을 활용하고 있나요?
+- 가설 4. 서비스를 구매하는 customer 는 업무 자동화 이상의 가치를 제공해야만 구매할 것이다.
+  1. 모니터링에 보고 이외의 목적도 있나요? (저연차 직원들을 교육시키기 위한)
+  2. AI 기능을 활용해 전략제안에 모니터링 보고서에 대한 인사이트를 도출하는 기능은 비딩과정에서 설득력을 더할 수 있다고 생각하시나요?
+- 가설 외의 질문
+  1. 모니터링 외에 개선되었으면 하는 업무가 있나요?
+  2. 뉴스럴 사용성 평가
+  3. 대행사에게 필요한 뉴스분석은 무엇인가요?
+  4. 업무보조 서비스를 회사에서는 어떤 과정으로 구매 / 결정 하나요?
+
+# 🖥️ 핵심 기능
+
+![프로젝트 목표](https://github.com/user-attachments/assets/7069212b-8989-4237-b14b-beda72afbc07)
+
+![Frame 2085665689](https://github.com/user-attachments/assets/b46aef08-3bf6-4650-8a38-b25202e79aa7)
+
+![회원가입](https://github.com/user-attachments/assets/a09a43d1-2e61-4e60-9fa1-8788433c3f7a)
+
+- 보안을 위해 메일 인증 기능을 포함한 회원가입 기능
+- 대표 메일로 로그인 후, 관리자가 추후 어드민 페이지에서 각 고객사 별 담당자에게 권한을 부여
+
+![고객사 리스트](https://github.com/user-attachments/assets/fd98ff64-3ee9-4005-858c-be88ef11ac78)
+
+- 간단한 정보 입력을 통해 고객사 워크스페이스 생성
+- 자사/경쟁사/업계에 대한 모니터링 키워드와 수신인 메일을 사전에 등록
+- 추가한 고객사들의 워크스페이스를 관리하고 모아볼 수 있는 메인 화면
+
+![데일리 모니터링 기능](https://github.com/user-attachments/assets/5b35e06b-c016-47c9-8825-e7b10cbd38f4)
+
+- 키워드별로 검색된 기사 중에서 원하는 기사를 선택하여 보고서에 추가할 수 있는 페이지로,
+  **The Monitor**의 **가장 핵심적인 기능**이 포함됨
+
+![보고서 편집하기](https://github.com/user-attachments/assets/0d52e922-6a8f-4141-8e8e-9390d495df16)
+
+- 데일리 모니터링에서 스크랩한 기사의 제목, 헤드라인, URL, 기자명 등이 클릭 한 번으로 보고서 형식에 반영됨
+- 로고, 제목, 색상, 카테고리 등을 커스텀 하여 통일된 보고서 형식에서 베리에이션을 추가
+- 보고서 편집 후 고객사 담당자에게 빠르게 메일 전송 가능
+
+![보고서 관리하기](https://github.com/user-attachments/assets/1530df13-5cde-4b21-846c-bed4d30b952c)
+
+- 최대 1년 간의 모니터링 보고서를 모아보는 기능
+- 이전에 작업한 보고서도 편집 가능하며 스크랩한 내역도 함께 저장됨
+
+# 💾 개발
+
+<aside>
+
+## WEB / APP 기술 스택 선정 이유
+
+- **Vite**: 빠른 번들링과 핫 리로딩을 제공하는 최신 프론트엔드 빌드 도구입니다. 개발 속도를 높이고 효율적인 개발 환경을 제공하기 위해 선택했습니다.
+- **React**: 컴포넌트 기반 UI 라이브러리로, 재사용성과 유지보수성이 뛰어나며 복잡한 UI를 효율적으로 관리할 수 있어 선택했습니다.
+- **TypeScript**: JavaScript에 정적 타입을 추가하여 코드의 안정성을 높이고 버그를 줄일 수 있습니다. 유지보수성과 가독성을 위해 도입했습니다.
+- **Tailwind CSS**: 유틸리티 기반 CSS 프레임워크로, 빠르고 일관성 있는 스타일링이 가능하여 개발 시간을 단축시키고 커스터마이징의 유연성을 확보하기 위해 사용했습니다.
+</aside>
+
+<aside>
+
+## SERVER 기술 스택 선정 이유
+
+### 기술 스택
+
+- Java - version 21
+- Spring boot JPA
+- JWT
+  - 인증 인가 (로그인 회원가입)
+- Restful API
+- Redis
+  - 이메일 인증번호 발급
+- S3
+  - 보고서 저장
+- Docker
+  - Docker Image
+  - JIB
+- Nginx
+  - 로드밸런싱
+  - HTTP → HTTPS
+- AWS EC2 - 서버
+  - 탄력적 IP
+- RDS
+
+### 라이브러리
+
+- Apache Poi - MS 문서화
+
+### Open API
+
+- Google Custom Search API
+</aside>
+
+## ERD
+
+![themonitor-erd](https://github.com/user-attachments/assets/7e7fe6ef-4a58-44d6-8019-698ca80d7a9b)
+
+## System Architecture
+
+![themonitorsa](https://github.com/user-attachments/assets/f001efe3-eada-498a-b87f-e496aad435ea)
+
 ## Ground Rule
 
 - **코드 수정 알림**: 다른 사람의 코드를 수정할 때는 반드시 말해줍니다.
@@ -13,11 +174,9 @@ src/
   ├── main.tsx
   ├── App.tsx
   ├── TYPES/
-  ├── APP/
-  │   └── api/
+  ├── API/
   ├── CONSTANTS/
   ├── UTILS/
-  ├── LIB/
   ├── STYLES/
   ├── COMPONENTS/
   ├── HOOKS/
@@ -47,6 +206,7 @@ src/
 | refactor  | 코드 리팩토링                                                             |
 | revert    | 이전 커밋 되돌리기                                                        |
 | style     | 스타일 코드 변경                                                          |
+| asset     | svg, 이미지 등 디자인 파일 추가                                           |
 | test      | 테스트 코드, 리팩토링 테스트 코드 추가                                    |
 | type      | 타입 수정                                                                 |
 | rename    | 파일 또는 폴더 명을 수정하거나 옮기는 작업만인 경우                       |
@@ -90,8 +250,8 @@ const Welcome: React.FC<WelcomeProps> = ({ name }) => {
 - 딕셔너리, 배열 등의 복수의 데이터를 담는 자료구조에 대한 변수명 s 붙이기 `ex) heights`
 - 로딩이나 모달창 등의 보여짐 여부에 대한 boolean state의 경우 is 붙이기 `ex) isModalOpen, isLoading`
 - 데이터 접근 함수의 경우 get으로 시작하기 `ex) getUserData`
-- 컴포넌트 내부에서 동작하는 함수는 handle 붙이기 `ex) handleClick, handleModalOpen`
-- prop으로 받아서 동작하는 함수는 on 붙이기 `ex) onClick, onClose`
+- 이벤트를 감지하는 함수는 on으로 시작하며, 이 함수는 주로 이벤트 발생 시점에 호출됩니다 ex) onClick, onClose
+- 이벤트 처리 로직을 담는 함수는 handle로 시작하며, 주로 on 함수 내에서 호출됩니다 ex) handleClick, handleModalOpen
 
 | 함수명 | 동사구 ex) getUserData |
 | ------ | ---------------------- |

commitlint.config.cjs

@@ -16,6 +16,7 @@ module.exports = {
         "revert",
         "style",
         "test",
+        "asset", // Custom type
         "type", // Custom type
         "rename", // Custom type
         "remove", // Custom type