diff --git a/docs/TECH_STACK.md b/docs/TECH_STACK.md new file mode 100644 index 0000000..34b1c4e --- /dev/null +++ b/docs/TECH_STACK.md @@ -0,0 +1,73 @@ +# Technology Stack & Architecture + +이 프로젝트는 **Headless CMS** 아키텍처를 기반으로 하며, 프론트엔드와 백엔드가 분리되어 운영됩니다. 다음은 프로젝트에 사용된 주요 기술과 도구에 대한 명세입니다. + +## 1. Frontend (사용자 인터페이스) + +사용자에게 보여지는 웹사이트 화면은 **React**를 사용하여 구축되었습니다. + +### **Core Framework & Language** +* **React 19**: 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리입니다. + * *이용 방식*: 컴포넌트(Component) 단위로 UI를 쪼개어 개발(예: `Navbar`, `Footer`, `PostCard`)함으로써 재사용성과 유지보수성을 높였습니다. +* **JavaScript (ES6+)**: 최신 자바스크립트 문법을 사용합니다. + * *주요 기능*: `Async/Await` (비동기 처리), `Arrow Functions`, `Destructuring` 등을 적극 활용했습니다. +* **Vite**: 차세대 프론트엔드 빌드 도구입니다. + * *역할*: 개발 서버를 빠르게 구동하고, 배포를 위해 코드를 최적화하여 빌드(Build)하는 역할을 합니다. (기존 Create-React-App보다 훨씬 빠름) + +### **Routing & Navigation** +* **React Router DOM**: SPA(Single Page Application) 구현을 위한 라우팅 라이브러리입니다. + * *역할*: 페이지를 새로고침하지 않고도 URL(`url/about`, `url/news` 등)에 따라 다른 화면을 보여줍니다. + +### **Styling (디자인)** +* **Vanilla CSS**: 별도의 CSS 프레임워크(Tailwind, Bootstrap 등) 없이 순수 CSS를 사용했습니다. + * *파일*: `src/styles/main.css` 하나로 통합 관리됩니다. + * *특징*: CSS Variables(`var(--primary-color)`)를 사용하여 색상 테마를 일관되게 관리하며, 반응형 디자인(`@media`)이 적용되어 있습니다. + +### **Data Communication (통신)** +* **Axios**: 서버와 통신하기 위한 HTTP 클라이언트입니다. + * *역할*: 워드프레스 API(`wp-json`)에 요청을 보내 뉴스 글이나 데이터를 가져옵니다. + +### **Security & Utilities** +* **DOMPurify**: 워드프레스에서 가져온 HTML 본문을 안전하게 렌더링하기 위해 XSS 공격(악성 스크립트)을 방지하는 라이브러리입니다. +* **Context Menu Blocking**: 마우스 우클릭 및 드래그를 방지하여 콘텐츠 무단 복사를 막는 로직이 포함되어 있습니다. + +--- + +## 2. Backend (CMS & Data) + +데이터 관리와 콘텐츠 작성은 **WordPress**를 사용합니다. + +* **WordPress (Headless Mode)**: 전통적인 워드프레스 테마를 사용하지 않고, 오직 **데이터 저장소** 및 **관리자 페이지** 역할만 수행합니다. +* **REST API**: 워드프레스에 내장된 API를 통해 프론트엔드(React)로 JSON 데이터를 전달합니다. +* **PHP 8.3**: 워드프레스 구동을 위한 서버 사이드 언어입니다. +* **MariaDB 10**: 게시글, 댓글 등 모든 데이터가 저장되는 데이터베이스입니다. + +--- + +## 3. Infrastructure (인프라) + +* **Synology Web Station**: 웹 서버 호스팅 환경입니다. +* **Apache HTTP Server 2.4**: React 빌드 파일(정적 파일)과 워드프레스(PHP)를 서비스하는 웹 서버 소프트웨어입니다. +* **Gitea**: 소스 코드의 버전 관리를 담당하는 자체 호스팅 Git 서버입니다. + +--- + +## 4. Contact Form Security (문의하기 보안 정책) + +문의하기 기능(`Contact.jsx`)에는 스팸 봇(Bot) 및 어뷰징 방지를 위해 **4단계 보안 시스템**이 적용되어 있습니다. + +### **1. Honeypot Field (허니팟)** +* **원리**: 사용자(사람)의 눈에는 보이지 않는 숨겨진 입력 필드(`honeypot`)를 폼에 배치합니다. +* **방어**: 자동화된 봇은 모든 필드를 채우려는 특성이 있습니다. 이 숨겨진 필드에 값이 입력되면 즉시 **스팸으로 간주하여 전송을 차단**합니다. + +### **2. Rate Limiting (전송 빈도 제한)** +* **원리**: 브라우저의 `localStorage`를 활용하여 마지막으로 문의를 전송한 시각을 기록합니다. +* **방어**: 동일한 브라우저에서 **1분(60초) 이내**에 연속으로 문의를 보낼 수 없도록 차단하여, 메일 폭탄(Email Bombing) 공격을 예방합니다. + +### **3. Input Validation (입력값 검증)** +* **원리**: 사용자가 입력한 데이터가 유효한 형식인지 클라이언트 단에서 1차 검증합니다. +* **방어**: 특히 연락처 필드는 한국 휴대폰 번호 정규식(`^01([0|1|6|7|8|9])-?([0-9]{3,4})-?([0-9]{4})$`)을 통과해야만 전송 버튼이 작동하여, 무의미한 데이터 전송을 막습니다. + +### **4. Secure Token Submission** +* **원리**: 이메일 주소를 HTML 소스코드에 직접 노출(`mailto:` 등)하지 않습니다. +* **방어**: `FormSubmit` 서비스의 **암호화된 고유 토큰**을 사용하여 데이터를 전송하므로, 크롤러에 의한 이메일 주소 수집을 원천적으로 차단합니다. diff --git a/docs/WORDPRESS_SETUP.md b/docs/WORDPRESS_SETUP.md index e3a8fb8..6125180 100644 --- a/docs/WORDPRESS_SETUP.md +++ b/docs/WORDPRESS_SETUP.md @@ -7,7 +7,7 @@ React 앱(`sokuree.com`)이 데이터를 가져오기 위해 필요한 백엔드 다음 패키지들이 설치되어 있어야 합니다. - **Web Station** - **Apache HTTP Server 2.4** (또는 Nginx) -- **PHP 8.0 이상** (Headless 모드는 최신 PHP 권장) +- **PHP 8.3 이상** (Headless 모드는 최신 PHP 권장) - **MariaDB 10** (데이터베이스) - **phpMyAdmin** (DB 관리용, 선택사항이나 강력 추천) diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx index f05c74d..afeb45c 100644 --- a/src/components/Footer.jsx +++ b/src/components/Footer.jsx @@ -6,10 +6,10 @@ const Footer = () => {

Sokuree Consultant

-

代表: 홍길동 | Business License: 000-00-00000

-

주소: 서울특별시 ... (추후 업데이트)

+

대표: 최병규 | Business License: 000-00-00000

+

주소: 전북 순창군 ... (추후 업데이트)

- 이메일: { e.currentTarget.href = `mailto:contact@sokuree.com`; }}>{'contact'}@{'sokuree.com'} | 전화: 02-0000-0000 + 이메일: { e.currentTarget.href = `mailto:contact@sokuree.com`; }}>{'contact'}@{'sokuree.com'} | 전화: 010-2125-0217