DSM-PICK · inung1004 · Dec 6, 2023 · Dec 7, 2023 · Dec 7, 2023 · Dec 7, 2023
diff --git a/packages/teacher/src/assets/tab/Bug.tsx b/packages/teacher/src/assets/tab/Bug.tsx
@@ -0,0 +1,24 @@
+interface Props {
+  color?: boolean;
+}
+
+const Bug = ({ color }: Props) => {
+  return (
+    <svg
+      width="17"
+      height="16"
+      viewBox="0 0 17 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M8.50005 13.434C8.38788 13.434 8.2768 13.4093 8.17317 13.3613C8.06953 13.3133 7.97537 13.243 7.89605 13.1543C7.81673 13.0656 7.75381 12.9603 7.71089 12.8444C7.66796 12.7286 7.64587 12.6044 7.64587 12.4789C7.64587 12.3535 7.66796 12.2293 7.71089 12.1134C7.75381 11.9976 7.81673 11.8923 7.89605 11.8036C7.97537 11.7149 8.06953 11.6446 8.17317 11.5966C8.2768 11.5486 8.38788 11.5239 8.50005 11.5239C8.72659 11.5239 8.94385 11.6245 9.10404 11.8036C9.26423 11.9827 9.35423 12.2256 9.35423 12.4789C9.35423 12.7322 9.26423 12.9752 9.10404 13.1543C8.94385 13.3334 8.72659 13.434 8.50005 13.434ZM7.78823 5.48853C7.78823 5.27745 7.86323 5.07501 7.99672 4.92575C8.13021 4.77649 8.31126 4.69263 8.50005 4.69263C8.68883 4.69263 8.86989 4.77649 9.00338 4.92575C9.13687 5.07501 9.21186 5.27745 9.21186 5.48853V9.46804C9.21186 9.67913 9.13687 9.88157 9.00338 10.0308C8.86989 10.1801 8.68883 10.2639 8.50005 10.2639C8.31126 10.2639 8.13021 10.1801 7.99672 10.0308C7.86323 9.88157 7.78823 9.67913 7.78823 9.46804V5.48853ZM16.2688 13.1348L9.97991 0.955081C9.3222 -0.31836 7.6779 -0.31836 7.02018 0.955081L0.731283 13.1348C0.0742767 14.4082 0.895001 16 2.21115 16H14.7889C16.1044 16 16.9258 14.4082 16.2688 13.1348Z"
+        fill={color ? "#3F3C42" : "#DBD7E0"}
+      />
+    </svg>
+  );
+};
+
+export default Bug;
diff --git 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";
diff --git a/packages/teacher/src/components/bugReport/DropDown.tsx 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<React.SetStateAction<ISortOption>>;
+}
+
+const DropDown = ({ dropDownValue, setDropDownValue }: DropDownProps) => {
+  const [isFold, setIsFold] = useState(true);
+
+  const changeIsFoldState = () => {
+    setIsFold(!isFold);
+  };
+
+  const handleOptionClick = (value: ISortOption) => {
+    setDropDownValue(value);
+    changeIsFoldState();
+  };
+
+  return (
+    <div>
+      <Head>
+        {dropDownValue.value}
+        <Image
+          width={8}
+          height={4}
+          src={dropDown}
+          alt=""
+          onClick={changeIsFoldState}
+        />
+      </Head>
+      {!isFold && (
+        <Body>
+          {bugReportOption.map((value) => (
+            <p key={value.option} onClick={() => handleOptionClick(value)}>
+              {value.value}
+            </p>
+          ))}
+        </Body>
+      )}
+    </div>
+  );
+};
+
+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;
diff --git a/packages/teacher/src/components/bugReport/Header.tsx 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 (
+    <Container>
+      <Title>버그 제보</Title>
+      <Report isSubmitEnabled={isSubmitEnabled} onClick={handleReportCliCk}>
+        제출
+      </Report>
+    </Container>
+  );
+};
+
+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;
diff --git a/packages/teacher/src/components/bugReport/QuestionBlock.tsx 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 (
+    <Container key={value.question}>
+      <Question>
+        {value.question}
+        {value.isEssential && <RedText>*</RedText>}
+      </Question>
+      {value.children}
+    </Container>
+  );
+};
+
+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;
diff --git a/packages/teacher/src/components/bugReport/index.tsx 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<string>("");
+  const [dropDownValue, setDropDownValue] = useState<ISortOption>(
+    bugReportOption[0]
+  );
+
+  let isSubmitEnabled: boolean = defail !== "";
+
+  const handleReportCliCk = () => {};
+
+  const QUESTION: QuestionType[] = [
+    {
+      question: "어디서 버그가 발생했나요?",
+      children: (
+        <DropDown
+          dropDownValue={dropDownValue}
+          setDropDownValue={setDropDownValue}
+        />
+      ),
+      isEssential: true,
+    },
+    {
+      question: "사진을 첨부해주세요.",
+      children: <ImgBox />,
+      isEssential: false,
+    },
+    {
+      question: "버그에 대해 요약해서 설명해주세요.",
+      children: (
+        <BugDetailInput
+          placeholder="설명을 입력해주세요."
+          onChange={(e) => setDetail(e.target.value)}
+        />
+      ),
+      isEssential: true,
+    },
+  ];
+
+  return (
+    <Wrapper>
+      <Header
+        isSubmitEnabled={isSubmitEnabled}
+        handleReportCliCk={handleReportCliCk}
+      />
+      <Section>
+        {QUESTION.map((value) => (
+          <QuestionBlock value={value} />
+        ))}
+      </Section>
+    </Wrapper>
+  );
+};
+
+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/components/common/dropdown/index.tsx b/packages/teacher/src/components/common/dropdown/index.tsx