프로젝트 Wingle

누구나, 부담없이, 안전하게 즐기는 대학생 국제교류 플랫폼 WINGLE 윙글

📅 프로젝트 기간

• 2023.03.26 ~ 2023.09.26

🙇🏻‍♂️ 팀원소개

윤태연	김유나	유수빈	김재훈	양연주
👑팀장 Auth	FE	FE	FE	FE

⚒️ 기능 시연

로그인 & 회원가입 페이지

👉 로그인페이지: 토큰을 받아오고, 계정 정보를 받아오면 헤더 이미지와 마이페이지, 로그인 시 자신이 저장한 픽 마커 호출되는 기능, 로그아웃하면 초기화

👉 회원가입 및 업로드 후 어드민 페이지에서 확인 가능

커뮤니티

👉 자유, 교류 공지 게시판

👉 작성(생성)

👉 수정

👉 삭제

쪽지(Chat)

👉 교류게시판의 유저 마이페이지에서 쪽지 보내기

마이페이지 & 프로필 페이지 (유수빈)

👉 계정 관련 정보 호출 및 계정 정보 Edit 기능 구현

👉 쿼리에서 사용자 ID 를 가져와서 사용자 정보 호출

🧑🏻‍💻 개발 관련 기술

👩🏻‍🔧 기술 스택

Front-end

Common

📺 화면 설계서

🚧 아키텍쳐

📄 API 명세서

🌟 코딩 컨벤션

1. Common

   • 네이밍 글자 길이 : 20자 이내 (20자 이상은 팀원과 상의)
   • 유형별 네이밍 규칙
     • Default : camelCase
     • Folder, File names : lowerCamelCase
     • Component names : PascalCase
     • Function names : lowerCamelCase, 동사 + 명사 (예: getUserInformation)
     • Constant names : CONSTANT_CASE

2. React

   • 함수형 컴포넌트 사용
   • 메모이제이션 권장
   • 이벤트 함수 네이밍 : handle + event / const handleOnClickAlarm = () => { ... }
   • 함수 선언 : 선언식으로 작성하되, 표현식을 사용해야 할 경우(클로저, 콜백함수 등) 화살표 함수 사용

3. Styled-Components

   • 해당 컴포넌트 파일에 스타일 정의
   • 네이밍 : S-dot 패턴 사용 (예: `const Wrapper = styled.div``)

4. Recoil

   • 무분별한 전역상태 사용 금지 : 다수의 컴포넌트 간에 상태 의존성이 높아질 때만 전역상태로 데이터 관리(일반적인 경우 지역상태로 관리)
   • 네이밍 : StateAtom 추가 / export const imgModalStateAtom = atom({ ... })

5. TypeScript

   • 네이밍 : PascalCase 사용, I/T prefix 사용 금지
   • Type alias와 interface 사용 (API 데이터 등)

✔️ 커밋 규칙

이슈 작성 규칙

기본 형식 : [#이슈번호 -] [commit type]: [commit message] 예시 : #1 - feat: 로그인

코딩 컨벤션

• 1. Common
  • 네이밍 글자 길이 : 20자 이내(20자 이상 팀원과 상의)
  • 유형별 네이밍 규칙
  💡 Default : camelCase Folder, File names : lowerCamelCase Component Function names : PascalCase Function names : lowerCamelCase, verb + noun(ex: getUserInformation) Constant names : CONSTANT_CASE
  2. React
     • 메모이제이션 권장
     • 함수 선언 : 화살표 함수로 선언
  • 함수형 컴포넌트 작성시 → export default function Example() {}
  • 컴포넌트 내부에 있는 함수 작성 시 → const Example () ⇒ {}
    • 이벤트 함수 네이밍 : handle + event / const handleOnClickAlarm = () => { ... }

  3. Styled-Components

     • 해당 컴포넌트 파일에 정의
     • 네이밍(S-dot)

  4. Recoil

     • 무분별한 전역상태 사용 금지 : 다수의 컴포넌트간에 상태 의존성이 높아질때만 전역상태로 데이터 관리(일반적인 경우 지역상태로 관리)
     • 네이밍 : StateAtom 추가 / export const imgModalStateAtom = atom({...})

  5. TypeScript

  • naming : PascalCase 사용, I/T prefix 사용 금지

  • type alias + interface(API Data)

  • 충돌성 오류로 둘 중 하나의 방식만 → type 방식으로 쓰기로 결정

  • interface 로 되어 있는 코드 type 으로 수정해주기