Skip to content

[조형민] sprint11 #64

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: next-조형민
Choose a base branch
from
Open

[조형민] sprint11 #64

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
38107be
feat: add tsconfig.json
paengdal Mar 13, 2025
2286690
BREADKING: Typescript 설치
paengdal Mar 13, 2025
552c3d1
feat: strict:false 상태에서 build 및 실행(npm run dev) 성공
paengdal Mar 14, 2025
f3512df
feat: strict:true 옵션으로 모든 에러 처리
paengdal Mar 14, 2025
bf23863
feat: AuthButton의 사용자 정보 요청 방식 변경
paengdal Mar 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"typescript.tsdk": "node_modules/typescript/lib"
}
89 changes: 57 additions & 32 deletions api/index.js → api/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import { ProductPostDto } from '@/types/dtos/product.dto';
import { UserLoginDto, UserSignUpDto } from '@/types/dtos/user.dto';
import axios from 'axios';

// const baseURL = 'https://four-sprint-mission-be.onrender.com/';
Expand All @@ -9,12 +11,16 @@ export const client = axios.create({
baseURL,
});

function errorHandler(error) {
function errorHandler(error: any) {
console.log('AxiosError', error);
if (error.response) {
if (axios.isAxiosError(error && error.response)) {
Copy link
Collaborator

@jjjwodls jjjwodls Mar 25, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

error.response 넣지 않고 error 만 넣어도 isAxiosError 를 통해 axios error 인지 체크 가능합니다!

Copy link
Collaborator Author

@paengdal paengdal Mar 25, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

if (axios.isAxiosError(error)) 이렇게 넣으라는 말씀이신지요?
그렇게 넣었더니 바로 아래에 throw 부분에서 에러가 발생해서 넣긴 했는데..
그럼 아래쪽에 다시 조건을 넣는게 좋을까요? 잘 모르겠습니다. ㅠㅠ 조언 부탁드립니다!

image

throw new Error(`${error.response.status}: ${error.response.data}`);
} else {
throw new Error(error, '요청에 실패하였습니다.');
if (error instanceof Error) {
throw new Error(error.message);
} else {
throw new Error('알 수 없는 에러로 요청에 실패하였습니다.');
}
}
}

Expand All @@ -30,7 +36,7 @@ client.interceptors.request.use(
)
return config;
console.log('do interceptor');
let accessToken;
let accessToken: string | null = null;
if (typeof window !== 'undefined') {
accessToken = localStorage.getItem('accessToken');
}
Expand All @@ -57,7 +63,7 @@ client.interceptors.response.use(
if ((statusCode === 401 || statusCode === 419) && !originalRequest._retry) {
console.log('토큰 만료');
originalRequest._retry = true;
let prevRefreshToken;
let prevRefreshToken: string | null = null;
if (typeof window !== 'undefined') {
prevRefreshToken = localStorage.getItem('refreshToken');
}
Expand All @@ -79,7 +85,11 @@ client.interceptors.response.use(
* 게시글(article) 관련 API
*/
// 게시글 등록
const postArticle = async (articleData) => {
const postArticle = async (articleData: {
writer: string;
title: string;
content: string;
}) => {
try {
const url = '/articles';
const response = await client.post(url, articleData);
Expand All @@ -90,7 +100,10 @@ const postArticle = async (articleData) => {
};

// 게시글 수정
const editArticle = async (articleId, articleData) => {
const editArticle = async (
articleId: string,
articleData: { title: string; content: string }
) => {
try {
const url = `/articles/${articleId}`;
const response = await client.patch(url, articleData);
Expand All @@ -101,7 +114,7 @@ const editArticle = async (articleId, articleData) => {
};

// 게시글 삭제
const deleteArticle = async (articleId) => {
const deleteArticle = async (articleId: string) => {
try {
const url = `/articles/${articleId}`;
const response = await client.delete(url);
Expand All @@ -113,7 +126,7 @@ const deleteArticle = async (articleId) => {

// 게시글 목록 조회
const getArticles = async ({
limit,
limit = 10,
sort = 'latest',
skip = 0,
keyword = '',
Expand All @@ -129,7 +142,7 @@ const getArticles = async ({
};

// 특정 id 게시글 조회
const getArticle = async (articleId) => {
const getArticle = async (articleId: string) => {
try {
const url = `/articles/${articleId}`;
const response = await client.get(url);
Expand All @@ -140,7 +153,7 @@ const getArticle = async (articleId) => {
};

// 게시글에 좋아요 하기
const likeArticle = async (articleId) => {
const likeArticle = async (articleId: string) => {
try {
const url = `/articles/${articleId}/like`;
const response = await client.post(url);
Expand All @@ -151,7 +164,7 @@ const likeArticle = async (articleId) => {
};

// 게시글에 좋아요 취소하기
const unLikeArticle = async (articleId) => {
const unLikeArticle = async (articleId: string) => {
try {
const url = `/articles/${articleId}/unlike`;
const response = await client.delete(url);
Expand All @@ -167,7 +180,10 @@ const unLikeArticle = async (articleId) => {

// panda 마켓 - cursor가 숫자, 그 외에는 ''
// 댓글 목록 조회 - 게시글
const getCommentsOfArticle = async (articleId, { limit = 3, cursor = '' }) => {
const getCommentsOfArticle = async (
articleId: string,
{ limit = 3, cursor = '' }
) => {
try {
const query = `limit=${limit}&cursor=${cursor}`;
const url = `/articles/${articleId}/comments?${query}`;
Expand All @@ -179,7 +195,10 @@ const getCommentsOfArticle = async (articleId, { limit = 3, cursor = '' }) => {
};

// 댓글 등록 - 게시글
const postArticleComment = async (articleId, commentData) => {
const postArticleComment = async (
articleId: string,
commentData: { writer: string; content: string }
) => {
try {
const url = `/articles/${articleId}/comments`;
const response = await client.post(url, commentData);
Expand All @@ -190,7 +209,7 @@ const postArticleComment = async (articleId, commentData) => {
};

// 댓글 삭제
const deleteComment = async (commentId) => {
const deleteComment = async (commentId: string) => {
try {
const url = `/comments/${commentId}`;
const response = await client.delete(url);
Expand All @@ -201,10 +220,10 @@ const deleteComment = async (commentId) => {
};

// 댓글 수정
const editComment = async (commentId, content) => {
const editComment = async (commentId: string, content: string) => {
try {
const url = `/comments/${commentId}`;
const response = await client.patch(url, content);
const response = await client.patch(url, { content });
return response.data;
} catch (error) {
errorHandler(error);
Expand All @@ -213,7 +232,10 @@ const editComment = async (commentId, content) => {

// panda 마켓 - cursor가 숫자, 그 외에는 ''
// 댓글 목록 조회 - 상품
const getCommentsOfProduct = async (productId, { limit = 3, cursor = '' }) => {
const getCommentsOfProduct = async (
productId: string,
{ limit = 3, cursor = '' }
) => {
try {
const query = `limit=${limit}&cursor=${cursor}`;
const url = `/products/${productId}/comments?${query}`;
Expand All @@ -225,7 +247,10 @@ const getCommentsOfProduct = async (productId, { limit = 3, cursor = '' }) => {
};

// 댓글 등록 - 상품
const postProductComment = async (productId, commentData) => {
const postProductComment = async (
productId: string,
commentData: { writer: string; content: string }
) => {
try {
const url = `/products/${productId}/comments`;
const response = await client.post(url, commentData);
Expand Down Expand Up @@ -262,7 +287,7 @@ const getProducts = async ({
};

// 상품 조회
const getProduct = async (productId) => {
const getProduct = async (productId: string) => {
try {
const url = `/products/${productId}`;
const response = await client.get(url);
Expand All @@ -273,15 +298,15 @@ const getProduct = async (productId) => {
};

// 상품 등록
const postProduct = async (productData) => {
const postProduct = async (productData: ProductPostDto) => {
try {
const { name, description, price, tags, writer, images } = productData;
// file을 전달하므로 반드시 formData형식으로 전달
const formData = new FormData();
formData.append('name', name);
formData.append('description', description);
formData.append('price', price);
formData.append('tags', tags);
formData.append('price', price.toString());
tags.forEach((tag) => formData.append('tags', tag));
formData.append('writer', writer);
images.forEach((image) => formData.append('imgUrls', image));

Expand All @@ -294,7 +319,7 @@ const postProduct = async (productData) => {
};

// 상품 삭제
const deleteProduct = async (productId) => {
const deleteProduct = async (productId: string) => {
try {
const url = `/products/${productId}`;
const response = await client.delete(url);
Expand All @@ -305,15 +330,15 @@ const deleteProduct = async (productId) => {
};

// 상품 수정
const editProduct = async (productId, productData) => {
const editProduct = async (productId: string, productData: ProductPostDto) => {
try {
const { name, description, price, tags, writer, images } = productData;
// file을 전달하므로 반드시 formData형식으로 전달
const formData = new FormData();
formData.append('name', name);
formData.append('description', description);
formData.append('price', price);
formData.append('tags', tags);
formData.append('price', price.toString());
tags.forEach((tag) => formData.append('tags', tag));
formData.append('writer', writer);
images.forEach((image) => formData.append('imgUrls', image));

Expand All @@ -326,7 +351,7 @@ const editProduct = async (productId, productData) => {
};

// 상품에 좋아요 하기
const likeProduct = async (productId) => {
const likeProduct = async (productId: string) => {
try {
const url = `/products/${productId}/like`;
const response = await client.post(url);
Expand All @@ -337,7 +362,7 @@ const likeProduct = async (productId) => {
};

// 상품에 좋아요 취소하기
const unLikeProduct = async (productId) => {
const unLikeProduct = async (productId: string) => {
try {
const url = `/products/${productId}/unlike`;
const response = await client.delete(url);
Expand All @@ -351,7 +376,7 @@ const unLikeProduct = async (productId) => {
* 회원(user) 관련 API
*/
// 회원 가입
const signUp = async (dto) => {
const signUp = async (dto: UserSignUpDto) => {
const url = '/users/sign-up';
const response = await client.post(url, dto);
const data = response.data;
Expand Down Expand Up @@ -379,7 +404,7 @@ const signUp = async (dto) => {
};

// 로그인
const logIn = async (dto) => {
const logIn = async (dto: UserLoginDto) => {
const url = '/users/log-in';
const response = await client.post(url, dto);
const data = response.data;
Expand Down Expand Up @@ -412,7 +437,7 @@ const logIn = async (dto) => {
};

// refreshToken
const refreshToken = async (prevRefreshToken) => {
const refreshToken = async (prevRefreshToken: string) => {
try {
const url = '/users/refresh-token';
const response = await client.post(url, { prevRefreshToken });
Expand Down
0 ...)/(root)/articles/[articleId]/loading.jsx → ...)/(root)/articles/[articleId]/loading.tsx
View file
Open in desktop
File renamed without changes.
17 changes: 0 additions & 17 deletions app/(providers)/(root)/articles/[articleId]/page.jsx
View file
Open in desktop

This file was deleted.

22 changes: 22 additions & 0 deletions app/(providers)/(root)/articles/[articleId]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import api from '@/api';
import ArticleDetail from '@/components/articles/ArticleDetail';
import CommentList from '@/components/articles/CommentList';
import PageContainer from '@/components/common/Page';
import { ArticleDetailDto } from '@/types/dtos/article.dto';

type Params = Promise<{
articleId: string;
}>;

async function ArticleDetailPage({ params }: { params: Params }) {
const { articleId } = await params;
const article: ArticleDetailDto = await api.getArticle(articleId);
return (
<PageContainer>
<ArticleDetail articleId={articleId} initialData={article} />
<CommentList articleId={articleId} />
</PageContainer>
);
}

export default ArticleDetailPage;
0 app/(providers)/(root)/articles/loading.jsx → app/(providers)/(root)/articles/loading.tsx
View file
Open in desktop
File renamed without changes.
0 ...oviders)/(root)/articles/loading/page.jsx → ...oviders)/(root)/articles/loading/page.tsx
View file
Open in desktop
File renamed without changes.
6 changes: 5 additions & 1 deletion app/(providers)/(root)/articles/page.jsx → app/(providers)/(root)/articles/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,15 @@ import api from '@/api';
import ArticleList from '@/components/articles/ArticleList';
import BestArticleList from '@/components/articles/BestArticleList';
import PageContainer from '@/components/common/Page';
import { ArticleListDto } from '@/types/dtos/article.dto';

async function ArticleListPage() {
// 게시글 불러오기
// const data = await api.getArticles({ sort: 'recent', limit: 10 }); // panda 마켓
const data = await api.getArticles({ sort: 'recent', limit: 10 });
const data: ArticleListDto[] = await api.getArticles({
sort: 'recent',
limit: 10,
});
return (
<PageContainer>
<BestArticleList initialData={data} />
Expand Down
Loading