Giter VIP home page Giter VIP logo

front-end's Introduction

💜도와줘요, M쌤!💜

도와줘요, M쌤은 MBTI 기반 고민 상담 커뮤니티입니다.
MBTI를 잘 아는 선생님 → MBTI쌤 → 줄여서 M쌤이 되었습니다.

당신의 MBTI는 무엇인가요?
여러분도 “도와줘요, M쌤”에서 여러분의 MBTI에 대해 M쌤이 되어보세요!

MVP 핵심기능소개

0. 익명 프로필 제공

  • 개인 정보는 가입할 때만 사용돼요.
  • 서비스 사용 시 닉네임, MBTI, 칭호만이 나타나요.
  • MBTI를 설정 시 대소문자도 구별하여 나를 더 잘 나타낼 수 있어요. ex) EsfP, inTJ
  • 원한다면 프로필 사진과 한줄소개도 설정할 수 있어요.

1. 원하는 MBTI의 M쌤과 1:1 매칭 및 실시간 채팅 기능 제공

  • 내가 상담하고 싶은 유형의 MBTI를 고르면 M쌤과 1:1 매칭돼요.
  • 누구나 고민 상담을 요청할 수 있고, 누구나 M쌤이 될 수 있어요.
  • 익명으로 편안한 실시간 채팅 기능을 제공해요.

2. 커뮤니티 기능 제공

  • 자유 게시판
  • MBTI 별 게시판
  • MBTI 맞추기 게시판 (주변에 ~한 사람 있는데 이 사람 MBTI 뭘까?)

3. MBTI 과몰입 토론 기능 제공

  • 과몰입 토론은 토론 상황과 선택지로 이루어져요.
  • 선택지를 고르면 나의 MBTI와 내가 고른 선택지가 통계에 반영돼요.
  • 재밌는 토론 상황을 직접 만들 수 있어요.

4. M쌤 칭호 모으기 기능 제공

  • M쌤이 고민을 해결해주었다면, M쌤에게 리뷰를 남길 수 있어요.
  • 다양한 태그가 존재하여 손 쉽게 리뷰를 남길 수 있어요. ex) 재미있어요, 어른스러워요, 해결을 잘해줘요
  • 내가 받은 리뷰에 따라 칭호를 얻을 수 있어요. ex 1) 어른스러운 방법으로 고민을 해결해주는 “엠비티어른” ex 2) 화끈한 해결책을 알려주는 “엠비티라노사우르스” ex 3) 채팅을 길게 이어 나가며 자세한 이야기를 해주는 “MBTIM”

5. MBTI 별 상세 설명 페이지 제공

  • MBTI 설명은 빠질 수 없죠. 구글링할 필요 없이 하나의 서비스 안에 담았어요.

팀원 소개

FrontEnd FrontEnd FrontEnd FrontEnd
박브레드 희희 지니 크리스
박브레드 희희 지니 크리스

🏙️ 환경 구축

React.js TypeScript Npm

💅 Style

Emotion

🧹 Lint

ESLint Prettier

💎 State

Recoil React Query ContextAPI

⚒️ 기술 스택

    "@emotion/react": "^11.11.1",
    "@react-oauth/google": "^0.11.0",
    "@stomp/stompjs": "^7.0.0",
    "@toast-ui/editor": "^3.2.2",
    "@toast-ui/react-editor": "^3.2.3",
    "@types/node": "^16.18.38",
    "@types/react": "^18.2.14",
    "@types/react-dom": "^18.2.6",
    "axios": "^1.4.0",
    "date-fns": "^2.30.0",
    "emotion": "^11.0.0",
    "framer-motion": "^10.12.18",
    "pretendard": "^1.3.8",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-google-login": "^5.2.2",
    "react-hook-form": "^7.45.1",
    "react-kakao-login": "^2.1.1",
    "react-markdown": "^8.0.7",
    "react-query": "^3.39.3",
    "react-router-dom": "^6.14.1",
    "react-scripts": "5.0.1",
    "recoil": "^0.7.7",
    "recoil-persist": "^5.1.0",
    "remark-gfm": "^3.0.1",
    "sockjs-client": "^1.6.1",
    "stompjs": "^2.3.3",
    "typescript": "^4.9.5",
    "web-vitals": "^2.1.4"

front-end's People

Contributors

jjuny-won avatar kkanghhee avatar uiop5809 avatar whaleflyingsky avatar

Stargazers

 avatar  avatar  avatar

front-end's Issues

[Feat] 소셜 로그인 서버 연결

목적

주말까지..!

작업 상세 내용

  • 카카오톡 로그인 서버 연결
  • 네이버 로그인 서버 연결
  • 구글 로그인 서버 연걸

유의사항

[Design] 검색 페이지

목적

검색 페이지 구현

작업 상세 내용

  • 검색 페이지 디자인
  • 검색어 입력 후 검색버튼 누를 시 이전검색어에 뜸
  • 인기검색어 현재 시간 확인

유의사항

[Feat] 로그인, 푸터, 이용약관 구현

목적

로그인, 푸터, 이용약관 화면 구현

작업 상세 내용

  • [로그인] : 화면만 구현했어요!
  • [푸터 ] : 아직 페이지 연결은 안했습니다!
  • [ 이용약관] : 필수 약관 동의하면 main 으로 넘어가게 구현!

스크린샷 2023-07-15 오후 12 18 35
스크린샷 2023-07-15 오후 12 24 44

[Feat] 서버 연결 마스터 계정 설정

목적

서버 연결을 하기 위해 header에 jwt를 추가

작업 상세 내용

  • 테스트용 마스터 계정 추가
  • MBTI 게시판 디테일 페이지 분리

유의사항

서버 연결에 어려움 느끼시는 분들 연락주세요!!
react-query 처음 공부할 때 저도 엄청 어려웠어서 도움드릴 수 있습니다!ㅠㅠㅠ

[Fix] header 컴포넌트 라우팅 오류

목적

default가 /일때나, 새로고침할 때 적용되지 않는 오류
recoil을 사용해서 적용할 예정

작업 상세 내용

  • default를 /로 설정
  • 새로고침 해도 라우트 적용되도록 설정

유의사항

[Fix] 토론글, 고민글 2차 수정

목적

작업 상세 내용

  • 메인페이지 hot 토론 컴포넌트 수정
  • MBTI 과몰입 토론 디테일 페이지 container margin-top
  • M쌤 매칭 디테일 페이지 프로필 -> 매칭으로 수정
  • M쌤 매칭 페이지 인기 M쌤 route 설정

유의사항

[Fix] 과몰입 토론 페이지

목적

과몰입 토론 페이지 수정해야 할 것

작업 상세 내용

  • width 수정
  • 제목 height 수정
  • 디테일 페이지 margin-top 설정

유의사항

[Fix] 댓글 관련

목적

댓글 관련

작업 상세 내용

  • 대댓글 표시
  • 본인 댓글은 좋아요 대신 삭제
  • 본인 게시글에만 수정 삭제 버튼
  • 베스트댓글
  • 빈하트 svg 추가
  • 댓글 더보기 표시

유의사항

[Feat] MBTI별 게시판 페이지 서버 연결

목적

MBTI 별 게시판 페이지 서버 연결

작업 상세 내용

  • 카테고리 즐겨찾기 누르기
  • 카테고리 즐겨찾기 조회
  • 카테고리 별 게시글 전체 조회
  • 게시글 작성
  • 게시글 상세 조회
  • 특정 멤버 별 게시글 조회 -> 마이페이지로 이동
  • 게시글 수정
  • 게시글 삭제
  • 게시글 좋아요 누르기

유의사항

[Fix] MBTI별 게시판

목적

MBTI별 게시판 관련

작업 상세 내용

  • MBTI별 게시판 페이지네이션 추가
  • 게시글 상세 조회시 현재 게시글 제외하고 전체 조회
  • MBTI별 게시판 썸네일 없을 경우 삭제
  • 첫 렌더링 전체 카테고리
  • MBTI에 맞춰서 필터링될 때마다 애니메이션 효과
  • MBTI별 게시판 제목 위치 수정
  • 게시판 신고, 공유 텍스트 디자인
  • 게시판 생성, 수정에서 사진 삭제할 경우 S3 삭제
  • 본인 글에도 좋아요 누를 수 있게
  • 게시판 상세조회에서 제목 누르면 그 게시판으로
  • 게시판 생성, 수정에서 사진 삭제할 경우 S3 삭제
  • 전체 게시판에서 글쓸 때 mbti 소문자
  • 게시글 글쓰기 없애기 로그아웃했을 때
  • 조회수 추가
  • 게시판 상세조회 게시글 리스트 오류
  • 게시판 생성, 수정 사진 S3 오류

유의사항

[Design] 게시판 관련 페이지

목적

게시판 관련된 페이지를 만들 것!

작업 상세 내용

  • 게시판 조회 페이지
  • 게시판 조회 내 글, 남 글 컴포넌트
  • 게시판 생성 페이지
  • 게시판 수정 페이지
  • 게시판 댓글 컴포넌트

유의사항

아직 서버가 없는 상태라 보여지는 부분만 만들 것입니다!

[Design] pretendard 글꼴 설정

목적

폰트를 설정하지 않고, 진행하려다 보니 font size나 font weight 등 피그마와 차이가 많이 남
따라서 전역으로 설정할 예정입니다!

작업 상세 내용

  • pretendard 글꼴 다운로드
  • 전역 설정

유의사항

[Fix] 디자인 수정

목적

작업 상세 내용

  • 네이버 로고 크기 변경
  • 이용약관 동의 - 전체 선택 버튼 위치 변경
  • 닉네임 박스, MBTI 입력 박스 컴포넌트 분리

유의사항

[Feat] 토론글 수정/HOT토론글 생성

목적

메인페이지 HOT토론글 API연결
HOT 토론글 디자인

작업 상세 내용

  • 메인페이지 HOT토론글 API연결
  • HOT 토론글 디자인
  • HOT 토론글 더보기 페이지네이션 연결

유의사항

[Feat] main페이지 일부 기능

목적

메인페이지 내 일부 기능 디자인 및 구현
게시글 삭제 모달 구현

작업 상세 내용

메인페이지

  • 매칭을 기다리는 고민 디자인 및 연결
  • 인기 M쌤 디자인 및 연결

메인페이지/ 사이드 메뉴

  • 채팅 디자인 및 연결
  • 즐겨찾기 디자인 및 연결
  • 알림 디자인 및 연결

삭제 모달

  • MBTI, 고민글, 토론글 삭제 모달

유의사항

[Fix] Header 라우팅 오류 수정

목적

useRecoilState를 사용하니, 라우팅 오류가 생기더라고요!
그래서 useLocation location.pathname을 라우트에 따라 active class를 줬습니다.

작업 상세 내용

  • 라우팅 오류 수정

유의사항

[Feat]해결 완료 서버 연결

목적

해결 완료 서버 연결,디자인 추가

작업 상세 내용

  • [ ]해결 완료 디자인
  • [ ]해결 완료 서버 연결

유의사항

[Feat] 마이페이지 서버 연결

목적

마이페이지 서버 연결

작업 상세 내용

  • 프로필 조회
  • 유저 별 프로필 수정 버튼 보이게/안보이게

유의사항

[Docs] 페이지 분리 생성

목적

페이지를 나눠 기본 페이지 생성

작업 상세 내용

  • react-router-dom 설치
  • route 짜기

유의사항

페이지 나중에 더 필요하다면 나눠봐요!

[Design] 검색페이지 관련 페이지 디자인

목적

검색 결과 페이지 등 관련 페이지 디자인 완료

작업 상세 내용

  • 검색바 컴포넌트 분리
  • 검색 결과 페이지 디자인
  • 검색 결과 각 게시판의 컴포넌트 불러오기
  • 각 게시판 더보기 페이지

유의사항

[Design] 프로필 수정 페이지

목적

프로필 수정 페이지

작업 상세 내용

  • 한줄 소개 수정
  • 프로필 사진 수정
  • 닉네임 수정
  • MBTI 수정

유의사항

[Design] 채팅 페이지

목적

작업 상세 내용

  • 채팅방 리스트
  • 채팅 내역에서 상대방 프로필
  • 신고, 나가기 모달창 구현
  • 대화 상대 없을 때 화면 구현
  • 평가 모달 구현
  • 해결완료 평가 화면

유의사항

디자인만 짜서 지금 채팅 내역 받아서 처리하는게 좀 불안합니다.

[Feat] 채팅 페이지 서버 연결

목적

채팅 페이지 api 서버 연동

작업 상세 내용

  • 채팅방 입장하기
  • 채팅 메세지 보내기 및 받기
  • 채팅방 나가기
  • 채팅방 조회

유의사항

[Feat] 고민글 서버 연결

목적

고민글 페이지 서버 연결

작업 상세 내용

  • 고민글 조회 - M쌤 매칭을 기다리는
  • 고민글 조회 - 해결 완료된
  • 고민글 필터링 조회 - M쌤 매칭을 기다리는
  • 고민글 필터링 조회 - 해결 완료된
  • 고민글 상세 조회
  • 특정 멤버 별 게시한 고민글 조회
  • 특정 멤버 별 해결한 고민글 조회
  • 고민글 작성
  • 고민글 수정
  • 고민글 삭제

유의사항

[Feat] 메인 페이지 서버 연결

목적

메인 페이지 서버 연결

작업 상세 내용

  • 홈 화면 조회 - 3 HOT
  • 홈 화면 조회 - HOT 게시글
  • 홈 화면 조회 - HOT 토론
  • 홈 화면 조회 - M쌤 매칭을 기다리는 고민
  • 홈 화면 조회 - 인기 M쌤
  • HOT 게시글 더보기
  • HOT 토론 더보기

유의사항

[Feat] 댓글 서버 연결

목적

댓글 api 서버 연동

작업 상세 내용

  • 댓글 작성
  • 댓글 조회
  • 특정 멤버 별 댓글 조회
  • 댓글 삭제
  • 댓글 좋아요 누르기

유의사항

[Feat] 검색페이지 API 연결

목적

검색 API 연결

작업 상세 내용

  • 더보기페이지
  • MBTI 게시판 검색결과
  • 토론 게시판 검색결과
  • 매칭 게시판 검색결과

유의사항

[Feat] 토론글 서버 연결

목적

토론글 서버연결

작업 상세 내용

  • 토론글 조회
  • 토론글 상세보기
  • 토론글 삭제
  • 토론 참여하기

유의사항

[Design] main 페이지 디자인

목적

main 페이지 디자인 및 서버 연결

작업 상세 내용

  • 핫 게시판 컴포넌트 생성
  • 초기 서버 연결 설정
  • 게시판 컴포넌트 불러오기
  • M쌤 매칭 컴포넌트 불러오기
  • 토론 컴포넌트 불러오기

유의사항

[Design] 토론 게시판 관련 페이지

목적

토론 게시판 관련된 페이지를 만들 것

작업 상세 내용

  • 게시판 관련 컴포넌트
  • #19
  • 게시판 조회 화면
  • 게시판 생성 화면
  • 게시판 삭제(모달?)

유의사항

[Design] 마이페이지

목적

유저 개인의 정보 관리하는 마이페이지 구현

작업 상세 내용

  • 디자인 화면 구현
  • 관련 컴포넌트 불러오기

유의사항

[Design] 유저 정보 페이지

목적

유저 정보 페이지구현

작업 상세 내용

  • 닉네임 입력
  • mbti 입력 ( 입력, Polygon 둘 다 작동)

유의사항

[Fix] 검색 페이지

목적

검색 페이지 관련 수정해야할 것

작업 상세 내용

  • 검색하고나면, input 값 사라지도록

유의사항

[Design]이용약관 페이지

목적

이용약관 페이지 구현

작업 상세 내용

  • 커뮤니티 이용 약관 페이지
  • 개인 정보 취급 방침 페이지
  • 각 페이지 푸터 연결
  • 회원가입 -> signin 페이지 약관 내용 적용

유의사항

[Fix] 메인 페이지

목적

메인 페이지 관련

작업 상세 내용

  • HOT 게시판 더보기 페이지네이션 추가
  • HOT 토론글 더보기 페이지네이션 추가
  • 메인 페이지 글에서 이동할 수 있도록 id 추가
  • html 태그 표시되는 거 수정
  • 썸네일 있을 경우에만 표시
  • cursor: pointer 설정
  • 로그인하고 이용하기

유의사항

[Feat] 고민글 서버 연결2

목적

고민글 서버 연결

작업 상세 내용

  • [ ]고민글 조회 - M쌤 매칭을 기다리는
  • [ ]고민글 조회 - 해결 완료된
  • [ ]고민글 필터링 조회 - M쌤 매칭을 기다리는
  • [ ]고민글 필터링 조회 - 해결 완료된
  • [ ]고민글 상세 조회
  • [ ]특정 멤버 별 게시한 고민글 조회
  • [ ]특정 멤버 별 해결한 고민글 조회
  • [ ]고민글 작성
  • [ ]고민글 수정
  • [ ]고민글 삭제

유의사항

지니님 이슈에서 슝 만드려고 했는데 겹쳐서 안되는 거였어요..
그래서 이슈 새로 파서 만들게요...

[Design] M쌤 매칭 페이지

목적

M쌤 매칭 페이지

작업 상세 내용

  • 인기 M쌤 프로필 컴포넌트
  • M쌤 매칭 컴포넌트
  • MBTI 리스트 추가
  • M쌤 디테일 페이지
  • M쌤 고민글 생성 페이지

유의사항

[Feat] Header 컴포넌트 생성

목적

Header 컴포넌트 생성

작업 상세 내용

  • Header 컴포넌트 생성
  • Header 컴포넌트 디자인
  • navbar 효과
  • Header 항상 상단에 고정

유의사항

[Feat] 현재 로그인한 멤버 조회

목적

현재 로그인한 멤버 조회

작업 상세 내용

  • 현재 로그인한 멤버 조회 api 연동
  • 메인페이지 로그인 컴포넌트
  • 로그인한 멤버로 마이페이지 게시글 조회

유의사항

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.