**PBP-CS 약관 처리**
24.05 변경약관 정리
!!! info
계좌개설 "로보어드바이저 투자일임계약(비대면) 약관" 변경되고
동의 내용은 투자일임계약 약관 동의 + 투자일임계약서 + 성과수수료 동의서
약관파일명 : (콴텍투자일임주식회사)+비대면+투자일임계약+약관+개정(시행_20240808)_수정요청사항반영최종(배포용)_240624
전자서명 필요하고 필수임.
!!! info
전략투자에 3개 변경 및 추가 사항이 있음
**1. 로보어드바이저 투자일임계약(비대면) 약관**
> 1. 동의 내용은 투자일임계약 약관 동의 + 투자일임계약서 + 성과수수료 동의서
> 2. 약관파일명 : (콴텍투자일임주식회사)+비대면+투자일임계약+약관+개정(시행_20240808)_수정요청사항반영최종(배포용)_240624
> 3. 전자서명 필요하고 필수임 이건 변경 사항임
**2. 성과수수료 합의서**
> 1. 동의 내용은 성과수수료 합의서
> 2. 파일명 : 성과수수료 합의서_240624
> 3. 전자서명 필요하고 필수이며 이건 추가 사항임
**3. 계좌 입·출고 제한 동의서**
> 1. 동의 내용은 2개 있음.
계좌 입출고 제한 동의, 복수의 로보어드바이저 투자 비중 유지 사전 동의
> 2. 계좌 입고 및 출고 제한 동의서, 복수의 로보어드바이저 투자 비중 유지 사전 동의서_240624
> 3. 동의여부 필요하고 둘다 필수임 추가 사항임
!!!
**scenario**
cs에 로그인해서 들어갔을때 약관에 대해서 조회를 하고
약관에 대한 추가동의를 받는다.
$$ 왕호's Say : 동의 미동의를 사용자가 바꿀 수 있는가? 지금은 안되니까 안보여준다. $$
> 1. 로그인해서 들어갔을때의 시점?
### process1
1. master로 부터 terms-and-conditions 브랜치 생성
2. /login?sccoFntd=270로 접속하여 회원가입
3. api오류 `/terms/member` --> 일치하는 약관내역이 없습니다.
> 엥? 왜 일치하는 약관이 없지???? 뭐지? `/terms/member`는 따로 받는 파라미터가 없다!
그런데 왜?
간단하게 sccofnstcd 파라미터코드를 잘못알았던 것이었다.
CS 로그인 정보
```json
{
"origin": "http://localhost:3200",
"op": "reg",
"keyid": "3a300e5e28964d26bb669327329ec6c1",
"uid": "U2FsdGVkX184/CBWsVk4tA9Z3cVgGt/LKJEKTGjN7TY=",
"fp": "a445b86d7eda92af54e050bcc1b9b06a",
"alg": "rsa",
"pub": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAsxSUBdoxZrWEodFSRLZp0hlVYKKkKhmuX/6X5RvLvej1SUetflKP6faNb+h2fHv7q7nX/t04yobRXbkz9jeGEo256VGmG8c1qyumzeXJMsPm+Xia2pur/a1BWP+xsvaOwluKb+PNF1S/pAjyX2lKFh4M5E8l1Onkdj9UglgUjiR1AU/7iUQI2Fh5y//lUO3odsxbU4/GcTR6TEIhLUeUasOUbDQX8Wja4RFMStJb2H7DpOc1hGLjT0BmqiG019WMflmNhax/VYmsSY/UuZhJQ5AYkNLi9t8Rh6MqVtIKj5zyVvcFNS8F8Suj0s4hbSKW5nh6zIv86m9EIFFMERMMRwIDAQAB"
}
```
```json
keyValue: {"keyid":"3a300e5e28964d26bb669327329ec6c1","alg":"rsa","prikey":{"ciphertext":"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","salt":"twYKNXa3+zCfVq69y7pKRA=="},"fp":"a445b86d7eda92af54e050bcc1b9b06a","multi":"y","type":"pin"}
11:27:17.059
```
### process2
1. 로그인 하고 메인으로 갔을때 API오류... `/account/stats` 외부 통신과의 오류 발생임, '종합계좌대체번호필수 입력' 이건 운영 아니면 오류 나는건 당연함...
> 개발계와 local에서 오류 안나게 처리 해야할듯.
### process3
1. 마켓 > 전략 마켓 > 전략 클릭 > 전략 상세 > 가입하기
2. `/account/info` 이것도 하나증권 오류... 대체번호...
3. 개발을 위해서 이 부분을 pass 시키는 과정 필요하겠음.
4. StrategyDetail.tsx --> InvestProcess.tsx --> PreInvestTask.tsx --> SelectBankAccount.tsx
PreInvestTask.tsx 이곳에서 index값을 기준으로 SelectBankAccount.tsx or DivideInvestAmount.tsx 이동함
index = 1 ---> SelectBankAccount.tsx
index = 2 ---> DivideInvestAmount.tsx
SelectBankAccount.tsx 에서 계좌가 없으면
위와 같은 화면 나옴...
5. src/sample/sample.ts 생성하여 아래와 같은 샘플 정보 만듬
```javascript
export const sampleAccountInfo: IAccountInfo[] = [
{
userId: 'user123', // required
typeDiv: '01', // required account/info API에서 필수값
customerId: 'cust12345',
sccoFnstCd: '1001', // required account/info API에서 필수값
ci: 'ci_value_123456',
role: 'admin',
sccoFnstName: 'Sample Bank', // required
accountNo: '1234567890', // required
balance: 100000.5, // required
accountTypeCode: '02', // required
partner: 1,
rate: 2.5,
date: '2024-08-20',
investableAmount: 5000000000,
type: 1,
nickName: 'My Investment Account',
requestStatus: 'Pending',
jntlAmt: '100000',
jnAmt: '50000',
newjndy: '2024-08-01',
cprtyacNo: 'CP123456789',
cprtyacNm: 'Counterparty Name',
cprtyognNm: 'Counterparty Organization',
cnclrsnclsfcdNm: 'Cancellation Reason',
tyrpymtAmt: '20000',
rmdrAmt: '30000',
lmtAmt: '1000000',
rmdrlmtAmt: '700000',
tllmtAmt: '500000',
requestDate: '2024-08-19',
joinDvsn: '02',
pbUid: 'PB12345',
withAgree: 'Y' // 출금이체동의여부 (Y 동의, N 미동의)
}
];
```
위의 코드를 SelectBankAccount.tsx에서
**원본**
```javascript
const getAccountList = () => {
setIsLoading(true);
// 마켓에서 넘어온 경우 account 미존재
// 파라미터로 넘어온 계좌정보 account가 없으면, API 조회하여 accountInfoList 세팅
getAccountInfo({
customerId: recoilUserInfo?.userId,
sccoFnstCd: companyCode || '',
typeDiv: '1'
}).then((info) => {
setIsLoading(false);
if (info.length === undefined) return;
setAccountInfoList(info as unknown as IAccountInfo[]);
});
};
```
**변경**
```javascript
const getAccountList = () => {
setIsLoading(true);
// 마켓에서 넘어온 경우 account 미존재
// 파라미터로 넘어온 계좌정보 account가 없으면, API 조회하여 accountInfoList 세팅
// 24-08-20 로컬 개발&테스트용 샘플데이터
if (process.env.NODE_ENV === 'development') {
setIsLoading(false);
setAccountInfoList(sampleAccountInfo as unknown as IAccountInfo[]);
} else {
getAccountInfo({
customerId: recoilUserInfo?.userId,
sccoFnstCd: companyCode || '',
typeDiv: '1'
}).then((info) => {
setIsLoading(false);
if (info.length === undefined) return;
setAccountInfoList(info as unknown as IAccountInfo[]);
});
}
};
```
위와 같이 변경함.
그러면 이후 프로세스를 통과 시킬 수 있음.
### 위와 같은 정상 프로세스로 나옴
최종적으로 투자 설명서 및 계약서 확인이 가능한 부분까지 나옴
6. ## 여기부터 필요한 내용
투자 설명서 및 계약서 페이지는 ContractDocTask.tsx --> ContractDocList.tsx 이며
ContractDocTask.tsx에서 `getDescriptionTerm (/terms/product/description)` // `getContractTerm (/terms/product/contract)`를 호출 함
`getDescriptionTerm (/terms/product/description)`
```javascript
// 투자권유설명서 조회 파람
export interface IDescriptionTermParams {
portfolioId?: number;
strategyId?: string;
}
// 투자권유설명서/투자일임계약서 조회 결과
export interface IDescriptionTerm extends ITerms {
termsList: IStrategyTerms[];
}
export interface IPersonalTerm extends ITerms {
termsList: ITerms[];
}
export interface ITerms extends ITermsProps {
securityCompanyCode: string; // 증권 사 코드
termsDivisionCode: string;
sequence: number; // 증권사, 약관 시퀀스
sortOrder: number; // 정렬 순서
title: string; // 제목
applyDate: string; // 적용일자
termsUrl?: string; // 약관url
termsContent: string; // 약관내용
}
export interface IStrategyTerms {
strategyId: string;
strategyName: string;
description: string;
termsContent: string;
}
```
`getContractTerm (/terms/product/contract)`
```javascript
// 투자일임계약서 조회 파람
export interface IContractTermParams extends IDescriptionTermParams {
account: string;
buyDate: string;
type: string;
}
// 투자권유설명서/투자일임계약서 조회 결과
export interface IDescriptionTerm extends ITerms {
termsList: IStrategyTerms[];
}
export interface IPersonalTerm extends ITerms {
termsList: ITerms[];
}
export interface ITerms extends ITermsProps {
securityCompanyCode: string; // 증권 사 코드
termsDivisionCode: string;
sequence: number; // 증권사, 약관 시퀀스
sortOrder: number; // 정렬 순서
title: string; // 제목
applyDate: string; // 적용일자
termsUrl?: string; // 약관url
termsContent: string; // 약관내용
}
export interface IStrategyTerms {
strategyId: string;
strategyName: string;
description: string;
termsContent: string;
}
```
[
](투자설명서%20및%20계약서%20목록.jpg)
### 별내 각종 계약, 약관, 페이지 URL
로보어드바이저 투자일임계약(비대면) 약관
## 참조
gapsesjs로 만들어진 html을 사용하여 변경할것이다.
기존의 git 소스는 React Typescript로 되어 있음.
이걸 NextJS Typescript로 전환시킬 것임.
이에 따라서 세팅할 부분이 추가 됨
1. Next.js 설치
`npm install next react react-dom`
2. 프로젝트 구조 변경
Next.js는 기본적으로 pages 폴더를 사용하여 페이지 라우팅을 처리. 현재의 src 폴더 구조를 다음과 같이 변경하는 것이 좋음:
src/pages: 각 페이지에 해당하는 컴포넌트를 이 폴더에 넣습니다.
src/components: 공통으로 사용할 컴포넌트를 이 폴더에 넣습니다.
src/public: 정적 파일(이미지, 폰트 등)을 이 폴더에 넣습니다.
src/styles: 글로벌 스타일 파일을 이 폴더에 넣습니다.
example
```console
/src
/components
/pages
/api
index.tsx
/public
/styles
...
```
3. next.config.js 추가
```javascript
// next.config.js
module.exports = {
reactStrictMode: true,
};
```
4. 스크립트 수정
```json
// package.json
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
}
```
6. 기존 react-scripts 제거 `npm uninstall react-scripts`