7.1 · Repository map + legacy/backup files

บทนี้เจาะโครงสร้างของ vtrc-web/src/ เพื่อให้อ่านและค้นหาโค้ดได้ง่ายขึ้น พร้อมทั้งระบุไฟล์ legacy/backup ที่มีอยู่มากกว่า 50 ไฟล์ ซึ่งต้องระมัดระวังเมื่อแก้ไขโค้ด

โครงสร้าง src/ ระดับบน

src/
├── index.js                 93 บรรทัด  — entry point + ApolloProvider + LocaleProvider th_TH
├── index_bk.js             124 บรรทัด  — legacy entry (ห้ามแตะ)
├── serviceWorker.js        135 บรรทัด  — CRA service worker (เรียก unregister)
├── assets/                            — css, sass, fonts, images, pdf
│   ├── css/main.css       4,565 บรรทัด  — compiled CSS ที่ใช้จริง
│   ├── sass/main.scss     1,764 บรรทัด  — SCSS source (compile ด้วย Prepros)
│   └── fonts/                        — Kanit-Medium, Kanit-Regular, THSarabunPSK
├── components/
│   ├── element/             3 ไฟล์       — reusable UI เล็ก ๆ (button, typography)
│   └── user/                36 โฟลเดอร์   — domain components
├── config/
│   ├── apollo.js           184 บรรทัด     — Apollo Client + errorLink + authLink
│   ├── routes.js         1,410 บรรทัด     — route table + render helpers
│   ├── custom-antd.css   21,190 บรรทัด     — AntD v3 override (compiled)
│   ├── axios-bo.js          85 บรรทัด     — REST axios instance
│   ├── refreshToken.js      35 บรรทัด     — token refresh promise wrapper
│   ├── datasets*.js      ~1,689 บรรทัด     — dropdown master data
│   └── styles.css          128 บรรทัด     — utility class สั้น ๆ
├── containers/
│   └── App/index.js         35 บรรทัด     — root router + auth gate
├── graphql/
│   ├── queries.js         4,493 บรรทัด     — 138 query definitions (export keys)
│   ├── mutations.js       1,447 บรรทัด     — 41 mutation definitions (export keys)
│   └── index.js              2 บรรทัด     — re-export Queries + Mutations
├── pages/user/             48 โฟลเดอร์     — route screens (จัดเป็น 11 cluster)
└── utils/                  36 ไฟล์        — helper utilities (`utils/*.js`)

ไฟล์สำคัญและหน้าที่

ไฟล์	LOC	หน้าที่
`src/index.js:1-93`	93	React root + ApolloProvider + LocaleProvider + moment th
`src/containers/App/index.js:1-35`	35	BrowserRouter + Switch + `isLoggedIn()` gate
`src/config/apollo.js:1-184`	184	Apollo Client + errorLink + authLink + uploadLink
`src/config/routes.js:1-1410`	1410	route table + `renderRoute` / `mapRoutes` / `renderAllRoutes`
`src/utils/auth.js:1-232`	232	token storage + URL resolver + AES encrypt
`src/utils/formatdate.js:1-442`	442	date format พ.ศ. (manual +543)
`src/utils/checkError.js:1-72`	72	error code → ข้อความไทย
`src/graphql/queries.js:1-4493`	4493	138 queries (export keys; query-heavy, สัดส่วน ≈ 3.37:1)
`src/graphql/mutations.js:1-1447`	1447	41 mutations (export keys)
`src/components/user/SiderLayout/index.js:1-1226`	1226	shell layout + menu + flag-based visibility
`src/pages/user/Login/index.js:1-650`	650	login 2 ขั้น (verify username + enter password)
`src/pages/user/Slip/index.js:1-1528`	1528	สลิปเงินเดือน + เงื่อนไขเงินเดือน
`src/pages/user/Leave/Form/index.js:1-2410`	2410	ฟอร์มลา (ใหญ่ที่สุดใน repo)

pages 48 โฟลเดอร์ — จัดเป็น 11 cluster

Cluster	โฟลเดอร์ตัวอย่าง
Auth / onboarding	`Login/`, `ForgetPassword/`, `SetPasswordsFirstTime/`, `ConfirmUserA1/`, `ConfirmUserA2/`, `ChangePassword/`
News / policy / about	`News/`, `DetailNews/`, `Policy/`, `PolicyDetail/`, `PolicyOfficerDocuments/`, `PolicyQualityDocument/`, `Abouts/`, `AboutsLink/`, `Orientation/`, `Notification/`
Profile / HR master	`ProFile/` (+ Detail, FormPhone, PersonalStatus, PersonalInformation), `EmpRegistration/`, `ManagementHR/`, `workHistory/`, `Attendance/`
Leave	`Leave/` (Cancel, Confirm, Form, ListForManager, Manual, Search), `LeaveStudies/` (Form Tab1-8), `AbstainTime/`
Welfare / fund	`WelfareList/`, `Fund/`, `ChildEducationFee/`, `Delegate/`
Hospital (medical claim)	`Hospital/` (Confirm, CreateHospital, DashBoard, Form, News, Search, Withdraw)
Income doc	`Slip/`
PMS (performance)	`PMS/`, `PmsAssessment/`, `PmsIndicators/`
Course / training	`Course/`, `CourseDetail/`
Contact	`Contact/`, `ContactDepartment/`, `ContactDetail/`, `ContactHR/`
Meeting / recruit / misc	`MeetingManagement/`, `Recruit/`, `MockupIframe/`, `LayoutsNoData/`, `NotFound/`

ไฟล์ legacy/backup — ห้ามแตะ ห้ามใช้เป็นต้นแบบ

vtrc-web มีไฟล์ backup และ snapshot มากกว่า 50 ไฟล์ กระจายอยู่ทั่วทั้ง repo ส่วนใหญ่เกิดจากการ deploy หลาย env ในอดีต และการทดลอง refactor ที่ยังไม่ลบ

กฎเหล็ก

อย่าแก้ไข — ถ้าเป็นไฟล์ที่ลงท้ายด้วย _bk, _bk_prd, _bk-pro, _bkPpu, _tempFilter หรือชื่อที่ผิดรูปแบบจากไฟล์หลัก
อย่าใช้เป็นต้นแบบ — ถ้า copy โค้ดจากไฟล์เหล่านี้ มีโอกาสได้ query ที่ deprecated แล้ว
อย่าลบทิ้งเอง — บางไฟล์เก็บไว้สำหรับ rollback ดู git history ก่อน และถามทีมก่อนลบ

ไฟล์ legacy ที่พบบ่อย

รูปแบบชื่อ	ตัวอย่าง	ที่มา
`_bk.js`	`src/index_bk.js`, `src/config/routes_bk.js`, `src/pages/user/Login/index_bk.js`	snapshot ก่อน refactor
`_bk <date>.js`	`src/config/routes_bk11072568.js`	snapshot ลงวันที่ (11/07/2568)
`_bk-prd.js`, `_bk-pro.js`, `_bkPpu.js`	`src/pages/user/Leave/Form/index_bk-to-prd.js`, `detail_bk-prd.js`	snapshot ของหลาย env (prod/prod-optimized/ppu)
`_pentest`, `_prd` (เขียนผิด)	`src/graphql/queries_pentest.js`, `querries_prd.js`	snapshot สำหรับ pentest และ production อดีต (สังเกตว่า `querries` สะกดผิด)
`_gql.js`, `_axios.js`, `_table.js`	`src/pages/user/Contact/index_gql.js`, `index_axios.js`, `ChildEducationFee/index_table.js`	ทดลอง impl คนละแบบ
ชื่อสะกดผิด	`src/components/user/from/` (ควรเป็น `Form`)	เป็นชื่อโฟลเดอร์จริง ห้ามแก้ชื่อเพราะมี import path อ้างถึง

ตัวอย่างที่ต้องระวังมากเป็นพิเศษ

src/graphql/
├── queries_bk.js                 snapshot queries เก่า
├── queries_bk_formaddress.js     snapshot เฉพาะ address form
├── queries_bk_uat.js             snapshot สำหรับ UAT
├── queries_metting.js            snapshot เฉพาะ meeting (สะกดผิดจาก meeting)
├── queries_pentest.js            snapshot สำหรับ pentest
└── querries_prd.js               snapshot production (สะกดผิด queries)

src/config/
├── routes_bk.js
├── routes_bk11072568.js
├── routes_metting.js             (ปัจจุบันถูก comment ใน routes.js หลัก)
└── datasetsEmployeeRegistration_bk.js

src/pages/user/Slip/
├── index_bk.js
└── indexSlipfull.js              variant ที่แสดง slip แบบเต็มจอ (ยังใช้อยู่บาง route)

src/pages/user/Leave/Form/
├── index_bk.js
├── index_bk-to-prd.js
├── detail_bk.js
└── detailDarf_bk.js              (draft สะกดผิด)

src/pages/user/Recruit/Form/sector/
├── secAttachmen_bk.js            (attachment สะกดผิด)
├── secAttachment_bk_b4payload.js
├── secCareer_bk.js
├── secContact_bk.js
├── secCurrentJob_bk.js
└── secEducation_bk.js

วิธีตรวจสอบว่าไฟล์ที่จะแก้เป็นของจริง

ก่อนแก้ไฟล์ใด ให้ตรวจสอบ:

ชื่อไฟล์ไม่มี _bk, _prd, _pro, _ppu, _pentest, _tempFilter, _gql, _axios, _table
ไฟล์ถูก import จาก routes.js (ค้นหาชื่อ component ใน routes.js)
ถ้าเป็น query/mutation — ต้องเป็น queries.js หรือ mutations.js ตัวเดียวเท่านั้น ไม่ใช่ variant

utils/ — 36 ไฟล์ helper

ไฟล์	หน้าที่
`auth.js:1-232`	token storage (`setToken`, `getToken`, `clearAllStorage`) + URL resolver + AES encrypt
`apiKey.js:1-12`	คืน base64 apiKey ตาม origin (prod/uat)
`message.js:1-30`	`alertMessage(type, msg)` wrapper ของ antd message
`messages.js:1-30`	duplicate ของ `message.js` (legacy)
`checkError.js:1-72`	แมป error code → ข้อความไทย
`downloadFile.js:1-16`	axios blob download
`eventLog.js:1-49`	ส่ง log event ไป REST `/log-event-api/api/v1/logEvent`
`fetchApiAxios.js:1-65`	helper axios ที่ใส่ Authorization อัตโนมัติ
`formatdate.js:1-442`	date format พ.ศ. (manual +543)
`string.js:1-35`	gql helper (`toGqlTypes`, `toGqlArgs`, `toGqlFields`) + capitalize
`storage.js:1-47`	`setWithExpiry` / `getWithExpiry` + noti counter
`markDown.js:1-16`	markdown → HTML ผ่าน draftjs
domain helpers	`leave.js`, `hospital.js`, `fund.js`, `welfareList.js`, `workHistory.js`, `childEducationFee.js`, `Delegate.js`, `AlwaysUpcoming.js`, `abstainTime.js`

ข้อควรระวังเกี่ยวกับ utils

toGqlTypes, toGqlArgs, toGqlFields ใน utils/string.js ถูก import ใน queries.js และ mutations.js แต่ไม่ได้ใช้จริง — query ทั้งหมดเขียนเป็น template literal ด้วยมือ เป็น helper ที่ค้างจากการวางแผน refactor ในอดีต
message.js กับ messages.js (มี s) เป็นไฟล์คนละตัว — เลือกผิดง่าย ใช้ message.js ตัวไม่มี s เป็นหลัก

เคล็ดลับตอนทำงานจริง

ตอนค้นหา "ฟีเจอร์นี้อยู่ที่ไฟล์ไหน"

เริ่มที่ src/config/routes.js — ค้นหาชื่อเมนูหรือ path
ดู component field ใน route entry — เป็นชื่อ component ที่ import จาก pages/user/
จากนั้นเปิดไฟล์ใน pages/user/<Feature>/index.js

ตอนเจอชื่อโฟลเดอร์แปลก ๆ

components/user/from/ — สะกดผิดจาก Form แต่เป็นชื่อจริงที่ใช้ใน import path ทั้งระบบ ห้ามแก้ชื่อโฟลเดอร์เด็ดขาด
pages/user/Slip/indexSlipfull.js — ไม่ใช่ backup แต่เป็น variant ที่แสดง slip แบบเต็มจอ ยังใช้อยู่
pages/user/MeetingManagement/ — สะกดถูกในระดับโฟลเดอร์ แต่ routes_metting.js และ queries_metting.js สะกดผิด (เป็นไฟล์ legacy)

ตอนที่ grep ไม่เจอ symbol ที่คาดไว้

ถ้า grep <Query, <Mutation, ApolloConsumer, useQuery, useMutation แล้วไม่เจอ — เป็นเพราะ vtrc-web ใช้ withApollo HOC + this.props.client.query/mutate ทั้งหมด รายละเอียดใน บท 6.6

ตอนเจอไฟล์ที่ดูเหมือน backup แต่ไม่มี `_bk`

บางครั้ง snapshot ใช้ชื่อเต็ม เช่น indexSlipfull.js หรือ detailDarf.js ให้ตรวจดูว่าไฟล์ถูก import ใน routes.js หรือไม่ — ถ้าไม่ ให้ถือว่าเป็น snapshot และหาไฟล์หลักก่อน

ขั้นตอนถัดไป

ไป บท 6.2 Bootstrap + Webpack build →

7.1 · Repository map + legacy/backup files ​

โครงสร้าง src/ ระดับบน ​

ไฟล์สำคัญและหน้าที่ ​

pages 48 โฟลเดอร์ — จัดเป็น 11 cluster ​

ไฟล์ legacy/backup — ห้ามแตะ ห้ามใช้เป็นต้นแบบ ​

กฎเหล็ก ​

ไฟล์ legacy ที่พบบ่อย ​

ตัวอย่างที่ต้องระวังมากเป็นพิเศษ ​

วิธีตรวจสอบว่าไฟล์ที่จะแก้เป็นของจริง ​

utils/ — 36 ไฟล์ helper ​

ข้อควรระวังเกี่ยวกับ utils ​

เคล็ดลับตอนทำงานจริง ​

ตอนค้นหา "ฟีเจอร์นี้อยู่ที่ไฟล์ไหน" ​

ตอนเจอชื่อโฟลเดอร์แปลก ๆ ​

ตอนที่ grep ไม่เจอ symbol ที่คาดไว้ ​

ตอนเจอไฟล์ที่ดูเหมือน backup แต่ไม่มี _bk ​

ขั้นตอนถัดไป ​