Merge pull request #163 from KNU-HAEDAL/develop

개발 진행상황 합치기

.github/workflow/ci.yml

@@ -0,0 +1,26 @@
+name: ESLint test
+
+on:
+  pull_request:
+    branches:
+      - main
+      - develop
+  workflow_dispatch:
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout Code
+        uses: actions/checkout@v4
+
+      - name: Install Pnpm package manager
+        run: |
+          npm install -g pnpm
+
+      - name: Install Dependencies
+        run: pnpm install
+
+      - name: Lint Code
+        run: pnpm lint

src/apis/challenge-list/getChallengeList.api.ts

@@ -0,0 +1,27 @@
+import { ChallengeListResponse } from './getChallengeList.response';
+import { axiosClient } from '@/apis/AxiosClient';
+import { useQuery } from '@tanstack/react-query';
+
+const getChallengeListPath = () => '/api/challengeGroups/shorts';
+
+const challengeListQueryKey = [getChallengeListPath()];
+
+const getChallengeList = async (
+  page: number,
+  size: number
+): Promise<ChallengeListResponse> => {
+  const response = await axiosClient.get(getChallengeListPath(), {
+    params: {
+      page,
+      size,
+    },
+  });
+  return response.data;
+};
+
+export const useGetChallengeList = (page: number, size: number) => {
+  return useQuery<ChallengeListResponse, Error>({
+    queryKey: [challengeListQueryKey, page, size],
+    queryFn: () => getChallengeList(page, size),
+  });
+};

src/apis/challenge-list/getChallengeList.response.ts

@@ -0,0 +1,17 @@
+import ApiResponse from '@/apis/ApiResponse';
+
+export type ChallengeListData = {
+  totalPage: number;
+  hasNext: boolean;
+  data: {
+    id: number;
+    title: string;
+    content: string;
+    participantCount: number;
+    startDate: string;
+    endDate: string;
+    category: 'HEALTH' | 'ECHO' | 'SHARE' | 'VOLUNTEER' | 'ETC';
+  }[];
+};
+
+export type ChallengeListResponse = ApiResponse<ChallengeListData>;

src/apis/review/review.api.ts

@@ -3,7 +3,6 @@ import { AxiosError } from 'axios';
 import { axiosClient } from '../AxiosClient';
 import type {
   GetReviewResponse,
-  PostReviewData,
   ChallengeAvgScoreData,
 } from './review.response';
 
@@ -65,31 +64,30 @@ type PostReviewParams = {
   challengeId: number;
   content: string;
   rating: number;
+  difficulty: number | undefined;
+  achievement: number | undefined;
 };
 
 export async function postReview({
   challengeId,
   content,
   rating,
-}: PostReviewParams): Promise<PostReviewData> {
-  const body = { content, rating };
-  // console.log('json : ', JSON.stringify(body));
+  difficulty,
+  achievement,
+}: PostReviewParams): Promise<void> {
+  const requestBody = { content, rating, difficulty, achievement };
 
   try {
     const response = await axiosClient.post(
       `/api/challenges/${challengeId}/reviews`,
-      body
+      requestBody
     );
     console.log('postReview response: ', response.data);
-
-    return response.data.data;
   } catch (error) {
-    if (error instanceof AxiosError) {
-      throw new Error(
-        `postReview error: ${error.response?.data.message || error.message}`
-      );
-    } else {
-      throw new Error('postReview error: unexpected');
+    if (error instanceof AxiosError && error.response) {
+      throw error.response.data;
     }
+    // AxiosError가 아닌 경우 일반적인 예외 처리
+    throw new Error('postReview error: unexpected');
   }
 }

src/apis/review/review.response.ts

@@ -20,6 +20,9 @@ export type ReviewData = {
   user: User;
   content: string;
   rating: number;
+  difficulty: number;
+  achievement: number;
+  createdAt: string;
 };
 
 export const DummyReviewList: ReviewData[] = [
@@ -40,6 +43,9 @@ export const DummyReviewList: ReviewData[] = [
     content:
       '매일 매일 꾸준히 했더니 습관이 형성되었어요. 습관도 만들고 포인트도 얻고 좋아요 굿',
     rating: 4,
+    difficulty: 1,
+    achievement: 1,
+    createdAt: '2024-09-26T21:16:18',
   },
 ];
 
@@ -53,5 +59,3 @@ export type ChallengeAvgScoreData = {
 };
 
 //
-
-export type PostReviewData = number;

src/components/common/chip/index.tsx

@@ -0,0 +1,14 @@
+import styled from '@emotion/styled';
+
+export const Chip = styled.div<{ margin?: string; color?: string }>`
+  padding: 4px 12px;
+  border-radius: 50px;
+  border: ${({ color }) =>
+    color ? `${color} 0.5px solid` : `var(--color-green-01) 0.5px solid`};
+  background-color: var(--color-white);
+  color: ${({ color }) => (color ? color : `var(--color-green-01)`)};
+  font-size: var(--font-size-xs);
+  font-weight: 600;
+  text-align: center;
+  margin: ${({ margin }) => (margin ? `${margin}` : null)};
+`;

src/components/common/profile-image/index.tsx

@@ -0,0 +1,14 @@
+import UserImage from '@/assets/UserImage.svg';
+import styled from '@emotion/styled';
+
+export const ProfileImage = styled.div<{ size?: number; src?: string }>`
+  width: ${({ size }) => (size ? `${size}rem` : '3rem')};
+  height: ${({ size }) => (size ? `${size}rem` : '3rem')};
+  aspect-ratio: 1 / 1;
+  border-radius: 50%;
+
+  background-image: url(${({ src }) => src || UserImage});
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+`;

src/components/common/star-rating/index.tsx

@@ -5,51 +5,69 @@ import styled from '@emotion/styled';
 interface StarRatingProps {
   rating: number;
   size?: number;
+  onClick?: (rating: number) => void;
 }
 
-export const StarRating = ({ rating, size = 24 }: StarRatingProps) => {
-  // rating(별점)을 백분율로 변환
-  const [ratingToPercent, setRatingToPercent] = useState<string>(`0%`);
+export const StarRating = ({ rating, size = 24, onClick }: StarRatingProps) => {
+  const [ratingToPercent, setRatingToPercent] = useState<number>(0);
 
   useEffect(() => {
     if (rating !== undefined) {
-      setRatingToPercent(`${(rating / 5) * 100}%`);
+      setRatingToPercent((rating / 5) * 100);
     }
   }, [rating]);
 
+  const handleClick = (rating: number) => {
+    if (onClick) {
+      onClick(rating + 1); // 클릭한 별점 값 전달 (1부터 시작)
+    }
+  };
+
   return (
     <Wrapper size={size}>
-      <StarFill style={{ width: ratingToPercent }}>
+      <FilledStars ratingToPercent={ratingToPercent}>
         {[...Array(5)].map((_, index) => (
-          <span key={`fill-${index}`}>★</span>
+          <Star key={`fill-${index}`} onClick={() => handleClick(index)}>
+            ★
+          </Star>
         ))}
-      </StarFill>
-      <StarBase>
+      </FilledStars>
+      <BaseStars>
         {[...Array(5)].map((_, index) => (
-          <span key={`base-${index}`}>★</span>
+          <Star key={`base-${index}`} onClick={() => handleClick(index)}>
+            ★
+          </Star>
         ))}
-      </StarBase>
+      </BaseStars>
     </Wrapper>
   );
 };
 
-const Wrapper = styled.div<{ size: number }>`
+const Wrapper = styled.div<{ size: number; cursor?: string }>`
   position: relative;
   unicode-bidi: bidi-override;
   width: max-content;
   -webkit-text-fill-color: transparent;
   -webkit-text-stroke-width: 0.8px;
   -webkit-text-stroke-color: var(--color-green-01);
   font-size: ${({ size }) => `${size}px`};
+  cursor: ${({ cursor }) => cursor && 'pointer'};
 `;
 
-const StarFill = styled.div`
+const FilledStars = styled.div<{ ratingToPercent: number }>`
   position: absolute;
   display: flex;
   top: 0;
   left: 0;
+  width: ${({ ratingToPercent }) => `${ratingToPercent}%`};
   overflow: hidden;
   -webkit-text-fill-color: var(--color-green-01);
 `;
 
-const StarBase = styled.div``;
+const BaseStars = styled.div`
+  display: flex;
+`;
+
+const Star = styled.button`
+  outline: none;
+`;