JCTG-JavaScript-Coding-Test-Group · codeisneverodd · Jul 20, 2022 · Jul 19, 2022 · Jul 19, 2022 · Jul 19, 2022
diff --git a/.gitignore b/.gitignore
@@ -1 +1,6 @@
 node_modules
+
+.env
+
+.env.development
+.idea
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
+    "prettier": "^2.7.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.3.0",

diff --git a/src/hooks/user/useSetUser.js b/src/hooks/user/useSetUser.js
@@ -0,0 +1,7 @@
+import { useSetRecoilState } from "recoil";
+import userState from "../../state/user";
+
+const useSetUser = () => {
+  return useSetRecoilState(userState);
+};
+export default useSetUser;
diff --git a/src/hooks/user/useUserLogin.js b/src/hooks/user/useUserLogin.js
@@ -0,0 +1,26 @@
+import {
+  requestAccessTokenAPI,
+  requestLoginAPI,
+} from "../../pages/solutionReportPage/utils/gitHubLogin";
+import useSetUser from "./useSetUser";
+import { useState } from "react";
+import useUserValue from "./useUserValue";
+
+const useUserLogin = () => {
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+  const userInfo = useUserValue();
+  const setUserInfo = useSetUser();
+  const requestLogin = (code) => {
+    requestAccessTokenAPI(code)
+      .then((response) => requestLoginAPI(response.access_token))
+      .then((response) => {
+        if (response.hasOwnProperty("login")) {
+          setIsLoggedIn(true);
+          setUserInfo(response);
+        }
+        if (userInfo) setIsLoggedIn(true);
+      });
+  };
+  return { isLoggedIn, requestLogin };
+};
+export default useUserLogin;
diff --git a/src/hooks/user/useUserProfile.js b/src/hooks/user/useUserProfile.js
@@ -0,0 +1,11 @@
+import useUserValue from "./useUserValue";
+
+const useUserProfile = () => {
+  const user = useUserValue();
+  return {
+    profileImg: user.avatar_url ?? "",
+    username: user.name ?? "",
+    gitHubUrl: user.html_url ?? "",
+  };
+};
+export default useUserProfile;
diff --git a/src/hooks/user/useUserValue.js b/src/hooks/user/useUserValue.js
@@ -0,0 +1,7 @@
+import { useRecoilValue } from "recoil";
+import userState from "../../state/user";
+
+const useUserValue = () => {
+  return useRecoilValue(userState);
+};
+export default useUserValue;
diff --git a/src/pages/errorReportPage/ErrorReport.js b/src/pages/errorReportPage/ErrorReport.js
@@ -21,10 +21,13 @@ export default function ErrorReport() {
   const [questionName, setQuestionName] = useState("");
   const [detailContent, setDetailContent] = useState("");
 
-  const isQuestionNameVisible = errorCategory !== "" && errorCategory !== "error-notCopied";
+  const isQuestionNameVisible =
+    errorCategory !== "" && errorCategory !== "error-notCopied";
   const isDetailContentVisible =
-    errorCategory !== "" && (errorCategory !== "error-wrongAnswer" || questionName !== "");
-  const isSubmitBtnDisabled = errorCategory === "error-other" && detailContent === "";
+    errorCategory !== "" &&
+    (errorCategory !== "error-wrongAnswer" || questionName !== "");
+  const isSubmitBtnDisabled =
+    errorCategory === "error-other" && detailContent === "";
 
   function handleOtherErrorBtnClick() {
     setSubmitted(false);
@@ -56,14 +59,19 @@ export default function ErrorReport() {
       {submitted ? (
         <>
           <ThanksMsg>제보해주셔서 감사합니다.</ThanksMsg>
-          <OtherReportBtn onClick={handleOtherErrorBtnClick}>다른 오류 제보</OtherReportBtn>
+          <OtherReportBtn onClick={handleOtherErrorBtnClick}>
+            다른 오류 제보
+          </OtherReportBtn>
         </>
       ) : (
         <MainContetnWrapper>
           <StepByStepInputItem>
             <InputLabel>오류 유형</InputLabel>
             <RadioInputWrapper>
-              <Label htmlFor="error-wrongAnswer" clicked={errorCategory === "error-wrongAnswer"}>
+              <Label
+                htmlFor="error-wrongAnswer"
+                clicked={errorCategory === "error-wrongAnswer"}
+              >
                 정답 통과가 안돼요
               </Label>
               <RadioInput
@@ -72,7 +80,10 @@ export default function ErrorReport() {
                 name="errorCategory"
                 onClick={handleErrorCategoryClick}
               />
-              <Label htmlFor="error-notCopied" clicked={errorCategory === "error-notCopied"}>
+              <Label
+                htmlFor="error-notCopied"
+                clicked={errorCategory === "error-notCopied"}
+              >
                 코드 복사가 안돼요
               </Label>
               <RadioInput
@@ -81,7 +92,10 @@ export default function ErrorReport() {
                 name="errorCategory"
                 onClick={handleErrorCategoryClick}
               />
-              <Label htmlFor="error-other" clicked={errorCategory === "error-other"}>
+              <Label
+                htmlFor="error-other"
+                clicked={errorCategory === "error-other"}
+              >
                 기타
               </Label>
               <RadioInput
@@ -101,7 +115,7 @@ export default function ErrorReport() {
                 placeholder="문제 이름을 검색하세요."
                 defaultValue={questionName}
                 onInput={handleQuestionNameInput}
-              ></TextInput>
+              />
               <QuestionList id="questionsList">
                 <QuestionItem>
                   <QuestionBtn>1번문제</QuestionBtn>
@@ -140,7 +154,7 @@ export default function ErrorReport() {
                   cols="100"
                   onInput={handleDetailContentInput}
                   defaultValue={detailContent}
-                ></TextArea>
+                />
               </StepByStepInputItem>
 
               <StepByStepInputItem>

diff --git a/src/pages/solutionReportPage/SolutionReport.js b/src/pages/solutionReportPage/SolutionReport.js
@@ -1,31 +1,41 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import styled from "styled-components";
 import Header from "../../components/Header";
 import {
-  ThanksMsg,
-  OtherReportBtn,
+  InputLabel,
   MainContetnWrapper,
+  OtherReportBtn,
   StepByStepInputItem,
-  InputLabel,
-  TextInput,
-  QuestionList,
-  QuestionItem,
-  QuestionBtn,
-  TextArea,
   SubmitBtn,
+  TextArea,
+  TextInput,
+  ThanksMsg,
 } from "../../style/styledComponents";
 import gitHubLogoSrc from "../../images/github-logo-white.png";
+import { useSearchParams } from "react-router-dom";
+import { LOGIN_URL } from "./utils/gitHubLogin";
+import useUserProfile from "../../hooks/user/useUserProfile";
+import useUserLogin from "../../hooks/user/useUserLogin";
 
 export default function SolutionReport() {
   const [submitted, setSubmitted] = useState(false);
   const [questionName, setQuestionName] = useState("");
   const [detailContent, setDetailContent] = useState("");
+  const [searchParams, setSearchParams] = useSearchParams();
+  const userInfo = useUserProfile();
+  const { isLoggedIn, requestLogin } = useUserLogin();
 
+  useEffect(() => {
+    if (searchParams.get("code")) {
+      const code = searchParams.get("code");
+      requestLogin(code);
+    }
+  }, [searchParams]);
+  const handleGitHubLogin = async () => {};
   const isDetailContentVisible = questionName !== "";
   const isSubmitBtnDisabled = detailContent === "";
 
   function handleOtherSolutionBtnClick() {
-    console.log("!");
     setSubmitted(false);
     setQuestionName("");
     setDetailContent("");
@@ -50,7 +60,9 @@ export default function SolutionReport() {
       {submitted ? (
         <>
           <ThanksMsg>제보해주셔서 감사합니다.</ThanksMsg>
-          <OtherReportBtn onClick={handleOtherSolutionBtnClick}>다른 정답 제보</OtherReportBtn>
+          <OtherReportBtn onClick={handleOtherSolutionBtnClick}>
+            다른 정답 제보
+          </OtherReportBtn>
         </>
       ) : (
         <MainContetnWrapper>
@@ -61,40 +73,55 @@ export default function SolutionReport() {
               placeholder="문제 이름을 검색하세요."
               defaultValue={questionName}
               onInput={handleQuestionNameInput}
-            ></TextInput>
-            <QuestionList id="questionsList">
-              <QuestionItem>
-                <QuestionBtn>1번문제</QuestionBtn>
-              </QuestionItem>
-              <QuestionItem>
-                <QuestionBtn>2번문제</QuestionBtn>
-              </QuestionItem>
-              <QuestionItem>
-                <QuestionBtn>3번문제</QuestionBtn>
-              </QuestionItem>
-              <QuestionItem>
-                <QuestionBtn>4번문제</QuestionBtn>
-              </QuestionItem>
-              <QuestionItem>
-                <QuestionBtn>5번문제</QuestionBtn>
-              </QuestionItem>
-              <QuestionItem>
-                <QuestionBtn>6번문제</QuestionBtn>
-              </QuestionItem>
-              <QuestionItem>
-                <QuestionBtn>7번문제</QuestionBtn>
-              </QuestionItem>
-              <QuestionItem>
-                <QuestionBtn>8번문제</QuestionBtn>
-              </QuestionItem>
-            </QuestionList>
+            />
+            {/*<QuestionList id="questionsList">*/}
+            {/*  <QuestionItem>*/}
+            {/*    <QuestionBtn>1번문제</QuestionBtn>*/}
+            {/*  </QuestionItem>*/}
+            {/*  <QuestionItem>*/}
+            {/*    <QuestionBtn>2번문제</QuestionBtn>*/}
+            {/*  </QuestionItem>*/}
+            {/*  <QuestionItem>*/}
+            {/*    <QuestionBtn>3번문제</QuestionBtn>*/}
+            {/*  </QuestionItem>*/}
+            {/*  <QuestionItem>*/}
+            {/*    <QuestionBtn>4번문제</QuestionBtn>*/}
+            {/*  </QuestionItem>*/}
+            {/*  <QuestionItem>*/}
+            {/*    <QuestionBtn>5번문제</QuestionBtn>*/}
+            {/*  </QuestionItem>*/}
+            {/*  <QuestionItem>*/}
+            {/*    <QuestionBtn>6번문제</QuestionBtn>*/}
+            {/*  </QuestionItem>*/}
+            {/*  <QuestionItem>*/}
+            {/*    <QuestionBtn>7번문제</QuestionBtn>*/}
+            {/*  </QuestionItem>*/}
+            {/*  <QuestionItem>*/}
+            {/*    <QuestionBtn>8번문제</QuestionBtn>*/}
+            {/*  </QuestionItem>*/}
+            {/*</QuestionList>*/}
           </StepByStepInputItem>
 
-          {isDetailContentVisible && (
+          {/*isDetailContentVisible &&*/}
+          {
             <>
               <StepByStepInputItem>
                 <InputLabel>기여자 등록</InputLabel>
-                <GitHubLoginBtn id="gitHubLoginBtn">GitHub 로그인</GitHubLoginBtn>
+                {isLoggedIn ? (
+                  <UserInfo>
+                    이름: {userInfo.username}
+                    이미지: {userInfo.profileImg}
+                  </UserInfo>
+                ) : (
+                  <a href={LOGIN_URL}>
+                    <GitHubLoginBtn
+                      id="gitHubLoginBtn"
+                      onClick={handleGitHubLogin}
+                    >
+                      GitHub 로그인
+                    </GitHubLoginBtn>
+                  </a>
+                )}
               </StepByStepInputItem>
               <StepByStepInputItem>
                 <InputLabel>내용</InputLabel>
@@ -104,7 +131,7 @@ export default function SolutionReport() {
                   cols="100"
                   onInput={handleDetailContentInput}
                   defaultValue={detailContent}
-                ></TextArea>
+                />
               </StepByStepInputItem>
 
               <StepByStepInputItem>
@@ -117,7 +144,7 @@ export default function SolutionReport() {
                 </SubmitBtn>
               </StepByStepInputItem>
             </>
-          )}
+          }
         </MainContetnWrapper>
       )}
     </>
@@ -139,7 +166,6 @@ const GitHubLoginBtn = styled.button`
   background-repeat: no-repeat;
   cursor: pointer;
 `;
-
 // const Msg = styled.span`
 //   color: ${(props) => props.theme.programmersBlue};
 // `;