From c0ac753e98410548a2b3fe7698b1a24222c30f5c Mon Sep 17 00:00:00 2001 From: inung1004 Date: Thu, 7 Dec 2023 19:14:14 +0900 Subject: [PATCH 1/8] =?UTF-8?q?add=20::=20=EB=B2=84=EA=B7=B8=EC=A0=9C?= =?UTF-8?q?=EB=B3=B4=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/teacher/src/assets/tab/Bug.tsx | 24 ++++++++++++++++++++++++ packages/teacher/src/assets/tab/index.ts | 1 + 2 files changed, 25 insertions(+) create mode 100644 packages/teacher/src/assets/tab/Bug.tsx diff --git a/packages/teacher/src/assets/tab/Bug.tsx b/packages/teacher/src/assets/tab/Bug.tsx new file mode 100644 index 00000000..f6883712 --- /dev/null +++ b/packages/teacher/src/assets/tab/Bug.tsx @@ -0,0 +1,24 @@ +interface Props { + color?: boolean; +} + +const Bug = ({ color }: Props) => { + return ( + + + + ); +}; + +export default Bug; diff --git a/packages/teacher/src/assets/tab/index.ts b/packages/teacher/src/assets/tab/index.ts index 8ceefb7a..808d2b03 100644 --- a/packages/teacher/src/assets/tab/index.ts +++ b/packages/teacher/src/assets/tab/index.ts @@ -1,3 +1,4 @@ export { default as attendance } from "./Attendance"; export { default as check } from "./Check"; export { default as list } from "./List"; +export { default as Bug } from "./Bug"; From 2564f18e5a5d1c5b9bc78320e5f68f33e056b43e Mon Sep 17 00:00:00 2001 From: inung1004 Date: Thu, 7 Dec 2023 19:14:58 +0900 Subject: [PATCH 2/8] =?UTF-8?q?remove=20::=20=EC=82=AC=EC=9A=A9=20?= =?UTF-8?q?=EC=95=88=20=ED=95=98=EB=8A=94=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/common/dropdown/index.tsx | 86 ------------------- 1 file changed, 86 deletions(-) delete mode 100644 packages/teacher/src/components/common/dropdown/index.tsx diff --git a/packages/teacher/src/components/common/dropdown/index.tsx b/packages/teacher/src/components/common/dropdown/index.tsx deleted file mode 100644 index 56d41f35..00000000 --- a/packages/teacher/src/components/common/dropdown/index.tsx +++ /dev/null @@ -1,86 +0,0 @@ -import { useState, useMemo } from "react"; -import styled from "@emotion/styled"; - -export interface OptionArrType { - option: string; - value: string; -} - -interface DropDownProps { - options: Array; - value: string; - onChangeValue: (value: string) => void; -} - -const DropDown = ({ onChangeValue, options, value }: DropDownProps) => { - const [isFold, setIsFold] = useState(false); - - const onClickOption = (clickedOption: string) => { - onChangeValue(clickedOption); - setIsFold(false); - }; - - const selectedValue = useMemo(() => { - const index = options.findIndex((i: OptionArrType) => i.value === value); - if (index === -1) return value; - return options[index].option; - }, [value]); - - return ( - - - {isFold && ( - - {options.map((item, idx) => ( - onClickOption(item.value)}> - {item.value} - - ))} - - )} - - ); -}; - -export default DropDown; - -const Wrapper = styled.div` - position: relative; - width: 100px; - height: 32px; - background-color: #f9f7fa; - border: 1px solid #b7b4bd; - border-radius: 8px; - color: #5c5961; - > label { - cursor: pointer; - display: flex; - justify-content: center; - align-items: center; - width: 100px; - height: 32px; - } -`; - -const ListWrapper = styled.div` - position: absolute; - top: 32px; - right: 0; - z-index: 99; - width: 100px; - background-color: #f9f7fa; - border: 1px solid #b7b4bd; - border-radius: 8px; - color: #5c5961; -`; - -const ListOptionBox = styled.div` - border: 1px solid #b7b4bd; - display: flex; - justify-content: center; - align-items: center; - width: 100%; - height: 32px; -`; From 717a14be5dd45637bab9c52e99f81a5081a5bed1 Mon Sep 17 00:00:00 2001 From: inung1004 Date: Thu, 7 Dec 2023 19:15:34 +0900 Subject: [PATCH 3/8] =?UTF-8?q?feat=20::=20=ED=83=AD=EB=B0=94=EC=97=90=20?= =?UTF-8?q?=EB=B2=84=EA=B7=B8=EC=A0=9C=EB=B3=B4=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/teacher/src/components/common/tab/index.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/teacher/src/components/common/tab/index.tsx b/packages/teacher/src/components/common/tab/index.tsx index e87da898..7e9392c1 100644 --- a/packages/teacher/src/components/common/tab/index.tsx +++ b/packages/teacher/src/components/common/tab/index.tsx @@ -1,10 +1,11 @@ import { ReactElement, useState } from "react"; import styled from "@emotion/styled"; -import { attendance, check, list } from "@/assets/tab"; +import { Bug, attendance, check, list } from "@/assets/tab"; import CheckPage from "@/pages/check"; import OutingListPage from "@/pages/outingList"; import OutingApplyListPage from "@/pages/outingApplyList"; import TabItem from "./TabItem"; +import BugReportPage from "@/pages/bugReport"; interface TabProps { [key: string]: ReactElement; @@ -17,12 +18,14 @@ const Tab = () => { { title: "출석 확인", Icon: attendance }, { title: "외출 목록", Icon: list }, { title: "외출 수락", Icon: check }, + { title: "버그 제보", Icon: Bug }, ]; const tab: TabProps = { 0: , 1: , 2: , + 3: , }; const onClickTab = (idx: number) => { From dbbfa3e9c9ce3b1a6f19fad6070ff327361e2db0 Mon Sep 17 00:00:00 2001 From: inung1004 Date: Thu, 7 Dec 2023 19:16:05 +0900 Subject: [PATCH 4/8] =?UTF-8?q?feat=20::=20=EB=93=9C=EB=A1=AD=EB=8B=A4?= =?UTF-8?q?=EC=9A=B4=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=A0=9C?= =?UTF-8?q?=EC=9E=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/bugReport/DropDown.tsx | 80 +++++++++++++++++++ 1 file changed, 80 insertions(+) create mode 100644 packages/teacher/src/components/bugReport/DropDown.tsx diff --git a/packages/teacher/src/components/bugReport/DropDown.tsx b/packages/teacher/src/components/bugReport/DropDown.tsx new file mode 100644 index 00000000..ac01f2df --- /dev/null +++ b/packages/teacher/src/components/bugReport/DropDown.tsx @@ -0,0 +1,80 @@ +import { dropDown } from "@/assets/outingAccept"; +import { ISortOption, bugReportOption } from "@/constants/DropDownItem"; +import styled from "@emotion/styled"; +import Image from "next/image"; +import { useState } from "react"; + +interface DropDownProps { + dropDownValue: ISortOption; + setDropDownValue: React.Dispatch>; +} + +const DropDown = ({ dropDownValue, setDropDownValue }: DropDownProps) => { + const [isFold, setIsFold] = useState(true); + + const changeIsFoldState = () => { + setIsFold(!isFold); + }; + + const handleOptionClick = (value: ISortOption) => { + setDropDownValue(value); + changeIsFoldState(); + }; + + return ( +
+ + {dropDownValue.value} + + + {!isFold && ( + + {bugReportOption.map((value) => ( +

handleOptionClick(value)}> + {value.value} +

+ ))} + + )} +
+ ); +}; + +const Head = styled.button` + display: flex; + padding: 6px 12px; + gap: 8px; + justify-content: center; + align-items: center; + border-radius: 16px; + border: none; + font-weight: 400; + font-size: 14px; + line-height: 20px; + background-color: ${({ theme }) => theme.colors.gray100}; + color: ${({ theme }) => theme.colors.gray900}; +`; + +const Body = styled.span` + background: white; + border: 1px solid ${({ theme }) => theme.colors.gray300}; + box-shadow: 0px 2px 8px rgba(33, 33, 33, 0.25); + border-radius: 12px; + display: flex; + flex-direction: column; + font-weight: 400; + font-size: 14px; + line-height: 20px; + gap: 20px; + padding: 16px; + position: fixed; + top: 140px; +`; + +export default DropDown; From 8a5184156be0d555c7434028ad2f4ad774e695fa Mon Sep 17 00:00:00 2001 From: inung1004 Date: Thu, 7 Dec 2023 19:16:16 +0900 Subject: [PATCH 5/8] =?UTF-8?q?feat=20::=20=EB=B2=84=EA=B7=B8=EC=A0=9C?= =?UTF-8?q?=EB=B3=B4=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=ED=97=A4=EB=8D=94=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=A0=9C=EC=9E=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/bugReport/Header.tsx | 43 +++++++++++++++++++ 1 file changed, 43 insertions(+) create mode 100644 packages/teacher/src/components/bugReport/Header.tsx diff --git a/packages/teacher/src/components/bugReport/Header.tsx b/packages/teacher/src/components/bugReport/Header.tsx new file mode 100644 index 00000000..5cbd0ea9 --- /dev/null +++ b/packages/teacher/src/components/bugReport/Header.tsx @@ -0,0 +1,43 @@ +import styled from "@emotion/styled"; + +interface HeaderProps { + isSubmitEnabled: boolean; + handleReportCliCk: () => void; +} + +const Header = ({ isSubmitEnabled, handleReportCliCk }: HeaderProps) => { + return ( + + 버그 제보 + + 제출 + + + ); +}; + +const Container = styled.div` + display: flex; + justify-content: space-between; + height: 56px; + align-items: center; +`; + +const Title = styled.h1` + font-size: 20px; + font-weight: 500; + color: ${({ theme }) => theme.colors.black}; +`; + +const Report = styled.p<{ isSubmitEnabled: boolean }>` + color: ${(props) => + props.isSubmitEnabled + ? props.theme.colors.purple300 + : props.theme.colors.gray300}; + font-size: 16px; + line-height: 20px; + font-weight: 400; + cursor: pointer; +`; + +export default Header; From 2ccf02fd117a2742f78d1777553303754abdfa3c Mon Sep 17 00:00:00 2001 From: inung1004 Date: Thu, 7 Dec 2023 19:16:41 +0900 Subject: [PATCH 6/8] =?UTF-8?q?feat=20::=20=EB=B2=84=EA=B7=B8=EC=A0=9C?= =?UTF-8?q?=EB=B3=B4=20=EC=A7=88=EB=AC=B8=20=EB=B8=94=EB=9F=AD=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=A0=9C=EC=9E=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/bugReport/QuestionBlock.tsx | 43 +++++++++++++++++++ 1 file changed, 43 insertions(+) create mode 100644 packages/teacher/src/components/bugReport/QuestionBlock.tsx diff --git a/packages/teacher/src/components/bugReport/QuestionBlock.tsx b/packages/teacher/src/components/bugReport/QuestionBlock.tsx new file mode 100644 index 00000000..6804afd1 --- /dev/null +++ b/packages/teacher/src/components/bugReport/QuestionBlock.tsx @@ -0,0 +1,43 @@ +import styled from "@emotion/styled"; + +export interface QuestionType { + question: string; + children: JSX.Element; + isEssential: boolean; +} + +interface QuestionBlockProps { + value: QuestionType; +} + +const QuestionBlock = ({ value }: QuestionBlockProps) => { + return ( + + + {value.question} + {value.isEssential && *} + + {value.children} + + ); +}; + +const Container = styled.div` + display: flex; + gap: 8px; + flex-direction: column; +`; + +const Question = styled.p` + color: ${({ theme }) => theme.colors.gray800}; + font-size: 16px; + line-height: 20px; + font-weight: 400; + display: flex; +`; + +const RedText = styled.p` + color: red; +`; + +export default QuestionBlock; From 21255fe15a2cb5adfb4d5b2d6dfe472780b26165 Mon Sep 17 00:00:00 2001 From: inung1004 Date: Thu, 7 Dec 2023 19:17:15 +0900 Subject: [PATCH 7/8] =?UTF-8?q?fix=20::=20=EB=93=9C=EB=A1=AD=EB=8B=A4?= =?UTF-8?q?=EC=9A=B4=20=EC=98=B5=EC=85=98=20constants=EB=A1=9C=20=ED=8C=8C?= =?UTF-8?q?=EC=9D=BC=20=EC=9C=84=EC=B9=98=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/outingAccept/DropDown.tsx | 9 ++++++++- .../src/components/outingAccept/index.tsx | 2 +- .../index.ts => constants/DropDownItem.ts} | 18 +++++++----------- 3 files changed, 16 insertions(+), 13 deletions(-) rename packages/teacher/src/{components/outingAccept/constants/index.ts => constants/DropDownItem.ts} (63%) diff --git a/packages/teacher/src/components/outingAccept/DropDown.tsx b/packages/teacher/src/components/outingAccept/DropDown.tsx index a13b1969..af0e01a9 100644 --- a/packages/teacher/src/components/outingAccept/DropDown.tsx +++ b/packages/teacher/src/components/outingAccept/DropDown.tsx @@ -1,9 +1,16 @@ import { useState, useMemo } from "react"; import styled from "@emotion/styled"; import { dropDown } from "@/assets/outingAccept"; -import { IDropdownProps, ISortOption } from "./constants"; import Image from "next/image"; import OutSideClickHandler from "../common/outsideclickhandler/OutSideClickHandler"; +import { ISortOption } from "@/constants/DropDownItem"; + +interface IDropdownProps { + width: number; + options: Array; + value: string; + onChangeValue: (value: string) => void; +} const DropDown = ({ width, onChangeValue, options, value }: IDropdownProps) => { const [isFold, setIsFold] = useState(false); diff --git a/packages/teacher/src/components/outingAccept/index.tsx b/packages/teacher/src/components/outingAccept/index.tsx index d7f8bbcf..76d95593 100644 --- a/packages/teacher/src/components/outingAccept/index.tsx +++ b/packages/teacher/src/components/outingAccept/index.tsx @@ -1,6 +1,5 @@ import styled from "@emotion/styled"; import { useEffect, useState } from "react"; -import { classNumArr, gradeNumArr } from "./constants"; import { useDispatch } from "react-redux"; import ConfirmBox from "../common/confirm"; import DropDown from "./DropDown"; @@ -12,6 +11,7 @@ import { useApiError } from "@/hooks/useApiError"; import { toast } from "react-hot-toast"; import NoData from "../common/nodata"; import { getMyClass } from "@/utils/api/common"; +import { classNumArr, gradeNumArr } from "@/constants/DropDownItem"; interface Props { outing: OutingApplyListType[]; diff --git a/packages/teacher/src/components/outingAccept/constants/index.ts b/packages/teacher/src/constants/DropDownItem.ts similarity index 63% rename from packages/teacher/src/components/outingAccept/constants/index.ts rename to packages/teacher/src/constants/DropDownItem.ts index 710c5f0a..2379efd1 100644 --- a/packages/teacher/src/components/outingAccept/constants/index.ts +++ b/packages/teacher/src/constants/DropDownItem.ts @@ -3,13 +3,6 @@ export interface ISortOption { value: string; } -export interface IDropdownProps { - width: number; - options: Array; - value: string; - onChangeValue: (value: string) => void; -} - export const gradeNumArr: ISortOption[] = [ { option: "1학년", value: "1" }, { option: "2학년", value: "2" }, @@ -19,9 +12,12 @@ export const gradeNumArr: ISortOption[] = [ export const classNumArr: ISortOption[] = [ { option: "1반", value: "1" }, { option: "2반", value: "2" }, - { - option: "3반", - value: "3", - }, + { option: "3반", value: "3" }, { option: "4반", value: "4" }, ]; + +export const bugReportOption: ISortOption[] = [ + { option: "ATTENDANCE", value: "출결 관리" }, + { option: "PICNIC", value: "외출" }, + { option: "ETC", value: "기타" }, +]; From 83f3b849d717f9b49cc6edfaa395c5f3523a38e0 Mon Sep 17 00:00:00 2001 From: inung1004 Date: Thu, 7 Dec 2023 19:17:28 +0900 Subject: [PATCH 8/8] =?UTF-8?q?feat=20::=20=EB=B2=84=EA=B7=B8=EC=A0=9C?= =?UTF-8?q?=EB=B3=B4=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=ED=8D=BC=EB=B8=94?= =?UTF-8?q?=EB=A6=AC=EC=8B=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/bugReport/index.tsx | 98 +++++++++++++++++++ .../teacher/src/pages/bugReport/index.tsx | 7 ++ 2 files changed, 105 insertions(+) create mode 100644 packages/teacher/src/components/bugReport/index.tsx create mode 100644 packages/teacher/src/pages/bugReport/index.tsx diff --git a/packages/teacher/src/components/bugReport/index.tsx b/packages/teacher/src/components/bugReport/index.tsx new file mode 100644 index 00000000..62ffa086 --- /dev/null +++ b/packages/teacher/src/components/bugReport/index.tsx @@ -0,0 +1,98 @@ +import styled from "@emotion/styled"; +import { bugReportOption, ISortOption } from "@/constants/DropDownItem"; +import { useState } from "react"; +import DropDown from "./DropDown"; +import QuestionBlock, { QuestionType } from "./QuestionBlock"; +import Header from "./Header"; + +const BugReport = () => { + const [defail, setDetail] = useState(""); + const [dropDownValue, setDropDownValue] = useState( + bugReportOption[0] + ); + + let isSubmitEnabled: boolean = defail !== ""; + + const handleReportCliCk = () => {}; + + const QUESTION: QuestionType[] = [ + { + question: "어디서 버그가 발생했나요?", + children: ( + + ), + isEssential: true, + }, + { + question: "사진을 첨부해주세요.", + children: , + isEssential: false, + }, + { + question: "버그에 대해 요약해서 설명해주세요.", + children: ( + setDetail(e.target.value)} + /> + ), + isEssential: true, + }, + ]; + + return ( + +
+
+ {QUESTION.map((value) => ( + + ))} +
+ + ); +}; + +const Wrapper = styled.div` + display: flex; + flex-direction: column; + padding: 0 16px; +`; + +const Section = styled.div` + display: flex; + padding: 16px 0; + gap: 24px; + flex-direction: column; +`; + +const ImgBox = styled.span` + width: 160px; + height: 160px; + background-color: ${({ theme }) => theme.colors.gray50}; + border-radius: 8px; +`; + +const BugDetailInput = styled.textarea` + font-size: 14px; + line-height: 20px; + width: 100%; + height: 20vh; + background-color: ${({ theme }) => theme.colors.gray50}; + border-radius: 8px; + padding: 12px 16px; + border: none; + outline: none; + color: ${({ theme }) => theme.colors.gray800}; + font-weight: 400; + ::placeholder { + color: ${({ theme }) => theme.colors.gray500}; + } +`; + +export default BugReport; diff --git a/packages/teacher/src/pages/bugReport/index.tsx b/packages/teacher/src/pages/bugReport/index.tsx new file mode 100644 index 00000000..7b8c1436 --- /dev/null +++ b/packages/teacher/src/pages/bugReport/index.tsx @@ -0,0 +1,7 @@ +import BugReport from "@/components/bugReport"; + +const BugReportPage = () => { + return ; +}; + +export default BugReportPage;