NewsDocs

프로그래머스 데브코스 프론트엔드 3차 프로젝트

TEAM : team-gpt

🔗 NewsDocs 바로가기

0. 목차

1. 프로젝트 소개
2. 팀원 소개
3. 개발 일정
4. 기술 스택
5. 컨벤션
6. 브랜치 및 디렉토리 구조
7. 주요 기능 소개
8. 상세 담당 업무
9. 시작 가이드

🚩 1. 프로젝트 소개

NewsDocs는 2030세대를 타겟으로 나의 관심사에 맞게 세 줄로 요약된 뉴스를 볼 수 있는 플랫폼으로
뉴스 세 줄 요약, 관심분야 반영 우선 나열로 더 빠르고 쉽게 세상을 읽을 수 있도록 합니다.

▲

🏃 2. 팀원 소개

김보민	남윤서	구민지	박은서	유강민
LLM을 이용한 프롬포트 모든 뉴스 페이지 뉴스 상세페이지 세부 디자인	전체 디자인 맞춤 뉴스 페이지 뉴스 컴포넌트 관심사 선택 페이지 모바일 뷰	커뮤니티 페이지 게시글 작성/수정 및 삭제 좋아요 및 댓글 알림	로그인/회원가입 Supabase 데이터 뉴스 상세페이지 뉴스 원문 크롤링 뉴스 스크랩	마이페이지 프로필 수정 뉴스 컴포넌트 랜덤 닉네임 생성

▲

📅 3. 개발 일정

프로젝트 개발 기간: 2025.05.30 - 2025.06.19 (총 21일)

▲

📚 4. 기술 스택

Environment

Config

Development

Design

Hosting

Communication

▲

🤝 5. 컨벤션

prettier

{
  "$schema": "https://json.schemastore.org/prettierrc",
  "semi": false,
  "singleQuote": true,
  "printWidth": 100,
  "tabWidth": 2,
  "bracketSpacing": true
}

Git Convention

이모지	커밋 타입	설명
🚨	Fix	버그 수정 등 문제 해결
✨	Feat	새로운 기능 추가, 사용자 입장에서 변화가 있을 경우
🎉	Init	프로젝트 초기 생성
📝	Chore	주석, 의존성 설치, README 수정 등 자잘한 작업
💄	Style	CSS 또는 스타일 관련 변경
🔨	Refactor	리팩토링, 파일명/폴더명 변경 (기능 변화 없음)
🗑️	Remove	파일 삭제
♻️	Format	코드 포맷팅 변경 (Prettier 등)

▲

6. 🗂️ 브랜치 및 디렉토리 구조

브랜치

Main Branch

main 브랜치는 최종 배포용

dev Branch

dev에 통합 dev에서 pull 받고 merge dev

브랜치명

feature/* 로 통일

디렉토리 구조

📦 src
 ┣ 📂api                # API 함수 모음 (community, auth, news, user 등)
 ┣ 📂assets             # 이미지, 아이콘, 폰트, CSS
 ┣ 📂components         # 공통/뉴스/커뮤니티/프로필 컴포넌트
 ┣ 📂composables        # 커스텀 훅 및 유틸성 로직
 ┣ 📂layout             # 페이지 레이아웃 컴포넌트
 ┣ 📂router             # Vue Router 설정
 ┣ 📂stores             # 상태 관리 (Zustand)
 ┣ 📂utils              # 설정 및 공통 함수
 ┣ 📂views              # 페이지 단위 View 컴포넌트
 ┣ 📜App.vue
 ┗ 📜main.js

▲

7. 💻 주요 기능 소개

▲

8. 📄 상세 담당 업무

1) 김보민

• ✨ FE 팀장

  • 전반적인 프로젝트 진행 담당

• 💻 퍼블리싱

  • 뉴스 상세페이지
  • 모든 뉴스페이지
  • 뉴스 요약 페이지

• 🛠 구현 기능

  • LLM을 이용한 프롬포트
  • 모든 뉴스 렌더링 및 요약
  • 뉴스 상세페이지 렌더링, 요약, 조회수

2) 남윤서

• 🎨 디자인

  • 전체 디자인

• 💻 퍼블리싱

  • 관심 뉴스 페이지
  • 관심사 선택 페이지
  • 뉴스 컴포넌트

• 🛠 구현 기능

  • 관심사 선택 및 해당 관심사별 뉴스 렌더링
  • 모바일 뷰
  • 모든 뉴스 페이지

3) 구민지

• 💻 퍼블리싱

  • 커뮤니티 페이지

• 🛠 구현 기능

  • 커뮤니티 게시글 렌더링
  • 게시글 작성 및 수정, 삭제
  • 좋아요, 댓글에 대한 알림 구현

4) 박은서

• 🎨 디자인

  • 캐릭터 디자인

• 💻 퍼블리싱

  • 로그인/회원가입

• 🛠 구현 기능

  • supabase를 활용한 데이터 테이블 구현
  • 로그인/회원가입/소셜 회원가입
  • 관심사 페이지
  • 뉴스 상세 페이지
  • 뉴스 크롤링

  4) 유강민

• 💻 퍼블리싱

  • 마이페이지
  • 프로필 수정

• 🛠 구현 기능

  • 마이페이지 렌더링
  • 프로필 수정
  • 뉴스 스크랩 기능
  • 랜덤 닉네임 생성

▲

9. 🛠️ 시작 가이드

Installation

# 1. 클론하기
$ git clone https://github.com/4-teamGPT/teamGPT.git .

# 2. 의존성 설치
$ npm install

# 3. 개발 서버 실행
$ npm run dev

▲