Initial commit: Sokuree Consultant website
This commit is contained in:
choibk
commit
b473f40065
24
.gitignore
vendored
Normal file
24
.gitignore
vendored
Normal file
@ -0,0 +1,24 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
16
README.md
Normal file
16
README.md
Normal file
@ -0,0 +1,16 @@
|
||||
# React + Vite
|
||||
|
||||
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
||||
|
||||
Currently, two official plugins are available:
|
||||
|
||||
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
|
||||
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
||||
|
||||
## React Compiler
|
||||
|
||||
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
|
||||
|
||||
## Expanding the ESLint configuration
|
||||
|
||||
If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
|
||||
29
eslint.config.js
Normal file
29
eslint.config.js
Normal file
@ -0,0 +1,29 @@
|
||||
import js from '@eslint/js'
|
||||
import globals from 'globals'
|
||||
import reactHooks from 'eslint-plugin-react-hooks'
|
||||
import reactRefresh from 'eslint-plugin-react-refresh'
|
||||
import { defineConfig, globalIgnores } from 'eslint/config'
|
||||
|
||||
export default defineConfig([
|
||||
globalIgnores(['dist']),
|
||||
{
|
||||
files: ['**/*.{js,jsx}'],
|
||||
extends: [
|
||||
js.configs.recommended,
|
||||
reactHooks.configs.flat.recommended,
|
||||
reactRefresh.configs.vite,
|
||||
],
|
||||
languageOptions: {
|
||||
ecmaVersion: 2020,
|
||||
globals: globals.browser,
|
||||
parserOptions: {
|
||||
ecmaVersion: 'latest',
|
||||
ecmaFeatures: { jsx: true },
|
||||
sourceType: 'module',
|
||||
},
|
||||
},
|
||||
rules: {
|
||||
'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
|
||||
},
|
||||
},
|
||||
])
|
||||
13
index.html
Normal file
13
index.html
Normal file
@ -0,0 +1,13 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>SmartBiz Tech - 소상공인 스마트 기술 파트너</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.jsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
3265
package-lock.json
generated
Normal file
3265
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
29
package.json
Normal file
29
package.json
Normal file
@ -0,0 +1,29 @@
|
||||
{
|
||||
"name": "antigravity",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"lint": "eslint .",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^1.13.2",
|
||||
"react": "^19.2.0",
|
||||
"react-dom": "^19.2.0",
|
||||
"react-router-dom": "^7.12.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.39.1",
|
||||
"@types/react": "^19.2.5",
|
||||
"@types/react-dom": "^19.2.3",
|
||||
"@vitejs/plugin-react": "^5.1.1",
|
||||
"eslint": "^9.39.1",
|
||||
"eslint-plugin-react-hooks": "^7.0.1",
|
||||
"eslint-plugin-react-refresh": "^0.4.24",
|
||||
"globals": "^16.5.0",
|
||||
"vite": "^7.2.4"
|
||||
}
|
||||
}
|
||||
BIN
public/fmea_case.jpg
Normal file
BIN
public/fmea_case.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 185 KiB |
BIN
public/sqc_case.jpg
Normal file
BIN
public/sqc_case.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 150 KiB |
1
public/vite.svg
Normal file
1
public/vite.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
42
src/App.css
Normal file
42
src/App.css
Normal file
@ -0,0 +1,42 @@
|
||||
#root {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 6em;
|
||||
padding: 1.5em;
|
||||
will-change: filter;
|
||||
transition: filter 300ms;
|
||||
}
|
||||
.logo:hover {
|
||||
filter: drop-shadow(0 0 2em #646cffaa);
|
||||
}
|
||||
.logo.react:hover {
|
||||
filter: drop-shadow(0 0 2em #61dafbaa);
|
||||
}
|
||||
|
||||
@keyframes logo-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
a:nth-of-type(2) .logo {
|
||||
animation: logo-spin infinite 20s linear;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 2em;
|
||||
}
|
||||
|
||||
.read-the-docs {
|
||||
color: #888;
|
||||
}
|
||||
47
src/App.jsx
Normal file
47
src/App.jsx
Normal file
@ -0,0 +1,47 @@
|
||||
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
|
||||
import { useEffect } from 'react';
|
||||
import { useLocation } from 'react-router-dom';
|
||||
|
||||
import Layout from './components/Layout';
|
||||
import Home from './pages/Home';
|
||||
import About from './pages/About';
|
||||
import ServiceDetail from './pages/ServiceDetail';
|
||||
import Cases from './pages/Cases';
|
||||
import Resources from './pages/Resources';
|
||||
import News from './pages/News';
|
||||
import NewsDetail from './pages/NewsDetail';
|
||||
import ContactPage from './pages/ContactPage';
|
||||
|
||||
function ScrollToTopComp() {
|
||||
const { pathname } = useLocation();
|
||||
|
||||
useEffect(() => {
|
||||
window.scrollTo(0, 0);
|
||||
}, [pathname]);
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<Router>
|
||||
<ScrollToTopComp />
|
||||
<Routes>
|
||||
<Route path="/" element={<Layout />}>
|
||||
<Route index element={<Home />} />
|
||||
<Route path="about" element={<About />} />
|
||||
<Route path="services" element={<ServiceDetail />} />
|
||||
<Route path="services/:serviceId" element={<ServiceDetail />} />
|
||||
<Route path="cases" element={<Cases />} />
|
||||
<Route path="resources" element={<Resources />} />
|
||||
<Route path="news" element={<News />} />
|
||||
<Route path="news/:slug" element={<NewsDetail />} />
|
||||
<Route path="resources/:slug" element={<NewsDetail />} /> {/* Reuse NewsDetail for resources */}
|
||||
<Route path="contact" element={<ContactPage />} />
|
||||
</Route>
|
||||
</Routes>
|
||||
</Router>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
96
src/api/wordpress.js
Normal file
96
src/api/wordpress.js
Normal file
@ -0,0 +1,96 @@
|
||||
import axios from 'axios';
|
||||
import { WP_API_CONFIG } from '../config/wordpress';
|
||||
|
||||
const api = axios.create({
|
||||
baseURL: WP_API_CONFIG.BASE_URL,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
});
|
||||
|
||||
export const wpApi = {
|
||||
/**
|
||||
* Fetch latest posts
|
||||
* @param {number} page - Page number
|
||||
* @param {number} perPage - Posts per page
|
||||
*/
|
||||
getPosts: async (page = 1, perPage = WP_API_CONFIG.PER_PAGE, categoryId = null) => {
|
||||
try {
|
||||
const params = {
|
||||
page,
|
||||
per_page: perPage,
|
||||
_embed: true, // Include featured images, author info, etc.
|
||||
};
|
||||
|
||||
if (categoryId) {
|
||||
params.categories = categoryId;
|
||||
}
|
||||
|
||||
const response = await api.get(WP_API_CONFIG.ENDPOINTS.POSTS, { params });
|
||||
return {
|
||||
data: response.data,
|
||||
total: parseInt(response.headers['x-wp-total'], 10),
|
||||
totalPages: parseInt(response.headers['x-wp-totalpages'], 10),
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('Error fetching posts:', error);
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Fetch a single post by slug
|
||||
* @param {string} slug
|
||||
*/
|
||||
getPostBySlug: async (slug) => {
|
||||
try {
|
||||
const response = await api.get(WP_API_CONFIG.ENDPOINTS.POSTS, {
|
||||
params: {
|
||||
slug,
|
||||
_embed: true,
|
||||
},
|
||||
});
|
||||
return response.data[0];
|
||||
} catch (error) {
|
||||
console.error('Error fetching post by slug:', error);
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Fetch a page by slug (e.g., 'about', 'contact')
|
||||
* @param {string} slug
|
||||
*/
|
||||
getPageBySlug: async (slug) => {
|
||||
try {
|
||||
const response = await api.get(WP_API_CONFIG.ENDPOINTS.PAGES, {
|
||||
params: {
|
||||
slug,
|
||||
_embed: true,
|
||||
},
|
||||
});
|
||||
return response.data[0];
|
||||
} catch (error) {
|
||||
console.error('Error fetching page by slug:', error);
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Fetch categories
|
||||
* @param {string} slug - Optional slug to filter by
|
||||
*/
|
||||
getCategories: async (slug = null) => {
|
||||
try {
|
||||
const params = {};
|
||||
if (slug) {
|
||||
params.slug = slug;
|
||||
}
|
||||
const response = await api.get(WP_API_CONFIG.ENDPOINTS.CATEGORIES, { params });
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
console.error('Error fetching categories:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
};
|
||||
BIN
src/assets/consultant_profile.png
Normal file
BIN
src/assets/consultant_profile.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 847 KiB |
1
src/assets/react.svg
Normal file
1
src/assets/react.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 4.0 KiB |
24
src/components/About.jsx
Normal file
24
src/components/About.jsx
Normal file
@ -0,0 +1,24 @@
|
||||
const About = () => {
|
||||
return (
|
||||
<section id="about" className="section-padding bg-light">
|
||||
<div className="container">
|
||||
<h2 className="section-title">회사 소개</h2>
|
||||
<div className="about-content">
|
||||
<div className="about-text">
|
||||
<h3>소상공인과 함께 성장하는 스마트 파트너</h3>
|
||||
<p>
|
||||
SmartBiz Tech는 급변하는 디지털 시대에 소상공인 여러분이 경쟁력을 갖출 수 있도록
|
||||
최고의 스마트 기술을 합리적인 가격에 공급합니다.
|
||||
</p>
|
||||
<p>
|
||||
단순한 기기 판매가 아닌, 매장 환경 분석부터 설치, 유지보수까지
|
||||
원스톱 서비스를 제공하여 사장님은 경영에만 집중하실 수 있도록 돕겠습니다.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default About;
|
||||
126
src/components/Contact.jsx
Normal file
126
src/components/Contact.jsx
Normal file
@ -0,0 +1,126 @@
|
||||
import { useState, useRef } from 'react';
|
||||
|
||||
const Contact = () => {
|
||||
const [formData, setFormData] = useState({
|
||||
name: '',
|
||||
phone: '',
|
||||
message: '',
|
||||
honeypot: '' // Hidden field for spam bots
|
||||
});
|
||||
const [status, setStatus] = useState('');
|
||||
const startTime = useRef(Date.now());
|
||||
|
||||
const handleChange = (e) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData(prev => ({ ...prev, [name]: value }));
|
||||
};
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
// 1. Honeypot Check
|
||||
if (formData.honeypot) {
|
||||
console.log('Spam bot detected (honeypot filled)');
|
||||
return;
|
||||
}
|
||||
|
||||
setStatus('전송 중...');
|
||||
|
||||
try {
|
||||
const response = await fetch("https://formsubmit.co/ajax/contact@qideun.com", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"Accept": "application/json"
|
||||
},
|
||||
body: JSON.stringify({
|
||||
name: formData.name,
|
||||
phone: formData.phone,
|
||||
message: formData.message,
|
||||
_subject: `[Sokuree] 새로운 문의가 도착했습니다: ${formData.name}님`
|
||||
})
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
setStatus('문의가 성공적으로 접수되었습니다! 담당자가 곧 연락드리겠습니다.');
|
||||
setFormData({ name: '', phone: '', message: '', honeypot: '' });
|
||||
alert('문의가 접수되었습니다. 확인 후 연락드리겠습니다!');
|
||||
} else {
|
||||
setStatus('전송에 실패했습니다. 잠시 후 다시 시도해주세요.');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error:', error);
|
||||
setStatus('오류가 발생했습니다. 직접 이메일로 연락 부탁드립니다.');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<section id="contact" className="section-padding bg-light">
|
||||
<div className="container">
|
||||
<h2 className="section-title">문의하기</h2>
|
||||
<p className="section-subtitle" style={{ textAlign: 'center' }}>도입 상담부터 견적 문의까지 친절하게 안내해 드립니다.</p>
|
||||
|
||||
<form className="contact-form" onSubmit={handleSubmit}>
|
||||
{/* Honeypot Field - Hidden with CSS */}
|
||||
<div style={{ display: 'none' }}>
|
||||
<label htmlFor="honeypot">Leave this field blank</label>
|
||||
<input
|
||||
type="text"
|
||||
name="honeypot"
|
||||
id="honeypot"
|
||||
value={formData.honeypot}
|
||||
onChange={handleChange}
|
||||
tabIndex="-1"
|
||||
autoComplete="off"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="name">담당자명</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
name="name"
|
||||
required
|
||||
value={formData.name}
|
||||
onChange={handleChange}
|
||||
placeholder="홍길동"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="phone">연락처</label>
|
||||
<input
|
||||
type="tel"
|
||||
id="phone"
|
||||
name="phone"
|
||||
required
|
||||
value={formData.phone}
|
||||
onChange={handleChange}
|
||||
placeholder="010-1234-5678"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="message">문의 내용</label>
|
||||
<textarea
|
||||
id="message"
|
||||
name="message"
|
||||
required
|
||||
value={formData.message}
|
||||
onChange={handleChange}
|
||||
placeholder="업종, 필요 품목 등 상세 내용을 적어주세요."
|
||||
rows="5"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<button type="submit" className="btn btn-primary">상담 신청하기</button>
|
||||
|
||||
{status && <p className="form-status">{status}</p>}
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Contact;
|
||||
26
src/components/Footer.jsx
Normal file
26
src/components/Footer.jsx
Normal file
@ -0,0 +1,26 @@
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
const Footer = () => {
|
||||
return (
|
||||
<footer className="footer-dark">
|
||||
<div className="container footer-container">
|
||||
<div className="footer-info">
|
||||
<h3>Sokuree Consultant</h3>
|
||||
<p>Representative: Gildong Hong | Business License: 000-00-00000</p>
|
||||
<p>주소: 서울특별시 ... (추후 업데이트)</p>
|
||||
<p>이메일: contact@sokuree.com | 전화: 02-0000-0000</p>
|
||||
</div>
|
||||
<div className="footer-links">
|
||||
<Link to="/news">소식</Link>
|
||||
<Link to="/privacy">개인정보처리방침</Link>
|
||||
<Link to="/terms">이용약관</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="footer-copyright">
|
||||
<p>© {new Date().getFullYear()} Sokuree Consultant. All rights reserved.</p>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
};
|
||||
|
||||
export default Footer;
|
||||
18
src/components/Hero.jsx
Normal file
18
src/components/Hero.jsx
Normal file
@ -0,0 +1,18 @@
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
const Hero = () => {
|
||||
return (
|
||||
<section id="home" className="hero">
|
||||
<div className="container hero-content">
|
||||
<h1>소상공인과 함께 성장하는<br />스마트 파트너</h1>
|
||||
<p>교육 · 스마트제조 · ISO 인증 · 업무시스템 구축을 한 곳에서 해결하세요.</p>
|
||||
<div className="hero-btns">
|
||||
<Link to="/contact" className="btn btn-primary">상담 신청</Link>
|
||||
<Link to="/services" className="btn btn-outline">서비스 보기</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Hero;
|
||||
18
src/components/Layout.jsx
Normal file
18
src/components/Layout.jsx
Normal file
@ -0,0 +1,18 @@
|
||||
import { Outlet } from 'react-router-dom';
|
||||
import Navbar from './Navbar';
|
||||
import Footer from './Footer';
|
||||
|
||||
const Layout = () => {
|
||||
return (
|
||||
<>
|
||||
<Navbar />
|
||||
<main>
|
||||
<Outlet />
|
||||
</main>
|
||||
<Footer />
|
||||
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Layout;
|
||||
35
src/components/Navbar.jsx
Normal file
35
src/components/Navbar.jsx
Normal file
@ -0,0 +1,35 @@
|
||||
import { useState } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
const Navbar = () => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
const toggleMenu = () => {
|
||||
setIsOpen(!isOpen);
|
||||
};
|
||||
|
||||
return (
|
||||
<nav className="navbar">
|
||||
<div className="container navbar-container">
|
||||
<Link to="/" className="logo">Sokuree Consultant</Link>
|
||||
|
||||
<div className={`nav-links ${isOpen ? 'active' : ''}`}>
|
||||
<Link to="/about" onClick={toggleMenu}>회사소개</Link>
|
||||
<Link to="/services" onClick={toggleMenu}>서비스</Link>
|
||||
<Link to="/cases" onClick={toggleMenu}>사례</Link>
|
||||
<Link to="/news" onClick={toggleMenu}>소식</Link>
|
||||
<Link to="/resources" onClick={toggleMenu}>자료실</Link>
|
||||
|
||||
</div>
|
||||
|
||||
<div className="hamburger" onClick={toggleMenu}>
|
||||
<span className="bar"></span>
|
||||
<span className="bar"></span>
|
||||
<span className="bar"></span>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
};
|
||||
|
||||
export default Navbar;
|
||||
117
src/components/PostCard.css
Normal file
117
src/components/PostCard.css
Normal file
@ -0,0 +1,117 @@
|
||||
/* PostCard.css */
|
||||
|
||||
.post-card {
|
||||
background-color: white;
|
||||
border-radius: 1rem;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
overflow: hidden;
|
||||
transition: box-shadow 0.3s ease, transform 0.3s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.post-card:hover {
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
.post-card-image-wrapper {
|
||||
height: 12rem;
|
||||
background-color: #e5e7eb;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.post-card-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.post-card:hover .post-card-image {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.post-card-fallback {
|
||||
font-size: 3rem;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.post-card-content {
|
||||
padding: 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.post-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 0.875rem;
|
||||
color: #6b7280;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.post-category-badge {
|
||||
color: #2563eb;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.post-meta-divider {
|
||||
margin: 0 0.5rem;
|
||||
color: #e5e7eb;
|
||||
}
|
||||
|
||||
.post-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.75rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.post-title a {
|
||||
color: #111827;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.post-title a:hover {
|
||||
color: #2563eb;
|
||||
}
|
||||
|
||||
.post-excerpt {
|
||||
color: #4b5563;
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 1.5rem;
|
||||
flex: 1;
|
||||
|
||||
/* Line clamping for Webkit browsers */
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.post-read-more {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
color: #2563eb;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
font-size: 0.95rem;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.post-read-more:hover {
|
||||
color: #1d4ed8;
|
||||
text-decoration: underline;
|
||||
}
|
||||
50
src/components/PostCard.jsx
Normal file
50
src/components/PostCard.jsx
Normal file
@ -0,0 +1,50 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import './PostCard.css';
|
||||
|
||||
const PostCard = ({ post }) => {
|
||||
const { title, excerpt, slug, _embedded } = post;
|
||||
|
||||
// Extract featured image if available
|
||||
const featuredImage = _embedded?.['wp:featuredmedia']?.[0]?.source_url;
|
||||
const authorName = _embedded?.author?.[0]?.name || 'Admin';
|
||||
const categoryName = _embedded?.['wp:term']?.[0]?.[0]?.name || 'News';
|
||||
const date = new Date(post.date).toLocaleDateString();
|
||||
|
||||
return (
|
||||
<div className="post-card">
|
||||
<div className="post-card-image-wrapper">
|
||||
{featuredImage ? (
|
||||
<img
|
||||
src={featuredImage}
|
||||
alt={title.rendered}
|
||||
className="post-card-image"
|
||||
/>
|
||||
) : (
|
||||
<span className="post-card-fallback">📄</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="post-card-content">
|
||||
<div className="post-meta">
|
||||
<span className="post-category-badge">{categoryName}</span>
|
||||
<span className="post-meta-divider">•</span>
|
||||
<span>{date}</span>
|
||||
</div>
|
||||
<h3 className="post-title">
|
||||
<Link to={`/news/${slug}`} dangerouslySetInnerHTML={{ __html: title.rendered }} />
|
||||
</h3>
|
||||
<div
|
||||
className="post-excerpt"
|
||||
dangerouslySetInnerHTML={{ __html: excerpt.rendered }}
|
||||
/>
|
||||
<Link
|
||||
to={`/news/${slug}`}
|
||||
className="post-read-more"
|
||||
>
|
||||
더 읽기 →
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default PostCard;
|
||||
93
src/components/ResourceListItem.css
Normal file
93
src/components/ResourceListItem.css
Normal file
@ -0,0 +1,93 @@
|
||||
/* ResourceListItem.css */
|
||||
|
||||
.resource-list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 1.25rem 0;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.resource-list-item:hover {
|
||||
background-color: #f9fafb;
|
||||
}
|
||||
|
||||
.resource-item-date {
|
||||
width: 120px;
|
||||
font-size: 0.9rem;
|
||||
color: #6b7280;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.resource-item-content {
|
||||
flex: 1;
|
||||
padding-right: 2rem;
|
||||
}
|
||||
|
||||
.resource-item-title {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 500;
|
||||
color: #111827;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.resource-item-title:hover {
|
||||
color: #2563eb;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.resource-item-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.5rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.resource-item-author {
|
||||
font-size: 0.9rem;
|
||||
color: #6b7280;
|
||||
display: none;
|
||||
/* Hidden on small screens */
|
||||
}
|
||||
|
||||
.resource-item-link {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
color: #2563eb;
|
||||
text-decoration: none;
|
||||
padding: 0.4rem 0.8rem;
|
||||
background-color: #eff6ff;
|
||||
border-radius: 0.375rem;
|
||||
transition: all 0.2s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.resource-item-link:hover {
|
||||
background-color: #dbeafe;
|
||||
color: #1d4ed8;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.resource-item-author {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.resource-list-item {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.resource-item-date {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.resource-item-meta {
|
||||
width: 100%;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
26
src/components/ResourceListItem.jsx
Normal file
26
src/components/ResourceListItem.jsx
Normal file
@ -0,0 +1,26 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import './ResourceListItem.css';
|
||||
|
||||
const ResourceListItem = ({ post }) => {
|
||||
const { title, date, slug, _embedded } = post;
|
||||
const authorName = _embedded?.author?.[0]?.name || 'Admin';
|
||||
const postDate = new Date(date).toLocaleDateString();
|
||||
|
||||
return (
|
||||
<div className="resource-list-item">
|
||||
<div className="resource-item-date">{postDate}</div>
|
||||
<div className="resource-item-content">
|
||||
<Link to={`/resources/${slug}`} className="resource-item-title" dangerouslySetInnerHTML={{ __html: title.rendered }} />
|
||||
</div>
|
||||
<div className="resource-item-meta">
|
||||
<span className="resource-item-author">{authorName}</span>
|
||||
<Link to={`/resources/${slug}`} className="resource-item-link">
|
||||
상세보기
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ResourceListItem;
|
||||
50
src/components/Solutions.jsx
Normal file
50
src/components/Solutions.jsx
Normal file
@ -0,0 +1,50 @@
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
const Solutions = () => {
|
||||
const services = [
|
||||
{
|
||||
id: 'education',
|
||||
title: '교육 서비스',
|
||||
description: 'ISO 내부심사원 양성, CORE-TOOLS, 직무 능력 향상 교육을 제공합니다.',
|
||||
icon: '🎓'
|
||||
},
|
||||
{
|
||||
id: 'iso-consulting',
|
||||
title: 'ISO 경영인증 컨설팅',
|
||||
description: 'ISO 9001/14001, IATF 16949 등 시스템 인증 취득 및 운영 컨설팅을 지원합니다.',
|
||||
icon: '📜'
|
||||
},
|
||||
{
|
||||
id: 'smart-factory',
|
||||
title: '스마트 제조',
|
||||
description: '데이터 수집/분석, AI 연계, 생산 효율화를 위한 지능형 공장을 구현합니다.',
|
||||
icon: '🏭'
|
||||
},
|
||||
{
|
||||
id: 'groupware',
|
||||
title: '그룹웨어 개발',
|
||||
description: '설비, 재고, 공정 관리 등 기업 환경에 최적화된 업무 시스템을 개발합니다.',
|
||||
icon: '💻'
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<section id="services" className="section-padding">
|
||||
<div className="container">
|
||||
<h2 className="section-title">서비스 3대 축</h2>
|
||||
<div className="solutions-grid">
|
||||
{services.map((item) => (
|
||||
<div key={item.id} className="solution-card">
|
||||
<div className="solution-icon">{item.icon}</div>
|
||||
<h3>{item.title}</h3>
|
||||
<p>{item.description}</p>
|
||||
<Link to={`/services/${item.id}`} className="service-link">자세히 보기 →</Link>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Solutions;
|
||||
18
src/config/wordpress.js
Normal file
18
src/config/wordpress.js
Normal file
@ -0,0 +1,18 @@
|
||||
export const WP_API_CONFIG = {
|
||||
// Use the domain provided by the user.
|
||||
// IMPORTANT: Ensure WordPress Permalinks are set to 'Post name' for this base URL to work,
|
||||
// or use the plain parameter structure if not.
|
||||
// For Headless, /wp-json is the standard REST API endpoint.
|
||||
BASE_URL: 'https://api.sokuree.com/wp-json',
|
||||
|
||||
// Endpoints typically used
|
||||
ENDPOINTS: {
|
||||
POSTS: '/wp/v2/posts',
|
||||
PAGES: '/wp/v2/pages',
|
||||
MEDIA: '/wp/v2/media',
|
||||
CATEGORIES: '/wp/v2/categories',
|
||||
},
|
||||
|
||||
// Number of posts to fetch per page
|
||||
PER_PAGE: 10
|
||||
};
|
||||
47
src/hooks/usePosts.js
Normal file
47
src/hooks/usePosts.js
Normal file
@ -0,0 +1,47 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { wpApi } from '../api/wordpress';
|
||||
|
||||
export function usePosts(page = 1, perPage = 10, categoryByIdOrSlug = null) {
|
||||
const [posts, setPosts] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState(null);
|
||||
const [totalPages, setTotalPages] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchPosts = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
let categoryId = null;
|
||||
|
||||
// Determine if the input is a slug (string) or ID (number)
|
||||
if (typeof categoryByIdOrSlug === 'string') {
|
||||
const categories = await wpApi.getCategories(categoryByIdOrSlug);
|
||||
if (categories && categories.length > 0) {
|
||||
categoryId = categories[0].id;
|
||||
} else {
|
||||
// Category not found by slug
|
||||
console.warn(`Category slug "${categoryByIdOrSlug}" not found.`);
|
||||
setPosts([]);
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
categoryId = categoryByIdOrSlug;
|
||||
}
|
||||
|
||||
const { data, totalPages } = await wpApi.getPosts(page, perPage, categoryId);
|
||||
setPosts(data);
|
||||
setTotalPages(totalPages);
|
||||
setError(null);
|
||||
} catch (err) {
|
||||
setError(err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchPosts();
|
||||
}, [page, perPage, categoryByIdOrSlug]);
|
||||
|
||||
return { posts, loading, error, totalPages };
|
||||
}
|
||||
353
src/index.css
Normal file
353
src/index.css
Normal file
@ -0,0 +1,353 @@
|
||||
:root {
|
||||
--primary-color: #0056b3;
|
||||
--secondary-color: #004494;
|
||||
--text-color: #333333;
|
||||
--light-gray: #f8f9fa;
|
||||
--white: #ffffff;
|
||||
--shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
--transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
line-height: 1.6;
|
||||
color: var(--text-color);
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
/* Utilities */
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.section-padding {
|
||||
padding: 80px 0;
|
||||
}
|
||||
|
||||
.bg-light {
|
||||
background-color: var(--light-gray);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
text-align: center;
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 3rem;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 12px 30px;
|
||||
border-radius: 5px;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
transition: var(--transition);
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: var(--primary-color);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: var(--secondary-color);
|
||||
}
|
||||
|
||||
/* Navbar */
|
||||
.navbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
background-color: var(--white);
|
||||
box-shadow: var(--shadow);
|
||||
z-index: 1000;
|
||||
height: 70px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.navbar-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
color: var(--primary-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.nav-links a {
|
||||
margin-left: 30px;
|
||||
text-decoration: none;
|
||||
color: var(--text-color);
|
||||
font-weight: 500;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.nav-links a:hover {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.hamburger {
|
||||
display: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.hamburger .bar {
|
||||
display: block;
|
||||
width: 25px;
|
||||
height: 3px;
|
||||
background-color: var(--text-color);
|
||||
margin: 5px auto;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
/* Hero */
|
||||
.hero {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1556740758-90de374c12ad?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
color: var(--white);
|
||||
text-align: center;
|
||||
padding-top: 70px;
|
||||
}
|
||||
|
||||
.hero-content h1 {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.hero-content p {
|
||||
font-size: 1.25rem;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
/* Solutions */
|
||||
.solutions-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.solution-card {
|
||||
background: var(--white);
|
||||
padding: 30px;
|
||||
border-radius: 10px;
|
||||
box-shadow: var(--shadow);
|
||||
text-align: center;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.solution-card:hover {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
.solution-icon {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* Contact */
|
||||
.contact-form {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
background: var(--white);
|
||||
padding: 40px;
|
||||
border-radius: 10px;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group textarea {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.form-status {
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.btn-outline {
|
||||
background-color: transparent;
|
||||
border: 2px solid var(--white);
|
||||
color: var(--white);
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.btn-outline:hover {
|
||||
background-color: var(--white);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.btn-nav {
|
||||
padding: 8px 16px;
|
||||
background-color: var(--primary-color);
|
||||
color: var(--white) !important;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.btn-nav:hover {
|
||||
background-color: var(--secondary-color);
|
||||
}
|
||||
|
||||
.hero-btns {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Service Link */
|
||||
.service-link {
|
||||
display: inline-block;
|
||||
margin-top: 15px;
|
||||
color: var(--primary-color);
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.service-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Footer Dark */
|
||||
.footer-dark {
|
||||
background-color: #222;
|
||||
color: #ccc;
|
||||
padding: 50px 0 20px;
|
||||
}
|
||||
|
||||
.footer-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
border-bottom: 1px solid #444;
|
||||
padding-bottom: 30px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.footer-info h3 {
|
||||
color: var(--white);
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.footer-links a {
|
||||
color: #ccc;
|
||||
text-decoration: none;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.footer-links a:hover {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.footer-copyright {
|
||||
text-align: center;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* Floating CTA */
|
||||
.floating-cta {
|
||||
position: fixed;
|
||||
bottom: 30px;
|
||||
right: 30px;
|
||||
background-color: var(--primary-color);
|
||||
color: var(--white);
|
||||
padding: 15px 30px;
|
||||
border-radius: 50px;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
|
||||
z-index: 1000;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.floating-cta:hover {
|
||||
transform: translateY(-5px);
|
||||
background-color: var(--secondary-color);
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.hero-btns {
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
margin-left: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer-container {
|
||||
flex-direction: column;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.footer-links a {
|
||||
margin-left: 0;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
left: -100%;
|
||||
background-color: var(--white);
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
padding: 20px 0;
|
||||
transition: 0.3s;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.nav-links.active {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.nav-links a {
|
||||
display: block;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.hero-content h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
10
src/main.jsx
Normal file
10
src/main.jsx
Normal file
@ -0,0 +1,10 @@
|
||||
import { StrictMode } from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import './index.css'
|
||||
import App from './App.jsx'
|
||||
|
||||
createRoot(document.getElementById('root')).render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
</StrictMode>,
|
||||
)
|
||||
82
src/pages/About.jsx
Normal file
82
src/pages/About.jsx
Normal file
@ -0,0 +1,82 @@
|
||||
import consultantProfile from '../assets/consultant_profile.png';
|
||||
|
||||
const About = () => {
|
||||
return (
|
||||
<div className="container" style={{ marginTop: '70px', minHeight: '80vh' }}>
|
||||
{/* Intro Section with Background */}
|
||||
<section style={{
|
||||
marginBottom: '60px',
|
||||
textAlign: 'center',
|
||||
padding: '80px 20px',
|
||||
background: `linear-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0.8)), url('https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80')`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
borderRadius: '20px',
|
||||
boxShadow: '0 10px 30px rgba(0,0,0,0.05)'
|
||||
}}>
|
||||
<h1 className="section-title" style={{ marginBottom: '30px' }}>회사 소개</h1>
|
||||
<div className="about-intro" style={{ maxWidth: '800px', margin: '0 auto' }}>
|
||||
<p style={{ fontSize: '1.2rem', lineHeight: '1.8', fontWeight: '500', color: '#333' }}>
|
||||
Sokuree Consultant는 현장의 목소리(데이터)에서 필요한 정보를 <br className="hidden md:block" />
|
||||
시스템(System)화 하여 기업의 지속 가능한 성장을 지원합니다.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="vision-mission" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '30px', marginBottom: '80px' }}>
|
||||
<div style={{ padding: '30px', background: '#f8f9fa', borderRadius: '10px' }}>
|
||||
<h3>Vision</h3>
|
||||
<p>누구나 쉽게 스마트 경영을 실현하는 세상</p>
|
||||
</div>
|
||||
<div style={{ padding: '30px', background: '#f8f9fa', borderRadius: '10px' }}>
|
||||
<h3>Mission</h3>
|
||||
<p>복잡한 기술을 현장에 맞게 단순화하고, 실질적인 성과를 창출하는 것</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="expert-profile" style={{ marginBottom: '80px' }}>
|
||||
<h2 className="section-title">대표 컨설턴트</h2>
|
||||
<div style={{ display: 'flex', gap: '50px', alignItems: 'center', flexWrap: 'wrap', justifyContent: 'center' }}>
|
||||
<div style={{ flex: '0 0 350px' }}>
|
||||
<img
|
||||
src={consultantProfile}
|
||||
alt="대표 컨설턴트"
|
||||
style={{
|
||||
width: '100%',
|
||||
borderRadius: '20px',
|
||||
boxShadow: '0 15px 30px rgba(0,0,0,0.1)'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ flex: '1', minWidth: '300px' }}>
|
||||
<div style={{ background: 'white', padding: '30px', borderRadius: '20px', border: '1px solid #eee' }}>
|
||||
<ul style={{ listStyle: 'none', padding: 0, lineHeight: '2.5', fontSize: '1.1rem' }}>
|
||||
<li className="flex items-center">
|
||||
<span style={{ marginRight: '10px' }}>✅</span>
|
||||
품질관리 기술사
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<span style={{ marginRight: '10px' }}>✅</span>
|
||||
ISO/9001/14001/45001 국제심사원
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<span style={{ marginRight: '10px' }}>✅</span>
|
||||
IATF16949 Core Tools 강의
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<span style={{ marginRight: '10px' }}>✅</span>
|
||||
스마트공장 구축 지원사업 수행
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<span style={{ marginRight: '10px' }}>✅</span>
|
||||
경기테크노파크 기술닥터
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default About;
|
||||
138
src/pages/Cases.css
Normal file
138
src/pages/Cases.css
Normal file
@ -0,0 +1,138 @@
|
||||
/* Cases.css */
|
||||
|
||||
.cases-container {
|
||||
padding-top: 100px;
|
||||
min-height: 100vh;
|
||||
background-color: #f9fafb;
|
||||
/* Gray-50 */
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
|
||||
.cases-content-wrapper {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.cases-header {
|
||||
text-align: center;
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
.cases-title {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.cases-subtitle {
|
||||
color: #4b5563;
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.cases-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.cases-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.case-card {
|
||||
background-color: white;
|
||||
border-radius: 1rem;
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.case-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.case-image-wrapper {
|
||||
height: 16rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background-color: #e5e7eb;
|
||||
}
|
||||
|
||||
.case-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.5s ease;
|
||||
}
|
||||
|
||||
.case-card:hover .case-image {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.case-category-badge {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
left: 1rem;
|
||||
background-color: #2563eb;
|
||||
/* Blue-600 */
|
||||
color: white;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 9999px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.case-bar {
|
||||
height: 0.5rem;
|
||||
background-color: #2563eb;
|
||||
}
|
||||
|
||||
.case-content {
|
||||
padding: 2rem;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.case-category-text {
|
||||
color: #2563eb;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.case-card-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.case-result-badge {
|
||||
display: inline-block;
|
||||
background-color: #eff6ff;
|
||||
/* Blue-50 */
|
||||
color: #1d4ed8;
|
||||
/* Blue-700 */
|
||||
font-weight: 600;
|
||||
font-size: 0.875rem;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 0.25rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.case-details {
|
||||
color: #4b5563;
|
||||
line-height: 1.625;
|
||||
}
|
||||
93
src/pages/Cases.jsx
Normal file
93
src/pages/Cases.jsx
Normal file
@ -0,0 +1,93 @@
|
||||
import React from 'react';
|
||||
import './Cases.css';
|
||||
|
||||
const Cases = () => {
|
||||
const caseStudies = [
|
||||
{
|
||||
id: 'case-sqc',
|
||||
category: '교육 / Education',
|
||||
title: 'Core Tools - SQC 강의 사례',
|
||||
image: '/sqc_case.jpg',
|
||||
result: '현장 데이터 분석 역량 강화',
|
||||
details: '통계적 공정관리(SPC)의 핵심 이론과 실습을 통해 현장에서 발생하는 데이터의 변동을 이해하고, 이를 분석하여 공정 능력을 지속적으로 개선할 수 있는 전문가를 양성했습니다.'
|
||||
},
|
||||
{
|
||||
id: 'case-fmea',
|
||||
category: '교육 / Education',
|
||||
title: 'FMEA (고장모드예측) 강의 사례',
|
||||
image: '/fmea_case.jpg',
|
||||
result: '리스크 기반 사고 및 예방 관리 체계 확립',
|
||||
details: '제품 및 공정 개발 단계에서 발생할 수 있는 잠재적 고장 모드를 사전에 식별하고, 위험 우선순위(RPN) 분석을 통해 효과적인 개선 대책을 수립하는 실무 역량을 확보했습니다.'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
category: '스마트 제조 / Smart Factory',
|
||||
title: 'H사 - 자동차 부품 제조 공정 데이터 수집 시스템',
|
||||
// Placeholder image or remove image requirement for old items?
|
||||
// Let's use a subtle background color or pattern if no image, or a placeholder.
|
||||
image: null,
|
||||
result: '불량률 50% 감소, 실시간 설비 모니터링 구현',
|
||||
details: '기존 수기 작성 작업일보를 태블릿 기반의 MES로 전환하여 데이터 누락을 방지하고, 설비 PLC와 연동하여 가동률을 실시간으로 집계했습니다.'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
category: 'ISO 컨설팅 / Consulting',
|
||||
title: 'D사 - 통합경영시스템 인증 획득',
|
||||
image: null,
|
||||
result: '해외 수출 판로 개척 성공 (유럽 CE 인증 연계)',
|
||||
details: '품질 매뉴얼 및 절차서 제정을 넘어, 실제 현장에서 지킬 수 있는 프로세스를 정립하고 내부 심사원 교육을 통해 자생력을 확보했습니다.'
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="cases-container">
|
||||
<div className="cases-content-wrapper">
|
||||
<div className="cases-header">
|
||||
<h1 className="cases-title">프로젝트 / 성공 사례</h1>
|
||||
<p className="cases-subtitle">Sokuree Consultant가 만들어낸 변화의 기록입니다.</p>
|
||||
</div>
|
||||
|
||||
<div className="cases-grid">
|
||||
{caseStudies.map(study => (
|
||||
<div key={study.id} className="case-card">
|
||||
{/* Image Section */}
|
||||
{study.image ? (
|
||||
<div className="case-image-wrapper">
|
||||
<img
|
||||
src={study.image}
|
||||
alt={study.title}
|
||||
className="case-image"
|
||||
/>
|
||||
<div className="case-category-badge">
|
||||
{study.category.split('/')[0]}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="case-bar"></div>
|
||||
)}
|
||||
|
||||
{/* Content Section */}
|
||||
<div className="case-content">
|
||||
{!study.image && (
|
||||
<div className="case-category-text">
|
||||
{study.category}
|
||||
</div>
|
||||
)}
|
||||
<h3 className="case-card-title">{study.title}</h3>
|
||||
<div>
|
||||
<span className="case-result-badge">
|
||||
성과: {study.result}
|
||||
</span>
|
||||
</div>
|
||||
<p className="case-details">
|
||||
{study.details}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default Cases;
|
||||
10
src/pages/ContactPage.jsx
Normal file
10
src/pages/ContactPage.jsx
Normal file
@ -0,0 +1,10 @@
|
||||
import Contact from '../components/Contact';
|
||||
|
||||
const ContactPage = () => {
|
||||
return (
|
||||
<div style={{ marginTop: '70px' }}>
|
||||
<Contact />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default ContactPage;
|
||||
112
src/pages/Home.jsx
Normal file
112
src/pages/Home.jsx
Normal file
@ -0,0 +1,112 @@
|
||||
import Hero from '../components/Hero';
|
||||
import Solutions from '../components/Solutions';
|
||||
import Contact from '../components/Contact';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { usePosts } from '../hooks/usePosts';
|
||||
import PostCard from '../components/PostCard';
|
||||
|
||||
const Home = () => {
|
||||
return (
|
||||
<>
|
||||
<Hero />
|
||||
|
||||
{/* Why Us Section */}
|
||||
<section className="section-padding">
|
||||
<div className="container">
|
||||
<h2 className="section-title">Why Sokuree?</h2>
|
||||
<div className="solutions-grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))' }}>
|
||||
<div className="solution-card">
|
||||
<div className="solution-icon">🏆</div>
|
||||
<h3>전문성</h3>
|
||||
<p>품질/ISO 기반의 검증된 컨설팅</p>
|
||||
</div>
|
||||
<div className="solution-card">
|
||||
<div className="solution-icon">🏭</div>
|
||||
<h3>현장 중심</h3>
|
||||
<p>제조 현장에 최적화된 맞춤형 솔루션</p>
|
||||
</div>
|
||||
<div className="solution-card">
|
||||
<div className="solution-icon">🚀</div>
|
||||
<h3>실행력</h3>
|
||||
<p>데이터 시스템의 실질적 구현과 안착</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Solutions />
|
||||
|
||||
{/* Process Section */}
|
||||
<section className="section-padding bg-light">
|
||||
<div className="container">
|
||||
<h2 className="section-title">진행 프로세스</h2>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', textAlign: 'center', gap: '20px' }}>
|
||||
{['진단', '설계', '실행', '정착', '고도화'].map((step, index) => (
|
||||
<div key={index} style={{ flex: 1, minWidth: '120px', background: 'white', padding: '20px', borderRadius: '10px', boxShadow: '0 4px 6px rgba(0,0,0,0.1)' }}>
|
||||
<div style={{ fontSize: '2rem', marginBottom: '10px', color: '#0056b3' }}>{index + 1}</div>
|
||||
<h3>{step}</h3>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Cases Preview */}
|
||||
<section className="section-padding">
|
||||
<div className="container">
|
||||
<h2 className="section-title">성공 사례</h2>
|
||||
<div className="solutions-grid">
|
||||
<div className="solution-card">
|
||||
<h3>H사 스마트공장 구축</h3>
|
||||
<p>생산성 30% 향상, 불량률 50% 감소</p>
|
||||
</div>
|
||||
<div className="solution-card">
|
||||
<h3>D사 ISO 인증 획득</h3>
|
||||
<p>내부 심사원 양성 및 프로세스 정립</p>
|
||||
</div>
|
||||
<div className="solution-card">
|
||||
<h3>K사 그룹웨어 도입</h3>
|
||||
<p>재고 관리 자동화 및 업무 효율화</p>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ textAlign: 'center', marginTop: '40px' }}>
|
||||
<Link to="/cases" className="btn btn-primary">사례 더 보기</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Latest News Section */}
|
||||
<LatestNewsSection />
|
||||
|
||||
<Contact />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const LatestNewsSection = () => {
|
||||
const { posts, loading, error } = usePosts(1, 3); // Fetch 3 latest posts
|
||||
|
||||
if (loading) return null;
|
||||
if (error) return null;
|
||||
if (posts.length === 0) return null;
|
||||
|
||||
return (
|
||||
<section className="section-padding bg-light">
|
||||
<div className="container">
|
||||
<div className="flex justify-between items-end mb-8">
|
||||
<h2 className="section-title mb-0">최신 소식</h2>
|
||||
<Link to="/news" className="text-primary font-semibold hover:underline">
|
||||
전체 보기 →
|
||||
</Link>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{posts.map((post) => (
|
||||
<PostCard key={post.id} post={post} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export default Home;
|
||||
92
src/pages/News.css
Normal file
92
src/pages/News.css
Normal file
@ -0,0 +1,92 @@
|
||||
/* News.css */
|
||||
|
||||
.news-container {
|
||||
padding-top: 100px;
|
||||
padding-bottom: 80px;
|
||||
min-height: 100vh;
|
||||
/* Ensures footer stays at the bottom */
|
||||
background-color: #f9fafb;
|
||||
/* Gray-50 */
|
||||
}
|
||||
|
||||
.news-content-wrapper {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.news-header {
|
||||
text-align: center;
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
.news-title {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.news-subtitle {
|
||||
color: #4b5563;
|
||||
font-size: 1.125rem;
|
||||
max-width: 42rem;
|
||||
margin: 0 auto;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.news-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.news-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.news-grid {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
/* Loading & Error States */
|
||||
.news-loading,
|
||||
.news-error,
|
||||
.news-empty {
|
||||
min-height: 100vh;
|
||||
padding-top: 100px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
border: 4px solid #e5e7eb;
|
||||
border-top-color: #2563eb;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.error-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: #dc2626;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
color: #4b5563;
|
||||
}
|
||||
56
src/pages/News.jsx
Normal file
56
src/pages/News.jsx
Normal file
@ -0,0 +1,56 @@
|
||||
import React from 'react';
|
||||
import { usePosts } from '../hooks/usePosts';
|
||||
import PostCard from '../components/PostCard';
|
||||
import './News.css';
|
||||
|
||||
const News = () => {
|
||||
// Pass the category slug 'news' to filter posts
|
||||
const { posts, loading, error } = usePosts(1, 9, 'news');
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="news-loading">
|
||||
<div className="loading-spinner"></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="news-error">
|
||||
<div className="news-content-wrapper">
|
||||
<h2 className="error-title">Oops! Something went wrong.</h2>
|
||||
<p className="error-message">Failed to load news. Please try again later.</p>
|
||||
<p style={{ fontSize: '0.875rem', marginTop: '0.5rem', color: '#9ca3af' }}>Error: {error.message}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="news-container">
|
||||
<div className="news-content-wrapper">
|
||||
<div className="news-header">
|
||||
<h1 className="news-title">소식 (News)</h1>
|
||||
<p className="news-subtitle">
|
||||
Sokuree Consultant의 최신 소식과 인사이트를 전해드립니다.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="news-grid">
|
||||
{posts.map((post) => (
|
||||
<PostCard key={post.id} post={post} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
{posts.length === 0 && (
|
||||
<div className="news-empty">
|
||||
<p style={{ fontSize: '1.25rem', color: '#6b7280' }}>등록된 소식이 없습니다.</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default News;
|
||||
165
src/pages/NewsDetail.css
Normal file
165
src/pages/NewsDetail.css
Normal file
@ -0,0 +1,165 @@
|
||||
/* NewsDetail.css */
|
||||
|
||||
.news-detail-container {
|
||||
padding-top: 100px;
|
||||
padding-bottom: 80px;
|
||||
min-height: 100vh;
|
||||
background-color: #f9fafb;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.news-article {
|
||||
background-color: white;
|
||||
max-width: 800px;
|
||||
width: 100%;
|
||||
margin: 0 20px;
|
||||
padding: 3rem;
|
||||
border-radius: 1rem;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.news-article {
|
||||
padding: 1.5rem;
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Loading & Error */
|
||||
.news-detail-loading,
|
||||
.news-detail-error {
|
||||
min-height: 100vh;
|
||||
padding-top: 100px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.back-link {
|
||||
color: #2563eb;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.article-header {
|
||||
margin-bottom: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.article-meta {
|
||||
font-size: 0.9rem;
|
||||
color: #6b7280;
|
||||
margin-bottom: 1rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.article-meta-divider {
|
||||
margin: 0 0.5rem;
|
||||
}
|
||||
|
||||
.article-title {
|
||||
font-size: 2.25rem;
|
||||
font-weight: 800;
|
||||
color: #111827;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
/* Image */
|
||||
.article-image-wrapper {
|
||||
margin-bottom: 2.5rem;
|
||||
border-radius: 0.75rem;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.article-image {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Content */
|
||||
.article-content {
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.8;
|
||||
color: #374151;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.article-content p {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.article-content h2 {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
margin-top: 2.5rem;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.article-content h3 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
color: #1f2937;
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.article-content ul,
|
||||
.article-content ol {
|
||||
margin-bottom: 1.5rem;
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
|
||||
.article-content li {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.article-content a {
|
||||
color: #2563eb;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.article-content blockquote {
|
||||
border-left: 4px solid #2563eb;
|
||||
padding-left: 1rem;
|
||||
font-style: italic;
|
||||
color: #4b5563;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.article-content img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: 0.5rem;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.article-footer {
|
||||
border-top: 1px solid #e5e7eb;
|
||||
padding-top: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
display: inline-block;
|
||||
padding: 0.75rem 2rem;
|
||||
background-color: #f3f4f6;
|
||||
color: #374151;
|
||||
font-weight: 600;
|
||||
border-radius: 0.5rem;
|
||||
text-decoration: none;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.back-button:hover {
|
||||
background-color: #e5e7eb;
|
||||
}
|
||||
98
src/pages/NewsDetail.jsx
Normal file
98
src/pages/NewsDetail.jsx
Normal file
@ -0,0 +1,98 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { useParams, Link } from 'react-router-dom';
|
||||
import { wpApi } from '../api/wordpress';
|
||||
import './NewsDetail.css';
|
||||
|
||||
const NewsDetail = () => {
|
||||
const { slug } = useParams();
|
||||
const [post, setPost] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchPost = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const data = await wpApi.getPostBySlug(slug);
|
||||
if (!data) {
|
||||
throw new Error('Post not found');
|
||||
}
|
||||
setPost(data);
|
||||
} catch (err) {
|
||||
setError(err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (slug) {
|
||||
fetchPost();
|
||||
}
|
||||
}, [slug]);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="news-detail-loading">
|
||||
<div className="loading-spinner"></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error || !post) {
|
||||
return (
|
||||
<div className="news-detail-error">
|
||||
<div className="container">
|
||||
<h2 className="error-title">Post Not Found</h2>
|
||||
<p className="error-message">The article you are looking for does not exist or has been removed.</p>
|
||||
<Link to="/news" className="back-link">← Back to News</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const featuredImage = post._embedded?.['wp:featuredmedia']?.[0]?.source_url;
|
||||
const authorName = post._embedded?.author?.[0]?.name || 'Admin';
|
||||
const date = new Date(post.date).toLocaleDateString();
|
||||
|
||||
return (
|
||||
<div className="news-detail-container">
|
||||
<article className="news-article">
|
||||
{/* Header Section */}
|
||||
<header className="article-header">
|
||||
<div className="article-meta">
|
||||
<span className="article-date">{date}</span>
|
||||
<span className="article-meta-divider">•</span>
|
||||
<span className="article-author">{authorName}</span>
|
||||
</div>
|
||||
<h1 className="article-title" dangerouslySetInnerHTML={{ __html: post.title.rendered }} />
|
||||
</header>
|
||||
|
||||
{/* Featured Image */}
|
||||
{featuredImage && (
|
||||
<div className="article-image-wrapper">
|
||||
<img
|
||||
src={featuredImage}
|
||||
alt={post.title.rendered}
|
||||
className="article-image"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Content */}
|
||||
<div
|
||||
className="article-content"
|
||||
dangerouslySetInnerHTML={{ __html: post.content.rendered }}
|
||||
/>
|
||||
|
||||
{/* Footer / Navigation */}
|
||||
<footer className="article-footer">
|
||||
<Link to="/news" className="back-button">
|
||||
목록으로 돌아가기
|
||||
</Link>
|
||||
</footer>
|
||||
</article>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default NewsDetail;
|
||||
121
src/pages/Resources.css
Normal file
121
src/pages/Resources.css
Normal file
@ -0,0 +1,121 @@
|
||||
/* Resources.css */
|
||||
|
||||
.resources-container {
|
||||
padding-top: 100px;
|
||||
padding-bottom: 80px;
|
||||
min-height: 100vh;
|
||||
background-color: #f9fafb;
|
||||
}
|
||||
|
||||
.resources-content-wrapper {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.resources-header {
|
||||
text-align: center;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.resources-title {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.resources-subtitle {
|
||||
color: #4b5563;
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
/* Tabs */
|
||||
.resources-tabs {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 3rem;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.tab-button {
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-radius: 9999px;
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
background-color: white;
|
||||
color: #4b5563;
|
||||
border: 1px solid #e5e7eb;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.tab-button:hover {
|
||||
background-color: #f3f4f6;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.tab-button.active {
|
||||
background-color: #2563eb;
|
||||
color: white;
|
||||
border-color: #2563eb;
|
||||
box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.2);
|
||||
}
|
||||
|
||||
/* Two Column Layout for 'All' tab */
|
||||
.resources-all-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 3rem;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.resources-all-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
align-items: start;
|
||||
}
|
||||
}
|
||||
|
||||
.resources-section {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
/* List Layout */
|
||||
.resources-list {
|
||||
background: white;
|
||||
border-radius: 1rem;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||
padding: 0 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Section specific */
|
||||
.section-heading {
|
||||
border-left: 4px solid #2563eb;
|
||||
padding-left: 1rem;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.empty-message {
|
||||
text-align: center;
|
||||
padding: 3rem;
|
||||
color: #6b7280;
|
||||
background: white;
|
||||
border-radius: 1rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.resource-helper-text {
|
||||
text-align: center;
|
||||
margin-top: 1rem;
|
||||
padding: 1rem;
|
||||
background-color: #eff6ff;
|
||||
border-radius: 0.5rem;
|
||||
color: #1e40af;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
104
src/pages/Resources.jsx
Normal file
104
src/pages/Resources.jsx
Normal file
@ -0,0 +1,104 @@
|
||||
import React, { useState } from 'react';
|
||||
import { usePosts } from '../hooks/usePosts';
|
||||
import ResourceListItem from '../components/ResourceListItem';
|
||||
import './Resources.css';
|
||||
|
||||
// IMPORTANT: Slugs must match your WordPress Category Slugs
|
||||
const CATEGORIES = {
|
||||
DOWNLOADS: 'downloads',
|
||||
COLUMNS: 'columns'
|
||||
};
|
||||
|
||||
const Resources = () => {
|
||||
const [activeTab, setActiveTab] = useState('all'); // 'all', 'downloads', 'columns'
|
||||
|
||||
// Logic: Show 10 items for all views as requested.
|
||||
const perPage = 10;
|
||||
|
||||
// Fetch posts for each category using SLUGS
|
||||
const { posts: downloadPosts, loading: downloadsLoading } = usePosts(1, perPage, CATEGORIES.DOWNLOADS);
|
||||
const { posts: columnPosts, loading: columnsLoading } = usePosts(1, perPage, CATEGORIES.COLUMNS);
|
||||
|
||||
const isLoading = downloadsLoading || columnsLoading;
|
||||
|
||||
// Helper to render the list or empty message
|
||||
const renderList = (posts, emptyText) => {
|
||||
if (posts.length === 0) {
|
||||
return <div className="empty-message">{emptyText}</div>;
|
||||
}
|
||||
return (
|
||||
<div className="resources-list">
|
||||
{posts.map(post => (
|
||||
<ResourceListItem key={post.id} post={post} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="resources-container">
|
||||
<div className="resources-content-wrapper">
|
||||
|
||||
|
||||
<div className="resources-tabs">
|
||||
<button
|
||||
className={`tab-button ${activeTab === 'all' ? 'active' : ''}`}
|
||||
onClick={() => setActiveTab('all')}
|
||||
>
|
||||
전체 보기
|
||||
</button>
|
||||
<button
|
||||
className={`tab-button ${activeTab === 'downloads' ? 'active' : ''}`}
|
||||
onClick={() => setActiveTab('downloads')}
|
||||
>
|
||||
자료실 (Downloads)
|
||||
</button>
|
||||
<button
|
||||
className={`tab-button ${activeTab === 'columns' ? 'active' : ''}`}
|
||||
onClick={() => setActiveTab('columns')}
|
||||
>
|
||||
전문가 칼럼
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{isLoading ? (
|
||||
<div className="text-center py-12">
|
||||
<div className="loading-spinner mx-auto"></div>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{activeTab === 'all' ? (
|
||||
<div className="resources-all-grid">
|
||||
<div className="resources-section">
|
||||
<h2 className="section-heading">📚 다운로드 자료</h2>
|
||||
{renderList(downloadPosts, "등록된 다운로드 자료가 없습니다.")}
|
||||
</div>
|
||||
<div className="resources-section">
|
||||
<h2 className="section-heading">✍️ 전문가 칼럼</h2>
|
||||
{renderList(columnPosts, "등록된 칼럼이 없습니다.")}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{activeTab === 'downloads' && (
|
||||
<div className="resources-section">
|
||||
<h2 className="section-heading">📚 다운로드 자료</h2>
|
||||
{renderList(downloadPosts, "등록된 다운로드 자료가 없습니다.")}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === 'columns' && (
|
||||
<div className="resources-section">
|
||||
<h2 className="section-heading">✍️ 전문가 칼럼</h2>
|
||||
{renderList(columnPosts, "등록된 칼럼이 없습니다.")}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default Resources;
|
||||
241
src/pages/ServiceDetail.css
Normal file
241
src/pages/ServiceDetail.css
Normal file
@ -0,0 +1,241 @@
|
||||
/* ServiceDetail.css */
|
||||
|
||||
.service-container {
|
||||
padding-top: 80px;
|
||||
min-height: 100vh;
|
||||
background-color: #ffffff;
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.service-header {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
}
|
||||
|
||||
.service-title {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
/* Gray-900 */
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.service-subtitle {
|
||||
color: #4b5563;
|
||||
/* Gray-600 */
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.service-content-wrapper {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
/* Section Common */
|
||||
.service-section {
|
||||
margin-bottom: 5rem;
|
||||
}
|
||||
|
||||
.section-label {
|
||||
font-size: 1.875rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 1rem;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.section-desc {
|
||||
color: #4b5563;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
/* Purpose Grid (Top 3 Cards) */
|
||||
.purpose-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.purpose-grid {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.purpose-card {
|
||||
background-color: #f9fafb;
|
||||
/* Gray-50 */
|
||||
border-radius: 1rem;
|
||||
padding: 2rem;
|
||||
height: 16rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.purpose-card:hover {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
.purpose-card-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
color: #1f2937;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.purpose-card-text {
|
||||
color: #6b7280;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.purpose-icon {
|
||||
position: absolute;
|
||||
bottom: 1rem;
|
||||
right: 1rem;
|
||||
font-size: 4rem;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
/* Curriculum Grid (Bottom 4 Columns) */
|
||||
.curriculum-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.curriculum-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.curriculum-grid {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.curriculum-card {
|
||||
background-color: white;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 1rem;
|
||||
padding: 2rem;
|
||||
transition: box-shadow 0.3s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.curriculum-card:hover {
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.curriculum-number {
|
||||
display: block;
|
||||
color: #2563eb;
|
||||
/* Blue-600 */
|
||||
font-weight: 700;
|
||||
font-size: 1.125rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.curriculum-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
margin-bottom: 1.5rem;
|
||||
min-height: 3.5rem;
|
||||
/* Align heights */
|
||||
}
|
||||
|
||||
.curriculum-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: 0.875rem;
|
||||
color: #4b5563;
|
||||
}
|
||||
|
||||
.curriculum-list li {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.curriculum-bullet {
|
||||
margin-right: 0.5rem;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.curriculum-btn {
|
||||
width: 100%;
|
||||
margin-top: 1.5rem;
|
||||
padding: 0.75rem 1rem;
|
||||
background-color: #f9fafb;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 0.5rem;
|
||||
color: #374151;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.curriculum-btn:hover {
|
||||
background-color: #f3f4f6;
|
||||
}
|
||||
|
||||
/* CTA Banner */
|
||||
.cta-banner {
|
||||
background-color: #f9fafb;
|
||||
border-radius: 1rem;
|
||||
padding: 3.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 2rem;
|
||||
margin-bottom: 5rem;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.cta-banner {
|
||||
flex-direction: row;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.cta-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.cta-text {
|
||||
color: #6b7280;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.cta-button {
|
||||
background-color: #2563eb;
|
||||
color: white;
|
||||
padding: 0.75rem 2rem;
|
||||
border-radius: 0.5rem;
|
||||
font-weight: 700;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.3);
|
||||
transition: background-color 0.2s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.cta-button:hover {
|
||||
background-color: #1d4ed8;
|
||||
}
|
||||
138
src/pages/ServiceDetail.jsx
Normal file
138
src/pages/ServiceDetail.jsx
Normal file
@ -0,0 +1,138 @@
|
||||
import React from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import './ServiceDetail.css';
|
||||
|
||||
const ServiceDetail = () => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleDownloadGuide = () => {
|
||||
alert("현재 자료를 준비 중입니다. 잠시만 기다려 주세요!");
|
||||
};
|
||||
|
||||
const handleApply = () => {
|
||||
navigate('/contact');
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="service-container">
|
||||
|
||||
{/* Header Section */}
|
||||
<div className="service-header">
|
||||
<h1 className="service-title">전문가 양성 교육</h1>
|
||||
<p className="service-subtitle">
|
||||
Sokuree Consultant의 체계적인 교육 프로그램을 통해 실무 역량을 강화해 보세요.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="service-content-wrapper">
|
||||
|
||||
{/* Section 1: Education Purpose (3 Cards) */}
|
||||
<div className="service-section">
|
||||
<h2 className="section-label">교육 목적</h2>
|
||||
<p className="section-desc">현장 중심의 실무형 인재 양성을 목표로 하고 있어요.</p>
|
||||
|
||||
<div className="purpose-grid">
|
||||
{/* Purpose Card 1 */}
|
||||
<div className="purpose-card">
|
||||
<h3 className="purpose-card-title">스마트 제조 혁신 지원</h3>
|
||||
<p className="purpose-card-text">중소기업의 스마트한<br />제조 환경 구축을 돕습니다.</p>
|
||||
<div className="purpose-icon">🏭</div>
|
||||
</div>
|
||||
|
||||
{/* Purpose Card 2 */}
|
||||
<div className="purpose-card">
|
||||
<h3 className="purpose-card-title">분야별 기술전문가 양성</h3>
|
||||
<p className="purpose-card-text">전문 기술 역량 강화를 통한<br />핵심 인재 육성</p>
|
||||
<div className="purpose-icon">👥</div>
|
||||
</div>
|
||||
|
||||
{/* Purpose Card 3 */}
|
||||
<div className="purpose-card">
|
||||
<h3 className="purpose-card-title">현장 중심 실무 학습</h3>
|
||||
<p className="purpose-card-text">이론과 실무를 겸비한<br />맞춤형 커리큘럼</p>
|
||||
<div className="purpose-icon">📘</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{/* Section 2: Curriculum (4 Numbered Columns) */}
|
||||
<div className="service-section">
|
||||
<h2 className="section-label">
|
||||
Sokuree Consultant<br />교육과정
|
||||
</h2>
|
||||
<p className="section-desc">현장 전문가로 성장할 수 있는 다양한 교육 과정을 경험해보세요.</p>
|
||||
|
||||
<div className="curriculum-grid">
|
||||
|
||||
{/* Col 1 */}
|
||||
<div className="curriculum-card">
|
||||
<span className="curriculum-number">01</span>
|
||||
<h3 className="curriculum-title">경영시스템<br />요구사항 해설</h3>
|
||||
<ul className="curriculum-list">
|
||||
<li><span className="curriculum-bullet">•</span> ISO 9001 (품질)</li>
|
||||
<li><span className="curriculum-bullet">•</span> ISO 14001 (환경)</li>
|
||||
<li><span className="curriculum-bullet">•</span> ISO 45001 (안전보건)</li>
|
||||
<li><span className="curriculum-bullet">•</span> 시스템 문서화 실무</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Col 2 */}
|
||||
<div className="curriculum-card">
|
||||
<span className="curriculum-number">02</span>
|
||||
<h3 className="curriculum-title">내부심사원<br />양성 과정</h3>
|
||||
<ul className="curriculum-list">
|
||||
<li><span className="curriculum-bullet">•</span> 심사 기법 및 절차</li>
|
||||
<li><span className="curriculum-bullet">•</span> 체크리스트 작성</li>
|
||||
<li><span className="curriculum-bullet">•</span> 부적합 보고서 작성</li>
|
||||
<li><span className="curriculum-bullet">•</span> Role-Play 실습</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Col 3 */}
|
||||
<div className="curriculum-card">
|
||||
<span className="curriculum-number">03</span>
|
||||
<h3 className="curriculum-title">IATF 16949<br />Core Tools</h3>
|
||||
<ul className="curriculum-list">
|
||||
<li><span className="curriculum-bullet">•</span> APQP / PPAP</li>
|
||||
<li><span className="curriculum-bullet">•</span> FMEA (고장모드)</li>
|
||||
<li><span className="curriculum-bullet">•</span> SPC (통계적공정)</li>
|
||||
<li><span className="curriculum-bullet">•</span> MSA (측정분석)</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Col 4 */}
|
||||
<div className="curriculum-card" style={{ justifyContent: 'space-between' }}>
|
||||
<div>
|
||||
<span className="curriculum-number">04</span>
|
||||
<h3 className="curriculum-title">교육문의 및<br />신청안내</h3>
|
||||
<ul className="curriculum-list">
|
||||
<li>총 32개 과정 운영 중</li>
|
||||
<li>맞춤형 출장 교육 가능</li>
|
||||
</ul>
|
||||
</div>
|
||||
<button className="curriculum-btn" onClick={handleDownloadGuide}>
|
||||
<span style={{ fontSize: '1.2rem' }}>📥</span> 교육안내서 보기
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom CTA Banner */}
|
||||
<div className="cta-banner">
|
||||
<div>
|
||||
<h2 className="cta-title">Sokuree Consultant 교육과정을 지금 신청해 보세요.</h2>
|
||||
<p className="cta-text">
|
||||
전문가 양성과정 교육안내서 및 신청 방식은 아래 버튼을 통해 확인하실 수 있습니다.
|
||||
</p>
|
||||
</div>
|
||||
<button className="cta-button" onClick={handleApply}>
|
||||
교육 신청하기
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default ServiceDetail;
|
||||
7
vite.config.js
Normal file
7
vite.config.js
Normal file
@ -0,0 +1,7 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
})
|
||||
Loading…
x
Reference in New Issue
Block a user