활동기록 구현 (#issue 261)

src/api/activityLog.api.ts

@@ -0,0 +1,22 @@
+import type { ApiMyComments, ApiMyInquiries } from './../models/activityLog';
+import { httpClient } from './http.api';
+
+export const getMyComments = async () => {
+  try {
+    const response = await httpClient.get<ApiMyComments>(`user/my-comments`);
+
+    return response.data.data;
+  } catch (e) {
+    console.error('내 댓글 에러', e);
+  }
+};
+
+export const getMyInquiries = async () => {
+  try {
+    const response = await httpClient.get<ApiMyInquiries>(`user/my-inquiries`);
+
+    return response.data.data;
+  } catch (e) {
+    console.error('내 문의글 에러 ', e);
+  }
+};

src/api/inquiry.api.ts

@@ -9,6 +9,6 @@ export const postInquiry = async (formData: FormData) => {
     });
     console.log(response);
   } catch (e) {
-    console.log('문의하기 에러', e);
+    console.error('문의하기 에러', e);
   }
 };

src/api/projectLists.api.ts

@@ -11,10 +11,10 @@ export const getProjectLists = async (params: SearchFilters) => {
       params,
       paramsSerializer: { indexes: null },
     });
-    
+
     return response.data.data;
   } catch (e) {
-    console.log('getProjectLists', e);
+    console.error('getProjectLists', e);
   }
 };
 
@@ -26,6 +26,6 @@ export const getProjectStatistic = async () => {
 
     return response.data.data;
   } catch (e) {
-    console.log('getProjectStatistic', e);
+    console.error('getProjectStatistic', e);
   }
 };

src/api/projectSearchFiltering.api.ts

@@ -7,7 +7,7 @@ export const getSkillTag = async () => {
 
     return response.data.data;
   } catch (e) {
-    console.log('getSkillTag', e);
+    console.error('getSkillTag', e);
   }
 };
 
@@ -16,7 +16,7 @@ export const getPositionTag = async () => {
     const response = await httpClient.get<ApiPositionTag>('/position-tag');
     return response.data.data;
   } catch (e) {
-    console.log('getPositionTag', e);
+    console.error('getPositionTag', e);
   }
 };
 
@@ -25,6 +25,6 @@ export const getMethodTag = async () => {
     const response = await httpClient.get<ApiMethodTag>('/method-type');
     return response.data.data;
   } catch (e) {
-    console.log('getMethodTag', e);
+    console.error('getMethodTag', e);
   }
 };

src/components/mypage/activityLog/commentsActivity/CommentsActivity.styled.ts

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-export const container = styled.div`
+export const Container = styled.div`
   height: 100%;
 `;
 
@@ -9,3 +9,16 @@ export const WrapperNoContent = styled.div`
   display: flex;
   align-items: center;
 `;
+
+export const CommentsWrapper = styled.div`
+  padding: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+`;
+
+export const CommentBorder = styled.div`
+  width: 100%;
+  height: 0.5px;
+  background: ${({ theme }) => theme.color.placeholder};
+`;

src/components/mypage/activityLog/commentsActivity/CommentsActivity.tsx

@@ -1,12 +1,39 @@
+import { Fragment } from 'react/jsx-runtime';
+import { useGetMyComments } from '../../../../hooks/useGetMyComments';
 import NoContent from '../../../common/noContent/NoContent';
+import Spinner from '../../Spinner';
+import CommentActivity from './commentActivity/CommentActivity';
 import * as S from './CommentsActivity.styled';
 
 export default function CommentsActivity() {
-  return (
-    <S.container>
+  const { myCommentsData, isLoading } = useGetMyComments();
+
+  if (isLoading) {
+    return <Spinner size='50px' color='#3e5879;' />;
+  }
+
+  if (!myCommentsData) return;
+
+  if (myCommentsData.length === 0) {
+    return (
       <S.WrapperNoContent>
         <NoContent type='comment' />
       </S.WrapperNoContent>
-    </S.container>
+    );
+  }
+
+  return (
+    <S.Container>
+      <S.CommentsWrapper>
+        {myCommentsData.map((list, idx: number) => (
+          <Fragment key={list.id}>
+            <CommentActivity list={list} />
+            {idx !== myCommentsData.length - 1 && (
+              <S.CommentBorder></S.CommentBorder>
+            )}
+          </Fragment>
+        ))}
+      </S.CommentsWrapper>
+    </S.Container>
   );
 }

src/components/mypage/activityLog/commentsActivity/commentActivity/CommentActivity.styled.ts

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+
+export const CommentWrapper = styled.div`
+  cursor: pointer;
+`;
+
+export const CommentContent = styled.div``;
+
+export const CommentDate = styled.div`
+  font-size: 0.8rem;
+  color: ${({ theme }) => theme.color.placeholder};
+`;
+
+export const CommentProject = styled.div`
+  font-size: 0.9rem;
+`;

src/components/mypage/activityLog/commentsActivity/commentActivity/CommentActivity.tsx

@@ -0,0 +1,18 @@
+import { Link } from 'react-router-dom';
+import type { MyComments } from '../../../../../models/activityLog';
+import * as S from './CommentActivity.styled';
+import { formatDate } from '../../../../../util/formatDate';
+
+interface CommentActivityProps {
+  list: MyComments;
+}
+
+export default function CommentActivity({ list }: CommentActivityProps) {
+  return (
+    <Link to={`/project-detail/${list.projectId}`}>
+      <S.CommentContent>{list.content}</S.CommentContent>
+      <S.CommentDate>{formatDate(list.createdAt)}</S.CommentDate>
+      <S.CommentProject>{list.projectTitle}</S.CommentProject>
+    </Link>
+  );
+}

src/components/mypage/activityLog/inquiries/Inquiries.styled.ts

@@ -4,19 +4,41 @@ export const container = styled.div`
   height: 100%;
 `;
 
-export const WrapperButton = styled.div`
-  height: 5%;
-  display: flex;
-  justify-content: end;
-  gap: 1rem;
+export const InquiriesContainer = styled.div`
+  padding: 1rem;
+  width: 100%;
+`;
+
+export const InquiriesTableHeadWrapper = styled.div`
+  width: 100%;
+  display: grid;
+  grid-template-columns: 8% 18% 62% 12%;
+  font-size: 1.3rem;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+`;
+
+export const InquiriesTableHeaderNo = styled.div`
+  text-align: center;
+`;
+
+export const InquiriesTableHeaderCategory = styled.div`
+  padding-left: 0.5rem;
+`;
+
+export const InquiriesTableHeaderTitle = styled.div`
+  text-align: start;
+  padding-left: 3rem;
 `;
 
-export const Button = styled.button`
-  font-size: 1rem;
-  width: 5rem;
-  background: ${({ theme }) => theme.color.navy};
-  border-radius: ${({ theme }) => theme.borderRadius.primary};
-  color: ${({ theme }) => theme.color.white};
+export const InquiriesTableHeaderState = styled.div`
+  text-align: center;
+`;
+
+export const InquiriesWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
 `;
 
 export const WrapperNoContent = styled.div`

src/components/mypage/activityLog/inquiries/Inquiries.tsx

@@ -1,12 +1,47 @@
+import { useGetMyInquires } from '../../../../hooks/useGetMyInquires';
 import NoContent from '../../../common/noContent/NoContent';
+import Spinner from '../../Spinner';
 import * as S from './Inquiries.styled';
+import Inquiry from './inquiry/Inquiry';
 
 export default function Inquiries() {
-  return (
-    <S.container>
+  const { myCommentsData, isLoading } = useGetMyInquires();
+
+  if (isLoading) {
+    return <Spinner size='50px' color='#3e5879;' />;
+  }
+
+  if (!myCommentsData) return;
+
+  if (myCommentsData.length === 0)
+    return (
       <S.WrapperNoContent>
-        <NoContent type='inquiries' />
+        <NoContent type='comment' />
       </S.WrapperNoContent>
+    );
+
+  myCommentsData.map(console.log);
+
+  return (
+    <S.container>
+      <S.InquiriesContainer>
+        <S.InquiriesTableHeadWrapper>
+          <S.InquiriesTableHeaderNo>No</S.InquiriesTableHeaderNo>
+          <S.InquiriesTableHeaderCategory>구별</S.InquiriesTableHeaderCategory>
+          <S.InquiriesTableHeaderTitle>제목</S.InquiriesTableHeaderTitle>
+          <S.InquiriesTableHeaderState>상태</S.InquiriesTableHeaderState>
+        </S.InquiriesTableHeadWrapper>
+        <S.InquiriesWrapper>
+          {myCommentsData.length > 0 &&
+            myCommentsData.map((list, index) => (
+              <Inquiry
+                key={list.title}
+                list={list}
+                no={myCommentsData.length - index}
+              />
+            ))}
+        </S.InquiriesWrapper>
+      </S.InquiriesContainer>
     </S.container>
   );
 }

src/components/mypage/activityLog/inquiries/inquiry/Inquiry.styled.ts

@@ -0,0 +1,82 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  width: 100%;
+  font-size: 1.1rem;
+`;
+
+export const InquiryTitleWrapper = styled.div`
+  display: grid;
+  grid-template-columns: 8% 18% 62% 12%;
+  cursor: pointer;
+`;
+
+export const InquiryNumber = styled.div`
+  text-align: center;
+`;
+
+export const InquiryCategory = styled.div``;
+
+export const InquiryTitle = styled.div``;
+
+export const InquiryState = styled.div`
+  text-align: center;
+`;
+
+export const InquiryContentWrapper = styled.div`
+  margin: 0.5rem 0;
+  background: ${({ theme }) => theme.color.white};
+  padding: 1rem;
+`;
+
+export const InquiryContent = styled.div``;
+
+export const InquiryImgWrapper = styled.div`
+  margin-top: 1rem;
+  cursor: pointer;
+`;
+
+export const InquiryModalImgWrapper = styled.div`
+  display: flex;
+`;
+
+export const InquiryImg = styled.img`
+  width: 5rem;
+`;
+
+export const ModalImgContainer = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 10;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: rgba(0, 0, 0, 0.7);
+`;
+
+export const ModalImgWrapper = styled.div`
+  margin-top: 1rem;
+  cursor: pointer;
+  background: ${({ theme }) => theme.color.white};
+  border: 1px solid ${({ theme }) => theme.color.navy};
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: fit-content;
+`;
+
+export const ModalImgButtonWrapper = styled.div`
+  width: 100%;
+  color: ${({ theme }) => theme.color.white};
+  font-size: 0.8rem;
+  background: ${({ theme }) => theme.color.navy};
+  padding: 0.2rem;
+`;
+
+export const ModalImg = styled.img``;