public >main 폴더 안에 메인 슬라이더 이미지 , 로고, 좋아요 이미지 등 저장

• ⭐️pages에 폴더별로 index.js 와 css 파일 있음, app.js에서 라우팅

components 폴더 구조

• pages폴더
• header

breadcrumb.js 는 breadcrumbLabels 에 목록을 추가해 렌더링 가능

![스크린샷 2024-12-24 오후 6.35.30.png](<https://prod-files-secure.s3.us-west-2.amazonaws.com/35cdde1c-3eaf-4519-bc37-78f6a0576101/def81640-599e-4998-96d6-22f1aaf285d9/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA_2024-12-24_%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE_6.35.30.png>)

haeder.js 메인 헤더에 표시할 내용과 그 하위 목록 설정 방법

![스크린샷 2024-12-24 오후 6.34.53.png](<https://prod-files-secure.s3.us-west-2.amazonaws.com/35cdde1c-3eaf-4519-bc37-78f6a0576101/d48406be-ccd6-47c1-a61e-da1a9d3e3f10/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA_2024-12-24_%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE_6.34.53.png>)

• footer
• googleoauth 구글 로그인 구현 코드
• protectedRoute.js 로그인 후 사용할 수 있는 페이지 설정 위한 코드

page 폴더 구조

• about
• announcement
• audit
• bylaws
• campusmap
• commu
• join
• main
• map
• noticepost
• organization
• password
• planning
• policy
• proceeding
• promise
• promotion
• qna
• rental
• require
• siginin
• sitemap
• writepage

배포

• ci.yml 위치

docker file

# Step 1: Base Image
FROM node:18.17.0

# Step 2: Set working directory
WORKDIR /app

# Step 3: Copy package.json and package-lock.json
COPY package*.json ./

# Step 4: Install dependencies
RUN npm install

# Step 5: Copy project files
COPY . .

## Step 6: Build the project (if applicable)
#RUN npm run build

# Step 7: Expose the application port
EXPOSE 3000

# Step 8: Start the application
CMD ["npm", "start"]

메인페이지 슬라이드 이미지

1. public >main 폴더 안에 이미지 저장

1. pages> main.js 에서 const image에 순서대로 배열에 이미지 넣기 ㅋ

기타 전달사항

-로그인 구현후 protecedRoute로 태그 변경 사용 가능