[feat] Searchbar/Searchcard/Mainsearchbar

footstep/src/components/MainSearchBar/MainSearchBar.js

@@ -0,0 +1,23 @@
+//import { render } from '@testing-library/react';
+import React from 'react';
+import styles from "./MainSearchBar.module.css";
+
+function MainSearchBar (ctg_front,ctg_back,ctg_interview,ctg_design) {
+    return (
+        <div className={styles.search_frame}>
+            <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}></button> 
+            </div>
+            <div className={styles.category_box}>
+            <button className={styles.hot_keyword} onClick={styles.text}>{ctg_front='프론트앤드 경험'}</button>
+            <button className={styles.hot_keyword}>{ctg_back='백앤드 경험'}</button>
+            <button className={styles.hot_keyword}>{ctg_interview='IT회사 면접'}</button>
+            <button className={styles.hot_keyword}>{ctg_design='디자인 커리큘럼'}</button>
+            </div>
+        </div>
+      );
+
+  }
+
+  export default MainSearchBar;

footstep/src/components/MainSearchBar/MainSearchBar.module.css

@@ -0,0 +1,89 @@
+.search_frame{
+    width: 60rem;
+    height: 7.2rem;
+    /* margin: 10.1rem 43.8rem 12.1rem 8.5rem; */
+}
+
+
+
+.search_bar{
+    background-color:var(--light-blue);
+    display:flex;
+    width: 60rem;
+    height: 5rem;
+    border-radius: 2.5rem;
+    border-radius: 2.5rem;
+    background-color: var(--light-blue);
+    border: none;
+    /* position:absolute; */
+}
+
+.search_input{
+    width: 55rem;
+    height: 5rem;
+    border-radius: 2.5rem;
+    background-color: var(--light-blue);
+    border: none;
+    padding-left: 2rem;
+}
+
+.search_input::placeholder{
+    font-family: "Noto Sans";
+    font-size: 1.4rem;
+    font-weight: normal;
+    font-stretch: normal;
+    font-style: normal;
+    line-height: 1.43;
+    letter-spacing: -0.01rem;
+    text-align: left;
+    color:var(--gray-font);
+}
+.search_btn {
+    width: 5rem;
+    height: 5rem;
+    background-color: var(--footstep_blue);
+    position: relative;
+    /* right:5rem; */
+    border-radius: 50%;
+    box-shadow: -0.4rem 0 0.4rem 0 rgba(50, 70, 94, 0.29);
+    background-image: url(../../icons/searchbtn.svg);
+    background-repeat: no-repeat;
+    background-position: right center;
+  }
+
+  .search_btn:hover {
+    width: 5rem;
+    height: 5rem;
+    background-color: var(--footstep_blue);
+    position: relative;
+    /* right: 5rem; */
+    border-radius: 50%;
+    box-shadow: -4px 0 4px 0 rgba(50, 70, 94, 0.29);
+    background-image: url(../../icons/searchbtn_click.svg);
+    background-repeat: no-repeat;
+    background-position: right center;
+  }
+
+  .category_box{
+    position: column;
+    padding-left: 2rem;
+    margin-top: 0.4rem;
+
+  }
+
+  .hot_keyword {
+    font-family: "Noto Sans";
+    font-size: 10px;
+    font-weight: normal;
+    font-stretch: normal;
+    font-style: normal;
+    line-height: 1.8;
+    letter-spacing: -0.07px;
+    text-align: left;
+    color: #737373;
+    height: 18px;
+    margin-right: 1rem;
+  }
+  .hot_keyword:hover {
+    text-decoration: underline;
+  }

footstep/src/components/SearchBar/SearchBar.js

@@ -0,0 +1,19 @@
+//import { render } from '@testing-library/react';
+import React from 'react';
+import styles from "./SearchBar.module.css";
+
+function SearchBar () {
+    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}>
+          </button>
+
+
+        </div>
+
+      );
+
+  }
+
+  export default SearchBar;

footstep/src/components/SearchBar/SearchBar.module.css

@@ -0,0 +1,49 @@
+.search_bar{
+  background-color: var(--white);
+  display: flex;
+}
+
+.search_input {
+  box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.1);
+  width: 84.9rem;
+  height: 5rem;
+  border-radius: 25px;
+  background-color: var(--white);
+  border: none;
+  padding-left: 2rem;
+}
+.search_input::placeholder {
+  font-family: NotoSans;
+  font-size: 1.4rem;
+  font-weight: normal;  
+  font-stretch: normal;
+  font-style: normal;
+  letter-spacing: -0.01rem;
+  color: var(--gray-font);
+}
+
+.search_btn {
+  width: 5rem;
+  height: 5rem;
+  background-color: var(--footstep_blue);
+  position: relative;
+  right:5rem;
+  border-radius: 50%;
+  box-shadow: -0.4rem 0 0.4rem 0 rgba(50, 70, 94, 0.29);
+  background-image: url(../../icons/searchbtn.svg);
+  background-repeat: no-repeat;
+  background-position: right center;
+}
+
+.search_btn:hover {
+  width: 5rem;
+  height: 5rem;
+  background-color: var(--footstep_blue);
+  position: relative;
+  right: 5rem;
+  border-radius: 50%;
+  box-shadow: -4px 0 4px 0 rgba(50, 70, 94, 0.29);
+  background-image: url(../../icons/searchbtn_click.svg);
+  background-repeat: no-repeat;
+  background-position: right center;
+}

footstep/src/components/SearchCard/SearchCard.js

@@ -0,0 +1,49 @@
+//import { render } from '@testing-library/react';
+import React from 'react';
+import styles from "./SearchCard.module.css";
+import footprint from '../../icons/footprint.svg';
+
+// hoverEvent = (e)=>{
+//     e.target.styles.background = "#E7EAEE";
+// }
+
+function SearchCard (searchcard_text_title,searchcard_name,searchcard_job,searchcard_contents,searchcard_date,searchcard_num) {
+
+    return (
+
+             <div className={styles.searchcard_frame}>
+                <div className={styles.search_card}>
+                    <div className={styles.searchcard_profile_img}></div>          
+
+                    <div>
+                        <h2 className={styles.searchcard_text_title}>{searchcard_text_title='Preview 내용이 들어갈 자리입니다. 이 카드의 제목은 한 줄까지 가능합니다.'}</h2>
+                        {/* <div className={styles.filter_box}> */}
+                        <div className={styles.profile_box}>
+                        <span className={styles.searchcard_name}>{searchcard_name="문비"}</span>
+                        <span className={styles.searchcard_job}>{searchcard_job="프론트엔드"}</span>
+                        </div>
+                        {/* </div> */}
+                        <h2 className={styles.searchcard_contents}>{searchcard_contents="글의 내용이 들어갈 자리입니다. 이 내용은 대충 2~3줄 정도? "}</h2>
+                        <h2 className={styles.searchcard_date}>{searchcard_date="2021/07/12"}</h2>
+                        <img 
+                            className={styles.searchcard_foot_img}
+                            src={footprint} 
+                            alt={footprint}>
+
+                        </img>
+                        <h2 className={styles.searchcard_num}>{searchcard_num="4"}</h2>
+                        <div className={styles.line}></div>
+                    </div>
+
+
+
+                </div>
+            </div>
+
+      );
+
+  }
+
+
+
+  export default SearchCard;