diff --git a/.github/workflows/front_ci.yml b/.github/workflows/front_ci.yml deleted file mode 100644 index 2668ad7..0000000 --- a/.github/workflows/front_ci.yml +++ /dev/null @@ -1,64 +0,0 @@ -name: CI - -on: - push: - branches: - - main - pull_request: - branches: - - main - -jobs: - build: - runs-on: ubuntu-latest - - strategy: - matrix: - node-version: [16.x, 18.x] - - if: "!startsWith(github.ref, 'refs/heads/chore/')" && "!startsWith(github.ref, 'refs/heads/env/')" && "!startsWith(github.head_ref, 'chore/')" && "!startsWith(github.head_ref, 'env/')" - - steps: - - name: Checkout repository - uses: actions/checkout@v3 - - - name: Setup Node.js ${{ matrix.node-version }} - uses: actions/setup-node@v3 - with: - node-version: ${{ matrix.node-version }} - cache: 'npm' - - - name: Install dependencies - run: npm install --frozen-lockfile - - - name: Run ESLint - run: npm run lint - - - name: Run Tests - run: npm test --coverage - - - name: Build - run: npm run build - - - name: Run Prettier and commit changes if any - run: | - # Prettier로 코드 포맷팅 - npx prettier --write "src/**/*.{js,jsx,ts,tsx,css}" - # 변경 사항이 있는지 확인 - if [[ `git status --porcelain` ]]; then - # Git 사용자 설정 - git config --local user.email "action@github.com" - git config --local user.name "GitHub Action" - # 변경 사항 커밋 - git add . - git commit -m "style: auto-format code using Prettier [skip ci]" - # 변경 사항 푸시 - git push - fi - - - name: Upload Artifacts - if: success() - uses: actions/upload-artifact@v3 - with: - name: build-artifacts - path: build/ diff --git a/public/images/aladinlogo.png b/public/images/aladinlogo.png new file mode 100644 index 0000000..670ed4d Binary files /dev/null and b/public/images/aladinlogo.png differ diff --git a/src/App.jsx b/src/App.jsx index a0a1534..9ab9ef5 100644 --- a/src/App.jsx +++ b/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() {
+ }/> + } /> } /> } /> - } /> - } /> + } /> } /> + + + + + + + + + diff --git a/src/components/search/BookLabel.jsx b/src/components/search/BookLabel.jsx new file mode 100644 index 0000000..ce87093 --- /dev/null +++ b/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 ( + + {props.text} + + ); +} + +export default BookLabel; diff --git a/src/components/search/Rating.jsx b/src/components/search/Rating.jsx new file mode 100644 index 0000000..f775e73 --- /dev/null +++ b/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 ( + +
평점:
+ {[...Array(fullStars)].map((_, index) => ( + + ))} + {[...Array(halfStars)].map((_, index) => ( + + ))} + {[...Array(emptyStars)].map((_, index) => ( + + ))} + {rating} + + ); +}; + +export default Rating; diff --git a/src/components/search/SearchBar.jsx b/src/components/search/SearchBar.jsx new file mode 100644 index 0000000..66e3737 --- /dev/null +++ b/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 ( + + setQuery(e.target.value)} + /> + + 검색 + + + ); +}; + +export default SearchBar; diff --git a/src/pages/SearchResults.jsx b/src/pages/SearchResults.jsx new file mode 100644 index 0000000..9d84fad --- /dev/null +++ b/src/pages/SearchResults.jsx @@ -0,0 +1,184 @@ +import React from 'react'; +import styled from 'styled-components'; +import ModalButton from '../components/modalButton/ModalButtonOk'; +import BookLabel from '../components/search/BookLabel'; +import SearchBar from '../components/search/SearchBar'; +import Rating from '../components/search/Rating'; + +const Container = styled.div` + margin: 0 9.86%; + margin-top: 80px; + position: relative; + overflow: auto; + display: flex; + flex-direction: column; + gap: 40px; +`; + +const SearchBarWrapper = styled.div` + display: flex; + justify-content: center; + width: 100%; + margin-top: 30px; +`; + +const SearchResultTextContainer = styled.div` + display: flex; + gap: 8px; +`; + +const SearchResultTitle = styled.span` + color: ${props => props.theme.colors.main}; + font-size: 18px; + font-weight: 700; + word-wrap: break-word; +`; + +const SearchResultCount = styled.span` + color: #4E202A; + font-size: 18px; + font-weight: 400; + word-wrap: break-word; +`; + +const BookSectionWrapper = styled.div` + display: flex; + align-items: flex-end; + position: relative; + width: 100%; + gap: 30px; + justify-content: space-between; + flex-wrap: wrap; +`; + +const BookContainer = styled.div` + position: relative; + display: flex; + justify-content: flex-start; + align-items: flex-start; + gap: 40px; + flex-wrap: wrap; +`; + +const BookImage = styled.img` + width: 176px; + height: 258px; +`; + +const BookDetails = styled.div` + display: flex; + flex-direction: column; + width: auto; + gap: 20px; +`; + +const BookTitle = styled.div` + color: #4E202A; + font-size: 18px; + font-weight: 700; + word-wrap: break-word; + gap: 10px; + display: flex; +`; + +const AladinImage = styled.img` + max-width: 100%; + height: auto; + object-fit: contain; + width: 44px; +`; + +const BookSubtitle = styled.div` + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + color: #565656; + font-size: 14px; + font-weight: 400; + gap: 10px; + word-wrap: break-word; +`; + + +const LabelContainer = styled.div` + display: flex; + flex-direction: row; + gap: 10px; +`; + +const ModalButtonWrapper = styled.div` + display: flex; + justify-content: flex-end; + width: 100%; + max-width: 200px; +`; + +const Pagination = styled.div` + display: flex; + justify-content: center; + align-items: center; + bottom: 20px; + width: 100%; + height: 38px; + gap: 6px; +`; + +const PageText = styled.span` + font-size: 14px; + font-weight: 400; + color: ${props => (props.active ? props.theme.colors.main : '#4E202A')}; +`; + +const SearchResults = () => { + const rating = 7.5; + const totalStars = 5; + + return ( + <> + + + + + + + ‘채식주의자’ + 검색 결과 총 00건 + + + + + + + + 채식주의자 + + + + 저자: 한강 + 출판사 : 창비 +
출간일: 2022년 03월
+ + + + + + + + + + + + + + + + 이전 + 1 + 2 3 4 5 6 7 다음 + + + ); + }; + + export default SearchResults; \ No newline at end of file