Merge pull request #6 from tell-me-team/fe-feat/#1-getApi

feat: [#1] get api

src/api/surveyApi.ts

@@ -0,0 +1,24 @@
+import axios from "axios";
+
+export const surveyGetApi = async () => {
+  try {
+    const response = await axios.get(
+      "https://jsonplaceholder.typicode.com/posts/"
+    );
+    return response.data;
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+export const surveyPostApi = async (userAnswer: string[]) => {
+  try {
+    const response = await axios.post(
+      "https://tell-me.store/healthcheck",
+      userAnswer
+    );
+    return response;
+  } catch (error) {
+    console.error(error);
+  }
+};

src/components/surveyPage/SurveyPage.tsx

@@ -1,27 +1,48 @@
-import React, { useState } from "react";
-import { styled } from "styled-components";
-import { surveyAllProgress } from "../../constants/surveyPageUtils";
+import React, { useEffect, useState } from "react";
+import { surveyGetApi } from "../../api/surveyApi";
 
-interface ProgressGageBarStatusProps
-  extends React.HTMLAttributes<HTMLDivElement> {
-  status: number;
-}
+import { surveyAllProgress } from "../../constants/surveyPageUtils";
+import {
+  SExtraButton,
+  SGagebarContainer,
+  SIconImage,
+  SLoadProfileButton,
+  SProgressGageBar,
+  SProgressGageBarStatus,
+  SSurveyContainer,
+} from "./SurveyPageStyle";
+import SurveySection from "./SurveySection";
 
 const SurveyPage = () => {
   const [surveyProgress, setSurveyProgress] = useState(surveyAllProgress[0]);
   const [answer, setAnswer] = useState<string[]>([]);
   const [backIcon, setBackIcon] = useState(false);
-
+  const [survey, setSurvey] = useState([]);
   const onAnswerClick = (e: React.MouseEvent<HTMLButtonElement>) => {
     const target = e.target as HTMLButtonElement;
     setAnswer((prev) => prev.concat(target.value));
     const index = surveyAllProgress.indexOf(surveyProgress) + 1;
-    if (index > 0) {
+    if (index > 0 && index <= 10) {
       setBackIcon(true);
     }
     setSurveyProgress(surveyAllProgress[index]);
+    if (index === 10) {
+      setSurveyProgress(10);
+    }
+    console.log(surveyProgress);
   };
 
+  const fetchData = async () => {
+    const response = await surveyGetApi();
+    const newRes = response.slice(0, 10);
+    setSurvey(newRes);
+    console.log(newRes);
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
   const onBackClick = () => {
     const index = surveyAllProgress.indexOf(surveyProgress) - 1;
     if (index === 0) {
@@ -33,24 +54,24 @@ const SurveyPage = () => {
   };
 
   return (
-    <div>
+    <div
+      style={{ backgroundColor: "#F7F0FF", width: "375px", height: "787px" }}
+    >
       <div>
+        <SGagebarContainer>{surveyProgress}/10</SGagebarContainer>
+
+        <SProgressGageBar />
+        <SProgressGageBarStatus status={surveyProgress} />
+      </div>
+      <SSurveyContainer>
         <div
           style={{
-            marginTop: "8px",
-            marginBottom: "8px",
-            marginLeft: "90%",
-            color: "#A299F3",
+            display: "flex",
+            justifyContent: "space-between",
+            marginTop: "-50px",
           }}
         >
-          {surveyProgress}/10
-        </div>
-        <SProgressGageBar />
-        <SProgressGageBarStatus status={surveyProgress} />
-      </div>
-      <div style={{ margin: "30px 20px" }}>
-        <div style={{ display: "flex", justifyContent: "space-between" }}>
-          {backIcon && (
+          {backIcon ? (
             <div onClick={onBackClick}>
               <SExtraButton />
               <div
@@ -71,97 +92,37 @@ const SurveyPage = () => {
                   <path
                     d="M15 1L1.53533 8.62998C0.859348 9.01304 0.85935 9.98696 1.53533 10.37L15 18"
                     stroke="#6F63E0"
-                    stroke-width="2"
-                    stroke-linecap="round"
+                    strokeWidth="2"
+                    strokeLinecap="round"
                   />
                 </svg>
               </div>
             </div>
+          ) : (
+            <SExtraButton style={{ backgroundColor: "#F9F9FD" }} />
           )}
 
-          <div
-            style={{
-              width: "52px",
-              height: "52px",
-              borderRadius: "100px",
-              backgroundColor: "skyblue",
-              margin: "0 auto",
-            }}
-          ></div>
+          <SIconImage />
           <div>
             <SExtraButton
               style={{ backgroundColor: "#9188EC", opacity: "0.08" }}
             />
           </div>
         </div>
 
-        <div>
-          <p>질문 {surveyProgress}</p>
-          <p>질문 영역</p>
-        </div>
-        <div style={{ display: "flex", justifyContent: "center" }}>
-          <div
-            style={{
-              width: "272px",
-              height: "258px",
-              borderRadius: "20px",
-              backgroundColor: "skyblue",
-            }}
-          >
-            img
-          </div>
-        </div>
-        <div
-          style={{
-            display: "flex",
-            justifyContent: "center",
-            margin: "20px",
-          }}
-        >
-          <SSelectAnswerButton onClick={onAnswerClick} value="선택1">
-            선택1
-          </SSelectAnswerButton>
-          <div>|</div>
-          <SSelectAnswerButton onClick={onAnswerClick} value="선택2">
-            선택2
-          </SSelectAnswerButton>
-        </div>
-      </div>
+        <SurveySection
+          survey={survey}
+          surveyProgress={surveyProgress}
+          onAnswerClick={onAnswerClick}
+        />
+      </SSurveyContainer>
       <div style={{ display: "flex", justifyContent: "center" }}>
-        <div>위티프로필 바로가기</div>
+        <SLoadProfileButton style={{ marginTop: "-70px" }}>
+          위티프로필 바로가기
+        </SLoadProfileButton>
       </div>
     </div>
   );
 };
 
 export default SurveyPage;
-
-const SProgressGageBar = styled.div`
-  width: 327px;
-  height: 10px;
-  background-color: #6f63e0;
-  opacity: 0.2;
-  border-radius: 100px;
-`;
-
-const SProgressGageBarStatus = styled.div<ProgressGageBarStatusProps>`
-  position: relative;
-  margin-top: -10px;
-  width: ${(props) => props.status * 32.7}px;
-  height: 10px;
-  background-color: #6f63e0;
-  border-radius: 100px;
-  z-index: 1;
-`;
-
-const SExtraButton = styled.div`
-  width: 44px;
-  height: 44px;
-  border-radius: 100px;
-  background-color: #6f63e0;
-  opacity: 0.2;
-`;
-
-const SSelectAnswerButton = styled.button`
-  margin: 0 10px;
-`;

src/components/surveyPage/SurveyPageStyle.tsx

@@ -0,0 +1,78 @@
+import { styled } from "styled-components";
+
+interface ProgressGageBarStatusProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  status: number;
+}
+
+export const SProgressGageBar = styled.div`
+  width: 327px;
+  height: 10px;
+  background-color: #6f63e0;
+  opacity: 0.2;
+  margin: 0 auto;
+  border-radius: 100px;
+`;
+
+export const SProgressGageBarStatus = styled.div<ProgressGageBarStatusProps>`
+  position: relative;
+  margin-top: -10px;
+  width: ${(props) => props.status * 32.7}px;
+  height: 10px;
+  margin-left: 24px;
+  background-color: #6f63e0;
+  border-radius: 100px;
+  z-index: 1;
+`;
+
+export const SExtraButton = styled.div`
+  width: 44px;
+  height: 44px;
+  border-radius: 100px;
+  background-color: #6f63e0;
+  opacity: 0.2;
+`;
+
+export const SSelectAnswerButton = styled.button`
+  margin: 0 10px;
+  width: 152px;
+  height: 60px;
+  background-color: white;
+  color: #6f63e0;
+  border: none;
+  font-size: 18px;
+  font-weight: 700;
+`;
+
+export const SLoadProfileButton = styled.button`
+  width: 327px;
+  height: 60px;
+  border-radius: 30px;
+  background-color: #6f63e0;
+  border: none;
+  color: white;
+  font-size: 18px;
+`;
+
+export const SGagebarContainer = styled.div`
+  padding-top: 10px;
+  margin-bottom: 8px;
+  margin-left: 83%;
+  color: #a299f3;
+`;
+
+export const SSurveyContainer = styled.div`
+  margin: 50px 20px;
+  padding: 50px 20px;
+  backgroundcolor: #f9f9fd;
+  opacity: 0.7;
+  borderradius: 30px;
+`;
+
+export const SIconImage = styled.div`
+  width: 52px;
+  height: 52px;
+  border-radius: 100px;
+  background-color: skyblue;
+  margin: 0 auto;
+`;

src/components/surveyPage/SurveySection.tsx

@@ -0,0 +1,67 @@
+import React from "react";
+import { SSelectAnswerButton } from "./SurveyPageStyle";
+
+interface Question {
+  id: string;
+  userId: string;
+  img: string;
+  title: string;
+}
+
+interface Props {
+  survey: Question[];
+  surveyProgress: number;
+  onAnswerClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
+}
+
+const SurveySection: React.FC<Props> = ({
+  survey,
+  surveyProgress,
+  onAnswerClick,
+}: Props) => {
+  return (
+    survey[0] && (
+      <>
+        <div style={{ margin: "30px 0" }}>
+          <p>질문 {surveyProgress}</p>
+          <p>{survey[surveyProgress - 1].title}</p>
+          <div style={{ display: "flex", justifyContent: "center" }}>
+            <div
+              style={{
+                width: "272px",
+                height: "258px",
+                borderRadius: "20px",
+                backgroundColor: "skyblue",
+              }}
+            >
+              img
+            </div>
+          </div>
+          <div
+            style={{
+              display: "flex",
+              justifyContent: "center",
+              margin: "20px",
+            }}
+          >
+            <SSelectAnswerButton
+              onClick={onAnswerClick}
+              value={survey[surveyProgress - 1].userId}
+            >
+              {survey[surveyProgress - 1].userId}
+            </SSelectAnswerButton>
+            <div>|</div>
+            <SSelectAnswerButton
+              onClick={onAnswerClick}
+              value={survey[surveyProgress - 1].id}
+            >
+              {survey[surveyProgress - 1].id}
+            </SSelectAnswerButton>
+          </div>
+        </div>
+      </>
+    )
+  );
+};
+
+export default SurveySection;

tsconfig.json

@@ -12,7 +12,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx",
+    "jsx": "react",
 
     /* Linting */
     "strict": true,