Skip to content

Latest commit

 

History

History
484 lines (376 loc) · 13 KB

README.md

File metadata and controls

484 lines (376 loc) · 13 KB

📷👨🏻‍🤝‍👨🏻 S.O.M.E.(Share Our Memory Everywhere) 👨🏻‍🤝‍👨🏻📷

메인페이지


🎬 소개 영상


📅 프로젝트 진행 기간

  • 2023/4/10 ~ 2023/5/19 (6주)
  • SSAFY 8기 자율 프로젝트

✔️ SOME - 배경

  • 친구들과 사진을 공유해 본 경험 있으신가요?
  • 많은 사진을 공유하려면 기존의 서비스들은 아쉬웠던 점이 많았습니다.
  • 다른 사람들은 같은 장소에서 어떻게 사진을 찍었는지 궁금했습니다.
  • 그래서, 사진 공유 서비스 SOME을 개발했습니다!

✔️ SOME - 개요

  • 공유 앨범에 친구를 쉽게 초대하고, 편하게 사진을 업로드 하세요.
  • 공유한 사진을 AI를 활용해 편하게 분류하여 제공합니다.
  • 잘 찍은 사진을 그 장소에 등록해서 자랑하세요.

📌 주요 기능

  • 남사친
    • 목적에 맞는 공유 앨범 생성
    • 카카오톡 연동 친구 초대
    • AI 자동 사진 분류
    • SNS 업로드 동의 요청
  • 여사친
    • 내 위치에 사진 남기기
    • 내 주변에 등록된 사진 보기
    • 마음에 드는 사진에 좋아요 남기기

🎨 주요 기술

  • AI

    • YOLO
  • FrontEnd

    • Next.js
    • TypeScript
    • SCSS
    • Tailwind
    • React-Query
    • Redux Toolkit
    • PWA
    • Kakao API (Map, Auth, Local)
  • BackEnd

    • Java 11
    • Spring Boot
    • Spring Data JPA
    • QueryDSL
    • MySQL
    • mongoDB
    • Redis
    • RabbitMQ
    • fastAPI
    • SSE
  • Infrastructure

    • Docker
    • Kubernetes
    • AWS CLI
    • Amazon S3
    • Elastic Container Registry
    • Jenkins
    • Gitlab
    • SonarQube

🎨 버전 정보

Ver 1.0 (~ 4/27)

  • Client

    • 남사친, 사진 상세, 친구 초대, 앨범 상세 페이지, 마이페이지 구현
    • PWA 설정
    • 로그인 기능 구현
  • Server

    • AI 사진 분류, mongoDB 연동, 로그인 서버 개발

    1.1

    • Client
      • 목업 서버(Json Server)를 활용한 API 테스트
    • Server
      • OAUTH -> kakao 소셜 로그인
      • AI 카테고리 커스텀
      • mongoDB queryDSL 연동

Ver 2.0 (~ 5/4)

  • Client

    • 사진 업로드 기능, 사진 집중모드 구현
    • 리덕스 세팅
    • 서비스워커 Notification 설정
    • React-Query를 활용한 API 연결
  • Server

    • 남사친 API 개발
    • 사진파일 메타데이터 추출
    • S3 연동
    • SSE 알림 연동

    2.1

    • Server
      • 파일 압축 업로드
      • S3 폴더 관리

Ver 3.0 (~ 5/19)

  • Client
    • 여사친 페이지 구현
    • 사진 줌인, 줌아웃, 좋아요, 대표이미지 설정 기능 구현
    • 다운로드 및 업로드 기능 구현
  • Server
    • 여사친 API 개발
    • RabbitMQ 구현
    • 알림 서버 개발
    • Redis 연동

3.1

  • Client
    • 사진 옆으로 넘기기 기능 구현
    • 여사친 지도 및 기능 구현
    • 사진 공유 기능 구현
  • Server
    • 카카오 친구목록 연동
    • 알림 기능 고도화

3.2

  • Client
    • CSS 디자인 수정
    • Next/image 컴포넌트를 활용한 이미지 최적화

📂 시스템 아키텍처

SOME_아키텍쳐

📂 프로젝트 파일 구조

FrontEnd

└frontend
    ├─components
    │   ├─album
    │   ├─album-starter
    │   ├─notification
    │   ├─photo-detail
    │   └─profile
    ├─features
    ├─lib
    ├─nginx
    ├─pages
    │   ├─album
    │   │    └─[album_id]
    │   │       └─[photo_id]
    │   │           └──[page_idx]
    │   │                └─[index]
    │   ├─api
    │   ├─boy-home
    │   ├─desktop
    │   ├─girl-home
    │   │    └─[list]
    │   │       └─[photo_id]
    │   ├─invite
    │   ├─login
    │   └─oauth
    ├─public
    │   ├─favicons
    │   ├─icons
    │   ├─images
    │   └─splash_screens
    ├─store
    ├─styles
    └─types

BackEnd 1: 남사친 서버

some-friendboy
    └─src
        ├─main
        │  ├─generated
        │  ├─java
        │  │  └─com
        │  │      └─ssafy
        │  │          └─somefriendboy
        │  │              │  SomeFriendboyApplication.java
        │  │              │
        │  │              ├─config
        │  │              │      AmazonS3Config.java
        │  │              │      MongoDBConfig.java
        │  │              │      RabbitConfig.java
        │  │              │      RedisConfig.java
        │  │              │      WebMvcConfig.java
        │  │              │
        │  │              ├─controller
        │  │              │      AlbumController.java
        │  │              │      AlbumPhotoController.java
        │  │              │      NotiController.java
        │  │              │      UserController.java
        │  │              │
        │  │              ├─dto
        │  │              │
        │  │              ├─entity
        │  │              │  │  Album.java
        │  │              │  │  AlbumFav.java
        │  │              │  │  AlbumMember.java
        │  │              │  │  AlbumPhoto.java
        │  │              │  │  AlbumPhotoSNS.java
        │  │              │  │  FeedBack.java
        │  │              │  │  Notification.java
        │  │              │  │  PhotoCategory.java
        │  │              │  │  User.java
        │  │              │  │  UserPhotoLike.java
        │  │              │  │
        │  │              │  ├─id
        │  │              │  │
        │  │              │  └─status
        │  │              │
        │  │              ├─repository
        │  │              │  ├─album
        │  │              │  │
        │  │              │  ├─albumfav
        │  │              │  │
        │  │              │  ├─albummember
        │  │              │  │
        │  │              │  ├─albumphoto
        │  │              │  │
        │  │              │  ├─albumphotosns
        │  │              │  │
        │  │              │  ├─noti
        │  │              │  │
        │  │              │  ├─user
        │  │              │  │
        │  │              │  └─userphotolike
        │  │              │
        │  │              ├─service
        │  │              │      AlbumPhotoService.java
        │  │              │      AlbumService.java
        │  │              │      AmazonS3Service.java
        │  │              │      NotiService.java
        │  │              │      UserService.java
        │  │              │
        │  │              └─util
        │  │
        │  └─resources
        │          application.yml

BackEnd 2: 여사친

some-friendgirl
    └─src
        ├─main
        │  ├─generated
        │  ├─java
        │  │  └─com
        │  │      └─ssafy
        │  │          └─somefriendgirl
        │  │              │  SomeFriendgirlApplication.java
        │  │              │
        │  │              ├─config
        │  │              │      AmazonS3Config.java
        │  │              │      MongoDBConfig.java
        │  │              │      RedisConfig.java
        │  │              │      WebMvcConfig.java
        │  │              │
        │  │              ├─controller
        │  │              │      AlbumController.java
        │  │              │      PhotoController.java
        │  │              │
        │  │              ├─dto
        │  │              │
        │  │              ├─entity
        │  │              │      AlbumPhoto.java
        │  │              │      AutoIncrementSequence.java
        │  │              │      PhotoLikeStatus.java
        │  │              │      PhotoStatus.java
        │  │              │      User.java
        │  │              │
        │  │              ├─redis
        │  │              │      RedisScheduler.java
        │  │              │
        │  │              ├─repository
        │  │              │  ├─album
        │  │              │  │
        │  │              │  ├─photo
        │  │              │  │
        │  │              │  └─user
        │  │              │
        │  │              ├─service
        │  │              │      AlbumService.java
        │  │              │      AmazonS3Service.java
        │  │              │      PhotoService.java
        │  │              │
        │  │              └─util
        │  │                      GetResponse.java
        │  │                      HttpUtil.java
        │  │                      MongoQueryUtil.java
        │  │                      ResponseUtil.java
        │  │
        │  └─resources
        │          application.yml

AI

ai
 └─ fast.py

🤝 협업 툴

  • Git
  • Notion
  • JIRA
  • MatterMost
  • Webex
  • Discord
  • Kakaotalk

📋 프로젝트 산출물


✨ 서비스 화면

🙋‍♂️ 남사친 (남는 건 사진이야, 친구야!)

1️⃣ 홈 화면

  • 즐겨찾는 앨범, 전체 앨범

    홈 화면

2️⃣ 최근 업로드

  • 최근 앨범에 업로드된 사진 확인

    최근 업로드

3️⃣ 앨범 생성

  • 목적에 맞는 새로운 앨범 생성

  • 카카오톡 연동을 통한 친구 초대

    앨범 생성

4️⃣ 카톡으로 친구 초대하기

  • SOME에 가입하지 않은 친구에게 카카오톡 보내기

    카톡으로 친구 초대하기

5️⃣ 앨범 참여하기

  • 앨범에 초대되면 푸시 알림 수신

  • 알림 페이지를 통해 요청 수락

    앨범 참여하기

6️⃣ 앨범 상세보기

  • 유저 및 카테고리 별 사진 분류

    사진 분류

  • 여러 사진 다운로드

    사진 다운1

  • 사진 업로드 (사진 선택)

    사진 업로드1

  • 사진 업로드 (사진 찍기)

    사진 업로드2

7️⃣ 사진 상세보기

  • 줌인, 줌아웃 기능

  • 좋아요, 대표 이미지 설정 기능

    사진 상세

  • 다운로드 및 삭제 기능

    사진 다운 삭제

8️⃣ SNS 요청

  • 알림을 통해 SNS 공유 요청 수락

  • SNS 요청 현황 확인

    SNS

🙋‍♀️ 여사친 (여기에 사진 남겼어, 친구야!)

1️⃣ 사진 업로드

  • 현재 위치에 사진 업로드

    여사친1

2️⃣ 현재 위치의 사진 확인

  • 현재 위치 주변의 사진 목록 확인

  • 정렬 기준 변경

    여사친2

3️⃣ 사진 상세보기

  • 좋아요 기능

    여사친3

🤼 마이페이지

  • 활동 이력 확인

  • 알림 설정

  • 계정 설정

    마이페이지

  • 로그아웃 및 로그인

    로그아웃