📷 PoRe_PhotoRecipe

📎 배포 URL : https://pore.netlify.app
🔓 계정 : kbjj23@pore.com | 123123
⛔️ API 주소 변경으로 인하여 기존 DB의 이미지는 출력되지 않고 있습니다.

당신이 있는 곳이 포토존입니다. '포토레시피 PORE'는 포토존을 공유할 수 있는 SNS형 웹 애플리케이션 입니다.
나만의 포토존을 등록해 공유하거나, 다른 유저들이 등록한 포토존들을 지도 페이지에서 확인할 수 있습니다.
포토존을 등록하지 않아도 본인이 찍은 사진과 설명을 게시글로 공유하며 즐거운 SNS 활동을 할 수 있습니다.
PORE를 사용해 새로운 인생 사진을 찍고 남겨보세요.

👊 ㄱㅂㅉ 을 소개합니다!

안녕하세요! 저희는 4명의 Front-end 개발자로 구성된 'ㄱㅂㅉ' 입니다.
팀원들의 초성인 ㄱ,ㅂ,ㅈ,ㅈ 을 하나로 모아 서로 도와주며 함께 성장하는 '개발짱' 이 되자는 의미를 담은 팀명입니다.
(🦁멋쟁이사자처럼 프론트엔드스쿨 3기 프로젝트 23팀)

ㄱ 김도영	ㅂ 배이솔	ㅈ 장희수	ㅈ 조민지

dyFlower	jjangi	heesu0303	ming-Jo
개발 리더	기획 & 소통 리더	디자인 & 문서화 리더	팀장 & 디자인 리더

(Top)

⚙️ 기술 및 개발 환경

[ 프로젝트 기간 ]

2022.12.09 - 2023.01.05

[ 프로젝트 목표 ]

학습한 React와 여러 라이브러리를 활용해 SPA 웹 어플리케이션 개발
페어프로그래밍, 협업 툴 사용해 협업 경험 쌓기
디자인, 기능 추가 등 제공된 API와 디자인을 넘어 팀만의 프로젝트로 구현 완료해내기

[ 사용 기술 ]

FrontEnd
BackEnd
제공된 API

[ 개발 환경 ]

GitHub Projects : GitHub Issues와 함께 프로젝트 진행상황 총괄보드 관리
Notion : 회의록, 정보 공유, 트러블 슈팅 작성 등 팀 프로젝트 동안의 모든 기록을 남김
Figma : 공동 계정 생성 후 팀원 전체 접속해 레퍼런스 검색부터 디자인 시안 상의까지 진행

[ 서비스 배포 ]

[ Git-flow 전략 ]

기본적으로 5가지 브랜치를 활용하는 Git-flow 전략이나, 프로젝트 규모에 맞춰 3가지로 축소해 활용하였습니다.

main : 배포하기 위한 브랜치
develop : 기능 구현, 버그 수정과 같은 기능 단위별 브랜치
feat : 세부 기능을 위한 브랜치
- 각 브랜치의 이름은 feat/세부기능으로 이름 지어 어떠한 기능의 브랜치인지를 알 수 있도록 했습니다.
- push 완료 후에는 해당 브랜치를 삭제하여 브랜치를 잘못 사용하는 경우를 방지했습니다.

[ 컨벤션 ]

일관적인 코드 작성을 위해 컨벤션을 정해 사용했습니다.

{
  "singleQuote": true,
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 80,
  "arrowParens": "always",
  "bracketSameLine": false,
  "bracketSpacing": true,
  "insertPragma": false,
  "requirePragma": false,
  "vueIndentScriptAndStyle": false,
  "jsxSingleQuote": false,
  "htmlWhitespaceSensitivity": "css",
  "proseWrap": "preserve",
  "quoteProps": "as-needed",
  "endOfLine": "auto",
  "embeddedLanguageFormatting": "auto"
}

(airbnb Style Guide)

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    'plugin:react/recommended',
    'airbnb',
    'plugin:prettier/recommended',
    'prettier',
  ],
  overrides: [],
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: ['react', 'prettier'],
  rules: {
    'prettier/prettier': [
      'error',
      {
        singleQuote: true,
        endOfLine: 'auto',
        trailingComma: 'all',
      },
    ],
    'no-console': 'off',
    'react/jsx-uses-react': 'off',
    'react/react-in-jsx-scope': 'off',
    'react/jsx-filename-extension': [
      'error',
      {
        extensions: ['.js', '.jsx'],
      },
    ],
    'react/function-component-definition': [
      2,
      {
        namedComponents: 'arrow-function',
        unnamedComponents: 'arrow-function',
      },
    ],
    'no-param-reassign': [
      'error',
      { props: true, ignorePropertyModificationsFor: ['state'] },
    ],
    'jsx-a11y/label-has-associated-control': [
      2,
      {
        labelAttributes: ['htmlFor'],
      },
    ],
    'react/prop-types': 'off',
  },
};

Git Commit Message

✨ Feat: 새로운 기능 추가
💄 Design : CSS, 사용자 UI 디자인 변경
📝 Docs : 문서 수정
🎨 Style : 코드포맷, 세미콜론, 개행, 코드 구조, 형태
🤔 Test : 테스트
♻️ Refactor: 코드 리팩토링
🐛 Fix : 버그 및 오류 수정
🔥 Remove : 불필요한 파일 삭제
🔨 Chore : 빌드 업무, 패키지매니저, 폴더트리, 세팅 수정
💡 Comment : 필요한 주석 추가 및 변경

(Top)

🙋‍♀️ 역할 분담

✨ 공통

디자인, 기능 기획
컨벤션 조정 ( 코드 컨벤션, 네이밍 컨벤션, 커밋 템플릿, PR템플릿, Issue 템플릿)
이슈 관리 , PR 관리 , 버그 관리
다크모드 구현
README 수정

⭐️ 김도영

[ 세팅 ]

ESLint, Prettier를 이용하여 개발 컨벤션 세팅
패키지 설치 ( redux, axios, styled-components 등 )
폴더 구조

[ 스타일링 ]

포토존, 게시물 등록
채팅 리스트, 채팅방
팔로잉, 팔로워 페이지
피드 상세 페이지
하단 모달, 헤더

[ 기능 개발 ]

Splash 및 전체 페이지에서의 유저 Token 유효성 검사
로그인 / 로그아웃
프로필 페이지
- 프로필 정보
- 포토존 필터링 및 모달
- 피드 리스트
- 포토존, 피드 게시
- 포토존, 피드 이미지 업로드 및 취소
- 포토존 수정, 삭제
하단 모달 및 백 드롭 기능
헤더 각 버튼 기능
Debouncing을 활용한 검색 최적화
무한 스크롤 구현 ( react-observation-intersection 라이브러리 활용 )
useRef를 활용한 컴포넌트 내의 탑 버튼
Context와 Hook을 활용한 다크 모드 세팅
Redux toolkit-thunk와 axios를 이용한 비동기 함수 관리
Netlify를 이용하여 배포

⭐️ 배이솔

[ 세팅 ]

Issue 템플릿 세팅
README 작성 (각 페이지 기능 설명을 ‘wiki'에 작성하여 링크로 추가)

[ 스타일링 ]

프로필 정보
포토존 리스트
- 모달 애니메이션 적용
사용자 프로필 피드 화면
- 포토존 및 게시물이 없을 시의 화면 구현

[ 기능 개발 ]

지도 페이지
- 카카오맵 api
- 키워드로 장소 검색
- 초기 지도화면 유저 위치로 설정
- 키워드 결과에 해당되는 포토존 모달 표시
유저 프로필 수정
팔로잉 팔로우 페이지
- 팔로우 및 취소 버튼 구현
- 타 유저 프로필로 이동
- 팔로워, 팔로잉 유저 리스트 개수 제한 변경(해서 전체 팔로워, 팔로잉 유저들을 다 확인할 수 있게 함)

⭐️ 장희수

[ 세팅 ]

커밋 템플릿 세팅
노션 및 일정 관리

[ 스타일링 ]

Splash 페이지
404 에러 페이지
메인 페이지
피드 페이지
검색 페이지
지도 페이지

[ 기능 개발 ]

유효성 검사를 적용한 회원가입, 프로필 설정
메인 페이지
- 캐러셀
  - 관리자 계정의 포토존 게시물 데이터 렌더링
  - useInterval 커스텀 훅을 생성하여 자동 슬라이드 구현
  - 페이지네이션 구현
  - 렌더링 된 이미지 클릭시 상세 페이지 이동
- 유저 검색(피드 페이지 검색과 동일)
- 메인 피드에 포토존 게시물 렌더링
  - 포토존 이름(지역명)을 버튼탭에 적용하여 각 탭 클릭시 해당 게시물 리스트 렌더링
  - 각 게시물 클릭시 상세 페이지 이동
검색
- 유저 이름, 계정ID 검색시 목록 렌더링
- 검색하여 렌더링 된 유저 목록에서 해당 유저 클릭시 유저 프로필 페이지로 이동
- 유저 검색시 검색 목록에 렌더링 된 유저의 이름, 계정ID의 텍스트가 같으면 하이라이팅되게 구현
프로필 페이지 / 게시물 수정, 삭제
- 각 게시물 수정 기능
- 각 게시물 삭제 기능
- 게시물 사진이 여러 장일 경우 스크롤바 구현 (한장일 경우 스크롤바 없도록 구현)
- 피드 타이틀을 해당 유저의 계정 ID로 변경
기타
- 이미지 오류 처리 (onError 이용)

⭐️ 조민지

[ 세팅 ]

PR 템플릿 셋팅
기능구현 gif 캡쳐 및 편집

[ 스타일링 ]

로그인 페이지
하단 네비게이션 바
프로필 설정, 수정 페이지
회원가입 페이지
지도 페이지
Confirm 모달
반응형 ( 모바일, 태블릿, PC )

[ 기능 개발 ]

팔로잉 피드 페이지
- 팔로잉 유저 없을 시 피드 기본 화면
- 팔로잉 피드 게시글 API로 불러오기
- 피드 상세 페이지
- 피드 좋아요 / 좋아요 취소
- 피드 신고
댓글
- 댓글리스트 API로 불러오기
- 댓글 작성
- 댓글 삭제
- 댓글 신고
- 댓글 작성 시간 표시 구현
댓글 더보기 버튼 클릭 시 모달
댓글 유저 프로필 클릭 시 해당 유저 프로필로 라우팅

(Top)

✨ 주요 기능

🔐 계정
- 로그인 / 로그아웃
- 회원가입
- 회원 정보 설정
- 유효성 검증
- 토큰 검증
🏡 홈 / 피드
- 유저 검색
- 게시물 목록
- 무한 스크롤 / Top 버튼
- 캐러셀 배너
- 지역별 필터 버튼
👤 프로필
- 팔로우 / 언팔로우
- 게시물 등록 / 수정 / 삭제 / 신고
- 프로필 수정
💬 게시물 / 댓글
- 게시물 작성 / 수정 / 삭제 / 신고
- 댓글 작성 / 삭제 / 신고
- 이미지 업로드 / 수정
- 다중 이미지 표시
- 게시물 표시 방식(앨범형 / 리스트형)
- 좋아요 / 좋아요 취소
📸 포토존
- 포토존 등록 / 수정 / 삭제 / 신고
- 지역별 포토존 목록
📍 지도
- 카카오맵 API 연동
- 포토존 위치 마커
- 키워드 검색
- 마커 클릭 시 해당 포토존 이름 표시

(Top)

🗂 프로젝트 구조

assets/ : 아이콘, 파비콘
components/ : 컴포넌트
pages/ : 생성한 컴포넌트들을 조합해 각 페이지 구현
styles/ : globalStyle, 라이트/다크 모드 색상 적용

폴더트리

📦 PoRe_PhotoRecipe
├─ 📁.github
├─ 📁node_modules
├─ 📁public
├─ 📁src
│  ├─ 📁assets
│  │  ├─ 📁icons
│  │  └─ 📁img
│  ├─ 📁components
│  │  ├─ 📁button
│  │  ├─ 📁card
│  │  ├─ 📁comment
│  │  ├─ 📁errorMessage
│  │  ├─ 📁header
│  │  ├─ 📁input
│  │  ├─ 📁modal
│  │  ├─ 📁navBar
│  │  ├─ 📁profile
│  │  └─ 📁user
│  ├─ 📁pages
│  │  ├─ 📁Chat
│  │  ├─ 📁Feed
│  │  ├─ 📁Home
│  │  ├─ 📁Login
│  │  ├─ 📁Map
│  │  ├─ 📁NotFound
│  │  ├─ 📁PostDetail
│  │  ├─ 📁Profile
│  │  ├─ 📁Search
│  │  └─ 📁Splash
│  ├─ 📁routes
│  ├─ 📁store
│  ├─ 📁styles
│  ├─ App.jsx
│  └─ index.jsx
├─ .env
├─ .eslintrc.js
├─ .gitignore
├─ .gitmessage.txt
├─ .prettierrc
├─ package-lock.json
├─ package.json
└─ README.md

(Top)

🧭 UI

(Top)

💻️ 페이지 기능

상세 기능 설명은 각 페이지별 링크 연결해두었습니다.

1) Start

🔗splash	🔗로그인	🔗회원가입

2) 홈

🔗캐러셀	🔗검색

🔗지역 필터	🔗포토존 스크롤

3) 피드

🔗피드 스크롤	🔗검색

🔗피드 상세	🔗좋아요와 댓글

4) 지도

🔗포토존 모달 스크롤	🔗검색	🔗마커 hover

5) 프로필

🔗팔로워	🔗팔로잉

🔗포토존 등록	🔗게시글 등록

🔗프로필 수정	🔗검색

🔗포토존 모달	🔗피드 보기

+ 다크모드/반응형

다크모드	반응형(테블릿)

반응형(데스크탑)

(Top)

⏱ 작업 관리

[ 총괄보드 ]

팀 노션 워크스페이스에서 총괄보드를 생성해 팀 스케줄(오프라인/구현/발표/정기회의)을 세우고 이를 따랐습니다.

[ 일일회의 ]

매일 시작 전 20분 정도 개인 진행 상황 공유 및 상의, 이를 팀 노션 워크스페이스 회의록 페이지에 기록했습니다.

[ 트러블슈팅 ]

개인 파트 개발 중에 생긴 여러 문제, 해결 과정을 팀 노션 워크스페이스 트러블슈팅 페이지에 기록해 공유했습니다.
_이를 통해 동일한 트러블 발생 시 정확하게 이유를 알고 해결까지 편리하게 해낼 수 있었습니다.

(Top)

📚 개선 사항

포토존 등록 시, 사진 촬영 일자 Date 적용
이미지 압축 라이브러리 적용
리덕스 툴킷 전체 적용

(Top)

👨‍👩‍👧‍👧 팀 활동

'ㄱㅂㅉ'은 팀 프로젝트 기간 동안, 개발 이외 팀 친목 시간을 많이 가졌습니다. 이러한 시간 보냄으로서 팀워크를 단단히 다질 수 있었습니다! ('추억 보따리'라는 이름의 팀 노션 워크스페이스의 페이지를 생성해 사진들을 기록했고, 프로젝트 중간에 꺼내보며 추억을 회상하고 많이 웃을 수 있었습니다☺)

오프라인 모임 (드레스코드 맞춰 단체 사진 찍기)

퇴실 후 주변 맛집 찾아 맛저!

(Top)

✒ 프로젝트를 마치며,

우리 개발짱의 프로젝트는 아직 끝나지 않았습니다!
리팩토링과 버전 업그레이드를 통해서 PORE를 더욱 완성시켜 나갈 것 입니다!

🦁 ㄱ도영
우리 개발짱 팀원들은 정말 멋지고 훌륭해요!! 프로젝트를 진행하면서 너무 즐겁고 재밌었습니다!! 여러 팀들 중에 우리 팀이 최고의 케미를 가졌었다고 자부할 수 있습니다~~!! 그리고 프로젝트를 진행하며 각자의 장점을 서로 나누고, 부족한 부분을 보완하며 함께 성장하는 것이 느껴졌습니다. 열정 가득한 팀원들 덕분에 프로젝트 무사히 완수한 것 같아요~~!! 우리 개발짱 팀원들 모두 멋진 프론트엔드 개발자가 될 것이라 생각합니다!! 그때는 더 멋진 프로젝트 한번 해보자구욧~~

🦁 ㅂ이솔
첫 만남부터 어색하지 않았던 우리 개발짱 팀원 여러분들과 함께여서 알차고 행복한 프로젝트를 완성할 수 있었습니다 :> 전반적으로 부족한 저를 항상 응원해주시고 도와주신 점 감사했습니다..💖 이번 프로젝트을 시작으로 앞으로 모두 멋진 프론트엔드 개발자가 되는 날까지 아니, 그 이후에도 평생 개발짱 함께해요~~!!

🦁 ㅈ희수
저희 개발짱은 정말 미쳤어요..! 엄청난 열정과 끈기로 똘똘 뭉쳐서 최고의 팀워크를 발휘했답니다! 덕분에 이렇게 멋진 프로젝트가...!!!! 서로의 의견을 귀 기울여 들어주고, 어려운 문제가 있거나 고민되는 부분이 있을 땐 밤낮 가릴 것 없이 함께 고민했어요! 그래서 보다 더 좋은 결과가 나온 것 같습니다! 무엇보다 저희 팀은 오프라인으로 만날 때마다 항상 드레스 코드를 맞춰 입어요👕👚 그래서 더 끈끈한 유대감을 형성하고 더더더 즐겁게 프로젝트를 진행했습니다! 서로의 의견은 1000% 수용하고, 너무 귀엽고, 열정 넘치고, 그리고.. 잠을 안 자요..! 덜덜.. 앞으로는 꼭 충분한 수면을 하시길💖 프로젝트를 하면서 너무 즐거웠습니다! 팀명처럼 개발짱이 되어 만나는 그날까지 항상 함께해욧💖

🦁 ㅈ민지
서로의 부족한 점을 채워줄 수 있는 팀원들을 만나 정말 좋은 시너지와 함께 행복하게 프로젝트를 할 수 있었습니다! 팀원이 막히는 부분이 있을 때 다함께 모여서 문제에 대해 고민하고 서로의 의견을 편하게 이야기하고 협의해가는 과정이 정말 환상적인 팀워크였다고 생각합니다~! 프로젝트 하는 동안 정말 행복했고 앞으로도 함께 개발짱이 되어보아요👊 드레스코드 맞춰입고 맛있는거 먹으면서 즐겁게 코딩한 우리팀 진짜 최고🧡💛💚💙💜

(Top)

Name		Name	Last commit message	Last commit date
Latest commit History 493 Commits
.github		.github
public		public
src		src
.eslintrc.js		.eslintrc.js
.gitignore		.gitignore
.gitmessage.txt		.gitmessage.txt
.prettierrc		.prettierrc
README.md		README.md
package-lock.json		package-lock.json
package.json		package.json

TeamGaebaljjang/PoRe_PhotoRecipe

Folders and files

Latest commit

History

Repository files navigation

📷 PoRe_PhotoRecipe

📍 목차

👊 ㄱㅂㅉ 을 소개합니다!

⚙️ 기술 및 개발 환경

[ 프로젝트 기간 ]

[ 프로젝트 목표 ]

[ 사용 기술 ]

[ 개발 환경 ]

[ 서비스 배포 ]

[ Git-flow 전략 ]

[ 컨벤션 ]

🙋‍♀️ 역할 분담

✨ 공통

⭐️ 김도영

[ 세팅 ]

[ 스타일링 ]

[ 기능 개발 ]

⭐️ 배이솔

[ 세팅 ]

[ 스타일링 ]

[ 기능 개발 ]

⭐️ 장희수

[ 세팅 ]

[ 스타일링 ]

[ 기능 개발 ]

⭐️ 조민지

[ 세팅 ]

[ 스타일링 ]

[ 기능 개발 ]

✨ 주요 기능

🗂 프로젝트 구조

🧭 UI

💻️ 페이지 기능

1) Start

2) 홈

3) 피드

4) 지도

5) 프로필

+ 다크모드/반응형

⏱ 작업 관리

[ 총괄보드 ]

[ 일일회의 ]

[ 트러블슈팅 ]

📚 개선 사항

👨‍👩‍👧‍👧 팀 활동

✒ 프로젝트를 마치며,

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors 4

Uh oh!

Languages

Packages