diff --git a/src/api/@types/@asConst.ts b/src/api/@types/@asConst.ts index ca209e2..fb8c695 100644 --- a/src/api/@types/@asConst.ts +++ b/src/api/@types/@asConst.ts @@ -1,9 +1,10 @@ export const Order = { - RECENTLY: 'RECENTLY', - PREVIOUSLY: 'PREVIOUSLY', + NEWEST: 'NEWEST', + OLDEST: 'OLDEST', } as const; export const Status = { + ALL: 'ALL', NOT_STARTED: 'NOT_STARTED', IN_PROGRESS: 'IN_PROGRESS', COMPLETED: 'COMPLETED', diff --git a/src/api/@types/Retrospectives.ts b/src/api/@types/Retrospectives.ts index bab084b..0629d09 100644 --- a/src/api/@types/Retrospectives.ts +++ b/src/api/@types/Retrospectives.ts @@ -1,4 +1,4 @@ -import { TRetrospective, TStatus } from './@asConst'; +import { TRetrospective, TStatus, TOrder } from './@asConst'; //onlyGet export interface onlyGetRetrospectiveRequest { @@ -26,21 +26,35 @@ export interface RetrospectiveData { export interface GetRetrospectiveRequest { page: number; size: number; - order: keyof TStatus; + order: keyof TOrder; status: keyof TStatus; keyword: string; isBookmarked: boolean; } +export interface GetRetrospectiveResponseNodes { + // 추가 + id: number; + title: string; + userId: number; + teamId: number | null; + templateId: number; + status: keyof TStatus; + isBookmarked: boolean; + thumbnail: string; + startDate: string; + createdDate: string; + updatedDate: string; +} + export interface GetRetrospectiveData { code: number; message: string; data: { totalCount: number; - nodes: Array; + nodes: Array; //RetrospectiveResponse 에서 변경 }; } - //post export interface PostRetrospectivesRequest { title: string; @@ -85,7 +99,7 @@ export interface RetrospectiveResponse { id: number; title: string; userId: number; - teamId: number; + teamId: number | null; templateId: number; status: keyof TStatus; isBookmarked: boolean; @@ -96,10 +110,22 @@ export interface RetrospectiveResponse { }; } +export interface PatchRetrospectiveRequest { + retrospectiveId: number; + // userId: number; +} + +export interface PatchRetrospectiveResponse { + code: number; + message: string; + data: boolean; +} + export interface RetrospectivesClient { onlyGet(request: onlyGetRetrospectiveRequest): Promise; create(request: PostRetrospectivesRequest): Promise; get(request: GetRetrospectiveRequest): Promise; delete(request: DeleteRetrospectiveRequest): Promise; put(request: PutRetrospectiveRequest): Promise; + patch(request: PatchRetrospectiveRequest): Promise; } diff --git a/src/api/__mock__/retrospective.ts b/src/api/__mock__/retrospective.ts index 5e977a8..d3690c9 100644 --- a/src/api/__mock__/retrospective.ts +++ b/src/api/__mock__/retrospective.ts @@ -18,7 +18,6 @@ export const MockRetrospective: RetrospectiveResponse = { updatedDate: '2024-04-12T04:20:54.835Z', }, }; - export const MockOnlyGetRetrospective: onlyGetRetrospectiveResponse = { code: 202, message: 'string', diff --git a/src/api/retrospectivesApi/getRetrospective.tsx b/src/api/retrospectivesApi/getRetrospective.tsx new file mode 100644 index 0000000..c0d027d --- /dev/null +++ b/src/api/retrospectivesApi/getRetrospective.tsx @@ -0,0 +1,30 @@ +import { GetRetrospectiveData, GetRetrospectiveRequest } from '@/api/@types/Retrospectives'; +import axiosInstance from '@/api/axiosConfig'; + +export const queryGetRetrospective = async (requestData: GetRetrospectiveRequest): Promise => { + try { + const { page, size, order, status, keyword, isBookmarked } = requestData; + const params: { [key: string]: any } = { + page, + size, + order, + isBookmarked, + }; + if (status !== 'ALL') { + params.status = status; + } + if (keyword !== '') { + params.keyword = keyword; + } + + console.log(params); + const response = await axiosInstance.get('/retrospectives', { + params, + }); + // console.log('회고 get 성공', response.data); + return response.data; + } catch (error) { + // console.log('회고 get 실패', error); + throw new Error('회고 get 실패'); + } +}; diff --git a/src/api/retrospectivesApi/patchRetrospective.tsx b/src/api/retrospectivesApi/patchRetrospective.tsx new file mode 100644 index 0000000..ae3c4e5 --- /dev/null +++ b/src/api/retrospectivesApi/patchRetrospective.tsx @@ -0,0 +1,17 @@ +import { PatchRetrospectiveRequest, PatchRetrospectiveResponse } from '../@types/Retrospectives'; +import axiosInstance from '@/api/axiosConfig'; + +export const patchRetrospective = async ( + requestData: PatchRetrospectiveRequest, +): Promise => { + try { + console.log(requestData.retrospectiveId, 'patch 요청'); + const response = await axiosInstance.patch( + `/retrospectives/${requestData.retrospectiveId}/bookmark`, + ); + console.log('북마크 patch 성공', response.data); + return response.data; + } catch (error) { + throw new Error('북마크 patch 실패'); + } +}; diff --git a/src/api/services/Retrospectives.ts b/src/api/services/Retrospectives.ts index 7b56789..ceb7262 100644 --- a/src/api/services/Retrospectives.ts +++ b/src/api/services/Retrospectives.ts @@ -57,4 +57,7 @@ export const RetrospectiveService: RetrospectivesClient = { throw new Error(error as string); } }, + patch: async (retrospectiveId, ...request) => { + return await mswInstance.patch(`${ROUTE}/${retrospectiveId}/bookmark`, request); + }, }; diff --git a/src/components/RetroList/BookmarkButton.tsx b/src/components/RetroList/BookmarkButton.tsx index ed217cb..e7c1b49 100644 --- a/src/components/RetroList/BookmarkButton.tsx +++ b/src/components/RetroList/BookmarkButton.tsx @@ -2,11 +2,16 @@ import { useState } from 'react'; import BookmarkIcon from '@/assets/BookmarkIcon_Y.png'; import * as S from '@/styles/RetroList/BookmarkButton.styles'; -const BookmarkButton: React.FC = () => { +interface BookmarkButtonProps { + handleBookmarkButton: (option: boolean) => void; +} + +const BookmarkButton: React.FC = ({ handleBookmarkButton }) => { const [isBookmarked, setIsBookmarked] = useState(false); const handleBookmark = () => { setIsBookmarked(!isBookmarked); + handleBookmarkButton(!isBookmarked); }; return ( diff --git a/src/components/RetroList/ContentsList.tsx b/src/components/RetroList/ContentsList.tsx index ef28637..f1d96ba 100644 --- a/src/components/RetroList/ContentsList.tsx +++ b/src/components/RetroList/ContentsList.tsx @@ -1,4 +1,8 @@ import { useState } from 'react'; +import { useNavigate } from 'react-router-dom'; +import { useRecoilState } from 'recoil'; +import { PatchRetrospectiveRequest } from '@/api/@types/Retrospectives'; +import { patchRetrospective } from '@/api/retrospectivesApi/patchRetrospective'; import BookmarkIcon_N from '@/assets/BookmarkIcon_N.png'; import BookmarkIcon_Y from '@/assets/BookmarkIcon_Y.png'; import MoreIcon from '@/assets/MoreIcon.png'; @@ -9,6 +13,9 @@ import ProgressIng from '@/assets/Progress_Ing.png'; import TeamIcon from '@/assets/TeamIcon.png'; import Thumbnail from '@/assets/Thumbnail.png'; import Modal from '@/components/RetroList/Modal'; +import UserNickname from '@/components/user/UserNickname'; +import { useCustomToast } from '@/hooks/useCustomToast'; +import { userNicknameState } from '@/recoil/user/userAtom'; import * as S from '@/styles/RetroList/ContentsList.styles'; interface Content { @@ -29,10 +36,28 @@ interface ContentListProps { data: Content[]; viewMode: string; searchData: string; + setBookmarkUpdate: React.Dispatch>; } -const ContentList: React.FC = ({ data, viewMode, searchData }) => { +const ContentList: React.FC = ({ data, viewMode, searchData, setBookmarkUpdate }) => { + // const [contentData, setContentData] = useState(data); 받아온데이터 + const [userNickname, setUserNickname] = useRecoilState(userNicknameState); const [openModalId, setOpenModalId] = useState(null); + const toast = useCustomToast(); + + const handleBookmark = async (itemId: number) => { + try { + const requestData: PatchRetrospectiveRequest = { + retrospectiveId: itemId, + }; + const response = await patchRetrospective(requestData); + console.log('북마크 patch 요청 완료', response); + setBookmarkUpdate(prev => !prev); + } catch (error) { + // console.error('북마크 patch 요청 실패:', error); + toast.error(error); + } + }; const openModalForItem = (itemId: number) => { setOpenModalId(itemId); @@ -43,6 +68,8 @@ const ContentList: React.FC = ({ data, viewMode, searchData }) }; const filteredData = data.filter(item => item.title.toLowerCase().includes(searchData.toLowerCase())); + console.log('filter', filteredData); + const navigate = useNavigate(); return (
@@ -57,16 +84,37 @@ const ContentList: React.FC = ({ data, viewMode, searchData })
- {item.title} + navigate(`/section?retrospectiveId=${item.id}&teamId=${item.teamId}`)}> + {item.title} +
- {/* 북마크 patch */} - openModalForItem(item.id)} /> + handleBookmark(item.id)} + /> + openModalForItem(item.id)} + // onClick={() => { + // if(유저아이디 !== item.id) { // 수정 권한 없을 때(생성자가 아닐 때) + // openModalForItem(item.id) + // } else { + // navigate(`/revise?retrospectiveId=${item.id}&teamId=${item.teamId}`); + // } + // }} + />
- {item.userId} + + {/* 생성자 이름(유저 식별 필요) */} + {userNickname} +
- {item.createdDate} 수정 - {/* 수정하면 수정 시각으로 변경*/} + + {item.updatedDate && item.updatedDate !== item.startDate + ? `${item.updatedDate} 수정` + : item.startDate} + = ({ data, viewMode, searchData })
{filteredData.map(item => ( - {item.title} + navigate(`/section?retrospectiveId=${item.id}&teamId=${item.teamId}`)}> + {item.title} + - {/* 생성자 이름 */} + {/* 생성자이름(유저 식별 필요) */} + {userNickname} - {item.createdDate} {/* 수정하면 수정 시각으로 변경*/} + {item.updatedDate && item.updatedDate !== item.startDate ? `${item.updatedDate}` : item.startDate} - + handleBookmark(item.id)} + /> + {/* 북마크 patch */} = ({ data, viewMode, searchData }) /> - openModalForItem(item.id)} /> + openModalForItem(item.id)} + // onClick={() => { + // if(유저아이디 !== item.id) { // 수정 권한 없을 때(생성자가 아닐 때) + // openModalForItem(item.id) + // } else { + // navigate(`/revise?retrospectiveId=${item.id}&teamId=${item.teamId}`); + // } + // }} + /> diff --git a/src/components/RetroList/ControlBar.tsx b/src/components/RetroList/ControlBar.tsx deleted file mode 100644 index e2a3ea0..0000000 --- a/src/components/RetroList/ControlBar.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import BookmarkButton from '@/components/RetroList/BookmarkButton'; -import OrderButton from '@/components/RetroList/OrderButton'; -import ProgressButton from '@/components/RetroList/ProgressButton'; - -import * as S from '@/styles/RetroList/ControlBar.styles'; - -const ControlBar: React.FC = () => { - return ( - - - - - - ); -}; - -export default ControlBar; diff --git a/src/components/RetroList/OrderButton.tsx b/src/components/RetroList/OrderButton.tsx index 8d454be..18875b7 100644 --- a/src/components/RetroList/OrderButton.tsx +++ b/src/components/RetroList/OrderButton.tsx @@ -5,7 +5,11 @@ import NewestIcon from '@/assets/Newest.png'; import OldestIcon from '@/assets/Oldest.png'; import * as S from '@/styles/RetroList/OrderButton.styles'; -const OrderButton: React.FC = () => { +interface OrderButtonProps { + handleOrder: (option: 'NEWEST' | 'OLDEST') => void; +} + +const OrderButton: React.FC = ({ handleOrder }) => { const order = ['Newest', 'Oldest']; const [isOpen, setIsOpen] = useState(false); const [selectedOrder, setSelectedOrder] = useState(order[0]); @@ -20,7 +24,12 @@ const OrderButton: React.FC = () => { }; const handleOptionClick = (option: string) => { + const order: { [key: string]: string } = { + Newest: 'NEWEST', + Oldest: 'OLDEST', + }; setSelectedOrder(option); + handleOrder(order[option] as 'NEWEST' | 'OLDEST'); setIsOpen(false); }; diff --git a/src/components/RetroList/Pagination.tsx b/src/components/RetroList/Pagination.tsx new file mode 100644 index 0000000..3b79c03 --- /dev/null +++ b/src/components/RetroList/Pagination.tsx @@ -0,0 +1,61 @@ +import React, { useState, useEffect } from 'react'; +import * as S from '@/styles/RetroList/Pagination.styles'; + +interface PaginationProps { + totalPage: number; + limit: number; + page: number; + setPage: React.Dispatch>; +} + +const Pagination: React.FC = ({ totalPage, limit, page, setPage }) => { + const [currentPageArray, setCurrentPageArray] = useState([]); + const [totalPageArray, setTotalPageArray] = useState([]); + + const sliceArrayByLimit = (totalPage: number, limit: number): number[][] => { + const totalPageArray = Array.from(Array(totalPage).keys()); + return Array(Math.ceil(totalPage / limit)) + .fill(null) + .map(() => totalPageArray.splice(0, limit)); + }; + + useEffect(() => { + if (page % limit === 1) { + setCurrentPageArray(totalPageArray[Math.floor(page / limit)]); + } else if (page % limit === 0) { + setCurrentPageArray(totalPageArray[Math.floor(page / limit) - 1]); + } + }, [page, limit, totalPageArray]); + + useEffect(() => { + const slicedPageArray = sliceArrayByLimit(totalPage, limit); + setTotalPageArray(slicedPageArray); + setCurrentPageArray(slicedPageArray[0]); + }, [totalPage, limit]); + + return ( + + + +
+ {currentPageArray?.map(i => ( + setPage(i + 1)} + aria-current={page === i + 1 ? true : undefined} + > + {i + 1} + + ))} +
+ + + + ); +}; + +export default Pagination; diff --git a/src/components/RetroList/ProgressButton.tsx b/src/components/RetroList/ProgressButton.tsx index cd35947..07317d1 100644 --- a/src/components/RetroList/ProgressButton.tsx +++ b/src/components/RetroList/ProgressButton.tsx @@ -7,7 +7,11 @@ import ProgressDone from '@/assets/Progress_Done.png'; import ProgressIng from '@/assets/Progress_Ing.png'; import * as S from '@/styles/RetroList/ProgressButton.style'; -const ProgressButton: React.FC = () => { +interface StatusProps { + handleStatus: (option: 'ALL' | 'NOT_STARTED' | 'IN_PROGRESS' | 'COMPLETED') => void; +} + +const ProgressButton: React.FC = ({ handleStatus }) => { const options = ['ALL', 'Before', 'Ing', 'Done']; const [isOpen, setIsOpen] = useState(false); const [selectedOption, setSelectedOption] = useState(options[0]); @@ -24,7 +28,14 @@ const ProgressButton: React.FC = () => { }; const handleOptionClick = (option: string) => { + const status: { [key: string]: string } = { + ALL: 'ALL', + Before: 'NOT_STARTED', + Ing: 'IN_PROGRESS', + Done: 'COMPLETED', + }; setSelectedOption(option); + handleStatus(status[option] as 'ALL' | 'NOT_STARTED' | 'IN_PROGRESS' | 'COMPLETED'); setIsOpen(false); }; diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx index 54fc33e..18fd153 100644 --- a/src/pages/HomePage.tsx +++ b/src/pages/HomePage.tsx @@ -20,7 +20,6 @@ const App: React.FC = () => {
- {/* */}
@@ -39,7 +38,6 @@ const App: React.FC = () => {
- {/* */} ); diff --git a/src/pages/RetroListPage.tsx b/src/pages/RetroListPage.tsx index d1cffb5..b0cbc04 100644 --- a/src/pages/RetroListPage.tsx +++ b/src/pages/RetroListPage.tsx @@ -1,87 +1,18 @@ -import { useState } from 'react'; +import { useEffect, useState } from 'react'; +import { GetRetrospectiveRequest, GetRetrospectiveResponseNodes } from '@/api/@types/Retrospectives'; +import { GetRetrospectiveData } from '@/api/@types/Retrospectives'; +import { queryGetRetrospective } from '@/api/retrospectivesApi/getRetrospective'; +import BookmarkButton from '@/components/RetroList/BookmarkButton'; import ContentsFilter from '@/components/RetroList/ContentsFilter'; import ContentList from '@/components/RetroList/ContentsList'; -import ControlBar from '@/components/RetroList/ControlBar'; +import OrderButton from '@/components/RetroList/OrderButton'; +import Pagination from '@/components/RetroList/Pagination'; +import ProgressButton from '@/components/RetroList/ProgressButton'; import Search from '@/components/RetroList/Search'; import ViewButton from '@/components/RetroList/ViewButton'; +import { useCustomToast } from '@/hooks/useCustomToast'; import * as S from '@/styles/RetroList/RetroListPage.style'; -// 예시 데이터 -const dummy = { - code: 200, - message: null, - data: { - totalCount: 5, - nodes: [ - { - id: 1, - title: 'Sample Title 1', - userId: 100, - teamId: 200, // team - templateId: 0, - status: 'NOT_STARTED', - isBookmarked: false, - thumbnail: '', - startDate: '2024-04-10T09:22:51.538Z', - createdDate: '2024-04-10T09:22:51.538Z', - updatedDate: '2024-04-10T09:22:51.538Z', - }, - { - id: 2, - title: 'Sample Title 2', - userId: 101, - teamId: 300, // team - templateId: 0, - status: 'NOT_STARTED', - isBookmarked: true, - thumbnail: '', - startDate: '2024-04-11T09:22:51.538Z', - createdDate: '2024-04-11T09:22:51.538Z', - updatedDate: '2024-04-11T09:22:51.538Z', - }, - { - id: 3, - title: 'Sample Title 3', - userId: 102, - teamId: 400, // team - templateId: 0, - status: 'IN_PROGRESS', - isBookmarked: false, - thumbnail: 'https://example.com/thumbnail3.jpg', - startDate: '2024-04-12T09:22:51.538Z', - createdDate: '2024-04-12T09:22:51.538Z', - updatedDate: '2024-04-12T09:22:51.538Z', - }, - { - id: 4, - title: 'Sample Title 4', - userId: 103, - teamId: null, // personal - templateId: 0, - status: 'IN_PROGRESS', - isBookmarked: true, - thumbnail: 'https://example.com/thumbnail4.jpg', - startDate: '2024-04-13T09:22:51.538Z', - createdDate: '2024-04-13T09:22:51.538Z', - updatedDate: '2024-04-13T09:22:51.538Z', - }, - { - id: 5, - title: 'Sample Title 5', - userId: 104, - teamId: null, // personal - templateId: 0, - status: 'COMPLETED', - isBookmarked: false, - thumbnail: 'https://example.com/thumbnail5.jpg', - startDate: '2024-04-14T09:22:51.538Z', - createdDate: '2024-04-14T09:22:51.538Z', - updatedDate: '2024-04-14T09:22:51.538Z', - }, - ], - }, -}; - const formatDate = (isoDateString: string) => { const date = new Date(isoDateString); const year = date.getFullYear(); @@ -89,51 +20,148 @@ const formatDate = (isoDateString: string) => { const day = String(date.getDate()).padStart(2, '0'); const hours = String(date.getHours()).padStart(2, '0'); const minutes = String(date.getMinutes()).padStart(2, '0'); - return `${year}-${month}-${day} ${hours}:${minutes}`; }; const RetroListPage = () => { - // data 부분만 가져오기 - const { nodes } = dummy.data; + const [data, setData] = useState({ totalCount: 0, nodes: [] }); + const toast = useCustomToast(); + const [page, setPage] = useState(Math.ceil(data.totalCount / 10)); + const [currentPage, setCurrentPage] = useState(1); + const [bookmarkUpdate, setBookmarkUpdate] = useState(false); - const rawData = nodes.map(item => ({ - id: item.id, - title: item.title, - userId: item.userId, - teamId: item.teamId, - templateId: item.templateId, - status: item.status, - isBookmarked: item.isBookmarked, - thumbnail: item.thumbnail, - startDate: formatDate(item.startDate), - createdDate: formatDate(item.createdDate), - updatedDate: formatDate(item.updatedDate), - })); + const [query, setQuery] = useState({ + page: 0, + size: 10, + order: 'NEWEST', + status: 'NOT_STARTED', + keyword: '', + isBookmarked: false, + }); - // useEffect(() => { - // fetch(''); // url - // }); + useEffect(() => { + setPage(Math.ceil(data.totalCount / 10)); + }, [data]); - const [retroData, setRetroData] = useState(rawData); + useEffect(() => { + setQuery(prev => { + return { ...prev, page: currentPage - 1 }; + }); + }, [currentPage]); + + useEffect(() => { + const fetchRetrolist = async () => { + // console.log(query); + try { + const responseData = await queryGetRetrospective(query); + // console.log(query); + // console.log('회고 조회 성공'); + setData(responseData.data); + } catch (error) { + // console.error('회고 데이터를 가져오는 도중 오류가 발생했습니다:', error); + toast.error(error); + } + }; + fetchRetrolist(); + }, [query, bookmarkUpdate]); + + const [retroData, setRetroData] = useState>([]); const [viewMode, setViewMode] = useState('board'); const [searchData, setSearchData] = useState(''); + useEffect(() => { + // data 부분만 저장 + const rawData = data.nodes.map(item => ({ + id: item.id, + title: item.title, + userId: item.userId, + teamId: item.teamId, + templateId: item.templateId, + status: item.status, + isBookmarked: item.isBookmarked, + thumbnail: item.thumbnail, + startDate: formatDate(item.startDate), + createdDate: formatDate(item.createdDate), + updatedDate: formatDate(item.updatedDate), + })); + setRetroData(rawData); + }, [data]); + + // console.log(retroData); const handleContentsFilter = (filterType: string) => { if (filterType === 'Personal') { - const filtered = rawData.filter(item => item.teamId === null); + const filtered = data.nodes + .filter(item => item.teamId === null) + .map(item => ({ + id: item.id, + title: item.title, + userId: item.userId, + teamId: item.teamId, + templateId: item.templateId, + status: item.status, + isBookmarked: item.isBookmarked, + thumbnail: item.thumbnail, + startDate: formatDate(item.startDate), + createdDate: formatDate(item.createdDate), + updatedDate: formatDate(item.updatedDate), + })); setRetroData(filtered); } else if (filterType === 'Teams') { - const filtered = rawData.filter(item => item.teamId !== null); + const filtered = data.nodes + .filter(item => item.teamId !== null) + .map(item => ({ + id: item.id, + title: item.title, + userId: item.userId, + teamId: item.teamId, + templateId: item.templateId, + status: item.status, + isBookmarked: item.isBookmarked, + thumbnail: item.thumbnail, + startDate: formatDate(item.startDate), + createdDate: formatDate(item.createdDate), + updatedDate: formatDate(item.updatedDate), + })); setRetroData(filtered); } else if (filterType === 'ALL') { + const rawData = data.nodes.map(item => ({ + id: item.id, + title: item.title, + userId: item.userId, + teamId: item.teamId, + templateId: item.templateId, + status: item.status, + isBookmarked: item.isBookmarked, + thumbnail: item.thumbnail, + startDate: formatDate(item.startDate), + createdDate: formatDate(item.createdDate), + updatedDate: formatDate(item.updatedDate), + })); setRetroData(rawData); } }; + const handleStatus = (option: 'ALL' | 'NOT_STARTED' | 'IN_PROGRESS' | 'COMPLETED') => { + setQuery(prev => { + return { ...prev, status: option }; + }); + }; + const handleOrder = (option: 'NEWEST' | 'OLDEST') => { + setQuery(prev => { + return { ...prev, order: option }; + }); + }; + + const handleBookmarkButton = (option: boolean) => { + setQuery(prev => { + return { ...prev, isBookmarked: option }; + }); + }; + const handleViewModeChange = (newStatus: string) => { setViewMode(newStatus); }; + const handleSearch = (searchTerm: string) => { setSearchData(searchTerm); }; @@ -152,10 +180,22 @@ const RetroListPage = () => { - + + + + + - + + + +
); diff --git a/src/styles/RetroList/ContentsList.styles.ts b/src/styles/RetroList/ContentsList.styles.ts index 96df750..7207c27 100644 --- a/src/styles/RetroList/ContentsList.styles.ts +++ b/src/styles/RetroList/ContentsList.styles.ts @@ -94,6 +94,7 @@ export const ProgressIcon = styled.img` export const ListContainer = styled.div` padding-top: 10px; + padding-bottom: 20px; `; export const ListTopBox = styled.div` @@ -111,6 +112,9 @@ export const ItemBox = styled.li` export const ListTitleBox = styled.div` flex: 1; + &:hover { + cursor: pointer; + } `; export const ListUserBox = styled.div` flex: 1; @@ -131,4 +135,7 @@ export const ListProgressBox = styled.div` export const Icon = styled.img` width: 20px; height: 20px; + &:hover { + cursor: pointer; + } `; diff --git a/src/styles/RetroList/ControlBar.styles.ts b/src/styles/RetroList/ControlBar.styles.ts deleted file mode 100644 index 73fa972..0000000 --- a/src/styles/RetroList/ControlBar.styles.ts +++ /dev/null @@ -1,8 +0,0 @@ -import styled from 'styled-components'; - -export const Container = styled.div` - margin-left: 50px; - margin-right: 50px; - margin-top: 15px; - display: flex; -`; diff --git a/src/styles/RetroList/Modal.styles.ts b/src/styles/RetroList/Modal.styles.ts index 3388ebd..a027fba 100644 --- a/src/styles/RetroList/Modal.styles.ts +++ b/src/styles/RetroList/Modal.styles.ts @@ -10,6 +10,7 @@ export const ModalOverlay = styled.div<{ isOpen: boolean }>` display: ${props => (props.isOpen ? 'flex' : 'none')}; justify-content: center; align-items: center; + z-index: 999; `; export const ModalContent = styled.div` diff --git a/src/styles/RetroList/Pagination.styles.ts b/src/styles/RetroList/Pagination.styles.ts new file mode 100644 index 0000000..3d8196d --- /dev/null +++ b/src/styles/RetroList/Pagination.styles.ts @@ -0,0 +1,49 @@ +import styled from 'styled-components'; +export const Conatiner = styled.div` + position: absolute; + bottom: 0; + width: 100%; + padding-bottom: 10px; +`; +export const ButtonContainer = styled.div` + margin-top: 20px; + display: flex; + flex-direction: row; + justify-content: center; +`; +export const LeftArrow = styled.span` + background-color: #f0f0f0; + margin-right: 10px; + font-weight: bold; + font-size: large; + color: #888888; + padding: 3px; + border-radius: 3px; +`; + +export const RightArrow = styled.span` + background-color: #f0f0f0; + margin-left: 10px; + font-weight: bold; + font-size: large; + color: #888888; + padding: 3px; + border-radius: 3px; +`; + +export const PageNumberContainer = styled.div` + margin-left: 10px; + margin-right: 10px; + display: inline; +`; + +export const PageNumber = styled.button<{ active?: boolean }>` + font-size: large; + font-weight: bold; + color: ${({ active }) => (active ? '#111b47' : '#c3c3c3')}; + + &:active, + &:focus { + outline: none; + } +`; diff --git a/src/styles/RetroList/RetroListPage.style.ts b/src/styles/RetroList/RetroListPage.style.ts index 1c2ee02..5233747 100644 --- a/src/styles/RetroList/RetroListPage.style.ts +++ b/src/styles/RetroList/RetroListPage.style.ts @@ -28,3 +28,15 @@ export const Box = styled.div` padding-left: 40px; padding-right: 40px; `; + +export const ControBarContainer = styled.div` + margin-left: 50px; + margin-right: 50px; + margin-top: 15px; + display: flex; +`; + +export const PageContainer = styled.div` + margin-top: 40px; + margin-bottom: 20px; +`;