계승: v 1.3.1 (#110)

.github/workflows/dev_deploy.yml

@@ -15,8 +15,8 @@ jobs:
       AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
       AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
       AWS_REGION: ${{ secrets.AWS_REGION }}
-      S3_BUCKET_NAME: ${{ secrets.S3_BUCKET_NAME }}
-      ENV_PROD: ${{ secrets.ENV_PROD }}
+      TEST_S3_NAME: ${{ secrets.TEST_S3_NAME }}
+      ENV_PROD: ${{ secrets.ENV_DEV }}
 
     steps:
       - name: 코드 체크 아웃
@@ -46,6 +46,5 @@ jobs:
 
       - name: S3에 정적 파일 업로드
         run: |
-          aws s3 sync ./dist s3://${{ env.S3_BUCKET_NAME }} --delete \
-          --acl public-read \
+          aws s3 sync ./dist s3://${{ env.TEST_S3_NAME }} --delete \
           --cache-control "no-cache"

.github/workflows/prod_deploy.yml

@@ -1,4 +1,4 @@
-name: PROD용 S3에 업로드 및 CLOUDFRONT 초기화
+name: S3에 업로드 및 CLOUDFRONT 초기화
 
 on:
   push:
@@ -10,39 +10,44 @@ jobs:
   deploy:
     runs-on: ubuntu-latest
 
+    # 1. 모든 시크릿을 환경 변수(env)로 매핑 (_PROD 제거)
     env:
-      AWS_ACCESS_KEY_ID_PROD: ${{ secrets.AWS_ACCESS_KEY_ID_PROD }}
-      AWS_SECRET_ACCESS_KEY_PROD: ${{ secrets.AWS_SECRET_ACCESS_KEY_PROD }}
-      AWS_REGION_PROD: ${{ secrets.AWS_REGION_PROD }}
-      EC2_HOST: ${{ secrets.EC2_HOST }}
-      EC2_USER: ${{ secrets.EC2_USER }}
-      EC2_SSH_KEY: ${{ secrets.EC2_SSH_KEY }}
-      S3_URL: ${{ secrets.S3_URL }}
-      ENV_PROD: ${{ secrets.ENV_PROD }}
+      AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+      AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+      AWS_REGION: ${{ secrets.AWS_REGION }}
+      S3_NAME: ${{ secrets.S3_NAME }}
+      CLOUDFRONT_ID: ${{ secrets.CLOUDFRONT_ID }}
+      ENV: ${{ secrets.ENV_PROD }}
 
     steps:
-      - name: EC2에 SSH 접속 후 배포
-        uses: appleboy/ssh-action@v1.0.0
+      - name: 소스 코드 체크아웃
+        uses: actions/checkout@v4
+
+      - name: Node.js 설정 (v24)
+        uses: actions/setup-node@v4
         with:
-          host: ${{ env.EC2_HOST }}
-          username: ${{ env.EC2_USER }}
-          key: ${{ env.EC2_SSH_KEY }}
-          port: 22
-          script: |
-            cd ~/client
-            git pull origin main
-            echo "${{ env.ENV_PROD }}" > .env.prod
-            npm install
-            npm run build
-            # S3 업로드
-            aws s3 sync ./dist ${{ env.S3_URL }} --delete
-
-      - name: AWS 로그인
+          node-version: "24"
+          cache: "npm"
+
+      - name: 의존성 설치 및 빌드
+        run: |
+          npm install
+          # env 컨텍스트를 사용하여 .env 파일 생성 (변수명 ENV_PROD -> ENV 로 변경됨)
+          echo "${{ env.ENV }}" > .env.prod
+          npm run build
+
+      - name: AWS 자격 증명 설정
         uses: aws-actions/configure-aws-credentials@v4
         with:
-          aws-access-key-id: ${{ env.AWS_ACCESS_KEY_ID_PROD }}
-          aws-secret-access-key: ${{ env.AWS_SECRET_ACCESS_KEY_PROD }}
-          aws-region: ${{ env.AWS_REGION_PROD }}
+          # 상단에 선언한 env 변수를 참조 (변수명 변경 반영)
+          aws-access-key-id: ${{ env.AWS_ACCESS_KEY_ID }}
+          aws-secret-access-key: ${{ env.AWS_SECRET_ACCESS_KEY }}
+          aws-region: ${{ env.AWS_REGION }}
+
+      - name: S3 배포
+        # env.S3_URL 참조
+        run: aws s3 sync ./dist s3://${{ env.S3_NAME }} --delete
 
       - name: CloudFront 캐시 무효화
-        run: aws cloudfront create-invalidation --distribution-id ${{ secrets.CLOUDFRONT_DISTRIBUTION_ID_PROD }} --paths "/*"
+        # env.CLOUDFRONT_ID 참조
+        run: aws cloudfront create-invalidation --distribution-id ${{ env.CLOUDFRONT_ID }} --paths "/*"

src/pages/MakeQuiz/index.jsx

@@ -11,7 +11,7 @@ import "react-pdf/dist/Page/AnnotationLayer.css";
 import "react-pdf/dist/Page/TextLayer.css";
 import { useNavigate } from "react-router-dom";
 import "./index.css";
-import { OcrButton } from "./ui";
+import { OcrButton, RecentChanges } from "./ui";
 
 const levelDescriptions = {
   RECALL: `순수 암기나 단순 이해를 묻는 문제
@@ -540,7 +540,8 @@ const MakeQuiz = () => {
                 {t("파일 크기 제한:")} {MAX_FILE_SIZE / 1024 / 1024}MB <br></br>
               </p>
               <p className="hint">
-                {t("파일 page  제한: 선택했을 때 100page 이하")}
+                {t("파일 page  제한: 선택했을 때")}{" "}
+                <strong>150pages 이하</strong>
               </p>
             </>
           ) : (
@@ -809,6 +810,7 @@ const MakeQuiz = () => {
             </button>
           </div>
         )}
+        <RecentChanges />
         <OcrButton />
         {showHelp && <Help />}
       </div>

src/pages/MakeQuiz/ui/RecentChanges/index.css

@@ -0,0 +1,46 @@
+.recent-changes-section {
+  margin-top: 30px;
+  padding: 20px;
+  background-color: #f8f9fa;
+  border-radius: 8px;
+  border: 1px solid #e0e0e0;
+}
+
+.recent-changes-section h3 {
+  margin: 0 0 15px 0;
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
+}
+
+.changes-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.changes-list li {
+  padding: 10px 0;
+  display: flex;
+  gap: 15px;
+  align-items: flex-start;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.changes-list li:last-child {
+  border-bottom: none;
+}
+
+.changes-list .date {
+  font-size: 14px;
+  color: #666;
+  font-weight: 500;
+  min-width: 80px;
+}
+
+.changes-list .change-text {
+  font-size: 14px;
+  color: #333;
+  flex: 1;
+}
+

src/pages/MakeQuiz/ui/RecentChanges/index.jsx

@@ -0,0 +1,21 @@
+import { useTranslation } from "i18nexus";
+import "./index.css";
+
+const RecentChanges = () => {
+  const { t } = useTranslation();
+  return (
+    <div className="recent-changes-section">
+      <h3>{t("최근 변경사항")}</h3>
+      <ul className="changes-list">
+        <li>
+          <span className="date">2025.12.14</span>
+          <span className="change-text">
+            {t("페이지 제한 100pages → 150pages 변경")}
+          </span>
+        </li>
+      </ul>
+    </div>
+  );
+};
+
+export default RecentChanges;

src/pages/MakeQuiz/ui/index.js

@@ -1 +1,2 @@
 export { default as OcrButton } from "./OcrButton";
+export { default as RecentChanges } from "./RecentChanges";