🔀어드민 글 관리 페이지 제작

src/api/axios.ts

@@ -1,7 +1,7 @@
 import axios from 'axios';
 
 const token = localStorage.getItem('accessToken');
-const baseUrl = process.env.REACT_APP_API;
+const baseUrl = process.env.REACT_APP_PUBLIC_API;
 
 export const baseInstance = axios.create({
   baseURL: baseUrl,

src/components/Report/ReportCard/TagList/TagItem/index.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import * as S from './style';
+import { tagType } from 'types/Card';
+
+const TagItem = ({ tag }: { tag: tagType }) => {
+  const text = {
+    WALK: '산책',
+    WORRY: '고민',
+    CHAT: '잡담',
+    EXERCISE: '운동',
+    STUDY: '공부',
+    GO_OUT: '외출',
+  };
+  return (
+    <S.Container>
+      <S.Tag>#{text[tag]}</S.Tag>
+    </S.Container>
+  );
+};
+
+export default TagItem;

src/components/Report/ReportCard/TagList/TagItem/style.ts

@@ -0,0 +1,15 @@
+import styled from '@emotion/styled';
+
+export const Container = styled.div`
+  border: 1px solid #eff0f2;
+  border-radius: 8px;
+  display: flex;
+  padding: 4px 12px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+`;
+
+export const Tag = styled.div`
+  color: #a5a6a9;
+`;

src/components/Report/ReportCard/TagList/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import * as S from './style';
+import Card from 'types/Card';
+import TagItem from './TagItem';
+
+const TagList = ({ tag }: Pick<Card, 'tag'>) => {
+  return (
+    <S.Container>
+      {tag.map((item, index) => (
+        <TagItem key={index} tag={item} />
+      ))}
+    </S.Container>
+  );
+};
+
+export default TagList;

src/components/Report/ReportCard/TagList/style.ts

@@ -0,0 +1,6 @@
+import styled from '@emotion/styled';
+
+export const Container = styled.div`
+  display: flex;
+  gap: 12px;
+`;

src/components/Report/ReportCard/index.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import * as S from './style';
+import reportPost from 'types/reportPost';
+import TagList from './TagList';
+import MateList from '../TypeList';
+
+const ReportCard = ({
+  author,
+  author_gender,
+  author_grade,
+  author_school,
+  title,
+  type,
+  tag,
+}: reportPost) => {
+  const text: { [key: string]: string } = {
+    ONE: '1학년',
+    TWO: '2학년',
+    THREE: '3학년',
+    FOUR: '4학년',
+    FIVE: '5학년',
+    SIX: '6학년',
+    MALE: '남자',
+    FEMALE: '여자',
+    ANY: '성별무관',
+  };
+
+  return (
+    <S.Container>
+      <MateList type={type} />
+      <S.AuthorDataBox>
+        <S.Author>{author}</S.Author>
+        <S.Contour />
+        <S.AuthorData>
+          <span>{author_school}</span>
+          <S.Dot />
+          <span>{text[author_grade]}</span>
+          <S.Dot />
+          <span>{text[author_gender]}</span>
+        </S.AuthorData>
+      </S.AuthorDataBox>
+      {title}
+      <TagList tag={tag} />
+    </S.Container>
+  );
+};
+
+export default ReportCard;

src/components/Report/ReportCard/style.ts

@@ -0,0 +1,49 @@
+import styled from '@emotion/styled';
+
+export const Container = styled.div`
+  width: 27rem;
+  padding: 1.25rem 1.5rem;
+  border-radius: 0.5rem;
+  border: 1px solid #f5f6f8;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  background-color: white;
+`;
+
+export const AuthorDataBox = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+`;
+
+export const Author = styled.div`
+  color: #8f9094;
+`;
+
+export const Contour = styled.div`
+  width: 0.0625rem;
+  height: 1.25rem;
+  border-radius: 0.3125rem;
+  background: #d9d9d9;
+`;
+
+export const AuthorData = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  span {
+    color: #b4b5b7;
+  }
+`;
+
+export const Dot = styled.div`
+  width: 4px;
+  height: 4px;
+  border-radius: 2px;
+  background-color: #b4b5b7;
+`;
+
+export const Title = styled.div`
+  color: #333;
+`;

src/components/Report/ReportList/index.tsx

@@ -0,0 +1,65 @@
+import * as S from './style';
+import React, { useEffect, useState } from 'react';
+import ReportCard from '../ReportCard';
+import reportPost from 'types/reportPost';
+import { authInstance } from 'api/axios';
+
+const ReportList = () => {
+  // const data: reportPost[] = [
+  //   {
+  //     id: 1,
+  //     author: '한재형',
+  //     title: '산책할래?',
+  //     author_school: 'gsm',
+  //     author_gender: 'MALE',
+  //     author_grade: 'TWO',
+  //     content: 'description',
+  //     date: new Date('2024-09-04'),
+  //     maximum: 4,
+  //     gender: 'FEMALE',
+  //     type: ['ABUSE', 'NSFW'],
+  //     grade: ['THREE', 'TWO'],
+  //     tag: ['STUDY', 'CHAT'],
+  //   },
+  // ];
+
+  const [posts, setPosts] = useState<reportPost[]>([]);
+
+  const getData = async () => {
+    try {
+      const data: reportPost[] = await authInstance.get('/admin/dec_info');
+      data.map((item) => setPosts((prev) => [item, ...prev]));
+    } catch (e) {
+      console.log(e);
+    }
+  };
+
+  useEffect(() => {
+    getData();
+  }, []);
+
+  return (
+    <S.Wrapper>
+      {posts.length > 0 ? (
+        posts.map((report: reportPost, idx) => (
+          <ReportCard
+            key={idx}
+            author={report.author}
+            author_gender={report.author_gender}
+            title={report.title}
+            author_school={report.author_school}
+            author_grade={report.author_grade}
+            gender={report.author_gender}
+            type={report.type}
+            grade={report.grade}
+            tag={report.tag}
+          />
+        ))
+      ) : (
+        <p>신고 게시물이 없습니다</p>
+      )}
+    </S.Wrapper>
+  );
+};
+
+export default ReportList;

src/components/Report/ReportList/style.ts

@@ -0,0 +1,7 @@
+import styled from '@emotion/styled';
+
+export const Wrapper = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px 24px;
+`;

src/components/Report/TypeList/TypeItem/index.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import * as S from './style';
+import { reportType } from 'types/reportPost';
+
+interface Props {
+  data: reportType;
+}
+
+const MateItem = ({ data }: Props) => {
+  const text = {
+    PRIVATE: '개인정보노출',
+    ADVERTISEMENT: '홍보성/상업적',
+    ABUSE: '욕설/인신공격',
+    REPEATED: '같은내용 반복작성',
+    NSFW: '음란/선정성',
+    ETC: '기타',
+  };
+  return (
+    <S.Container>
+      <S.Mate>{text[data]}</S.Mate>
+    </S.Container>
+  );
+};
+
+export default MateItem;

src/components/Report/TypeList/TypeItem/style.ts

@@ -0,0 +1,15 @@
+import styled from '@emotion/styled';
+
+export const Container = styled.div`
+  border: 1px solid ${({ theme }) => theme.color.system};
+  border-radius: 8px;
+  display: flex;
+  padding: 4px 12px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+`;
+
+export const Mate = styled.div`
+  color: ${({ theme }) => theme.color.system};
+`;

src/components/Report/TypeList/index.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import * as S from './style';
+import ReportType from 'types/reportPost';
+import MateItem from './TypeItem';
+
+const MateList = ({ type }: Pick<ReportType, 'type'>) => {
+  const list = [...type];
+  return (
+    <S.Container>
+      {list.map((item, index) => (
+        <MateItem key={index} data={item} />
+      ))}
+    </S.Container>
+  );
+};
+
+export default MateList;

src/components/Report/TypeList/style.ts

@@ -0,0 +1,6 @@
+import styled from '@emotion/styled';
+
+export const Container = styled.div`
+  display: flex;
+  gap: 12px;
+`;

src/components/Report/index.ts

@@ -0,0 +1,3 @@
+export { default as ReportList } from './ReportList';
+export { default as ReportCard } from './ReportCard';
+export { default as TypeList } from './TypeList';

src/components/index.ts

@@ -12,3 +12,4 @@ export * from './Post';
 export { default as Profile } from './Profile';
 export { default as Portal } from './Portal';
 export { default as TextArea } from './textarea';
+export * from './Report';

src/pages/home/index.tsx

@@ -1,30 +1,44 @@
 import React, { useState } from 'react';
-import { PostList, Filter, Location, Header, Banner } from 'components';
-import { FilterIcon } from 'svg';
+import {
+  PostList,
+  Filter,
+  Location,
+  Header,
+  Banner,
+  ReportList,
+} from 'components';
+import { FilterIcon, SeeReport } from 'svg';
 import * as S from './style';
 
 const Home = () => {
   const [modal, setModal] = useState<boolean>(false);
+  const [isActive, setIsActive] = useState<boolean>(false);
+  const [admin] = useState<boolean>(true);
 
   return (
     <>
       <Header />
-      <S.Positioner>
-        <S.Container>
-          <Banner />
-          <S.Nav>
-            <Location />
+      <S.Container>
+        <Banner />
+        <S.Nav>
+          <Location />
+          <S.ButtonWrapper>
+            {admin && (
+              <span onClick={() => setIsActive((prev) => !prev)}>
+                <SeeReport isActive={isActive} />
+              </span>
+            )}
             <S.FilterContainer>
               <S.FilterButton onClick={() => setModal(true)}>
                 <FilterIcon />
                 필터
               </S.FilterButton>
               {modal && <Filter onClose={() => setModal(false)} />}
             </S.FilterContainer>
-          </S.Nav>
-          <PostList />
-        </S.Container>
-      </S.Positioner>
+          </S.ButtonWrapper>
+        </S.Nav>
+        {admin && isActive ? <ReportList /> : <PostList />}
+      </S.Container>
     </>
   );
 };

src/pages/home/style.ts

@@ -24,6 +24,11 @@ export const BodyWrapper = styled.div`
   gap: 1.25rem;
 `;
 
+export const ButtonWrapper = styled.div`
+  display: flex;
+  gap: 1.25rem;
+`;
+
 export const FilterButton = styled.button`
   padding: 0.5rem 0.75rem;
   background: var(--GRAY-100, #f5f6f8);

src/pages/temp/index.tsx

@@ -1,9 +1,8 @@
-import { MemberList } from 'components';
 import React from 'react';
 
 const temp = () => {
   // 스토리북을 사용하지 않으니 임시로 여기에다가 만드신 컴포넌트를 추가하셔서 확인하시면 될 것 같습니다.
-  return <MemberList />;
+  return <div>ex..</div>;
 };
 
 export default temp;