**PBP-CS 약관 처리**

24.05 변경약관 정리

!!! info
    계좌개설 "로보어드바이저 투자일임계약(비대면) 약관" 변경되고
    동의 내용은 투자일임계약 약관 동의 + 투자일임계약서 + 성과수수료 동의서
    약관파일명 : (콴텍투자일임주식회사)+비대면+투자일임계약+약관+개정(시행_20240808)_수정요청사항반영최종(배포용)_240624
    전자서명 필요하고 필수임.

!!! info
    전략투자에 3개 변경 및 추가 사항이 있음

    **1. 로보어드바이저 투자일임계약(비대면) 약관**
    > 1. 동의 내용은 투자일임계약 약관 동의 + 투자일임계약서 + 성과수수료 동의서
    > 2. 약관파일명 : (콴텍투자일임주식회사)+비대면+투자일임계약+약관+개정(시행_20240808)_수정요청사항반영최종(배포용)_240624

    > 3. 전자서명 필요하고 필수임 이건 변경 사항임


    <br />

    **2. 성과수수료 합의서**
    > 1. 동의 내용은 성과수수료 합의서

    > 2. 파일명 : 성과수수료 합의서_240624

    > 3. 전자서명 필요하고 필수이며 이건 추가 사항임

    <br />

    **3. 계좌 입·출고 제한 동의서**
    > 1. 동의 내용은 2개 있음. 
    <br /> 계좌 입출고 제한 동의, 복수의 로보어드바이저 투자 비중 유지 사전 동의 

    > 2. 계좌 입고 및 출고 제한 동의서, 복수의 로보어드바이저 투자 비중 유지 사전 동의서_240624

    > 3. 동의여부 필요하고 둘다 필수임 추가 사항임

!!!
    **scenario**
    cs에 로그인해서 들어갔을때 약관에 대해서 조회를 하고
    약관에 대한 추가동의를 받는다.
    $$ 왕호's Say : 동의 미동의를 사용자가 바꿀 수 있는가? 지금은 안되니까 안보여준다. $$

    > 1. 로그인해서 들어갔을때의 시점?

### process1

1. master로 부터 terms-and-conditions 브랜치 생성
2. /login?sccoFntd=270로 접속하여 회원가입
3. api오류 `/terms/member`  --> 일치하는 약관내역이 없습니다.

> 엥? 왜 일치하는 약관이 없지???? 뭐지? `/terms/member`는 따로 받는 파라미터가 없다!

그런데 왜?
<kbd><http://localhost:3200/login?ref=/&sccofnstcd=270>
간단하게 sccofnstcd 파라미터코드를 잘못알았던 것이었다.
</kbd>

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. <kbd>StrategyDetail.tsx</kbd> --> <kbd>InvestProcess.tsx</kbd> --> <kbd>PreInvestTask.tsx</kbd> --> <kbd>SelectBankAccount.tsx</kbd>

<kbd>PreInvestTask.tsx</kbd> 이곳에서 index값을 기준으로 <kbd>SelectBankAccount.tsx</kbd> or <kbd>DivideInvestAmount.tsx</kbd> 이동함

index = 1 ---> <kbd>SelectBankAccount.tsx</kbd><br />
index = 2 ---> <kbd>DivideInvestAmount.tsx</kbd>

<kbd>SelectBankAccount.tsx</kbd> 에서 계좌가 없으면

![스크린샷 2024-08-20 130351.png](스크린샷%202024-08-20%20130351.png)

위와 같은 화면 나옴...

5. <kbd>src/sample/sample.ts</kbd> 생성하여 아래와 같은 샘플 정보 만듬

```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 미동의)
  }
];


```

위의 코드를 <kbd>SelectBankAccount.tsx</kbd>에서

**원본**

```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[]);
    });
  };
```

<br><br>

**변경**

```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[]);
      });
    }
  };
```

위와 같이 변경함.
그러면 이후 프로세스를 통과 시킬 수 있음.

![스크린샷 2024-08-20 135312.png](스크린샷%202024-08-20%20135312.png)
![스크린샷 2024-08-20 135444.png](스크린샷%202024-08-20%20135444.png)
![스크린샷 2024-08-20 135557.png](스크린샷%202024-08-20%20135557.png)

<br><br><br><br>

### 위와 같은 정상 프로세스로 나옴

<br><br>

![스크린샷 2024-08-20 135720.png](스크린샷%202024-08-20%20135720.png)

<font color="red">최종적으로 투자 설명서 및 계약서 확인이 가능한 부분까지 나옴
</font>

처음 로그인 시 [내 자산]으로 넘어가는데 위 부분을 처리하기 위해 또! 샘플데이터를 만듬. 위치는 <kbd>sample.ts</kbd>

```javascript
export const IBankAccountSample: IBankAccount = {
  profitAndLoss: 1500.75,
  profitAndLossRate: 7.5,
  investableAmount: 10000.0,
  recomPortfolioJoinYn: 'Y',
  accountList: [
    {
      accountNo: '1234567890',
      accountName: 'My Savings Account',
      sccoFnstCd: 'SC001',
      securitiesName: 'ABC Securities',
      accountType: 'Savings',
      accountTypeNm: 'Savings Account',
      accountInvestableAmount: 5000.5,
      accountJoinDate: '2022-01-15',
      pbId: 'PB1234',
      withAgree: 'Y',
      accountJourneyStatus: 'Active'
    },
    {
      accountNo: '0987654321',
      accountName: 'Investment Account',
      sccoFnstCd: 'SC002',
      securitiesName: 'XYZ Securities',
      accountType: 'Investment',
      accountTypeNm: 'Investment Account',
      accountInvestableAmount: 3000.0,
      accountJoinDate: '2023-03-10',
      accountJourneyStatus: 'Pending'
    },
    {
      accountNo: '1122334455',
      accountName: 'Retirement Account',
      sccoFnstCd: 'SC003',
      securitiesName: 'QRS Securities',
      accountType: 'Retirement',
      accountTypeNm: 'Retirement Account',
      accountInvestableAmount: 2000.0,
      accountJoinDate: '2021-07-20',
      withAgree: 'N',
      accountJourneyStatus: 'Closed'
    }
  ]
};
```

위의 샘플데이터를 <kbd>useBankAccount.ts</kbd>에 넣음
코드는 아래와 같음

변경전

```javascript

const getList = useCallback(() => {
    if (userInfo) {
        getAccountList({
          customerId: userInfo.userId, // ! 이거 나중에 recoil로 빼서 와주세요.
          sccoFnstCd: getCompanyInfo().companyCode || '' // ! 얘도 마찬가지로 아마 api호출할 때 env꺼 쓸 겁니다.
        }).then((result) => {
          if (result.accountList === undefined) {
            setIsLoading(false);
            return;
          }
          setInvestmentStatus(result);
        });
      }
  }, [userInfo]);

```

<br><br>

변경후

```javascript
const getList = useCallback(() => {
    if (userInfo) {
      // 24-08-20 로컬 개발&테스트용 샘플데이터
      if (process.env.NODE_ENV === 'development') {
        setInvestmentStatus(IBankAccountSample);
      } else {
        getAccountList({
          customerId: userInfo.userId, // ! 이거 나중에 recoil로 빼서 와주세요.
          sccoFnstCd: getCompanyInfo().companyCode || '' // ! 얘도 마찬가지로 아마 api호출할 때 env꺼 쓸 겁니다.
        }).then((result) => {
          if (result.accountList === undefined) {
            setIsLoading(false);
            return;
          }
          setInvestmentStatus(result);
        });
      }
    }
  }, [userInfo]);

```

로그인하고 내자산에서 가입한 포트폴리오등을 출력하기 위해서 샘플데이터 또 만듬!
위치는 역시 <kbd>sample.ts</kbd>

```javascript
export const IBankAccountSample: IBankAccount = {
  profitAndLoss: 1500.75,
  profitAndLossRate: 7.5,
  investableAmount: 10000.0,
  recomPortfolioJoinYn: 'Y',
  accountList: [
    {
      accountNo: '1234567890',
      accountName: 'My Savings Account',
      sccoFnstCd: 'SC001',
      securitiesName: 'ABC Securities',
      accountType: 'Savings',
      accountTypeNm: 'Savings Account',
      accountInvestableAmount: 5000.5,
      accountJoinDate: '2022-01-15',
      pbId: 'PB1234',
      withAgree: 'Y',
      accountJourneyStatus: 'Active'
    },
    {
      accountNo: '0987654321',
      accountName: 'Investment Account',
      sccoFnstCd: 'SC002',
      securitiesName: 'XYZ Securities',
      accountType: 'Investment',
      accountTypeNm: 'Investment Account',
      accountInvestableAmount: 3000.0,
      accountJoinDate: '2023-03-10',
      accountJourneyStatus: 'Pending'
    },
    {
      accountNo: '1122334455',
      accountName: 'Retirement Account',
      sccoFnstCd: 'SC003',
      securitiesName: 'QRS Securities',
      accountType: 'Retirement',
      accountTypeNm: 'Retirement Account',
      accountInvestableAmount: 2000.0,
      accountJoinDate: '2021-07-20',
      withAgree: 'N',
      accountJourneyStatus: 'Closed'
    }
  ]
};

export const assetsByAccountSample: IAssetsAccount = {
  investableAmount: 15000.0,
  accountLinkedYn: 'Y',
  investingYn: 'Y',
  terminatedYn: 'N',
  investAmount: 10000.0,
  profitAndLoassAmount: 500.75,
  valuationAmount: 15500.75,
  befDtCompPl: 400.5,
  befDtCompRate: 2.75,
  dayProfitRateChart: [
    {x: '2024-08-01', y: 1.25},
    {x: '2024-08-02', y: 1.5},
    {x: '2024-08-03', y: 1.75},
    {x: '2024-08-04', y: 1.6},
    {x: '2024-08-05', y: 2.0}
  ],
  portfolioList: [
    {
      portfolioId: 'PF001',
      portfolioName: 'Growth Strategy',
      title: 'High Growth Portfolio',
      strategyCount: 3,
      valuationAmount: 8000.0,
      profitRate: 5.5,
      investType: 'Equity',
      status: 'Active',
      weight: 60
    },
    {
      portfolioId: 'PF002',
      portfolioName: 'Balanced Strategy',
      title: 'Balanced Risk Portfolio',
      strategyCount: 2,
      valuationAmount: 5500.75,
      profitRate: 3.25,
      investType: 'Mixed',
      status: 'Active',
      weight: 30
    },
    {
      portfolioId: 'PF003',
      portfolioName: 'Conservative Strategy',
      title: 'Low Risk Portfolio',
      strategyCount: 1,
      valuationAmount: 2000.0,
      profitRate: 1.75,
      investType: 'Bonds',
      status: 'Pending',
      weight: 10
    }
  ]
};


```

<br><br>

변경전

```javascript

 // 선택된 계좌 투자 정보 조회 api 함수
  const getAccount = useCallback(() => {
    if (selectedAcccount) {
      const tempAccount: IAssetsAccountPrams = {
        accountNo: selectedAcccount.accountNo
      };

      getAccountByAssets(tempAccount).then((account) => {
        setIsLoading(false);
        if (account.investableAmount === undefined) return;
        setAccount(account);
      });
    }
  }, [selectedAcccount, setIsLoading]);

```

<br><br>

변경후

```javascript
 // 선택된 계좌 투자 정보 조회 api 함수
  // 24-08-20 로컬 개발&테스트용 샘플데이터
  const getAccount = useCallback(() => {
    if (selectedAcccount) {
      const tempAccount: IAssetsAccountPrams = {
        accountNo: selectedAcccount.accountNo
      };
      if (process.env.NODE_ENV === 'development') {
        setAccount(assetsByAccountSample);
      } else {
        getAccountByAssets(tempAccount).then((account) => {
          setIsLoading(false);
          if (account.investableAmount === undefined) return;
          setAccount(account);
        });
      }
    }
  }, [selectedAcccount, setIsLoading]);

```

6. ## 여기부터 필요한 내용

투자 설명서 및 계약서 페이지는 <kbd>ContractDocTask.tsx</kbd> --> <kbd>ContractDocList.tsx</kbd> 이며
<kbd>ContractDocTask.tsx</kbd>에서 `getDescriptionTerm (/terms/product/description)` // `getContractTerm (/terms/product/contract)`를 호출 함

<br><br><br>

`getDescriptionTerm (/terms/product/description)`<br>

```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;
}
```

<br><br><br>

`getContractTerm (/terms/product/contract)`<br>

```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;
}

```

[<img title="" src="투자설명서%20및%20계약서%20목록.jpg" alt="투자설명서 및 계약서 목록.jpg" style="zoom:100%;">](투자설명서%20및%20계약서%20목록.jpg)

### 별내 각종 계약, 약관, 페이지 URL

<https://qm.quantec.co.kr:9100/policy/policy.html>
<https://qm.quantec.co.kr:9100/agreement/agreement.html>
<https://qm.quantec.co.kr:9100/privacy/privacy_01.html>
<https://qm.quantec.co.kr:9100/privacy/privacy_02.html>
<https://qm.quantec.co.kr:9100/marketing/marketing.html>
<https://qm.quantec.co.kr:9100/agreement/agreement.html>
<https://qm.quantec.co.kr:9100/policy/policy.html>
<https://qm.quantec.co.kr:9100/privacy/privacy_03.html>
<https://qm.quantec.co.kr:9100/marketing/marketing.html>

로보어드바이저 투자일임계약(비대면) 약관
<https://qm.quantec.co.kr:9100/productContract>

<https://qm.quantec.co.kr:9100/security/common_201117.html>
<https://qm.quantec.co.kr:9100/security/skt_01_220101.html>
<https://qm.quantec.co.kr:9100/security/skt_02_220101.html>
<https://qm.quantec.co.kr:9100/security/skt_03_220101.html>
<https://qm.quantec.co.kr:9100/security/common_201117.html>
<https://qm.quantec.co.kr:9100/security/kt_01_201117.html>
<https://qm.quantec.co.kr:9100/security/kt_02_211130.html>
<https://qm.quantec.co.kr:9100/security/kt_03_211130.html>
<https://qm.quantec.co.kr:9100/security/common_201117.html>
<https://qm.quantec.co.kr:9100/security/lg_01_211130.html>
<https://qm.quantec.co.kr:9100/security/lg_02_211130.html>
<https://qm.quantec.co.kr:9100/security/lg_03_211130.html>
<https://qm.quantec.co.kr:9100/security/common_201117.html>
<https://qm.quantec.co.kr:9100/security/skt_01_220101.html>
<https://qm.quantec.co.kr:9100/security/skt_02_220101.html>
<https://qm.quantec.co.kr:9100/security/skt_03_220101.html>
<https://qm.quantec.co.kr:9100/security/mvno_211130.html>
<https://qm.quantec.co.kr:9100/security/common_201117.html>
<https://qm.quantec.co.kr:9100/security/kt_01_201117.html>
<https://qm.quantec.co.kr:9100/security/kt_02_211130.html>
<https://qm.quantec.co.kr:9100/security/kt_03_211130.html>
<https://qm.quantec.co.kr:9100/security/mvno_211130.html>
<https://qm.quantec.co.kr:9100/security/common_201117.html>
<https://qm.quantec.co.kr:9100/security/lg_01_211130.html>
<https://qm.quantec.co.kr:9100/security/lg_02_211130.html>
<https://qm.quantec.co.kr:9100/security/lg_03_211130.html>
<https://qm.quantec.co.kr:9100/security/mvno_211130.html>
<https://qm.quantec.co.kr:9100/agreement/agreement.html>
<https://qm.quantec.co.kr:9100/policy/policy.html>
<https://qm.quantec.co.kr:9100/privacy/privacy_03.html>
<https://qm.quantec.co.kr:9100/marketing/marketing.html>

### 약관 변경 사항 참조 파일 24-08-23

1. [계좌 입고 및 출고 제한 동의서, 복수의 로보어드바이저 투자 비중 유지 사전 동의서_240624.docx](<계좌 입고 및 출고 제한 동의서, 복수의 로보어드바이저 투자 비중 유지 사전 동의서_240624.docx>)
2. [로보어드바이저 투자일임계약.docx](<로보어드바이저 투자일임계약.docx>)
3. [변경약관 정리_240624.xlsx](<변경약관 정리_240624.xlsx>)
4. [비대면 투자일임계약서.docx](<비대면 투자일임계약서.docx>)
5. [성과수수료 합의서_240624.docx](<성과수수료 합의서_240624.docx>)

<br>
<br>

# 업무1

1. 

## 참조

<https://github.com/kumard3/react-grapesJS-example>

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`




### 2024-08-23

#### 변경약관동의 (2024-05)

##### [AM]

> 2024-05 기획 초안 --> 2024-06-28 기획 완료 --> 2024-08-06 내가 받음

> ---
>
> ##### 단어 정리
>
> 1. **약관**: "약관"이란 그 명칭이나 형태 또는 범위에 상관없이 계약의 한쪽 다사자가 여러명의 상대방과 계약을 체결하기 위하여 일정한 형식으로 미리 마련한 계약의 내용. 다수인을 상대로 동종의 거래를 반복하는 경우에 그 거래를 위하여 미리 작성해 놓은 정형적인 계약조건, 사업자 측에서 다수의 소비자들과 같은 계약을 반복하는 경우 약관을 통한 상행위의 편의성을 가지고자 하는 계약 방식
> 2. **계약서**: 계약한다는 법적 증거와 구체적인 계약 내용을 남기기 위해 작성하며 계약을 맺는 양자가 동의한다는 뜻에서 [사인, 도장, 지장] 등이 들어간다. 그리고 계약서는 반드시 계약에 참여하는 자의 수 만큼 직접 작성해 분쟁 발생시 계약의 증거로 활용함.
>
>---

<Br>
<Br>
1. PBP-CS는 기본적으로 포트폴리오 기준
2. 현재 오픈되어 있는 페이지 <Br>1) HOME <Br>2) Market(마켓) <Br>3) My Asset(내자산) <Br>4) ETC(더보기)
3. Market 내부에 [전략 마켓], [포트폴리오 마켓]이 있지만 현재는 [전략 마켓]만 오픈되어 있음 ([포트폴리오 마켓]은 display:none 처리 되어 있음)
4. 콴텍의 APP은 전략이 기준임
5. 콴텍 APP과 콴텍 PBP-CS의 데이터 구조 및 프로세스는 상품의 기준이 포트폴리오인지 전략인지에 따라 달라진다. 포트폴리오를 기준으로 하면 포트폴리오 관리에 초점을 맞추고, 전략을 기준으로 하면 투자 전략에 따라 데이터 구조와 프로세스가 구성된다.
6. 요번 약관 변경에 서도 이 갭에 대한 차이가 나타났다.

<br><br>

#### [오후 2시 회의 말할 내용]

> ----
>
> - 회의의 목적은 PBP-CS와 콴텍 앱의 차이에 따른 내용 정리를 위함임.
> 그리고  PBP-CS 작업자인 내가 회의 참여 및 설명을 듣지 못해서 이해도가 낮은 상황인것에 대해서 양해를 구하는 바임
>
> ----
>

> ---
>
> ### 기획 내용 분석
>
> 1. 05-03) 신규계약인 경우 전체 약관 모두 필수 동의 할 수 밖에 없음, 계약갱신인 경우에도 해당 약관 및 계약서로 진행 -- 전략별로 각각 동의의자 관리되어야함. ==> 이 부분은 PBP-CS가 포트폴리오가 기준어도 계약은 각각의 전략으로 관리되기 때문에 괜찮을지도?
> 2. 05-14) 로보어드바이저 투자일임계약서(비대면)이것에 대해서 로보어드바이저 투자일임계약서라는것이 너무 많아서 내가 혼동이옴 설명이 필요함.
> 3. 05-14) "투자문서"메뉴 추가라는 부분은 기존 히스토리 관리인것인지? 이것은 이미 PBP-CS에 있음. 앱은 안되어 있었는지?
> 4. 05-28) [문자]계약서 등 변경 안내 -- SMS 추가 이 부분은 PBP-CS에서 안되는걸로 알고 있음. 왜냐? PBP-CS가 각 금융사 MTS에 입점되어 있는 경우 고객 정보를 받아 올 수 없기 때문임.
>
> ---

> ---
>
> ### 개발팀 리뷰 후 수정 기획 내용 분석 (06-27)
>
> 1. CTA 버튼 [동의함]으로 수정이라는 것은? CTA는 Click to Action일것인데 이것은 그러면 페이지 아래로 내려가는게 아닌 그냥 동의하기로 해서 넘기겠다는 뜻? 전에 이춘선부장님이 이야기했던 그 내용? 맞쥬?
> 2. 서비스 진입 시 약관동의 팝업 추가 ==> 이건 하면 될꺼 같고...
> 3. [다음] 버튼 설명 수정이란?
>
> - 약관목록 전체 체크 후 [다음] 버튼 활성화에 대해서
> - 이제는 목록에서 고객이 직접 체크할 수 있게 만들어야함. (상세내요확인하지 않아도 체크가 가능하다.)
> - 각 설명서 및 약관 큐버튼 Tap하여 상세로 이동하여 직접 [동의함] 버튼 Tap시 목록에 체크되어 있음? 상세로 이동하여 [동의함] 버튼 클릭하면 목록에 체크되는건 오케이... 그런데? 큐버튼이란?  
> - 기존 체크되어 있는 설명서 및 약관은 해제도 가능하다? 그러면 [다음] 버튼이 활성화 되지 않는다. 이것은?
> - "투자일임계약서" --> 로보어드바이저 투자일임 계약서(비대면)"으로 약관명 변경된다.
>
> 4. 포트폴리오 가입 시 전자서명에 대해서 휴대폰 본인인증으로 한다.
> 5. 계약서, 합의서, 약관
> 6. <font color="red">**증권사에 들어가는 것이기 때문에 목록에서 체크 할 수 없다. 그리고 CTA 방식으로 할 수 없다. 무조건 다 읽고 넘어가야 한다.**</font>
>
> ---

> ----
>
> ### to 기획
>
> 1. 현재 PBP-CS는 각 금융사 MTS에 thirdparty로 들어가는 서비스가 맞는지? 아니면 독립적으로도 사용하는 서비스가 되어야 하는지?
> 2. MTS의 thirdparty로 접근되는 서비스라면 내가 알고 있는 선에서는 약관 동의 및 절차를 줄이기 위해서 입점한것으로 알고 있다. 입점 이유에 반대되는 프로세스가 되는 것이 아닌지?
> 3. 독립적으로 사용하는 서비스가 되어야 한다면 APP과 유사하게 가는게 맞다.
> 4. "둘다" 라는 상황이라면 위 2개를 적용하여 분기 처리 하는게 맞다.
> 5. 앱의 전략 기준과 다르게 포트폴리오 기준이기 때문에 약관 리스트에서 약관 상세를 들어가면 또 collapse 형식으로 펼침 메뉴가 있다는점. (물론 이것은 상세에 들어갈때 펼침 메뉴가 1개라면 강제로 열어놓게 할 수 있음.)
> 6. 로그인 이후 화면에 들어갈때 변경된 약관에 대해서 동의를 재요청 하는 과정이 전략을 기준으로 가야 하는지 아니면 포트폴리오로 가야하는지 이야기 해볼 필요가 있다.
> 7. 약관의 변경으로 인한 이라는 것은 약관의 내용 변경이 변경 되었을때 적용해야 하는것인지
> 8. 포트폴리오 구조상 포트폴리오를 가입하면 포트폴리오에 포함된 전략의 갯수만큼 설명서, 계약서, 약관, 합의서, 동의서가 나오게 된다. 즉 포트폴리오에 있는 전략이 3개라면 15개의 문서를 열람해야하는 문제 발생
>
> ---

> ---
>
> ### to 컴플
>
> 1. 약관 내용이 콴텍 앱과 다른 점이 있을것임.
> 2. 이 내용은 문서로 이춘선 부장님에게 전달하였고 전달 받았을 것으로 생각됨.
> 3. 약관 내용중 하나증권이 요청하여 추가된 부분이 있음.
> 4. 위 부분과 콴텍이 제공하는 약관과 차이가 있음 이것을 확인해야 함.
> 5. 그리고 현재 PBP-CS에서 지금 보내준 약관을 제공하는게 맞는지. 기존 하나증권이 요청한 부분과 충돌이 나는 부분이 없는지?
> 6. 최종적으로 지금 계약서 및 약관에 대해서 내가 이해도가 떨어져서 설명을 요구하는것임
>
> ---

<br><br>


### 약관 변경 사항 (24-08-23 11:30)
>
> 정BJ: 로그인시 팝업으로 뜨는 변경약관 동의는 이제 "필수"이다 이걸 동의하지 않는다면 서비스를 사용할 수 없다.