[FrontEnd] Component & Page 구조 ver.010

[chaehun0i]

배경

• Frontend 팀 내 컴포넌트 및 페이지 구조를 통일
• Backend / DB / 문서팀과의 협업 시 혼선을 방지하기 위함
• 개발 속도 향상 및 유지보수 용이성 확보

검토안

• 컴포넌트 기반 아키텍처 (Component-Based Architecture)
• Page / Component / Utils 역할 분리 구조

1차 결정

src/
├── components/          # 2회 이상 재사용 공통 컴포넌트만 생성
│   ├── Header.jsx       # 상단 네비게이션 (로고, 유저정보, 알림 등)
│   ├── Sidebar.jsx      # 좌측 메뉴 네비게이션 (페이지 이동)
│   └── [추가 예정]
├── homes/               # 모든 페이지 (Route 단위)
│   ├── gates/           
│   │   └── Gate.jsx     
│   │       # 역할: 서비스 진입 전 초기 게이트 페이지
│   ├── logins/          
│   │   ├── Login.jsx    
│   │   │   # 역할: 로그인 및 비밀번호 찾기 처리 (토큰 발급 요청)
│   │   ├── SignUp.jsx   
│   │   │   # 역할: 일반 회원가입 페이지
│   │   └── InviteSignUp.jsx
│   │       # 역할: 초대 기반 회원가입 (코드 검증 포함)
│   ├── mains/           
│   │   ├── Onboarding.jsx
│   │   │   # 역할: 데이터 입력 화면
│   │   ├── Dashboard.jsx
│   │   │   # 역할: 핵심 데이터 요약 화면 (KPI, ESG 요약, 그래프)
│   │   ├── MyPage.jsx
│   │   │   # 역할: 사용자 정보 조회/수정 (프로필, 계정 설정)
│   │   ├── Manager.jsx
│   │   │   # 역할: ESG담당자 전용 페이지 (유저 관리, 권한 관리)
│   │   ├── Log.jsx
│   │   │   # 역할: 시스템 로그 / 활동 기록 조회
│   │   └── Invite.jsx
│   │       # 역할: 사용자 초대 관리 (초대 생성, 상태 확인)
│   ├── errors/          
│   │   ├── NotFound.jsx 
│   │   │   # 역할: 존재하지 않는 경로 접근 시 404 페이지
│   │   └── [추가예정]  
│   └── styles/          
│       # 역할: 전역 스타일 / 페이지별 스타일 관리
├── utils/               
│   ├── api.js           # API 호출 함수 모음 (axios 등)
│   ├── auth.js          # 토큰 관리 (localStorage, 쿠키)
│   ├── formatter.js     # 날짜/숫자 포맷 함수
│   └── [추가예정]
├── assets/              
│   # 이미지, 아이콘, 폰트 등 정적 리소스
└── App.js               
    # 역할: 라우팅 관리

참고사항

• homes : 페이지 단위 (라우팅 기준)
• utils : 공통 로직 처리 (API, 인증, 포맷 등)
• components : 재사용 가능한 UI 컴포넌트

추가사항은 버전 업데이트하며 어떤 부분이 추가 및 수정되었는가를 문서화 예정

개발 규칙

1. 컴포넌트 생성 기준

• 2회 이상 재사용 시에만 생성
• 단일 페이지 전용 컴포넌트 분리 금지

2. 네이밍 규칙

• 파일: PascalCase (단수)
• 변수/함수: camelCase
• 폴더: 소문자 복수형

3. 금지 사항

• 불필요한 컴포넌트 분리 금지

영향 범위

FE / BE @choiyc05 / DB @leeej9801-max / 문서 @frankie516c

담당자

@x2bjvhmmwg-gif @frydaynar @agii990114-ctrl

결정일

• 2026-04-26

[frydaynar]

[공통/FE] Gate 페이지 등에서 사용되는 정적파일(image) 관리 폴더 생성합니다.
아래 구조는 Issue(#14) 완료 이후 반영 예정이며, 정적파일 추가시 아래 파일 디렉토리 확인 후 진행 부탁드립니다.

---

📂 정적파일디렉토리 구성

src/
└── assets/
├── logos/ -------------------------- # 브랜드 및 프로젝트 로고
│ └── logo.png
├── icons/ -------------------------- # 아이콘 리소스
│ ├── base/ ----------------------- # 기본 상태 아이콘
│ │ └── GateLogin.png
│ └── hover/ ---------------------- # 호버 상태 아이콘
│ └── GateLoginHover.png
├── backgrounds/ ----------------- # 레이아웃/섹션 배경 이미지
│ └── GateBg1.png
└── banners/ ---------------------- # 페이지 배너 및 게이트 이미지
└── GateMain.jpg

[frydaynar]

[공통/FE] components 관리 폴더 구조입니다.
컴포넌트 관리 시 아래 파일 디렉토리 확인 후 진행 부탁드립니다.

(+추가) components 폴더 관리시 폴더명을 '소문자'로 유지해야하는지 추가 논의가 필요합니다.

• 방안1 (전체 소문자 유지) : servicealert
• 방안2 (카멜 형식) : serviceAlert
• 방안3 (파스칼 형식) : ServiceAlert

---

📂 components 파일디렉토리 구성

src/
├── components/
│ ├── ServiceAlert/
│ │ ├── ServiceAlert.jsx
│ │ └── ServiceAlert.css
│ └── ExComponet/
│　　├── ExComponet.jsx
│　　└── ExComponet.css
├── homes/ (페이지 단위)
│　　├── styles/ (페이지 공통/전역 스타일)
│　　└── ...

[chaehun0i]

말씀 주신 내용 기준으로 구조/문서 정리해보고 공유드리겠습니다.
검토 후 추가 의견 주시면 반영하겠습니다!