Skip to content

codeit-momentum/moment-front

BranchesTags

Repository files navigation

모멘텀💫

Image

신년 계획을 세우고 달성해보세요
모멘텀은 작은 목표를 기록하고 실행하며, 이를 기반으로 자신에게 적합한 목표를 파악해 꾸준히 성취할 수 있도록 지원합니다.

👨‍👩‍👧‍👦팀원

ProjectManager

PM/팀장
이화여자대학교 손윤지

Designer

DS
동국대학교 박서연 		DS
동국대학교 백지연

Developer

Front-end 팀장
한국항공대학교 송필수 		Front-end
덕성여자대학교 권도희 		Front-end
성신여자대학교 오지윤 		Front-end
홍익대학교 이가연
Back-end 팀장
한국외국어대학교 박주희 		Back-end
한국항공대학교 김강연 		Back-end
한국항공대학교 박상혁 		Back-end
숙명여자대학교 양어진

✨주요 기능

0. 시작 및 로그인 페이지

Image

1. 홈 페이지

1-1. 주간 모멘트 진행률 및 진행 중인 모멘트 확인하기

Image

1-2. 알림 확인

Image

1-3. 버킷리스트 달성 현황

Image

Image Image Image Image Image

2. 모멘트 페이지

2-1. 진행 중인 모멘트 확인

Image

2-2. 버킷리스트 생성하기

Image

2-3. 모멘트 인증하기

Image

2-4. 달성형 버킷리스트 인증하기

Image

3. 모멘트 생성 페이지

3-1. 모멘트 자동 생성

Image

3-2. 모멘트 수동 생성

Image

4. 피드 페이지

4-1. 친구 피드 확인

Image

4-2. 친구 찾으러 가기

Image

4-3. 노크하기

Image

4-4. 친구의 모멘트 응원하기

Image

4-5. 친구 고정하기

Image

4-6. 친구 삭제하기

Image

5. 마이 페이지

5-1. 프로필 조회

Image

5-2. 프로필 수정하기

Image

5-3. 친구 추가하기

Image

5-4. 로그아웃

Image

5-5. 탈퇴하기

Image

6. 404페이지

Image

⚙️기술스택

Front-end

Back-end

개발 기간과 러닝 커브를 생각하여 팀원들에게 익숙한 React를 선택하였습니다.
서비스가 웹앱인 점을 생각하였을 때, SPA 방식을 통해 빠른 화면 이동과 자연스러운 사용자 경험을 제공합니다.
시멘틱 태그 사용, react-helmet 도입 등을 통하여 부족한 seo 최적화를 진행합니다.
필요한 모듈들만 번들링하여 개발 서버를 빠르게 시작할 수 있습니다.
CRA에 비해 가벼우며 ESbuild를 통하여 빠른 번들링 속도를 제공합니다.
정적 타이핑을 통해 타입 안정성을 보장합니다.
타입 명시를 통해 에러를 방지하고 개발 효율성을 높입니다.
CSS in js 방식으로 클래스 네임으로 인한 스타일 충돌을 방지합니다.
props와 조건문을 통한 동적 스타일링 구현에 용이합니다.
스타일 코드를 분리하여 컴포넌트를 보다 깔끔하게 작성할 수 있으며 유지보수에 용이합니다.
팀원들이 능숙하게 사용할 수 있습니다.
JSON을 자동으로 파싱해주며 에러 및 상태 처리가 보다 쉽습니다.
instance를 통해 api 호출 코드를 관리하며 inteceptor를 통해 부적절한 접근을 방지합니다.
서버 상태 관리를 도와줍니다.
쿼리 키를 통해 효율적으로 데이터를 불러오고 클라이언트에서의 데이터 관리를 줄입니다.
invalidQueries를 통해 업로드, 수정, 삭제 값을 빠르게 반영합니다.
네이밍 컨벤션, 변수 선언, 들여쓰기 등의 규칙을 적용합니다.
포매팅을 통하여 일관성 있는 코드를 작성하고 가독성을 높입니다.
브랜치를 통하여 분업과 협업을 진행하고, 코드리뷰를 통하여 더 나은 코드를 적용합니다.
서버리스 아키텍처와 자동화된 CI/CD로 보다 간편하게 배포를 진행합니다.
짧은 개발 기간동안 배포로 인하여 발생하는 오류를 줄이고 개발에 대한 집중도를 높입니다.

🤩역할

송필수

  • 초기 프로젝트 생성 및 배포 진행
  • 피드 페이지, 마이 페이지 UI 구현 및 API 연동
  • 홈 페이지 API 연동
  • 리드미 작성

권도희

  • ESLint 설정
  • 홈 페이지 UI 구현

오지윤

  • style 초기 세팅
  • 모멘트 생성 페이지 UI 구현 및 API 연동

이가연

  • route, instance, tanstack-query 설정
  • 카카오 로그인 담당
  • 모멘트 페이지 UI 구현 및 API 연동
  • 각종 애니메이션 구현

📚디렉토리 구조

MOMENT-FRONT\SRC
├─apis
├─assets
│  ├─images
│  └─svg
├─components
├─hooks
│  ├─common
│  └─queries
├─layouts
├─pages
│  └─Start
├─router
├─store
├─styles
├─types
└─utils

apis - axios 기반 instance 코드를 작성하고 ai api 코드를 관리합니다.

assets - 이미지 및 폰트를 관리합니다.

components- 컴포넌트를 관리합니다.

hooks - 리액트 훅을 관리합니다.

  • common - 공통적으로 사용되는 훅들을 관리합니다. ex) useInput, useModal, useToast
  • queries - React Query 기반 훅(api 요청 쿼리 코드)를 관리합니다.

layouts - 전체적인 레이아웃을 설정합니다. ex) 웹앱뷰, 중첩 라우팅

pages - 라우트 경로 기반 대표 페이지 컴포넌트를 관리합니다.

  • 경로(주소)당 하나의 페이지 컴포넌트 대응

router - 라우트를 관리합니다.

store - context를 관리합니다.

styles - 스타일 코드를 관리합니다. ex) theme, mixin, GlobalStyle

types - 각종 타입을 관리합니다.

utils - 상수, mockData, 반복해서 사용되는 변수, 훅이 아닌 공통 함수 등을 관리합니다.

Git 전략

커밋 타입

feat: 새로운 기능 및 주요 개발

fix: 버그 수정

chore: 초기 세팅

docs: 문서 수정(README)

style: 스타일 코드 혹은 간단한 수정

refactor: 코드 리팩토링

code review: 코드리뷰 반영

add: 라이브러리 및 패키지 설치, 관리

  • 예시 - feat: Todo 컴포넌트 생성 및 제출하기 이벤트 핸들러 작성

브랜치 전략

Git-flow 전략

  • 주기적인 배포 및 QA 반영을 위하여
  • main 브랜치를 보다 안전하게 관리

브랜치 관리

Git-flow 전략을 기반으로 프로젝트와 부합한 브랜치를 정하였습니다.

  • main: 최종 Merge를 하는 곳이며 프로젝트에 반영되는 버전입니다.
  • develop: 최상위 개발 브랜치입니다. 각자의 개발 내용을 하나로 합칩니다.
  • feature(커밋 타입/#이슈번호): 기능을 개발하는 브랜치입니다. 커밋 타입과 같이 기능에 맞게 브랜치명을 작성합니다.
  • test: 개인 연습 브랜치입니다.

이슈 템플릿 활용

작업 단위로 이슈를 생성하며 이를 브랜치에 반영합니다.

  • 작업 내역을 세분화하며 각 이슈마다의 작업 내용을 보다 명확히할 수 있습니다.
## ✨어떤 기능인가요?
>추가하려는 기능에 대한 간단한 설명을 해주세요

## ✔️TODOS
- [ ] TODO
- [ ] TODO
- [ ] TODO

## 🎶참고할 만한 자료
>공식 문서, 개발 블로그, 강의 자료 등 자유롭게 첨부해주세요.

머지 전략

PR 및 PR 템플릿 활용

PR(Pull Request)를 통하여 머지 이전 작업 내용들과 팀원들과 공유합니다.
이후 코드리뷰를 진행 후 머지를 합니다.

## #️⃣연관된 이슈
>PR과 연관된 이슈 번호를 작성해주세요. ex) #이슈 번호, #이슈 번호

- close: #[issue number]

## 🪄작업 내용
>해당 이슈 그리고 이번 PR에서 작업한 내용들을 작성해주세요.
>뷰 작업 내용이 포함되었을 경우 사진 혹은 동영상 파일 첨부를 부탁드립니다!

-
-

## 💖리뷰 요청사항
>특별히 봐주셨으면 하는 부분, 나 좀 잘했다 하는 부분! 기타 당부의 말씀 등 자유롭게 작성해주세요.

-

Squash merge

여러 커밋을 하나로 합쳐서 머지하며 로그를 깨끗이 유지할 수 있습니다.

컨벤션

컨벤션을 설정하여

  1. 여러 사람이 개발을 진행하지만 코드 스타일을 통일하여 가독성을 높인다
  2. 추후 유지보수에 용이하다
  3. 실수를 줄이고 버그를 예방할 수 있다
  4. 초기에 정의하여 작업 도중 발생하는 혼란과 갈등을 방지할 수 있다

네이밍

변수

  • camelCase 작성
  • const 사용. let은 최대한 지양하며 var는 사용하지 말아요
  • bool타입 변수의 경우 is, has, can 으로 시작

함수

  • camelCase 작성
  • 컴포넌트 내부에서 동작하는 함수의 경우 handle 로 시작
  • Props 로 넘기는 함수의 경우 on 으로 작성

상수

  • UPPER_CASE 작성 (_로 이어줌)

컴포넌트

  • PascalCase 작성
  • 컴포넌트 구조화 및 공통 컴포넌트 활용
  • 하나의 폴더는 컴포넌트 파일 과 스타일 파일을 지님
  • 버튼 컴포넌트의 경우 Btn으로 시작 ex) BtnKakaoLogin, BtnSubmit

Props

  • camelCase 작성
  • 여러 props 존재시 interface 사용, 단일 prop의 경우 type 사용
  • -Props 혹은 -Prop 으로 작성
  • children 타입은 React.ReactNode 로 통일

태그

  • div 태그도 좋지만 section, nav, p 태그 등 다양한 태그 사용 지향 → seo 최적화
  • 이미지 태그는 alt 속성 작성하기 → seo 및 이미지 최적화
  • children 이 없을 경우 단일 태그로 작성
<Foo />
  • 속성이 2개 이상일 경우 줄 띄어쓰기
<Input name="name" value={value} onChange={handleChange} />

주석 및 들여쓰기

주석

  • //
  • 주석을 달 코드 상단에 작성
  • 모든 주석은 공백으로 시작

들여쓰기

  • 2탭 → 가독성 용이
  • prettierr 설정 예정

기타 코딩 컨벤션

  • 모든 함수는 화살표 함수 로 정의 (컴포넌트 포함)
    • 익명 함수로 선언 
      const foo = () => {};
  • 구조분해할당 활용 ({ foo, bar })
  • 변수 조합할 경우 리터럴 활용 ${var}님 환영합니다
  • for문 지양, forEach 혹은 map 활용
    • jsx 내에서 사용 불가
    • 선언형 프로그래밍 지향
  • 반복 렌더링에서 최상위 태그의 key 값은 index 값이 아닌 고유한 값(name, id 등)으로 설정
  • 조건문은 삼중 등호 연산자 지향
  • 조건부 렌더링의 경우 삼항연산자 사용
    • jsx 내부 사용 가능
  • switch 문 사용시 break 활용

CSS

  • div 태그도 좋지만 section, nav, p 태그 등 다양한 태그 사용 지향 → seo 최적화

styled-component 적용 방식

tsx 코드랑 스타일 관련 ts 코드를 분리할 예정

S-dot 네이밍

  • S : ex. S import
//Temp.tsx
import * as S from './style.tsx';

export default function Temp() {
  return <S.Wrapper></S.Wrapper>;
}

  • style 코드를 따로 분류 하여 style 파일로 관리한다.

    //Temp.style.ts
import styled from 'styled-components';

	export const Header = styled.header`
  position: absolute;
  top: 0;
  left: 0;

  display: flex;
  align-items: center;

  height: 9rem;
`,

	export const  Link = styled(Link)`
  display: flex;
  algn-items: center;

  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.2rem;
  color: ${({ theme }) => theme.colors.gray100};
`;

네이밍

  • 최상위 div: 컴포넌트명Layout
  • 여러개를 감싸는 경우: ~Container
  • 1개의 요소를 감싸는 경우: ~Wrapper
  • div: ~Box
  • p: ~Paragraph
  • span: ~Span
  • nav: ~Navigation
  • ul, ol: ~List
  • li: ~Item
  • image: ~Image

이미지

  • 모든 이미지 파일은 webp로 변환하여 사용 ← 성능 최적화
  • svg는 컴포넌트화하여 관리
//Icon.tsx
const IcIcon = () => (
	//svg 코드
);

export default IcIcon;

//Temp.tsx
import IcIcon from '../../assets/svg/Icon';

<IcIcon />

style

import { ThemeProvider } from 'styled-components';
  • 프로젝트 전체에 일관된 스타일 요소 적용 가능

theme

<ThemeProvider theme={theme}></ThemeProvider> 은 본 태그의 하위 태그들에게 공통으로 적용할 theme을 직접 커스텀할 수 있게 해줍니다.

  • color 를 적용할 예정
import mixin from './mixin';
import { css } from 'styled-components';

const colors = {
  normal: {
    white: '#FFFFFF',
    black: '#000000',
  }
  primary: {
    default: '#f67402',
    hover: '#f04f1e',
    disabled: '#ffdace',
    bg: '#ffece8',
    bgDisabled: '#fff7f5',
  },

  category: {
    yellow: '#ffeb3a',
    aeroBlue: '#afffc6',
    lightGreen: '#66d8a1',
    sky: '#7cd0ff',
    lightPurple: '#d2afff',
    lightGray: '#C5C5C5',
  }
};
  • 피그마 디자인 시스템을 토대로 도입 예정
  • 사용법
export const CardWrapper = styled.div`
	${({ theme: { mixin } }) => mixin.flexBox({direction: 'column'})};
	color: ${({ theme }) => theme.colors.gray[700]};
	${({ theme }) => theme.fonts.m_30_500};
}

GlobalStyle

theme을 통하여 여러 스타일 속성값들을 변수처럼 활용하여 프로젝트에 적용할 수 있다면, GlobalStyle 을 통해서 기본적인 스타일 초기값들을 설정 가능

import { createGlobalStyle } from 'styled-components';
import reset from 'styled-reset';

const GlobalStyle = createGlobalStyle`

${reset};
  
a {
  text-decoration: none;
}

* {
  box-sizing: border-box;
}

button {
  cursor: pointer;
  border: none;
}

input {
  outline: none;
}

:root {
  --vh: 100%;
}
.
.
.
`;

mixin

반복적인 스타일들을 재사용할 수 있도록 모아둔 스타일 그룹

https://ko.legacy.reactjs.org/blog/2016/07/13/mixins-considered-harmful.html

https://itmining.tistory.com/124

  • 깊게 사용하지는 않고, flex 설정에만 사용할 예정
import { css } from 'styled-components';

interface MixinProps {
  direction: string;
  align: string;
  justify: string;
}

const mixin = {
  flexBox: ({ direction = 'row', align, justify }: MixinProps) => css`
    display: flex;
    flex-direction: ${direction};
    align-items: ${align};
    justify-content: ${justify};
  `,
  inlineFlexBox: ({ direction = 'row', align, justify }: MixinProps) => css`
    display: inline-flex;
    flex-direction: ${direction};
    align-items: ${align};
    justify-content: ${justify};
  `,
  flexCenter: ({ direction = 'column' }: MixinProps) => css`
    display: flex;
    flex-direction: ${direction};
    align-items: center;
    justify-content: center;
  `,
};

export default mixin;
import styled from 'styled-components';

export const FeedWrapper = styled.div`
  ${({ theme: { mixin } }) =>
    mixin.flexBox({ direction: 'column', align: 'center' })};
`;

지금 바로 모멘텀을 사용해보세요 !

💫모멘텀 바로가기

☺️노션 바로가기

About

No description, website, or topics provided.

Resources

Readme
Activity
Custom properties

Stars

1 star

Watchers

1 watching

Forks

1 fork
Report repository

Releases

No releases published

Packages

No packages published

Contributors 5

Languages