[merge] v0.0.38 release

.github/workflows/nextjs-prod-CI.yml

@@ -30,6 +30,13 @@ jobs:
           node-version: '18'
           cache: 'npm'
 
+      - name: Create .env.local file
+        run: |
+          echo "NEXT_PUBLIC_SERVER_URL=${{ secrets.NEXT_PUBLIC_SERVER_URL }}" >> .env.local
+          echo "NEXTAUTH_SECRET=${{ secrets.NEXTAUTH_SECRET }}" >> .env.local
+          echo "NEXTAUTH_URL=${{ secrets.NEXTAUTH_URL }}" >> .env.local
+          echo "NEXT_PUBLIC_KAKAO_API_KEY=${{ secrets.NEXT_PUBLIC_KAKAO_API_KEY }}" >> .env.local
+
       - name: Install dependencies
         run: |
           npm ci
@@ -41,11 +48,6 @@ jobs:
 
       - name: Build Next.js app
         run: npm run build
-        env:
-          NEXT_PUBLIC_SERVER_URL: ${{ secrets.NEXT_PUBLIC_SERVER_URL }}
-          NEXTAUTH_SECRET: ${{ secrets.NEXTAUTH_SECRET }}
-          NEXTAUTH_URL: ${{ secrets.NEXTAUTH_URL }}
-          NEXT_PUBLIC_KAKAO_API_KEY: ${{ secrets.NEXT_PUBLIC_KAKAO_API_KEY }}
 
       - name: Get latest tag and create new tag
         id: create_tag
@@ -99,11 +101,6 @@ jobs:
             ${{ env.PROJECT_NAME }}.kr-central-2.kcr.dev/${{ env.REPOSITORY_NAME }}/${{ env.IMAGE_NAME }}:latest
           cache-from: type=gha
           cache-to: type=gha,mode=max
-          build-args: |
-            NEXT_PUBLIC_SERVER_URL=${{ secrets.NEXT_PUBLIC_SERVER_URL }}
-            NEXTAUTH_SECRET=${{ secrets.NEXTAUTH_SECRET }}
-            NEXTAUTH_URL=${{ secrets.NEXTAUTH_URL }}
-            NEXT_PUBLIC_KAKAO_API_KEY: ${{ secrets.NEXT_PUBLIC_KAKAO_API_KEY }}
 
       - name: Create Release
         uses: actions/create-release@v1
@@ -114,4 +111,4 @@ jobs:
           release_name: Release ${{ steps.create_tag.outputs.NEW_TAG }}
           draft: false
           prerelease: false
-          token: ${{ secrets.PAT }}
+          token: ${{ secrets.PAT }}

.github/workflows/pr-CI.yml

@@ -0,0 +1,51 @@
+name: CI for PRs to develop and main
+
+on:
+  pull_request:
+    branches:
+      - develop
+      - main
+
+permissions:
+  contents: write
+
+env:
+  PROJECT_NAME: dkation
+  REPOSITORY_NAME: dkation-prod-front
+  IMAGE_NAME: dkation-prod-fe
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: |
+          npm ci
+          npm install -g npm@latest
+          npm install sharp
+
+      - name: Lint
+        run: npm run lint
+
+      - name: Build Next.js app
+        run: npm run build
+        env:
+          NEXT_PUBLIC_SERVER_URL: ${{ secrets.NEXT_PUBLIC_SERVER_URL }}
+          NEXTAUTH_SECRET: ${{ secrets.NEXTAUTH_SECRET }}
+          NEXTAUTH_URL: ${{ secrets.NEXTAUTH_URL }}
+          NEXT_PUBLIC_KAKAO_API_KEY: ${{ secrets.NEXT_PUBLIC_KAKAO_API_KEY }}
+
+      - name: Test Build Output
+        run: test -d .next

Dockerfile

@@ -25,19 +25,17 @@ FROM node:18-alpine AS runner
 # Set working directory
 WORKDIR /app
 
-ARG NEXT_PUBLIC_SERVER_URL
-ARG NEXTAUTH_SECRET
-ARG NEXTAUTH_URL
-ARG NEXT_PUBLIC_KAKAO_API_KEY
-
-ENV NEXT_PUBLIC_SERVER_URL=${NEXT_PUBLIC_SERVER_URL}
-ENV NEXTAUTH_SECRET=${NEXTAUTH_SECRET}
-ENV NEXTAUTH_URL=${NEXTAUTH_URL}
-ENV NEXT_PUBLIC_KAKAO_API_KEY=${NEXT_PUBLIC_KAKAO_API_KEY}
-
 # Set node environment to production
 ENV NODE_ENV=production
 
+# Set timezone to KST
+ENV TZ=Asia/Seoul
+
+# Install tzdata package and set timezone
+RUN apk add --no-cache tzdata && \
+    cp /usr/share/zoneinfo/$TZ /etc/localtime && \
+    echo $TZ > /etc/timezone
+
 # Add a non-root user
 RUN addgroup --system --gid 1001 nodejs
 RUN adduser --system --uid 1001 nextjs
@@ -51,6 +49,9 @@ COPY --from=builder /app/package.json ./package.json
 COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
 COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
 
+# Copy the .env.local file
+COPY --from=builder /app/.env.local ./
+
 # Set the correct permission for prerender cache
 RUN mkdir -p .next
 RUN chown nextjs:nodejs .next

src/app/(route)/(user)/(with-layout)/mypage/review/[id]/page.tsx

@@ -13,6 +13,7 @@ import UserModalAtom from '@/_components/user/common/atoms/UserModalAtom';
 import ReviewWktInfo from '@/_components/user/mypage/ReviewWktInfo';
 import UserLoading from '@/_components/user/userLoading';
 import NetworkError from '@/_components/common/networkError';
+import { ErrorIcon } from '@/_assets/icons';
 
 interface UserReviewDetailPageProps {
   params: {
@@ -55,11 +56,20 @@ const UserReviewDetailPage = ({ params }: UserReviewDetailPageProps) => {
             ) : null
           ) : (
             <>
-              <div className="flex flex-col gap-y-7 py-8">
-                <p className="mb-4 text-h2 font-semibold">
-                  이번 워케이션 장소 어때요?
-                </p>
-                <RatingStar readonly rating={data.reviewDetailInfo.rating} />
+              <div>
+                {data.reviewDetailInfo.blindedType &&
+                  data.reviewDetailInfo.blindedType === 'TRUE' && (
+                    <div className="flex items-center gap-x-1.5 text-negative">
+                      <Image src={ErrorIcon} alt="error" />
+                      관리자에 의해 블라인드 처리된 후기입니다.
+                    </div>
+                  )}
+                <div className="flex flex-col gap-y-7 pb-8 pt-4">
+                  <p className="mb-4 text-h2 font-semibold">
+                    이번 워케이션 장소 어때요?
+                  </p>
+                  <RatingStar readonly rating={data.reviewDetailInfo.rating} />
+                </div>
               </div>
 
               <div className="flex flex-col">

src/app/(route)/(user)/(with-layout)/mypage/wk-history/page.tsx

@@ -1,12 +1,12 @@
 'use client';
 
-import React, { useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { useRouter } from 'next/navigation';
 import dayjs from 'dayjs';
+import InfiniteScroll from 'react-infinite-scroller';
 import { usePatchWktStatusMutation } from '@/_hooks/user/usePatchWktStatusMutation';
 import UserFilteringSectionContainer from '@/_components/user/common/containers/UserFilteringSectionContainer';
 import UserStateFilteringContainer from '@/_components/user/common/containers/UserStateFilteringContainer';
-import UserPlaceFilteringContainer from '@/_components/user/common/containers/UserPlaceFilteringContainer';
 import WorkationCard from '@/_components/user/mypage/UserWktCard';
 import { useGetMyWktHistoryQuery } from '@/_hooks/user/useGetMyWktHistoryQuery';
 import UserWktCancelModal from '@/_components/user/mypage/UserWktCancelModal';
@@ -15,12 +15,13 @@ import { useDeleteWktApplyMutation } from '@/_hooks/user/useDeleteWktApplyMutati
 import { useSession } from 'next-auth/react';
 import UserLoading from '@/_components/user/userLoading';
 import NetworkError from '@/_components/common/networkError';
+import UserDatePickerContainer from '@/_components/user/common/containers/UserDatePickerContainer';
+import { DatePickerTagType } from '@/_types/commonType';
 
 const UserWkHistoryPage = () => {
   const router = useRouter();
   const session = useSession();
   const accountId = String(session.data?.accountId || '');
-  const [currentPage, setCurrentPage] = useState(1);
   const [startDate, setStartDate] = useState<Date | null>(null);
   const [endDate, setEndDate] = useState<Date | null>(null);
   const [param, setParam] = useState<{
@@ -43,9 +44,9 @@ const UserWkHistoryPage = () => {
   const [isFilteringSectionOpen, setIsFilteringSectionOpen] = useState<
     'FILTER' | 'ORDER' | null
   >(null);
-  const [selectedState, setSelectedState] = useState<string>('ALL');
+  const [selectedState, setSelectedState] = useState<string>('');
   const [selectedOrder, setSelectedOrder] = useState<string>('createdAt,DESC');
-  const [selectedSpace, setSelectedSpace] = useState<string[]>(['양양 쏠비치']);
+  const [selectedTag, setSelectedTag] = useState<DatePickerTagType>('ALL');
   const [selectedWorkationId, setSelectedWorkationId] = useState<number | null>(
     null,
   );
@@ -59,22 +60,27 @@ const UserWkHistoryPage = () => {
     | null
   >(null);
 
-  const { data, isLoading, isError } = useGetMyWktHistoryQuery({
-    // statuses: param.type.join(','),
-    startDate: startDate
-      ? dayjs(startDate).format('YYYY-MM-DDTHH:mm:ss')
-      : undefined,
-    endDate: endDate ? dayjs(endDate).format('YYYY-MM-DDTHH:mm:ss') : undefined,
-    pageParam: {
-      page: currentPage,
-      size: 10,
-      sort: `createdAt,${param.order}`,
-    },
-  });
+  const { data, isLoading, isError, fetchNextPage, hasNextPage, refetch } =
+    useGetMyWktHistoryQuery({
+      statuses: param.type.join(','),
+      startDate: startDate
+        ? dayjs(startDate).format('YYYY-MM-DDTHH:mm:ss')
+        : undefined,
+      endDate: endDate
+        ? dayjs(endDate).format('YYYY-MM-DDTHH:mm:ss')
+        : undefined,
+      pageable: {
+        page: 1,
+        size: 10,
+        sort: selectedOrder,
+      },
+    });
 
   const { mutate: patchWktStatus } = usePatchWktStatusMutation({
     wktId: selectedWorkationId || 0,
-    successCallback: () => {},
+    successCallback: () => {
+      refetch();
+    },
     errorCallback: (error) => {
       alert(`에러가 발생했습니다 : ${error.message}`);
     },
@@ -84,6 +90,7 @@ const UserWkHistoryPage = () => {
     successCallback: () => {
       alert('신청이 취소되었습니다.');
       setIsCancelModalOpen(false);
+      refetch();
     },
     errorCallback: (error) => {
       alert(`에러가 발생했습니다 : ${error.message}`);
@@ -140,6 +147,40 @@ const UserWkHistoryPage = () => {
     setConfirmModalType(null);
   };
 
+  const updateParam = useCallback(() => {
+    setParam((prev) => ({
+      ...prev,
+      type: selectedState ? [selectedState] : prev.type,
+      order: selectedOrder,
+      startDate: startDate
+        ? dayjs(startDate).format('YYYY-MM-DDTHH:mm:ss')
+        : null,
+      endDate: endDate ? dayjs(endDate).format('YYYY-MM-DDTHH:mm:ss') : null,
+    }));
+  }, [selectedState, selectedOrder, startDate, endDate]);
+
+  const refreshHandler = () => {
+    setParam({
+      order: 'DESC',
+      type: [
+        'APPLIED',
+        'RAFFLE_WAIT',
+        'NO_WINNING',
+        'CONFIRM_WAIT',
+        'CANCEL',
+        'CONFIRM',
+        'WAIT',
+        'VISITED',
+      ],
+    });
+    setStartDate(null);
+    setEndDate(null);
+  };
+
+  useEffect(() => {
+    updateParam();
+  }, [selectedState, selectedOrder, startDate, endDate, updateParam]);
+
   return (
     <section className="px-40 pt-18">
       <div className="flex flex-col gap-y-14">
@@ -155,19 +196,22 @@ const UserWkHistoryPage = () => {
               isFilterOpen: isFilteringSectionOpen === 'FILTER',
               filterChildren: (
                 <>
+                  <UserDatePickerContainer
+                    selectedTag={selectedTag}
+                    onClickTag={(tag) => setSelectedTag(tag)}
+                    startDate={startDate}
+                    setStartDate={setStartDate}
+                    endDate={endDate}
+                    setEndDate={setEndDate}
+                  />
                   <UserStateFilteringContainer
                     type="MYPAGE"
                     selectedOption={selectedState}
                     onClickOption={setSelectedState}
                   />
-                  <UserPlaceFilteringContainer
-                    places={['양양 쏠비치', '양양 쏠비치2', '양양 쏠비치3']}
-                    clickedPlace={selectedSpace}
-                    onClickPlace={setSelectedSpace}
-                  />
                 </>
               ),
-              onRefresh: () => {},
+              onRefresh: refreshHandler,
             }}
             orderOption={{
               onClickOrder: () => {
@@ -193,30 +237,45 @@ const UserWkHistoryPage = () => {
           ) : (
             <NetworkError />
           )
-        ) : data.pageInfo.totalElements <= 0 ? (
-          <NetworkError />
+        ) : data.pages.length === 0 ||
+          data.pages[0].applyInfoList.length <= 0 ? (
+          <p className="py-20 text-center text-sub-300">
+            내역이 존재하지 않습니다
+          </p>
         ) : (
-          data?.applyInfoList.map((wkt) => (
-            <WorkationCard
-              applyId={wkt.applyId}
-              accountId={accountId}
-              reviewId={wkt.reviewId}
-              key={wkt.wktId}
-              wktId={wkt.wktId}
-              thumbnailUrl={wkt.thumbnailUrl}
-              wktName={wkt.wktName}
-              place={wkt.place}
-              totalRecruit={wkt.totalRecruit}
-              applyStartDate={wkt.applyStartDate}
-              applyEndDate={wkt.applyEndDate}
-              startDate={wkt.startDate}
-              endDate={wkt.endDate}
-              bettingPoint={wkt.bettingPoint}
-              applyStatusType={wkt.applyStatusType}
-              waitingNumber={wkt.waitNumber} // 수정 필요
-              onClick={() => handleCardClick(wkt.applyStatusType, wkt.wktId)}
-            />
-          ))
+          <InfiniteScroll
+            loadMore={() => fetchNextPage()}
+            hasMore={hasNextPage}
+            loader={<UserLoading key={0} />}
+            useWindow
+          >
+            {data.pages.map((page) =>
+              page.applyInfoList.map((wkt) => (
+                <WorkationCard
+                  refetch={refetch}
+                  applyId={wkt.applyId}
+                  accountId={accountId}
+                  reviewId={wkt.reviewId}
+                  key={wkt.wktId}
+                  wktId={wkt.wktId}
+                  thumbnailUrl={wkt.thumbnailUrl}
+                  wktName={wkt.wktName}
+                  place={wkt.place}
+                  totalRecruit={wkt.totalRecruit}
+                  applyStartDate={wkt.applyStartDate}
+                  applyEndDate={wkt.applyEndDate}
+                  startDate={wkt.startDate}
+                  endDate={wkt.endDate}
+                  bettingPoint={wkt.bettingPoint}
+                  applyStatusType={wkt.applyStatusType}
+                  waitingNumber={wkt.waitNumber}
+                  onClick={() =>
+                    handleCardClick(wkt.applyStatusType, wkt.wktId)
+                  }
+                />
+              )),
+            )}
+          </InfiniteScroll>
         )}
       </div>