Merge pull request #133 from Pseudo-Lab/feat/front-cert-api

Feat/front cert api

Author: ed-kyu

cert/frontend/.env.example

@@ -0,0 +1 @@
+REACT_APP_API_BASE_URL=http://localhost:8000

cert/frontend/src/components/common/Footer.tsx

@@ -1,40 +1,12 @@
 import React from 'react';
-import { Box, Container, Grid, Typography, Link } from '@mui/material';
+import { Box, Container, Typography } from '@mui/material';
 import { colors } from '../../styles/theme';
 
 const Footer: React.FC = () => {
   return (
-    <Box component="footer" sx={{ backgroundColor: colors.dark, color: '#fff', py: 4, mt: 0.5 }}>
+    <Box component="footer" sx={{ backgroundColor: colors.dark, color: '#fff', py: 3 }}>
       <Container>
-        <Grid container spacing={4} className="footer-content">
-          <Grid item xs={12} md={4} className="footer-section">
-            <Typography variant="h6" gutterBottom>PseudoLab</Typography>
-            <Typography>
-              PseudoLab은 인공지능과 데이터 사이언스 분야에서 함께 성장하는 커뮤니티입니다.
-            </Typography>
-          </Grid>
-
-          <Grid item xs={12} md={4} className="footer-section">
-            <Typography variant="h6" gutterBottom>링크</Typography>
-            <Box component="ul" sx={{ listStyle: 'none', p: 0 }}>
-              {['홈페이지', '서비스', '커뮤니티', '연락처'].map((link, idx) => (
-                <li key={idx}>
-                  <Link href="#" color="#d1d5db" underline="none" sx={{ transition: colors.transition, '&:hover': { color: '#fff' } }}>
-                    {link}
-                  </Link>
-                </li>
-              ))}
-            </Box>
-          </Grid>
-
-          <Grid item xs={12} md={4} className="footer-section">
-            <Typography variant="h6" gutterBottom>연락처</Typography>
-            <Typography>이메일: info@pseudolab.com</Typography>
-            <Typography>전화: 02-123-4567</Typography>
-          </Grid>
-        </Grid>
-
-        <Box sx={{ textAlign: 'center', pt: 4, borderTop: '1px solid rgba(255, 255, 255, 0.1)', mt: 4 }}>
+        <Box sx={{ textAlign: 'center', pt: 1 }}>
           <Typography variant="body2" color="#9ca3af">
             &copy; 2025 PseudoLab. All rights reserved.
           </Typography>

cert/frontend/src/modules/Home/config.ts

@@ -0,0 +1,2 @@
+export const API_BASE_URL =
+  import.meta.env.VITE_API_BASE_URL || "http://localhost:8000";

cert/frontend/src/modules/Home/index.tsx

@@ -15,60 +15,86 @@ import {
   DialogContent,
   LinearProgress,
   Autocomplete,
-  InputLabel
 } from '@mui/material';
 import { ButtonProps } from "@mui/material/Button";
 import { Search as SearchIcon } from '@mui/icons-material';
 import { styled } from '@mui/material/styles';
 import successImg from "../../assets/success.png";
 import failImg from "../../assets/fail.png";
+import { API_BASE_URL } from "./config";
 
+type IssuePayload = {
+  applicant_name: string;
+  recipient_email: string;
+  season: string;
+  course_name: string;
+};
 
-type StudyMeta = {
-  periods: string[]; 
-  studiesByPeriod?: Record<string, string[]>;
-  studies?: string[];
+type IssueResponse = {
+  returnCode: number; // 200, 404, 500 등
 };
 
-type IssuePayload = {
+type ApiStudy = {
+  id: string;
   name: string;
-  email: string;
-  period: string;
-  studies: string[];
+  season: number;
+  description: string;
+  created_at: string;
+  updated_at: string;
 };
 
-type IssueResponse = {
-  returnCode: number; // 200, 404, 500 등
+type StudyMeta = {
+  periods: string[];
+  studiesByPeriod: Record<string, string[]>;
+  studies: string[];
 };
 
 async function fetchStudyMeta(): Promise<StudyMeta> {
-  // const res = await fetch('/api/studies/meta');
-  // if (!res.ok) throw new Error('Failed to load meta');
-  // return (await res.json()) as StudyMeta;
+  const res = await fetch(`${API_BASE_URL}/certs/all-projects`);
+  if (!res.ok) throw new Error("Failed to load meta");
+
+  const data = (await res.json()) as ApiStudy[];
+
+  // season(=period) 기준으로 그룹핑
+  const studiesByPeriod: Record<string, string[]> = {};
+  const studies: string[] = [];
+
+  for (const item of data) {
+    const period = String(item.season);
+    if (!studiesByPeriod[period]) {
+      studiesByPeriod[period] = [];
+    }
+    studiesByPeriod[period].push(item.name);
+    studies.push(item.name);
+  }
+
+  const periods = Object.keys(studiesByPeriod).sort();
 
-  await new Promise(r => setTimeout(r, 300));
   return {
-    periods: ["10", "11"],
-    studiesByPeriod: {
-      "10": ["DevFactory", "JobPT", "3D Vision"],
-      "11": ["AI Research Club", "Test Study"]
-    },
-    studies: ["DevFactory", "JobPT", "AI Research Club", "3D Vision", "Test Study"]
+    periods,
+    studiesByPeriod,
+    studies,
   };
 }
 
-  async function issueCertificate(payload: IssuePayload): Promise<IssueResponse> {
-    const body = JSON.stringify(payload);
-    console.log('body', body);
-  // const res = await fetch('/api/certificates/issue', {
-  //   method: 'POST',
-  //   headers: { 'Content-Type': 'application/json' },
-  //   body: JSON.stringify(payload),
-  // });
-  // if (!res.ok) throw new Error('Issue API failed');
-  // return (await res.json()) as IssueResponse;
-  await new Promise(r => setTimeout(r, 500));
-  return { returnCode: 200 };
+async function issueCertificate(payload: IssuePayload): Promise<IssueResponse> {
+  const res = await fetch(`${API_BASE_URL}/certs/create`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(payload),
+  });
+
+  let json: any = {};
+  try {
+    json = await res.json();
+  } catch {
+    json = {};
+  }
+
+  return {
+    ...json,
+    returnCode: res.status, // HTTP 상태 코드 그대로 사용
+  };
 }
 
 const SuccessIcon: React.FC = () => {
@@ -259,8 +285,6 @@ const ExportCertificateForm = () => {
 
   const [returnCode, setReturnCode] = useState<number | null>(null);
 
-  const [testReturnCode, setTestReturnCode] = useState<number>(200);
-
   useEffect(() => {
     let mounted = true;
     (async () => {
@@ -323,34 +347,60 @@ const ExportCertificateForm = () => {
     setIsComplete(false);
     setReturnCode(null);
     setProgress(0);
-
+  
     // 가짜 진행바
     const interval = setInterval(() => {
       setProgress(prev => {
         if (prev >= 100) {
           clearInterval(interval);
           return 100;
         }
-        return prev + 10;
+        return prev + 1;
       });
-    }, 150);
-
+    }, 200); // 0.2초마다 1% → 총 20초
+  
     try {
-      // 실제 API 호출 (응답 returnCode는 무시하고, UI에서 선택한 testReturnCode를 반영)
-      await issueCertificate({
-        name: formData.name.trim(),
-        email: formData.email.trim(),
-        period: formData.period,
-        studies: tags,
+      // 각 태그별 호출을 allSettled로 수행하여 부분 실패도 수집
+      const settled = await Promise.allSettled(
+        tags.map(tag =>
+          issueCertificate({
+            applicant_name: formData.name.trim(),
+            recipient_email: formData.email.trim(),
+            season: formData.period,     // 기존 로직 유지
+            course_name: tag,            // 각 스터디별 호출
+          })
+        )
+      );
+  
+      // 태그별 코드 수집
+      const perTagResults = settled.map((r, idx) => {
+        if (r.status === "fulfilled") {
+          return { tag: tags[idx], code: r.value.returnCode };
+        } else {
+          return { tag: tags[idx], code: 500 }; // 네트워크 오류 같은 경우
+        }
       });
-
-      // 테스트용 returnCode 적용
-      // 200: 성공, 300: 일반 실패, 나머지(예: 302): “명단에 없음” 시나리오
-      setReturnCode(testReturnCode);
+  
+      // 모두 200이면 200
+      // 500이 하나라도 있으면 500 ("명단에 없음" 시나리오)
+      // 그 외 300(일반 실패)
+      const codes = perTagResults.map(r => r.code);
+      let overall: number;
+
+      if (codes.every(c => c === 200)) {
+        overall = 200;
+      } else if (codes.some(c => c === 500)) {
+        overall = 500;
+      } else {
+        overall = 300;
+      }
+  
+      setReturnCode(overall);
     } catch (e) {
-      // 호출 자체 실패 시 일반 실패로 처리
-      setReturnCode(300);
+      // 예외적으로 여기까지 떨어지면 일반 실패
+      setReturnCode(500);
     } finally {
+      clearInterval(interval);     // 안전하게 인터벌 정리
       setIsLoading(false);
       setIsComplete(true);
     }
@@ -499,22 +549,6 @@ const ExportCertificateForm = () => {
                 />
               </FieldRow>
 
-              <FieldRow label="테스트 코드">
-                <StyledFormControl fullWidth size="medium">
-                  <InputLabel id="returncode-label">returnCode (테스트)</InputLabel>
-                  <Select
-                    labelId="returncode-label"
-                    value={String(testReturnCode)}
-                    label="returnCode (테스트)"
-                    onChange={(e) => setTestReturnCode(Number(e.target.value))}
-                  >
-                    <MenuItem value="200">200 (성공)</MenuItem>
-                    <MenuItem value="404">404 (명단 없음)</MenuItem>
-                    <MenuItem value="500">500 (실패)</MenuItem>
-                  </Select>
-                </StyledFormControl>
-              </FieldRow>
-
               {/* Buttons */}
               <Box sx={{ display: 'flex', gap: 3, mt: 2 }}>
                 <StyledButton
@@ -611,7 +645,7 @@ const ExportCertificateForm = () => {
               </Box>
             )}
 
-            {!isLoading && returnCode === 500 && (
+            {!isLoading && returnCode === 300 && (
               /* 일반 실패 */
               <Box>
                 <FailIcon />
@@ -631,7 +665,7 @@ const ExportCertificateForm = () => {
               </Box>
             )}
 
-            {!isLoading && returnCode === 404 && (
+            {!isLoading && returnCode === 500 && (
               /* 명단 없음 */
               <Box>
                 <FailIcon />