[정성현] sprint9 (#123)

* chore: 프로젝트 초기화

- 프로젝트 내 불필요 파일 및 코드 제거

* feat: 초기 환경 구성

- 프로젝트 구조화 및 경로 별칭 적용
- 메타 데이터 작성 및 전역 CSS 적용
- README.md 작성

* feat: 레이아웃및 헤더 구현

- 레이아웃 구현 및 App 컴포넌트에 적용
- 헤더 구현
- 관련 페이지 컴포넌트 작성

* feat: API 구조및 getArticles 구현

- api 구조, api 타입, api 훅 구현
- getArticles API 구현

* feat: 자유게시판 베스트 게시글 구현

- 미디어 쿼리 적용
- api 적용
- CSS 관련 일부 적용

Author: jsh1147

README.md

@@ -1,40 +1,56 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+# 🐼 판다마켓
 
-## Getting Started
+> 일상의 모든 물건을 믿고 거래할 수 있는 **중고 거래 플랫폼**
 
-First, run the development server:
+- [판다마켓 바로가기](https://codeit-fe10-pandamarket.vercel.app)
+- 코드잇 스프린트 FE-10 스프린트 미션
+- 2024.08.05.(월) ~ 개발 진행 중
 
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+![판다마켓 이미지](/public/readme_banner.png)
 
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
+<br />
 
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+## 기술 스택
 
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+- **개발 환경**
+  - Visual Studio Code
+  - Git, Github
+  - Vercel
+- **FE 기술**
+  - HTML, CSS, CSS Module
+  - JS, TS, React, Next.js
 
-## Learn More
+<br />
 
-To learn more about Next.js, take a look at the following resources:
+## 네이밍 규칙
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+- **HTML**
+  - id: camelCase
+  - name: camelCase
+  - class: `camelElement_camelModifier`
+- **CSS**
+  - 변수: kebab-case
+- **JS**
+  - 식별자: camelCase
+  - 타입: PascalCase
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+<br />
 
-## Deploy on Vercel
+## 프로젝트 구조
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+```
+codeit-fe10-sprint-mission
+├─ .github                   : GitHub 설정
+├─ public                    : 정적 파일
+│   ├─ fonts                 : 글꼴
+│   ├─ icons                 : 아이콘
+│   ├─ images                : 이미지
+│   └─ meta                  : 메타데이터
+└─ src                       : 소스 코드
+    ├─ apis                  : 통신 API
+    ├─ components            : 컴포넌트
+    │   ├─ common            : 공용 컴포넌트
+    │   └─ layout            : 레이아웃 컴포넌트
+    ├─ pages                 : 페이지
+    └─ styles                : 전역 CSS
+```

next.config.js

@@ -1,6 +1,15 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
-}
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "sprint-fe-project.s3.ap-northeast-2.amazonaws.com",
+        pathname: "/Sprint_Mission/user/**",
+      },
+    ],
+  },
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;