# 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)을 렌더링할 때 악성 스크립트를 제거합니다.