From 7ffda673af546c69f1b647f5804e64aa6a77509c Mon Sep 17 00:00:00 2001
From: chaerin <70943835+chaerin-dev@users.noreply.github.com>
Date: Fri, 1 Jul 2022 22:47:11 +0900
Subject: [PATCH 1/4] =?UTF-8?q?refactor:=20=EC=88=AB=EC=9E=90=EA=B0=80=20?=
 =?UTF-8?q?=EC=95=84=EB=8B=8C=20=EC=8B=A4=EC=A0=9C=20=EC=98=B5=EC=85=98=20?=
 =?UTF-8?q?=EB=AA=85=EC=9C=BC=EB=A1=9C=20state=20=EC=A0=95=EC=9D=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Components/Tabs/ErrorReport.js | 31 +++++++++++++++---------------
 1 file changed, 15 insertions(+), 16 deletions(-)

diff --git a/src/Components/Tabs/ErrorReport.js b/src/Components/Tabs/ErrorReport.js
index 10d9d9a..8cd882f 100644
--- a/src/Components/Tabs/ErrorReport.js
+++ b/src/Components/Tabs/ErrorReport.js
@@ -2,7 +2,7 @@ import { useState } from "react";
 
 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("");
 
@@ -12,7 +12,7 @@ export default function ErrorReport() {
       <button
         onClick={() => {
           setSubmitted(false);
-          setErrorCategory(-1);
+          setErrorCategory("");
           setQuestionName("");
           setDetailInput("");
         }}
@@ -26,28 +26,27 @@ export default function ErrorReport() {
         <span>오류 유형: </span>
         <input
           type="radio"
-          id="errorCategory0"
+          id="error-wrongAnswer"
           name="errorCategory"
-          onClick={() => setErrorCategory(0)}
+          onClick={(e) => setErrorCategory(e.target.id)}
         />
-        <label htmlFor="errorCategory0">정답 통과가 안돼요</label>
+        <label htmlFor="error-wrongAnswer">정답 통과가 안돼요</label>
         <input
           type="radio"
-          id="errorCategory1"
+          id="error-notCopied"
           name="errorCategory"
-          onClick={() => setErrorCategory(1)}
+          onClick={(e) => setErrorCategory(e.target.id)}
         />
-        <label htmlFor="errorCategory1">코드 복사가 안돼요</label>
+        <label htmlFor="error-notCopied">코드 복사가 안돼요</label>
         <input
           type="radio"
-          id="errorCategory2"
+          id="error-other"
           name="errorCategory"
-          onClick={() => setErrorCategory(2)}
+          onClick={(e) => setErrorCategory(e.target.id)}
         />
-        <label htmlFor="errorCategory2">기타</label>
+        <label htmlFor="error-other">기타</label>
       </div>
-
-      {errorCategory === -1 || errorCategory === 1 ? null : (
+      {errorCategory === "" || errorCategory === "error-notCopied" ? null : (
         <div>
           <span>문제 이름:</span>
           <input
@@ -63,8 +62,8 @@ export default function ErrorReport() {
           </datalist>
         </div>
       )}
-
-      {errorCategory === -1 || (errorCategory === 0 && questionName === "") ? null : (
+      {errorCategory === "" ||
+      (errorCategory === "error-wrongAnswer" && questionName === "") ? null : (
         <>
           <div>
             <span>내용: </span>
@@ -78,7 +77,7 @@ export default function ErrorReport() {
           <div>
             <button
               id="submitBtn"
-              disabled={errorCategory === 2 && detailInput === ""}
+              disabled={errorCategory === "error-other" && detailInput === ""}
               onClick={() => setSubmitted(true)}
             >
               제출

From 3509282e3aba9db8501beefbb9c33f6660312650 Mon Sep 17 00:00:00 2001
From: chaerin <70943835+chaerin-dev@users.noreply.github.com>
Date: Fri, 1 Jul 2022 22:59:04 +0900
Subject: [PATCH 2/4] =?UTF-8?q?refactor:=20onClick,=20onInput=20=EB=82=B4?=
 =?UTF-8?q?=EB=B6=80=20=EB=8F=99=EC=9E=91=20=ED=95=A8=EC=88=98=EB=A1=9C=20?=
 =?UTF-8?q?=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Components/Tabs/ErrorReport.js    | 52 +++++++++++++++++----------
 src/Components/Tabs/SolutionReport.js | 38 ++++++++++++--------
 2 files changed, 57 insertions(+), 33 deletions(-)

diff --git a/src/Components/Tabs/ErrorReport.js b/src/Components/Tabs/ErrorReport.js
index 8cd882f..0d779fb 100644
--- a/src/Components/Tabs/ErrorReport.js
+++ b/src/Components/Tabs/ErrorReport.js
@@ -4,21 +4,35 @@ export default function ErrorReport() {
   const [submitted, setSubmitted] = useState(false);
   const [errorCategory, setErrorCategory] = useState("");
   const [questionName, setQuestionName] = useState("");
-  const [detailInput, setDetailInput] = useState("");
+  const [detailContent, setDetailContent] = useState("");
+
+  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("");
-          setQuestionName("");
-          setDetailInput("");
-        }}
-      >
-        다른 오류 제보
-      </button>
+      <button onClick={handleOtherErrorBtnClick}>다른 오류 제보</button>
     </div>
   ) : (
     <div>
@@ -28,21 +42,21 @@ export default function ErrorReport() {
           type="radio"
           id="error-wrongAnswer"
           name="errorCategory"
-          onClick={(e) => setErrorCategory(e.target.id)}
+          onClick={handleErrorCategoryClick}
         />
         <label htmlFor="error-wrongAnswer">정답 통과가 안돼요</label>
         <input
           type="radio"
           id="error-notCopied"
           name="errorCategory"
-          onClick={(e) => setErrorCategory(e.target.id)}
+          onClick={handleErrorCategoryClick}
         />
         <label htmlFor="error-notCopied">코드 복사가 안돼요</label>
         <input
           type="radio"
           id="error-other"
           name="errorCategory"
-          onClick={(e) => setErrorCategory(e.target.id)}
+          onClick={handleErrorCategoryClick}
         />
         <label htmlFor="error-other">기타</label>
       </div>
@@ -52,7 +66,7 @@ export default function ErrorReport() {
           <input
             list="questionName"
             name="question"
-            onInput={(e) => setQuestionName(e.target.value)}
+            onInput={handleQuestionNameInput}
             defaultValue={questionName}
           />
           <datalist id="questionName">
@@ -70,15 +84,15 @@ export default function ErrorReport() {
             <textarea
               rows="20"
               cols="100"
-              onInput={(e) => setDetailInput(e.target.value)}
-              defaultValue={detailInput}
+              onInput={handleDetailContentInput}
+              defaultValue={detailContent}
             ></textarea>
           </div>
           <div>
             <button
               id="submitBtn"
-              disabled={errorCategory === "error-other" && detailInput === ""}
-              onClick={() => setSubmitted(true)}
+              disabled={errorCategory === "error-other" && detailContent === ""}
+              onClick={handleSubmitBtnClick}
             >
               제출
             </button>
diff --git a/src/Components/Tabs/SolutionReport.js b/src/Components/Tabs/SolutionReport.js
index a26cdca..72f32dd 100644
--- a/src/Components/Tabs/SolutionReport.js
+++ b/src/Components/Tabs/SolutionReport.js
@@ -3,20 +3,30 @@ import { useState } from "react";
 export default function SolutionReport() {
   const [submitted, setSubmitted] = useState(false);
   const [questionName, setQuestionName] = useState("");
-  const [detailInput, setDetailInput] = useState("");
+  const [detailContent, setDetailContent] = useState("");
+
+  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>
+      <button onClick={handleOtherSolutionBtnClick}>다른 정답 제보</button>
     </div>
   ) : (
     <div>
@@ -25,7 +35,7 @@ export default function SolutionReport() {
         <input
           list="questionName"
           name="question"
-          onInput={(e) => setQuestionName(e.target.value)}
+          onInput={handleQuestionNameInput}
           defaultValue={questionName}
         />
         <datalist id="questionName">
@@ -46,12 +56,12 @@ export default function SolutionReport() {
             <textarea
               rows="20"
               cols="100"
-              onInput={(e) => setDetailInput(e.target.value)}
-              defaultValue={detailInput}
+              onInput={handleDetailContentInput}
+              defaultValue={detailContent}
             ></textarea>
           </div>
           <div>
-            <button id="submitBtn" disabled={detailInput === ""} onClick={() => setSubmitted(true)}>
+            <button id="submitBtn" disabled={detailContent === ""} onClick={handleSubmitBtnClick}>
               제출
             </button>
           </div>

From 7c79f9ed21bfe0469fa9724ae604dd653bd82e04 Mon Sep 17 00:00:00 2001
From: chaerin <70943835+chaerin-dev@users.noreply.github.com>
Date: Fri, 1 Jul 2022 23:08:27 +0900
Subject: [PATCH 3/4] =?UTF-8?q?refactor:=20=EC=88=9C=EC=B0=A8=EC=A0=81=20?=
 =?UTF-8?q?=EB=A0=8C=EB=8D=94=EB=A7=81=EC=9D=84=20=EC=9C=84=ED=95=9C=20?=
 =?UTF-8?q?=EB=85=BC=EB=A6=AC=EA=B5=AC=EB=AC=B8=20=EB=B3=80=EC=88=98?=
 =?UTF-8?q?=EB=A1=9C=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Components/Tabs/ErrorReport.js    | 16 ++++++++--------
 src/Components/Tabs/SolutionReport.js |  9 ++++++---
 2 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/src/Components/Tabs/ErrorReport.js b/src/Components/Tabs/ErrorReport.js
index 0d779fb..3e3612d 100644
--- a/src/Components/Tabs/ErrorReport.js
+++ b/src/Components/Tabs/ErrorReport.js
@@ -6,6 +6,11 @@ export default function ErrorReport() {
   const [questionName, setQuestionName] = 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("");
@@ -60,7 +65,7 @@ export default function ErrorReport() {
         />
         <label htmlFor="error-other">기타</label>
       </div>
-      {errorCategory === "" || errorCategory === "error-notCopied" ? null : (
+      {isQuestionNameUnvisible ? null : (
         <div>
           <span>문제 이름:</span>
           <input
@@ -76,8 +81,7 @@ export default function ErrorReport() {
           </datalist>
         </div>
       )}
-      {errorCategory === "" ||
-      (errorCategory === "error-wrongAnswer" && questionName === "") ? null : (
+      {isDetailContentUnvisible ? null : (
         <>
           <div>
             <span>내용: </span>
@@ -89,11 +93,7 @@ export default function ErrorReport() {
             ></textarea>
           </div>
           <div>
-            <button
-              id="submitBtn"
-              disabled={errorCategory === "error-other" && detailContent === ""}
-              onClick={handleSubmitBtnClick}
-            >
+            <button id="submitBtn" disabled={isSubmitBtnDisabled} onClick={handleSubmitBtnClick}>
               제출
             </button>
           </div>
diff --git a/src/Components/Tabs/SolutionReport.js b/src/Components/Tabs/SolutionReport.js
index 72f32dd..d2bea5b 100644
--- a/src/Components/Tabs/SolutionReport.js
+++ b/src/Components/Tabs/SolutionReport.js
@@ -5,6 +5,9 @@ export default function SolutionReport() {
   const [questionName, setQuestionName] = useState("");
   const [detailContent, setDetailContent] = useState("");
 
+  const isDetailContentUnvisible = questionName === "";
+  const isSubmitBtnDisabled = detailContent === "";
+
   function handleOtherSolutionBtnClick() {
     setSubmitted(false);
     setQuestionName("");
@@ -31,7 +34,7 @@ export default function SolutionReport() {
   ) : (
     <div>
       <div>
-        <span>문제 이름:</span>
+        <span>문제 이름: </span>
         <input
           list="questionName"
           name="question"
@@ -45,7 +48,7 @@ export default function SolutionReport() {
         </datalist>
       </div>
 
-      {questionName === "" ? null : (
+      {isDetailContentUnvisible ? null : (
         <>
           <div className="gitHubLogin">
             <span>기여자 등록: </span>
@@ -61,7 +64,7 @@ export default function SolutionReport() {
             ></textarea>
           </div>
           <div>
-            <button id="submitBtn" disabled={detailContent === ""} onClick={handleSubmitBtnClick}>
+            <button id="submitBtn" disabled={isSubmitBtnDisabled} onClick={handleSubmitBtnClick}>
               제출
             </button>
           </div>

From da95249d4fe8d828d1050c48233f02da2ae21ef4 Mon Sep 17 00:00:00 2001
From: chaerin <70943835+chaerin-dev@users.noreply.github.com>
Date: Sat, 2 Jul 2022 00:01:34 +0900
Subject: [PATCH 4/4] =?UTF-8?q?refactor:=20StyledComponent=20=EC=A0=81?=
 =?UTF-8?q?=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.js                                   |  6 +-
 src/Components/Contents.js                   | 21 +++--
 src/Components/Tabs/ErrorReport.js           | 82 ++++++++++++--------
 src/Components/Tabs/Introduction.js          |  9 +--
 src/Components/Tabs/SolutionReport.js        | 72 ++++++++++-------
 src/Components/Tabs/Style/StyledComponent.js | 27 +++++++
 src/recoil/atom 2.js                         |  6 --
 src/recoil/atom.js                           |  6 --
 8 files changed, 141 insertions(+), 88 deletions(-)
 create mode 100644 src/Components/Tabs/Style/StyledComponent.js
 delete mode 100644 src/recoil/atom 2.js
 delete mode 100644 src/recoil/atom.js

diff --git a/src/App.js b/src/App.js
index bc4d145..e80aafa 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,10 +1,14 @@
+import styled from "styled-components";
+
 import Contents from "./Components/Contents";
 
 export default function App() {
   return (
     <>
-      <h1>🤖 프로그래머스 JS 정답 통과기</h1>
+      <title>Codestin Search App</title>
       <Contents />
     </>
   );
 }
+
+const Title = styled.h1``;
diff --git a/src/Components/Contents.js b/src/Components/Contents.js
index 4fe1bb1..ef40d11 100644
--- a/src/Components/Contents.js
+++ b/src/Components/Contents.js
@@ -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";
@@ -7,17 +8,17 @@ import SolutionReport from "./Tabs/SolutionReport";
 export default function TabNavigation() {
   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>
@@ -26,3 +27,7 @@ export default function TabNavigation() {
     </BrowserRouter>
   );
 }
+
+const TabList = styled.ul``;
+
+const TabItem = styled.li``;
diff --git a/src/Components/Tabs/ErrorReport.js b/src/Components/Tabs/ErrorReport.js
index 3e3612d..a9ebb43 100644
--- a/src/Components/Tabs/ErrorReport.js
+++ b/src/Components/Tabs/ErrorReport.js
@@ -1,4 +1,17 @@
 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);
@@ -35,70 +48,73 @@ export default function ErrorReport() {
   }
 
   return submitted ? (
-    <div>
-      <p>제보해주셔서 감사합니다.</p>
-      <button onClick={handleOtherErrorBtnClick}>다른 오류 제보</button>
-    </div>
+    <TabWrapper>
+      <BlockText>제보해주셔서 감사합니다.</BlockText>
+      <Button onClick={handleOtherErrorBtnClick}>다른 오류 제보</Button>
+    </TabWrapper>
   ) : (
-    <div>
-      <div>
-        <span>오류 유형: </span>
-        <input
+    <TabWrapper>
+      <StepByStepInputItem>
+        <InlineText>오류 유형: </InlineText>
+        <RadioInput
           type="radio"
           id="error-wrongAnswer"
           name="errorCategory"
           onClick={handleErrorCategoryClick}
         />
-        <label htmlFor="error-wrongAnswer">정답 통과가 안돼요</label>
-        <input
+        <Label htmlFor="error-wrongAnswer">정답 통과가 안돼요</Label>
+        <RadioInput
           type="radio"
           id="error-notCopied"
           name="errorCategory"
           onClick={handleErrorCategoryClick}
         />
-        <label htmlFor="error-notCopied">코드 복사가 안돼요</label>
-        <input
+        <Label htmlFor="error-notCopied">코드 복사가 안돼요</Label>
+        <RadioInput
           type="radio"
           id="error-other"
           name="errorCategory"
           onClick={handleErrorCategoryClick}
         />
-        <label htmlFor="error-other">기타</label>
-      </div>
+        <Label htmlFor="error-other">기타</Label>
+      </StepByStepInputItem>
+
       {isQuestionNameUnvisible ? null : (
-        <div>
-          <span>문제 이름:</span>
-          <input
+        <StepByStepInputItem>
+          <InlineText>문제 이름: </InlineText>
+          <TextInput
             list="questionName"
             name="question"
             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>
       )}
+
       {isDetailContentUnvisible ? null : (
         <>
-          <div>
-            <span>내용: </span>
-            <textarea
+          <StepByStepInputItem>
+            <InlineText>내용: </InlineText>
+            <TextArea
               rows="20"
               cols="100"
               onInput={handleDetailContentInput}
               defaultValue={detailContent}
-            ></textarea>
-          </div>
-          <div>
-            <button id="submitBtn" disabled={isSubmitBtnDisabled} onClick={handleSubmitBtnClick}>
+            ></TextArea>
+          </StepByStepInputItem>
+
+          <StepByStepInputItem>
+            <Button id="submitBtn" disabled={isSubmitBtnDisabled} onClick={handleSubmitBtnClick}>
               제출
-            </button>
-          </div>
+            </Button>
+          </StepByStepInputItem>
         </>
       )}
-    </div>
+    </TabWrapper>
   );
 }
diff --git a/src/Components/Tabs/Introduction.js b/src/Components/Tabs/Introduction.js
index 9246900..17d1b77 100644
--- a/src/Components/Tabs/Introduction.js
+++ b/src/Components/Tabs/Introduction.js
@@ -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>;
 }
diff --git a/src/Components/Tabs/SolutionReport.js b/src/Components/Tabs/SolutionReport.js
index d2bea5b..5281a5a 100644
--- a/src/Components/Tabs/SolutionReport.js
+++ b/src/Components/Tabs/SolutionReport.js
@@ -1,4 +1,17 @@
 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);
@@ -27,49 +40,52 @@ export default function SolutionReport() {
   }
 
   return submitted ? (
-    <div>
-      <p>제보해주셔서 감사합니다.</p>
-      <button onClick={handleOtherSolutionBtnClick}>다른 정답 제보</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={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>
 
       {isDetailContentUnvisible ? null : (
         <>
-          <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={handleDetailContentInput}
               defaultValue={detailContent}
-            ></textarea>
-          </div>
-          <div>
-            <button id="submitBtn" disabled={isSubmitBtnDisabled} onClick={handleSubmitBtnClick}>
+            ></TextArea>
+          </StepByStepInputItem>
+
+          <StepByStepInputItem>
+            <Button id="submitBtn" disabled={isSubmitBtnDisabled} onClick={handleSubmitBtnClick}>
               제출
-            </button>
-          </div>
+            </Button>
+          </StepByStepInputItem>
         </>
       )}
-    </div>
+    </TabWrapper>
   );
 }
+
+const GitHubLoginBtn = styled.button``;
diff --git a/src/Components/Tabs/Style/StyledComponent.js b/src/Components/Tabs/Style/StyledComponent.js
new file mode 100644
index 0000000..c2da699
--- /dev/null
+++ b/src/Components/Tabs/Style/StyledComponent.js
@@ -0,0 +1,27 @@
+// Tabs에서 공통적으로 사용되는 부분을 위해 폴더구조를 이렇게 만들었는데, 뭔가 어색하네요..
+
+import styled from "styled-components";
+
+export const TabWrapper = styled.div``;
+
+export const BlockText = styled.p``;
+
+export const Button = styled.button``;
+
+export const StepByStepInputItem = styled.div``;
+
+export const InlineText = styled.span``;
+
+export const RadioInput = styled.input``;
+
+export const Label = styled.label``;
+
+export const TextInput = styled.input``;
+
+export const DataList = styled.datalist``;
+
+export const Option = styled.option``;
+
+export const DetailContentWrapper = styled.div``;
+
+export const TextArea = styled.textarea``;
diff --git a/src/recoil/atom 2.js b/src/recoil/atom 2.js
deleted file mode 100644
index 9e958b5..0000000
--- a/src/recoil/atom 2.js	
+++ /dev/null
@@ -1,6 +0,0 @@
-import { atom } from "recoil";
-
-export const tabNoState = atom({
-  key: "tabNoState",
-  default: 0,
-});
diff --git a/src/recoil/atom.js b/src/recoil/atom.js
deleted file mode 100644
index 9e958b5..0000000
--- a/src/recoil/atom.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import { atom } from "recoil";
-
-export const tabNoState = atom({
-  key: "tabNoState",
-  default: 0,
-});