[Init] Prettier 및 프로젝트 구조 설정

- Prettier 패키지 설치 및 .prettierrc 구성 추가
  - Prettier 관련 패키지 설치: prettier, eslint-config-prettier, prettier-plugin-tailwindcss
  - .prettierrc 추가: 팀 코드 스타일 통일 (세미콜론, 작은따옴표, 줄바꿈 등 설정)
  - .gitattributes 추가: LF 줄바꿈 설정으로 OS 간 충돌 방지
  - VSCode 자동 포맷팅 설정 추가
- ESLint와 Prettier 연동: Prettier를 ESLint의 확장으로 추가
- Next.js 라우팅 및 컴포넌트 디렉토리 구조 정의
  - 주요 페이지 디렉토리 및 컴포넌트 분리
  - 프로젝트 확장성과 유지보수를 고려한 구조 설계

Author: or-m-or

.eslintrc.json

@@ -1,3 +1,7 @@
 {
-  "extends": ["next/core-web-vitals", "next/typescript"]
-}
+  "extends": [
+    "next/core-web-vitals",
+    "next/typescript",
+    "prettier"
+  ]
+}

.gitattributes

@@ -0,0 +1 @@
+* text=auto

.prettierrc

@@ -0,0 +1,14 @@
+{
+    "semi": true,
+    "singleQuote": true,
+    "trailingComma": "all",
+    "endOfLine": "lf",
+    "tabWidth": 2,
+    "useTabs": false,
+    "bracketSpacing": true,
+    "arrowParens": "always",
+    "singleAttributePerLine": false,
+    "plugins": [
+        "prettier-plugin-tailwindcss"
+    ]
+}

.vscode/settings.json

@@ -0,0 +1,16 @@
+{
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[json]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[css]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
+}

README2.md

@@ -0,0 +1,138 @@
+# **Archi Semtle Web Dev** (FE)
+
+## 📝 **프로젝트 소개**
+
+...
+
+## 🚀 **주요 기능**
+
+...
+
+## 📂 **프로젝트 구조**
+
+```plaintext
+/
+├── .vscode/           # VSCode 환경 설정
+│   ├── settings.json  # VSCode 특정 프로젝트 설정 (예: 포맷터, 들여쓰기 등)
+|
+├── documents/         # README 모음
+├── public/            # 정적 파일 (이미지, 폰트 등)
+├── src/               # 소스 코드
+│   ├── app/           # Next.js App Router 관련 파일
+│   │   ├── about/       # "소개" 페이지
+│   │   │   ├── page.tsx # /about 경로의 컴포넌트
+│   │   ├── activities/  # "활동" 페이지
+│   │   ├── executive/   # "집행부" 페이지
+│   │   ├── history/     # "History" 페이지
+│   │   ├── login/       # 로그인 페이지
+│   │   ├── mypage/      # "마이페이지" 디렉토리
+│   │   ├── organization/           # "조직도" 페이지
+│   │   ├── projects/               # 프로젝트 관련 디렉토리
+│   │   │   ├── page.tsx            # /projects 경로의 메인 페이지
+│   │   │   ├── completed/          # 완료된 프로젝트 관련 디렉토리
+│   │   │   │   ├── [projectID]/    # 동적 경로: 특정 완료된 프로젝트 상세 페이지
+│   │   │   │       ├── page.tsx    # /projects/completed/:projectID
+│   │   │   ├── recruit/            # 프로젝트 모집 관련 디렉토리
+│   │   │       ├── [projectID]/    # 동적 경로: 특정 모집 프로젝트 상세 페이지
+│   │   │           ├── page.tsx    # /projects/recruit/:projectID
+│   │   ├── recruiting/             # "가입안내" 페이지
+│   │   ├── regulations/            # "학회회칙" 페이지
+│   │   ├── schedule/               # "학회일정" 페이지
+│   │   ├── secret/                 # "Secret 노트" 페이지
+│   │   ├── fonts/                  # 웹폰트 관련 파일
+│   │   ├── favicon.ico             # 웹사이트의 파비콘 설정 파일
+│   │   ├── global-error.tsx        # 전역 에러 페이지 (에러 발생 시 보여질 컴포넌트)
+│   │   ├── layout.tsx              # 공통 레이아웃 (Header, Footer 포함)
+│   │   ├── not-found.tsx           # 404 Not Found 페이지
+│   │   ├── page.tsx                # 메인 홈 페이지 ("/" 경로)
+│   ├── components/                 # 재사용 가능한 UI 컴포넌트 디렉토리
+│   │   ├── Button.tsx              # 재사용 가능한 버튼 컴포넌트
+│   │   ├── Footer.tsx              # 하단 공통 Footer 컴포넌트
+│   │   ├── Header.tsx              # 상단 공통 Header 컴포넌트
+│   │   ├── Loader.tsx              # 로딩 애니메이션 컴포넌트
+│   │   ├── Navigation.tsx          # 네비게이션 바 컴포넌트
+│   ├── styles/                     # 전역 스타일 관리
+│   │   ├── global.css              # 프로젝트 전역 스타일 파일
+│   ├── types/                      # TypeScript 타입 정의 디렉토리
+│   │   ├── api.ts                  # API 요청/응답에 사용되는 타입 정의
+│   │   ├── props.ts                # 컴포넌트 Props에 사용되는 타입 정의
+│   ├── utils/                      # 유틸리티 함수 디렉토리
+│       ├── api.ts                  # API 호출 관련 함수
+|
+├── .gitattributes     # Git 속성 관리 (예: 줄바꿈 설정, 파일 속성 제어)
+├── .gitignore         # Git에 포함하지 않을 파일 설정
+├── .prettierrc        # Prettier 코드 포맷터 설정 파일
+├── eslintrc.json      # ESLint 설정 파일
+├── next-env.d.ts      # TypeScript Next.js 환경 정의
+├── next.config.ts     # Next.js 설정 파일
+├── package-lock.json  # 패키지 잠금 파일
+├── package.json       # 프로젝트 정보 및 의존성 관리
+├── postcss.config.mjs # PostCSS 설정 파일
+├── README.md          # 프로젝트 소개 문서
+├── tailwind.config.ts # TailwindCSS 설정 파일
+├── tsconfig.json      # TypeScript 설정 파일
+```
+
+## 🔧 **설치 및 실행**
+
+### 1. **프로젝트 가져오기**
+
+```bash
+git clone https://github.com/Lab-Semtle/semtle-web-client-0.2.git
+```
+
+### 2. **브랜치 분기**
+
+```bash
+git checkout -b feature/#[이슈번호]
+git push origin feature/#[이슈번호]
+```
+
+### 3. **패키지 설치**
+
+```bash
+npm install
+```
+
+### 4. **개발 서버 실행**
+
+```bash
+npm run dev
+```
+
+- 실행 후 브라우저에서 [http://localhost:3000](http://localhost:3000)을 열어 확인하세요.
+
+## 🌟 **기술 스택**
+
+...
+
+## 📜 **스크립트**
+
+...
+
+## 🛠️ **환경 변수 설정**
+
+프로젝트의 민감한 정보를 관리하기 위해 `.env` 파일을 사용합니다.
+
+### `.env.example`
+
+```plaintext
+API_URL=
+DATABASE_URL=
+NEXT_PUBLIC_API_KEY=
+```
+
+- `.env` 파일을 작성한 후, 위의 형식에 맞게 정보를 추가하세요.
+- `.env` 파일은 `.gitignore`에 포함되어야 합니다.
+
+## 🧑 **TEAM**
+
+...
+
+## 🔗 **참고 자료**
+
+...
+
+## 🐞 **문제 및 개선 사항**
+
+...

package-lock.json

@@ -9,18 +9,21 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "next": "15.0.4",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "next": "15.0.4"
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
+    "eslint": "^8",
+    "eslint-config-next": "15.0.4",
+    "eslint-config-prettier": "^9.1.0",
     "postcss": "^8",
+    "prettier": "^3.4.2",
+    "prettier-plugin-tailwindcss": "^0.6.9",
     "tailwindcss": "^3.4.1",
-    "eslint": "^8",
-    "eslint-config-next": "15.0.4"
+    "typescript": "^5"
   }
-}
+}