Skip to content

[SSAFY 1학기 관통프로젝트] 사진 리뷰 사이트

Notifications You must be signed in to change notification settings

MingyeongKim0708/SsafyRephoto

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

97 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

📷REPHOTO

REPHOTO-logo-long

사진 리뷰 사이트

  • 사용자들이 자신이 촬영한 사진을 자유롭게 업로드하고, 다른 사용자로부터 피드백과 리뷰를 받을 수 있는 플랫폼입니다.
  • 개인의 프로필 페이지에서 해당 사용자가 올린 사진을 모아볼 수 있습니다.
  • 사용자들이 올린 사진을 제목, 작성자, 내용을 토대로 검색할 수 있습니다.
  • 원하는 사진을 다운로드 받을 수 있습니다.

🌱팀원구성


김민경

💻

이준영

💻

🖥️개발환경

제목을-입력해주세요_-008

📂프로젝트 구조

C:.
├─backend
│  ├─.mvn                  # Maven Wrapper 관련 설정
│  │  └─wrapper
│  ├─src                   # 실제 프로젝트 소스 코드
│  │  ├─main
│  │  │  ├─java
│  │  │  │  └─com
│  │  │  │      └─ssafy
│  │  │  │          └─mvc
│  │  │  │              ├─config
│  │  │  │              ├─controller
│  │  │  │              ├─interceptor
│  │  │  │              ├─model
│  │  │  │              │  ├─dao
│  │  │  │              │  ├─dto
│  │  │  │              │  └─service
│  │  │  │              └─view
│  │  │  └─resources
│  │  │      ├─mappers
│  │  │      └─static
│  │  │          └─img    # 정적 이미지 리소스 
│  │  └─test              # 테스트 코드
│  │      └─java
│  │          └─com
│  │              └─ssafy
│  │                  └─mvc
│  └─pom.xml              # Maven 빌드 설정 파일
├─frontend
│  └─rephoto
│      ├─public          
│      ├─src              # Vue 소스 코드
│      │  ├─assets        # CSS, JS, 이미지 등 정적 자원
│      │  ├─components    # Vue 컴포넌트
│      │  ├─router        # Vue 라우터 설정
│      │  ├─stores        # Pinia 관련 파일
│      │  └─views         # Vue 뷰 페이지
│      ├─package.json     # Node.js 의존성 정보
│      ├─package-lock.json # Node.js 의존성 버전 고정 
│      ├─vite.config.js   # Vite 설정 파일
└─.gitignore              


📌ERD

REPHOTO_ERD

📌Usecase Diagram

REPHOTOUseCaseDiagram

📌Class Diagram

REPHOTOClassDiagram

👯역할분담

제목을-입력해주세요_-009


🚀개발 기간 및 작업 관리

개발 기간

  • 2024.11.14 - 2024.11.26 스크린샷 2024-11-26 210257

작업 관리

  • Notion
  • Notion과 GitHub를 이용한 협업 진행
  • 컨벤션, 명세서, 트러블 슈팅, 문서 등은 Notion으로 관리
  • 소스코드는 GitHub로 관리

✨구현 화면

localhost_5173_ localhost_5173_ (2) localhost_5173_user_regist localhost_5173_user_regist (1) localhost_5173_ (3) localhost_5173_board_1 (3) localhost_5173_board_1 (5) localhost_5173_ (6) localhost_5173_ (7) localhost_5173_board_1 localhost_5173_board_1 (4) localhost_5173_board_1 (2)


❗신경 쓴 부분

접근 제한 설정

프론트엔드

  • NavigationGuard를 이용하여 로그인 여부에 따라 특정 라우터에 접근할 수 없게 함
  • 로그인이 되어 있는 경우 로그인, 회원가입 화면에 접근 불가
  • 로그인이 되어 있지 않은 경우 시작 화면, 로그인 화면, 회원 가입 화면 이외에 접근 불가
  • 글, 댓글 작성시 DB의 제약조건에 위배되는 경우를 watch로 감시하고 위배될 경우 해당 작업을 수행할 수 없도록 disabled 설정

백엔드

  • session에 로그인 아이디와 닉네임을 저장한 후 로그인 아이디의 여부에 따라 특정 로직을 실행할 수 없게 인터셉터를 설정하였다.
  • 로그인이 되어 있는 경우 로그인 요청, 회원가입 요청을 차단함.
  • 로그인이 되어 있지 않은 경우 로그인 요청, 회원 가입 요청, 중복 확인 여부를 제외한 모든 요청을 차단함.

💥트러블 슈팅


⚙️설치 및 실행 방법

  • 원활한 사용을 위해 크롬 웹 스토어에서 Vue.js devtools 다운
  • node.js 사이트 (https://nodejs.org/en) 에서 다운
cd frontend/rephoto
npm i axios bootstrap bootstrap-icons
npm run dev

🎯개선 목표

제목을-입력해주세요_-022


😄프로젝트 후기

REPHOTO-023

About

[SSAFY 1학기 관통프로젝트] 사진 리뷰 사이트

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published