Skip to content
forked from gseokj/pie-pay

[삼성전자 우수상 1등]모임을 위한 자동 정산 페이 시스템

Notifications You must be signed in to change notification settings

CocoIsCat/Pie-Pay

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

📄목차

  1. 서비스 소개
  2. 기획 배경
  3. 화면소개
  4. 기술 스택
  5. 서비스 아키텍처
  6. 시퀸스 다이어그램
  7. 프로젝트 산출물

💵서비스 소개

서비스 설명

개요

  • 빠른 N분배 정산 가능한 Pay

대상

  • 정기적으로 모이는 모임이 있는 사람들
  • 모임 후 정산 요청을 보내기 귀찮은 사람들
  • 모임 후 정산해야 한다는 사실을 잘 잊는 사람들
  • 모임에서 어떤 활동을 했는지 추억을 남기고 싶은 사람들

UCC🎞️

↓ 클릭 후 UCC 페이지로 이동

KakaoTalk_20240408_073017146.mp4

Top



💴기획 배경

배경

친구들과 즐거운 시간을 보내고 나면 반드시 해야하는 귀찮은 과정이 있습니다. 바로 정산!

하지만 카카오톡 정산을 활용하면 상대가 돈을 보내줄 때까지 눈치보며 기다려야 했습니다. 😢

이를 위해 정산 과정에서 기다릴 필요도, 눈치볼 필요도 없도록 파이페이가 탄생했습니다!

목적

정산을 위해 일일이 찾아다니지 말고, 결제하면서 정산하자!

의의

  • 정산 과정 간소화

  • 개별 계산 or 개별 이체의 과정을 생략

  • 결제 내역을 통한 모임의 추억 저장

    Top

📱 화면 소개

회원가입
모임만들기
모임입장
결제
모임상세
정산

Top

💾기술 스택

코드 컨벤션

BE
Intelij Formatter 적용
FE
파일 및 폴더 구조
-src
  -app              # Next.js 페이지
    -assets           # 이미지,아이콘 폴더
    -_component
    -hooks            # custom hooks
    -api              # 백엔드와 통신하는 api 서비스
    -utils            # 유틸리티 함수 및 상수
    -mocks            # MSW
  -model                # interface
  -store                # zustand
폴더 및 파일 네이밍

페이지는 src/app 폴더에 작성

  • 폴더 네이밍: 카멜 케이스를 기본으로 하며, 컴포넌트 폴더일 경우에는 _component로 작성한다.
  • 파일 네이밍: component, layout, page 파일일 경우에만 .tsx 확장자를 사용하며, 그 외에는 .ts를 사용한다.
  • Custom hook: use + 함수명으로 작성한다.
문장 종료

반드시 세미콜론을 사용

명명 규칙
  • 상수는 영문 대문자, 스네이크 표기법을 사용
const NAME_ROLE;
스타일 속성 선언 순서

NHN 코딩 컨벤션에 따라 속성을 선언할 때는 레이아웃과 관련이 큰 것부터 시작하여 레이아웃과 무관한 것 순서로 선언한다. https://archuive.tistory.com/72

  1. 레이아웃
  2. Box
  3. 배경
  4. 폰트
  5. other
Eslint Prettier
  • Airbnb 스타일 가이드를 사용.
함수

함수 표현식을 사용하며, Arrow function을 사용한다.

// Bad
function fnName() {}; Array.map(function(x){ retrun {}; })

// Good
const fnName = () => {}; Array.map(x => x);
함수 컴포넌트와 Props

함수 컴포넌트를 작성할 때에는 React.FC<Props> 대신에, 인자로 받은 Props를 중괄호로 감싸서 사용한다.

// Bad
const Component: React.FC<Props> = ({ item }) => {
  return <div>{item}</div>;
};

// Good
const Component = ({ item }: Props) => {
  return <div>{item}</div>;
};
Typescript
  1. 모든 파일은 TypeScript로 작성되어야 하며, 타입 선언은 명시적이게 한다.
  2. any는 가급적 사용하지 않는다.
function calculateTotal(price: number, quantity: number): Props {
  return price * quantity;
}
Styled Components

반복되는 태그는 Styled Components를 사용하여 컴포넌트별로 스타일링할 때, 컴포넌트와 스타일이 함께 정의되어야 한다.

import styled from 'styled-components';

const Button = styled.button`};
  font-size: 1rem;
  padding: 0.5rem 1rem;
  border: 2px solid blue;
  border-radius: 4px;
`;

export default Button;
Tailwind CSS

반복되지 않는 태그는 가능하다면 Tailwind CSS를 사용한다.

// 예시: Tailwind CSS 클래스 사용
<div className="flex justify-center items-center bg-gray-200 p-4">
  <p className="text-lg font-bold text-blue-500">Welcome!</p>
</div>

Top

📂서비스 아키텍처

📈시퀀스 다이어그램

회원가입 시퀀스

signup

휴대폰 본인인증 시퀀스

계좌 본인인증 시퀀스

로그인 시퀀스

모임 생성 및 참여 시퀀스

결제 참여자 선택 시퀀스

결제 및 정산 시퀀스

Top

📜프로젝트 산출물

요구사항 명세서

)

기능 명세서

API 명세서

Figma

ERD

🙋팀원

류지수(팀장)
고석주
김준수
이성목
함승찬
황재언

@onassis793

@hgoa2000

@pittuarez

@CocoisCat

@head0618

@hju753

Top

About

[삼성전자 우수상 1등]모임을 위한 자동 정산 페이 시스템

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 62.9%
  • Java 35.8%
  • Other 1.3%