Merge pull request #70 from Chaellimi/feat/#69

[Feat/#69] 챌린지 관련 API 연동

Author: Jamkris

next.config.ts

@@ -14,7 +14,14 @@ const nextConfig: NextConfig = {
   },
   serverExternalPackages: ['sequelize', 'mysql2'],
   images: {
-    domains: ['www.google.com', 'img.freepik.com', 'i.pinimg.com'],
+    domains: [
+      'www.google.com',
+      'img.freepik.com',
+      'i.pinimg.com',
+      'lh3.googleusercontent.com',
+      'chaellimi.jamkris.kro.kr',
+      'localhost',
+    ],
   },
   reactStrictMode: true,
   output: 'standalone',

package.json

@@ -26,9 +26,13 @@
     ]
   },
   "dependencies": {
+    "@tanstack/react-query": "^5.80.7",
+    "@tanstack/react-query-devtools": "^5.80.7",
+    "axios": "^1.10.0",
     "classnames": "^2.5.1",
     "dotenv": "^16.5.0",
     "framer-motion": "^12.7.4",
+    "html2canvas": "^1.4.1",
     "mysql2": "^3.14.0",
     "next": "15.3.0",
     "next-auth": "^4.24.11",

public/icons/shared/SpinLogo.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+
+interface SpinLogoProps {
+  animationDuration?: string;
+  width?: number;
+  height?: number;
+}
+
+const SpinLogo = ({ animationDuration, width, height }: SpinLogoProps) => {
+  return (
+    <div
+      className="animate-spin"
+      style={{ animationDuration: animationDuration || '2s' }}
+    >
+      <svg
+        width={width || '105'}
+        height={height || '94'}
+        viewBox="0 0 105 94"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M69.1718 50.4851L69.4754 50.475C69.6823 50.475 69.7 50.7191 69.4946 50.7441C56.075 52.3784 48.8381 36.0257 60.146 26.9927L74.3144 18.784C75.6349 18.019 76.1527 16.7738 75.4893 15.3994C74.6761 13.7149 73.4803 11.4404 72.687 9.93165C72.3059 9.20674 72.0177 8.65861 71.9095 8.4376C65.0088 -5.6646 44.7511 -1.3039 46.1153 15.6784C46.1228 15.7718 46.01 15.8309 45.9438 15.7647L44.0185 13.8394C33.99 1.6997 14.5064 12.1474 21.1162 29.4992C21.1489 29.5851 21.0578 29.6718 20.9753 29.6312C9.39574 23.9326 -1.58366 30.665 0.189138 44.4414C0.694538 48.3845 2.03424 52.5609 3.71164 56.2677C4.40056 57.4625 5.07138 58.6463 5.73514 59.8177C10.6924 68.5661 15.2562 76.6201 24.0278 83.357C61.3611 112.033 115.845 78.197 102.888 32.9321C99.135 19.8457 92.811 14.0568 78.028 18.58C73.8019 20.8471 66.4087 24.8351 62.5808 27.6286C54.239 33.7171 55.1658 44.8754 63.329 49.3983C65.0924 50.3753 67.157 50.5526 69.1718 50.4851Z"
+          fill="#FF6A00"
+        />
+      </svg>
+    </div>
+  );
+};
+
+export default SpinLogo;

public/icons/shared/index.ts

@@ -6,3 +6,4 @@ export { default as ShareIcon } from './Share';
 export { default as EditIcon } from './Edit';
 export { default as TrashIcon } from './Trash';
 export { default as BookmarkIcon } from './Bookmark';
+export { default as SpinLogo } from './SpinLogo';

src/app/api/apitest/route.ts

@@ -12,9 +12,9 @@ async function handler() {
         data: {},
       })
     );
-  } catch (error) {
-    logger.error('API Test handler error:', { error });
-    return NextResponse.json(resUtil.unknownError);
+  } catch (err) {
+    logger.error('API Test handler error:', { err });
+    return resUtil.unknownError({ data: { err } });
   }
 }
 

src/app/api/challenge/Challenge.ts

@@ -3,6 +3,6 @@ export interface ChallengeData {
   description: string;
   category: string;
   difficulty: 'easy' | 'normal' | 'hard';
-  day: string;
+  day: number;
   imgURL: string;
 }

src/app/api/challenge/[id]/join/route.ts

@@ -0,0 +1,63 @@
+import { withAuth } from '@/lib/middleware/withAuth';
+import { withLogging } from '@/lib/middleware/withLogging';
+import { NextRequest } from 'next/server';
+import Challenge from '@/database/models/Challenge';
+import ChallengeParticipants from '@/database/models/ChallengeParticipants';
+import resUtil from '@/lib/utils/responseUtil';
+import getUserFromRequest from '@/lib/utils/getUserFromRequest';
+
+async function joinHandler(req: NextRequest) {
+  try {
+    const challengeId = Number(req.nextUrl.pathname.split('/')[3]);
+    if (!challengeId) {
+      return resUtil.successFalse({
+        status: 400,
+        message: '챌린지 ID가 제공되지 않았습니다',
+      });
+    }
+
+    const challenge = await Challenge.findByPk(challengeId);
+    if (!challenge) {
+      return resUtil.successFalse({
+        status: 404,
+        message: '해당 챌린지를 찾을 수 없습니다',
+      });
+    }
+
+    const user = await getUserFromRequest();
+
+    if (!user) {
+      return resUtil.unauthorized({});
+    }
+
+    const alreadyJoined = await ChallengeParticipants.findOne({
+      where: { challengeId, userId: user.id },
+    });
+
+    if (alreadyJoined) {
+      return resUtil.successFalse({
+        status: 409,
+        message: '이미 참여 중인 챌린지입니다',
+      });
+    }
+
+    await ChallengeParticipants.create({
+      userId: user.id,
+      challengeId,
+      joinedAt: new Date().toISOString(),
+      streak: '0',
+      status: 'active',
+    });
+
+    return resUtil.successTrue({
+      status: 201,
+      message: '챌린지 참여 완료',
+    });
+  } catch (err) {
+    return resUtil.unknownError({ data: { err } });
+  }
+}
+
+const JoinChallenge = withLogging(withAuth(joinHandler));
+
+export const POST = JoinChallenge;

src/app/api/challenge/[id]/route.ts

@@ -0,0 +1,94 @@
+import { withAuth } from '@/lib/middleware/withAuth';
+import { withLogging } from '@/lib/middleware/withLogging';
+import { NextRequest } from 'next/server';
+import { Op } from 'sequelize';
+import Challenge from '@/database/models/Challenge';
+import Users from '@/database/models/User';
+import ChallengeParticipants from '@/database/models/ChallengeParticipants';
+import resUtil from '@/lib/utils/responseUtil';
+import getUserFromRequest from '@/lib/utils/getUserFromRequest';
+
+async function getHandler(req: NextRequest) {
+  try {
+    const challengeId = Number(req.nextUrl.pathname.split('/')[3]);
+    if (!challengeId) {
+      return resUtil.successFalse({
+        status: 400,
+        message: '챌린지 ID가 제공되지 않았습니다',
+      });
+    }
+
+    const challenge = await Challenge.findOne({
+      where: { id: challengeId },
+      include: [
+        {
+          model: Users,
+          as: 'User',
+          attributes: ['name', 'profileImg'],
+        },
+      ],
+    });
+
+    if (!challenge) {
+      return resUtil.successFalse({
+        status: 404,
+        message: '해당 챌린지를 찾을 수 없습니다',
+      });
+    }
+
+    const userId = challenge.userId;
+
+    const totalChallenges = await Challenge.count({
+      where: { userId },
+    });
+
+    const recentChallenges = await Challenge.findAll({
+      where: {
+        userId,
+        id: { [Op.ne]: challengeId },
+      },
+      order: [['createdAt', 'DESC']],
+      limit: 6,
+    });
+
+    const loginUser = await getUserFromRequest();
+
+    let joinStatus: 'not_joined' | 'in_progress' | 'completed' | 'failed' =
+      'not_joined';
+
+    if (loginUser) {
+      const participant = await ChallengeParticipants.findOne({
+        where: {
+          challengeId,
+          userId: loginUser.id,
+        },
+      });
+
+      if (participant) {
+        if (participant.status === 'completed') {
+          joinStatus = 'completed';
+        } else if (participant.status === 'failed') {
+          joinStatus = 'failed';
+        } else {
+          joinStatus = 'in_progress';
+        }
+      }
+    }
+
+    return resUtil.successTrue({
+      status: 200,
+      message: '챌린지 조회 성공',
+      data: {
+        challenge,
+        totalChallenges,
+        recentChallenges,
+        joinStatus,
+      },
+    });
+  } catch (err) {
+    return resUtil.unknownError({ data: { err } });
+  }
+}
+
+const GetChallengeById = withLogging(withAuth(getHandler));
+export const GET = GetChallengeById;

src/app/api/challenge/controllers/createChallenge.ts

@@ -50,9 +50,8 @@ async function postHandler(req: NextRequest) {
       message: '챌린지 생성 성공',
       data: newChallenge,
     });
-  } catch (error) {
-    console.error(error);
-    return resUtil.unknownError({});
+  } catch (err) {
+    return resUtil.unknownError({ data: { err } });
   }
 }
 

src/app/api/challenge/controllers/getChallenge.ts

@@ -4,6 +4,7 @@ import { NextRequest } from 'next/server';
 import Challenge from '@/database/models/Challenge';
 import resUtil from '@/lib/utils/responseUtil';
 import { Op } from 'sequelize';
+import Users from '@/database/models/User';
 
 async function getHandler(req: NextRequest) {
   try {
@@ -68,7 +69,16 @@ async function getHandler(req: NextRequest) {
       queryOptions.offset = offset;
     }
 
-    const challenges = await Challenge.findAll(queryOptions);
+    const challenges = await Challenge.findAll({
+      ...queryOptions,
+      include: [
+        {
+          model: Users,
+          as: 'User',
+          attributes: ['name', 'profileImg'],
+        },
+      ],
+    });
 
     return resUtil.successTrue({
       status: 200,
@@ -81,8 +91,8 @@ async function getHandler(req: NextRequest) {
             : null,
       },
     });
-  } catch {
-    return resUtil.unknownError({});
+  } catch (err) {
+    return resUtil.unknownError({ data: { err } });
   }
 }