“슬기로운 장보기 플래너 웹앱 스타터 코드”

“슬기로운 장보기 플래너 웹앱 스타터 코드”

 

 

“슬기로운 소비 활동을 위한 일주일 장보기 플래너” 웹앱을 만들기 위한 React 기반 스타터 코드입니다.

📦 1. 프로젝트 설치 (Vite 사용)

npm create vite@latest shopping-planner --template react
cd shopping-planner
npm install
npm run dev

📁 2. 폴더 구조 예시

shopping-planner/
├── src/
│   ├── App.jsx
│   ├── data/recipes.js
│   ├── utils/getIngredients.js
│   ├── components/
│   │   ├── MealPlanner.jsx
│   │   ├── IngredientList.jsx
│   │   └── BudgetChecker.jsx
│   └── index.css

🧾 3. recipes.js – 요리와 재료 매핑

export const recipes = {
  김치찌개: ['김치', '돼지고기', '두부', '파'],
  된장국: ['된장', '애호박', '두부', '파'],
  계란말이: ['계란', '당근', '양파'],
  비빔밥: ['밥', '계란', '나물', '고추장'],
};

🔎 4. getIngredients.js – 재료 추출 유틸

import { recipes } from '../data/recipes';

export const getIngredients = (mealPlan) => {
  const ingredients = new Set();
  Object.values(mealPlan).forEach((meal) => {
    if (recipes[meal]) {
      recipes[meal].forEach(item => ingredients.add(item));
    }
  });
  return Array.from(ingredients);
};

📝 5. MealPlanner.jsx – 식단 입력 UI

import React from 'react';

const days = ['월', '화', '수', '목', '금', '토', '일'];
const options = ['김치찌개', '된장국', '계란말이', '비빔밥', ''];

const MealPlanner = ({ mealPlan, setMealPlan }) => {
  const handleChange = (day, value) => {
    setMealPlan(prev => ({ ...prev, [day]: value }));
  };

  return (
    <div>
      <h2>📝 요일별 식단 입력</h2>
      {days.map(day => (
        <div key={day}>
          <label>{day}요일:</label>
          <select value={mealPlan[day] || ''} onChange={(e) => handleChange(day, e.target.value)}>
            {options.map(opt => (
              <option key={opt} value={opt}>{opt}</option>
            ))}
          </select>
        </div>
      ))}
    </div>
  );
};

export default MealPlanner;

🛒 6. IngredientList.jsx – 재료 리스트 출력

import React from 'react';

const IngredientList = ({ ingredients }) => {
  return (
    <div>
      <h2>🛒 장보기 재료 목록</h2>
      <ul>
        {ingredients.map((item, idx) => (
          <li key={idx}>✅ {item}</li>
        ))}
      </ul>
    </div>
  );
};

export default IngredientList;

💰 7. BudgetChecker.jsx – 예산 확인

import React, { useState } from 'react';

const prices = {
  김치: 3000,
  돼지고기: 7000,
  두부: 2000,
  파: 1000,
  된장: 2500,
  애호박: 1500,
  계란: 2500,
  당근: 1000,
  양파: 1000,
  밥: 1000,
  나물: 2000,
  고추장: 2000,
};

const BudgetChecker = ({ ingredients }) => {
  const [budget, setBudget] = useState(20000);

  const total = ingredients.reduce((sum, item) => sum + (prices[item] || 0), 0);
  const over = total > budget;

  return (
    <div>
      <h2>💰 예산 확인</h2>
      <input
        type="number"
        value={budget}
        onChange={(e) => setBudget(Number(e.target.value))}
        placeholder="예산 입력"
      />
      <p>예상 비용: {total.toLocaleString()}원</p>
      {over ? (
        <p style={{ color: 'red' }}>⚠️ 예산 초과!</p>
      ) : (
        <p style={{ color: 'green' }}>👌 예산 내입니다</p>
      )}
    </div>
  );
};

export default BudgetChecker;

📱 8. App.jsx – 전체 앱 구성

import React, { useState, useEffect } from 'react';
import MealPlanner from './components/MealPlanner';
import IngredientList from './components/IngredientList';
import BudgetChecker from './components/BudgetChecker';
import { getIngredients } from './utils/getIngredients';
import './index.css';

const App = () => {
  const [mealPlan, setMealPlan] = useState({});
  const [ingredients, setIngredients] = useState([]);

  useEffect(() => {
    setIngredients(getIngredients(mealPlan));
  }, [mealPlan]);

  return (
    <div className="container">
      <h1>🥕 슬기로운 장보기 플래너</h1>
      <MealPlanner mealPlan={mealPlan} setMealPlan={setMealPlan} />
      <IngredientList ingredients={ingredients} />
      <BudgetChecker ingredients={ingredients} />
    </div>
  );
};

export default App;

🎨 9. index.css – 기본 스타일

body {
  font-family: sans-serif;
  background-color: #f8f9fa;
  padding: 20px;
}

.container {
  max-width: 600px;
  margin: auto;
  background: #fff;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 0 8px rgba(0,0,0,0.1);
}

h1, h2 {
  color: #333;
}

input, select {
  margin: 4px 0 12px;
  padding: 8px;
  width: 100%;
  box-sizing: border-box;
}

🚀 배포 팁

Vercel 또는 Netlify에 배포하면 무료로 운영할 수 있습니다.

npm run build

→ 생성된 dist/ 폴더를 업로드하거나 CLI로 연동 배포

✅ 마무리

이 스타터 코드는 주부, 혼자 사는 직장인, 소비 최적화를 원하는 누구에게나 유용한 앱으로 발전시킬 수 있습니다.