connect-foundation / 2019-03

✨Youngstargram - Youth, Romance, Flex🤟

Welcome to youngstargram ✨

👆 클릭해서 페이지로 이동 👆

청춘, 젊음, 낭만을 공유하는 sns 서비스 OAuth의 Resource server와 Authorization server를 구현하여 Youngstargram API 기능 제공

📚 Wiki

🛠️ 설정 및 실행

🎲 개발 환경

👨‍💻 주요 기능

무한 스크롤

게시글 작성

수정

삭제

좋아요 및 댓글

해시 태그

검색

알림

OAuth 2.0

Document

구조

passport

🗃️ 디렉토리 구조

📁api-server
├── 📁api
│   ├── 📁graphql
│   │   ├── 📁input-types
│   │   ├── 📁mutations
│   │   ├── 📁queries
│   │   └── 📁tyepes
│   │
│   ├── 📁middlewares
│   ├── 📁models
│   ├── 📁routes
│   ├── 📁services
│   ├── 📄app.js
│   └── 🐋Dockerfile
│
├── 📁bin
├── 📁config
├── 📁db
├── 📁test
├── 📁utils
│
📁web
├── 📁config
├── 📁public
└── 📁src
    ├── 📁components
    ├── 📁containers
    │       └── 📁App
    ├── 📁images
    ├── 📁queries
    └── 📁utils
    └── 📄index.js

🤜 메인테이너

김재현	💻what did I do 📜 Commit Log
정소영	💻what did I do 📜 Commit Log
전형진	💻what did I do 📜 Commit Log
남정호	💻what did I do 📜 Commit Log

🤝 Contributing

Contributions, issues and feature requests are welcome!
Feel free to check issues page.

Show your support

Give a ⭐️ if this project helped you!

---

This README was generated with ❤️ by readme-md-generator

2019-03's Issues

[댓글 좋아요] 좋아요 응답

좋아요 추가에 대한 응답

[상세 페이지 - 공유] 공유 아이콘 구현

클릭 시 공유에 관련된 세부메뉴가 출력되는 모달창을 출력

[상세 페이지 - 댓글] 댓글 달기 응답

응답이 정상적으로 오면 내 댓글을 댓글 목록 마지막에 추가함

[상세 페이지 - 답글] 답글 달기 클릭 이벤트

답글 달기 UI를 클릭하면 댓글 입력창에 @{사용자이름}이 추가되고 대댓글을 입력할 수 있음

[상세 페이지 - 좋아요] 좋아요 배치

좋아요 배치

[게시물 상단 UI] more 아이콘 구현

기능

• 클릭시 모달창이 생겨 세부메뉴를 선택할 수 있음

[게시물 상단 UI] 썸네일 구현

기능

• 클릭시 유저 페이지로 이동함

[상세 페이지 - 팔로우] 상세 페이지 팔로우

[좋아요 아이콘] 좋아요 개수 클릭 이벤트

기능

• 클릭시 해당 게시글 좋아요 클릭한 사람들 목록 등장

[more 모달 상세] 링크 복사하기 구현

기능

• clipboard에 링크 복사

front-end 디렉토리 구조 생성

• react boilerplate 생성
• 참고

[more 모달 상세] 모달 UI 구현

기능

• 게시물로 이동, 링크 복사하기, 취소 메뉴 표시

[상세 페이지 - more] more 모달 배치

[댓글 좋아요] 좋아요 요청

좋아요 추가에 대한 요청

[좋아요 아이콘] 좋아요 개수 클릭시 요청

기능

• 좋아요를 누른 사용자의 리스트 요청

[댓글 좋아요] 좋아요한 사람 리스트 요청

좋아요를 누른 사용자의 리스트를 요청

[팔로우 취소 모달] 팔로잉/요청됨 - 확인 모달

[댓글 좋아요] 좋아요한 사람 리스트 응답

좋아요를 누른 사용자의 리스트를 응답

[more 모달 상세 - 타인게시물] 팔로우 취소 구현

기능

• 타인의 게시물일 때 팔로우 하고 있는 사람인 경우
  팔로우 취소 구현
• 클릭시 팔로우 취소 모달 open

[댓글 좋아요] 좋아요 개수 표시

댓글에 달린 좋아요 개수 표시

[상세 페이지 - 댓글] 댓글의 좋아요 배치

[좋아요 아이콘] 좋아요 아이콘 구현

기능

• 좋아요 누르면 색 변화. 응답이 오기 전에 바로 변경

eslint & prettier 초기 설정

• create-react-app을 이용하여 web 기본 틀 구축.
• express를 이용하여 api-server 기본 틀 구축.
• .eslintrc파일 및 .prettierrc파일 설정.

[상세 페이지 - 게시물 상단 UI] 게시물 상단 UI 배치

[상세 페이지 - 레이아웃] 상세 페이지 데이터 요청

상세 페이지 접근 시 필요 데이터 요청

[좋아요 아이콘] 좋아요 on/off시 응답

기능

• 좋아요 개수 DB 저장

[댓글 좋아요] 좋아요 개수 클릭 모달 구현

좋아요 개수 클릭시 리스트가 나타날 모달 구현

[게시물 상단 UI] 게시물 작성자 표시

기능

• 클릭시 유저 페이지로 이동

[more 모달 상세] 게시물로 이동 구현

기능

• 해당 게시물의 상세페이지로 이동

[more 모달 상세] 취소 구현

기능

• 모달창 close

[댓글 좋아요] 좋아요 아이콘 클릭 이벤트

• 좋아요 누르면 하트 색 변경 및 좋아요 개수 변경.
• 응답이 오기 전에 미리 변경됨.

[팔로우 취소 모달] 모달확인 또는 버튼 클릭시 상태 변경 응답

[상세 페이지 - 레이아웃] 상세 페이지 데이터 응답

[상세 페이지 - 본문 및 댓글] 본문 및 댓글 구현

본문 및 댓글 내용이 보임

[좋아요 아이콘] 좋아요 모달 구현

기능

• 좋아요를 누른 사용자 리스트 출력

[팔로잉/팔로우 버튼] 유저 팔로잉/팔로우 구현

[상세 페이지 - 공유] 공유 모달 배치

[댓글 좋아요] 좋아요 개수 클릭 이벤트

좋아요 개수를 클릭하면 좋아요를 클릭한 사람들의 리스트가 나옴

[좋아요 아이콘] 좋아요 on/off시 요청

[상세 페이지 - 댓글] 댓글 달기 배치

[댓글 달기] 댓글 달기 요청

서버로 댓글 달기 요청 전송

[팔로우 취소 모달] 모달확인 또는 버튼 클릭시 상태 변경 요청

[좋아요 아이콘] 좋아요 개수 클릭시 응답

기능

• 좋아요를 누른 사용자의 리스트 응답

back-end 디렉토리 구조 생성

• Node + Express + GraphQL boilerplate 생성
• 참고

React Boiler Plate 추가

link 를 참고하여 boiler plate 제작

[상세 페이지 - 레이아웃] 상세페이지 레이아웃

상세페이지 레이아웃

[상세 페이지 - 댓글] 댓글 아이콘 구현

댓글 입력 폼에 Focus 효과가 발생

[좋아요 아이콘] 좋아요 갯수 표시

기능

• 좋아요 개수를 알 수 있음

[댓글 달기] 댓글 달기 입력

댓글 입력창 제작

[댓글 달기] 댓글 달기 응답

댓글 DB에 저장 후 응답 전송