Merge pull request #261 from YAPP-Github/develop

[RELEASE] 1.4.8

Author: rbgksqkr

next.config.mjs

@@ -50,7 +50,7 @@ export default withSentryConfig(withVanillaExtract(nextConfig), {
   silent: !process.env.CI,
 
   // 소스맵 확장 (빌드 시간 증가)
-  widenClientFileUpload: true,
+  widenClientFileUpload: isProd,
 
   // ad-blocker 방지를 위해 사용 (서버 비용 증가 시 제거)
   tunnelRoute: isProd,

src/apis/config/createBaseFetchClient.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { CustomError, NetworkError, UnhandledError } from './error';
+import { AuthError, CustomError, NetworkError, UnhandledError } from './error';
 import { APIErrorResponse, AuthErrorCode } from './types';
 import { getDefaultHeader, isAuthError } from './utils';
 
@@ -79,7 +79,16 @@ export const createBaseFetchClient = (options: BaseFetchClientOptions = {}) => {
             url,
           });
 
-          throw new CustomError({ code: apiError.code, status: response.status });
+          switch (apiError.code) {
+            case 'AU0001':
+            case 'AU0002':
+            case 'AU0003':
+            case 'AU0004':
+            case 'AU0005':
+              throw new AuthError({ code: apiError.code, status: response.status });
+            default:
+              throw new CustomError({ code: apiError.code, status: response.status });
+          }
         }
 
         return await response.json();
@@ -89,7 +98,7 @@ export const createBaseFetchClient = (options: BaseFetchClientOptions = {}) => {
           throw new NetworkError();
         }
 
-        if (error instanceof CustomError) {
+        if (error instanceof CustomError || error instanceof AuthError) {
           throw error;
         }
 

src/apis/config/error.ts

@@ -1,5 +1,5 @@
 import { ERROR_MESSAGES } from './constants';
-import { ErrorCode } from './types';
+import { AuthErrorCode, ErrorCode } from './types';
 
 export const SERVER_ERROR_STATUS = 500;
 export const NETWORK_ERROR_STATUS = 5001;
@@ -11,6 +11,10 @@ interface CustomErrorParams {
   message?: string;
 }
 
+interface AuthErrorParams extends Omit<CustomErrorParams, 'code'> {
+  code: AuthErrorCode;
+}
+
 export class CustomError extends Error {
   code: ErrorCode;
   status: number;
@@ -24,6 +28,19 @@ export class CustomError extends Error {
   }
 }
 
+export class AuthError extends Error {
+  code: AuthErrorCode;
+  status: number;
+  message: string;
+
+  constructor({ code, status, message }: AuthErrorParams) {
+    super();
+    this.code = code;
+    this.status = status;
+    this.message = message || ERROR_MESSAGES[code];
+  }
+}
+
 export class NetworkError extends Error {
   status = NETWORK_ERROR_STATUS;
   message = '네트워크가 불안정해요. 다시 시도해주세요!';

…PostSection/ExperimentPostSection.css.ts …tSection/ExperimentContentSection.css.tssrc/app/home/components/ExperimentPostSection/ExperimentPostSection.css.ts renamed to src/app/home/components/ExperimentContentSection/ExperimentContentSection.css.ts src/app/home/components/ExperimentPostSection/ExperimentPostSection.css.ts renamed to src/app/home/components/ExperimentContentSection/ExperimentContentSection.css.ts

@@ -1,8 +1,17 @@
-import { style } from '@vanilla-extract/css';
+import { keyframes, style } from '@vanilla-extract/css';
 
 import { colors } from '@/styles/colors';
 import { fonts } from '@/styles/fonts.css';
 
+const fadeIn = keyframes({
+  '0%': {
+    opacity: 0.3,
+  },
+  '100%': {
+    opacity: 1,
+  },
+});
+
 export const postContainerLayout = style({
   display: 'grid',
   gridTemplateRows: 'auto 1.6rem auto 1.6rem auto 0.6rem auto',
@@ -74,24 +83,10 @@ export const filterWrapper = style({
     'screen and (max-width: 767px)': {
       padding: '1.6rem',
       overflowX: 'auto',
-    },
-  },
-});
-
-export const recruitCheckLabel = style({
-  ...fonts.label.large.SB14,
-  color: colors.text06,
-});
 
-export const recruitCheckWrapper = style({
-  gridArea: 'checkbox',
-  display: 'flex',
-  alignItems: 'center',
-
-  '@media': {
-    'screen and (max-width: 767px)': {
-      padding: '0.4rem 1.6rem',
-      justifyContent: 'flex-end',
+      '::-webkit-scrollbar': {
+        display: 'none',
+      },
     },
   },
 });
@@ -100,6 +95,7 @@ export const totalPostCountWrapper = style({
   gridArea: 'count',
   display: 'flex',
   alignItems: 'center',
+  animation: `${fadeIn} 0.2s ease-out`,
 
   '@media': {
     'screen and (max-width: 767px)': {
@@ -109,11 +105,6 @@ export const totalPostCountWrapper = style({
   },
 });
 
-export const totalPostCount = style({
-  ...fonts.label.large.R14,
-  color: colors.text03,
-});
-
-export const postListContainer = style({
+export const postListWrapper = style({
   gridArea: 'posts',
 });

src/app/home/components/ExperimentContentSection/ExperimentContentSection.tsx

@@ -0,0 +1,60 @@
+import { Suspense } from 'react';
+
+import {
+  postContainerLayout,
+  postContainerTitleDesktop,
+  horizontalLineMobile,
+  filterWrapper,
+  totalPostCountWrapper,
+  postListWrapper,
+} from './ExperimentContentSection.css';
+import ExperimentPostSection from '../ExperimentPostSection/ExperimentPostSection';
+import ExperimentPostTotalCount from '../ExperimentPostTotalCount/ExperimentPostTotalCount';
+import FilterSection from '../FilterSection/FilterSection';
+import RecruitStatusCheckbox from '../RecruitStatusCheckbox/RecruitStatusCheckbox';
+
+import { ExperimentPostListFilters } from '@/apis/post';
+import FilterSkeleton from '@/components/Skeleton/FilterSkeleton/FilterSkeleton';
+import PostListSkeleton from '@/components/Skeleton/PostListSkeleton/PostListSkeleton';
+import TotalCountSkeleton from '@/components/Skeleton/TotalCountSkeleton/TotalCountSkeleton';
+
+interface ExperimentContentSectionProps {
+  searchParams: {
+    [k in keyof ExperimentPostListFilters]?: string;
+  };
+}
+
+const ExperimentContentSection = ({ searchParams }: ExperimentContentSectionProps) => {
+  return (
+    <section className={postContainerLayout}>
+      <h2 className={postContainerTitleDesktop}>공고를 확인해 보세요</h2>
+      <div className={horizontalLineMobile} />
+
+      {/* 필터링 */}
+      <div className={filterWrapper}>
+        <Suspense fallback={<FilterSkeleton />}>
+          <FilterSection searchParams={searchParams} />
+        </Suspense>
+      </div>
+
+      {/* 모집 중인 공고만 보기 */}
+      <RecruitStatusCheckbox />
+
+      {/* 총 공고 개수 */}
+      <div className={totalPostCountWrapper}>
+        <Suspense fallback={<TotalCountSkeleton />}>
+          <ExperimentPostTotalCount searchParams={searchParams} />
+        </Suspense>
+      </div>
+
+      {/* 공고 목록 */}
+      <div className={postListWrapper}>
+        <Suspense fallback={<PostListSkeleton />}>
+          <ExperimentPostSection searchParams={searchParams} />
+        </Suspense>
+      </div>
+    </section>
+  );
+};
+
+export default ExperimentContentSection;

…dList/EmptyPostCard/EmptyPostCard.css.ts …dList/EmptyPostCard/EmptyPostCard.css.tssrc/app/home/components/ExperimentPostSection/ExperimentPostCardListContainer/ExperimentPostCardList/EmptyPostCard/EmptyPostCard.css.ts renamed to src/app/home/components/ExperimentPostCardListContainer/ExperimentPostCardList/EmptyPostCard/EmptyPostCard.css.ts src/app/home/components/ExperimentPostSection/ExperimentPostCardListContainer/ExperimentPostCardList/EmptyPostCard/EmptyPostCard.css.ts renamed to src/app/home/components/ExperimentPostCardListContainer/ExperimentPostCardList/EmptyPostCard/EmptyPostCard.css.ts

@@ -1,4 +1,4 @@
-import { style, styleVariants } from '@vanilla-extract/css';
+import { keyframes, style, styleVariants } from '@vanilla-extract/css';
 
 import { colors } from '@/styles/colors';
 import { fonts } from '@/styles/fonts.css';
@@ -23,6 +23,15 @@ export const textEllipsis = styleVariants({
   },
 });
 
+const fadeIn = keyframes({
+  '0%': {
+    opacity: 0.3,
+  },
+  '100%': {
+    opacity: 1,
+  },
+});
+
 export const postCardLayout = style({
   position: 'relative',
   display: 'grid',
@@ -42,6 +51,7 @@ export const postCardLayout = style({
   padding: '1.6rem 2rem',
   borderRadius: '1.2rem',
   backgroundColor: colors.field01,
+  animation: `${fadeIn} 0.2s ease-out`,
 
   selectors: {
     '&:hover': {