Feature/q page

.lighthouserc.json

@@ -1,35 +1,35 @@
 {
-    "ci": {
-        "collect": {
-            "startServerCommand": "yarn start",
-            "startServerReadyPattern": "ready on",
-            "url": [
-                "http://localhost:3000",
-                "http://localhost:3000/profile",
-                "http://localhost:3000/detail"
-            ],
-            "numberOfRuns": 1,
-            "settings": {
-                "preset": "desktop",
-                "chromeFlags": "--no-sandbox"
-            }
-        },
-        "assert": {
-            "preset": "lighthouse:recommended",
-            "assert": {
-                "assertions": {
-                    "categories:performance": ["warn", { "minScore": 0.8 }],
-                    "categories:accessibility": ["warn", { "minScore": 0.8 }],
-                    "categories:best-practices": ["warn", { "minScore": 0.8 }],
-                    "categories:seo": ["warn", { "minScore": 0.8 }]
-                }
-            }
-        },
-        "server": {},
-        "upload": {
-            "target": "filesystem",
-            "outputDir": "./lhci_reports",
-            "reportFilenamePattern": "%%PATHNAME%%-%%DATETIME%%-report.%%EXTENSION%%"
+  "ci": {
+    "collect": {
+      "staticDistDir": "./build",
+      "startServerReadyPattern": "ready on",
+      "url": [
+        "http://localhost:3000",
+        "http://localhost:3000/profile",
+        "http://localhost:3000/detail"
+      ],
+      "numberOfRuns": 1,
+      "settings": {
+        "preset": "desktop",
+        "chromeFlags": "--no-sandbox"
+      }
+    },
+    "assert": {
+      "preset": "lighthouse:recommended",
+      "assert": {
+        "assertions": {
+          "categories:performance": ["warn", { "minScore": 0.8 }],
+          "categories:accessibility": ["warn", { "minScore": 0.8 }],
+          "categories:best-practices": ["warn", { "minScore": 0.8 }],
+          "categories:seo": ["warn", { "minScore": 0.8 }]
         }
+      }
+    },
+    "server": {},
+    "upload": {
+      "target": "filesystem",
+      "outputDir": "./lhci_reports",
+      "reportFilenamePattern": "%%PATHNAME%%-%%DATETIME%%-report.%%EXTENSION%%"
     }
+  }
 }

package.json

@@ -46,6 +46,7 @@
     "@babel/preset-react": "^7.23.3",
     "babel-jest": "^29.7.0",
     "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0"
+    "jest-environment-jsdom": "^29.7.0",
+    "postcss": "^8.4.33"
   }
 }

public/index.html

@@ -15,9 +15,9 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
+    <!-- <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
     <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
-    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> -->
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

src/App.jsx

@@ -7,7 +7,7 @@ import Qdetail from "src/Qdetail";
 function App() {
   return (
     <div>
-      <BrowserRouter>
+      <BrowserRouter basename={process.env.PUBLIC_URL}>
         <Routes>
           <Route path="/" element={<Main />} />
           <Route path="/profile" element={<Myprofile />} />

src/Header.jsx

@@ -0,0 +1,66 @@
+// @ts-nocheck
+import React from "react";
+import { styles } from "./components/qdetail/style";
+import { useState } from "react";
+
+function Header() {
+    const [searchClick, setSearchClick] = useState(false);
+    const [searchContent, setSearchContent] = useState('')
+    const [isSearchClicked, setIsSearchClicked] = useState(false)
+    const [isLogined, setIsLogined] = useState(false)
+    const handleLogin = () => {
+        setIsLogined(true)
+    }
+    const handleSearchBlock = () => {
+        setIsSearchClicked(!isSearchClicked)
+        console.log(isSearchClicked)
+    }
+    const handleSearchClick = (event) => {
+        setSearchContent(event.target.value)
+    }//서버로 보낼 검색한 내용이 담긴 값
+    const handleSearchBlockBack = () => {
+        setIsSearchClicked(!isSearchClicked)
+        console.log(isSearchClicked)
+    }
+    const handleLogout = () => {
+        setIsLogined(false)
+    }
+    return (
+        <div style={styles.header_block}>
+            <div style={{ color: "#EB7125", fontWeight: 'bold', width: '6vw' }}>큐피로고</div>{/*로고 이미지로 대체*/}
+            <div style={isSearchClicked ? styles.search_btn_after : styles.search_btn_before}>
+                {isSearchClicked ?
+                    <div style={{ display: 'flex', transition: 'all 0.5s ease' }}>
+                        <div onClick={handleSearchBlockBack} style={styles.header_back_search}>←</div>
+                        <input placeholder="단어 형태로 검색어를 입력하세요" style={styles.header_input}></input>
+                        <div style={styles.header_search_after}></div>
+                    </div>
+                    :
+                    <div onClick={handleSearchBlock} style={styles.header_center_before}>
+                        <div style={styles.header_search_before}></div>
+                        <div style={styles.header_input_before}>질문하기 전 검색하기</div>
+                    </div>}
+
+            </div>{/* timing-function로 돋보기모양 div 이동, 
+            좌우로 늘리기, 
+            input태그 event/value 내용 props로 전달 */}
+            <div style={{ width: '6vw' }}></div>
+            {isLogined ? <div style={styles.header_profile}>
+                <div onClick={handleLogout} style={styles.header_logout}>로그아웃</div>
+                <div style={styles.header_profile_box}>
+                    <div style={styles.header_profile_img}></div>
+                    <div style={styles.header_profile_nickname}>닉네임</div>
+                    <div style={styles.header_profile_point}>100P</div>
+                    <div style={styles.header_profile_charge_btn}>충전하러 가기</div>
+                </div>
+            </div>
+                :
+                <div onClick={handleLogin} style={styles.header_not_login}>
+                    <div style={styles.header_login_btn}>로그인하기</div>
+                </div>}
+
+        </div >
+    )
+}
+
+export default Header;

src/Qdetail.jsx

@@ -2,7 +2,10 @@
 import React from "react";
 import { useState } from "react";
 import { styles } from "src/components/qdetail/style";
-//import { Link } from "react-router-dom";
+import Answer from "./components/qdetail/Answer";
+import Newanswer from "./components/qdetail/Newanswer";
+import Question from "./components/Question";
+import Header from "./Header";
 //import { Link } from "react-router-dom";
 
 function Qdetail() {
@@ -11,56 +14,84 @@ function Qdetail() {
     const [view, setView] = useState(false);
     const [alarm, setAlarm] = useState(false);
     const [isAnswer, setIsAnswer] = useState(false);
+    const [isChild, setIsChiled] = useState(true);
+    const [answerOfAnswer, setAnswerOfAnswer] = useState(false);
+    const [answerList, setAnswerList] = useState([
+        {
+            content: "이것은 첫 번째 답변입니다.",
+            author: "User1",
+            reply: [{
+                content: '이것은 첫 번째 답변의 리플1입니다.',
+                author: "User4"
+            },
+            {
+                content: '이것은 첫 번째 답변의 리플2입니다.',
+                author: 'User7'
+            }],
+        },
+        {
+            content: "두 번째 답변입니다.",
+            author: "User2",
+            reply: [{
+            }]
+        },
+        {
+            content: "세 번째 답변입니다.",
+            author: "User3",
+            reply: [{
+                content: '이것은 세 번째 답변의 리플1입니다.',
+                author: "User6",
+            }]
+        },
+    ]);/*서버에서 받는 답변 리스트
+    Answer안에 있는 Reanswer에 대한 내용도 Qdetail에서 받아야할지,
+    Answer컴포넌트에서 불러와야할지...*/
+
+    //등록하기 누름 => textarea에 있는 내용이 컴포넌트를 불러오는 컴포넌트로 전달 => map으로 돌려서 생성
     const ddClick = () => {
         setView(!view)
     };
     const answerClick = () => {
         console.log("clicked")
         setBtnClicked(true)
     };
+
     return (
-        <div style={styles.container}>
-            <div style={styles.q_a_sub}>
-                <button style={styles.q_container}>
-                    <div>돋보기 사진이 들어갈 자리</div>
-                    <div>궁금한 것을 질문해보세요</div>
-                </button>
-                <button style={styles.ad}>광고/배너</button>
-            </div>
-            <div style={styles.ad_q}>
-                <div style={styles.a_b_q_container}>
-                    <div style={styles.b_q_container}>이전 질문으로 이동 칸</div>
-                    {/*Link 컴포넌트로 바꿀 태그*/}
-                    <div style={styles.a_q_container}>다음 질문으로 이동 칸</div>
-                    {/*Link 컴포넌트로 바꿀 태그*/}
+        <div>
+            <Header />
+            <div style={styles.full_container}>
+                <div style={styles.search_ad_container}>
                 </div>
-                <div style={styles.q_a_main}>
-                    <div style={{ display: 'flex', flex: '1' }}>
-                        <div style={styles.q_content}>
-                            <div style={{ background: 'blue', flex: '1', display: 'flex' }}>
-                                <div style={{ flex: "1", background: 'red', borderRadius: "50%", width: "7vh", height: "7vh" }}>질문자 프로필</div>
-                                <div style={{ flex: '10' }}>제목/해시태그/시간/어린이/더보기</div>
-                            </div>
-                            <div style={{ background: 'skyblue', flex: '1' }}>질문내용</div>
-                        </div>
+                <div style={styles.question_detail_main_container}>
+                    <div style={styles.after_before_question_container}>
+                        <div style={styles.before_question_container}>◀ 이전 질문으로 이동 칸</div>
+                        {/*Link 컴포넌트로 바꿀 태그*/}
+                        <div style={styles.after_question_container}>다음 질문으로 이동 칸 ▶</div>
+                        {/*Link 컴포넌트로 바꿀 태그*/}
                     </div>
-                    <hr style={{ width: '90%', height: '2px', background: 'white' }} />
-                    <div style={{ display: 'flex', justifyContent: 'center' }}>
-                        {btnClicked ? null/*답변 입력할 수 있는 컴포넌트*/ : <button onClick={answerClick} style={styles.a_button}>
-                            답변하기
-                        </button>}
+                    <div style={styles.main_orange_container}>
+                        <div style={{ flex: '1' }}>
+                            <Question />
+                        </div>
+                        <div style={{ textAlign: 'center', color: 'white', fontWeight: '600', fontSize: '16px' }}>{answerList.length}명의 전문가가 답변했어요</div>
+                        <hr style={styles.hrline} />
+                        <div style={btnClicked ? { flex: '1', display: 'flex', justifyContent: 'center', alignItems: 'center' } : { display: 'flex', height: '100%' }}>
+                            {btnClicked ? <Newanswer /> :
+                                <button onClick={answerClick} style={styles.answer_button}>답변하기</button>}
+                        </div>
+                        {answerList.map((answer, index) => (
+                            <div style={styles.answer}>
+                                <Answer key={index} reply={answer.reply} content={answer.content} author={answer.author} />
+                            </div>
+                        ))}
                     </div>
-                    {/* map함수로 답변 컴포넌트 호출 */}
+                </div>
+                <div style={styles.profilecontainer}>
+                    { }
 
-                    <div style={styles.answer}>답변1</div>
-                    <div style={styles.answer}>답변2</div>
-                    <div style={styles.answer}>답변3</div>
                 </div>
-            </div>
-            <div style={styles.profilecontainer}>
-                <div style={styles.profilecontainer2}>로그인</div>
-            </div>
-        </div >
+            </div >
+        </div>
     );
 }
-export default Qdetail;
+export default Qdetail;