diff --git a/src/api/axios.ts b/src/api/axios.ts index a81e895..6e71ce0 100644 --- a/src/api/axios.ts +++ b/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, diff --git a/src/components/Report/ReportCard/TagList/TagItem/index.tsx b/src/components/Report/ReportCard/TagList/TagItem/index.tsx new file mode 100644 index 0000000..dd77ba1 --- /dev/null +++ b/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 ( + + #{text[tag]} + + ); +}; + +export default TagItem; diff --git a/src/components/Report/ReportCard/TagList/TagItem/style.ts b/src/components/Report/ReportCard/TagList/TagItem/style.ts new file mode 100644 index 0000000..4330a1a --- /dev/null +++ b/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; +`; diff --git a/src/components/Report/ReportCard/TagList/index.tsx b/src/components/Report/ReportCard/TagList/index.tsx new file mode 100644 index 0000000..381e41c --- /dev/null +++ b/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) => { + return ( + + {tag.map((item, index) => ( + + ))} + + ); +}; + +export default TagList; diff --git a/src/components/Report/ReportCard/TagList/style.ts b/src/components/Report/ReportCard/TagList/style.ts new file mode 100644 index 0000000..92be720 --- /dev/null +++ b/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; +`; diff --git a/src/components/Report/ReportCard/index.tsx b/src/components/Report/ReportCard/index.tsx new file mode 100644 index 0000000..f433313 --- /dev/null +++ b/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 ( + + + + {author} + + + {author_school} + + {text[author_grade]} + + {text[author_gender]} + + + {title} + + + ); +}; + +export default ReportCard; diff --git a/src/components/Report/ReportCard/style.ts b/src/components/Report/ReportCard/style.ts new file mode 100644 index 0000000..6ead730 --- /dev/null +++ b/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; +`; diff --git a/src/components/Report/ReportList/index.tsx b/src/components/Report/ReportList/index.tsx new file mode 100644 index 0000000..26f6723 --- /dev/null +++ b/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([]); + + 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 ( + + {posts.length > 0 ? ( + posts.map((report: reportPost, idx) => ( + + )) + ) : ( +

신고 게시물이 없습니다

+ )} + + ); +}; + +export default ReportList; diff --git a/src/components/Report/ReportList/style.ts b/src/components/Report/ReportList/style.ts new file mode 100644 index 0000000..85fce90 --- /dev/null +++ b/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; +`; diff --git a/src/components/Report/TypeList/TypeItem/index.tsx b/src/components/Report/TypeList/TypeItem/index.tsx new file mode 100644 index 0000000..2eb7328 --- /dev/null +++ b/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 ( + + {text[data]} + + ); +}; + +export default MateItem; diff --git a/src/components/Report/TypeList/TypeItem/style.ts b/src/components/Report/TypeList/TypeItem/style.ts new file mode 100644 index 0000000..45b2640 --- /dev/null +++ b/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}; +`; diff --git a/src/components/Report/TypeList/index.tsx b/src/components/Report/TypeList/index.tsx new file mode 100644 index 0000000..6fdc63e --- /dev/null +++ b/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) => { + const list = [...type]; + return ( + + {list.map((item, index) => ( + + ))} + + ); +}; + +export default MateList; diff --git a/src/components/Report/TypeList/style.ts b/src/components/Report/TypeList/style.ts new file mode 100644 index 0000000..92be720 --- /dev/null +++ b/src/components/Report/TypeList/style.ts @@ -0,0 +1,6 @@ +import styled from '@emotion/styled'; + +export const Container = styled.div` + display: flex; + gap: 12px; +`; diff --git a/src/components/Report/index.ts b/src/components/Report/index.ts new file mode 100644 index 0000000..feb9f0c --- /dev/null +++ b/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'; diff --git a/src/components/index.ts b/src/components/index.ts index 9404192..153e777 100644 --- a/src/components/index.ts +++ b/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'; diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx index 24baa89..a5e1e77 100644 --- a/src/pages/home/index.tsx +++ b/src/pages/home/index.tsx @@ -1,19 +1,33 @@ 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(false); + const [isActive, setIsActive] = useState(false); + const [admin] = useState(true); return ( <>
- - - - - + + + + + + {admin && ( + setIsActive((prev) => !prev)}> + + + )} setModal(true)}> @@ -21,10 +35,10 @@ const Home = () => { {modal && setModal(false)} />} - - - - + + + {admin && isActive ? : } + ); }; diff --git a/src/pages/home/style.ts b/src/pages/home/style.ts index 38d4fbd..028604f 100644 --- a/src/pages/home/style.ts +++ b/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); diff --git a/src/pages/temp/index.tsx b/src/pages/temp/index.tsx index e3c112b..ce45725 100644 --- a/src/pages/temp/index.tsx +++ b/src/pages/temp/index.tsx @@ -1,9 +1,8 @@ -import { MemberList } from 'components'; import React from 'react'; const temp = () => { // 스토리북을 사용하지 않으니 임시로 여기에다가 만드신 컴포넌트를 추가하셔서 확인하시면 될 것 같습니다. - return ; + return
ex..
; }; export default temp; diff --git a/src/svg/SeeReport.tsx b/src/svg/SeeReport.tsx new file mode 100644 index 0000000..d040e37 --- /dev/null +++ b/src/svg/SeeReport.tsx @@ -0,0 +1,62 @@ +import React from 'react'; + +interface Props { + isActive: boolean; +} + +const SeeReport = ({ isActive }: Props) => { + return ( + + {isActive ? ( + <> + + + ) : ( + <> + + + )} + + + + + + ); +}; + +export default SeeReport; diff --git a/src/svg/index.ts b/src/svg/index.ts index 156fcdf..c278399 100644 --- a/src/svg/index.ts +++ b/src/svg/index.ts @@ -15,3 +15,4 @@ export { default as ReportIcon } from './ReportIcon'; export { default as SearchIcon } from './SearchIcon'; export { default as SelectButton } from './SelectButton'; export { default as XIcon } from './XIcon'; +export { default as SeeReport } from './SeeReport'; diff --git a/src/types/reportPost.ts b/src/types/reportPost.ts new file mode 100644 index 0000000..32f3e87 --- /dev/null +++ b/src/types/reportPost.ts @@ -0,0 +1,25 @@ +import { genderType, gradeType, tagType } from './Card'; + +export type reportType = + | 'PRIVATE' + | 'ADVERTISEMENT' + | 'ABUSE' + | 'REPEATED' + | 'NSFW' + | 'ETC'; + +export default interface reportPost { + id?: number; + author: string; + title: string; + author_school: string; + author_gender: genderType; + author_grade: gradeType; + content?: string; + date?: Date; + maximum?: number; + type: reportType[]; + tag: tagType[]; + gender: genderType; + grade: gradeType[]; +}