release

2025-02-13 15:47:22 +09:00 · 2025-02-13 15:47:22 +09:00 · bb7ce2d988
commit bb7ce2d988
53 changed files with 19663 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,22 @@
 # dependencies
 /node_modules
 /.pnp
 .pnp.js
 # testing
 /coverage
 # production
 /build
 # misc
 .DS_Store
 .env
 .env.local
 .env.development.local
 .env.test.local
 .env.production.local
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
--- a/README.md
+++ b/README.md
@ -0,0 +1,71 @@
 # 마이구독 - 생활 구독 관리 서비스
 ## 프로젝트 소개
 마이구독은 여러 구독 서비스를 한눈에 관리할 수 있는 서비스입니다. 
 총 구독료 확인, 구독 서비스 관리, 맞춤형 구독 추천 등의 기능을 제공합니다.
 ## 시작하기
 ### 환경 설정
 1. 환경변수 설정
 ```bash
 # .env 파일을 생성하고 아래 환경변수를 설정합니다
 REACT_APP_MEMBER_URL=http://localhost:8081
 REACT_APP_MYSUB_URL=http://localhost:8082  
 REACT_APP_RECOMMEND_URL=http://localhost:8083
 ```
 2. 이미지 파일 준비
 public/images 폴더에 필요한 이미지 파일들을 위치시킵니다
 이미지 파일명은 서비스ID.png 형식이어야 합니다 (예: netflix.png)
 이미지는 PNG 포맷, 투명 배경, 200x200px ~ 400x400px 크기여야 합니다
 ### 설치 및 실행
 ```
 # 의존성 설치
 npm install
 # 개발 서버 실행 
 npm start
 ```
 ### 테스트 계정
 ```
 ID: user01
 Password: Passw0rd
 ```
 ## 주요 기능
 로그인/로그아웃
 총 구독료 조회
 구독 등급별 이미지 표시
 나의 구독 서비스 목록
 지출 패턴 기반 구독 추천
 카테고리별 구독 서비스 조회
 구독 서비스 상세 정보
 구독 신청/취소
 ## 기술 스택
 React 18
 React Router DOM 6
 Material UI 5
 Axios
 Context API
 ## 폴더 구조
 src/
  ├── components/         # 재사용 가능한 컴포넌트
  │   ├── auth/          # 인증 관련 
  │   ├── common/        # 공통 컴포넌트
  │   ├── main/          # 메인 화면 
  │   └── subscriptions/ # 구독 서비스 관련
  ├── contexts/          # Context API 
  ├── pages/            # 페이지 컴포넌트
  ├── services/         # API 통신
  └── utils/            # 유틸리티 함수
 ## 환경 요구사항
 Node.js 18 이상
 npm 9 이상
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,44 @@
 {
    "name": "lifesub-web",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
      "@emotion/react": "^11.11.3",
      "@emotion/styled": "^11.11.0",
      "@mui/icons-material": "^5.15.10",
      "@mui/material": "^5.15.10",
      "@testing-library/jest-dom": "^5.17.0",
      "@testing-library/react": "^13.4.0",
      "@testing-library/user-event": "^13.5.0",
      "axios": "^1.6.7",
      "react": "^18.2.0",
      "react-dom": "^18.2.0",
      "react-router-dom": "^6.22.1",
      "react-scripts": "5.0.1",
      "web-vitals": "^2.1.4"
    },
    "scripts": {
      "start": "react-scripts start",
      "build": "react-scripts build",
      "test": "react-scripts test",
      "eject": "react-scripts eject"
    },
    "eslintConfig": {
      "extends": [
        "react-app",
        "react-app/jest"
      ]
    },
    "browserslist": {
      "production": [
        ">0.2%",
        "not dead",
        "not op_mini all"
      ],
      "development": [
        "last 1 chrome version", 
        "last 1 firefox version",
        "last 1 safari version"
      ]
    }
   }
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/images/addict.png
+++ b/public/images/addict.png
--- a/public/images/baemin.png
+++ b/public/images/baemin.png
--- a/public/images/catch.png
+++ b/public/images/catch.png
--- a/public/images/chicor.png
+++ b/public/images/chicor.png
--- a/public/images/class101.png
+++ b/public/images/class101.png
--- a/public/images/collector.png
+++ b/public/images/collector.png
--- a/public/images/coupang-eats.png
+++ b/public/images/coupang-eats.png
--- a/public/images/coupang.png
+++ b/public/images/coupang.png
--- a/public/images/disney.png
+++ b/public/images/disney.png
--- a/public/images/karrot.png
+++ b/public/images/karrot.png
--- a/public/images/kurly.png
+++ b/public/images/kurly.png
--- a/public/images/liker.png
+++ b/public/images/liker.png
--- a/public/images/lohbs.png
+++ b/public/images/lohbs.png
--- a/public/images/melon.png
+++ b/public/images/melon.png
--- a/public/images/millie.png
+++ b/public/images/millie.png
--- a/public/images/netflix.png
+++ b/public/images/netflix.png
--- a/public/images/oliveyoung.png
+++ b/public/images/oliveyoung.png
--- a/public/images/spotify.png
+++ b/public/images/spotify.png
--- a/public/images/taling.png
+++ b/public/images/taling.png
--- a/public/images/tving.png
+++ b/public/images/tving.png
--- a/public/images/youtube-music.png
+++ b/public/images/youtube-music.png
--- a/public/index.html
+++ b/public/index.html
@ -0,0 +1,18 @@
 <!-- public/index.html -->
 <!DOCTYPE html>
 <html lang="ko">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta name="description" content="생활 구독 관리 서비스" />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>마이구독</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
 </html>
--- a/public/logo192.png
+++ b/public/logo192.png
--- a/public/manifest.json
+++ b/public/manifest.json
@ -0,0 +1,27 @@
 // public/manifest.json
 {
    "short_name": "마이구독",
    "name": "마이구독 - 생활 구독 관리",
    "icons": [
      {
        "src": "favicon.ico",
        "sizes": "64x64 32x32 24x24 16x16",
        "type": "image/x-icon"
      },
      {
        "src": "logo192.png",
        "type": "image/png",
        "sizes": "192x192"
      },
      {
        "src": "logo512.png",
        "type": "image/png",
        "sizes": "512x512"
      }
    ],
    "start_url": ".",
    "display": "standalone",
    "theme_color": "#000000",
    "background_color": "#ffffff",
    "orientation": "portrait"
  }
--- a/src/App.css
+++ b/src/App.css
@ -0,0 +1,8 @@
 /* src/App.css */
 .App {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    min-height: 100vh;
    background-color: white;
  }
--- a/src/App.js
+++ b/src/App.js
@ -0,0 +1,32 @@
 // src/App.js
 import React from 'react';
 import { Routes, Route, Navigate } from 'react-router-dom';
 import { AuthProvider } from './contexts/AuthContext';
 import Layout from './components/common/Layout';
 import MainPage from './pages/MainPage';
 import LoginPage from './pages/LoginPage';
 import SubscriptionListPage from './pages/SubscriptionListPage';
 import SubscriptionDetailPage from './pages/SubscriptionDetailPage';
 import './App.css';
 function App() {
  return (
    <AuthProvider>
      <div className="App">
        <Routes>
          <Route path="/login" element={<LoginPage />} />
          <Route element={<Layout />}>
            <Route index element={<MainPage />} />
            <Route path="subscriptions">
              <Route index element={<SubscriptionListPage />} />
              <Route path=":id" element={<SubscriptionDetailPage />} />
            </Route>
            <Route path="*" element={<Navigate to="/" replace />} />
          </Route>
        </Routes>
      </div>
    </AuthProvider>
  );
 }
 export default App;
--- a/src/components/auth/LoginForm.js
+++ b/src/components/auth/LoginForm.js
@ -0,0 +1,109 @@
 // src/components/auth/LoginForm.js
 import React, { useState } from 'react';
 import { 
 Box, 
 TextField, 
 Button, 
 Typography,
 InputAdornment,
 IconButton
 } from '@mui/material';
 import { Visibility, VisibilityOff } from '@mui/icons-material';
 const LoginForm = ({ onSubmit, error }) => {
 const [userId, setUserId] = useState('');
 const [password, setPassword] = useState('');
 const [showPassword, setShowPassword] = useState(false);
 const handleSubmit = (e) => {
   e.preventDefault();
   onSubmit(userId, password);
 };
 return (
   <Box 
     component="form" 
     onSubmit={handleSubmit}
     sx={{
       display: 'flex',
       flexDirection: 'column',
       gap: 2,
       width: '100%',
       maxWidth: 400,
       margin: '0 auto'
     }}
   >
     <Box 
       sx={{ 
         display: 'flex', 
         justifyContent: 'center', 
         mb: 3 
       }}
     >
       <img 
         src="/logo192.png" 
         alt="마이구독 로고" 
         style={{ 
           width: '100px',
           height: '100px',
           objectFit: 'contain'
         }} 
       />
     </Box>
     <TextField
       label="아이디"
       variant="outlined"
       fullWidth
       value={userId}
       onChange={(e) => setUserId(e.target.value)}
       error={!!error}
       autoComplete="username"
       required
     />
     <TextField
       label="비밀번호"
       type={showPassword ? 'text' : 'password'}
       variant="outlined"
       fullWidth
       value={password}
       onChange={(e) => setPassword(e.target.value)}
       error={!!error}
       autoComplete="current-password"
       required
       InputProps={{
         endAdornment: (
           <InputAdornment position="end">
             <IconButton
               onClick={() => setShowPassword(!showPassword)}
               edge="end"
             >
               {showPassword ? <VisibilityOff /> : <Visibility />}
             </IconButton>
           </InputAdornment>
         ),
       }}
     />
     {error && (
       <Typography color="error" variant="body2">
         {error}
       </Typography>
     )}
     <Button 
       type="submit" 
       variant="contained" 
       color="primary" 
       size="large"
       fullWidth
       sx={{ mt: 2 }}
     >
       로그인
     </Button>
   </Box>
 );
 };
 export default LoginForm;
--- a/src/components/common/ErrorMessage.js
+++ b/src/components/common/ErrorMessage.js
@ -0,0 +1,18 @@
 // src/components/common/ErrorMessage.js
 /*
 에러 메시지를 일관된 형태로 표시
 */
 import React from 'react';
 import { Alert, Box } from '@mui/material';
 const ErrorMessage = ({ message }) => {
  return (
    <Box sx={{ mt: 2, mb: 2 }}>
      <Alert severity="error">
        {message || '오류가 발생했습니다. 다시 시도해주세요.'}
      </Alert>
    </Box>
  );
 };
 export default ErrorMessage;
--- a/src/components/common/Header.js
+++ b/src/components/common/Header.js
@ -0,0 +1,53 @@
 // src/components/common/Header.js 수정 - 로그아웃 기능 추가
 import React from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
 import { AppBar, Toolbar, IconButton, Typography, Button } from '@mui/material';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import { useAuth } from '../../contexts/AuthContext';
 const Header = () => {
  const navigate = useNavigate();
  const location = useLocation();
  const { currentUser, logout } = useAuth();
  const getTitle = () => {
    switch (location.pathname) {
      case '/':
        return '마이구독';
      case '/subscriptions':
        return '구독 서비스';
      default:
        if (location.pathname.startsWith('/subscriptions/')) {
          return '구독 상세';
        }
        return '마이구독';
    }
  };
  const handleLogout = async () => {
    await logout();
    navigate('/login');
  };
  return (
    <AppBar position="sticky" sx={{ backgroundColor: 'white', color: 'black' }}>
      <Toolbar>
        {location.pathname !== '/' && (
          <IconButton edge="start" onClick={() => navigate(-1)} sx={{ mr: 2 }}>
            <ArrowBackIcon />
          </IconButton>
        )}
        <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
          {getTitle()}
        </Typography>
        {currentUser && (
          <Button color="inherit" onClick={handleLogout}>
            로그아웃
          </Button>
        )}
      </Toolbar>
    </AppBar>
  );
 };
 export default Header;
--- a/src/components/common/Layout.js
+++ b/src/components/common/Layout.js
@ -0,0 +1,18 @@
 // src/components/common/Layout.js
 import React from 'react';
 import { Outlet } from 'react-router-dom';
 import { Container } from '@mui/material';
 import Header from './Header';
 const Layout = () => {
  return (
    <>
      <Header />
      <Container maxWidth="sm" sx={{ pt: 2, pb: 4 }}>
        <Outlet />
      </Container>
    </>
  );
 };
 export default Layout;
--- a/src/components/common/LoadingSpinner.js
+++ b/src/components/common/LoadingSpinner.js
@ -0,0 +1,23 @@
 // src/components/common/LoadingSpinner.js
 /*
 데이터 로딩 중 표시할 로딩 인디케이터
 */
 import React from 'react';
 import { CircularProgress, Box } from '@mui/material';
 const LoadingSpinner = () => {
  return (
    <Box 
      sx={{ 
        display: 'flex', 
        justifyContent: 'center', 
        alignItems: 'center',
        minHeight: '200px'
      }}
    >
      <CircularProgress />
    </Box>
  );
 };
 export default LoadingSpinner;
--- a/src/components/common/SubscriptionCard.js
+++ b/src/components/common/SubscriptionCard.js
@ -0,0 +1,58 @@
 // src/components/common/SubscriptionCard.js
 /*
 구독 서비스 정보를 카드 형태로 표시
 서비스 로고, 이름, 설명, 가격 표시
 클릭 이벤트 처리 가능
 */
 import React from 'react';
 import { Card, CardContent, CardMedia, Typography, Box } from '@mui/material';
 import { formatNumber } from '../../utils/formatters';
 const SubscriptionCard = ({ 
  logoUrl, 
  serviceName, 
  description, 
  price, 
  onClick,
  showPrice = true
 }) => {
  return (
    <Card 
      sx={{ 
        display: 'flex', 
        mb: 2, 
        cursor: 'pointer',
        '&:hover': {
          boxShadow: 3
        }
      }}
      onClick={onClick}
    >
      <CardMedia
        component="img"
        sx={{ width: 100, p: 2, objectFit: 'contain' }}
        image={`${logoUrl}`}
        alt={serviceName}
      />
      <Box sx={{ display: 'flex', flexDirection: 'column', flexGrow: 1 }}>
        <CardContent>
          <Typography variant="h6" component="div">
            {serviceName}
          </Typography>
          {description && (
            <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
              {description}
            </Typography>
          )}
          {showPrice && price && (
            <Typography variant="subtitle1" color="primary">
              월 {formatNumber(price)}원
            </Typography>
          )}
        </CardContent>
      </Box>
    </Card>
  );
 };
 export default SubscriptionCard;
--- a/src/components/main/MySubscriptions.js
+++ b/src/components/main/MySubscriptions.js
@ -0,0 +1,32 @@
 // src/components/main/MySubscriptions.js
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Typography, Box } from '@mui/material';
 import SubscriptionCard from '../common/SubscriptionCard';
 const MySubscriptions = ({ subscriptions }) => {
  const navigate = useNavigate();
  return (
    <Box sx={{ mb: 4 }}>
      <Typography variant="h6" gutterBottom>
        나의 구독 서비스
      </Typography>
      {subscriptions.length === 0 ? (
        <Typography variant="body1" color="text.secondary" sx={{ mt: 2 }}>
          아직 구독한 서비스가 없어요
        </Typography>
      ) : (
        subscriptions.map((subscription) => (
          <SubscriptionCard
            key={subscription.id}
            {...subscription}
            onClick={() => navigate(`/subscriptions/${subscription.id}`)}
          />
        ))
      )}
    </Box>
  );
 };
 export default MySubscriptions;
--- a/src/components/main/RecommendCategory.js
+++ b/src/components/main/RecommendCategory.js
@ -0,0 +1,51 @@
 // src/components/main/RecommendCategory.js
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Paper, Typography, Box, Button } from '@mui/material';
 const RecommendCategory = ({ categoryName, spendingCategory, totalSpending, baseDate }) => {
  const navigate = useNavigate();
  return (
    <Paper 
      elevation={3} 
      sx={{ 
        p: 3, 
        mb: 3,
        borderRadius: 2
      }}
    >
      <Typography variant="subtitle2" color="text.secondary" gutterBottom>
        {baseDate} 기준
      </Typography>
      <Typography variant="h6" gutterBottom>
        이런 구독은 어떠세요?
      </Typography>
      <Typography variant="body1" gutterBottom>
        지난 달 <strong>{spendingCategory}</strong> 카테고리에서<br />
        가장 많은 지출이 있었네요!
      </Typography>
      <Box 
        sx={{ 
          mt: 2, 
          mb: 2,
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center'
        }}
      >
        <Button 
          variant="contained" 
          color="primary"
          fullWidth
          onClick={() => navigate(`/subscriptions?category=${categoryName}`)}
          sx={{ mt: 2 }}
        >
          추천 구독 서비스 보기
        </Button>
      </Box>
    </Paper>
  );
 };
 export default RecommendCategory;
--- a/src/components/main/TotalFee.js
+++ b/src/components/main/TotalFee.js
@ -0,0 +1,44 @@
 // src/components/main/TotalFee.js
 import React from 'react';
 import { Paper, Typography, Box } from '@mui/material';
 import { formatNumber } from '../../utils/formatters';
 const feeLevelImages = {
  'liker': '/images/liker.png',
  'collector': '/images/collector.png',
  'addict': '/images/addict.png'
 };
 const TotalFee = ({ totalFee, feeLevel }) => {
  return (
    <Paper 
      elevation={3} 
      sx={{ 
        p: 3, 
        mb: 3, 
        textAlign: 'center',
        borderRadius: 2
      }}
    >
      <Box 
        component="img"
        src={feeLevelImages[feeLevel]}
        alt={feeLevel}
        sx={{ 
          width: 120, 
          height: 120, 
          mb: 2,
          objectFit: 'contain'
        }}
      />
      <Typography variant="h6" gutterBottom>
        이번 달 총 구독료
      </Typography>
      <Typography variant="h4" color="primary" fontWeight="bold">
        {formatNumber(totalFee)}원
      </Typography>
    </Paper>
  );
 };
 export default TotalFee;
--- a/src/components/subscriptions/CategoryList.js
+++ b/src/components/subscriptions/CategoryList.js
@ -0,0 +1,43 @@
 import React from 'react';
 import { Box, Grid, Button, styled } from '@mui/material';
 const CategoryButton = styled(Button)(({ theme }) => ({
  width: '100%',
  padding: theme.spacing(2),
  fontSize: '1.1rem',
  borderRadius: theme.spacing(1),
  textTransform: 'none',
  border: '1px solid',
  borderColor: theme.palette.grey[300],
  '&.selected': {
    backgroundColor: theme.palette.primary.main,
    color: theme.palette.primary.contrastText,
    boxShadow: theme.shadows[3],
    borderColor: 'transparent',
    '&:hover': {
      backgroundColor: theme.palette.primary.dark,
    }
  }
 }));
 const CategoryList = ({ categories, selectedCategory, onCategoryChange }) => {
  return (
    <Box sx={{ width: '100%', mb: 4, px: 2 }}>
      <Grid container spacing={2}>
        {categories.map((category) => (
          <Grid item xs={4} key={category.categoryId}>
            <CategoryButton
              variant={selectedCategory === category.categoryId ? "contained" : "outlined"}
              className={selectedCategory === category.categoryId ? 'selected' : ''}
              onClick={() => onCategoryChange(category.categoryId)}
            >
              {category.categoryName}
            </CategoryButton>
          </Grid>
        ))}
      </Grid>
    </Box>
  );
 };
 export default CategoryList;
--- a/src/components/subscriptions/SubscriptionDetail.js
+++ b/src/components/subscriptions/SubscriptionDetail.js
@ -0,0 +1,106 @@
 // src/components/subscriptions/SubscriptionDetail.js
 import React from 'react';
 import { 
  Box, 
  Typography, 
  Button, 
  Card, 
  CardMedia, 
  Divider,
  List,
  ListItem,
  ListItemIcon,
  ListItemText 
 } from '@mui/material';
 import PriceCheckIcon from '@mui/icons-material/PriceCheck';
 import GroupIcon from '@mui/icons-material/Group';
 import CategoryIcon from '@mui/icons-material/Category';
 import { formatNumber } from '../../utils/formatters';
 const SubscriptionDetail = ({ 
  serviceName, 
  logoUrl, 
  category,
  description, 
  price,
  maxSharedUsers,
  isSubscribed,
  onSubscribe,
  onCancel
 }) => {
  return (
    <Card sx={{ p: 3 }}>
      <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', mb: 3 }}>
        <CardMedia
          component="img"
          sx={{ width: 200, height: 200, objectFit: 'contain', mb: 2 }}
          image={`${logoUrl}`}
          alt={serviceName}
        />
        <Typography variant="h5" component="div" gutterBottom>
          {serviceName}
        </Typography>
      </Box>
      <Divider sx={{ mb: 3 }} />
      <List>
        <ListItem>
          <ListItemIcon>
            <CategoryIcon />
          </ListItemIcon>
          <ListItemText 
            primary="카테고리"
            secondary={category}
          />
        </ListItem>
        <ListItem>
          <ListItemIcon>
            <PriceCheckIcon />
          </ListItemIcon>
          <ListItemText 
            primary="월 구독료"
            secondary={`${formatNumber(price)}원`}
          />
        </ListItem>
        <ListItem>
          <ListItemIcon>
            <GroupIcon />
          </ListItemIcon>
          <ListItemText 
            primary="최대 공유 인원"
            secondary={`${maxSharedUsers}명`}
          />
        </ListItem>
      </List>
      <Typography variant="body1" sx={{ mt: 2, mb: 3 }}>
        {description}
      </Typography>
      <Box sx={{ mt: 3 }}>
        {isSubscribed ? (
          <Button
            variant="outlined"
            color="error"
            fullWidth
            onClick={onCancel}
          >
            구독 취소하기
          </Button>
        ) : (
          <Button
            variant="contained"
            color="primary"
            fullWidth
            onClick={onSubscribe}
          >
            구독하기
          </Button>
        )}
      </Box>
    </Card>
  );
 };
 export default SubscriptionDetail;
--- a/src/components/subscriptions/SubscriptionList.js
+++ b/src/components/subscriptions/SubscriptionList.js
@ -0,0 +1,31 @@
 // src/components/subscriptions/SubscriptionList.js
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Box, Typography } from '@mui/material';
 import SubscriptionCard from '../common/SubscriptionCard';
 const SubscriptionList = ({ services }) => {
  const navigate = useNavigate();
  if (!services.length) {
    return (
      <Typography variant="body1" color="text.secondary" sx={{ mt: 2 }}>
        해당 카테고리에 구독 서비스가 없습니다.
      </Typography>
    );
  }
  return (
    <Box>
      {services.map((service) => (
        <SubscriptionCard
          key={service.serviceId}
          {...service}
          onClick={() => navigate(`/subscriptions/${service.serviceId}`)}
        />
      ))}
    </Box>
  );
 };
 export default SubscriptionList;
--- a/src/contexts/AuthContext.js
+++ b/src/contexts/AuthContext.js
@ -0,0 +1,60 @@
 // src/contexts/AuthContext.js
 import React, { createContext, useContext, useState, useEffect } from 'react';
 import { authApi, setAuthToken, removeAuthToken } from '../services/api';
 const AuthContext = createContext(null);
 export const AuthProvider = ({ children }) => {
  const [currentUser, setCurrentUser] = useState(null);
  const [authInitialized, setAuthInitialized] = useState(false); // 변수명 변경
  useEffect(() => {
    const savedUser = localStorage.getItem('user');
    if (savedUser) {
      setCurrentUser(JSON.parse(savedUser));
    }
    setAuthInitialized(true); // 변수명 변경
  }, []);
  const login = async (userId, password) => {
    try {
      const response = await authApi.login({ userId, password });
      const { accessToken } = response.data.data;
      setAuthToken(accessToken);
      const user = { userId };
      setCurrentUser(user);
      setAuthInitialized(true); 
      localStorage.setItem('user', JSON.stringify(user));
      return true;
    } catch (error) {
      console.error('Login failed:', error);
      return false;
    }
  };
  const logout = async () => {
    try {
      if (currentUser) {
        await authApi.logout({ userId: currentUser.userId });
      }
    } finally {
      removeAuthToken();
      setCurrentUser(null);
      localStorage.removeItem('user');
    }
  };
  return (
    <AuthContext.Provider value={{ currentUser, login, logout, authInitialized }}>
      {children}
    </AuthContext.Provider>
  );
 };
 export const useAuth = () => {
  const context = useContext(AuthContext);
  if (!context) {
    throw new Error('useAuth must be used within an AuthProvider');
  }
  return context;
 };
--- a/src/index.css
+++ b/src/index.css
@ -0,0 +1,16 @@
 /* src/index.css */
 * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
      'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
      sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: #f5f5f5;
  }
--- a/src/index.js
+++ b/src/index.js
@ -0,0 +1,15 @@
 // src/index.js
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import { BrowserRouter } from 'react-router-dom';
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
 );
--- a/src/pages/LoginPage.js
+++ b/src/pages/LoginPage.js
@ -0,0 +1,73 @@
 // src/pages/LoginPage.js
 import React, { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Box, Typography, Paper } from '@mui/material';
 import { useAuth } from '../contexts/AuthContext';
 import LoginForm from '../components/auth/LoginForm';
 const LoginPage = () => {
  const navigate = useNavigate();
  const { currentUser, login } = useAuth();
  const [error, setError] = useState('');
  useEffect(() => {
    if (currentUser) {
      navigate('/');
    }
  }, [currentUser, navigate]);
  const handleLogin = async (userId, password) => {
    try {
      setError('');
      const success = await login(userId, password);
      if (success) {
        navigate('/');
      } else {
        setError('아이디 또는 비밀번호가 올바르지 않습니다.');
      }
    } catch (err) {
      setError('로그인 중 오류가 발생했습니다. 다시 시도해주세요.');
    }
  };
  return (
    <Box
      sx={{
        minHeight: '100vh',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        p: 2
      }}
    >
      <Paper 
        elevation={3}
        sx={{
          width: '100%',
          maxWidth: 400,
          p: 4,
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center'
        }}
      >
        <Typography 
          component="h1" 
          variant="h4" 
          gutterBottom
          sx={{ mb: 4 }}
        >
          마이구독
        </Typography>
        <LoginForm 
          onSubmit={handleLogin}
          error={error}
        />
      </Paper>
    </Box>
  );
 };
 export default LoginPage;
--- a/src/pages/MainPage.js
+++ b/src/pages/MainPage.js
@ -0,0 +1,73 @@
 // src/pages/MainPage.js
 import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Box } from '@mui/material';
 import { useAuth } from '../contexts/AuthContext';
 import TotalFee from '../components/main/TotalFee';
 import MySubscriptions from '../components/main/MySubscriptions';
 import RecommendCategory from '../components/main/RecommendCategory';
 import LoadingSpinner from '../components/common/LoadingSpinner';
 import ErrorMessage from '../components/common/ErrorMessage';
 import { mySubscriptionApi, recommendApi, handleApiResponse } from '../services/api';
 const MainPage = () => {
  const navigate = useNavigate();
  const { currentUser, authInitialized } = useAuth();
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [totalFee, setTotalFee] = useState(null);
  const [subscriptions, setSubscriptions] = useState([]);
  const [recommendedCategory, setRecommendedCategory] = useState(null);
  useEffect(() => {
    // 로그인 체크
    if (authInitialized && !currentUser) { // loading 상태 체크 추가
      navigate('/login');
      return;
    }
    if(authInitialized) {
      const fetchData = async () => {
        try {
          setLoading(true);
          setError(null);
          const [totalFeeResponse, subscriptionsResponse, recommendResponse] = await Promise.all([
            mySubscriptionApi.getTotalFee(currentUser.userId),
            mySubscriptionApi.getMySubscriptions(currentUser.userId),
            recommendApi.getRecommendedCategory(currentUser.userId)
          ]);
          setTotalFee(handleApiResponse(totalFeeResponse));
          setSubscriptions(handleApiResponse(subscriptionsResponse));
          setRecommendedCategory(handleApiResponse(recommendResponse));
        } catch (err) {
          setError(err.message);
        } finally {
          setLoading(false);
        }
      };
      fetchData();
    }
  }, [currentUser, navigate, authInitialized]);
  if (loading) return <LoadingSpinner />;
  if (error) return <ErrorMessage message={error} />;
  return (
    <Box>
      <TotalFee 
        totalFee={totalFee?.totalFee} 
        feeLevel={totalFee?.feeLevel}
      />
      <MySubscriptions subscriptions={subscriptions} />
      {recommendedCategory && (
        <RecommendCategory {...recommendedCategory} />
      )}
    </Box>
  );
 };
 export default MainPage;
--- a/src/pages/SubscriptionDetailPage.js
+++ b/src/pages/SubscriptionDetailPage.js
@ -0,0 +1,87 @@
 // src/pages/SubscriptionDetailPage.js
 import React, { useEffect, useState } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import { useAuth } from '../contexts/AuthContext';
 import SubscriptionDetail from '../components/subscriptions/SubscriptionDetail';
 import LoadingSpinner from '../components/common/LoadingSpinner';
 import ErrorMessage from '../components/common/ErrorMessage';
 import { mySubscriptionApi, handleApiResponse } from '../services/api';
 const SubscriptionDetailPage = () => {
  const { id } = useParams();
  const navigate = useNavigate();
  const { currentUser, authInitialized } = useAuth();
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [subscription, setSubscription] = useState(null);
  const [isSubscribed, setIsSubscribed] = useState(false);
  useEffect(() => {
    if (authInitialized && !currentUser) { // login여부가 완료되고 현재 유저 정보가 없을때 로그인 페이지로 보냄 
      navigate('/login');
      return;
    }
    if(authInitialized) {
      const fetchData = async () => {
        try {
          setLoading(true);
          setError(null);
          // 구독 상세 정보와 사용자의 구독 목록을 동시에 조회
          const [detailResponse, mySubsResponse] = await Promise.all([
            mySubscriptionApi.getSubscriptionDetail(id),
            mySubscriptionApi.getMySubscriptions(currentUser.userId)
          ]);
          const detailData = handleApiResponse(detailResponse);
          const mySubsData = handleApiResponse(mySubsResponse);
          setSubscription(detailData);
          // 현재 서비스가 사용자의 구독 목록에 있는지 확인
          setIsSubscribed(mySubsData.some(sub => sub.id === parseInt(id)));
        } catch (err) {
          setError(err.message);
        } finally {
          setLoading(false);
        }
      };
      fetchData();    
    }
  }, [currentUser, navigate, id, authInitialized]);
  const handleSubscribe = async () => {
    try {
      await mySubscriptionApi.subscribe(id, currentUser.userId);
      navigate('/');
    } catch (err) {
      setError(err.message);
    }
  };
  const handleCancel = async () => {
    try {
      await mySubscriptionApi.cancelSubscription(id);
      navigate('/');
    } catch (err) {
      setError(err.message);
    }
  };
  if (loading) return <LoadingSpinner />;
  if (error) return <ErrorMessage message={error} />;
  if (!subscription) return <ErrorMessage message="구독 서비스를 찾을 수 없습니다." />;
  return (
    <SubscriptionDetail
      {...subscription}
      isSubscribed={isSubscribed}
      onSubscribe={handleSubscribe}
      onCancel={handleCancel}
    />
  );
 };
 export default SubscriptionDetailPage;
--- a/src/pages/SubscriptionListPage.js
+++ b/src/pages/SubscriptionListPage.js
@ -0,0 +1,94 @@
 // src/pages/SubscriptionListPage.js
 import React, { useEffect, useState } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import { useAuth } from '../contexts/AuthContext';
 import { Box } from '@mui/material';
 import CategoryList from '../components/subscriptions/CategoryList';
 import SubscriptionList from '../components/subscriptions/SubscriptionList';
 import LoadingSpinner from '../components/common/LoadingSpinner';
 import ErrorMessage from '../components/common/ErrorMessage';
 import { mySubscriptionApi, handleApiResponse } from '../services/api';
 const SubscriptionListPage = () => {
  const navigate = useNavigate();
  const { currentUser, authInitialized } = useAuth();
  const [searchParams, setSearchParams] = useSearchParams();
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [categories, setCategories] = useState([]);
  const [services, setServices] = useState([]);
  const selectedCategory = searchParams.get('category') || '';
  useEffect(() => {
    if (authInitialized && !currentUser) { // login여부가 완료되고 현재 유저 정보가 없을때 로그인 페이지로 보냄 
      navigate('/login');
      return;
    }
    if(authInitialized) {
      const fetchCategories = async () => {
        try {
          setLoading(true);
          setError(null);
          const response = await mySubscriptionApi.getCategories();
          const categoryList = handleApiResponse(response);
          setCategories(categoryList);
          // 선택된 카테고리가 없으면 첫 번째 카테고리 선택
          if (!selectedCategory && categoryList.length > 0) {
            setSearchParams({ category: categoryList[0].categoryId });
          }
        } catch (err) {
          setError(err.message);
        } finally {
          setLoading(false);
        }
      };
      fetchCategories();    
    }
  }, [currentUser, navigate, selectedCategory, setSearchParams, authInitialized]);
  useEffect(() => {
    if(authInitialized) {
      const fetchServices = async () => {
        if (!selectedCategory) return;
        try {
          setLoading(true);
          setError(null);
          const response = await mySubscriptionApi.getServicesByCategory(selectedCategory);
          setServices(handleApiResponse(response));
        } catch (err) {
          setError(err.message);
        } finally {
          setLoading(false);
        }
      };
      fetchServices();   
    }
  }, [selectedCategory, authInitialized]);
  const handleCategoryChange = (categoryId) => {
    setSearchParams({ category: categoryId });
  };
  if (loading) return <LoadingSpinner />;
  if (error) return <ErrorMessage message={error} />;
  return (
    <Box>
      <CategoryList
        categories={categories}
        selectedCategory={selectedCategory}
        onCategoryChange={handleCategoryChange}
      />
      <SubscriptionList services={services} />
    </Box>
  );
 };
 export default SubscriptionListPage;
--- a/src/services/api.js
+++ b/src/services/api.js
@ -0,0 +1,91 @@
 // src/services/api.js
 import axios from 'axios';
 // 서비스별 base URL
 const MEMBER_URL = process.env.REACT_APP_MEMBER_URL || 'http://localhost:8081';
 const MYSUB_URL = process.env.REACT_APP_MYSUB_URL || 'http://localhost:8082';
 const RECOMMEND_URL = process.env.REACT_APP_RECOMMEND_URL || 'http://localhost:8083';
 // 서비스별 axios 인스턴스 생성
 const createAxiosInstance = (baseURL) => {
  const instance = axios.create({
    baseURL,
    headers: {
      'Content-Type': 'application/json',
    },
  });
  // 토큰 인터셉터 추가
  instance.interceptors.request.use(
    (config) => {
      // login API는 토큰이 필요없음
      if (config.url === '/api/auth/login') {
        return config;
      }
      const token = localStorage.getItem('token');
      if (token) {
        config.headers.Authorization = `Bearer ${token}`;
      }
      return config;
    },
    (error) => {
      return Promise.reject(error);
    }
  );
  return instance;
 };
 const memberApi = createAxiosInstance(MEMBER_URL);
 const mysubApi = createAxiosInstance(MYSUB_URL);
 const recommendationApi = createAxiosInstance(RECOMMEND_URL);
 // 인증 관련 API
 export const authApi = {
  login: (loginRequest) => memberApi.post('/api/auth/login', loginRequest),
  logout: (logoutRequest) => memberApi.post('/api/auth/logout', logoutRequest)
 };
 // 마이구독 관련 API
 export const mySubscriptionApi = {
  getTotalFee: (userId) => mysubApi.get(`/api/mysub/total-fee?userId=${userId}`),
  getMySubscriptions: (userId) => mysubApi.get(`/api/mysub/list?userId=${userId}`),
  getSubscriptionDetail: (id) => mysubApi.get(`/api/mysub/services/${id}`),
  subscribe: (id, userId) => mysubApi.post(`/api/mysub/services/${id}/subscribe?userId=${userId}`),
  cancelSubscription: (id) => mysubApi.delete(`/api/mysub/services/${id}`),
  getCategories: () => mysubApi.get('/api/mysub/categories'),
  getServicesByCategory: (categoryId) => mysubApi.get(`/api/mysub/services?categoryId=${categoryId}`)
 };
 // 추천 관련 API
 export const recommendApi = {  // 이름을 recommendationApi로 변경
  getRecommendedCategory: (userId) => recommendationApi.get(`/api/recommend/categories?userId=${userId}`)
 };
 // API 응답 처리 헬퍼 함수
 export const handleApiResponse = (response) => {
  const { status, message, data } = response.data;
  if (status === 200) {
    return data;
  } else {
    throw new Error(message);
  }
 };
 // 인증 토큰 관리 헬퍼 함수
 export const setAuthToken = (token) => {
  if (token) {
    localStorage.setItem('token', token);
  } else {
    localStorage.removeItem('token');
  }
 };
 export const getAuthToken = () => {
  return localStorage.getItem('token');
 };
 export const removeAuthToken = () => {
  localStorage.removeItem('token');
 };
--- a/src/services/auth.js
+++ b/src/services/auth.js
--- a/src/utils/formatters.js
+++ b/src/utils/formatters.js
@ -0,0 +1,4 @@
 // src/utils/formatters.js
 export const formatNumber = (number) => {
    return number?.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
 };