[feat] MyFootstep/search

footstep/package.json

@@ -1,44 +1,48 @@
 {
-    "name": "footstep",
-    "version": "0.1.0",
-    "private": true,
-    "dependencies": {
-        "@ant-design/icons": "^4.7.0",
-        "@testing-library/jest-dom": "^5.16.4",
-        "@testing-library/react": "^13.3.0",
-        "@testing-library/user-event": "^13.5.0",
-        "http-proxy-middleware": "^2.0.6",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0",
-        "react-icons": "^4.4.0",
-        "react-router-dom": "^6.3.0",
-        "react-scripts": "5.0.1",
-        "styled-components": "^5.3.5",
-        "web-vitals": "^2.1.4"
-    },
-    "scripts": {
-        "start": "react-scripts start",
-        "build": "react-scripts build",
-        "test": "react-scripts test",
-        "eject": "react-scripts eject"
-    },
-    "eslintConfig": {
-        "extends": [
-            "react-app",
-            "react-app/jest"
-        ]
-    },
-    "browserslist": {
-        "production": [
-            ">0.2%",
-            "not dead",
-            "not op_mini all"
-        ],
-        "development": [
-            "last 1 chrome version",
-            "last 1 firefox version",
-            "last 1 safari version"
-        ]
-    },
-    "proxy": "http://localhost:8080"
+  "name": "footstep",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@ant-design/icons": "^4.7.0",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.3.0",
+    "@testing-library/user-event": "^13.5.0",
+    "http-proxy-middleware": "^2.0.6",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-icons": "^4.4.0",
+    "react-router-dom": "^6.3.0",
+    "react-scripts": "5.0.1",
+    "styled-components": "^5.3.5",
+    "web-vitals": "^2.1.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "proxy": "http://localhost:8080",
+  "description": "This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).",
+  "main": "index.js",
+  "author": "",
+  "license": "ISC"
 }

footstep/src/components/Banner/MyfootstepBanner.js

@@ -0,0 +1,73 @@
+import { useEffect, useState } from "react";
+import styles from "./MyfootstepBanner.module.css";
+import img1 from "../../img/MyfootstepBanner.svg";
+import img2 from "../../img/body-banner.svg";
+
+function MyfootstepBanner() {
+    const [slideCnt, setSlideCnt] = useState(0);
+    // const [slide, setSlide] = useState(true);
+    // let interval;
+    // useEffect(() => {
+    //     interval = setInterval(() => {
+    //         slideCnt < 2 ? setSlideCnt((cnt) => cnt + 1) : setSlideCnt(0);
+
+    //         // return () => clearTimeout(interval);
+    //     }, 1000);
+    // }, [slide]);
+
+    // console.log(slideCnt);
+    // useEffect(() => {}, [slideCnt]);
+
+    const bannerArr = [
+        {
+            img_url: img1,
+
+            p: '111내 풋스텝 페이지를 사용하는 방법을 적은 배너입니다.'
+        },
+        {
+            img_url: img2,
+
+            p: `222내 풋스텝 페이지를 사용하는 방법을 적은 배너입니다.`
+        },
+        {
+            img_url: img1,
+
+            p: `333내 풋스텝 페이지를 사용하는 방법을 적은 배너입니다.`
+        },
+    ];
+
+    return (
+        <div
+            className={styles.outer_container}
+            style={{
+                backgroundImage: `url(${bannerArr[slideCnt].img_url})`,
+            }}
+        >
+            <div className={styles.inner_container}>
+                <h1>{bannerArr[slideCnt].h1}</h1>
+                <p
+                    dangerouslySetInnerHTML={{ __html: bannerArr[slideCnt].p }}
+                ></p>
+                <div id={styles.slide_container}>
+                    <div id={styles.slide_box}>
+                        <div
+                            className={styles.slide_circle}
+                            onClick={() => setSlideCnt(0)}
+                        ></div>
+                        <div
+                            className={styles.slide_circle}
+                            onClick={() => setSlideCnt(1)}
+                        ></div>
+                        <div
+                            className={styles.slide_circle}
+                            onClick={() => setSlideCnt(2)}
+                        ></div>
+                        <button id={styles.slide_btn}></button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default MyfootstepBanner;

footstep/src/components/Banner/MyfootstepBanner.module.css

@@ -0,0 +1,58 @@
+.outer_container {
+    width: 100%;
+    height: 43rem;
+    background-image: url(../../img/MyfootstepBanner.svg);
+    background-size: cover;
+    background-position: center;
+    margin-bottom: 10.1rem;
+}
+
+.inner_container {
+    width: 100.8rem;
+    height: 100%;
+    margin: 0 auto;
+    position: relative;
+}
+
+.inner_container p {
+    position: absolute;
+    top: 31.8rem;
+    height: 2.4rem;
+    font-family: "Noto Sans KR";
+    font-size: 1.6rem;
+    font-weight: normal;
+    font-stretch: normal;
+    font-style: normal;
+    line-height: 1.5;
+    letter-spacing: -0.11px;
+    text-align: left;
+    color:var(--white);
+}
+#slide_container {
+    width: 100%;
+    position: absolute;
+    bottom: 3rem;
+}
+#slide_box {
+    width: 6.3rem;
+    height: 0.8rem;
+    margin: 0 auto;
+
+    display: flex;
+    justify-content: space-between;
+}
+
+.slide_circle {
+    width: 0.8rem;
+    height: 0.8rem;
+    border-radius: 50%;
+    background-color: #afafaf;
+    display: inline-block;
+}
+
+#slide_btn {
+    background-image: url(../../icons/Pause.svg);
+    width: 0.8rem;
+    height: 0.8rem;
+    background-position: center;
+}

footstep/src/components/ReplyBox/ReplyBox.js

@@ -0,0 +1,2 @@
+import React from "react";
+import styles from "./ReplyBox.module.css";

footstep/src/components/ReplyBox/ReplyBox.module.css

@@ -0,0 +1,6 @@
+replybox_card {
+    width: 19.8rem;
+    height: 26.3rem;
+    background: var(--whiteblue-bg);
+    border: 0.1rem solid var(--grayblue-border);
+}

footstep/src/components/SearchBar/SearchBar.js

@@ -1,12 +1,30 @@
 //import { render } from '@testing-library/react';
-import React from 'react';
+import React, { useState } from 'react';
 import styles from "./SearchBar.module.css";
 
-function SearchBar () {
+function SearchBar ({getWord}) {
+  const [word, setWord] = useState("");
+  const onChange = (event)=>{
+    setWord(event.target.value);
+  }
+
+    const search_btn = () =>{
+      getWord(word);
+
+
+
+      // console.log(textValue)
+      // const getTextValue = (text) => {
+      //   setTextValue(text);
+      //   console.log()
+
+    }
+
     return (
         <div className={styles.search_bar}>
-          <input className={styles.search_input} type="text" placeholder="Search for other’s footstep..." />
-          <button className={styles.search_btn} onClick={null}>
+          <input onChange={onChange} className={styles.search_input} type="text" placeholder="Search for other’s footstep..." />
+
+          <button className={styles.search_btn} onClick={search_btn}>
           </button>
 
 

footstep/src/routes/Home/Home.js

@@ -70,6 +70,7 @@ function Home() {
     });
   }, []);
 
+
   const keywords = [
     "프론트앤드 경험",
     "백앤드 경력",

footstep/src/routes/MyFootstep/MyFootstep.js

@@ -1,12 +1,56 @@
 import styles from "../MyFootstep/MyFootstep.module.css";
-import React from "react";
+import React, { useEffect, useState } from "react";
+import SideBar from "../../components/SideBar/SideBar.js";
+import Header from "../../components/Header/Header.js";
+import Footer from "../../components/Footer/Footer.js";
+import MyfootstepBanner from "../../components/Banner/MyfootstepBanner";
+import TopBanner from"../../components/Banner/TopBanner";
+import Comments_SideBar from "../../components/Comments_SideBar/Comments_SideBar";
 
 function MyFootstep () {
+  const [open, setOpen] = useState(false);
+  const [commentsopen, setCommentsOpen] = useState(false);
+  const sideBarHandler = () => {
+    setOpen((prev) => !prev);
+  };
+
+  const commentsHandler = () => {
+    setCommentsOpen((prev) => !prev);
+  };
+
   return (
     <div>
+        <Header
+        state={open}
+        clickFunc={sideBarHandler}
+        comments_clickFunc={commentsHandler}
+        icon={true}
+        upper_block={true}
+        />
+        <div className={styles.contents}>
+            <SideBar
+                img={null}
+                name={"문비"}
+                job={"프론트앤드 디자이너"}
+                footprint={2000}
+                display={!open}
+                login={true} 
+            />
+          <div className={styles.scroll}>
+            <div className={styles.body_contents}>
+            <TopBanner />
+            </div>
+          </div>
+        <div>
+          <Comments_SideBar display={commentsopen} />
+        </div>
+        </div>
+
+      <Footer />
+
 
     </div>
-  )
+  );
 }
 
 export default MyFootstep;

footstep/src/routes/MyFootstep/MyFootstep.module.css

@@ -0,0 +1,21 @@
+.header {
+    position: fixed;
+    z-index: 100;
+}
+
+.contents {
+    display: flex;
+    flex-direction: row;
+}
+
+.scroll {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+.body_contents {
+    height: 100vh;
+    padding-top: 6rem;
+}