/* 고정 위치 지정 및 레이어 관리 */
.floating-share-bar {
  position: fixed;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40; /* 중요한 레이어 디자인 */
}

핵심 기술 결정사항:

React-Share 통합: 자체 공유 기능 대신 검증된 라이브러리 선택
아이콘 디자인: 40px 원형 소셜 아이콘의 사용성 최적화
호버 효과: scale(1.1) 상호작용 피드백 디자인

v1.1: More 버튼 및 대화상자 통합 (35분 빠른 대응)

사용자 니즈 주도:

문제: 기본 7개 플랫폼으로는 사용자의 다양한 공유 니즈를 만족시킬 수 없음
해결 방안: 완전한 공유 대화상자에 연결되는 "More" 버튼 추가
사용자 경험 플로우: 빠른 공유 + 완전한 선택의 이중 경험

기술 구현 복잡성:

// 상태 관리 도전
const [showMoreDialog, setShowMoreDialog] = useState(false);

// More 버튼의 특별한 처리
const platforms = [
  // ... 기존 7개 플랫폼
  {
    name: 'More',
    isMore: true,
    onClick: () => setShowMoreDialog(true)
  }
];

통합 도전 과제:

컴포넌트 통신: FloatingShareBar와 SimpleShareDialog 간 상태 동기화
시각적 일관성: More 버튼과 소셜 아이콘의 통일된 디자인
z-index 관리: 대화상자의 올바른 레이어 표시 보장

v1.2: 아키텍처 레이어 문제의 근본 해결 (30분 수정)

문제 진단 과정:

문제 증상: FloatingShareBar가 메인 페이지에 표시되지 않음
아키텍처 분석: FloatingShareBar가 ViewerView 내부에 배치됨
상태 의존성: ViewerView는 loading/viewing 상태에서만 렌더링
메인 페이지 상태: STPViewer 기본값은 upload 상태, UploadView 표시
근본 원인: FloatingShareBar가 잘못된 컴포넌트 레이어에 위치

현재 아키텍처 문제:

메인 페이지 → HeroSection → HeroStpViewer → STPViewer
├── upload 상태 → UploadView (FloatingShareBar 없음) ❌
├── loading 상태 → ViewerView (FloatingShareBar 있음) ✅  
└── viewing 상태 → ViewerView (FloatingShareBar 있음) ✅

해결 아키텍처:

STPViewer (새로운 FloatingShareBar 레이어)
├── upload 상태 → UploadView + FloatingShareBar ✅
├── loading 상태 → ViewerView + FloatingShareBar ✅
└── viewing 상태 → ViewerView + FloatingShareBar ✅

중요한 코드 수정:

// src/components/stp-viewer/stp-viewer.tsx
return (
  <div className={cn('stp-viewer-container', className)}>
    {/* 상태 관련 주요 콘텐츠 */}
    {renderContent()}
    
    {/* 글로벌 플로팅 공유 도구 모음 */}
    <FloatingShareBar file={viewerState.file} />
  </div>
);

SimpleShareDialog의 실용적 개발 지혜

UI 일관성 문제의 체계적 발견

비교 분석 방법: 메인 페이지 모드 vs 전체화면 모드 간 체계적 비교를 통해 기능 불일치 발견:

기능	메인 페이지 모드	전체화면 모드	상태
New File	✅	✅	일관됨
Screenshot	✅	✅	일관됨
Share	❌ 누락	✅	불일치

코드 레벨 분석:

// viewer-view.tsx:730-766 - 메인 페이지 도구 모음
const toolbarButtons: ToolbarButton[] = [
  { id: 'new-file', /* ... */ },
  { id: 'screenshot', /* ... */ },
  // ❌ Share 버튼 누락
];

// FullscreenToolbar.tsx:132-139 - 전체화면 모드 도구 모음  
const secondaryTools: ToolbarButton[] = [
  {
    id: 'share',
    label: t('toolbar.share'),
    // ✅ 존재하지만 기능 미구현
  },
];

기술 한계의 깊은 발견:

// ✅ React-Share 실제 능력
- 링크 공유: 모든 플랫폼이 URL 공유 지원
- 텍스트 콘텐츠: 제목, 설명 등 텍스트 매개변수 지원
- 소셜 플랫폼 리다이렉트: 플랫폼의 공식 공유 페이지 열기
- 외부 의존성 제로: 서드파티 SDK 로딩 불필요

// ❌ React-Share 기술 제약
- 로컬 파일 공유 지원 없음: 스크린샷, 문서 직접 공유 불가
- 이미지 업로드 지원 없음: 주류 플랫폼은 직접 이미지 업로드 미지원
- 공개 이미지 URL만 지원: 소수 플랫폼이 공개 접근 가능한 이미지 링크 요구
- 백엔드 기능 없음: 파일 업로드, 단축 링크 생성 처리 불가

개발 계획의 현실적 조정:

이상적 계획: 5일, 복잡한 아키텍처, 다중 컴포넌트 디자인
현실적 조정: 1.5일, 단일 컴포넌트 디자인, 기술 위험 제로
핵심 결정: 비현실적 기능 환상 포기, 실현 가능한 솔루션에 집중
아키텍처 단순화: SimpleShareDialog 컴포넌트만 생성

최소 아키텍처의 설계 지혜

컴포넌트 전략:

src/components/stp-viewer/
├── shared/                          
│   └── SimpleShareDialog.tsx       # 통합 공유 대화상자 (유일한 컴포넌트)
├── viewer-view.tsx                 # Share 버튼 추가
└── fullscreen/
    └── FullscreenToolbar.tsx       # 실제 공유 기능 연결

설계 원칙의 실천:

단일 컴포넌트 생성: 과도한 엔지니어링 방지
새 Hook 생성 안함: 컴포넌트 내에서 직접 로직 구현
기존 상태 재사용: 글로벌 스토어 확장 대신 로컬 상태 사용
플랫폼 우선순위: Tier1/2/3 현실적 계층 전략

공유 기능 45분 빠른 향상 실습

문제의 정밀한 진단

문제 1: disabled 버튼 로직 오류

// 잘못된 로직
{
  id: 'share',
  disabled: !isViewerReady, // ❌ 페이지 링크 공유는 모델 로딩을 기다릴 필요 없음
}

// 올바른 로직  
{
  id: 'share', 
  disabled: false, // ✅ 페이지 공유 기능은 항상 사용 가능해야 함
}

근본 원인 분석:

기술적 오류: 모델 로딩 전 isViewerReady가 false
논리적 오류: 페이지 링크 공유 기능은 3D 모델 상태에 의존하지 않아야 함
사용자 영향: 메인 페이지에서 공유 기능을 전혀 사용할 수 없음

문제 2: 불충분한 플랫폼 지원에 대한 빠른 대응

사용자 피드백: 4개 플랫폼만 지원 (Twitter, Facebook, LinkedIn, Email)
확장 요구: 더 많은 인기 소셜 및 커뮤니케이션 플랫폼 지원 희망
기술적 실현 가능성: react-share 라이브러리가 20+ 플랫폼 지원

45분 3단계 구현 플로우

1단계: 기본 수정 (15분)

// src/components/stp-viewer/viewer-view.tsx:754
- disabled: !isViewerReady,
+ disabled: false,

2단계: 플랫폼 확장 (20분)

// 6개의 새로운 주류 플랫폼 추가
const newPlatforms = [
  'WhatsApp',    // 세계 최대 인스턴트 메시징 앱
  'Telegram',    // 기술 사용자 그룹 선호  
  'Reddit',      // 기술 커뮤니티 주요 공유 플랫폼
  'Pinterest',   // 시각적 콘텐츠 공유, 3D 모델에 적합
  'Weibo',       // 중국 사용자 주요 소셜 플랫폼
  'Line',        // 아시아 지역 인기 커뮤니케이션 앱
];

3단계: 경험 최적화 (10분)

레이아웃 조정: 2x2 그리드에서 3x3 그리드로 확장
국제화 지원: 새 플랫폼의 중영 표시 이름
모바일 적응: 소형 화면 장치에서의 표시 효과 보장

중요한 개발 경험 요약

아키텍처 진화의 중요성:

레이어 선택: 올바른 레이어에 컴포넌트를 배치하는 것이 특정 기능 최적화보다 중요
상태 의존성: 과도한 상태 의존성은 예상치 못한 기능 제약을 초래
점진적 향상: 기본 기능에서 완전 기능으로의 단계적 개발이 더 안정적

현실적 기술 선택:

능력 경계: 서드파티 라이브러리의 실제 능력과 제약에 대한 깊은 이해
계획 조정: 기술적 현실에 기반한 개발 계획 조정이 이상적 솔루션 고수보다 현명
아키텍처 단순화: 단일 컴포넌트 디자인이 복잡한 아키텍처보다 효과적인 경우가 많음

빠른 대응 개발 능력:

문제 진단: 문제의 근본 원인을 정확하게 찾아내는 것의 중요성
시간 관리: 합리적인 단계 분할이 개발 효율성을 향상시킴
사용자 지향: 사용자 피드백에 기반한 빠른 반복의 가치

이 공유 기능 개발 히스토리는 아키텍처 진화부터 기술 선택까지, 문제 진단부터 빠른 수정까지의 완전한 개발 지혜를 보여주며 팀에게 소중한 실무 경험을 축적하였다.

다음 단계

성능 메트릭 지속적 모니터링
개선된 워크플로에 대한 사용자 피드백 수집
추가 모바일 최적화 계획
대용량 파일의 점진적 로딩 탐색

성능 최적화

v1.0.6

주요 코드 정리 및 성능 개선, 18초 로딩 성능 유지

2025/08/28

🧹 코드 품질 및 아키텍처 개선

장기적 안정성을 위한 기반 강화 - 포괄적인 기능 세트 최적화:

유지 보수성과 성능 향상을 위한 포괄적인 정리 및 최적화:

데드 코드 제거: 모바일 도구 모음.tsx를 포함한 사용되지 않는 코드 약 400줄 삭제
가져오기 정리: 여러 구성 요소에서 사용되지 않는 가져오기 수정
메모리 누수 수정: 이벤트 리스너, 타이머, WebGL 리소스 누수 해결
상태 관리: 불필요한 재렌더링을 줄이기 위한 스마트 그룹화

오류 처리 강화

지능형 오류 분류: 더 나은 사용자 피드백을 위한 categorizeError 함수 추가
구체적인 오류 유형: 메모리 오류, WebGL 오류, 파일 검증 오류
사용자 친화적인 메시지: 영어와 중국어로 명확한 오류 설명

성능 결과

로딩 시간: 14.6MB STEP 파일에 대해 18초의 로딩 성능 유지
코드 감소: 약 400줄의 코드 삭제
메모리 최적화: 여러 메모리 누수 소스 수정
안정성: 오류 처리 및 리소스 정리 강화

기술적 구현

스마트 상태 그룹화: 최적의 렌더링을 위한 핵심 상태와 UI 상태 분리
리소스 관리: WebGL 리소스 정리 및 Object URL 처리 개선
타입 안전성: 적절한 분류를 통한 TypeScript 오류 처리 강화
KISS 원칙: 더 나은 유지 보수성을 위한 구현 단순화

진행 콜백 조사

연구 완성: Online3DViewer 소스 코드의 진행 콜백 분석
구현 시도: 메서드 오버라이드 접근 방식이 심각한 성능 저하 유발 (18초 → 60초 이상)
상태: 성능 영향으로 인해 연기 - 사용자 경験 우선
학습: 제3자 라이브러리의 내부 메서드를 재정의하지 않음

개발 가이드라인

기능 추가보다 성능 우선
제3자 라이브러리의 내부 메서드 재정의 금지
KISS 원칙: 단순한 구현이 더 안정적
18초의 로딩 시간이 주요 성능 지표

최적화 철학

성능 우선 접근 방식

불필요한 코드 제거
- 사용되지 않는 가져오기 및 함수의 철저한 삭제
- 코드 베이스 경량화
리소스 관리 최적화
- WebGL 리소스의 효율적인 정리
- 메모리 누수의 적극적인 방지
상태 관리 재설계
- 불필요한 재렌더링 최소화
- 구성 요소의 상태 라이프사이클 효율적 관리

향후 최적화 방향

더 상세한 성능 프로파일링
WebGL 렌더링의 지속적인 최적화
사용자 경験을 저해하지 않는 효율적인 코드 구현

모델 구조 탐색기 + 스마트 모바일 인터페이스

v1.0.4

전문적인 모델 트리 탐색과 장치별 작동 가이드

2025/08/27

🌲 모델 구조 탐색기

복잡한 STEP 어셈블리를 관리 가능하고 탐색 가능한 구성 요소로 변환하는 계층적 모델 탐색의 혁명.

대화형 모델 트리

계층적 탐색: 확장/축소 가능한 노드가 있는 완전한 어셈블리 구조
구성 요소 격리: 클릭하여 특정 부품 또는 어셈블리에 초점
가시성 제어: 개별 구성 요소 또는 전체 하위 어셈블리 표시/숨기기
스마트 필터링: 이름, 유형 또는 속성으로 구성 요소 검색 및 필터링

전문가용 기능

어셈블리 분석: 복잡한 다중 부품 STEP 파일 구조 이해
구성 요소 속성: 각 모델 구성 요소에 대한 자세한 정보 보기
선택 동기화: 트리 선택에 따른 3D 지오메트리 강조
구성 요소별 내보내기: 개별 부품 또는 선택된 어셈블리 내보내기

고급 탐색

구성 요소에 확대/축소: 선택한 구성 요소를 3D 뷰에 자동으로 프레이밍
강조 시스템: 호버/선택된 구성 요소의 시각적 강조
중첩 어셈블리 지원: 깊이 중첩된 어셈블리 계층 처리
성능 최적화: 복잡한 모델에서도 부드러운 상호작용

📱 스마트 작동 가이드 적응

지능형 장치 인식 인터페이스로 상황에 맞는 작동 가이드 제공:

장치 감지: 터치 장치를 자동 감지하고 작동 가이드 전환
모바일 제스처: 한 손가락 회전, 핀치 확대/축소, 두 손가락 팬
데스크톱 작동: 마우스 드래그, 스크롤 휠 확대/축소, 키보드 단축키
아이콘 최적화: 모바일용 터치 아이콘, 데스크톱용 마우스 아이콘

기술적 구현

반응형 감지: useResponsive 훅을 사용한 장치 감지
네이티브 지원: Online3DViewer 터치 상호작용 기반
국제화: 중국어 및 영어 힌트 지원
구성 요소 분리: 독립적인 작동 가이드 구성 요소

사용자 경験 개선

모바일에서 더 이상 무관한 "왼쪽 마우스 버튼" 힌트 표시 안 함
모바일 장치 작동에 맞는 터치 제스처 설명
수동 전환 없이 인터페이스 자동 적응
소형 화면 장치에 최적화된 디스플레이

버그 수정

모바일 사용자의 데스크톱 작동 힌트 혼란 해결
터치 장치 상호작용 경験 개선
다른 장치 간 사용자 인터페이스 스타일 통일

（以下略）

모바일 도구 모음 최적화

v1.0.5

긴 파일 이름 압축 문제 해결 및 모바일 레이아웃 개선

2025/08/27

📱 모바일 레이아웃 향상

터치 장치에서 고급 기능을 완벽하게 작동시키기 위한 전문적인 모바일 경験 최적화:

긴 파일 이름으로 인해 도구 버튼이 압축되는 문제 해결:

반응형 파일 이름: 모바일에서 120px 제한, 데스크톱에서 200px 유지
정보 간소화: 모바일에서 파일 확장자 숨기기, 핵심 정보만 표시
버튼 최적화: 공간을 확보하기 위해 필수적이지 않은 버튼 숨기기
간격 조정: 컴팩트한 버튼 간격으로 모든 기능 버튼 적절히 표시

사용자 경験 개선

긴 파일 이름 처리: 호버 시 전체 이름을 표시하는 자동 자르기
확장된 툴팁: 모바일 장치에서 자세한 버튼 설명 표시
공간 활용: 3D 보기 영역 최대화, 도구 모음 공간 최소화
반응형 디자인: 다양한 화면 크기에 최적화된 레이아웃 자동 적응

기술적 구현

Tailwind CSS: 정확한 반응형 중단점 제어
점진적 확장: 모바일에서 데스크톱으로의 계층적 디자인
공간 관리: 지능형 표시/숨기기 전략
기능 유지: 모든 핵심 기능을 장치 간 접근 가능하게 유지

해결된 문제점

긴 파일 이름으로 인한 전체 화면 표시 버튼 잘림 문제 해결
소형 화면 장치의 도구 모음 레이아웃 개선
터치 장치의 버튼 간격 및 사용성 향상
중요한 기능 버튼의 표시 및 조작 보장

레이아웃 최적화의 기술적 세부 사항

모바일 디스플레이의 과제

화면 너비 제약: 제한된 공간에서의 정보 표시
터치 조작 요구사항: 작은 버튼에서도 정확한 탭 가능

구현 전략

동적 공간 할당
- 파일 이름 길이에 따라 동적으로 버튼 크기 조정
- 중요한 기능 버튼의 우선순위 지정
지능형 정보 표시
- 축약 표시와 전체 표시 전환
- 컨텍스트에 따른 정보 세부 수준 조정
성능 최적화
- CSS Grid 및 Flexbox를 활용한 반응형 레이아웃
- 최소한의 CSS 오버헤드
- 리플로우(재배치) 비용 최소화

모바일 대응의 미래 방향

추가 제스처 지원 확장
더욱 고급화된 적응형 UI 구성 요소
장치 특성 기반 동적 최적화

가져오기/내보내기 시스템 + 재질 편집기 + 테마 수정

v1.0.3

17개의 가져오기/10개의 내보내기 형식을 통한 범용 파일 변환 및 고급 재질 편집

2025/08/26

💾 범용 가져오기/내보내기 시스템

가장 포괄적인 온라인 3D 파일 변환기를 설립하는 혁신적인 파일 형식 지원.

광범위한 가져오기 지원 (17개 형식)

CAD 형식: STEP, IGES, BREP, OCCT
메시 형식: STL, OBJ, OFF, PLY, 3DS
현대 형식: GLTF/GLB, FBX, DAE, 3DM
산업 형식: IFC, BIM, FCStd, SVG

전문 내보내기 옵션 (10개 형식)

STL 내보내기: ASCII 및 바이너리 형식의 3D 프린팅 지원
OBJ 내보내기: MTL 재질 파일과 범용 호환성
GLTF/GLB: 현대적인 웹 최적화 3D 형식
PLY/OFF: 연구 및 과학 응용 프로그램
3DM/BIM: 전문 CAD 및 건축 워크플로우

내보내기 우수성

형식별 옵션: 각 내보내기 형식의 사용자 정의 가능한 설정
품질 관리: 정밀도 설정 및 최적화 옵션
일괄 처리: 단일 가져오기에서 여러 형식 내보내기
모바일 지원: 모든 장치에서 완전한 내보내기 기능

🎨 고급 재질 시스템

전문적인 재질 편집 및 시각화 기능:

재질 편집기

색상 사용자 정의: RGB 색상 선택기와 실시간 미리보기
투명도 제어: 정밀한 불투명도 조정
재질 속성: 금속성, 거칠기, 표면 마감 제어
실시간 미리보기: 재질 편집 중 즉각적인 시각적 피드백

환경 시스템

6개 환경 맵: 전문 HDRI 조명 프리셋
배경 제어: 사용자 정의 배경색 및 그라데이션
조명 제어: 고급 앰비언트 및 방향성 조명
렌더링 품질: 성능 최적화를 위한 여러 품질 프리셋

🌈 테마 통합 수정

중요한 사용자 경験 문제 해결:

3D 뷰어 테마 동기화: 웹사이트 테마 전환과 3D 뷰어 배경의 동기화 문제 해결
시각적 일관성: 모든 인터페이스 요소에서 라이트/다크 모드 일관성 확보
SetBackgroundColor API: Online3DViewer 배경색 설정 메서드 최적화
타입 안전성: TypeScript 호환성 문제를 타입 어설션으로 해결

브랜드 업데이트

새 로고 적용: 모든 웹사이트 위치에 새로운 STP 뷰어 브랜드 아이덴티티 적용
아이콘 통일: 파비콘, 앱 아이콘 및 소셜 미디어 아이콘 업데이트
PWA 아이콘: 프로그레시브 웹 앱 아이콘 구성 개선

기능 표시 최적화

실제 스크린샷: 기능 구성 요소가 실제 STP 뷰어 기능 스크린샷 사용
제품 시연: 3D 보기 및 파일 처리 기능의 더 나은 쇼케이스
사용자 신뢰: 실제 인터페이스 스크린샷을 통한 사용자 신뢰 향상

기술 개선

API 호출 최적화: SetBackgroundColor 메서드 호출 접근 방식 개선
RGBAColor 객체: 배경 설정을 위한 RGBAColor 객체의 적절한 생성 및 사용
강제 렌더링: 테마 전환 후 즉시 3D 뷰어 표시 업데이트 보장

버그 수정

다크 모드에서 3D 뷰어 배경이 검은색으로 남아있는 문제 해결
테마 전환 지연 또는 실패 문제 해결
타입 검사 및 컴파일 호환성 개선
다양한 장치에서 테마 표시 효과 최적화

（以下略）

풀스크린 아키텍처 기반

v0.1.0

혁신적인 풀스크린 모드 프레임워크 - STP 뷰어를 전문 3D CAD 플랫폼으로 변환

2025/08/25

🚀 혁신적인 아키텍처 출시

이 마일스톤은 STP 뷰어를 단순한 파일 뷰어에서 전문 수준의 3D CAD 시각화 플랫폼으로 전환하는 시작점입니다. 온라인에서 가장 포괄적인 STEP 파일 보기 경験을 만들었습니다.

🏗️ 풀스크린 모드 프레임워크

코어 아키텍처 구현

점진적 기능 전략: 2계층 경験 설계

일반 모드: 사랑받는 단순성 유지 (업로드, 보기, 스크린샷, 풀스크린)
풀스크린 모드: 전문 CAD 수준의 기능 잠금 해제

인프라 구성 요소

✅ 모듈식 컴포넌트 아키텍처: 간단한 기능과 고급 기능의 명확한 분리
✅ 상태 관리 시스템: 풀스크린 전용 기능을 위한 Zustand 기반 저장소
✅ 반응형 레이아웃 엔진: 모든 장치에서 원활하게 작동하는 적응형 UI
✅ 도구 시스템 기반: 전문 CAD 도구를 위한 확장 가능한 프레임워크

기술적 기반

// 새로운 컴포넌트 구조
src/components/stp-viewer/
├── fullscreen/           # 전문 도구 (지연 로딩)
├── panels/              # 접을 수 있는 탐색 패널  
└── hooks/               # 3D 뷰어 통합을 위한 사용자 정의 훅

🎯 설계 철학

"기본적으로 간단하고, 선택에 따라 강력하게"

경験 수준	인터페이스	사용 사례
일반 사용자	깨끗하고 최소한의 도구 모음	빠른 파일 미리보기, 기본 보기
전문가	전체 CAD 도구 모음	자세한 분석, 측정, 내보내기