[Wingle] 국제 교류 커뮤니티 개발 프로젝트 개발 정리

 

📅 프로젝트 기간

• 2023.3.26 ~ 2023.8.25

 

🌟 결과물

배포 사이트

 

GITHUB

2023.8.29 기준 39명의 유저 확보 및 사용자 피드백 수렴

 

 

 

🧑🏻‍💻  역할

- 프론트엔드 기능 개발 및 방향 설정, 프론트엔드 회의 주도, 프로젝트 기획 및 세부 기능 설정
- MVP 버전 마이페이지,프로필, 로딩 컴포넌트 UI 화면 구상 및 공통 컴포넌트 제작

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

 

1. 닉네임 및 사진 수정

- 닉네임 중복 및 사진 파일 크기 확인

- useMutation은 서버에 데이터를 수정하거나 업데이트하는 작업을 처리

 

mypage- nickname

2. 관심사 및 언어 선택

[언어]

- <선택 초기화> 버튼 클릭시 저장된 언어 정보가 리셋

- 선순위가 선택되어야 후 순위 선택 가능

 

[관심사]

- 중복 클릭시 선택 해제, 클릭시 선택

mypage - edit (관심사,언어)

3. 타인 프로필

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

profile

👩🏻‍🔧 기술 스택

 

 

📺 화면 설계서

 

📄 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
  1. React
     • 메모이제이션 권장
     • 함수 선언 : 화살표 함수로 선언
  • 함수형 컴포넌트 작성시 → export default function Example() {}
  • 컴포넌트 내부에 있는 함수 작성 시 → const Example () ⇒ {}
    • 이벤트 함수 네이밍 : handle + event / const handleOnClickAlarm = () => { ... }
  1. Styled-Components
     • 해당 컴포넌트 파일에 정의
     • 네이밍(S-dot)
  2. Recoil
     • 무분별한 전역상태 사용 금지 : 다수의 컴포넌트간에 상태 의존성이 높아질때만 전역상태로 데이터 관리(일반적인 경우 지역상태로 관리)
     • 네이밍 : StateAtom 추가 / export const imgModalStateAtom = atom({...})
  3. TypeScript
  • naming : PascalCase 사용, I/T prefix 사용 금지
  • type alias + interface(API Data)
  • 충돌성 오류로 둘 중 하나의 방식만 → type 방식으로 쓰기로 결정
  • interface 로 되어 있는 코드 type 으로 수정해주기