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

Skip to content

[#11] 제보사이트 - 코드 리뷰 반영 #12

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 4 commits into from
Jul 1, 2022
Merged

[#11] 제보사이트 - 코드 리뷰 반영 #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7ffda67
refactor: 숫자가 아닌 실제 옵션 명으로 state 정의
chaerin-dev Jul 1, 2022
3509282
refactor: onClick, onInput 내부 동작 함수로 분리
chaerin-dev Jul 1, 2022
7c79f9e
refactor: 순차적 렌더링을 위한 논리구문 변수로 분리
chaerin-dev Jul 1, 2022
da95249
refactor: StyledComponent 적용
chaerin-dev Jul 1, 2022
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: 5 additions & 1 deletion src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,14 @@
import styled from "styled-components";

import Contents from "./Components/Contents";

export default function App() {
return (
<>
<h1>🤖 프로그래머스 JS 정답 통과기</h1>
<Title>🤖 프로그래머스 JS 정답 통과기</Title>
<Contents />
</>
);
}

const Title = styled.h1``;
21 changes: 13 additions & 8 deletions src/Components/Contents.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
import styled from "styled-components";

import Introduction from "./Tabs/Introduction";
import ErrorReport from "./Tabs/ErrorReport";
Expand All @@ -7,17 +8,17 @@ import SolutionReport from "./Tabs/SolutionReport";
export default function TabNavigation() {
Copy link
Member

Choose a reason for hiding this comment

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

아래와 같은 폴더구조를 생각해보셔도 좋을 것 같아요!!

image
router.js
image
routes.js
image
App.js
image

return (
<BrowserRouter>
<ul>
<li>
<TabList>
<TabItem>
<Link to="/">소개</Link>
</li>
<li>
</TabItem>
<TabItem>
<Link to="/error-report">오류 제보</Link>
</li>
<li>
</TabItem>
<TabItem>
<Link to="/solution-report">정답 제보</Link>
</li>
</ul>
</TabItem>
</TabList>
<Routes>
<Route path="/" element={<Introduction />}></Route>
<Route path="/error-report" element={<ErrorReport />}></Route>
Expand All @@ -26,3 +27,7 @@ export default function TabNavigation() {
</BrowserRouter>
);
}

const TabList = styled.ul``;

const TabItem = styled.li``;
147 changes: 88 additions & 59 deletions src/Components/Tabs/ErrorReport.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,91 +1,120 @@
import { useState } from "react";
import {
TabWrapper,
BlockText,
Button,
StepByStepInputItem,
InlineText,
RadioInput,
Label,
TextInput,
DataList,
Option,
TextArea,
} from "./Style/StyledComponent";

export default function ErrorReport() {
const [submitted, setSubmitted] = useState(false);
const [errorCategory, setErrorCategory] = useState(-1);
const [errorCategory, setErrorCategory] = useState("");
const [questionName, setQuestionName] = useState("");
const [detailInput, setDetailInput] = useState("");
const [detailContent, setDetailContent] = useState("");

const isQuestionNameUnvisible = errorCategory === "" || errorCategory === "error-notCopied";
const isDetailContentUnvisible =
errorCategory === "" || (errorCategory === "error-wrongAnswer" && questionName === "");
const isSubmitBtnDisabled = errorCategory === "error-other" && detailContent === "";

function handleOtherErrorBtnClick() {
setSubmitted(false);
setErrorCategory("");
setQuestionName("");
setDetailContent("");
}

function handleErrorCategoryClick(e) {
setErrorCategory(e.target.id);
}

function handleQuestionNameInput(e) {
setQuestionName(e.target.value);
}

function handleDetailContentInput(e) {
setDetailContent(e.target.value);
}

function handleSubmitBtnClick() {
setSubmitted(true);
}

return submitted ? (
<div>
<p>제보해주셔서 감사합니다.</p>
<button
onClick={() => {
setSubmitted(false);
setErrorCategory(-1);
setQuestionName("");
setDetailInput("");
}}
>
다른 오류 제보
</button>
</div>
<TabWrapper>
<BlockText>제보해주셔서 감사합니다.</BlockText>
<Button onClick={handleOtherErrorBtnClick}>다른 오류 제보</Button>
</TabWrapper>
) : (
<div>
<div>
<span>오류 유형: </span>
<input
<TabWrapper>
<StepByStepInputItem>
<InlineText>오류 유형: </InlineText>
<RadioInput
type="radio"
id="errorCategory0"
id="error-wrongAnswer"
name="errorCategory"
onClick={() => setErrorCategory(0)}
onClick={handleErrorCategoryClick}
/>
<label htmlFor="errorCategory0">정답 통과가 안돼요</label>
<input
<Label htmlFor="error-wrongAnswer">정답 통과가 안돼요</Label>
<RadioInput
type="radio"
id="errorCategory1"
id="error-notCopied"
name="errorCategory"
onClick={() => setErrorCategory(1)}
onClick={handleErrorCategoryClick}
/>
<label htmlFor="errorCategory1">코드 복사가 안돼요</label>
<input
<Label htmlFor="error-notCopied">코드 복사가 안돼요</Label>
<RadioInput
type="radio"
id="errorCategory2"
id="error-other"
name="errorCategory"
onClick={() => setErrorCategory(2)}
onClick={handleErrorCategoryClick}
/>
<label htmlFor="errorCategory2">기타</label>
</div>
<Label htmlFor="error-other">기타</Label>
</StepByStepInputItem>

{errorCategory === -1 || errorCategory === 1 ? null : (
<div>
<span>문제 이름:</span>
<input
{isQuestionNameUnvisible ? null : (
<StepByStepInputItem>
<InlineText>문제 이름: </InlineText>
<TextInput
list="questionName"
name="question"
onInput={(e) => setQuestionName(e.target.value)}
onInput={handleQuestionNameInput}
defaultValue={questionName}
/>
<datalist id="questionName">
<option value="1번문제" />
<option value="2번문제" />
<option value="3번문제" />
</datalist>
</div>
<DataList id="questionName">
<Option value="1번문제" />
<Option value="2번문제" />
<Option value="3번문제" />
</DataList>
</StepByStepInputItem>
)}

{errorCategory === -1 || (errorCategory === 0 && questionName === "") ? null : (
{isDetailContentUnvisible ? null : (
<>
<div>
<span>내용: </span>
<textarea
<StepByStepInputItem>
<InlineText>내용: </InlineText>
<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)}
>
onInput={handleDetailContentInput}
defaultValue={detailContent}
></TextArea>
</StepByStepInputItem>

<StepByStepInputItem>
<Button id="submitBtn" disabled={isSubmitBtnDisabled} onClick={handleSubmitBtnClick}>
제출
</button>
</div>
</Button>
</StepByStepInputItem>
</>
)}
</div>
</TabWrapper>
);
}
9 changes: 3 additions & 6 deletions src/Components/Tabs/Introduction.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,5 @@
import { TabWrapper } from "./Style/StyledComponent";

export default function Introduction() {
return (
<div>
<p>IntroductionTab</p>
{/* IntroductionTab content will go here */}
</div>
);
return <TabWrapper>{/* IntroductionTab content will go here */}</TabWrapper>;
}
113 changes: 71 additions & 42 deletions src/Components/Tabs/SolutionReport.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,62 +1,91 @@
import { useState } from "react";
import styled from "styled-components";

import {
TabWrapper,
BlockText,
Button,
StepByStepInputItem,
InlineText,
TextInput,
DataList,
Option,
TextArea,
} from "./Style/StyledComponent";

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

const isDetailContentUnvisible = questionName === "";
const isSubmitBtnDisabled = detailContent === "";

function handleOtherSolutionBtnClick() {
setSubmitted(false);
setQuestionName("");
setDetailContent("");
}

function handleQuestionNameInput(e) {
setQuestionName(e.target.value);
}

function handleDetailContentInput(e) {
setDetailContent(e.target.value);
}

function handleSubmitBtnClick() {
setSubmitted(true);
}

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

{questionName === "" ? null : (
<DataList id="questionName">
<Option value="1번문제" />
<Option value="2번문제" />
<Option value="3번문제" />
</DataList>
</StepByStepInputItem>

{isDetailContentUnvisible ? null : (
Copy link
Member

Choose a reason for hiding this comment

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

!isDetailContentUnvisible && (<></>) 와 논리곱 연산자를 써도 좋을 것 같아요! A && B 는 A가 참이여야 B를 수행하고, A가 거짓이면 아무것도 실행하지 않는 것을 뜻합니다.

Copy link
Member

Choose a reason for hiding this comment

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

A && ()
!isDetailContentVisible && ()
앞의 조건이 true인 경우에만 뒤에 것을 시행합니다.
병합 연산자??

<>
<div className="gitHubLogin">
<span>기여자 등록: </span>
<button id="gitHubLoginBtn">GitHub 로그인</button>
</div>
<div>
<span>내용: </span>
<textarea
<StepByStepInputItem>
<InlineText>기여자 등록: </InlineText>
<GitHubLoginBtn id="gitHubLoginBtn">GitHub 로그인</GitHubLoginBtn>
</StepByStepInputItem>
<StepByStepInputItem>
<InlineText>내용: </InlineText>
<TextArea
rows="20"
cols="100"
onInput={(e) => setDetailInput(e.target.value)}
defaultValue={detailInput}
></textarea>
</div>
<div>
<button id="submitBtn" disabled={detailInput === ""} onClick={() => setSubmitted(true)}>
onInput={handleDetailContentInput}
defaultValue={detailContent}
></TextArea>
</StepByStepInputItem>

<StepByStepInputItem>
<Button id="submitBtn" disabled={isSubmitBtnDisabled} onClick={handleSubmitBtnClick}>
제출
</button>
</div>
</Button>
</StepByStepInputItem>
</>
)}
</div>
</TabWrapper>
);
}

const GitHubLoginBtn = styled.button``;
Loading