diff --git a/client/src/components/Manage/Dropdown/index.tsx b/client/src/components/Manage/Dropdown/index.tsx deleted file mode 100644 index eb2a988..0000000 --- a/client/src/components/Manage/Dropdown/index.tsx +++ /dev/null @@ -1,93 +0,0 @@ -import React from "react"; -import Icon from "components/common/Icon"; -import OutsideDetecter from "hooks/useOutsideDetecter"; -import ManageDropdownProps from "./type"; -import * as S from "./style"; - -function ManageDropdown({ - formItem, - index, - dropdowns, - setDropdowns, - setModalType, - setSelectedForm, - openModal, -}: ManageDropdownProps) { - const { _id } = formItem; - - const onClickOpenDropdown = (idx: number) => { - setDropdowns((prev) => { - const value = prev[idx]; - const { length } = prev; - - const curr = Array(length).fill(false); - curr[idx] = !value; - return curr; - }); - }; - - const closeAllDropDown = () => { - const { length } = dropdowns; - setDropdowns(Array(length).fill(false)); - }; - - const onClickOpenNameChangeModal = () => { - closeAllDropDown(); - setModalType("change"); - setSelectedForm({ id: _id, index }); - openModal(); - }; - - const onClickOpenDeleteFormModal = () => { - closeAllDropDown(); - setModalType("delete"); - setSelectedForm({ id: _id, index }); - openModal(); - }; - - return ( - - { - e.stopPropagation(); - onClickOpenDropdown(index); - }} - > - - - {dropdowns[index] && ( - - -
  • - { - e.stopPropagation(); - onClickOpenNameChangeModal(); - }} - > - - 제목 바꾸기 - -
    • -
  • - { - e.stopPropagation(); - onClickOpenDeleteFormModal(); - }} - > - - 삭제 - -
    • -     -     - )} -     - ); -} - -export default ManageDropdown; diff --git a/client/src/components/Manage/Dropdown/style.ts b/client/src/components/Manage/Dropdown/style.ts deleted file mode 100644 index 1e1cf41..0000000 --- a/client/src/components/Manage/Dropdown/style.ts +++ /dev/null @@ -1,76 +0,0 @@ -import styled from "styled-components"; - -const ButtonContainer = styled.div` - display: flex; - justify-content: center; - padding: 10px; -`; - -const Button = styled.button` - border: 0; - background-color: transparent; - cursor: pointer; - - &:active { - transform: translateY(1px); - } -`; - -const NewFormButton = styled.button` - display: flex; - align-items: center; - border: 1px solid ${({ theme }) => theme.colors.grey3}; - border-radius: 3px; - margin-bottom: 10px; - padding: 5px 15px; - - background-color: transparent; - cursor: pointer; - - font-size: 16px; - font-weight: 400; - - &:active { - transform: translateY(1px); - } -`; - -const NewFormText = styled.span` - margin-left: 4px; -`; - -const Dropdown = styled.ul` - position: absolute; - top: 40px; - right: -10px; - z-index: 1; - background-color: ${({ theme }) => theme.colors.white}; - padding: 10px 0; - border-radius: 3px; - border: 1px solid ${({ theme }) => theme.colors.grey3}; - - li { - width: 180px; - text-align: left; - - &:hover { - background-color: ${({ theme }) => theme.colors.grey1}; - } - } -`; - -const DropdownButton = styled.button` - display: flex; - align-items: center; - padding: 10px; - width: 100%; - border: 0; - background-color: transparent; - cursor: pointer; -`; - -const DropdownText = styled.span` - margin-left: 8px; -`; - -export { ButtonContainer, Button, NewFormButton, NewFormText, Dropdown, DropdownButton, DropdownText }; diff --git a/client/src/components/Manage/Dropdown/type.ts b/client/src/components/Manage/Dropdown/type.ts deleted file mode 100644 index af86eff..0000000 --- a/client/src/components/Manage/Dropdown/type.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { FormItems, SelectedForm } from "types/manage"; - -interface ManageDropdownProps { - formItem: FormItems; - index: number; - dropdowns: boolean[]; - setDropdowns: React.Dispatch>; - setModalType: React.Dispatch>; - setSelectedForm: React.Dispatch>; - openModal: () => void; -} - -export default ManageDropdownProps; diff --git a/client/src/components/Manage/FormItem/index.tsx b/client/src/components/Manage/FormItem/index.tsx deleted file mode 100644 index fe5b21f..0000000 --- a/client/src/components/Manage/FormItem/index.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import React from "react"; -import { useNavigate } from "react-router-dom"; -import ManageDropdown from "components/Manage/Dropdown"; -import ManageFormItemProps from "./type"; -import * as S from "./style"; - -function ManageFormItem({ - formItem, - index, - dropdowns, - setDropdowns, - setModalType, - setSelectedForm, - openModal, -}: ManageFormItemProps) { - const navigate = useNavigate(); - const { category, _id, onBoard, response, title, updatedAt, acceptResponse } = formItem; - - const onClickNavigateForm = (formId: string) => { - navigate(`/forms/${formId}/edit`); - }; - - return ( - onClickNavigateForm(_id)}> - {title} - {acceptResponse ? "Open" : "Close"} - {response} - {updatedAt} - {onBoard ? "On" : "Off"} - {category} - - - - - ); -} - -export default ManageFormItem; diff --git a/client/src/components/Manage/FormItem/style.ts b/client/src/components/Manage/FormItem/style.ts deleted file mode 100644 index e29a95c..0000000 --- a/client/src/components/Manage/FormItem/style.ts +++ /dev/null @@ -1,142 +0,0 @@ -import styled from "styled-components"; - -const FormList = styled.ul` - display: flex; - align-items: center; - justify-content: space-around; - - background-color: ${({ theme }) => theme.colors.white}; - padding: 20px 20px; - font-size: 14px; - - &:first-child { - border-top-left-radius: 3px; - border-top-right-radius: 3px; - } - - &:hover { - background-color: ${({ theme }) => theme.colors.grey1}; - cursor: pointer; - } -`; - -const Title = styled.li` - text-align: center; - width: 30%; -`; -const Status = styled.li` - text-align: center; - width: 10%; -`; -const ResponseCount = styled.li` - text-align: center; - width: 10%; -`; -const Date = styled.li` - text-align: center; - width: 20%; -`; -const Share = styled.li` - text-align: center; - width: 10%; -`; -const Category = styled.li` - text-align: center; - width: 15%; -`; -const More = styled.li` - position: relative; - text-align: center; - width: 10%; -`; - -const ButtonContainer = styled.div` - display: flex; - justify-content: center; - padding: 10px; -`; - -const Button = styled.button` - border: 0; - background-color: transparent; - cursor: pointer; - - &:active { - transform: translateY(1px); - } -`; - -const NewFormButton = styled.button` - display: flex; - align-items: center; - border: 1px solid ${({ theme }) => theme.colors.grey3}; - border-radius: 3px; - margin-bottom: 10px; - padding: 5px 15px; - - background-color: transparent; - cursor: pointer; - - font-size: 16px; - font-weight: 400; - - &:active { - transform: translateY(1px); - } -`; - -const NewFormText = styled.span` - margin-left: 4px; -`; - -const Dropdown = styled.ul` - position: absolute; - top: 40px; - right: -10px; - z-index: 1; - background-color: ${({ theme }) => theme.colors.white}; - padding: 10px 0; - border-radius: 3px; - border: 1px solid ${({ theme }) => theme.colors.grey3}; - - li { - width: 180px; - text-align: left; - - &:hover { - background-color: ${({ theme }) => theme.colors.grey1}; - } - } -`; - -const DropdownButton = styled.button` - display: flex; - align-items: center; - padding: 10px; - width: 100%; - border: 0; - background-color: transparent; - cursor: pointer; -`; - -const DropdownText = styled.span` - margin-left: 8px; -`; - -export { - FormList, - Title, - Status, - ResponseCount, - Date, - Share, - Category, - More, - ButtonContainer, - Button, - NewFormButton, - NewFormText, - Dropdown, - DropdownButton, - DropdownText, -}; diff --git a/client/src/components/Manage/FormItem/type.ts b/client/src/components/Manage/FormItem/type.ts deleted file mode 100644 index 59e903d..0000000 --- a/client/src/components/Manage/FormItem/type.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { FormItems, SelectedForm } from "types/manage"; - -interface ManageFormItemProps { - formItem: FormItems; - index: number; - dropdowns: boolean[]; - setDropdowns: React.Dispatch>; - setModalType: React.Dispatch>; - setSelectedForm: React.Dispatch>; - openModal: () => void; -} - -export default ManageFormItemProps; diff --git a/client/src/components/Manage/Head/index.tsx b/client/src/components/Manage/Head/index.tsx deleted file mode 100644 index f5af5b4..0000000 --- a/client/src/components/Manage/Head/index.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import React from "react"; -import { useNavigate } from "react-router-dom"; -import formApi from "api/formApi"; -import Button from "components/common/Button"; -import Icon from "components/common/Icon"; -import theme from "styles/theme"; -import * as S from "./style"; - -function ManageHead() { - const navigate = useNavigate(); - - const onClickCreateForm = async () => { - const { formId } = await formApi.createForm(); - navigate(`/forms/${formId}/edit`); - }; - - return ( - - - - 제목 - 상태 - 응답수 - 수정 날짜 - 게시판 공유 - 카테고리 - 더보기 - - - ); -} - -export default ManageHead; diff --git a/client/src/components/Manage/Head/style.ts b/client/src/components/Manage/Head/style.ts deleted file mode 100644 index 871cc4a..0000000 --- a/client/src/components/Manage/Head/style.ts +++ /dev/null @@ -1,57 +0,0 @@ -import styled from "styled-components"; - -const HeaderContainer = styled.div` - margin-top: 24px; -`; - -const Header = styled.ul` - display: flex; - align-items: center; - justify-content: space-around; - - padding: 20px; - margin-top: 20px; - margin-bottom: 20px; - - border-radius: 3px; - background-color: ${({ theme }) => theme.colors.white}; - border: 1px solid ${({ theme }) => theme.colors.grey3}; - - font-size: 14px; -`; - -const NewFormText = styled.span` - margin-left: 4px; -`; - -const Title = styled.li` - text-align: center; - width: 30%; -`; -const Status = styled.li` - text-align: center; - width: 10%; -`; -const ResponseCount = styled.li` - text-align: center; - width: 10%; -`; -const Date = styled.li` - text-align: center; - width: 20%; -`; -const Share = styled.li` - text-align: center; - width: 10%; -`; -const Category = styled.li` - text-align: center; - width: 15%; -`; -const More = styled.li` - position: relative; - text-align: center; - width: 10%; -`; - -export { HeaderContainer, Header, NewFormText, Title, Status, ResponseCount, Date, Share, Category, More }; diff --git a/client/src/components/Modal/DeleteFormModal/index.tsx b/client/src/components/Modal/DeleteFormModal/index.tsx index 86c670f..0b2c9cc 100644 --- a/client/src/components/Modal/DeleteFormModal/index.tsx +++ b/client/src/components/Modal/DeleteFormModal/index.tsx @@ -26,10 +26,10 @@ function DeleteFormModal({ closeModal, renderByDeleteForm, selectedForm }: Delet color={theme.colors.red1} fontSize={theme.fontSize.sz12} custom="margin-right: 12px;" - hover={theme.colors.grey2} + hover={theme.colors.red0} active > - 확인 + 삭제 +// +// +// +// ))} +// diff --git a/client/src/components/common/Card/style.ts b/client/src/components/common/Card/style.ts new file mode 100644 index 0000000..e54b7b2 --- /dev/null +++ b/client/src/components/common/Card/style.ts @@ -0,0 +1,34 @@ +import styled from "styled-components"; + +const divFormList = styled.div` + padding-top: 17px; + border-top: 2px solid ${({ theme }) => theme.colors.grey8}; +`; + +const divFormItem = styled.div` + padding: 24px 19px 19px; + border: 1px solid ${({ theme }) => theme.colors.grey3}; + margin-top: 7px; + + &:first-child { + margin-top: 0; + } +`; + +const h3ItemTitle = styled.h3` + margin-bottom: 6px; + font-size: 16px; + font-weight: 600; +`; + +const spanItem = styled.span` + font-size: 14px; + color: #777; +`; + +const divItemButtonWrapper = styled.div` + display: flex; + margin-top: 16px; +`; + +export { divFormList, divFormItem, h3ItemTitle, spanItem, divItemButtonWrapper }; diff --git a/client/src/components/common/Dropdown/TextDropdown/index.tsx b/client/src/components/common/Dropdown/TextDropdown/index.tsx index dee3e11..c1844ba 100644 --- a/client/src/components/common/Dropdown/TextDropdown/index.tsx +++ b/client/src/components/common/Dropdown/TextDropdown/index.tsx @@ -1,28 +1,12 @@ -import React, { createContext, useContext, useMemo, useState } from "react"; +import React, { useContext, useMemo, useState } from "react"; import Icon from "components/common/Icon"; import OutsideDetecter from "hooks/useOutsideDetecter"; import theme from "styles/theme"; +import TextDropdownContext from "contexts/textDropdownContext"; +import { DropdownProps, HeadProps, ItemProps, ItemListProps } from "./type"; import * as S from "./style"; -const TextDropdownContext = createContext<{ - open: boolean; - setOpen?: React.Dispatch>; - selected?: string; - setSelected?: React.Dispatch>; - fontSize: string; -}>({ open: false, fontSize: "" }); - -function Dropdown({ - children, - state, - defaultState, - fontSize = "", -}: { - state: string; - defaultState: string; - fontSize?: string; - children: React.ReactNode; -}) { +function Dropdown({ children, state, defaultState, fontSize = "" }: DropdownProps) { const [open, setOpen] = useState(false); const [selected, setSelected] = useState(state || defaultState); @@ -42,17 +26,7 @@ Dropdown.defaultProps = { fontSize: "", }; -function Head({ - border = theme.colors.grey3, - padding = "10px", - color = theme.colors.black, - bold = false, -}: { - border?: string; - padding?: string; - color?: string; - bold?: boolean; -}) { +function Head({ border = theme.colors.grey3, padding = "10px", color = theme.colors.black, bold = false }: HeadProps) { const { setOpen, selected, fontSize } = useContext(TextDropdownContext); return ( @@ -81,7 +55,7 @@ Head.defaultProps = { bold: false, }; -function ItemList({ children, custom = "" }: { children: React.ReactNode; custom?: string }) { +function ItemList({ children, custom = "" }: ItemListProps) { const { open, setOpen } = useContext(TextDropdownContext); return open ? ( @@ -95,7 +69,7 @@ ItemList.defaultProps = { custom: "", }; -function Item({ value, onClick }: { value: string; onClick: () => void }) { +function Item({ value, onClick }: ItemProps) { const { setSelected, setOpen, fontSize } = useContext(TextDropdownContext); return ( diff --git a/client/src/components/common/Dropdown/TextDropdown/type.ts b/client/src/components/common/Dropdown/TextDropdown/type.ts index cd8d18c..547774d 100644 --- a/client/src/components/common/Dropdown/TextDropdown/type.ts +++ b/client/src/components/common/Dropdown/TextDropdown/type.ts @@ -1,8 +1,25 @@ -interface TextDropdownProps { +interface DropdownProps { state: string; - setState: (value: string) => void; - items: string[]; defaultState: string; + fontSize?: string; + children: React.ReactNode; } -export default TextDropdownProps; +interface HeadProps { + border?: string; + padding?: string; + color?: string; + bold?: boolean; +} + +interface ItemProps { + value: string; + onClick: () => void; +} + +interface ItemListProps { + children: React.ReactNode; + custom?: string; +} + +export type { DropdownProps, HeadProps, ItemProps, ItemListProps }; diff --git a/client/src/components/template/Manage/index.tsx b/client/src/components/template/BannerLayout/index.tsx similarity index 57% rename from client/src/components/template/Manage/index.tsx rename to client/src/components/template/BannerLayout/index.tsx index 3496355..472901d 100644 --- a/client/src/components/template/Manage/index.tsx +++ b/client/src/components/template/BannerLayout/index.tsx @@ -2,15 +2,15 @@ import React from "react"; import Banner from "assets/Images/Banner.png"; import Header from "components/Header"; import * as S from "./style"; -import ManageLayoutProps from "./type"; +import LayoutProps from "./type"; -function ManageLayout({ children, backgroundColor }: ManageLayoutProps) { +function BannerLayout({ children, backgroundColor, title, description }: LayoutProps) { return ( <>
    - 내 설문조사 - 내가 만든 설문조사 확인하기 + {title} + {description} {children} @@ -18,4 +18,4 @@ function ManageLayout({ children, backgroundColor }: ManageLayoutProps) { ); } -export default ManageLayout; +export default BannerLayout; diff --git a/client/src/components/template/Manage/style.ts b/client/src/components/template/BannerLayout/style.ts similarity index 97% rename from client/src/components/template/Manage/style.ts rename to client/src/components/template/BannerLayout/style.ts index b4d5afc..172c6fa 100644 --- a/client/src/components/template/Manage/style.ts +++ b/client/src/components/template/BannerLayout/style.ts @@ -11,7 +11,6 @@ const getBackgroundColor = (backgroundColor: BackgroundColor) => { const Main = styled.main<{ backgroundColor: BackgroundColor }>` background-color: ${({ backgroundColor }) => getBackgroundColor(backgroundColor)}; - min-height: calc(100vh - 60px); margin-left: auto; margin-right: auto; display: flex; diff --git a/client/src/components/template/BannerLayout/type.ts b/client/src/components/template/BannerLayout/type.ts new file mode 100644 index 0000000..fadc304 --- /dev/null +++ b/client/src/components/template/BannerLayout/type.ts @@ -0,0 +1,8 @@ +interface LayoutProps { + backgroundColor: "white" | "blue"; + children: React.ReactNode; + title: string; + description: string; +} + +export default LayoutProps; diff --git a/client/src/components/template/Manage/type.ts b/client/src/components/template/Manage/type.ts deleted file mode 100644 index bfd0e59..0000000 --- a/client/src/components/template/Manage/type.ts +++ /dev/null @@ -1,6 +0,0 @@ -interface ManageLayoutProps { - backgroundColor: "white" | "blue"; - children: React.ReactNode; -} - -export default ManageLayoutProps; diff --git a/client/src/contexts/textDropdownContext/index.ts b/client/src/contexts/textDropdownContext/index.ts new file mode 100644 index 0000000..fc5c946 --- /dev/null +++ b/client/src/contexts/textDropdownContext/index.ts @@ -0,0 +1,6 @@ +import { createContext } from "react"; +import DropdownValueProps from "./type"; + +const TextDropdownContext = createContext({ open: false, fontSize: "" }); + +export default TextDropdownContext; diff --git a/client/src/contexts/textDropdownContext/type.ts b/client/src/contexts/textDropdownContext/type.ts new file mode 100644 index 0000000..db5ecd5 --- /dev/null +++ b/client/src/contexts/textDropdownContext/type.ts @@ -0,0 +1,9 @@ +interface DropdownValueProps { + open: boolean; + setOpen?: React.Dispatch>; + selected?: string; + setSelected?: React.Dispatch>; + fontSize: string; +} + +export default DropdownValueProps; diff --git a/client/src/pages/Forum/index.tsx b/client/src/pages/Forum/index.tsx index 92c44dc..2cfa0cf 100644 --- a/client/src/pages/Forum/index.tsx +++ b/client/src/pages/Forum/index.tsx @@ -1,11 +1,12 @@ import React, { useState } from "react"; import { useNavigate } from "react-router-dom"; -import Layout from "components/template/Layout"; +import Layout from "components/template/BannerLayout"; import Button from "components/common/Button"; import theme from "styles/theme"; import boardApi from "api/forumApi"; import { useQuery } from "@tanstack/react-query"; import TextDropdown from "components/common/Dropdown/TextDropdown"; +import Card from "components/common/Card"; import { ForumCategory, OrderBy } from "types/forum"; import { CATEGORY_FORUM_LIST } from "store/form"; import * as S from "./style"; @@ -26,13 +27,15 @@ function Forum() { const [page, setPage] = useState(1); const fetchFormList = (): Promise => boardApi.getFormList({ title: keyword, category, orderBy, page }); - const { data, refetch } = useQuery({ queryKey: ["ddd"], queryFn: fetchFormList, keepPreviousData: true }); + const { data, refetch } = useQuery({ + queryKey: [keyword, category, orderBy, page], + queryFn: fetchFormList, + keepPreviousData: true, + }); return ( - + - 설문조사 게시판 - 다양한 설문조사를 만나보세요 {CATEGORY_FORUM_LIST.map((value) => ( - setCategory("전체")} /> + setCategory(value)} /> ))} - + {data?.map(({ formId, title, category: formCategory, responseCount }) => ( - - {title} +
    - 카테고리: {formCategory} + 카테고리: {formCategory}
    - 응답 수: {responseCount} + 응답 수: {responseCount}
    - + - -     + + ))} -     +     ); diff --git a/client/src/pages/Forum/style.ts b/client/src/pages/Forum/style.ts index 0147972..14c6fe0 100644 --- a/client/src/pages/Forum/style.ts +++ b/client/src/pages/Forum/style.ts @@ -7,21 +7,6 @@ const divContainer = styled.div` const divWrapper = styled.div``; -const h1Title = styled.h1` - margin-top: 50px; - font-size: ${({ theme }) => theme.fontSize.sz32}; - font-weight: 500; - text-align: center; -`; - -const pDescription = styled.p` - margin-top: 16px; - text-align: center; - font-size: ${({ theme }) => theme.fontSize.sz16}; - font-weight: 400; - color: ${({ theme }) => theme.colors.grey5}; -`; - const divSearchBox = styled.div` margin-top: 36px; margin-bottom: 8px; @@ -38,37 +23,6 @@ const inputSearch = styled.input` vertical-align: top; `; -const divFormList = styled.div` - padding-top: 17px; - border-top: 2px solid ${({ theme }) => theme.colors.grey8}; -`; - -const divFormItem = styled.div` - padding: 24px 19px 19px; - border: 1px solid ${({ theme }) => theme.colors.grey3}; - margin-top: 7px; - - &:first-child { - margin-top: 0; - } -`; - -const h3ItemTitle = styled.h3` - margin-bottom: 6px; - font-size: 16px; - font-weight: 600; -`; - -const spanItemDate = styled.span` - font-size: 14px; - color: #777; -`; - -const divItemButtonWrapper = styled.div` - display: flex; - margin-top: 16px; -`; - const divSortWrapper = styled.div` width: 100%; height: 32px; @@ -110,15 +64,8 @@ const divCategoryWrapper = styled.div` export { divContainer, divWrapper, - h1Title, divSearchBox, inputSearch, - pDescription, - divFormList, - divFormItem, - h3ItemTitle, - spanItemDate, - divItemButtonWrapper, divSortWrapper, divSortList, inputRadio, diff --git a/client/src/pages/Manage/index.tsx b/client/src/pages/Manage/index.tsx index 2144851..edc6707 100644 --- a/client/src/pages/Manage/index.tsx +++ b/client/src/pages/Manage/index.tsx @@ -2,20 +2,21 @@ import React, { useEffect, useState } from "react"; import { useNavigate } from "react-router-dom"; import formApi from "api/formApi"; -import ManageLayout from "components/template/Manage"; +import ManageLayout from "components/template/BannerLayout"; import IconButton from "components/common/IconButton"; -import ManageHead from "components/Manage/Head"; -import ManageFormItem from "components/Manage/FormItem"; import EditNameModal from "components/Modal/EditFormNameModal"; import DeleteSurveyModal from "components/Modal/DeleteFormModal"; import useModal from "hooks/useModal"; import { FormItems, SelectedForm } from "types/manage"; +import Card from "components/common/Card"; +import Button from "components/common/Button"; +import Icon from "components/common/Icon"; +import theme from "styles/theme"; import * as S from "./style"; function Manage() { const [size, setSize] = useState(0); const [fetchedForms, setFetchedForms] = useState([]); - const [dropdowns, setDropdowns] = useState([]); const [modalType, setModalType] = useState("delete"); const [selectedForm, setSelectedForm] = useState({ id: "", index: 0 }); @@ -27,9 +28,6 @@ function Manage() { .getFormLists(size) .then((response) => { setFetchedForms((prev) => [...prev, ...response.data.form]); - - const falseArray = new Array(response.data.form.length).fill(false); - setDropdowns((prev) => [...prev, ...falseArray]); }) .catch((e) => { if (e.response?.status === 401) navigate(`/login`); @@ -46,11 +44,6 @@ function Manage() { const right = prev.slice(index + 1); return [...left, ...right]; }); - setDropdowns((prev) => { - const left = prev.slice(0, index); - const right = prev.slice(index + 1); - return [...left, ...right]; - }); }; const renderByNameChange = (index: number, title: string) => { @@ -62,23 +55,111 @@ function Manage() { }); }; + const onClickCreateForm = async () => { + const { formId } = await formApi.createForm(); + navigate(`/forms/${formId}/edit`); + }; + + const onClickNavigateEditForm = (formId: string) => { + navigate(`/forms/${formId}/edit`); + }; + + const onClickNavigateFormResult = (formId: string) => { + navigate(`/forms/${formId}/result`); + }; + + const onClickOpenNameChangeModal = (id: string, index: number) => { + setModalType("change"); + setSelectedForm({ id, index }); + openModal(); + }; + + const onClickOpenDeleteFormModal = (id: string, index: number) => { + setModalType("delete"); + setSelectedForm({ id, index }); + openModal(); + }; + return ( - + - + + + - {fetchedForms.map((formItem, index) => ( - - ))} + + {fetchedForms.map(({ category, _id, onBoard, response, title, updatedAt, acceptResponse }, index) => ( + + +
    + 카테고리: {category || "미정"} +
    +
    + 응답수: {response} +
    +
    + 수정일: {updatedAt} +
    +
    + 게시판 공유: + {onBoard ? "💡" : "🔒"} +
    +
    + 응답받기: + {acceptResponse ? "💡" : "🔒"} +
    +     + + + + + + +     + ))} +     diff --git a/client/src/pages/Manage/style.ts b/client/src/pages/Manage/style.ts index 73fe648..9bb175e 100644 --- a/client/src/pages/Manage/style.ts +++ b/client/src/pages/Manage/style.ts @@ -5,9 +5,18 @@ const Container = styled.section` margin: 0 32px; `; +const HeaderContainer = styled.div` + margin-top: 24px; + margin-bottom: 15px; +`; + +const NewFormText = styled.span` + margin-left: 4px; +`; + const FormListContainer = styled.div` background-color: ${({ theme }) => theme.colors.white}; - border: 1px solid ${({ theme }) => theme.colors.grey3}; + border: none; border-radius: 3px; `; @@ -17,4 +26,14 @@ const ButtonContainer = styled.div` padding: 10px; `; -export { Container, FormListContainer, ButtonContainer }; +const GridBox = styled.div` + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + grid-template-rows: repeat(2, minmax(0, 20px)); +`; + +const Flicker = styled.span` + font-size: ${({ theme }) => theme.fontSize.sz14}; +`; + +export { Container, FormListContainer, ButtonContainer, GridBox, Flicker, HeaderContainer, NewFormText }; diff --git a/client/src/store/form.ts b/client/src/store/form.ts index f789b98..3b0b26b 100644 --- a/client/src/store/form.ts +++ b/client/src/store/form.ts @@ -1,4 +1,5 @@ import { IconItem } from "components/common/Dropdown/IconDropdown/type"; +import { ForumCategory } from "types/forum"; const CATEGORY_LIST = ["개발 및 학습", "취업 및 채용", "취미 및 여가", "기타"]; @@ -8,6 +9,6 @@ const QUESTION_TYPE_LIST: IconItem[] = [ { text: "주관식", icon: "paragraph", value: "paragraph" }, ]; -const CATEGORY_FORUM_LIST = ["전체", "개발 및 학습", "취업 및 채용", "취미 및 여가", "기타"]; +const CATEGORY_FORUM_LIST: ForumCategory[] = ["전체", "개발 및 학습", "취업 및 채용", "취미 및 여가", "기타"]; export { CATEGORY_LIST, QUESTION_TYPE_LIST, CATEGORY_FORUM_LIST }; diff --git a/client/src/styles/theme.ts b/client/src/styles/theme.ts index 4a72c58..10a6318 100644 --- a/client/src/styles/theme.ts +++ b/client/src/styles/theme.ts @@ -11,11 +11,13 @@ const colors = { grey7: "#5f6368", grey8: "#555555", grey9: "#444444", + blue0: "#cae1ff", blue1: "#1a73e8", blue2: "#0066cc", blue3: "#3c64b1", blue4: "#3e57cb", blue5: "#284b8f", + red0: "#ffc9c9", red1: "#d93025", };