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