chore: develop to main (#304)

* feat: 유실물 게시글 생성하기 (#290) (#291)

* feat: 유실물 게시글 생성하기 (#290)

* fix: test 관련 코드 주석 해제 (#290)

* feat: 유실물 게시글 수정 (#281) (#292)

* chore: D-n 규칙에 따라 자동으로 Label 을 업데이트하는 Github Actions (#293) (#294)

* feat: 토큰 재발급 (#296) (#298)

* feat: 커뮤니티 페이지 글 목록 조회 (#299)

* feat: community page list api 연동 (#297)

* feat: 인기글 목록 조회 추가 (#297)

* feat: community detail page (#300) (#301)

* feat: community detail page (#300)

* chore: remove console (#300)

* chore: 네이밍 수정 (#300)

* chore: lostFound와 community의 image 관련 리스폰스 형식 다른 점 처리 (#300)

* chore: date 포맷팅 관련 수정 (#300)

* feat: 커뮤니티 게시글 생성 및 수정 (#302) (#303)

* feat: 커뮤니티 게시글 생성 (#302)

* feat: 커뮤니티 게시글 수정 (#302)

* chore: resolve conflicts (#develop)

Author: createhb21

packages/utils/src/date.ts

@@ -1,4 +1,4 @@
-import { formatDistanceToNow } from 'date-fns';
+import { format, formatDistanceToNow } from 'date-fns';
 import { ko } from 'date-fns/locale';
 
 const TIME_UNITS = {
@@ -17,27 +17,19 @@ interface FormatOptions {
  * 분이 0인 경우 'MM.DD HH' 형식으로 반환합니다.
  */
 function formatToShortDate(date: Date): string {
-  const month = date.getMonth() + 1;
-  const day = date.getDate();
-  const hours = date.getHours();
   const minutes = date.getMinutes();
-
-  const formattedDate = `${String(month).padStart(2, '0')}.${String(day).padStart(2, '0')}`;
-  const formattedTime =
-    minutes === 0
-      ? String(hours).padStart(2, '0')
-      : `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`;
-
-  return `${formattedDate} ${formattedTime}`;
+  return minutes === 0
+    ? format(date, 'MM월 dd일 a h시', { locale: ko })
+    : format(date, 'MM월 dd일 a h시 mm분', { locale: ko });
 }
 
 /**
  * 날짜를 상황에 맞는 형식으로 변환합니다.
  * - 1분 이내: '방금 전'
  * - 24시간 이내: 'n시간 전'
  * - 24시간 이후:
- *   - format이 'short'인 경우 'MM.DD HH:mm'
- *   - format이 'relative'인 경우 'n일 전'
+ *   - format이 'short'인 경우 'MM월 dd일 a h시 mm분'
+ *   - format이 'relative'인 경우 '약 n일 전 / 약 n개월 전 / 약 n년 전'
  */
 export function formatDateTime(dateString: string, options: FormatOptions = {}): string {
   const { format = 'relative' } = options;

services/ahhachul.com/src/apis/fetcher.ts

@@ -9,7 +9,7 @@ import axios, {
 import { AUTH_ALERT_MSG } from '@/constants';
 import { authService } from '@/contexts';
 import type { ValueOf } from '@/types';
-import { TokenRefreshService, type ErrorResponse } from '@/utils';
+import { TokenRefreshService } from '@/utils';
 
 import { BASE_URL } from './baseUrl';
 import { API_PREFIX } from './endpointPrefix';
@@ -90,7 +90,7 @@ class ApiClient {
     const errorMessage = response.data?.message;
 
     if (errorMessage === AUTH_ALERT_MSG.INVALID_ACCESS_TOKEN) {
-      return this.tokenService.handleTokenRefresh(error as AxiosError<ErrorResponse>);
+      return this.tokenService.handleTokenRefresh(error);
     }
 
     if (errorMessage === AUTH_ALERT_MSG.DUPLICATE_SIGNIN_DETECTED) {

services/ahhachul.com/src/apis/request/community.ts

@@ -1 +1,83 @@
-export {};
+import axiosInstance from '@/apis/fetcher';
+import {
+  type ApiResponse,
+  type PaginatedList,
+  type CommunityListParams,
+  type CommunityPost,
+  CommunityType,
+  CommunityDetail,
+  CommentList,
+  CommunityForm,
+  WithPostId,
+  CommunityEditForm,
+} from '@/types';
+import { appendFilesToFormData, createJsonBlob, extractFormData } from '@/utils';
+
+export const fetchCommunityList = async (req: CommunityListParams) => {
+  const endpoint =
+    req.categoryType === CommunityType.HOT ? '/community-hot-posts' : '/community-posts';
+
+  const { data } = await axiosInstance.get<ApiResponse<PaginatedList<CommunityPost>>>(endpoint, {
+    params: {
+      ...req,
+      ...(req.categoryType !== CommunityType.HOT && { categoryType: req.categoryType }),
+      pageSize: 10,
+      sort: 'createdAt,desc',
+    },
+  });
+  return data;
+};
+
+export const createCommunity = async (req: CommunityForm) => {
+  const formData = new FormData();
+  const formDataWithoutImages = extractFormData(req, 'images');
+  const jsonBlob = createJsonBlob(formDataWithoutImages);
+
+  formData.append('content', jsonBlob);
+
+  if (req.images?.length) {
+    appendFilesToFormData(formData, req.images, 'imageFiles');
+  }
+
+  const { data } = await axiosInstance.post<ApiResponse<WithPostId>>('/community-posts', formData, {
+    headers: {
+      'Content-Type': 'multipart/form-data',
+    },
+  });
+
+  return data;
+};
+
+export const fetchCommunityDetail = (id: number) =>
+  axiosInstance.get<ApiResponse<CommunityDetail>>(`/community-posts/${id}`);
+
+export const fetchCommunityCommentList = (id: number) =>
+  axiosInstance.get<ApiResponse<CommentList>>(`/community-posts/${id}/comments`);
+
+export const editCommunity = async (id: number, req: CommunityEditForm) => {
+  const formData = new FormData();
+  const formDataWithoutImages = extractFormData(req, 'images');
+  const jsonBlob = createJsonBlob(formDataWithoutImages);
+
+  formData.append('content', jsonBlob);
+
+  if (req.images?.length) {
+    appendFilesToFormData(
+      formData,
+      req.images.flatMap(image => (image.data !== null ? [image.data] : [])),
+      'imageFiles',
+    );
+  }
+
+  const { data } = await axiosInstance.post<ApiResponse<WithPostId>>(
+    `/community-posts/${id}`,
+    formData,
+    {
+      headers: {
+        'Content-Type': 'multipart/form-data',
+      },
+    },
+  );
+
+  return data;
+};

services/ahhachul.com/src/apis/request/index.ts

@@ -2,3 +2,4 @@ export * from './auth';
 export * from './user';
 export * from './token';
 export * from './lostFound';
+export * from './community';

services/ahhachul.com/src/apis/request/lostFound.ts

@@ -36,17 +36,17 @@ export const createLostFound = async (req: LostFoundForm) => {
     appendFilesToFormData(formData, req.images);
   }
 
-  const response = await axiosInstance.post<ApiResponse<WithPostId>>('/lost-posts', formData, {
+  const { data } = await axiosInstance.post<ApiResponse<WithPostId>>('/lost-posts', formData, {
     headers: {
       'Content-Type': 'multipart/form-data',
     },
   });
 
-  return response.data;
+  return data;
 };
 
 export const fetchLostFoundDetail = (id: number) =>
-  axiosInstance.get<ApiResponse<LostFoundPostDetail>>(`lost-posts/${id}`);
+  axiosInstance.get<ApiResponse<LostFoundPostDetail>>(`/lost-posts/${id}`);
 
 export const fetchLostFoundCommentList = (id: number) =>
   axiosInstance.get<ApiResponse<CommentList>>(`/lost-posts/${id}/comments`);
@@ -59,14 +59,13 @@ export const editLostFound = async (id: number, req: LostFoundEditForm) => {
   formData.append('content', jsonBlob);
 
   if (req.images?.length) {
-    //    fileData: images,
     appendFilesToFormData(
       formData,
       req.images.flatMap(image => (image.data !== null ? [image.data] : [])),
     );
   }
 
-  const response = await axiosInstance.post<ApiResponse<WithPostId>>(
+  const { data } = await axiosInstance.post<ApiResponse<WithPostId>>(
     `/lost-posts/${id}`,
     formData,
     {
@@ -76,5 +75,5 @@ export const editLostFound = async (id: number, req: LostFoundEditForm) => {
     },
   );
 
-  return response.data;
+  return data;
 };

services/ahhachul.com/src/apis/request/token.ts

@@ -6,12 +6,10 @@ import { BASE_URL } from '../baseUrl';
 import { API_PREFIX } from '../endpointPrefix';
 
 export const renewAccessToken = async (refreshToken: string) => {
-  const { data } = await axios.get<ApiResponse<AuthTokens>>(
+  const { data } = await axios.post<ApiResponse<AuthTokens>>(
     `${BASE_URL.SERVER}${API_PREFIX}/auth/token/refresh`,
     {
-      params: {
-        refreshToken,
-      },
+      refreshToken,
     },
   );
 

services/ahhachul.com/src/apis/request/user.ts

@@ -6,3 +6,11 @@ export const fetchUserProfile = async () => {
 
   return data;
 };
+
+export const fetchUserFavoriteStations = async () => {
+  const { data } = await axiosInstance.get<ApiResponse<{ id: 'hello' }>>(
+    '/members/bookmarks/stations',
+  );
+
+  return data;
+};

services/ahhachul.com/src/components/common/filter/drawerFilter/DrawerFilter.component.tsx

@@ -26,11 +26,9 @@ const DrawerFilter: React.FC<DrawerFilterProps> = ({ label, drawerTitle }) => {
       onOpenChange={handleToggleDrawer}
     >
       <Drawer.Trigger asChild>
-        <S.FilterButton>
+        <S.FilterButton isActive={false}>
           <span>{label}</span>
-          <S.ChevronIconWrapper>
-            <ChevronIcon />
-          </S.ChevronIconWrapper>
+          <ChevronIcon />
         </S.FilterButton>
       </Drawer.Trigger>
       <Drawer.Portal>

services/ahhachul.com/src/components/common/filter/drawerFilter/DrawerFilter.styled.tsx

@@ -1,33 +1,23 @@
+import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { Drawer } from 'vaul';
 
-export const FilterButton = styled.button<{ isActive?: boolean }>`
-  position: relative;
-  text-align: left;
-  width: calc(100% - 40px);
-  margin: 0 auto;
-  border: 1px solid rgba(196, 212, 252, 0.37);
-  height: 44px;
-  border-radius: 6px;
-  padding: 0 12px;
-  color: ${({ isActive }) => (isActive ? '#FFFFFF' : '#9da5b6')};
-  font-size: 14px;
-
-  &[aria-invalid='true'] {
-    border-color: #e02020;
-  }
-`;
-
-export const ChevronIconWrapper = styled.div`
-  width: 14px;
-  height: 14px;
-  position: absolute;
-  top: 51.5%;
-  right: 12px;
-  transform: translateY(-50%);
+export const FilterButton = styled.button<{ isActive: boolean }>`
+  flex-shrink: 0;
+  height: 30px;
+  background-color: ${({ theme }) => theme.colors.gray[10]};
+  border: 1px solid
+    ${({ theme, isActive }) => (isActive ? theme.colors.gray[100] : theme.colors.gray[20])};
+  border-radius: 18px;
+  display: flex;
+  align-items: center;
+  padding: 0 10px;
+  transition: background-color 0.2s ease-out;
+  gap: 2px;
 
-  & > svg > path {
-    stroke: #9da5b6;
+  & > span {
+    ${({ theme }) => theme.fonts.labelMedium};
+    color: ${({ theme }) => theme.colors.gray[90]};
   }
 `;
 
@@ -41,21 +31,22 @@ export const Overlay = styled(Drawer.Overlay)`
 `;
 
 export const DrawerContent = styled(Drawer.Content)`
-  z-index: 999999999;
+  z-index: ${({ theme }) => theme.zIndex.drawer};
   display: flex;
   flex-direction: column;
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
-  height: 96%;
+  height: max-content;
   position: fixed;
   bottom: 0;
   left: 0;
   right: 0;
+  box-shadow: 0px -10px 16px 0px rgba(0, 0, 0, 0.17);
 `;
 
 export const ContentWrapper = styled.div`
   padding: 1.2rem 1rem;
-  background-color: #222226;
+  background-color: ${({ theme }) => theme.colors.gray[10]};
   border-top-left-radius: 12px;
   border-top-right-radius: 12px;
   height: 100%;
@@ -71,12 +62,13 @@ export const Header = styled.div`
 export const HeaderTitle = styled(Drawer.Title)`
   font-size: 16px;
   font-weight: 600;
-  color: #ffffff;
+  color: ${({ theme }) => theme.colors.gray[90]};
 `;
 
 export const ActionButton = styled.button<{ variant?: 'cancel' | 'done' }>`
   font-size: 16px;
-  color: #025fac;
+  color: ${({ theme, variant }) =>
+    variant === 'cancel' ? theme.colors.gray[90] : theme.colors['key-color']};
   font-weight: ${({ variant }) => (variant === 'done' ? 600 : 400)};
 `;
 
@@ -86,8 +78,9 @@ export const SearchContainer = styled.div`
   align-items: center;
   gap: 14px;
   width: 100%;
-  background-color: #222226;
+  background-color: ${({ theme }) => theme.colors.gray[20]};
   margin-bottom: 16px;
+  border-radius: 12px;
 `;
 
 export const SearchIconWrapper = styled.button`
@@ -107,29 +100,32 @@ export const SearchIconWrapper = styled.button`
 `;
 
 export const SearchInput = styled.input`
-  width: 100%;
-  max-width: 100%;
-  height: 36px;
-  background-color: #2e3034;
-  border-radius: 9px;
-  padding: 0 12px 0 30px;
-  font-size: 16px;
-  color: #f0f4ff;
-  caret-color: rgba(0, 255, 163, 0.5);
-
-  &::placeholder {
-    color: #999aa1;
-  }
-
-  &:active:not(:focus) {
-    background-color: rgba(119, 119, 119, 0.8);
-  }
-
-  transition: all 0.3s ease;
+  ${({ theme }) => css`
+    width: 100%;
+    max-width: 100%;
+    height: 36px;
+    border: 0;
+    color: ${theme.colors.gray[90]};
+    background-color: ${theme.colors.gray[20]};
+    padding: 0 12px 0 30px;
+    font-size: 16px;
+    caret-color: ${theme.colors['key-color']};
+    border-radius: 12px;
+
+    &::placeholder {
+      color: ${theme.colors.gray[70]};
+    }
+
+    &:active:not(:focus) {
+      background-color: rgba(119, 119, 119, 0.8);
+    }
+
+    transition: all 0.3s ease;
+  `}
 `;
 
 export const ContentArea = styled.div`
-  background-color: #2e2f37;
-  height: calc(100% - 200px);
+  background-color: ${({ theme }) => theme.colors.gray[20]};
+  height: 500px;
   border-radius: 12px;
 `;