Design/#37 검색 결과 페이지 퍼블리싱

src/App.jsx

@@ -12,6 +12,8 @@ import AnotherCheckPointRecordPage from './Dispose/AnotherCheckPointRecordPage';
 import JoinGroupPopup from './components/popup/JoinGroupPopup/JoinGroupPop';
 import SecessionUserPopup from './components/popup/SecessionUserPopup/SecessionUserPopup';
 import MyPage from './pages/MyPage';
+import SearchResults from './pages/SearchResults'
+
 
 function App() {
   return (
@@ -20,10 +22,11 @@ function App() {
         <NavBar />
         <div className="main-content">
           <Routes>
+            <Route path='/search' element={<SearchResults/>}/>
+            <Route path="/" element={<MakingGroupPage />} />
             <Route path="/makingGroup" element={<MakingGroupPage />} />
             <Route path="/login" element={<Login />} />
-            <Route path="/signUp" element={<SignUp />} />
-            <Route path="/register" element={<SignUp />} />
+            <Route path="/signup" element={<SignUp />} />
             <Route path="/mypage" element={<MyPage />} />
             <Route
               path="/checkPointRecord"

src/components/search/BookLabel.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const Container = styled.span`
+  border: 1px solid ${props => props.theme.colors.main}; 
+  border-radius: 5px;
+  padding: 2px 8px;
+  background: #fff0f0;
+  display: flex;
+  align-items: center;
+  width: auto;
+`;
+
+const Text = styled.span`
+  font-size: 12px;
+  text-align: center;
+  color: ${props => props.theme.colors.main}; 
+`;
+
+function BookLabel(props) { 
+  return (
+    <Container>
+      <Text>{props.text}</Text>
+    </Container>
+  );
+}
+
+export default BookLabel;

src/components/search/Rating.jsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const RatingContainer = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 14px;
+  font-weight: 400;
+  color: #565656;
+`;
+
+const Star = styled.div`
+  width: 14px;
+  height: 14px;
+  position: relative;
+  background: ${props => {
+    if (props.filled === 'full') {
+      return props.theme.colors.main;
+    } else if (props.filled === 'half') {
+      return `linear-gradient(90deg, ${props.theme.colors.main} 50%, #D3D3D3 50%)`;
+    } else {
+      return '#D3D3D3';
+    }
+  }};
+  border-radius: 50%;
+  clip-path: polygon(
+    50% 0%,
+    61% 35%,
+    98% 35%,
+    68% 57%,
+    79% 91%,
+    50% 70%,
+    21% 91%,
+    32% 57%,
+    2% 35%,
+    39% 35%
+  );
+`;
+
+const RatingNumber = styled.div`
+  color: ${props => props.theme.colors.main};
+  font-size: 14px;
+  font-weight: 900;
+`;
+
+const Rating = ({ rating, totalStars }) => {
+  const fullStars = Math.floor(rating / 2);
+  const halfStars = rating % 2 >= 1 ? 1 : 0;
+  const emptyStars = totalStars - fullStars - halfStars;
+
+  return (
+    <RatingContainer>
+      <div>평점: </div>
+      {[...Array(fullStars)].map((_, index) => (
+        <Star key={index} filled="full" />
+      ))}
+      {[...Array(halfStars)].map((_, index) => (
+        <Star key={fullStars + index} filled="half" />
+      ))}
+      {[...Array(emptyStars)].map((_, index) => (
+        <Star key={fullStars + halfStars + index} filled="empty" />
+      ))}
+      <RatingNumber>{rating}</RatingNumber>
+    </RatingContainer>
+  );
+};
+
+export default Rating;

src/components/search/SearchBar.jsx

@@ -0,0 +1,72 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import SearchIcon from '../../assets/search/search.svg'
+
+const SearchBarContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 40px;
+  border: 2px solid ${props => props.theme.colors.main};
+  border-radius: 40px;
+  width: 40%;
+`;
+
+
+const Input = styled.input`
+  width: 100%;
+  padding: 14px 20px;
+  font-size: 16px;
+  border: none;
+  outline: none;
+  position: relative;
+  border-radius: 40px 0 0 40px;
+
+  &:focus {
+    border-color: ${props => props.theme.colors.main};
+  }
+`;
+
+const SearchButton = styled.button`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 10px 20px;
+  height: 100%;
+  background: white;
+  border-radius: 0 40px 40px 0;
+
+
+  &:hover {
+    background-color: #f1f1f1;
+  border-radius: 0 40px 40px 0;
+  }
+`;
+
+const SearchBar = () => {
+  const [query, setQuery] = useState('');
+
+  const handleSearch = () => {
+    // 추후 실제 검색 로직 추가할 예정
+    console.log('검색어:', query);
+  };
+
+  return (
+    <SearchBarContainer>
+        <Input
+          type="text"
+          placeholder="검색어를 입력하세요..."
+          value={query}
+          onChange={e => setQuery(e.target.value)}
+        />
+        <SearchButton onClick={handleSearch}>
+          <img src={SearchIcon} alt="검색" width={22} height={22} />
+        </SearchButton>
+    </SearchBarContainer>
+  );
+};
+
+export default SearchBar;