⚾️ 구장 밖 야구

ID : baseball@test.com
PW : test123!
모바일로 확인하기 :

1. 서비스 소개

구장 밖 야구는 구장 밖에서도 같은 팀을 응원하는 팬들과 교류할 수 있는 야구 팬들을 위한 SNS 커뮤니티입니다.

유저들이 각자 어느 팀을 응원하는지를 한눈에 알 수 있습니다.
응원하는 팀의 시그니처 컬러로 테마를 바꿀 수 있는 기능을 통해 커뮤니티에 더 큰 소속감을 느낄 수 있습니다.
사용하던 팀 응원 소품이나 야구 관련 물품을 중고 거래를 통해 판매하고, 구입할 수 있습니다.
야구와 관련된 이슈들을 실시간으로 올리며 SNS 활동을 할 수 있습니다.
같은 팀을 응원하는 유저를 팔로우 하여 피드를 꾸릴 수 있고, 댓글과 좋아요 기능으로 소통할 수 있습니다.

2. 팀 소개 & 역할 분담

FE 한수빈	FE 김은총	FE 김하연	FE 최예지

🔗GitHub	🔗GitHub	🔗GitHub	🔗GitHub

🦜 저희는 멋쟁이사자처럼 프론트엔드스쿨 5기 프로젝트 8조 the 8색조 팀입니다 !

🐼 한수빈 (팀장)

🖥️ 화면 구현

피드 포스트 목록 프로필 페이지 팔로잉
팔로워 목록 메인 레이아웃
콘텐츠 레이아웃 헤더 navbar

🛠️ 기능 개발

피드 페이지
- 팔로우 중인 유저들의 게시글 불러오기
- 팔로우 중인 유저가 없을 경우 검색하기 버튼 노출
- 무한 스크롤 구현
포스트 등록/수정/삭제/신고 기능
API 활용
- 더보기 버튼 클릭시 작성자와 사용자의 일치 여부에 따라 삭제/수정 모달과 신고 모달이 각각 뜸
- 포스트 등록시 한 번에 이미지 최대 3개 업로드 가능
포스트 상세 페이지
pre 태그를 활용하여 게시글 작성시에 개행이 그대로 출력되도록 함
상품 상세 페이지
- 포스트 좋아요 / 댓글 작성 기능 API활용
- 댓글 작성시 댓글 리스트 재렌더링으로 새로고침없이 작성한 댓글이 바로 렌더링
프로필 페이지
- 유저 프로필, 해당 유저가 등록한 포스트 / 상품 등을 보여주는 페이지
- 포스트 목록을 앨범형/리스트형으로 볼 수 있는 토글 버튼
- 포스트 목록에 무한 스크롤 구현
- 팔로우한 유저/ 팔로잉중인 유저 리스트 무한 스크롤 구현
- 사용자의 프로필은 프로필수정/상품등록 버튼, 다른 유저의 프로필은 팔로우,채팅,공유 버튼(채팅, 공유 미구현
접근성
- 이미지 alt(대체텍스트) 추가
- 접근성 텍스트 h1~h3태그 추가
라우터
- context의 usertoken 유무에 따라 페이지 라우팅되도록 구현
기타 프로젝트 주도
- 프로젝트 메인 주제를 정하고 핵심 기능 제안
- 정기/비정기 회의 주도
- 역할 분담 주도
발표

🐢 김은총

🖥️ 화면 구현

채팅 리스트 페이지
채팅방 페이지
- 채팅방 나가기 모달 연결
로딩중 컴포넌트
404 페이지
splash 스크린
공통 Button 컴포넌트
- 재사용성을 고려하여 모든 페이지에서 사용 가능하도록 제작

🛠️ 기능 개발

유저 검색 기능
- 검색어를 타이핑 하면 별도의 버튼 클릭 없이 바로 input value와 같은 검색어 리스트 출력
- 안정성을 위해 검색어 api 요청 텀을 200ms로 제한
- 검색 리스트 유저 프로필에 응원 중인 팀 로고 배치
검색어 하이라이트 기능
- 검색어와 겹치는 닉네임 단어에 컬러 하이라이트
splash 스크린
- 3초간 애니메이션이 작동한 후 Login Modal 페이지로 이동
전체 디자인 담당
- 시그니처 컬러, 스플래쉬 스크린, 메인로고, 파비콘, Error404 이미지, etc

기타

README 작성
- 서비스 소개 등 이미지 제작
- 전체 구조 기획 / 작성

김하연

🖥️ 화면 구현

form, select, comment, modal(더보기/세팅/업로드 모달), container 컴포넌트
로그인, 회원가입, 게시글 , 댓글 페이지

🛠️ 기능 개발

기본 테마와 응원 중인 팀이 있는 사용자를 위한 10가지 테마 전환 로직
- 컬러와 팀 변동에 상관없이 동작하도록, CSS 변수로 관리
- 이미지 : 하나의 SVG 코드로 모든 테마 지원
회원가입 / 로그인 / 로그아웃
- 유효성 검사
  - HTML, JavaScript로 가능한 검증은 입력값이 변할 때마다 시행
  - API로만 가능한 검증(이메일 중복 등)은 포커스가 떠났을 때 시행 및 피드백
  - 유효성에 따른 실시간 버튼 활성화/비활성화 기능
  - 양식이 올바르지 않을 시, 실시간 텍스트 피드백 (회원가입)
  - 이미지 확장자는 프론트에서 검사
- 서버 부담을 줄이고, 렌더링 시간을 단축하기 위해, 이미지 용량 줄이기(리사이즈)
- 편의성을 위해, 비밀번호 보기/숨기기 기능 제공
- 회원가입 성공 시 자동 로그인 기능
검색, 댓글 페이지 무한 스크롤
- 로딩 시간을 줄이기 위해, 한번에 렌더링하는 리스트 개수를 제한하고, 스크롤이 바닥에 닿으면, 추가 렌더링
캐러셀
- Swiper 라이브러리를 활용한 페이지네이션 캐러셀 구현
기타
- 댓글 삭제 / 신고, context API 구조 세팅

사용성 및 접근성

모달창
- Tab을 누를 시, 포커스가 모달창을 벗어나지 않도록 구현
커스텀 셀렉트 박스
- 키보드 사용 시 포커스가 셀렉트 박스 내에서 이동하도록 구현
- 위아래 방향키, Tab, shift + Tab, 스페이스, 엔터를 이용한 포커스 이동, 열기/닫기, 선택 기능 제공
폼(form)
- textarea 실시간 글자수/최대 글자수 피드백 및 리사이징

기타

지식 공유
- API 사용법, 상태 끌어올리기, setTimeout/clearTimeout 활용법 등
  프로젝트를 진행하며 필요할 때마다 팀 내, 팀 외 지식 공유

🐈 최예지

🖥️ 화면 구현

모든 페이지에서 재사용되는 공통 컴포넌트 제작
- 하단 탭 메뉴바
상품 등록(수정) 페이지
검색 결과 페이지

🛠️ 기능 개발

하단 탭 메뉴 바
- 하단 탭 메뉴 클릭 시 해당 페이지로 이동
- 선택된 메뉴 아이콘만 색칠(활성화) 되도록 구현
회원 정보 수정 기능
- 기존 마이 프로필 이미지와 정보 불러오기
- 프로필 이미지 삭제(초기화) 기능
- 수정 페이지에서 이미지 미수정 시 기존 마이 프로필 이미지 유지
상품 등록 기능
- 업로드한 상품 이미지 미리보기 및 삭제
- 각 입력값에 대한 유효성 관리 =>
  - 이미지 등록 실패 경고창
  - 상품 가격의 천 단위 콤마 생성 및 숫자만 입력 받도록 제한
    - API 연결 => 콤마를 삭제한 숫자 형태로 변경해서 전송되도록 함
  - 상품 가격의 최대 금액(자릿수) 지정
  - 상품명의 유효 글자수 지정 (2~25글자)
  - 악의적인 입력을 방지하기 위해 상품명에 공백 연속 사용 제한
유효한 값이 모두 입력 되었을 때만 저장 버튼 활성화
상품 소개란 줄바꿈 처리로 가독성 개선
API 연결을 통해 등록된 상품 정보 전송

기타

notion 문서 작성 -> 회의록 정리

👍 공통

README 작성
이미지
- 레티나 디스플레이에 대응하기 위해, 원본 이미지의 2배 사이즈 이미지 사용
커밋 메시지 컨벤션, 코드 컨벤션, 네이밍 컨벤션, 폴더 구조 컨벤션 설립

3. 프로젝트 기간

2023년 6월 2일 ~ 2023년 6월 27일

기획 회의 (서비스 컨셉, 컨벤션 수립, 역할 분배, 일정 구상) : 6월 2일 ~ 6월 3일
로고, UI 디자인 : 6월 2일 ~ 6월 5일
공통 UI 컴포넌트 개발 : 6월 3일 ~ 6월 8일
페이지 구현 : 6월 8일 ~ 6월 14일
기능 개발 : 6월 15일 ~ 6월 24일
버그 수정 : 6월 25일 ~ 6월 27일
배포 : 6월 26일 ~ 6월 27일

4. 개발 환경

프론트엔드		백엔드	배포	디자인
React	styled-components	제공된 API	netlify	Figma	Adobe Illustrator

4-1. 기타 환경

OS :
IDE :
협업 툴 :
포매터 :

5. 프로젝트 구조

TOP 🔼

6. Git Branch 전략

✅ GitHub Flow 전략 채택

프로젝트의 규모와 기간을 고려했을 때, 브랜치 관리에 드는 리소스를 줄이고
최소 기능을 빠르게 구현하는데 집중하기 위하여 GitHub Flow를 채택하였습니다.
브랜치 실제 관리 모습 🔽

7. 협업 방식 & 프로젝트 관리

📍 순조로운 프로젝트를 위한 원칙

💛 나누면서 성장하기

- 동료에게 도움 요청하는 것을 어려워하지 않기
- 팀원이 도움을 요청했을 때, VSCode 라이브 셰어 기능을 활용하여 다 함께 해결하기
- 코딩하면서 마주친 문제들에 대해 고민했던 부분, 느꼈던 부분을 디스코드 스레드에 수시로 공유하기

🔥 코드만큼 감정 챙기기

- 불만이 있으면 참지 말고 바로 말하기
- 서로의 의견 경청하고 존중하기
- 채팅방과 디엠을 적극적으로 활용하여 소통하기

🤔 서로 신뢰주기

- 회의에 참석하지 못하는 경우가 생기면 꼭 보고하기

🌳 프로젝트 진행

정기 회의 및 코드 리뷰
- 월/목 AM 9시 정기회의와 주 3회 코드리뷰를 가지면서 작업 진행 상황 공유
- 회의록 : Notion
Discord GitHub 봇을 사용하여 실시간 PR 상황 공유 ⬇️
Notion Project 템플릿을 사용하여 할 일 & 일정 관리

8. 컨벤션

시맨틱 마크업
- 의미있는 변수명 사용
- css : kebab-case
- js : camelCase
- 변수 : var 사용 금지
Prettier 설정

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "printWidth": 80,
};

커밋 컨벤션 (Udacity의 컨벤션 참고)

- Feat: 새로운 기능 추가
- Fix: 버그 수정
- Docs: 리드미 등 문서 수정, 라이브러리 설치
- Style: 코드 포맷팅, 세미콜론 누락, 코드 변경이 없는 경우
- Refactor: 코드 리팩토링
- Test: 테스트 코드, 리팩토링 테스트 코드 추가
- Chore: 빌드 업무 수정, 패키지 매니저 수정
- Rename: 파일명 혹은 폴더명 수정, 위치 옮기기
- Remove: 파일 삭제

9. 서비스 미리보기

홈
스플래시	회원가입	프로필설정

피드 / 채팅
홈피드, 검색기능	신고하기	채팅

게시글
게시글 상세페이지(좋아요, 댓글)	게시물 작성	게시물 삭제

프로필
마이프로필	유어프로필	리스트형/앨범형

프로필 수정	팔로워 / 팔로잉	에러페이지

판매 상품
상품 등록	상품 수정	상품 삭제

10. 핵심 코드 설명

👨‍👧‍👦 마이 팀 테마 변경 코드

✔️ API 명세에서 자기소개 정보를 담당하는 intro 키의 값으로 자기소개와 응원하는 팀 정보를 $로 구분하여 서버에 전달

{
  "user": {
    "username": "test",
    "email": "test@test.test",
    "password": "test123!",
    "accountname": "testman123",
    "intro": "자기소개입니다.$hanhwa",
    "image": ""
  }
}

✔️ 구단별 시그니처 컬러 및 서브컬러를 global.css에 변수로 저장

// 로그인한 유저의 팀 정보 불러오기
// const res = await fetch ...
const json = await res.json();
const team = json.profile.intro.split('$')[1];
// 팀 정보 로컬스토리지에 저장 / context에 저장됨
localStorage.setItem('myTeam', team);

// context에 저장된 myTeam 사용하기
const { myTeam } = useContext(UserContext);

// 팀 컬러 적용
background: ${(props) =>
        'var(--primary-color-' + (props.myTeam || 'default') + ')'};

// 아이콘 적용
<svg>
        <path //생략
          fill={
            hearted
              ? myTeam === 'kt'
                ? 'var(--tertiary-color-kt)'
                : 'var(--primary-color-' + (myTeam || 'default') + ')'
              : ''
          }/>
</svg>

11. 트러블 슈팅

11-1 이전 검색어 결과가 렌더링되는 버그

현상 : 예를 들어, 'test'라고 검색했을 때, 'tes' 혹은 'te' 같이 키워드를 다 입력하기 전의 검색 결과가 최종적으로 나타나는 경우가 있음
원인 : 입력값 변경 시, clearTimeOut로 클린업하기 전, setTimeOut이 실행되었다면, 이전 검색어에 대한 함수 실행(onTyping)이 취소되지 않음
해결 방법 : 현재 입력값과, data 받아올 때 사용된 키워드(입력값)이 다르면 얼리리턴

11-2 댓글 작성자 이미지 깨지는 버그

현상 : 댓글 작성자의 이미지가 엑박으로 나오는 경우가 있음
원인 : 서버에 저장된 이미지 경로가 올바르지 않은 경우 깨짐
해결 방법 : 이미지 경로에 올바른 url이 포함되어 있는지 체크하고, 그렇지 않을 경우 기본 이미지 렌더링

11-3 뒤로가기 클릭 시, 하단 탭 메뉴 버그

현상 : 뒤로가기 버튼 클릭 시, 하단 탭 메뉴의 현재 메뉴가 변경되지 않음
원인 : 하단 탭 컴포넌트 안에서, 현재 페이지 정보 관리
해결 방법 : 각 페이지에서 현재 페이지 정보를 currentId로 하단 탭 컴포넌트에 넘겨주도록 변경

11-4 textarea 리사이즈 버그

현상 : 처음 화면이 렌더링 될 때, textarea가 글자 줄 수에 맞게 리사이징되지 않음
원인 : 입력값이 변할 때, 리사이징 함수가 실행되기 때문
해결 방법 : textarea의 value를 useState로 컨트롤해서, value가 변할 때, 리사이징 함수가 실행되도록 변경

12. 회고 및 소감

팀별로 게시판을 만들면 좋겠다는 의견이 있었는데 구현하지 못해서 아쉽습니다.
이미지 최적화, 코드 리팩토링 등 개선될 부분들이 많은데 제대로 진행하지 못해서 아쉽습니다.
수료 후에도 프로젝트를 계속 유지하여 최적화, 기능 추가 등 꾸준히 지속할 것입니다.

TOP 🔼

astinaus/Off-field-baseball

⚾️ 구장 밖 야구

1. 서비스 소개

2. 팀 소개 & 역할 분담

🐼 한수빈 (팀장)

🐢 김은총

김하연

🐈 최예지

👍 공통

3. 프로젝트 기간

4. 개발 환경

4-1. 기타 환경

5. 프로젝트 구조

6. Git Branch 전략

7. 협업 방식 & 프로젝트 관리

📍 순조로운 프로젝트를 위한 원칙

🌳 프로젝트 진행

8. 컨벤션

9. 서비스 미리보기

10. 핵심 코드 설명

👨‍👧‍👦 마이 팀 테마 변경 코드

11. 트러블 슈팅

12. 회고 및 소감