NEWNEWS

사용자가 시청한 뉴스에 대한 일련의 사건들을 놓치지 않도록 도와주는 서비스

서비스 배경

혹시 궁금했던 뉴스에 대한 후속 뉴스를 보았던 경험이 있나요?

평상시 뉴스에 관심없이 지내다 보면 세상이 어떻게 흘러가는지, 다른 사람이 무엇을 이야기 하는지 모를 때가 종종있습니다.

이러한 정보들을 손쉽게 파악하고자 ”NEWNEWS”를 서비스하게 되었습니다.

주요기능

시청한 뉴스 기반 후속보도 알림

사용자가 시청한 뉴스기록 저장
관련뉴스가 보도될 시 이를 사용자에게 알려줌

키워드와 관련된 일대기

사용자가 검색한 키워드에 해당하는 뉴스들을 큼지막한 주제를 기준으로 묶어 일대기 형식으로 보여줌

기대효과

시청한 뉴스에 대한 정보를 놓치지 않고 확인 가능
하나의 사건에 대해 쉽게 흐름 파악
왜곡된 정보흐름 차단

화면

로그인/회원가입

실시간 validation check
수정 필요한 입력에 대한 시각적인 표시 제공

연관뉴스

사용자가 시청한 뉴스와 연관된 뉴스를 모아서 보여줌

뉴스

뉴스를 최신순으로 보여줌
원하는 카테고리를 선택하여 추천받을 수 있음

북마크

북마크를 눌러 저장하고 북마크탭에서 저장한 뉴스 확인 가능

검색

검색한 키워드를 기반으로 키워드와 관련된 사건의 흐름을 파악할 수 있음

성향분석

봤던 뉴스의 카테고리 기반으로 성향 분석해줌

✨ Co-work tool ✨

🖥 개발환경

형상관리 : Gitlab
이슈관리 : Jira
커뮤니케이션 : Mattermost, Notion
디자인 : Figma

🛠 기타 편의 툴

Postman
Termius

Front End Component Tree

📦newnews
 ┣ 📂node_modules
 ┣ 📂public
 ┃ ┣ 📜favicon.png
 ┃ ┗ 📜vite.svg
 ┣ 📂src
 ┃ ┣ 📂assets
 ┃ ┣ 📂components
 ┃ ┃ ┣ 📂bell
 ┃ ┃ ┣ 📂login
 ┃ ┃ ┣ 📂mainpage
 ┃ ┃ ┣ 📂membership
 ┃ ┃ ┣ 📂searchpage
 ┃ ┃ ┣ 📜AlertIcon.tsx
 ┃ ┃ ┣ 📜ArticleCard.tsx
 ┃ ┃ ┣ 📜Button.tsx
 ┃ ┃ ┣ 📜Footer.tsx
 ┃ ┃ ┣ 📜Header.tsx
 ┃ ┃ ┗ 📜test.ts
 ┃ ┣ 📂hooks
 ┃ ┃ ┣ 📂bell
 ┃ ┃ ┣ 📂bookmark
 ┃ ┃ ┣ 📂main
 ┃ ┃ ┣ 📂mypage
 ┃ ┃ ┣ 📂search
 ┃ ┃ ┣ 📜MobileChk.ts
 ┃ ┃ ┗ 📜test.ts
 ┃ ┣ 📂models
 ┃ ┣ 📂pages
 ┃ ┃ ┣ 📂bell
 ┃ ┃ ┣ 📂bookmark
 ┃ ┃ ┣ 📂Login
 ┃ ┃ ┣ 📂main
 ┃ ┃ ┣ 📂membership
 ┃ ┃ ┣ 📂mypage
 ┃ ┃ ┣ 📂search
 ┃ ┃ ┣ 📜DefaultPages.tsx
 ┃ ┃ ┗ 📜test.ts
 ┃ ┣ 📂states
 ┃ ┣ 📂stores
 ┃ ┣ 📂styles
 ┃ ┃ ┣ 📂bell
 ┃ ┃ ┣ 📂bookmark
 ┃ ┃ ┣ 📂login
 ┃ ┃ ┣ 📂main
 ┃ ┃ ┣ 📂membership
 ┃ ┃ ┣ 📂mypage
 ┃ ┃ ┣ 📂search
 ┃ ┃ ┣ 📜ArticleCard.module.scss
 ┃ ┃ ┣ 📜Button.module.scss
 ┃ ┃ ┣ 📜FooterBar.scss
 ┃ ┃ ┣ 📜Header.module.scss
 ┃ ┃ ┗ 📜Modal.module.scss
 ┃ ┣ 📂utils
 ┃ ┣ 📜index.scss
 ┃ ┣ 📜main.tsx
 ┃ ┣ 📜reset.scss
 ┃ ┗ 📜vite-env.d.ts
 ┣ 📜.env.production
 ┣ 📜.eslintignore
 ┣ 📜.eslintrc.cjs
 ┣ 📜.gitignore
 ┣ 📜.prettierignore
 ┣ 📜Dockerfile
 ┣ 📜index.html
 ┣ 📜nginx.conf
 ┣ 📜package-lock.json
 ┣ 📜package.json
 ┣ 📜prettier.config.cjs
 ┣ 📜tsconfig.json
 ┣ 📜tsconfig.node.json
 ┗ 📜vite.config.ts

✨ Front End Stack ✨

IDE : Visual Studio Code 1.75.1
language
- Typescript 4.9.5
- node js 18.13.0
Framework
- react 18.2.0
- react toolkit 1.9.1
Http : Axios 1.3.4
sass : sass 1.59.3
build tool : vite 4.2.0
formatter
- eslint 8.36.0
- prettier 2.8.4
router : react-router-dom 6.9.0
state management tool
- recoil: 0.7.7
- recoil-persist: 4.2.0
Library
- react-corekit/sleep: 1.1.0 - react-query 4.27.0 - animate.css 4.1.1 - react-icons 4.8.0 - react-intersection-observer 9.4.3 - recharts: 2.5.0 - babel/preset-typescript 7.21.4

✨ Back End Stack ✨

IDE : Intellij IDEA 2020.3
language : Java openjdk 11.0.15 2022-04-19 LTS
Springboot 2.7.9
- devtools
- Spring Data JPA
- Lombok
- Spring Security
- Spring Web
Gradle 7.6.1