Merge pull request #426 from TripInfoWeb/dev_fsd_refactoring

Refactor: 프론트엔드 코드 리팩토링 2

Author: HyunJinNo

.dockerignore

@@ -0,0 +1,18 @@
+# 의존성 파일
+node_modules
+
+# Git 관련 파일
+.git
+.gitignore
+.github
+
+# Next.js 빌드 결과물
+.next
+
+.eslintrc.json
+.prettierrc.json
+LICENSE
+README.md
+build.sh
+Dockerfile
+.dockerignore

.eslintrc.json

@@ -1,9 +1,11 @@
 {
-  "extends": "next/core-web-vitals",
+  "extends": ["next/core-web-vitals"],
+  "plugins": ["@typescript-eslint"],
   "rules": {
     "semi": "error",
     "quotes": "error",
     "jsx-quotes": "error",
+    // "@typescript-eslint/no-unused-vars": "error",
     "indent": [
       "error",
       2,

.github/pull_request_template.md

@@ -7,20 +7,22 @@
 
 ## ☑️ 개발 유형
 
-- [x] Front-end
+- [ ] Front-end
+- [ ] Back-end
 
 ## ✔️ PR 유형
 
-- [ ] 새로운 기능 추가
-- [ ] 버그 수정
-- [ ] CSS 등 사용자 UI 디자인 변경
-- [ ] 기존 기능에 영향을 주지 않는 변경사항 (Ex. 오타 수정, 탭 사이즈 변경, 변수명 변경, 코드 리팩토링 등)
-- [ ] 주석 관련 작업
-- [ ] 문서 관련 작업
-- [ ] 테스트 추가 혹은 테스트 리팩토링
-- [ ] 빌드 부분 혹은 패키지 매니저 수정
-- [ ] 파일 혹은 폴더명 수정
-- [ ] 파일 혹은 폴더 삭제
+- [ ] Feat: 새로운 기능 추가
+- [ ] Fix: 버그 수정
+- [ ] Design: CSS 등 사용자 UI 디자인 변경
+- [ ] Refactor: 기존 기능에 영향을 주지 않는 변경사항 (Ex. 오타 수정, 탭 사이즈 변경, 변수명 변경, 코드 리팩토링 등)
+- [ ] Comment: 주석 관련 작업
+- [ ] Docs: 문서 관련 작업
+- [ ] Test: 테스트 추가 혹은 테스트 리팩토링
+- [ ] Chore: 빌드 부분 혹은 패키지 매니저 수정
+- [ ] Rename: 파일 혹은 폴더명 수정
+- [ ] Remove: 파일 혹은 폴더 삭제
+- [ ] Release: 배포 관련 작업
 
 ## 📝 작업 내용
 
@@ -31,6 +33,6 @@
 
 ## #️⃣ Related Issue
 
-해당 Pull Request과 관련된 Issue Link를 작성해 주세요
+해당 Pull Request과 관련된 Issue Link를 작성해 주세요.
 
-Ex. #123
+Ex. close #123

Dockerfile

@@ -0,0 +1,48 @@
+###############################################################################################################
+#                                                                                                             #
+# Notice: 해당 Dockerfile을 사용하기 위해선 먼저 next.config.mjs 파일에서 output이 "standalone"으로 설정되어야 합니다. #
+#                                                                                                             #
+# 명령어: docker build -t solitour-frontend:v2.0.0 .                                                           #
+#                                                                                                             #
+###############################################################################################################
+
+# 1. 빌드 단계
+# 생성할 Docker 이미지의 베이스가 되는 이미지를 지정합니다.
+FROM node:20-alpine AS build
+
+# 1-1. 작업 디렉토리 설정
+# 애플리케이션 파일을 저장하고 실행할 기본 작업 디렉토리를 지정합니다.
+# /app 디렉토리가 자동으로 생성되며, 이후의 모든 명령어가 이 디렉토리에서 실행됩니다.
+WORKDIR /app
+
+# 1-2. 의존성 파일 복사
+COPY package.json package-lock.json ./
+
+# 1-3. 의존성 설치
+# 컨테이너 안에서 명령어를 실행하고 이미지를 빌드합니다.
+RUN npm install
+
+# 1-4. 애플리케이션 코드 복사
+# 현재 디렉토리의 모든 파일을 /app 디렉토리로 복사합니다.
+COPY . .
+
+# 1-5. 애플리케이션 빌드
+RUN npm run build
+
+# 2. 런타임 단계
+FROM node:20-alpine
+
+# 2-1. 빌드 결과물과 필요한 파일만 복사
+WORKDIR /app
+COPY --from=build /app/.next/standalone ./
+COPY --from=build /app/.next/static ./.next/static
+COPY --from=build /app/public ./public
+
+# 2-2. 포트 설정
+# 컨테이너가 사용하는 포트를 명시적으로 지정하는 명령어로, 호스트와 통신할 포트를 설정합니다.
+EXPOSE 3000
+
+# 2-3. 애플리케이션 실행
+# 컨테이너가 시작될 때 실행할 기본 명령어를 지정합니다.
+# CMD는 Dockerfile에서 한 번만 사용할 수 있습니다.
+CMD [ "node", "server.js" ]

README.md

@@ -4,12 +4,11 @@
 
 > 배포 링크 <br/> **https://www.solitourist.com**
 
-<br/>
+<br />
 
 <div align="center">
-
-[![Hits](https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fgithub.com%2FTripInfoWeb%2Fsolitour-frontend&count_bg=%2379C83D&title_bg=%23555555&icon=&icon_color=%23E7E7E7&title=hits&edge_flat=false)](https://hits.seeyoufarm.com)
-
+   <a href="https://github.com/TripInfoWeb/solitour-frontend/wiki" target="_blank"><img src="https://img.shields.io/badge/GitHub%20Wiki-181717?logo=github&logoColor=white"></a>
+   <a href="https://github.com/orgs/TripInfoWeb/projects/6" target="blank"><img src="https://img.shields.io/badge/🎯Backlog%20-02B78F?logo=none&logoColor=white"></a>
 </div>
 
 <br/>

next.config.mjs

@@ -1,5 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  // output: "standalone", // Notice: Docker 이미지를 빌드할 때 output: "standalone"으로 설정합니다. Vercel 배포 시에는 주석 처리해야 합니다.
   reactStrictMode: true,
   images: {
     remotePatterns: [