[OMG-6] 나 백엔드인데 프론트(?)도 할 수 있다.

  - public: static 파일
  - api: 외부 서버에 요청하기 위한 API 모듈
  - components: 자주 사용되는 컴포넌트, 예) Footer, Header
  - pages: 클라이언트가 보는 페이지
  - router: 경로에 대한 길을 찾기 위한 라우터
  - styles: 전역적으로 적용할만한 CSS 설정

import axios from 'axios';

const axiosInstance = axios.create({
    baseURL: process.env.REACT_APP_BASE_URL,
    headers: {
        'Content-Type' : 'application/json',
    },
    timeout: 5000
});

export default axiosInstance;

import axiosInstance from "src/api/axiosInstance";

export const getMapleStoryMCharacterInfo = async (characterName, worldName) => {
    const { data } = await axiosInstance.get("/games/maplestorym", {params: {characterName, worldName}});

    return data;    
}

@Configuration
@RequiredArgsConstructor
public class WebConfig implements WebMvcConfigurer {

    private final CorsProperties corsProperties;

    @Override
    public void addCorsMappings(final CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins(corsProperties.getLocal());
    }
}

export const Section = () => {
    const worldNames = ['스카니아','루나','제니스','크로아','유니온','엘리시움','아케인'];
    const worldNameComponents = worldNames.map((value, index) => (<MenuItem key={index} value={value}>{value}</MenuItem>))

    const navigate = useNavigate();

    const [characterName, setCharacterName] = useState('');
    const [characterWorldName, setCharacterWorldName] = useState('');

    const handleChange = (event) => {
        setCharacterWorldName(event.target.value);
    };
  

    const getData = async () => {
        if(characterName === '' || characterWorldName === ''){
            alert("캐릭터명 또는 월드명을 입력해주세요")
            return;
        }

        const data = await getMapleStoryMCharacterInfo(characterName, characterWorldName);
        navigate('/result', {
            state: data
        });
    }
    

    return (
        <SectionContainer>
            <SectionHeader>
                메이플스토리M 캐릭터 조회
            </SectionHeader>
            <SearchConatiner>
                <Box sx={{ minWidth: 120 }}>
                    <FormControl fullWidth>
                        <InputLabel id="demo-simple-select-label">월드명</InputLabel>
                        <Select
                            labelId="demo-simple-select-label"
                            id="demo-simple-select"
                            value={characterWorldName}
                            label="월드명"
                            onChange={handleChange}
                        >
                            {
                                worldNameComponents
                            }
                        </Select>
                    </FormControl>
                </Box>
                <TextField id="outlined-basic" label="캐릭터명" variant="outlined" onChange={(e) => setCharacterName(e.target.value)}  />
                <SizeButton variant="contained" onClick={getData}>입력</SizeButton>
            </SearchConatiner>
        </SectionContainer>
    )
}

const SizeButton = styled(Button)({
  backgroundColor:'#c86c1ccc',
  height:'58px',
})

export const router = createBrowserRouter([
    {
      path: "/",
      element: <MainPage />,
    },
    {
      path: "result",
      element: <ResultPage />,
    },
]);