Merge pull request #18 from KNU-HAEDAL/develop

배포 테스트

.github/ISSUE_TEMPLATE/ISSUE_REQUEST_TEMPLATE.md

@@ -20,4 +20,3 @@ assignees: ''
 > 예상 개발 기간을 대략적으로 작성해주세요.
 >
 > 예) 0월 00일 ~ 0월 00일
-

.github/workflows/ci.yml

@@ -23,7 +23,7 @@ jobs:
         run: npm install
 
       - name: Lint Code
-        run: npm lint
+        run: npm run lint
 
       - name: Build Test
         run: npm run build

.github/workflows/deploy.yml

@@ -29,9 +29,6 @@ jobs:
       - name: Create .env file
         run: |
           echo "VITE_APP_BASE_URL=${{ secrets.VITE_APP_BASE_URL }}" >> .env
-          echo "VITE_APP_KAKAO_AUTH_CLIENT_ID=${{ secrets.VITE_APP_KAKAO_AUTH_CLIENT_ID }}" >> .env
-          echo "VITE_APP_KAKAO_AUTH_REDIRECT_URI=${{ secrets.VITE_APP_KAKAO_AUTH_REDIRECT_URI }}" >> .env
-          echo "VITE_ENV"=${{ secrets.VITE_ENV }} >> .env
 
       - name: Install Dependencies
         run: npm install

package.json

@@ -7,7 +7,9 @@
     "start": "vite --host",
     "build": "vite build",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "format": "prettier --check --ignore-path .prettierignore .",
+    "format:fix": "prettier --write --ignore-path .gitignore ."
   },
   "dependencies": {
     "@emotion/react": "^11.14.0",
@@ -23,6 +25,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^8.57.0",
+    "@types/babel__core": "^7.20.5",
     "@types/react": "^18.3.17",
     "@types/react-dom": "^18.3.5",
     "@vitejs/plugin-react": "^4.3.4",
@@ -39,6 +42,6 @@
     "eslint-plugin-react-refresh": "^0.4.16",
     "globals": "^15.13.0",
     "prettier": "^3.4.2",
-    "vite": "^6.0.3"
+    "vite": "^6.0.7"
   }
 }

src/App.jsx

@@ -1,5 +1,6 @@
-import { Routes } from './app/routes';
 import { globalStyle } from '@/shared';
+
+import { Routes } from './app/routes';
 import { Global } from '@emotion/react';
 
 const App = () => {

src/main.jsx

@@ -1,9 +1,10 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 
-import App from './App.jsx';
 import '@/shared/styles/reset.css';
 
+import App from './App.jsx';
+
 createRoot(document.getElementById('root')).render(
   <StrictMode>
     <App />

src/pages/barcode/ui/BarcodePage.jsx

@@ -3,9 +3,10 @@ import { useLocation, useNavigate } from 'react-router-dom';
 
 import JsBarcode from 'jsbarcode';
 
-import * as Barcode from './BarcodePage.style';
 import * as Common from '@/shared/styles';
 
+import * as Barcode from './BarcodePage.style';
+
 const BarcodePage = () => {
   const location = useLocation();
   const navigate = useNavigate();

src/pages/login/ui/LoginPage.jsx

@@ -1,13 +1,15 @@
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import * as Login from './LoginPage.style';
 import { fetchInstance } from '@/shared/instance/Instance';
 
+import * as Login from './LoginPage.style';
+
 const LoginPage = ({ onLogin }) => {
   const [id, setId] = useState('');
   const [password, setPassword] = useState('');
   const navigate = useNavigate();
+
   const handleSubmit = async (event) => {
     event.preventDefault();
 
@@ -18,9 +20,9 @@ const LoginPage = ({ onLogin }) => {
       });
       if (response.data && response.data.message === 'Login successful') {
         alert('Login successful!');
-        sessionStorage.setItem('token', response.data.token); // JWT 토큰 저장
+        sessionStorage.setItem('token', response.data.token);
         onLogin();
-        navigate('/ChooseRestaurant'); // 식당 선택 페이지로 이동
+        navigate('/ChooseRestaurant');
       } else {
         alert(
           response.data.message || 'Invalid credentials, please try again.'
@@ -36,10 +38,10 @@ const LoginPage = ({ onLogin }) => {
     <Login.LoginPageLayout>
       <form onSubmit={handleSubmit}>
         <Login.LogoCircle>
-          <Login.SubLogoCircle />
+          <Login.SubLogoCircle>공식당</Login.SubLogoCircle>
         </Login.LogoCircle>
         <Login.LoginTitle>환영합니다!</Login.LoginTitle>
-        <Login.SubTitle>학교 식당 예약 사이트 입니다</Login.SubTitle>
+        <Login.SubTitle>공식당 예약 키오스크 서비스 입니다.</Login.SubTitle>
         <Login.LoginBox>
           <Login.LoginInput
             type='text'
@@ -57,12 +59,12 @@ const LoginPage = ({ onLogin }) => {
           />
           <Login.LoginButton type='submit'>로그인</Login.LoginButton>
         </Login.LoginBox>
-        <Login.SignUpButton
-          className='signup-button'
-          onClick={() => navigate('/register')}
-        >
-          회원가입
-        </Login.SignUpButton>
+        <Login.SignUpWrapper>
+          아직 회원이 아니라면?{' '}
+          <Login.SignUpButton onClick={() => navigate('/register')}>
+            회원가입하기
+          </Login.SignUpButton>
+        </Login.SignUpWrapper>
       </form>
     </Login.LoginPageLayout>
   );

src/pages/login/ui/LoginPage.style.js

@@ -1,58 +1,62 @@
 import styled from '@emotion/styled';
 
 export const LoginPageLayout = styled.div`
-  width: 380px;
+  width: var(--page-width);
   background-color: #fff;
-  padding: 50px 30px;
   border-radius: 20px;
+  padding: 50px 30px;
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
   text-align: center;
   animation: fadeIn 1s ease-out forwards;
+  position: relative;
 `;
 
 export const LogoCircle = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
-  text-align: center;
-  width: 90px;
-  height: 90px;
-  background: #ffb3b3;
+  width: 100px;
+  height: 100px;
+  background: #fff;
   border-radius: 50%;
-  margin: -70px auto 30px;
-  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
-  position: relative;
-  :hover {
-    background: linear-gradient(135deg, #ffb3b3, #edeaea);
-  }
+  margin: -70px auto 20px;
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
 `;
 
 export const SubLogoCircle = styled.div`
-  width: 60px;
-  height: 60px;
-  background: #ffffff;
+  width: 80px;
+  height: 80px;
+  background-color: #000;
+  color: #fff;
+  background-size: cover;
   border-radius: 50%;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  font-family: 'BMJUA';
+  font-size: var(--font-xl);
+  justify-content: center;
+  align-items: center;
+  display: flex;
 `;
 
-export const LoginTitle = styled.span`
-  font-size: var(--font-lg);
-  font-weight: 800;
-  color: #b45555;
-  margin-bottom: 10px;
+export const LoginTitle = styled.h1`
+  font-size: var(--font-xl);
+  font-weight: 700;
+  color: var(--red);
+  margin-bottom: 20px;
 `;
 
 export const SubTitle = styled.p`
-  font-size: var(--font-xs);
-  color: #aaa;
-  margin: 10px 0;
+  font-size: var(--font-md);
+  font-weight: 700;
+  color: var(--gray);
+  margin-bottom: 20px;
 `;
 
 export const LoginBox = styled.section`
   display: flex;
   flex-direction: column;
-  gap: 20px;
-  margin-bottom: 40px;
+  gap: 30px;
+  margin-bottom: 20px;
 `;
 
 export const LoginInput = styled.input`
@@ -61,10 +65,9 @@ export const LoginInput = styled.input`
   border: none;
   border-bottom: 1px solid var(--gray);
   font-size: var(--font-sm);
-  color: var(--black);
+  color: var(--gray);
   background: none;
   transition: border-color 0.3s;
-
   :focus {
     border-bottom: 1px solid #b45555;
     outline: none;
@@ -73,39 +76,44 @@ export const LoginInput = styled.input`
 
 export const LoginButton = styled.button`
   width: 100%;
-  padding: 14px; /* 버튼 크기 적당히 조정 */
-  font-size: 14px; /* 버튼 텍스트 크기 감소 */
-  font-weight: 600;
+  padding: 10px;
+  font-size: var(--font-md);
+  font-weight: 700;
   color: #fff;
-  background: #ffb3b3;
+  background: var(--red);
   border: none;
-  border-radius: 50px;
+  border-radius: 20px;
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
   cursor: pointer;
   display: flex;
   justify-content: center;
   align-items: center;
-  gap: 10px;
   transition:
-    transform 0.2s,
-    box-shadow 0.2s;
+    background-color 0.3s,
+    transform 0.2s;
 
   :hover {
     transform: translateY(-2px);
-    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
   }
 `;
 
+export const SignUpWrapper = styled.div`
+  margin-top: 30px;
+  font-size: var(--font-sm);
+  color: var(--black);
+`;
+
 export const SignUpButton = styled.button`
-  margin-top: 20px;
-  font-size: var(--font-xs);
-  color: #b45555;
+  margin-left: 5px;
+  font-size: var(--font-md);
+  font-weight: 700;
+  color: var(--red);
   background: none;
   border: none;
   cursor: pointer;
-  text-decoration: underline;
   transition: color 0.3s;
 
   :hover {
-    color: var(--gray);
+    transform: translateY(-2px);
   }
 `;

src/pages/mypage/ui/Mypage.jsx

@@ -1,10 +1,11 @@
 import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import * as Mypage from './Mypage.style';
 import { fetchInstance } from '@/shared/instance/Instance';
 import * as Common from '@/shared/styles';
 
+import * as Mypage from './Mypage.style';
+
 const MyPage = () => {
   const [purchases, setPurchases] = useState([]); // 구매 내역
   const navigate = useNavigate();

src/pages/payment/ui/PaymentPage.jsx

@@ -1,11 +1,12 @@
 import React, { useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 
+import { fetchInstance } from '@/shared/instance/Instance';
+import * as Common from '@/shared/styles';
+
 import kakaoPay from '../assets/kakao-pay.png';
 import tossPay from '../assets/toss-pay.png';
 import * as Payment from './PaymentPage.style';
-import { fetchInstance } from '@/shared/instance/Instance';
-import * as Common from '@/shared/styles';
 
 const PaymentPage = () => {
   const location = useLocation();