zio/solution
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(solution-portal): 바로가기 subdomain URL + 솔루션 이미지 모바일 프레임 + favicon

Browse Source 
- solutions.ts: IP:PORT → slug.zioinfo.co.kr 서브도메인 URL로 전환
- index.html: favicon.svg + favicon.ico link 추가
- public/screenshots/: 15개 솔루션 이미지 (itsm=Playwright, 나머지=logo 폴더)
- MobileScreenList: slug prop 추가 → 폰 프레임 내 실제 이미지 표시 (onError CSS 폴백)
- SolutionDetailPage: solution.slug를 MobileScreenList에 전달

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
DESKTOP-TKLFCPR\ython 2026-06-18 00:58:51 +09:00
parent 1f06a27aad
commit c46cc5b4ed
19 changed files with 51 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -5,6 +5,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>GUARDiA Solution Portal — 지오정보기술</title> <title>GUARDiA Solution Portal — 지오정보기술</title>
<meta name="description" content="GUARDiA AI 기반 엔터프라이즈 솔루션 포털. ITSM·ERP·CRM·OCR·BI·PMS·RPA·Groupware·Portal·Mall·CMS·MES·ESN·HRM 15개 솔루션 소개 및 운영 가이드." /> <meta name="description" content="GUARDiA AI 기반 엔터프라이즈 솔루션 포털. ITSM·ERP·CRM·OCR·BI·PMS·RPA·Groupware·Portal·Mall·CMS·MES·ESN·HRM 15개 솔루션 소개 및 운영 가이드." />
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link rel="alternate icon" href="/favicon.ico" />
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

BIN
public/screenshots/bi.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 MiB

BIN
public/screenshots/cms.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 MiB

BIN
public/screenshots/crm.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 MiB

BIN
public/screenshots/erp.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 MiB

BIN
public/screenshots/esn.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 MiB

BIN
public/screenshots/fa.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 MiB

BIN
public/screenshots/groupware.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 MiB

BIN
public/screenshots/hrm.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 MiB

BIN
public/screenshots/itsm.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 56 KiB

BIN
public/screenshots/mall.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 MiB

BIN
public/screenshots/mes.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 MiB

BIN
public/screenshots/ocr.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 MiB

BIN
public/screenshots/pms.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 MiB

BIN
public/screenshots/portal.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 MiB

BIN
public/screenshots/rpa.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 MiB

27
src/components/MobileScreenList.tsx
View File

@ -8,6 +8,7 @@ interface Screen {
interface MobileScreenListProps { interface MobileScreenListProps {
screens: Screen[]; screens: Screen[];
color: string; color: string;
slug: string;
} }
const TYPE_LABEL: Record<string, string> = { const TYPE_LABEL: Record<string, string> = {
@ -31,10 +32,10 @@ function guessLayout(name: string): Layout {
const BAR_HEIGHTS = [60, 85, 45, 70, 55, 90, 40, 75]; const BAR_HEIGHTS = [60, 85, 45, 70, 55, 90, 40, 75];
function PhoneMockup({ screen, color }: { screen: Screen; color: string }) { function PhoneMockup({ screen, color, slug }: { screen: Screen; color: string; slug: string }) {
const layout = guessLayout(screen.name); const layout = guessLayout(screen.name);
const alpha = (a: number) => `${color}${Math.round(a * 255).toString(16).padStart(2, '0')}`; const alpha = (a: number) => `${color}${Math.round(a * 255).toString(16).padStart(2, '0')}`;
const [imgFailed, setImgFailed] = React.useState(false);
const headerBg = `linear-gradient(135deg, ${alpha(0.9)}, ${alpha(0.6)})`; const headerBg = `linear-gradient(135deg, ${alpha(0.9)}, ${alpha(0.6)})`;
return ( return (
<div className="phone-card"> <div className="phone-card">
@ -72,8 +73,16 @@ function PhoneMockup({ screen, color }: { screen: Screen; color: string }) {
</div> </div>
{/* 본문 */} {/* 본문 */}
<div className="phone-body"> <div className="phone-body" style={!imgFailed ? { padding: 0, overflow: 'hidden' } : {}}>
{layout === 'dashboard' && ( {!imgFailed && (
<img
src={`/screenshots/${slug}.png`}
alt={screen.name}
onError={() => setImgFailed(true)}
style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'top center', display: 'block' }}
/>
)}
{imgFailed && layout === 'dashboard' && (
<> <>
<div className="phone-stat-row"> <div className="phone-stat-row">
<div className="phone-stat"> <div className="phone-stat">
@ -104,7 +113,7 @@ function PhoneMockup({ screen, color }: { screen: Screen; color: string }) {
</div> </div>
</> </>
)} )}
{layout === 'chart' && ( {imgFailed && layout === 'chart' && (
<> <>
<div className="phone-stat-row"> <div className="phone-stat-row">
<div className="phone-stat"> <div className="phone-stat">
@ -137,7 +146,7 @@ function PhoneMockup({ screen, color }: { screen: Screen; color: string }) {
</div> </div>
</> </>
)} )}
{(layout === 'list' || layout === 'kanban') && ( {imgFailed && (layout === 'list' || layout === 'kanban') && (
<> <>
{[ {[
{ dot: color, w1: '80%', w2: '55%', badge: '완료', bc: '#10b981' }, { dot: color, w1: '80%', w2: '55%', badge: '완료', bc: '#10b981' },
@ -157,7 +166,7 @@ function PhoneMockup({ screen, color }: { screen: Screen; color: string }) {
))} ))}
</> </>
)} )}
{layout === 'form' && ( {imgFailed && layout === 'form' && (
<> <>
{[70, 100, 85].map((w, i) => ( {[70, 100, 85].map((w, i) => (
<div key={i} style={{ <div key={i} style={{
@ -194,14 +203,14 @@ function PhoneMockup({ screen, color }: { screen: Screen; color: string }) {
); );
} }
export const MobileScreenList: React.FC<MobileScreenListProps> = ({ screens, color }) => { export const MobileScreenList: React.FC<MobileScreenListProps> = ({ screens, color, slug }) => {
if (!screens.length) { if (!screens.length) {
return <p className="mobile-empty">모바일 앱 화면은 준비 중입니다.</p>; return <p className="mobile-empty">모바일 앱 화면은 준비 중입니다.</p>;
} }
return ( return (
<div className="mobile-screen-list"> <div className="mobile-screen-list">
{screens.map((s) => ( {screens.map((s) => (
<PhoneMockup key={s.name} screen={s} color={color} /> <PhoneMockup key={s.name} screen={s} color={color} slug={slug} />
))} ))}
</div> </div>
); );

61
src/data/solutions.ts
View File

@ -1,4 +1,4 @@
export interface Solution { export interface Solution {
id: string; id: string;
slug: string; slug: string;
name: string; name: string;
@ -18,8 +18,7 @@ export interface Solution {
mobileScreens: { name: string; type: 'customer' | 'admin' | 'field' }[]; mobileScreens: { name: string; type: 'customer' | 'admin' | 'field' }[];
} }
const IP = '101.79.17.164'; const sub = (slug: string) => `http://${slug}.zioinfo.co.kr`;
const url = (port: number) => `http://${IP}:${port}`;
export const SOLUTIONS: Solution[] = [ export const SOLUTIONS: Solution[] = [
{ {
@ -31,7 +30,7 @@ export const SOLUTIONS: Solution[] = [
port: 9001, port: 9001,
color: '#6366f1', color: '#6366f1',
status: 'live', status: 'live',
access: { url: url(9001), httpsUrl: 'https://zioinfo.co.kr:8443', id: 'admin', pw: '1111' }, access: { url: sub('itsm'), httpsUrl: 'https://zioinfo.co.kr:8443', id: 'admin', pw: '1111' },
features: [ features: [
{ title: 'SR 자동화', desc: 'SR(서비스요청) 접수·처리·완료 전 과정 자동화' }, { title: 'SR 자동화', desc: 'SR(서비스요청) 접수·처리·완료 전 과정 자동화' },
{ title: 'CMDB 자산관리', desc: 'CMDB 서버 자산 등록·조회·의존성 관리' }, { title: 'CMDB 자산관리', desc: 'CMDB 서버 자산 등록·조회·의존성 관리' },
@ -68,7 +67,7 @@ export const SOLUTIONS: Solution[] = [
port: 8003, port: 8003,
color: '#10b981', color: '#10b981',
status: 'live', status: 'live',
access: { url: url(8003), id: 'admin', pw: 'admin123' }, access: { url: sub('erp'), id: 'admin', pw: 'admin123' },
features: [ features: [
{ title: '전표 자동 분류', desc: 'AI 기반 전표 자동 분류 및 계정 매핑' }, { title: '전표 자동 분류', desc: 'AI 기반 전표 자동 분류 및 계정 매핑' },
{ title: '예산·KPI', desc: '예산 관리 및 KPI 대시보드' }, { title: '예산·KPI', desc: '예산 관리 및 KPI 대시보드' },
@ -78,7 +77,7 @@ export const SOLUTIONS: Solution[] = [
{ title: 'FinOps', desc: 'FinOps 클라우드 비용 추적' }, { title: 'FinOps', desc: 'FinOps 클라우드 비용 추적' },
], ],
steps: [ steps: [
{ num: 1, title: '접속·로그인', desc: 'http://101.79.17.164:8003 접속 → admin / admin123 로그인' }, { num: 1, title: '접속·로그인', desc: 'http://erp.zioinfo.co.kr 접속 → admin / admin123 로그인' },
{ num: 2, title: '대시보드', desc: '매출·비용·KPI 현황 확인' }, { num: 2, title: '대시보드', desc: '매출·비용·KPI 현황 확인' },
{ num: 3, title: '재무', desc: '[전표입력] → 항목 입력 → [AI 분류] 클릭 → 계정 자동 입력 확인' }, { num: 3, title: '재무', desc: '[전표입력] → 항목 입력 → [AI 분류] 클릭 → 계정 자동 입력 확인' },
{ num: 4, title: '예산', desc: '[예산현황] → 부서별 집행률 확인' }, { num: 4, title: '예산', desc: '[예산현황] → 부서별 집행률 확인' },
@ -101,7 +100,7 @@ export const SOLUTIONS: Solution[] = [
port: 8004, port: 8004,
color: '#f59e0b', color: '#f59e0b',
status: 'live', status: 'live',
access: { url: url(8004), id: 'admin', pw: 'admin123' }, access: { url: sub('crm'), id: 'admin', pw: 'admin123' },
features: [ features: [
{ title: '고객 관리', desc: '고객(기관) 등록 · 히스토리 관리' }, { title: '고객 관리', desc: '고객(기관) 등록 · 히스토리 관리' },
{ title: '영업 파이프라인', desc: '영업기회 파이프라인 단계별 관리' }, { title: '영업 파이프라인', desc: '영업기회 파이프라인 단계별 관리' },
@ -111,7 +110,7 @@ export const SOLUTIONS: Solution[] = [
{ title: 'ITSM SR 연동', desc: '고객 문의 → SR 자동 생성' }, { title: 'ITSM SR 연동', desc: '고객 문의 → SR 자동 생성' },
], ],
steps: [ steps: [
{ num: 1, title: '접속·로그인', desc: 'http://101.79.17.164:8004 접속 → admin / admin123 로그인' }, { num: 1, title: '접속·로그인', desc: 'http://crm.zioinfo.co.kr 접속 → admin / admin123 로그인' },
{ num: 2, title: '대시보드', desc: '영업 파이프라인 현황 확인' }, { num: 2, title: '대시보드', desc: '영업 파이프라인 현황 확인' },
{ num: 3, title: '고객', desc: '[고객등록] → 기관명·담당자·연락처 입력' }, { num: 3, title: '고객', desc: '[고객등록] → 기관명·담당자·연락처 입력' },
{ num: 4, title: '영업기회', desc: '[새 기회] → 고객 연결 → 단계 설정 (발굴→제안→협상→계약)' }, { num: 4, title: '영업기회', desc: '[새 기회] → 고객 연결 → 단계 설정 (발굴→제안→협상→계약)' },
@ -134,7 +133,7 @@ export const SOLUTIONS: Solution[] = [
port: 8005, port: 8005,
color: '#8b5cf6', color: '#8b5cf6',
status: 'live', status: 'live',
access: { url: url(8005), id: 'admin', pw: 'admin123' }, access: { url: sub('ocr'), id: 'admin', pw: 'admin123' },
features: [ features: [
{ title: '계약서 등록', desc: '계약서 → 나라장터 계약 자동 등록' }, { title: '계약서 등록', desc: '계약서 → 나라장터 계약 자동 등록' },
{ title: '납품서 처리', desc: '납품서 → CMDB 서버 자동 등록' }, { title: '납품서 처리', desc: '납품서 → CMDB 서버 자동 등록' },
@ -145,7 +144,7 @@ export const SOLUTIONS: Solution[] = [
{ title: '브랜드 계약서', desc: '현대백화점 등 브랜드 계약서 → 계약 이력' }, { title: '브랜드 계약서', desc: '현대백화점 등 브랜드 계약서 → 계약 이력' },
], ],
steps: [ steps: [
{ num: 1, title: '접속·로그인', desc: 'http://101.79.17.164:8005 접속 → admin / admin123 로그인' }, { num: 1, title: '접속·로그인', desc: 'http://ocr.zioinfo.co.kr 접속 → admin / admin123 로그인' },
{ num: 2, title: '문서 업로드', desc: '[문서 업로드] → 문서 이미지/PDF 선택' }, { num: 2, title: '문서 업로드', desc: '[문서 업로드] → 문서 이미지/PDF 선택' },
{ num: 3, title: '워크플로우 선택', desc: '워크플로우 선택 → 장애보고서→SR 선택' }, { num: 3, title: '워크플로우 선택', desc: '워크플로우 선택 → 장애보고서→SR 선택' },
{ num: 4, title: 'OCR 실행', desc: '[OCR 실행] 클릭 → AI 텍스트 추출 확인' }, { num: 4, title: 'OCR 실행', desc: '[OCR 실행] 클릭 → AI 텍스트 추출 확인' },
@ -168,7 +167,7 @@ export const SOLUTIONS: Solution[] = [
port: 8006, port: 8006,
color: '#06b6d4', color: '#06b6d4',
status: 'live', status: 'live',
access: { url: url(8006), id: 'admin', pw: 'admin123' }, access: { url: sub('bi'), id: 'admin', pw: 'admin123' },
features: [ features: [
{ title: '데이터소스 연결', desc: 'PostgreSQL · API · CSV 데이터소스 연결' }, { title: '데이터소스 연결', desc: 'PostgreSQL · API · CSV 데이터소스 연결' },
{ title: '대시보드 빌더', desc: '드래그앤드롭 대시보드 빌더' }, { title: '대시보드 빌더', desc: '드래그앤드롭 대시보드 빌더' },
@ -178,7 +177,7 @@ export const SOLUTIONS: Solution[] = [
{ title: 'ITSM 데이터 피드', desc: 'SR·SLA·배포 통계 데이터 피드' }, { title: 'ITSM 데이터 피드', desc: 'SR·SLA·배포 통계 데이터 피드' },
], ],
steps: [ steps: [
{ num: 1, title: '접속·로그인', desc: 'http://101.79.17.164:8006 접속 → admin / admin123 로그인' }, { num: 1, title: '접속·로그인', desc: 'http://bi.zioinfo.co.kr 접속 → admin / admin123 로그인' },
{ num: 2, title: '데이터소스', desc: '[추가] → PostgreSQL 선택 → ITSM DB 연결' }, { num: 2, title: '데이터소스', desc: '[추가] → PostgreSQL 선택 → ITSM DB 연결' },
{ num: 3, title: '대시보드', desc: '[새 대시보드] → 위젯 추가 → 막대/라인/KPI 선택' }, { num: 3, title: '대시보드', desc: '[새 대시보드] → 위젯 추가 → 막대/라인/KPI 선택' },
{ num: 4, title: 'AI 쿼리', desc: '검색창에 "이번 달 미처리 SR 현황" 입력 → SQL 자동 생성 확인' }, { num: 4, title: 'AI 쿼리', desc: '검색창에 "이번 달 미처리 SR 현황" 입력 → SQL 자동 생성 확인' },
@ -201,7 +200,7 @@ export const SOLUTIONS: Solution[] = [
port: 8007, port: 8007,
color: '#f97316', color: '#f97316',
status: 'live', status: 'live',
access: { url: url(8007), id: 'admin', pw: 'admin123' }, access: { url: sub('pms'), id: 'admin', pw: 'admin123' },
features: [ features: [
{ title: '이슈 추적', desc: '이슈 생성·추적 (JIRA 호환)' }, { title: '이슈 추적', desc: '이슈 생성·추적 (JIRA 호환)' },
{ title: 'Scrum·Kanban', desc: 'Scrum · Kanban 보드' }, { title: 'Scrum·Kanban', desc: 'Scrum · Kanban 보드' },
@ -213,7 +212,7 @@ export const SOLUTIONS: Solution[] = [
{ title: 'RFP 분석', desc: 'RFP → 요구사항분석서 자동 생성' }, { title: 'RFP 분석', desc: 'RFP → 요구사항분석서 자동 생성' },
], ],
steps: [ steps: [
{ num: 1, title: '접속·로그인', desc: 'http://101.79.17.164:8007 접속 → admin / admin123 로그인' }, { num: 1, title: '접속·로그인', desc: 'http://pms.zioinfo.co.kr 접속 → admin / admin123 로그인' },
{ num: 2, title: '프로젝트', desc: '[새 프로젝트] → 이름·유형(Scrum) 선택' }, { num: 2, title: '프로젝트', desc: '[새 프로젝트] → 이름·유형(Scrum) 선택' },
{ num: 3, title: '백로그', desc: '[이슈 추가] → 제목·담당자·우선순위 입력' }, { num: 3, title: '백로그', desc: '[이슈 추가] → 제목·담당자·우선순위 입력' },
{ num: 4, title: '보드', desc: 'Kanban 뷰 전환 → 이슈 드래그앤드롭으로 상태 변경' }, { num: 4, title: '보드', desc: 'Kanban 뷰 전환 → 이슈 드래그앤드롭으로 상태 변경' },
@ -236,7 +235,7 @@ export const SOLUTIONS: Solution[] = [
port: 8008, port: 8008,
color: '#ec4899', color: '#ec4899',
status: 'live', status: 'live',
access: { url: url(8008), id: 'admin', pw: 'admin123' }, access: { url: sub('rpa'), id: 'admin', pw: 'admin123' },
features: [ features: [
{ title: '노코드 워크플로우', desc: '노코드 워크플로우 빌더' }, { title: '노코드 워크플로우', desc: '노코드 워크플로우 빌더' },
{ title: '봇 스케줄링', desc: '봇 등록 · 스케줄링' }, { title: '봇 스케줄링', desc: '봇 등록 · 스케줄링' },
@ -245,7 +244,7 @@ export const SOLUTIONS: Solution[] = [
{ title: 'ITSM 연동', desc: 'ITSM SR 자동 처리 연동' }, { title: 'ITSM 연동', desc: 'ITSM SR 자동 처리 연동' },
], ],
steps: [ steps: [
{ num: 1, title: '접속·로그인', desc: 'http://101.79.17.164:8008 접속 → admin / admin123 로그인' }, { num: 1, title: '접속·로그인', desc: 'http://rpa.zioinfo.co.kr 접속 → admin / admin123 로그인' },
{ num: 2, title: '워크플로우', desc: '[새 워크플로우] → 노드 드래그앤드롭' }, { num: 2, title: '워크플로우', desc: '[새 워크플로우] → 노드 드래그앤드롭' },
{ num: 3, title: '트리거 설정', desc: '[스케줄] 선택 → 매일 09:00 설정' }, { num: 3, title: '트리거 설정', desc: '[스케줄] 선택 → 매일 09:00 설정' },
{ num: 4, title: '액션 추가', desc: '[ITSM SR 생성] 노드 추가 → 파라미터 입력' }, { num: 4, title: '액션 추가', desc: '[ITSM SR 생성] 노드 추가 → 파라미터 입력' },
@ -268,7 +267,7 @@ export const SOLUTIONS: Solution[] = [
port: 8009, port: 8009,
color: '#14b8a6', color: '#14b8a6',
status: 'live', status: 'live',
access: { url: url(8009), id: 'admin', pw: 'admin123' }, access: { url: sub('groupware'), id: 'admin', pw: 'admin123' },
features: [ features: [
{ title: '전자결재', desc: '다단계 결재선 · 대리결재' }, { title: '전자결재', desc: '다단계 결재선 · 대리결재' },
{ title: '게시판', desc: '공지 · 자유 · 팀별 게시판' }, { title: '게시판', desc: '공지 · 자유 · 팀별 게시판' },
@ -281,7 +280,7 @@ export const SOLUTIONS: Solution[] = [
{ title: 'AI 문서 요약', desc: 'AI 문서 자동 요약' }, { title: 'AI 문서 요약', desc: 'AI 문서 자동 요약' },
], ],
steps: [ steps: [
{ num: 1, title: '접속·로그인', desc: 'http://101.79.17.164:8009 접속 → admin / admin123 로그인' }, { num: 1, title: '접속·로그인', desc: 'http://groupware.zioinfo.co.kr 접속 → admin / admin123 로그인' },
{ num: 2, title: '전자결재', desc: '[기안] → 양식 선택 → 내용 작성 → 결재선 설정 → 상신' }, { num: 2, title: '전자결재', desc: '[기안] → 양식 선택 → 내용 작성 → 결재선 설정 → 상신' },
{ num: 3, title: '일정', desc: '[일정등록] → 제목·날짜·참석자 입력 → 팀 공유' }, { num: 3, title: '일정', desc: '[일정등록] → 제목·날짜·참석자 입력 → 팀 공유' },
{ num: 4, title: '근태', desc: '[휴가신청] → 날짜·종류 선택 → 결재 요청' }, { num: 4, title: '근태', desc: '[휴가신청] → 날짜·종류 선택 → 결재 요청' },
@ -304,7 +303,7 @@ export const SOLUTIONS: Solution[] = [
port: 8010, port: 8010,
color: '#7c3aed', color: '#7c3aed',
status: 'live', status: 'live',
access: { url: url(8010), id: 'admin', pw: 'admin123' }, access: { url: sub('portal'), id: 'admin', pw: 'admin123' },
features: [ features: [
{ title: 'SSO 단일 로그인', desc: 'GUARDiA 전 시스템 SSO 바로가기' }, { title: 'SSO 단일 로그인', desc: 'GUARDiA 전 시스템 SSO 바로가기' },
{ title: '위젯 대시보드', desc: '역할별 위젯 대시보드' }, { title: '위젯 대시보드', desc: '역할별 위젯 대시보드' },
@ -316,7 +315,7 @@ export const SOLUTIONS: Solution[] = [
{ title: 'AI 공지 요약', desc: 'AI 공지 자동 요약' }, { title: 'AI 공지 요약', desc: 'AI 공지 자동 요약' },
], ],
steps: [ steps: [
{ num: 1, title: '접속·로그인', desc: 'http://101.79.17.164:8010 접속 → admin / admin123 로그인' }, { num: 1, title: '접속·로그인', desc: 'http://portal.zioinfo.co.kr 접속 → admin / admin123 로그인' },
{ num: 2, title: '포털 메인', desc: '9개 시스템 바로가기 카드 확인' }, { num: 2, title: '포털 메인', desc: '9개 시스템 바로가기 카드 확인' },
{ num: 3, title: '위젯', desc: '[위젯 추가] → SR현황·KPI·일정 선택 → 대시보드 배치' }, { num: 3, title: '위젯', desc: '[위젯 추가] → SR현황·KPI·일정 선택 → 대시보드 배치' },
{ num: 4, title: '통합검색', desc: '검색창에 "장애 처리" 입력 → ITSM·KB·문서 통합 결과 확인' }, { num: 4, title: '통합검색', desc: '검색창에 "장애 처리" 입력 → ITSM·KB·문서 통합 결과 확인' },
@ -339,7 +338,7 @@ export const SOLUTIONS: Solution[] = [
port: 8011, port: 8011,
color: '#f43f5e', color: '#f43f5e',
status: 'live', status: 'live',
access: { url: url(8011), id: 'admin', pw: 'admin123' }, access: { url: sub('mall'), id: 'admin', pw: 'admin123' },
features: [ features: [
{ title: 'ZIP 배송권역', desc: '다매장 ZIP 배송권역 관리' }, { title: 'ZIP 배송권역', desc: '다매장 ZIP 배송권역 관리' },
{ title: '타임슬롯', desc: '타임슬롯 스케줄링 (당일배송)' }, { title: '타임슬롯', desc: '타임슬롯 스케줄링 (당일배송)' },
@ -351,7 +350,7 @@ export const SOLUTIONS: Solution[] = [
{ title: 'i18n 한/영', desc: '한국어/영어 다국어 지원' }, { title: 'i18n 한/영', desc: '한국어/영어 다국어 지원' },
], ],
steps: [ steps: [
{ num: 1, title: '접속·로그인', desc: 'http://101.79.17.164:8011 접속 → admin / admin123 로그인' }, { num: 1, title: '접속·로그인', desc: 'http://mall.zioinfo.co.kr 접속 → admin / admin123 로그인' },
{ num: 2, title: '상품 확인', desc: '상품 목록 확인 (Montvale Florist 실제 상품)' }, { num: 2, title: '상품 확인', desc: '상품 목록 확인 (Montvale Florist 실제 상품)' },
{ num: 3, title: '주문', desc: '상품 선택 → ZIP 코드 입력 → 배송 슬롯 선택 → 장바구니 추가' }, { num: 3, title: '주문', desc: '상품 선택 → ZIP 코드 입력 → 배송 슬롯 선택 → 장바구니 추가' },
{ num: 4, title: '결제', desc: '카드 정보 (mock: 4242-4242-4242-4242) → 주문 완료' }, { num: 4, title: '결제', desc: '카드 정보 (mock: 4242-4242-4242-4242) → 주문 완료' },
@ -375,7 +374,7 @@ export const SOLUTIONS: Solution[] = [
port: 8012, port: 8012,
color: '#0ea5e9', color: '#0ea5e9',
status: 'live', status: 'live',
access: { url: url(8012), id: 'admin', pw: 'admin123' }, access: { url: sub('cms'), id: 'admin', pw: 'admin123' },
features: [ features: [
{ title: '헤드리스 CMS', desc: '페이지 · 포스트 · 블록 헤드리스 CMS' }, { title: '헤드리스 CMS', desc: '페이지 · 포스트 · 블록 헤드리스 CMS' },
{ title: '게시 워크플로우', desc: '버전관리 · 게시 워크플로우 (draft→published)' }, { title: '게시 워크플로우', desc: '버전관리 · 게시 워크플로우 (draft→published)' },
@ -387,7 +386,7 @@ export const SOLUTIONS: Solution[] = [
{ title: '폼 빌더', desc: '드래그앤드롭 폼 빌더' }, { title: '폼 빌더', desc: '드래그앤드롭 폼 빌더' },
], ],
steps: [ steps: [
{ num: 1, title: '접속·로그인', desc: 'http://101.79.17.164:8012 접속 → admin / admin123 로그인' }, { num: 1, title: '접속·로그인', desc: 'http://cms.zioinfo.co.kr 접속 → admin / admin123 로그인' },
{ num: 2, title: '페이지', desc: '[새 페이지] → 제목 입력 → 블록 에디터에서 콘텐츠 추가' }, { num: 2, title: '페이지', desc: '[새 페이지] → 제목 입력 → 블록 에디터에서 콘텐츠 추가' },
{ num: 3, title: '미디어', desc: '[업로드] → 이미지 선택 → AI 자동 태그 확인' }, { num: 3, title: '미디어', desc: '[업로드] → 이미지 선택 → AI 자동 태그 확인' },
{ num: 4, title: '워크플로우', desc: '페이지 상태를 draft → review → published 변경' }, { num: 4, title: '워크플로우', desc: '페이지 상태를 draft → review → published 변경' },
@ -410,7 +409,7 @@ export const SOLUTIONS: Solution[] = [
port: 8013, port: 8013,
color: '#84cc16', color: '#84cc16',
status: 'live', status: 'live',
access: { url: url(8013), id: 'admin', pw: 'admin123' }, access: { url: sub('mes'), id: 'admin', pw: 'admin123' },
features: [ features: [
{ title: '작업지시·실적', desc: '작업지시 · 생산실적 등록' }, { title: '작업지시·실적', desc: '작업지시 · 생산실적 등록' },
{ title: 'BOM·라우팅', desc: 'BOM · 공정/라우팅 관리' }, { title: 'BOM·라우팅', desc: 'BOM · 공정/라우팅 관리' },
@ -423,7 +422,7 @@ export const SOLUTIONS: Solution[] = [
{ title: 'AI 불량분석', desc: 'AI 불량원인 분석' }, { title: 'AI 불량분석', desc: 'AI 불량원인 분석' },
], ],
steps: [ steps: [
{ num: 1, title: '접속·로그인', desc: 'http://101.79.17.164:8013 접속 → admin / admin123 로그인' }, { num: 1, title: '접속·로그인', desc: 'http://mes.zioinfo.co.kr 접속 → admin / admin123 로그인' },
{ num: 2, title: '작업지시', desc: '[신규] → 품목·수량·공정 입력 → 발행' }, { num: 2, title: '작업지시', desc: '[신규] → 품목·수량·공정 입력 → 발행' },
{ num: 3, title: '생산실적', desc: '작업지시 선택 → 생산량·불량량 입력 → 등록' }, { num: 3, title: '생산실적', desc: '작업지시 선택 → 생산량·불량량 입력 → 등록' },
{ num: 4, title: '검사', desc: '[공정검사] → LOT 번호 입력 → 검사항목 체크 → 합격/불합격' }, { num: 4, title: '검사', desc: '[공정검사] → LOT 번호 입력 → 검사항목 체크 → 합격/불합격' },
@ -446,7 +445,7 @@ export const SOLUTIONS: Solution[] = [
port: 8014, port: 8014,
color: '#a855f7', color: '#a855f7',
status: 'live', status: 'live',
access: { url: url(8014), id: 'admin', pw: 'admin123' }, access: { url: sub('hrm'), id: 'admin', pw: 'admin123' },
features: [ features: [
{ title: '사원 관리', desc: '사원 등록 · 이력관리' }, { title: '사원 관리', desc: '사원 등록 · 이력관리' },
{ title: '조직도·직급', desc: '조직도 · 직급체계' }, { title: '조직도·직급', desc: '조직도 · 직급체계' },
@ -459,7 +458,7 @@ export const SOLUTIONS: Solution[] = [
{ title: 'Groupware 연동', desc: 'Groupware 연동' }, { title: 'Groupware 연동', desc: 'Groupware 연동' },
], ],
steps: [ steps: [
{ num: 1, title: '접속·로그인', desc: 'http://101.79.17.164:8014 접속 → admin / admin123 로그인' }, { num: 1, title: '접속·로그인', desc: 'http://hrm.zioinfo.co.kr 접속 → admin / admin123 로그인' },
{ num: 2, title: '사원', desc: '[신규 등록] → 기본정보·부서·직급 입력 → 저장' }, { num: 2, title: '사원', desc: '[신규 등록] → 기본정보·부서·직급 입력 → 저장' },
{ num: 3, title: '급여', desc: '사원 선택 → 월급여 입력 → [명세서 생성] → PDF 확인' }, { num: 3, title: '급여', desc: '사원 선택 → 월급여 입력 → [명세서 생성] → PDF 확인' },
{ num: 4, title: '성과', desc: '[평가 등록] → KPI 항목 입력 → 점수 부여' }, { num: 4, title: '성과', desc: '[평가 등록] → KPI 항목 입력 → 점수 부여' },
@ -482,7 +481,7 @@ export const SOLUTIONS: Solution[] = [
port: 8015, port: 8015,
color: '#f59e0b', color: '#f59e0b',
status: 'live', status: 'live',
access: { url: url(8015), id: 'admin', pw: 'admin123' }, access: { url: sub('esn'), id: 'admin', pw: 'admin123' },
features: [ features: [
{ title: '멀티테넌트', desc: 'LGInnotek · LGIT · Emart · ZIOINFO 멀티테넌트' }, { title: '멀티테넌트', desc: 'LGInnotek · LGIT · Emart · ZIOINFO 멀티테넌트' },
{ title: 'ESL 기기 관리', desc: 'ESL 기기 등록 · 상태 모니터링' }, { title: 'ESL 기기 관리', desc: 'ESL 기기 등록 · 상태 모니터링' },
@ -494,7 +493,7 @@ export const SOLUTIONS: Solution[] = [
{ title: 'AI 알람 분석', desc: 'Ollama AI 알람 원인 분석' }, { title: 'AI 알람 분석', desc: 'Ollama AI 알람 원인 분석' },
], ],
steps: [ steps: [
{ num: 1, title: '접속·로그인', desc: 'http://101.79.17.164:8015 접속 → admin / admin123 로그인' }, { num: 1, title: '접속·로그인', desc: 'http://esn.zioinfo.co.kr 접속 → admin / admin123 로그인' },
{ num: 2, title: '테넌트 선택', desc: '드롭다운에서 LGINNOTEK 선택' }, { num: 2, title: '테넌트 선택', desc: '드롭다운에서 LGINNOTEK 선택' },
{ num: 3, title: 'ESL 기기', desc: '기기 목록 확인 → 상태(온라인/오프라인) 확인' }, { num: 3, title: 'ESL 기기', desc: '기기 목록 확인 → 상태(온라인/오프라인) 확인' },
{ num: 4, title: 'POS 변환', desc: '[POS 데이터 업로드] → CSV 파일 선택 → 변환 실행' }, { num: 4, title: 'POS 변환', desc: '[POS 데이터 업로드] → CSV 파일 선택 → 변환 실행' },
@ -517,7 +516,7 @@ export const SOLUTIONS: Solution[] = [
port: 8017, port: 8017,
color: '#64748b', color: '#64748b',
status: 'soon', status: 'soon',
access: { url: url(8017), id: '', pw: '' }, access: { url: sub('fa'), id: '', pw: '' },
features: [ features: [
{ title: 'e-Paper 지시서', desc: 'e-Paper 전자 공정 지시서' }, { title: 'e-Paper 지시서', desc: 'e-Paper 전자 공정 지시서' },
{ title: 'QR 작업 추적', desc: 'QR 기반 작업 추적' }, { title: 'QR 작업 추적', desc: 'QR 기반 작업 추적' },

2
src/pages/SolutionDetailPage.tsx
View File

@ -83,7 +83,7 @@ export const SolutionDetailPage: React.FC = () => {
<section className="detail-section"> <section className="detail-section">
<h2 className="section-title">모바일 앱 화면</h2> <h2 className="section-title">모바일 앱 화면</h2>
<p className="section-sub">현장·관리자·사용자용 모바일 화면 구성입니다.</p> <p className="section-sub">현장·관리자·사용자용 모바일 화면 구성입니다.</p>
<MobileScreenList screens={mobileScreens} color={color} /> <MobileScreenList screens={mobileScreens} color={color} slug={solution.slug} />
</section> </section>
</div> </div>
</main> </main>