palette-mcp 1.0.0 → 1.1.0

package/src/components/OrderManagementGuide.tsx

@@ -0,0 +1,459 @@
+import React from 'react';
+// Design System 컴포넌트 import
+import { Button } from '@dealicious/design-system-react/src/components/ssm-button';
+import { Check } from '@dealicious/design-system-react/src/components/ssm-check';
+import { Chip } from '@dealicious/design-system-react/src/components/ssm-chip';
+import { Tag } from '@dealicious/design-system-react/src/components/ssm-tag';
+import { Text } from '@dealicious/design-system-react/src/components/ssm-text';
+import { Dropdown } from '@dealicious/design-system-react/src/components/ssm-dropdown';
+import { Icon } from '@dealicious/design-system-react/src/components/ssm-icon';
+
+// 이미지 상수 정의
+const imgComThumb80X80 = "http://localhost:3845/assets/a23a50ac4b0c21068425b9fbad7b10871c10708b.png";
+const imgComThumb80X81 = "http://localhost:3845/assets/e7dd647a3f3a4b3b8333554648daac78edc8f0a8.png";
+const imgComThumb80X82 = "http://localhost:3845/assets/428b26e10d3dccc7b39edb320853f5a5a9343bc7.png";
+const imgComThumb80X83 = "http://localhost:3845/assets/2d8cebb7a930eb4beb026cf183bb70f432d00fe8.png";
+const imgComThumb80X84 = "http://localhost:3845/assets/04789514f16aa28956a4a0c7d58b66d0ad9d03a6.png";
+const imgComThumb80X85 = "http://localhost:3845/assets/ec6280d9d0c6cf7bd10ca6ba39cf132d15790a08.png";
+const imgComThumb80X86 = "http://localhost:3845/assets/6006ff448e6770595c456de983e6af596bc9ecf2.png";
+const imgComThumb80X87 = "http://localhost:3845/assets/5c335464e980f216e60ce1339fc1da90325ddce8.png";
+const imgComThumb80X88 = "http://localhost:3845/assets/d06db60f0ce3d1a8a913812f3a977e24895e72ef.png";
+const imgComThumb80X89 = "http://localhost:3845/assets/cf9069016fa2f8e1515a0dbabfe7fd88cb5c1d5a.png";
+const imgComThumb80X90 = "http://localhost:3845/assets/fe4632a583f8225edd00b4ca191577b33eafbeff.png";
+const imgComThumb80X91 = "http://localhost:3845/assets/daf12b453c04aa7032b812bba199d0d9a71fae1f.png";
+const imgComThumb80X92 = "http://localhost:3845/assets/b226fd351bdd04b5dd222a331275c7cd2650b4a5.png";
+const img = "http://localhost:3845/assets/f6843e9d48c5f4efce619a1dd1a4ac585682c746.svg";
+const img1 = "http://localhost:3845/assets/cfdcad20a987a42a3a82975b10558672c6989679.svg";
+const img2 = "http://localhost:3845/assets/02fb25fdf55c3329cb12788dda06eb81c93a6c97.svg";
+const img3 = "http://localhost:3845/assets/a996cd8d306819476ae2b46cf48c5b05582487a0.svg";
+const img4 = "http://localhost:3845/assets/9fc03fee616256d57ccf3c58c9348e5a2995aeb2.svg";
+const img5 = "http://localhost:3845/assets/f9c30996c34ac82743f76638e5ffa7124a4fcac3.svg";
+const img6 = "http://localhost:3845/assets/2e89ee11cc0020affd12b24169b5a1c75f41b507.svg";
+
+/**
+ * 주문 관리 안내 컴포넌트
+ * 주문관리 화면에서 매장주문을 더욱 쉽게 확인하고 관리할 수 있도록 안내하는 모달 컴포넌트
+ * Design System 컴포넌트를 사용하여 구현
+ */
+export default function OrderManagementGuide() {
+  const [dontShowAgain, setDontShowAgain] = React.useState(false);
+
+  // 필터 옵션
+  const orderStatusOptions = [
+    { value: 'all', label: '전체' },
+    { value: 'received', label: '주문접수' },
+    { value: 'processing', label: '처리중' },
+    { value: 'completed', label: '완료' },
+  ];
+
+  const periodOptions = [
+    { value: '1month', label: '1개월' },
+    { value: '3months', label: '3개월' },
+    { value: '6months', label: '6개월' },
+    { value: '1year', label: '1년' },
+  ];
+
+  return (
+    <div style={{ 
+      backgroundColor: '#ffffff', 
+      display: 'flex', 
+      flexDirection: 'column', 
+      alignItems: 'flex-start', 
+      borderRadius: '10px',
+      width: '100%',
+      maxWidth: '360px'
+    }}>
+      {/* 헤더 섹션 */}
+      <div style={{ 
+        backgroundColor: '#ffffff', 
+        display: 'flex', 
+        gap: '16px', 
+        alignItems: 'center', 
+        padding: '20px',
+        borderTopLeftRadius: '10px',
+        borderTopRightRadius: '10px',
+        width: '100%'
+      }}>
+        <Text variant="heading" size="large">
+          주문 관리 안내
+        </Text>
+      </div>
+
+      {/* 메인 콘텐츠 섹션 */}
+      <div style={{ 
+        display: 'flex', 
+        flexDirection: 'column', 
+        gap: '8px', 
+        alignItems: 'center', 
+        padding: '4px 16px 24px 16px',
+        width: '100%'
+      }}>
+        {/* 설명 텍스트 */}
+        <div style={{ 
+          display: 'flex', 
+          gap: '8px', 
+          alignItems: 'flex-start', 
+          width: '100%'
+        }}>
+          <div style={{ height: '18px', width: '3px' }}>
+            <img alt="" src={img} style={{ width: '100%', height: '100%' }} />
+          </div>
+          <Text variant="body" size="small" color="#686e7b">
+            주문관리 화면에서 매장주문을 더욱 쉽게 확인하고 관리할 수 있어요.
+          </Text>
+        </div>
+
+        {/* 주문 관리 인터페이스 카드 */}
+        <div style={{ 
+          backgroundColor: '#f5f6fb', 
+          display: 'flex', 
+          flexDirection: 'column', 
+          alignItems: 'center', 
+          justifyContent: 'center',
+          padding: '16px 12px',
+          borderRadius: '6px',
+          width: '100%'
+        }}>
+          <div style={{ 
+            backgroundColor: '#ffffff', 
+            display: 'flex', 
+            flexDirection: 'column', 
+            alignItems: 'center',
+            borderRadius: '6px',
+            width: '100%'
+          }}>
+            {/* 상단 필터 바 */}
+            <div style={{ 
+              display: 'flex', 
+              flexDirection: 'column', 
+              alignItems: 'flex-start', 
+              width: '100%'
+            }}>
+              <div style={{ 
+                backgroundColor: '#ffffff', 
+                display: 'flex', 
+                flexDirection: 'column', 
+                alignItems: 'flex-start', 
+                width: '100%'
+              }}>
+                <div style={{ 
+                  display: 'flex', 
+                  gap: '2.5px', 
+                  alignItems: 'center', 
+                  padding: '7.5px 10px',
+                  width: '100%'
+                }}>
+                  <div style={{ 
+                    display: 'flex', 
+                    gap: '2.5px', 
+                    alignItems: 'center', 
+                    flex: 1
+                  }}>
+                    {/* 주문상태 필터 - Chip 컴포넌트 사용 */}
+                    <Chip variant="outlined" size="small">
+                      주문상태
+                      <Icon name="arrow-down" size="small" />
+                    </Chip>
+                    {/* 기간 필터 - Chip 컴포넌트 사용 */}
+                    <Chip variant="outlined" size="small">
+                      3개월
+                      <Icon name="arrow-down" size="small" />
+                    </Chip>
+                  </div>
+                  {/* 필터 아이콘 */}
+                  <Chip variant="outlined" size="small">
+                    <Icon name="filter" size="small" />
+                  </Chip>
+                </div>
+                <div style={{ 
+                  backgroundColor: '#ebeef6', 
+                  height: '1px', 
+                  width: '100%'
+                }} />
+              </div>
+              {/* 섹션 헤더 */}
+              <div style={{ 
+                display: 'flex', 
+                gap: '5px', 
+                alignItems: 'flex-start', 
+                padding: '8.8px 9.4px',
+                width: '100%'
+              }}>
+                <Text variant="body" size="small">
+                  거래완료 요청
+                </Text>
+                <Text variant="heading" size="small">
+                  3
+                </Text>
+              </div>
+            </div>
+
+            {/* 주문 목록 */}
+            <div style={{ 
+              display: 'flex', 
+              flexDirection: 'column', 
+              alignItems: 'center', 
+              width: '100%'
+            }}>
+              <div style={{ 
+                backgroundColor: '#ebeef6', 
+                height: '1px', 
+                width: '100%'
+              }} />
+
+              {/* 첫 번째 주문 항목 */}
+              <div style={{ 
+                display: 'flex', 
+                flexDirection: 'column', 
+                gap: '10px', 
+                alignItems: 'flex-start', 
+                padding: '10px',
+                width: '100%'
+              }}>
+                <div style={{ 
+                  display: 'flex', 
+                  flexDirection: 'column', 
+                  gap: '7.5px', 
+                  alignItems: 'flex-start', 
+                  width: '100%'
+                }}>
+                  {/* 상태 태그 - Tag 컴포넌트 사용 */}
+                  <div style={{ 
+                    display: 'flex', 
+                    gap: '2.5px', 
+                    alignItems: 'center'
+                  }}>
+                    <Tag variant="error" size="small">주문접수</Tag>
+                    <Tag variant="default" size="small">사입사 방문</Tag>
+                    <Tag variant="default" size="small">현장 결제</Tag>
+                  </div>
+                  
+                  {/* 주문 정보 */}
+                  <div style={{ 
+                    display: 'flex', 
+                    gap: '7.5px', 
+                    alignItems: 'center', 
+                    width: '100%'
+                  }}>
+                    {/* 상품 썸네일 */}
+                    <div style={{ 
+                      border: '0.3px solid rgba(0,0,0,0.05)', 
+                      borderRadius: '6px',
+                      width: '45px',
+                      height: '45px',
+                      position: 'relative'
+                    }}>
+                      <img 
+                        alt="상품 이미지" 
+                        src={imgComThumb80X80} 
+                        style={{ 
+                          width: '100%', 
+                          height: '100%', 
+                          objectFit: 'cover',
+                          borderRadius: '6px'
+                        }} 
+                      />
+                    </div>
+                    {/* 상품 상세 정보 */}
+                    <div style={{ 
+                      display: 'flex', 
+                      flexDirection: 'column', 
+                      gap: '5px', 
+                      flex: 1
+                    }}>
+                      <div style={{ 
+                        display: 'flex', 
+                        flexDirection: 'column', 
+                        gap: '1.3px'
+                      }}>
+                        <Text variant="heading" size="small">
+                          신상플래닛
+                        </Text>
+                        <Text variant="body" size="small" color="#686e7b">
+                          베스트 검정 니트
+                        </Text>
+                      </div>
+                      {/* 가격 정보 */}
+                      <div style={{ 
+                        display: 'flex', 
+                        alignItems: 'center', 
+                        gap: '2.5px'
+                      }}>
+                        <Text variant="heading" size="small">
+                          ₩30,000
+                        </Text>
+                        <div style={{ display: 'flex', gap: '2.5px', alignItems: 'center' }}>
+                          <img alt="" src={img4} style={{ width: '16px', height: '16px' }} />
+                          <img alt="" src={img5} style={{ width: '16px', height: '16px' }} />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                {/* 주문 취소 버튼 - Button 컴포넌트 사용 */}
+                <Button variant="secondary" size="medium" style={{ width: '100%' }}>
+                  주문취소
+                </Button>
+              </div>
+
+              {/* 구분선 */}
+              <div style={{ 
+                backgroundColor: '#ebeef6', 
+                height: '1px', 
+                width: '100%'
+              }} />
+
+              {/* 두 번째 주문 항목 */}
+              <div style={{ 
+                display: 'flex', 
+                flexDirection: 'column', 
+                gap: '10px', 
+                alignItems: 'flex-start', 
+                padding: '10px',
+                width: '100%'
+              }}>
+                <div style={{ 
+                  display: 'flex', 
+                  flexDirection: 'column', 
+                  gap: '7.5px', 
+                  alignItems: 'flex-start', 
+                  width: '100%'
+                }}>
+                  {/* 상태 태그 - Tag 컴포넌트 사용 */}
+                  <div style={{ 
+                    display: 'flex', 
+                    gap: '2.5px', 
+                    alignItems: 'center'
+                  }}>
+                    <Tag variant="warning" size="small">포장완료</Tag>
+                    <Tag variant="default" size="small">직접 수령</Tag>
+                    <Tag variant="default" size="small">현장 결제</Tag>
+                  </div>
+                  
+                  {/* 주문 정보 */}
+                  <div style={{ 
+                    display: 'flex', 
+                    gap: '7.5px', 
+                    alignItems: 'center', 
+                    width: '100%'
+                  }}>
+                    {/* 상품 썸네일 */}
+                    <div style={{ 
+                      border: '0.3px solid rgba(0,0,0,0.05)', 
+                      borderRadius: '6px',
+                      width: '45px',
+                      height: '45px',
+                      position: 'relative'
+                    }}>
+                      <img 
+                        alt="상품 이미지" 
+                        src={imgComThumb80X80} 
+                        style={{ 
+                          width: '100%', 
+                          height: '100%', 
+                          objectFit: 'cover',
+                          borderRadius: '6px'
+                        }} 
+                      />
+                    </div>
+                    {/* 상품 상세 정보 */}
+                    <div style={{ 
+                      display: 'flex', 
+                      flexDirection: 'column', 
+                      gap: '5px', 
+                      flex: 1
+                    }}>
+                      <div style={{ 
+                        display: 'flex', 
+                        flexDirection: 'column', 
+                        gap: '1.3px'
+                      }}>
+                        <div style={{ display: 'flex', gap: '2.5px', alignItems: 'center' }}>
+                          <Text variant="heading" size="small">
+                            신상랩
+                          </Text>
+                          <div style={{ 
+                            backgroundColor: '#fb4760', 
+                            borderRadius: '11px',
+                            width: '6px',
+                            height: '6px',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center'
+                          }}>
+                            <img alt="" src={img6} style={{ width: '4px', height: '4px' }} />
+                          </div>
+                        </div>
+                        <Text variant="body" size="small" color="#686e7b">
+                          데일리 티셔츠 외 2건
+                        </Text>
+                      </div>
+                      {/* 가격 정보 */}
+                      <div style={{ 
+                        display: 'flex', 
+                        alignItems: 'center', 
+                        gap: '2.5px'
+                      }}>
+                        <Text variant="heading" size="small">
+                          ₩56,000
+                        </Text>
+                        <div style={{ display: 'flex', gap: '2.5px', alignItems: 'center' }}>
+                          <img alt="" src={img4} style={{ width: '16px', height: '16px' }} />
+                          <img alt="" src={img5} style={{ width: '16px', height: '16px' }} />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* 다시 보지 않기 체크박스 - Check 컴포넌트 사용 */}
+        <div style={{ 
+          display: 'flex', 
+          gap: '4px', 
+          alignItems: 'flex-start', 
+          width: '100%'
+        }}>
+          <Check 
+            checked={dontShowAgain}
+            onChange={(checked: boolean) => setDontShowAgain(checked)}
+            label="다시 보지 않기"
+          />
+        </div>
+      </div>
+
+      {/* 하단 버튼 섹션 */}
+      <div style={{ 
+        backgroundColor: '#ffffff', 
+        display: 'flex', 
+        flexDirection: 'column', 
+        alignItems: 'flex-start',
+        borderBottomLeftRadius: '10px',
+        borderBottomRightRadius: '10px',
+        width: '100%'
+      }}>
+        <div style={{ 
+          backgroundColor: '#ebeef6', 
+          height: '1px', 
+          width: '100%'
+        }} />
+        <div style={{ 
+          display: 'flex', 
+          gap: '8px', 
+          alignItems: 'center', 
+          justifyContent: 'center',
+          padding: '20px',
+          width: '100%'
+        }}>
+          {/* 확인 버튼 - Button 컴포넌트 사용 */}
+          <Button variant="primary" size="medium" style={{ flex: 1 }}>
+            확인
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/index.ts

@@ -0,0 +1,43 @@
+#!/usr/bin/env node
+
+/**
+ * Palette MCP Server - Local 실행 모드
+ * 
+ * npx palette-mcp 또는 직접 실행 시 사용됩니다.
+ * stdio transport를 사용하여 MCP 클라이언트와 통신합니다.
+ */
+
+// .env 파일 로드
+import dotenv from 'dotenv';
+import { fileURLToPath } from 'url';
+import { dirname, join } from 'path';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+// 프로젝트 루트의 .env 파일 로드
+dotenv.config({ path: join(__dirname, '..', '.env') });
+
+import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
+import { createPaletteServer } from './server.js';
+
+// 서버 시작 (Local 모드)
+async function main() {
+  // 환경변수에서 설정 읽기
+  const server = createPaletteServer({
+    figmaAccessToken: process.env.FIGMA_ACCESS_TOKEN,
+    githubToken: process.env.GITHUB_TOKEN,
+    figmaMcpServerUrl: process.env.FIGMA_MCP_SERVER_URL,
+  });
+
+  // stdio transport로 연결
+  const transport = new StdioServerTransport();
+  await server.connect(transport);
+  
+  console.error('Palette server running on stdio (Local mode)');
+}
+
+main().catch((error) => {
+  console.error('Server error:', error);
+  process.exit(1);
+});