TIL) 스파르타 개발일지 23-02-20

스테이징 됐을 때 가지고 있는 정보 노출[금융상품 명, 은행 명, 이자율, 최대금리]

 

상품이 선택되었을 때 해당 상품의 정보를 가지고 원하는 정보를 조회하여, 뿌려주는 코드를 구현했다.

 

A-1을 통해서 A에 접근하고, 원하는 정보인 A-2를 다시 가져오는 과정이... 꽤나 순탄치는 않았다.

 

이렇게 하는 이유는 API가 분할되어 있기 때문이다... 금감원... 왜 그랬어...

    <SelectedProducts>
                  {/* //* 배열의 첫번째 요소에 selectedProductId 값이 있을 때만 실행 */}
                  {selectedProductIds[0] === "" ? (
                    <BeforeSelectedContainer>
                      <p>비교 박스에 자리가 남았어요.</p>
                      <img
                        src={require("../../assets/UnStagingImg.png")}
                        alt="이미지"
                      />
                    </BeforeSelectedContainer>
                  ) : (
                    <div style={{ display: "flex" }}>
                      <div>
                        <StyledImg
                          src={logoLists[selectedProductIds[4].fin_co_no]}
                          alt="로고"
                        />
                      </div>

                      <StagingWrap>
                        <div>
                          <StagingProductsName>
                            <p
                              style={{
                                fontSize: "22px",
                                color: "#000",
                                fontWeight: "bold",
                              }}
                            >
                              {products.find(
                                (product) =>
                                  product.id === selectedProductIds[0]
                              )?.fin_prdt_nm ||
                                savingbaseList.find(
                                  (product) =>
                                    product.id === selectedProductIds[0]
                                )?.fin_prdt_nm}
                            </p>
                          </StagingProductsName>
                          <div>
                            <StagingBankName>
                              {products.find(
                                (product) =>
                                  product.id === selectedProductIds[0]
                              )?.kor_co_nm ||
                                savingbaseList.find(
                                  (product) =>
                                    product.id === selectedProductIds[0]
                                )?.kor_co_nm}
                            </StagingBankName>
                          </div>
                        </div>
                        {/* //* intr_rate, intr_rate2 값 출력 */}
                        <div
                          style={{
                            fontSize: "19px",
                            color: "#6A24FF",
                            fontWeight: "bold",
                          }}
                        >
                          <div>이자율: {selectedProductIds[1]}</div>
                          <div>최고금리: {selectedProductIds[2]}</div>
                        </div>
                      </StagingWrap>
                      <StagingCancel onClick={() => handleProductsCancel()}>
                        X
                      </StagingCancel>
                    </div>
                  )}
                </SelectedProducts>