React와 Spring Boot를 사용한 SQL 체크 및 모달 창 구현

오아름 샘 2025. 5. 2. 10:06

1. React 클래스 컴포넌트와 AG Grid 설정

AG Grid와 React 설정

AG Grid를 사용하여 React 클래스 컴포넌트에서 데이터 그리드를 설정합니다. TypeScript를 사용하여 컴포넌트를 작성합니다.

import React, { Component } from 'react';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';

interface RowData {
  id: number;
  sql: string;
  // 다른 필드들 추가 가능
}

interface State {
  rowData: RowData[];
  selectedSQL: string;
  isModalOpen: boolean;
}

class MyGrid extends Component<{}, State> {
  private gridApi: any;
  private gridColumnApi: any;

  constructor(props: {}) {
    super(props);
    this.state = {
      rowData: [],
      selectedSQL: '',
      isModalOpen: false,
    };
  }

  onGridReady = (params: any) => {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;
  };

  onSelectionChanged = () => {
    const selectedRows = this.gridApi.getSelectedRows();
    if (selectedRows.length > 0) {
      this.setState({ selectedSQL: selectedRows[0].sql });
    }
  };

  openModal = () => {
    this.setState({ isModalOpen: true });
  };

  closeModal = () => {
    this.setState({ isModalOpen: false });
  };

  render() {
    const { rowData, isModalOpen, selectedSQL } = this.state;

    return (
      <div>
        <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>
          <AgGridReact
            rowData={rowData}
            columnDefs={[
              { headerName: 'ID', field: 'id', checkboxSelection: true },
              { headerName: 'SQL', field: 'sql' },
            ]}
            rowSelection="single"
            onGridReady={this.onGridReady}
            onSelectionChanged={this.onSelectionChanged}
          />
        </div>
        <button onClick={this.openModal}>Check SQL</button>
        {isModalOpen && (
          <Modal
            sql={selectedSQL}
            onClose={this.closeModal}
            onCheckSQL={this.handleCheckSQL}
          />
        )}
      </div>
    );
  }

  handleCheckSQL = (sql: string) => {
    fetch('http://127.0.0.1:3060/viw/erp/checkSql', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ sql }),
    })
      .then((response) => response.json())
      .then((data) => {
        if (data.success) {
          alert('정상 처리되었습니다.');
          this.setState({ selectedSQL: sql });
        } else {
          alert(`오류: ${data.message}`);
        }
      })
      .catch((error) => {
        alert(`예외 발생: ${error.message}`);
      });
  };
}

export default MyGrid;

2. 모달 컴포넌트 구현

모달 컴포넌트를 별도로 구현하여 SQL을 편집하고 확인할 수 있도록 합니다.

import React, { Component } from 'react';

interface ModalProps {
  sql: string;
  onClose: () => void;
  onCheckSQL: (sql: string) => void;
}

interface ModalState {
  sql: string;
  isCheckSQLDisabled: boolean;
}

class Modal extends Component<ModalProps, ModalState> {
  constructor(props: ModalProps) {
    super(props);
    this.state = {
      sql: props.sql,
      isCheckSQLDisabled: false,
    };
  }

  handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    this.setState({ sql: event.target.value });
  };

  handleCheckSQL = () => {
    const { onCheckSQL } = this.props;
    const { sql } = this.state;
    onCheckSQL(sql);
  };

  render() {
    const { onClose } = this.props;
    const { sql, isCheckSQLDisabled } = this.state;

    return (
      <div className="modal">
        <div className="modal-content">
          <h2>SQL 편집</h2>
          <input type="text" value={sql} onChange={this.handleChange} />
          <button onClick={this.handleCheckSQL} disabled={isCheckSQLDisabled}>
            Check SQL
          </button>
          <button onClick={onClose}>취소</button>
        </div>
      </div>
    );
  }
}

export default Modal;

3. Spring Boot와 MyBatis 설정

Spring Boot 프로젝트 설정

Spring Boot와 MyBatis를 사용하여 MariaDB와 연동합니다.

pom.xml 설정

<dependencies>
  <dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
  </dependency>
  <dependency>
    <groupId>org.mybatis.spring.boot</groupId>
    <artifactId>mybatis-spring-boot-starter</artifactId>
    <version>2.2.2</version>
  </dependency>
  <dependency>
    <groupId>org.mariadb.jdbc</groupId>
    <artifactId>mariadb-java-client</artifactId>
  </dependency>
</dependencies>

application.properties 설정

spring.datasource.driver-class-name=org.mariadb.jdbc.Driver
spring.datasource.url=jdbc:mariadb://localhost:3306/yourDatabase
spring.datasource.username=yourUsername
spring.datasource.password=yourPassword
mybatis.mapper-locations=classpath:mapper/*.xml

DatabaseConfig.java 설정

@Configuration
@MapperScan(basePackages = "com.example.mapper")
public class DatabaseConfig {
  @Bean
  public SqlSessionFactory sqlSessionFactory(DataSource dataSource) throws Exception {
    SqlSessionFactoryBean sessionFactory = new SqlSessionFactoryBean();
    sessionFactory.setDataSource(dataSource);
    sessionFactory.setMapperLocations(new PathMatchingResourcePatternResolver().getResources("classpath:mapper/*.xml"));
    return sessionFactory.getObject();
  }

  @Bean
  public SqlSessionTemplate sqlSessionTemplate(SqlSessionFactory sqlSessionFactory) {
    return new SqlSessionTemplate(sqlSessionFactory);
  }
}

CheckSqlMapper.java

@Mapper
public interface CheckSqlMapper {
  String checkSql(@Param("sql") String sql);
}

CheckSqlMapper.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.example.mapper.CheckSqlMapper">
  <select id="checkSql" resultType="string">
    ${sql}
  </select>
</mapper>

CheckSqlService.java

@Service
public class CheckSqlService {
  @Autowired
  private CheckSqlMapper checkSqlMapper;

  public String checkSql(String sql) {
    return checkSqlMapper.checkSql(sql);
  }
}

CheckSqlController.java

@RestController
@RequestMapping("/viw/erp")
public class CheckSqlController {
  @Autowired
  private CheckSqlService checkSqlService;

  @PostMapping("/checkSql")
  public ResponseEntity<Map<String, Object>> checkSql(@RequestBody Map<String, String> request) {
    String sql = request.get("sql");
    Map<String, Object> response = new HashMap<>();
    try {
      String result = checkSqlService.checkSql(sql);
      response.put("success", true);
      response.put("result", result);
    } catch (Exception e) {
      response.put("success", false);
      response.put("message", e.getMessage());
    }
    return ResponseEntity.ok(response);
  }
}

React와 Spring Boot를 사용하여 AG Grid와 모달 창을 통해 SQL을 체크하고 편집하는 기능을 구현

ag-grid를 사용하는 React 17버전 클래스 컴포넌트 환경에서 타입스크립트를 기반으로,

체크박스로 행을 선택한 후 CheckSQL 버튼 클릭 시 첫 번째 선택된 행의 SQL 값을 별도의 모달 창에서 편집하고 확인 버튼을 통해 선택 된 행의 필드에 적용하는 기능을, 데이터 타입 및 모달 컴포넌트를 분리하여 구현하고

모달 창에서는 타이틀, 텍스트 박스(CheckSQL), Check SQL 버튼, 확인 버튼, 취소 버튼 으로 구성하고

Check SQL 버튼 클릭하면 Java, Spring, ibatis, Mariadb로 구성 된 웹서버(http://127.0.0.1:3060/viw/erp/checkSql)를 호출하여 SQL 체크 수행 결과 정상 수행되었으면 정상처리 메시지 출력하고, 오류 또는 예외사항 발생 했을 경우 해당 메시지 출력, Check SQL 결과가 오류 또는 예외사항 발생 했을 경우 확인 버튼 disable 처리하고 정상 수행되었을 경우 enable 처리, Java에서 Default 값을 CheckSQL에서 ${countryCode} 는 'KR' 로 세팅하고 ${partnerCode} 는 ' Walmart' 세팅하고 

 ${startDate} 는 10일 전 일자 세팅하고   ${endDate} 는 오늘 일자 세팅하여 수행 합니다.

React는 클래스 컴포넌트 형태로 코드 만들고 Java, ibasts 비지니스 코드도 만들어 주세요.