1 Release 3 Tags

RSS Feed

• v1.1.1 5261735536

  Update documentation version to v1.1.1 Stable

  choibk released this 2026-01-19 11:18:59 +00:00 | 7 commits to main since this release

  Sokuree Web - Code Structure & Components Guide

  이 문서는 프로젝트의 소스 코드 구조와 주요 컴포넌트들의 역할을 설명합니다.

  📁 Directory Structure (폴더 구조)

  d:/antigravity/
  ├── dist/                # 빌드 결과물 (배포용 파일들)
  ├── docs/                # 프로젝트 문서 (설치, 배포, 설정 가이드)
  ├── public/              # 정적 파일 (favicon 등)
  ├── src/                 # 소스 코드 메인 디렉토리
  │   ├── api/             # 외부 API 연동 로직
  │   ├── assets/          # 이미지, 폰트 등 리소스
  │   ├── components/      # 재사용 가능한 UI 컴포넌트
  │   ├── config/          # 설정 파일 (상수 등)
  │   ├── pages/           # 라우트(Route)별 페이지 컴포넌트
  │   ├── styles/          # 전역 CSS 스타일
  │   └── utils/           # 유틸리티 함수
  ├── index.html           # 앱 진입점 HTML
  └── vite.config.js       # Vite 빌드 설정
  

  ---

  🧩 Key Components (주요 컴포넌트)

  1. src/components/

  공통적으로 사용되는 UI 요소들입니다.

  • Navbar.jsx: 상단 네비게이션 바. 로고와 메뉴 링크를 포함합니다.
  • Footer.jsx: 하단 푸터. 사업자 정보, 연락처, 개인정보방침 링크(mailto: 기능 포함)가 있습니다.
  • Contact.jsx: 문의하기 폼.
    • Rate Limiting: localStorage를 이용해 1분 내 재전송을 막습니다.
    • FormSubmit: 이메일 발송 서비스와 연동됩니다.
  • PostCard.jsx: 뉴스 목록에서 각 게시글을 보여주는 카드형 UI.
  • Layout.jsx: Navbar와 Outlet(페이지 내용), Footer를 감싸는 레이아웃 래퍼입니다.

  2. src/pages/

  각 URL 경로에 해당하는 페이지들입니다.

  • About.jsx: 회사 소개 및 대표 프로필 페이지. (/about)
  • Services.jsx / ServiceDetail.jsx: 제공 서비스 목록 및 상세 설명.
  • News.jsx: 워드프레스 API(wpApi)를 호출하여 소식 목록을 보여줍니다.
  • NewsDetail.jsx: 개별 소식의 상세 내용을 보여줍니다.
    • slug를 이용해 워드프레스에서 글을 가져옵니다.
    • 하단에 "목록으로 돌아가기" 버튼이 있습니다.
  • Privacy.jsx: 개인정보처리방침 페이지. 법적 요구사항에 맞춘 텍스트가 포함되어 있습니다.

  3. src/api/

  • wordpress.js: 워드프레스 REST API와 통신하는 함수들(getPosts, getPostBySlug)이 모여 있습니다.
    • Backend URL: https://api.sokuree.com/wp-json (설정 필요)

  4. src/styles/

  • main.css: 전체 사이트의 스타일이 통합된 CSS 파일입니다.
    • CSS 변수(:root)로 색상 테마 관리.
    • 반응형 미디어 쿼리 포함.
    • 보안 설정: 드래그 방지, 텍스트 선택 방지(Contact/Footer 예외 처리) 등의 스타일이 정의되어 있습니다.

  ---

  🔒 Security Features (보안 기능)

  이 프로젝트에는 기본적인 프론트엔드 보안 조치가 적용되어 있습니다.

  1. 우클릭 차단: App.jsx에서 contextmenu 이벤트를 차단하여 "다른 이름으로 저장" 등을 방지합니다.
  2. 드래그/선택 방지: CSS(main.css)를 통해 이미지 드래그와 텍스트 선택을 막습니다.
     • 예외: 사용자 편의를 위해 입력폼(input, textarea)과 푸터 연락처(footer-info)는 선택 가능합니다.
  3. XSS 방지: dompurify 라이브러리를 사용하여 워드프레스 본문(HTML)을 렌더링할 때 악성 스크립트를 제거합니다.

  Downloads

  • Source Code (ZIP)
  • Source Code (TAR.GZ)
  • V1.1.1.zip
    520 KiB