투자 관리 서비스의 관리자 기능 구현 (👨‍👩‍👧‍👦 9팀)

pre-onboarding-7th-3-2-9

👑 권준	김경훈	김수정
@jun-05	@tirhande	@crystal993

송슬기	오나래	이창훈	전이진
@songseul	@NR0617	@anotheranotherhoon	@pongdang

✨ 배포 링크

배포 바로가기

로그인 ID / PASSWORD

1234@1234.com // 1234

newface@dco.com // newface123!

📝 목차

• 📰 프로젝트 설명
• 🛠️ Dev Tools
• 🖥 프로젝트 실행 방법

📰 프로젝트 설명

• 투자 관리 서비스의 관리자 기능 구현

🛠 Dev Tools

🖥 프로젝트 실행 방법

.env.local 환경변수 설정

# When deploying to production, set the NEXTAUTH_URL environment variable to the canonical URL of your site.
# example) http://localhost:3000
NEXTAUTH_URL={url}

# (SHA hash of the "options" object) in development, no default in production.
NEXTAUTH_SECRET={string}

# Create Secret Key
# You can quickly create a good value on the command line via this openssl command.
$ openssl rand -base64 32

Installation

# Repositorie Clone
git clone https://github.com/Wanted-07-team-9/pre-onboarding-7th-3-2-9.git

# npm 설치 진행
pre-onboarding-7th-3-2-9 % npm install

### Usage
# Local Dev Server 실행
pre-onboarding-7th-3-2-9 % npm run dev

# Local Dev Server 실행 (typescript 검사용)
pre-onboarding-7th-3-2-9 % npm run dev:ts

# Build
pre-onboarding-7th-3-2-9 % npm build

✏ 토의 내용 및 선정

🖍 1차 토의결과
🖍 2차 토의결과
🖍 3차 토의결과
🖍 4차 토의결과
🖍 5차 토의결과

💡 Assignment 목차

• 1️⃣ Assignment
• 2️⃣ Assignment
• 3️⃣ Assignment
• 4️⃣ Assignment
• 5️⃣ Assignment
• 6️⃣ Assignment

1️⃣ Assignment

1. 화면 구성
2. 레이아웃 구성
3. 메뉴 구성

⭐️⭐️⭐️⭐️⭐️

Header, Content, Footer, Sider 영역을 구분하여 진행하였습니다.

첨부된 sider.json 파일로 대시보드(준비중), 계좌 목록, 사용자(준비중), 로그아웃 메뉴로 구분하였습니다.

⭐️⭐️⭐️⭐️⭐️

2️⃣ Assignment

• 사용자 목록 (범위에서 제외)
• 계좌 목록
• • 표기 정보

고객명	브로커명	계좌번호	계좌 상태
계좌명	평가금액	입금금액	계좌활성여부	계좌개설일

⭐️⭐️⭐️⭐️⭐️

표기 정보를 Mui UI의 Table을 이용하여 구현하였으며,

고객명: users 데이터에서 id를 매칭하여 실제 이름 표시

브로커명: brokers array에서 코드값에 맞는 실제 증권사명 표시

계좌번호: 앞뒤 두글자 제외 * 표시 및 증권사 형식에 맞춘 계좌번호로 표시

평가금액: 원화로 표시하고, 입금금액 대비 평가금액이 플러스일경우 빨간색, 마이너스일경우 파란색으로 표시

⭐️⭐️⭐️⭐️⭐️

3️⃣ Assignment

• Sider 메뉴에서 현제 페이지에 해당하는 메뉴 하이라이트

⭐️⭐️⭐️⭐️⭐️

현재 페이지의 path와 href props값을 비교하여 표시

pre-onboarding-7th-3-2-9/src/components/blocks/ActiveLink.tsx

Lines 11 to 14 in 1949876

	const style = {
	color: router.route.replace('/[id]', '') === href ? '#f3f4f5' : '#69707b',
	textDecoration: 'none',
	};

⭐️⭐️⭐️⭐️⭐️

4️⃣ Assignment

• 새로고침해도 로그인 상태 및 화면 유지

⭐️⭐️⭐️⭐️⭐️

NextAuth.js를 사용하여 사용자 세션 관리 적용

pre-onboarding-7th-3-2-9/src/pages/api/auth/[...nextauth].ts

Lines 5 to 53 in 1949876

	export default NextAuth({
	providers: [
	CredentialsProvider({
	id: 'user-credential',
	name: 'Credential',
	type: 'credentials',
	credentials: {
	email: { label: 'email', type: 'email', placeholder: '이메일 주소' },
	password: { label: 'password', type: 'password' },
	},
	async authorize(credentials: Record<'email' | 'password', string>) {
	const { status, data } = await AxiosRequest.post('/login', {
	email: credentials.email,
	password: credentials.password,
	});
	if (status === 200 && data) {
	return data;
	}
	return null;
	},
	}),
	],
	jwt: {
	maxAge: 60 * 60,
	},
	session: {
	strategy: 'jwt',
	maxAge: 60 * 60,
	},
	callbacks: {
	jwt: ({ token, user }) => {
	if (user) {
	token.accessToken = user.accessToken;
	token.user = user.user;
	}
	return token;
	},
	session: ({ session, token }) => {
	session.accessToken = token.accessToken;
	session.user = token.user;
	return session;
	},
	},
	pages: {
	signIn: '/login',
	error: '/admin/error',
	},
	secret: process.env.NEXTAUTH_SECRET,
	});

⭐️⭐️⭐️⭐️⭐️

5️⃣ Assignment

• 계좌 리스트에서 계좌번호를 누르면 계좌상세 화면으로 이동

⭐️⭐️⭐️⭐️⭐️

테이블의 Row에 onClick 이벤트로 상세 페이지 이동

⭐️⭐️⭐️⭐️⭐️

6️⃣ Assignment

• 계좌 목록에서 각 계좌 상태별 필터링

⭐️⭐️⭐️⭐️⭐️

페이지의 query값과 Recoil을 사용하여 필터링을 관리하였습니다.

⭐️⭐️⭐️⭐️⭐️

🔒 팀 규칙

커밋 규칙

commit message 규칙

⭐ feat : 새로운 기능에 대한 커밋

🎨 ui : 새로운 CSS관련 디자인에 대한 커밋

🛠 fix : 버그 수정에 대한 커밋

🧱 build : 빌드 관련 파일 수정에 대한 커밋

👏 chore : 파일 이동, 파일명 수정, 변수 제거 등의 자잘한 수정에 대한 커밋

⚒ refactor : 코드 리팩토링에 대한 커밋

📝 style : 공백 제거와 같은, 코드 스타일 혹은 포맷 등에 관한 커밋

✏ docs : 문서 수정에 대한 커밋

💡 ci : CI관련 설정 수정에 대한 커밋

🚫 제목 끝에 마침표 금지 ⚠ 무엇을 했는지 명확하게 작성

🚫 제목 끝에 마침표 금지 ⚠ 무엇을 했는지 명확하게 작성

코딩 컨벤션 규칙

코딩 컨벤션

• 컴포넌트의 ID사용은 지양한다.
• react의 state는 여러개 사용시 최소 집합을 찾아 사용한다.
• 컴포넌트의 이벤트에서 불필요한 익명함수를 사용하지 않는다. (예시: 함수의 인자가 event 하나인 경우)
• 코드를 설명하는 주석은 가급적 사용하지 않는다.
• 상수는 영문 대문자 스네이크 표기법(Snake case)를 사용한다.(예시: SYMBOLIC_CONSTANTS)
• 반환 값이 불린인 함수는 'is'로 시작한다
• 반환 값의 유무를 이용하는 변수는 has로 시작한다
• const와 let은 사용 시점에 선언 및 할당한다.
• 함수는 사용 전에 선언해야 하며, 함수 선언문은 변수 선언문 다음에 오도록 한다.
• 이벤트 핸들러는 'on'으로 시작한다.
• 한 줄짜리 블록일 경우라도 {}를 생략하지 않으며 명확히 줄 바꿈 하여 사용한다.

Lint, Formatter 규칙

Prettier, ESLint 규칙

prettier

  printWidth: 100, // printWidth default 80 => 100 으로 변경
  singleQuote: true, // "" => ''
  arrowParens: 'avoid', // arrow function parameter가 하나일 경우 괄호 생략

ESLint

  printWidth: 100, // printWidth default 80 => 100 으로 변경
  singleQuote: true, // "" => ''
  arrowParens: 'avoid', // arrow function parameter가 하나일 경우 괄호 생략

📚 사용 Library

Lib List

공통 Lib

• eslint
• eslint-config-prettier
• husky
• prettier

production

• react-router-dom
• axios

dev

• tailwindcss