Feature/intro page : app.js 파일 수정

src/App.js

@@ -10,11 +10,9 @@ import MyFullCalendar from 'pages/MyFullCalendar';
 import MyPage from 'pages/MyPage';
 import AccountInfo from 'pages/AccountInfo';
 import SymptomTest from 'pages/symptomTest';
-import StartInfo from 'pages/StartInfo';
 import LoginExe from 'pages/LoginExe';
 import TestFrame from 'components/comonents/frame/TestFrame';
 import IntroFrame from 'components/comonents/frame/IntroFrame';
-import Intro from 'pages/intro';
 import UserInfo from 'pages/UserInfo';
 import { CookiesProvider } from 'react-cookie';
 import FeSelfTest from 'pages/SelfTest/FeSelfTest';
@@ -32,8 +30,8 @@ import Start from 'pages/Start';
 import CodeInput from 'pages/CodeInput';
 
 import Loading from 'pages/Loading';
-import CenterFrame from 'components/comonents/frame/CenterFrame';
-import ShareUrl from 'pages/LoginExe';
+import ReportFrame from 'components/comonents/frame/ReportFrame';
+import StartInfo from 'pages/StartInfo';
 
 function App() {
   return (
@@ -44,9 +42,7 @@ function App() {
           {/* 기본 화면프레임 */}
           <Route path="/" element={<IntroFrame />}>
             <Route path="/" element={<Start />} /> {/* 시작 화면 */}
-          </Route>
 
-          <Route path="/" element={<CenterFrame />}>
             <Route path="/feselftest" element={<FeSelfTest />} />
             <Route path="/selftest" element={<SelfTest />} />
             <Route path="/selftest2" element={<SelfTest2 />} />
@@ -58,49 +54,33 @@ function App() {
             <Route path="/selftest8" element={<SelfTest8 />} />
             <Route path="/selftest9" element={<SelfTest9 />} />
             <Route path="/selftest10" element={<SelfTest10 />} />
+            <Route path="/userInfo" element={<UserInfo />} />
+
+            <Route path="/code-input" element={<CodeInput />} />
+            <Route path="/loading" element={<Loading />} />
+            <Route path="/startInfo" element={<StartInfo/>} />
+
           </Route>
 
           <Route path="/" element={<Frame />}>
             <Route path="/home" element={<Home />} />
             <Route path="/report" element={<Report />} />
-            <Route path="/report/:id" element={<ReportDetail />} />
             <Route path="/calendar" element={<MyFullCalendar />} />
             <Route path="/my" element={<MyPage />} />
             <Route path="/account-info" element={<AccountInfo />} />
-            <Route path="/userInfo" element={<UserInfo />} />
             {/* 로그인 후 넘어가는 페이지 */}
-            {/* <Route path="/login" element={<Login />} /> */}
-            <Route path="/login" element={<StartInfo />} />
-            {/* <Route path="/kakaologin" element={<ShareUrl />} /> */}
+            <Route path="/login" element={<Start />} />
             <Route path="/kakaologin" element={<LoginExe />} />
-            {/* 카카오 로그인이 실행되는 페이지 */}
-            {/* <Route path="/feselftest" element={<FeSelfTest />} />
-            <Route path="/selftest" element={<SelfTest />} />
-            <Route path="/selftest2" element={<SelfTest2 />} />
-            <Route path="/selftest3" element={<SelfTest3 />} />
-            <Route path="/selftest4" element={<SelfTest4 />} />
-            <Route path="/selftest5" element={<SelfTest5 />} />
-            <Route path="/selftest6" element={<SelfTest6 />} />
-            <Route path="/selftest7" element={<SelfTest7 />} />
-            <Route path="/selftest8" element={<SelfTest8 />} />
-            <Route path="/selftest9" element={<SelfTest9 />} />
-            <Route path="/selftest10" element={<SelfTest10 />} /> */}
           </Route>
 
-          {/* 테스트 화면프레임 */}
-          <Route path="/symptomTest" element={<TestFrame />}>
-            <Route index element={<SymptomTest />} />
+          {/* 테스트 프레임 */}
+          <Route path="/" element={<TestFrame />}>
+            <Route path="/symptomTest" element={<SymptomTest />} />
           </Route>
-
-          {/* 로고 가운데 화면프레임 */}
-          <Route path="/intro" element={<CenterFrame />}>
-            <Route index element={<Intro />} />
+          <Route path="/" element={<ReportFrame/>}>
+            <Route path="/report/:id" element={<ReportDetail />} />
           </Route>
 
-          <Route path="/code-input" element={<CodeInput />} />
-          <Route path="/kakaologin" element={<ShareUrl />} />
-
-          <Route path="/loading" element={<Loading />} />
         </Routes>
       </BrowserRouter>
     </CookiesProvider>

src/components/comonents/frame/IntroFrame.js

@@ -2,12 +2,12 @@ import React from 'react';
 import { Outlet } from 'react-router-dom';
 import { FrameWrapper } from 'styles/ComonItem-styled';
 
-function IntrFrame() {
+function IntroFrame() {
   return (
     <FrameWrapper>
       <Outlet /> {/* 중첩라우팅 */}
     </FrameWrapper>
   );
 }
 
-export default IntrFrame;
+export default IntroFrame;

src/components/comonents/frame/ReportFrame.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Outlet } from 'react-router-dom';
+import { FrameWrapper } from 'styles/ComonItem-styled';
+import ReportTopBar from '../topBar/ReportTopBar';
+
+// Test 화면 프레임
+function ReportFrame() {
+  return (
+    <FrameWrapper>
+      <ReportTopBar/> {/* 상단바 */}
+      <Outlet /> {/* 중첩라우팅 */}
+      {/* <TestMenuBar /> 하단메뉴바 */}
+    </FrameWrapper>
+  );
+}
+
+export default ReportFrame;

src/components/comonents/topBar/ReportTopBar.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { IoIosArrowBack } from "react-icons/io";
+import { useNavigate } from 'react-router-dom';
+import { TestTopBarContainer, TestTopBarWrapper, BackIconWrapper, TestTopBarText } from 'styles/ComonItem-styled';
+
+function ReportTopBar() {
+  const navigate = useNavigate();
+
+  // 뒤로가기 버튼
+  const gotoBack = () =>{
+    navigate(-1);
+  }
+
+  return (
+    <>
+      <TestTopBarContainer>
+        <TestTopBarWrapper>
+
+          <BackIconWrapper onClick={gotoBack}>
+            <IoIosArrowBack style={{ color: '#5B5B5B', width: '24px', height: '24px' }} />
+          </BackIconWrapper>
+
+          {/* TODO : 페이지에 따라 상단 TEXT 넘겨주기 */}
+          <TestTopBarText>세부 리포트</TestTopBarText>
+
+        </TestTopBarWrapper>
+      </TestTopBarContainer>
+    </>
+  );
+}
+
+export default ReportTopBar;

src/pages/Home.js

@@ -29,7 +29,7 @@ function Home() {
           </SwiperSlide>
         </Swiper>
       </SwiperWrapper>
-      <SymptomTest />
+      {/* <SymptomTest /> */}
 
       <MedicineNote />
       <Mission />

src/pages/SelfTest/SelfTest10.js

@@ -21,7 +21,7 @@ function SelfTest10() {
     handleAnswerClick,
     isButtonActive,
     handleNextButtonClickWithScore,
-  } = useSelfTest('</login>');
+  } = useSelfTest('/startInfo');
 
   const [statement, setStatement] = useState('');
   const [imgUrl, setImgUrl] = useState('');

src/pages/StartInfo.js

@@ -2,33 +2,24 @@
 // import LoginButton from 'components/login/LoginButton';
 import ServiceDesc from 'components/login/ServiceDesc';
 import { LoginDesc } from 'styles/login/ServiceDesc-styled';
-import React, { useState } from 'react';
+import React from 'react';
 import { Link } from 'react-router-dom';
-import level4_1 from 'assets/images/level4_1.png';
 import {
-  Header,
-  Title,
-  Result,
-  ShareBtn,
   CloseBtn,
   ConnectBtn,
-  IntroWrapper,
 } from 'styles/login/SharePtn-styled';
-import ShareLink from 'hooks/login/ShareLink';
 
 const StartInfo = () => {
-  // const [modalIsOpen, setModalIsOpen] = useState(false);
-
   return (
-    <IntroWrapper>
+    <>
       <ServiceDesc />
-
-      <>
-        <ConnectBtn>짝꿍과 연동하기</ConnectBtn>
+      <ConnectBtn>짝꿍과 연동하기</ConnectBtn>
+      <Link to="/home">
         <CloseBtn>닫고 홈화면으로 돌아가기</CloseBtn>
-      </>
+      </Link>
+
       <LoginDesc>카카오로 연동하여 나의 짝꿍의 리포트도 연결해보아요</LoginDesc>
-    </IntroWrapper>
+    </>
   );
 };
 

src/styles/report/ReportDropDown-styled.js

@@ -35,25 +35,27 @@ export const Solution = styled.div`
   align-items: center;
   width: 424px;
   height: 134px;
-  margin-bottom: 19px;
+  margin-bottom: 20px;
 `
 export const SolutionNumBlue = styled.div`
   font-weight: 200;
   font-size: 96px;
   line-height: 134.4px;
   color: #9180FF;
   margin-right: 57px;
+  width: 80px;
 `
 export const SolutionNumGray = styled.div`
   font-weight: 200;
   font-size: 96px;
   line-height: 134.4px;
   color: #8A8A8A;
   margin-right: 57px;
+  width: 80px;
 `
 export const SolutionText = styled.div`
   width: 280px;
-  height: 96px;
+  height: fit-content;
   font-weight: 400;
   font-size: 17px;
   line-height: 24px;