diff --git a/README.md b/README.md index 18bc70e..16124ea 100644 --- a/README.md +++ b/README.md @@ -1,16 +1,77 @@ -# React + Vite +# Sokuree Consultant Web Project (v1.1.0) -This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. +**소쿠리 컨설턴트(Sokuree Consultant)**의 공식 웹사이트 프로젝트입니다. +React 기반의 모던 프론트엔드와 WordPress Headless CMS 백엔드를 결합하여 제작되었습니다. -Currently, two official plugins are available: +--- -- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh -- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh +## 🛠 Tech Stack (기술 스택) -## React Compiler +* **Frontend**: React, Vite +* **Backend (CMS)**: WordPress (Headless API) +* **Deployment**: Synology Web Station (Static Hosting) +* **Key Libraries**: `react-router-dom`, `dompurify`, `formsubmit-co` -The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation). +--- -## Expanding the ESLint configuration +## 🚀 Getting Started (시작하기) -If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project. +이 프로젝트를 처음부터 설치하고 실행하는 방법입니다. + +### 1. 사전 요구사항 (Prerequisites) +* [Node.js](https://nodejs.org/) (v16 이상 권장) +* [Git](https://git-scm.com/) + +### 2. 설치 (Installation) +터미널(CMD/PowerShell)을 열고 다음 명령어를 순서대로 실행하세요. + +```bash +# 1. 프로젝트 복제 (Clone) +git clone https://github.com/your-repo/antigravity.git +cd antigravity + +# 2. 의존성 패키지 설치 +npm install +``` + +### 3. 설정 (Configuration) +백엔드(워드프레스) 연결을 위해 설정 파일 확인이 필요할 수 있습니다. +* `src/api/wordpress.js` 파일에서 API 주소가 올바른지 확인하세요. + * 기본값: `https://api.sokuree.com/wp-json` (예시) + +### 4. 개발 서버 실행 (Run Dev Server) +로컬 환경에서 웹사이트를 미리 확인합니다. + +```bash +npm run dev +``` +이제 브라우저에서 `http://localhost:5173` 으로 접속하면 사이트가 뜹니다. + +--- + +## 📚 Documentation (상세 문서) + +프로젝트에 대한 자세한 내용은 `docs/` 폴더 내의 가이드 문서를 참고하세요. + +| 문서 | 설명 | +|---|---| +| 📄 **[Code Structure](docs/CODE_STRUCTURE.md)** | **코드 구조 및 컴포넌트 설명** (개발자 필독) | +| 🛠 **[WordPress Setup](docs/WORDPRESS_SETUP.md)** | 백엔드(Wordpress) 설치 및 Headless 설정 가이드 | +| ☁️ **[Deployment Guide](docs/DEPLOYMENT_GUIDE_SYNOLOGY.md)** | 시놀로지 NAS에 최종 배포하는 방법 | + +--- + +## ✨ Features (주요 기능) + +* **반응형 디자인**: PC/모바일 모두 최적화된 UI. +* **소식(News) 연동**: 워드프레스 글을 실시간으로 가져와 보여줌. +* **문의하기(Contact)**: 스팸 방지(Rate Limit) 및 알림 기능이 탑재된 이메일 폼. +* **보안(Security)**: 우클릭 방지, 이미지 드래그 방지, XSS 방어 적용. +* **개인정보보호**: 별도의 DB 없이 이메일로만 통신하며, 즉시 파기 정책 준수. + +--- + +## 📦 Version History + +* **v1.1.0** (Current): 개인정보방침 업데이트, 우클릭 차단, 소식 버튼 스타일 개선. +* **v1.0.0**: 초기 런칭 버전. diff --git a/docs/CODE_STRUCTURE.md b/docs/CODE_STRUCTURE.md new file mode 100644 index 0000000..19b1e52 --- /dev/null +++ b/docs/CODE_STRUCTURE.md @@ -0,0 +1,69 @@ +# 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)을 렌더링할 때 악성 스크립트를 제거합니다. diff --git a/docs/DEPLOYMENT_GUIDE_SYNOLOGY.md.resolved b/docs/DEPLOYMENT_GUIDE_SYNOLOGY.md.resolved deleted file mode 100644 index a208f6d..0000000 --- a/docs/DEPLOYMENT_GUIDE_SYNOLOGY.md.resolved +++ /dev/null @@ -1,59 +0,0 @@ -# Synology NAS React 앱 배포 가이드 - -이제 개발하신 웹사이트를 실제 인터넷(`sokuree.com`)에 공개하는 과정입니다. -로컬에 있는 코드 전체를 올리는 것이 아니라, **최적화된 빌드 파일(`dist` 폴더)**만 올리는 것입니다. - -## 1. React 앱 빌드 (내 컴퓨터에서) -개발 모드(`dev`)는 테스트용입니다. 배포를 위해서는 '빌드'를 해야 합니다. - -1. VS Code 터미널에서 기존 서버가 켜져 있다면 `Ctrl + C`로 끕니다. -2. 다음 명령어를 입력합니다: - ```bash - npm run build - ``` -3. 잠시 후 `dist` 라는 폴더가 새로 생깁니다. - - 이 **`dist` 폴더 안에 있는 파일들**([index.html](file:///d:/antigravity/index.html), `assets` 폴더 등)이 실제 서버에 올라갈 주인공입니다. - -## 2. Synology에 폴더 생성 및 업로드 -1. Synology **File Station**을 엽니다. -2. `/web` 폴더 아래에 새 폴더 `sokuree_front`를 만듭니다. (워드프레스 폴더와 섞이지 않게 따로 만듭니다) -3. 방금 만든 내 컴퓨터의 `dist` 폴더 **안에 있는 모든 내용물**을 `sokuree_front` 폴더 안으로 업로드합니다. - - 결과 경로 예시: `/web/sokuree_front/index.html` 이 있어야 함. - -## 3. Web Station 설정 (프론트엔드용) -이제 `sokuree.com` 주소를 이 폴더에 연결합니다. - -1. **Web Station** -> **웹 서비스 포털** -> **생성**. -2. **서비스**: 정적 웹 사이트 (또는 가상 호스트). -3. **설정**: - - 호스트 이름: `sokuree.com` (메인 도메인) - - 문서 루트: `/web/sokuree_front` - - 백엔드 서버: Nginx (추천) 또는 Apache -4. **확인**. - -## 4. 새로고침 시 404 에러 방지 (중요!) -React 대시보드는 "단일 페이지 앱(SPA)"이라서, 새로고침을 하면 시놀로지가 "어? 뉴스 페이지 파일은 없는데?" 하고 404 에러를 냅니다. 이를 방지하는 설정 파일이 필요합니다. - -### 방법 A: Apache 사용 시 (추천) -1. 메모장을 열고 다음 내용을 붙여넣습니다: - ```apache - - RewriteEngine On - RewriteBase / - RewriteRule ^index\.html$ - [L] - RewriteCond %{REQUEST_FILENAME} !-f - RewriteCond %{REQUEST_FILENAME} !-d - RewriteRule . /index.html [L] - - ``` -2. 파일 이름을 `.htaccess`로 저장합니다. (파일 형식을 '모든 파일'로 선택) -3. 이 `.htaccess` 파일을 시놀로지의 `/web/sokuree_front` 폴더에 업로드합니다. - -### 방법 B: Nginx 사용 시 -1. Web Station 설정에서 해당 포털 편집 -> **스크립트 언어 설정** 탭 (또는 고급 설정). -2. `try_files $uri $uri/ /index.html;` 규칙을 추가할 수 있는 곳이 있는지 확인합니다. (시놀로지 버전마다 UI가 다름) -3. Nginx가 복잡하다면 마음 편하게 **백엔드 서버를 Apache로 선택**하고 위의 A방법(.htaccess)을 쓰는 것이 가장 쉽습니다. - -## 5. 완료 -이제 스마트폰이나 다른 PC에서 `http://sokuree.com` (도메인 연결이 되어 있다면) 으로 접속해보세요. -React로 만든 멋진 사이트가 뜰 것입니다! diff --git a/docs/WORDPRESS_SETUP.md.resolved b/docs/WORDPRESS_SETUP.md.resolved deleted file mode 100644 index 01516ae..0000000 --- a/docs/WORDPRESS_SETUP.md.resolved +++ /dev/null @@ -1,109 +0,0 @@ -# Synology NAS Headless WordPress 설치 및 설정 가이드 - -본 가이드는 Synology NAS (DS920+) 환경에서 Headless WordPress를 구축하기 위한 절차입니다. -React 앱(`sokuree.com`)이 데이터를 가져오기 위해 필요한 백엔드 설정을 다룹니다. - -## 1. 사전 준비 (Synology 패키지 센터) -다음 패키지들이 설치되어 있어야 합니다. -- **Web Station** -- **Apache HTTP Server 2.4** (또는 Nginx) -- **PHP 8.0 이상** (Headless 모드는 최신 PHP 권장) -- **MariaDB 10** (데이터베이스) -- **phpMyAdmin** (DB 관리용, 선택사항이나 강력 추천) - -## 2. 데이터베이스 생성 (MariaDB 10) -1. Synology에서 `MariaDB 10`을 실행하고 root 비밀번호를 설정합니다. -2. `phpMyAdmin`을 실행하여 root로 로그인합니다. -3. 상단 메뉴의 **[데이터베이스]** 탭을 클릭합니다. -4. **새 데이터베이스 만들기**: - - 데이터베이스 이름: `sokuree` - - 데이터와(collation): `utf8mb4_unicode_ci` (한글 및 이모지 지원) - - [만들기] 클릭. -5. (보안 권장) `wp_user` 같은 전용 사용자를 만들고 `sokuree` DB에 대한 모든 권한을 부여합니다. - -## 3. WordPress 파일 설치 -1. [WordPress.org](https://ko.wordpress.org/download/)에서 최신 zip 파일을 다운로드합니다. -2. Synology File Station을 통해 `/web` 폴더 아래에 새 폴더 `sokuree_wp`를 만듭니다. (React 앱과 구분하기 위해 이름 뒤에 `_wp` 추천) -3. zip 파일을 `sokuree_wp` 폴더에 업로드하고 압축을 풉니다. -4. 최종 경로가 `/web/sokuree_wp/index.php` 등이 보이도록 정리합니다. - -## 4. Web Station 설정 -1. **Web Station** 실행 -> **웹 서비스 포털** -> **생성** -> **웹 서비스 포털**. -2. **서비스**: `가상 호스트` 선택. -3. **호스트 이름 기반**: - - 호스트 이름: `api.sokuree.com` (React 앱은 `sokuree.com`을 쓸 것이므로, WP는 서브도메인이나 별도 포트 추천. 여기서는 API 전용임을 명확히 하기 위해 `api` 예시) - - 포트: 80 / 443 -4. **문서 루트**: 찾아보기 -> `/web/sokuree_wp` 선택. -5. **백엔드 서버**: Apache HTTP Server 2.4 / PHP 8.x 프로필 선택. -6. **확인**을 눌러 저장합니다. - -> **주의**: 도메인 `api.sokuree.com`의 DNS A 레코드가 Synology NAS의 공인 IP를 가리키고 있어야 합니다. 공유기 포트포워딩(80, 443)도 필수입니다. - -## 5. WordPress 설치 진행 -1. 브라우저에서 `http://api.sokuree.com` (설정한 주소) 접속. -2. 언어 선택 (한국어). -3. DB 연결 정보 입력: - - 데이터베이스 이름: `sokuree` - - 사용자명: `root` 또는 생성한 유저 - - 비밀번호: MariaDB 비밀번호 - - 데이터베이스 호스트: `localhost:/run/mysqld/mysqld10.sock` (Synology MariaDB 10 소켓 경로. 보통 `localhost`로 안 되면 `127.0.0.1:3307` 등을 시도) -4. 사이트 제목, 관리자 계정 생성 후 설치 완료. - -## 6. Headless 설정 (필수!) -React 앱이 데이터를 잘 가져오기 위해 다음 설정이 필요합니다. - -### A. 고유주소 (Permalinks) 설정 -1. 워드프레스 관리자 -> **설정** -> **고유주소**. -2. **글 이름 (Post name)** 선택. -3. [변경 사항 저장]. - - *이 설정을 안 하면 JSON API가 404 에러를 낼 수 있습니다.* - -### B. CORS 허용 (중요) -React 앱(다른 도메인)에서 WP(API 도메인)로 요청을 보내려면 CORS 허용이 필요합니다. -`functions.php` 파일은 **워드프레스 최상위 폴더가 아니라, 테마 폴더 안**에 있습니다. - ---- - -### [추천] Headless용 테마 선택 -Headless 방식에서는 **테마의 디자인이 사용자에게 보이지 않습니다**. (우리가 만든 React 앱이 보이기 때문입니다.) -따라서 관리자 페이지가 빠르고 가벼운 테마가 가장 좋습니다. - -**추천 테마:** -1. **Twenty Twenty-Four (기본 테마)**: 가장 무난하고 관리가 잘 됩니다. 기본 설치되어 있으니 그대로 쓰셔도 충분합니다. -2. **Ollie**: 매우 가볍고 모던한 블록 테마입니다. -3. **Frost**: WP Engine에서 만든 미니멀 테마로 불필요한 기능이 없어 Headless용으로 인기가 많습니다. - -**설정 방법:** -1. `wp-content` 폴더 더블클릭. -2. `themes` 폴더 더블클릭. -3. 선택한 테마(예: `twentytwentyfour`) 폴더로 들어갑니다. -4. 그 안에 있는 `functions.php` 파일을 엽니다. -5. 파일 맨 끝에 다음 코드를 추가합니다: - -```php -add_action( 'init', function() { - header("Access-Control-Allow-Origin: *"); // 실제 운영 시 https://sokuree.com 으로 변경 권장 - header("Access-Control-Allow-Methods: GET, POST, OPTIONS"); - header("Access-Control-Allow-Headers: Content-Type"); -}); -``` - -## 7. React 앱 연결 확인 -React 앱의 [src/config/wordpress.js](file:///d:/antigravity/src/config/wordpress.js) 파일에서 `BASE_URL`이 위에서 설정한 워드프레스 주소와 맞는지 확인합니다. -예: `https://api.sokuree.com/wp-json` - -이제 모든 준비가 되었습니다! React 앱에서 글을 불러올 수 있습니다. - -## 8. 문제 해결 (Troubleshooting) - -### Q. 테마/플러그인 삭제 시 FTP/SSH 정보를 물어봅니다. -이것은 워드프레스가 파일 권한 문제로 직접 쓰기를 못할 때 발생합니다. `wp-config.php` 파일에 한 줄만 추가하면 해결됩니다. - -1. Synology File Station에서 `/web/sokuree_wp/wp-config.php` 파일을 엽니다. -2. 파일 **맨 마지막** 또는 `/* That's all, stop editing! ... */` 위에 다음 줄을 추가하세요: - -```php -define('FS_METHOD', 'direct'); -``` - -3. 저장하면 더 이상 FTP 정보를 묻지 않습니다. diff --git a/docs/project_status.md b/docs/project_status.md deleted file mode 100644 index 35b2caa..0000000 --- a/docs/project_status.md +++ /dev/null @@ -1,29 +0,0 @@ -# Site Polish & Completion - -- [x] **Wordpress Integration (Backend)** - - [x] API Setup - - [x] News Page Created -- [x] **Frontend Integration** - - [x] Add "News" link to Navbar - - [x] Add "Latest News" section to Homepage (`Home.jsx`) - - [x] Update Footer with News link -- [ ] **Content Updates** - - [x] Update About Page (Profile, Intro) - - [x] **Update Services Page** - - [x] Add "Training Courses" section (ISO, Auditor, Core Tools) - - [x] Add visual elements/images for training - - [x] **Resources Page Upgrade** - - [x] Implement Category Filtering (Downloads/Columns) - - [x] Update API to support categories - - [x] **Contact Page & Global UI** - - [x] Remove global "Consultation" buttons - - [x] Implement EmailJS/Formsubmit for Contact Form - - [x] **Deployment & Git** - - [x] Initialize Local Git Repository - - [x] Create Remote Gitea Repository - - [x] Push to Remote (Tag v1.0.0) - - [ ] Deploy to Synology -- [ ] **Deployment** - - [x] Create `DEPLOYMENT_GUIDE_SYNOLOGY.md` - - [ ] Build React App (`npm run build`) - - [ ] Configure Synology Web Station for Frontend diff --git a/docs/task.md.resolved b/docs/task.md.resolved deleted file mode 100644 index b658d60..0000000 --- a/docs/task.md.resolved +++ /dev/null @@ -1,29 +0,0 @@ -# Site Polish & Completion - -- [x] **Wordpress Integration (Backend)** - - [x] API Setup - - [x] News Page Created -- [x] **Frontend Integration** - - [x] Add "News" link to Navbar - - [x] Add "Latest News" section to Homepage ([Home.jsx](file:///d:/antigravity/src/pages/Home.jsx)) - - [x] Update Footer with News link -- [ ] **Content Updates** - - [x] Update About Page (Profile, Intro) - - [x] **Update Services Page** - - [x] Add "Training Courses" section (ISO, Auditor, Core Tools) - - [x] Add visual elements/images for training - - [x] **Resources Page Upgrade** - - [x] Implement Category Filtering (Downloads/Columns) - - [x] Update API to support categories - - [x] **Contact Page & Global UI** - - [x] Remove global "Consultation" buttons - - [x] Implement EmailJS/Formsubmit for Contact Form - - [x] **Deployment & Git** - - [x] Initialize Local Git Repository - - [x] Create Remote Gitea Repository - - [x] Push to Remote (Tag v1.0.0) - - [ ] Deploy to Synology -- [ ] **Deployment** - - [x] Create [DEPLOYMENT_GUIDE_SYNOLOGY.md](file:///C:/Users/choib/.gemini/antigravity/brain/9bc9f20a-cce8-4ffe-8a11-80ec51a849d7/DEPLOYMENT_GUIDE_SYNOLOGY.md) - - [ ] Build React App (`npm run build`) - - [ ] Configure Synology Web Station for Frontend