개발 기록 개발 기록

Project/외국인 관광객을 위한 카드 플랫폼

• [Spring Boot/React] 카드 발급시 중복된 카드 종류 신청 못하게 막기

  Project/외국인 관광객을 위한 카드 플랫폼 2024. 8. 27. 09:38

  - 이미 발급된 내역이 있는 카드 종류면 신청 못하게 하기 - 수정전 코드function Card1() { const [selectedCard, setSelectedCard] = useState(null); // 선택된 카드 저장 const [cards, setCards] = useState([]); // API에서 가져온 카드 목록을 저장 const [isLoading, setIsLoading] = useState(true); // 데이터 로딩 상태를 관리 const [memberId, setMemberId] = useState(''); // 멤버 ID를 저장 const [cardInfo, setCardInfo] = useState([]); // 멤버 ID를 저장 con..

  Read More
• [Spring Boot/React] CoolSMS API 사용해 문자 인증 구현

  Project/외국인 관광객을 위한 카드 플랫폼 2024. 8. 24. 19:49

  - 백엔드 코드 (Spring Boot) 1. buil.gradle에 아래 코드 추가implementation 'net.nurigo:sdk:4.2.7'  2. application.yaml에 아래 코드 추가coolsms: api: key: 쿨SMS에서 받은 API키 secret: 쿨SMS에서 받은 SECRET키 number: 핸드폰 번호  3. Controller 코드 작성import lombok.AllArgsConstructor;import lombok.Data;import lombok.NoArgsConstructor;import net.nurigo.sdk.NurigoApp;import net.nurigo.sdk.message.model.Message;import net.nurigo...

  Read More
• [Spring Boot/React] 다음 주소 api 연결하기

  Project/외국인 관광객을 위한 카드 플랫폼 2024. 8. 24. 15:24

  - 주소 api 연결 리액트 코드 import React, { useEffect } from 'react';import { Field } from 'formik';const DaumPostcode = ({ setFieldValue }) => { useEffect(() => { const script = document.createElement('script'); script.src = "https://t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"; script.async = true; document.body.appendChild(script); return () => { ..

  Read More
• [Spring Boot/React] 카드 번호, CVV 코드 랜덤 생성 및 카드 정보 DB에 insert

  Project/외국인 관광객을 위한 카드 플랫폼 2024. 8. 13. 10:49

  - 카드번호, cvv 코드 랜덤 생성 front에서 import React, { createContext, useContext, useState } from 'react';const CardContext = createContext(); // 컨텍스트 객체를 생성// useContext를 사용하여 CardContext의 현재 값을 반환export const useCardContext = () => { return useContext(CardContext);};// 16자리의 랜덤 카드 번호를 생성하는 함수const generateRandomCardNumber = () => { let cardNumber = ''; for(let i = 0; i { return Math.floor(..

  Read More
• [Spring Boot/React] 카드 신청 페이지 제작

  Project/외국인 관광객을 위한 카드 플랫폼 2024. 8. 10. 23:03

  - 카드 신청 폼 만들기자료 참고 https://velog.io/@jiaegong/%EC%A3%BC%EB%AF%BC%EB%93%B1%EB%A1%9D%EB%B2%88%ED%98%B8-%EC%9E%90%EB%8F%99-%ED%95%98%EC%9D%B4%ED%94%88-%EB%84%A3%EA%B8%B0-%EB%92%B7%EC%9E%90%EB%A6%AC-%EB%A1%9C-%EB%A7%88%EC%8A%A4%ED%82%B9-%ED%95%98%EA%B8%B0 주민등록번호 자동 하이픈 넣기, 뒷자리 *로 마스킹 하기가입 폼을 만들다보면 핸드폰 번호나 주민등록번호에 자동 하이픈이 생기게 해야 할 때가 있다. 열심히 해놨는데 기획 변경으로 이 부분을 다 날려야 하는 일이 생겨 필요한 코드만 정리해놓기velog.io    ..

  Read More
• [Spring Boot/React] 소비 패턴 그래프 생성 시 백과 연동 문제 해결

  Project/외국인 관광객을 위한 카드 플랫폼 2024. 8. 9. 10:55

  - 소비 패턴 분석 페이지 만들기(백연동o) - 카드 추천 페이지 만들기(백연동o) - 카테고리 crud 테스트용으로 제작 문제: 카테고리 코드는 가져와지는데 그래프에서 띄워질 때 그래프가 안뜸  해결 :파이 차트는 음수 값을 지원하지 않기 때문에, 음수 값이 포함된 데이터를 시각화하려면 다른 방법을 사용해야 합니다. 음수 값은 데이터의 특성상 파이 차트에 적합하지 않지만, 데이터를 양수로 변환하는 방식으로 해결할 수 있습니다.음수 값을 양수로 변환하여 파이 차트에 표시하려면 다음과 같이 할 수 있습니다. 예를 들어, 모든 값을 절대값으로 변환하는 방법입니다.

  Read More
• [Spring Boot/React] Google Charts API 연동 - 주간 소비 리포트 만들기

  Project/외국인 관광객을 위한 카드 플랫폼 2024. 8. 9. 10:52

  - 주간 소비 리포트 만들기(백연동o / ui 는아직x) - 구글 차트 api 사용 결제 내역 데이터 가져오기총 결제 금액 계산월 및 주 선택에 따른 데이터 필터링총 지출, 입금, 출금 내역 필터링차트와 필터링된 데이터를 UI에 표시   1. 컴포넌트 상태 및 데이터 가져오기const WeeklyChart = () => { const [usage, setUsage] = useState([]); const [totalPrice, setTotalPrice] = useState(0); const [data, setData] = useState(initialData); // 초기 데이터 설정 const [selectedMonth, setSelectedMonth] = useState(() => { c..

  Read More
• [Spring Boot/React] 카드 사용 내역 페이지 만들기

  Project/외국인 관광객을 위한 카드 플랫폼 2024. 8. 8. 09:03

  - 카드 사용 내역 페이지 (백이랑 연동o /  ui 아직 신경 안씀)- 백 : store 테이블 crud 테스트용으로 만들기 - 프론트: - 백 store 테이블 crud 만들고 payment entity에 조인 관계 추가 @Data@NoArgsConstructor@AllArgsConstructor@Builder@Entity@Table(name = "payment")public class PaymentEntity { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) Long paymentId; @Column(nullable = false) Double paymentPrice; @Column(nullable = false) LocalDateTime pay..

  Read More