Merge pull request #176 from CSID-DGU/frontend/feature/api

FE: [feat] 크루멤버 프로필 조회, 달력, 다른크루 조회, 크루 채팅

src/frontend/package.json

@@ -15,6 +15,7 @@
     "axios": "^1.7.7",
     "raw-loader": "^4.0.2",
     "react": "^18.3.1",
+    "react-calendar": "^5.1.0",
     "react-dom": "^18.3.1",
     "react-kakao-maps-sdk": "^1.1.27",
     "react-router-dom": "^6.27.0",

src/frontend/src/apis/crew.ts

@@ -1,9 +1,12 @@
 import {
+  CrewChatRequest,
+  CrewChatResponse,
   CrewGalleryDetaiCommentslResponse,
   CrewGalleryDetailResponse,
   CrewGalleryRequest,
   CrewGalleryResponse,
   CrewJoinResponse,
+  CrewMemberDetailResponse,
   CrewMemberResponse,
   CrewNoticeDetailResponse,
   CrewNoticeRequest,
@@ -72,6 +75,19 @@ export const getCrewMember = async (
   return response.data;
 };
 
+// 크루 멤버 프로필 조회 api
+export const getCrewMemberDetail = async (
+  crewId: number,
+  memberId: number,
+  year: number,
+  month: number
+): Promise<CrewMemberDetailResponse> => {
+  const response = await api.get(
+    `/crew/${crewId}/member/${memberId}/${year}/${month}`
+  );
+  return response.data;
+};
+
 export const getCrewGallery = async (
   crewId: number
 ): Promise<CrewGalleryResponse> => {
@@ -128,3 +144,15 @@ export const postCrewGalleryLike = async (crewId: number, postId: number) => {
   const response = await api.post(`/crew/${crewId}/gallery/${postId}/like`);
   return response.data;
 };
+
+export const getCrewChat = async (
+  crewId: number
+): Promise<CrewChatResponse[]> => {
+  const response = await api.get(`/crew/${crewId}/chat`);
+  return response.data;
+};
+
+export const postCrewChat = async (crewId: number, data: CrewChatRequest) => {
+  const response = await api.post(`/crew/${crewId}/chat`, data);
+  return response.data;
+};

src/frontend/src/components/common/RunningCalendar.tsx

@@ -0,0 +1,45 @@
+import CalendarImg from "@/assets/images/calendar.png";
+import Calendar from "react-calendar";
+import "react-calendar/dist/Calendar.css";
+import "@/styles/RunningCalendar.css";
+import { MypageCalendarResponse } from "@/types/mypage";
+
+type RunningCalendarProps = {
+  runningData: MypageCalendarResponse[];
+};
+
+const RunningCalendar = ({ runningData = [] }: RunningCalendarProps) => {
+  // 날짜에 해당하는 거리 가져오기
+  const getDistanceByDate = (date: Date): number => {
+    const dateString = date.toISOString().split("T")[0]; // YYYY-MM-DD 포맷
+    const record = runningData.find((d) => d.date === dateString);
+    return record?.totalDistance || 0.0;
+  };
+
+  // 타일 스타일링
+  const tileContent = ({ date }: { date: Date }) => {
+    const distance = getDistanceByDate(date);
+
+    if (distance > 0) {
+      return (
+        <div className="highlight flex justify-center items-center">
+          <p className="text-end text-[#444] font-bold">
+            {distance.toFixed(2)} <span className="text-[0.75rem]">km</span>
+          </p>
+        </div>
+      );
+    }
+    return null;
+  };
+
+  return (
+    <div className="my-12 flex justify-center">
+      <Calendar
+        tileContent={tileContent} // 날짜별 커스터마이징
+        className="running-calendar"
+      />
+    </div>
+  );
+};
+
+export default RunningCalendar;

src/frontend/src/components/community/CommunityCard.tsx

@@ -26,11 +26,13 @@ const CommunityCard = ({ board, boardName }: CommunityCardProps) => {
         <div className="text-[14px] text-[#515151]">{board.contentPreview}</div>
       </div>
       <div className="w-[70px] h-[4.375rem] overflow-hidden">
-        <img
-          className="w-full h-full object-cover"
-          src={board.postImages[0]}
-          alt="사진"
-        />
+        {board.postImages[0] && (
+          <img
+            className="w-full h-full object-cover"
+            src={board.postImages[0]}
+            alt="사진"
+          />
+        )}
       </div>
     </div>
   );

src/frontend/src/components/communityWrite/CommunityWriteHeader.tsx

@@ -1,6 +1,7 @@
 import { boardType } from "@/constants/board";
 import { communityRequestType } from "@/types/communityWrite";
 import { Dispatch, SetStateAction } from "react";
+import { useNavigate } from "react-router-dom";
 
 type CommunityWriteHeaderProps = {
   onSubmit: () => void;
@@ -13,10 +14,17 @@ const CommunityWriteHeader = ({
   contents,
   setContents,
 }: CommunityWriteHeaderProps) => {
+  const navigate = useNavigate();
+
   return (
     <div>
       <div className="flex items-center justify-between py-5 px-8 border-b border-[#D9D9D9]">
-        <div className="cursor-pointer text-[18px] text-[#515151]">뒤로</div>
+        <div
+          onClick={() => navigate("/community")}
+          className="cursor-pointer text-[18px] text-[#515151]"
+        >
+          뒤로
+        </div>
         <div className="text-[18px] font-bold">게시물 작성</div>
         <div
           onClick={onSubmit}