프로그래머스 데브코스 프론트엔드 3차 최우수 프로젝트
Cosmos는 우주가 궁금한 누구나 쉽고 재미있게 우주를 접할 수 있도록 만든 커뮤니티 기반 우주 정보 플랫폼입니다.
매일 업데이트되는 이미지와 뉴스, 사용자 콘텐츠와 게임을 통해 우주를 더 가깝고 친숙하게 경험할 수 있습니다.
- Cosmos는 천문학이 낯설고 어려운 사람도 재미있게 우주를 접할 수 있는 환경을 제공합니다.
- 매일 NASA의 오늘의 우주 이미지와 최신 우주 뉴스, 천문 이벤트 정보를 자동으로 업데이트합니다.
- 사용자들은 직접 촬영한 밤하늘 사진을 공유하고, 우주 영화 리뷰나 지식 토론에 자유롭게 참여할 수 있습니다.
- 퀴즈와 퍼즐 게임을 통해 우주 지식을 게임처럼 즐기며 학습할 수 있습니다.
- 우주 영화 추천 및 리뷰, 사용자 커뮤니티, 팔로우 기능 등을 통해 지속적인 참여와 소통이 가능합니다.
- OpenAI, NASA, TMDB, 한국천문연구원(KASI) 등 다양한 공식 API를 연동하여 신뢰할 수 있는 콘텐츠를 제공합니다.
- Cosmos는 우주를 일상 속 문화 콘텐츠로 경험하게 해주는 새로운 커뮤니티 플랫폼입니다.
함께 별을 보고, 이야기를 나누고, 게임을 즐기며 우주를 더 가깝게 느껴보세요 🚀
| 구분 | 기술 |
|---|---|
| Core |   |
| Build Tool |  |
| Style |   |
| State Management |  |
| Version & Issues |  |
| Database |  |
| Design |  |
| Deployment |  |
| 송지은 | 현혜주 | 김은지 | 김태연 | 최원일 |
|---|---|---|---|---|
 |
 |
 |
 |
 |
| @jieun22222 | @hxe_zu | @Kim Eunji | @TYss00 | @WON |
👩🏻🚀 송지은
Lounge - Films / Talk 커뮤니티 구현
- TMDB API를 활용해 우주 관련 영화 목록 제공
- 무한 스크롤로 구현
- Zustand 페이지 상태 및 영화 리스트 관리
- 최신순 / 평점순 정렬 기능 제공
- 영화 상세 페이지
- Supabase 를 활용한 사용자 리뷰 및 평점 등록 기능 구현
- 사용자 리뷰 기반으로 영화 평균 평점 계산 및 시각화
- Talk는 텍스트 기반 게시판으로 게시글 CRUD 기능 구현
- 반응형 레이아웃 및 Skeleton UI를 적용하여 UX 개선
검색 기능
- 최근 검색어 최대 10개까지 저장 및 목록 UI 구성
- 검색어 전체 삭제 / 개별 삭제 기능 구현
- Lounge 에서 검색 기능 통합 적용
팔로우 기능
- 사용자 간 팔로우 / 언팔로우 기능 구현
- Supabase 기반 팔로우 관계 저장 및 조회
- 사용자 프로필 페이지에서 상태 반영 및 버튼 스타일 실시간 변경 처리
🧑🚀 현혜주
- 프로젝트 구조 설계 및 초기 세팅
- 프로젝트 배포 Netlify
- 전체 프로젝트 UI/UX 디자인 전담
- Supabase 기반 데이터 모델링 및 테이블 설계
- Zustand 상태 관리 기반 퍼즐 게임 및 랭킹 기능 구현
- 생성형 AI 기반 번역 기능 구현
- Open AI API를 이용한 번역 + 요약 시스템 구축
- Gemini API 를 이용한 단순 번역 시스템 구축
- BLEU, BERTScore 기반 성능 평가로 번역 방식 선택 , 결과는 Supabase에 캐싱해 성능과 효율을 함께 개선
- Supabase Realtime 데이터베이스를 활용한 댓글 CRUD 및 실시간 업데이트
- 마이페이지 내 사용자 프로필 수정 기능 구현 (이미지의 경우 Storage 기능을 활용하여 처리)
- three.js 기반 지구·달 3D 모델과 인터랙티브 요소(Lottie·GSAP)를 활용한 홈·Contact 페이지 구현
- 헤더 및 사이드 메뉴 구현
- 반응형 스타일링 및 Skeleton UI 를 적용하여 UX 개선
- 인터랙션 개선을 위한 마이크로 애니메이션 적용
- 이미지/폰트 크기 최적화 및 전반적인 디자인 QA 작업을 통한 시각적 완성도 향상
👩🏽🚀 김은지
Lab - Quiz
- Supabase 연동으로 난이도별 퀴즈 문제 출제 및 사용자 답안 저장
- 커스텀 훅(useQuiz)으로 상태 관리 및 퀴즈 로직 구현
- OX형과 4지선다형 문제 유형 지원
- 난이도별 가중치 점수 계산 및 누적 점수 관리
- React Router 기반 퀴즈 난이도별 플레이 흐름 구현
공통 컴포넌트
- 재사용 가능한 드롭다운, 모달 공통 컴포넌트 제작
- 상태 및 이벤트 처리 로직 캡슐화로 유지 보수성 강화
- React Portal을 통한 모달 UI 레이어 분리 및 접근성 고려
👨🏾🚀 김태연
IMAGE OF THE DAY
- NASA APOD (Astronomy Picture of the Day) API를 통해 오늘의 우주 사진과 설명 제공
- Spaceflight News API를 연동하여 실시간 우주 관련 뉴스 카드 형태로 제공
- 한국천문연구원 API에서 이번 달 우주 이벤트 일정 제공
- 오늘 날짜에 해당하는 이벤트가 있다면, Today 영역에서 바로 확인 가능
- 반응형 스타일링 및 스켈레톤, 로딩ui를 사용하여 부드럽게 표현할려고 하였다.
- Swiper를 활용해 뉴스 카드를 자연스럽게 넘길 수 있도록 구성
- API 최적화
- API에서 받아온 데이터는 로컬 스토리지에 저장하여 캐시 처리
- 하루 단위 자동 갱신으로 트래픽 절감 및 UX,로딩속도 향상
Lounge - Gallery
- Supabase 연동을 통한 CRUD 기능 구현
- 최신순 / 좋아요순 정렬 기능 제공
- 낙관적 업데이트로 좋아요 시 즉각 반영되는 인터랙션
- Zustand를 활용하여 상태 관리 및 게시글 작성/불러오기 처리
404페이지
- 404페이지구현
🛠🧑🏻🚀 최원일
회원 인증 및 계정 관리
- COSMOS 자체 회원가입 및 로그인 기능 제공
- 깃허브, 구글 소셜 로그인 연동
마이페이지
HOME 페이지는 COSMOS를 처음 접하는 유저도 흥미를 가질 수 있도록 구성된 랜딩 페이지입니다.
- 테마(다크/라이트)에 따라 지구 또는 달 3D 모델이 표시됩니다.
- react-globe.gl과 three.js를 이용하여 회전하는 지구를 구현하고, 마우스 위치에 따라 줌 기능이 조절 가능합니다.
- GSAP ScrollTrigger로 스크롤에 따라 주요 기능 3가지를 카드 형태로 시각화합니다.
- Explore, Community, Games, About 섹션 링크로 구성된 하단 메뉴를 제공합니다.
- MutationObserver와 themeChanged 이벤트를 통해 시스템 혹은 사용자 설정에 따라 실시간으로 테마(light/dark)를 감지 및 반영합니다.
오늘의 우주 이미지와 뉴스, 천문 캘린더까지 매일 새로운 우주를 탐험할 수 있어요.
- 처음 컴포넌트가 렌더링될 때, 데이터를 받아와야 해서 로딩 상태가 존재합니다.
- 첫 데이터 로딩 이후에는 캐시에 저장되어 재접속 시 로딩 속도가 훨씬 빨라집니다.
- NASA APOD API를 통해 매일 새로운 우주 이미지와 설명을 제공합니다.
- 설명 텍스트는 원문 ↔ 번역 전환이 가능합니다.
- 이때 번역은 Gemini API를 활용하여 자연스러운 번역 기능을 제공합니다.
pc
모바일
- Spaceflight News API를 통해 최신 우주 뉴스를 제공합니다.
- 뉴스 카드에는 제목과 OpenAI API 기반으로 번역된 요약문이 함께 제공됩니다.
- 클릭 시 해당 뉴스의 원문 기사로 이동하게 됩니다.
pc
모바일
- 한국천문연구원 API를 통해 이번 달의 국내 우주 이벤트를 가져옵니다.
- 오늘의 우주 이벤트와 이번 달의 우주 이벤트들이 나옵니다.
이벤트가 있을 때
이벤트가 없을 때
모바일 이벤트
우주 영화 리뷰, 밤하늘 사진 갤러리, 그리고 자유로운 우주 토론이 가능한 통합 커뮤니티 공간이에요.
우주 영화 정보를 탐색하고, 리뷰를 작성할 수 있는 콘텐츠 공간입니다.
무한 스크롤 영화 목록
- TMDB API 기반 영화 리스트
- 사용자 스크롤에 따라 자동 로딩
- 최신순 / 평점순 정렬
영화 상세 페이지
- 영화의 포스터, 제목, 감독, 개봉일 등 상세 정보를 볼 수 있습니다.
- 포스터 클릭 시 관련 트레일러가 보여집니다.
영화 상세 페이지 - 리뷰
- 평점과 리뷰를 등록할 수 있습니다.
- 사용자가 작성한 리뷰는 별도 스타일로 강조되어 표시됩니다.
- 전체 사용자 리뷰의 평점 평균이 즉시 계산되어 반영됩니다.
- 본인이 작성한 리뷰는 수정, 삭제 할 수 있으며 UI에 즉시 반영됩니다.
Skeleton UI 적용
- 영화 목록 및 상세 페이지 진입 시 스켈레톤 표시
반응형
| 영화 목록 (모바일) | 영화 목록 (태블릿) |
|---|---|
 |
 |
| 영화 상세 (모바일) | 영화 상세 (태블릿) |
 |
 |
밤하늘의 사진들을 서로 공유하는 갤러리 공간입니다.
pc
- 갤러리에 접속하면 스켈레톤 UI가 먼저 표시된 후 실제 콘텐츠가 로딩됩니다.
- 게시글을 최신순과 좋아요순으로 정렬할 수 있습니다.
- 게시글을 검색할 수 있습니다.
- 검색 기록이 자동으로 저장됩니다.
- 검색 기록 옆의 X 버튼을 클릭하면 해당 기록이 삭제됩니다.
- 게시글을 생성할 수 있습니다.
- 게시글에 Supabase Realtime을 활용해 실시간으로 댓글을 작성할 수 있습니다.
- 댓글을 수정할 수 있습니다.
- 게시글을 수정할 수 있습니다.
- 게시글을 삭제할 수 있습니다.
- 다른 작성자의 게시물에는 팔로우 및 언팔로우 버튼이 표시됩니다.
- 프로필 클릭 시 해당 사용자의 페이지로 이동합니다.
- 비로그인 사용자는 좋아요 기능과 게시글 열람이 제한됩니다.
- 또한, 글 작성을 위한 post 버튼이 비활성화되어 글 작성이 불가능합니다.
모바일
- 모바일 환경에서도 반응형 디자인이 적용되어 최적화된 화면을 제공합니다.
우주 이미지 퍼즐, 과학 퀴즈, 그리고 실시간 랭킹으로 지식과 재미를 동시에 경험하는 인터랙티브 학습 공간을 마련했어요.
NASA의 APOD 이미지 또는 TMDB 영화 포스터를 이용한 조각 퍼즐 게임으로, 주제(Category)와 난이도(Difficulty)를 선택하여 퍼즐을 진행합니다.
퍼즐 설정 (config) : zustand
- 카테고리 : space, film
- 난이도 : easy, medium, hard
게임 화면
- react-jigsaw-puzzle 라이브러리 활용
- 난이도별 조각 수 및 제한 시간 설정: easy → 3x3, hard → 5x5, 시간도 비례
게임 결과
- 점수 = (남은 시간 / 제한 시간) × 난이도 계수 × 100
- Supabase를 통해 사용자의 퍼즐 점수 DB에 저장
- 퍼즐 이미지에 대한 설명은 Open AI 를 활용하여 자동 번역 및 요약 처리
퀴즈 설정 (config) : 상태관리 (useState, useOutletContext)
- 난이도 : LV.1, LV.2, LV.3
게임 화면
- OX형 / 4지선다형 문제 유형 지원
- Supabase에서 난이도별 문제 데이터 불러와 무작위 10문제 출제
- 사용자 선택 저장 및 이전/다음 문제 이동 시 답안 유지 및 수정 가능
게임 결과
- 점수 = (맞춘 문제 개수 × 난이도 계수) × 10
- Supabase에 사용자 답안과 점수 저장 및 기존 점수와 합산하여 랭킹 반영
다른 사용자와 점수를 비교하고 경쟁하게 함으로써 게임의 몰입도를 높였습니다.
- Puzzle과 Quiz 두 가지 카테고리별 랭킹을 제공합니다.
- Top 3 랭커는 Podium 스타일로 시각적 강조하고 그 외 랭커는 리스트 형태로 순위 표시하였습니다.
- Supabase를 통해 실시간 랭킹 조회 및 저장 기능을 구현하였습니다.
- Cosmo 프로젝트 깃허브 레포지토리로 이동할수 있는 버튼을 두었습니다.
- 각 팀원들의 이름을 클릭하면 해당 팀원의 깃허브 페이지로 이동합니다.
- 잘못된 경로로 접근할 경우 사용자에게 404 Not Found 페이지를 표시합니다.
- 팀원들에게 연락할 수 있는 Contact 페이지 또는 홈으로 이동이 가능한 버튼을 두었습니다.
