Thanks to visit codestin.com
Credit goes to github.com

Skip to content

[#1] 오류제보, 정답제보 탭 순차적 렌더링 구현 #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jun 30, 2022
Merged

[#1] 오류제보, 정답제보 탭 순차적 렌더링 구현 #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions src/Components/Contents.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

import Introduction from "./Tabs/Introduction/Introduction";
import ErrorReport from "./Tabs/ErrorReport/ErrorReport";
import SolutionReport from "./Tabs/SolutionReport/SolutionReport";
import Introduction from "./Tabs/Introduction";
import ErrorReport from "./Tabs/ErrorReport";
import SolutionReport from "./Tabs/SolutionReport";

export default function TabNavigation() {
return (
Expand Down
91 changes: 91 additions & 0 deletions src/Components/Tabs/ErrorReport.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
import { useState } from "react";

export default function ErrorReport() {
const [submitted, setSubmitted] = useState(false);
const [errorCategory, setErrorCategory] = useState(-1);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

숫자가 아닌 실제 옵션 명으로 state가 정의 되어있으면 좋을 것 같아요. 숫자로 어떤 선택지인지 파악하기가 어렵습니다!

const [questionName, setQuestionName] = useState("");
const [detailInput, setDetailInput] = useState("");

return submitted ? (
<div>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

div 대신 용어를 담은 StyledComponent를 사용하면 해당 페이지의 구조를 더 파악하기 쉬울 것 같아요!

<p>제보해주셔서 감사합니다.</p>
<button
onClick={() => {
setSubmitted(false);
setErrorCategory(-1);
setQuestionName("");
setDetailInput("");
}}
Comment on lines +13 to +18
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이런 로직이 onClick 다이렉트로 적어 놓는 것이 아니라 handleClick 이런식으로 빼서 위에 정의를 해놓는게, 가독성 면도 그렇고 의미 측면에서도 좋다고 생각합니다.

>
다른 오류 제보
</button>
</div>
) : (
<div>
<div>
<span>오류 유형: </span>
<input
type="radio"
id="errorCategory0"
name="errorCategory"
onClick={() => setErrorCategory(0)}
/>
<label htmlFor="errorCategory0">정답 통과가 안돼요</label>
<input
type="radio"
id="errorCategory1"
name="errorCategory"
onClick={() => setErrorCategory(1)}
/>
<label htmlFor="errorCategory1">코드 복사가 안돼요</label>
<input
type="radio"
id="errorCategory2"
name="errorCategory"
onClick={() => setErrorCategory(2)}
/>
<label htmlFor="errorCategory2">기타</label>
</div>

{errorCategory === -1 || errorCategory === 1 ? null : (
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

순차적 렌더링을 위해 분기가 많이 생길 수 밖에 없는데요! 이러한 부분도 handleClick을 분리 했던 것 처럼 로직을 return 외부로 분리 시키면 좋을 것 같아요. 예를 들면 isQuestionNameVisible 이런식으로 선언해둘 수 도 있겠네요! 이러한 비슷한 값들을 담은 하나의 객체나 상태를 선언해도 좋을 것 같구요

<div>
<span>문제 이름:</span>
<input
list="questionName"
name="question"
onInput={(e) => setQuestionName(e.target.value)}
defaultValue={questionName}
/>
<datalist id="questionName">
<option value="1번문제" />
<option value="2번문제" />
<option value="3번문제" />
</datalist>
</div>
)}

{errorCategory === -1 || (errorCategory === 0 && questionName === "") ? null : (
<>
<div>
<span>내용: </span>
<textarea
rows="20"
cols="100"
onInput={(e) => setDetailInput(e.target.value)}
defaultValue={detailInput}
></textarea>
</div>
<div>
<button
id="submitBtn"
disabled={errorCategory === 2 && detailInput === ""}
onClick={() => setSubmitted(true)}
>
제출
</button>
</div>
</>
)}
</div>
);
}
34 changes: 0 additions & 34 deletions src/Components/Tabs/ErrorReport/ErrorReport.js
View file
Open in desktop

This file was deleted.

0 ...ponents/Tabs/Introduction/Introduction.js → src/Components/Tabs/Introduction.js
View file
Open in desktop
File renamed without changes.
62 changes: 62 additions & 0 deletions src/Components/Tabs/SolutionReport.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
import { useState } from "react";

export default function SolutionReport() {
const [submitted, setSubmitted] = useState(false);
const [questionName, setQuestionName] = useState("");
const [detailInput, setDetailInput] = useState("");

return submitted ? (
<div>
<p>제보해주셔서 감사합니다.</p>
<button
onClick={() => {
setSubmitted(false);
setQuestionName("");
setDetailInput("");
}}
>
다른 정답 제보
</button>
</div>
) : (
<div>
<div>
<span>문제 이름:</span>
<input
list="questionName"
name="question"
onInput={(e) => setQuestionName(e.target.value)}
defaultValue={questionName}
/>
<datalist id="questionName">
<option value="1번문제" />
<option value="2번문제" />
<option value="3번문제" />
</datalist>
</div>

{questionName === "" ? null : (
<>
<div className="gitHubLogin">
<span>기여자 등록: </span>
<button id="gitHubLoginBtn">GitHub 로그인</button>
</div>
<div>
<span>내용: </span>
<textarea
rows="20"
cols="100"
onInput={(e) => setDetailInput(e.target.value)}
defaultValue={detailInput}
></textarea>
</div>
<div>
<button id="submitBtn" disabled={detailInput === ""} onClick={() => setSubmitted(true)}>
제출
</button>
</div>
</>
)}
</div>
);
}
27 changes: 0 additions & 27 deletions src/Components/Tabs/SolutionReport/SolutionReport.js
View file
Open in desktop

This file was deleted.

6 changes: 6 additions & 0 deletions src/recoil/atom 2.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import { atom } from "recoil";

export const tabNoState = atom({
key: "tabNoState",
default: 0,
});