[정성현] sprint9

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;

src/apis/apis.ts

@@ -0,0 +1,32 @@
+import { StringObj, GetArticlesRes, GetArticlesParams } from "./apis.type";
+
+const BASE_URL = "https://panda-market-api.vercel.app/";
+
+const PATH = {
+  ARTICLE: "articles",
+};
+
+async function processResponse(response: Response) {
+  if (!response.ok) throw Error(`${response.status}: ${response.statusText}`);
+
+  return await response.json();
+}
+
+export async function getArticles({
+  page = 1,
+  pageSize = 10,
+  orderBy = "recent",
+  keyword,
+}: GetArticlesParams): Promise<GetArticlesRes> {
+  const url = new URL(PATH.ARTICLE, BASE_URL);
+  const paramObj: StringObj = {
+    page: String(page),
+    pageSize: String(pageSize),
+    orderBy,
+    ...(keyword && { keyword }),
+  };
+  url.search = String(new URLSearchParams(paramObj));
+
+  const response = await fetch(url);
+  return processResponse(response);
+}

src/apis/apis.type.ts

@@ -0,0 +1,29 @@
+export type StringObj = Record<string, string>;
+
+interface GetListParams<ItemOrder> {
+  page: number;
+  pageSize: number;
+  orderBy: ItemOrder;
+  keyword?: string;
+}
+interface GetListRes<ItemProps> {
+  totalCount: number;
+  list: ItemProps[];
+}
+
+export type ArticleOrderType = "recent" | "like";
+export interface ArticleProps {
+  id: number;
+  title: string;
+  content: string;
+  image: string | null;
+  likeCount: number;
+  createdAt: string;
+  updatedAt: string;
+  writer: {
+    id: number;
+    nickname: string;
+  };
+}
+export type GetArticlesParams = GetListParams<ArticleOrderType>;
+export type GetArticlesRes = GetListRes<ArticleProps>;

src/components/layout/Header.module.css

@@ -0,0 +1,64 @@
+.header {
+  position: fixed;
+  inset: 0 0 auto 0;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 48px;
+  min-width: 375px;
+  height: 70px;
+  padding: 8px calc((100% - 1100px) / 2);
+  border-bottom: 1px solid var(--gray-300);
+  background-color: white;
+}
+@media (max-width: 1199px) {
+  .header {
+    gap: 32px;
+    padding: 8px max(calc((100% - 1100px) / 2), 24px);
+  }
+}
+@media (max-width: 767px) {
+  .header {
+    gap: 8px;
+    padding: 8px 16px;
+  }
+}
+
+.logo {
+  width: 153px;
+  height: 40px;
+  background: url("/images/logo_w153x3.png") no-repeat center right / 153px;
+}
+@media (max-width: 767px) {
+  .logo {
+    width: 84px;
+    background-size: 120px;
+  }
+}
+
+.nav {
+  flex-grow: 1;
+}
+
+.navList {
+  display: flex;
+  gap: 32px;
+  font-size: var(--size-2lg);
+  font-weight: bold;
+  color: var(--gray-600);
+}
+@media (max-width: 767px) {
+  .navList {
+    gap: 8px;
+    font-size: var(--size-lg);
+  }
+}
+
+.navItem_active {
+  color: var(--blue-100);
+}
+
+.profile {
+  width: 40px;
+}