Merge branch 'main' into 93-feature/mapmodal-component

package.json

@@ -20,6 +20,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-kakao-maps-sdk": "^1.1.27",
+    "react-loader-spinner": "^6.1.6",
     "react-router-dom": "^6.26.2",
     "styled-components": "^6.1.13",
     "vite-tsconfig-paths": "^5.0.1",

src/components/Banner/index.tsx

@@ -0,0 +1,15 @@
+import * as S from './styles';
+
+interface BannerProps {
+  src: string;
+  width?: number;
+  height?: number;
+}
+
+export const Banner = ({ src, width = 100, height = 30 }: BannerProps) => {
+  return (
+    <S.Banner width={width} height={height}>
+      <img src={src} alt="banner"></img>
+    </S.Banner>
+  );
+};

src/components/Banner/styles.ts

@@ -0,0 +1,22 @@
+import { styled } from 'styled-components';
+
+export const Banner = styled.div<{ width: number; height: number }>`
+  position: relative;
+  width: ${({ width }) => width}%;
+  padding-top: ${({ height }) => height}%;
+  max-width: 1280px;
+  margin: auto;
+
+  & > img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  @media (min-width: 1280px) {
+    padding-top: 300px;
+  }
+`;

src/components/CrownIcon/index.tsx

@@ -0,0 +1,6 @@
+import * as S from './styles';
+import { faCrown } from '@fortawesome/free-solid-svg-icons';
+
+export const CrownIcon = () => {
+  return <S.CrownIcon icon={faCrown} />;
+};

src/components/CrownIcon/styles.ts

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+export const CrownIcon = styled(FontAwesomeIcon)`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  color: ${({ theme }) => theme.colors.yellow};
+`;

src/components/FilterButtonContainer/index.tsx

@@ -0,0 +1,28 @@
+import * as S from './styles';
+import { useState } from 'react';
+import { FilterButton } from '@/components/FilterButton';
+
+interface FilterButtonContainerProps {
+  buttonList: string[];
+  onFilterChange?: (index: number) => void;
+}
+
+export const FilterButtonContainer = ({ buttonList, onFilterChange }: FilterButtonContainerProps) => {
+  const [activeItem, setActiveItem] = useState(0);
+
+  const onClick = (index: number) => () => {
+    setActiveItem(index);
+    onFilterChange?.(index);
+  };
+
+  return (
+    <S.FilterButtonContainer>
+      {buttonList.map((text, index) => (
+        <S.FilterButtonWrapper>
+          <FilterButton key={index} text={text} $isActive={index === activeItem} onClick={onClick(index)} />
+          {index < buttonList.length - 1 && <S.StyledSeperator />}
+        </S.FilterButtonWrapper>
+      ))}
+    </S.FilterButtonContainer>
+  );
+};

src/components/FilterButtonContainer/styles.ts

@@ -0,0 +1,22 @@
+import { Seperator } from '@/components/Seperator';
+import styled from 'styled-components';
+
+export const FilterButtonContainer = styled.div`
+  display: flex;
+  border: none;
+`;
+
+export const FilterButtonWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  position: relative;
+`;
+
+export const StyledSeperator = styled(Seperator)`
+  display: flex;
+  align-items: center;
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+`;

src/components/Footer/index.tsx

@@ -0,0 +1,25 @@
+import * as S from './styles';
+import interparkLogo from '@/assets/imgs/interpark-logo.png';
+import kopisLogo from '@/assets/imgs/kopis-logo.png';
+import yes24Logo from '@/assets/imgs/yes24-logo.png';
+const logoList = [
+  { href: 'https://www.interpark.com', alt: 'interpark', src: interparkLogo },
+  { href: 'https://www.kopis.or.kr', alt: 'KOPIS', src: kopisLogo },
+  { href: 'https://www.yes24.com', alt: 'YES24', src: yes24Logo },
+];
+export const Footer = () => {
+  return (
+    <S.FooterContainer>
+      <S.StyledFooter>
+        {logoList.map((logo, index) => (
+          <>
+            <a href={logo.href} target="_blank" rel="noopener noreferrer">
+              <S.Logo src={logo.src} alt={logo.alt} />
+            </a>
+            {index < logoList.length - 1 && <S.StyledSeperator />}
+          </>
+        ))}
+      </S.StyledFooter>
+    </S.FooterContainer>
+  );
+};

src/components/Footer/styles.ts

@@ -0,0 +1,28 @@
+import { Seperator } from '@/components/Seperator';
+import styled from 'styled-components';
+
+export const FooterContainer = styled.footer`
+  border-top: 1px solid ${({ theme }) => theme.colors.gray};
+`;
+
+export const StyledFooter = styled.div`
+  max-width: ${props => props.theme.layout.max_width};
+  margin: 0 auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  & > a {
+    padding: 0 10px;
+  }
+`;
+
+export const StyledSeperator = styled(Seperator)`
+  height: 20px;
+`;
+
+export const Logo = styled.img`
+  height: 35px;
+  width: 110px;
+  object-fit: contain;
+  margin: 10px 5px;
+`;

src/components/Header/index.tsx

@@ -11,11 +11,11 @@ export const Header = () => {
         <S.SearchBarContainer>
           <S.SearchBar placeholder="공연을 검색해보세요." />
           <S.SearchIcon>
-            <S.StyledFontAwesomeIcon icon={faSearch} isSearch />
+            <S.StyledFontAwesomeIcon icon={faSearch} $isSearch />
           </S.SearchIcon>
         </S.SearchBarContainer>
         <S.IconContainer>
-          <S.StyledFontAwesomeIcon icon={faRankingStar} isRangked />
+          <S.StyledFontAwesomeIcon icon={faRankingStar} $isRanked />
           <S.StyledFontAwesomeIcon icon={faUser} />
         </S.IconContainer>
       </S.StyledHeader>

src/components/Header/styles.ts

@@ -4,7 +4,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 export const HeaderContainer = styled.header`
   width: 100%;
-  border-bottom: 1px solid ${props => props.theme.colors.grey};
+  border-bottom: 1px solid ${props => props.theme.colors.gray};
 `;
 
 export const StyledHeader = styled.div`
@@ -36,7 +36,7 @@ export const SearchBar = styled.input`
   padding: 10px 40px 10px 20px;
   border-radius: 50px;
   outline: none;
-  border: 1px solid ${props => props.theme.colors.grey};
+  border: 1px solid ${props => props.theme.colors.gray};
 
   &::placeholder {
     color: ${props => props.theme.colors.text_gray};
@@ -62,8 +62,8 @@ export const IconContainer = styled.div`
   }
 `;
 
-export const StyledFontAwesomeIcon = styled(FontAwesomeIcon)<{ isRangked?: boolean; isSearch?: boolean }>`
-  font-size: ${({ isSearch }) => (isSearch ? '15px' : '25px')};
-  color: ${({ theme, isRangked }) => (isRangked ? theme.colors.primary : theme.colors.black)};
+export const StyledFontAwesomeIcon = styled(FontAwesomeIcon)<{ $isRanked?: boolean; $isSearch?: boolean }>`
+  font-size: ${({ $isSearch }) => ($isSearch ? '15px' : '25px')};
+  color: ${({ theme, $isRanked }) => ($isRanked ? theme.colors.primary : theme.colors.black)};
   cursor: pointer;
 `;

src/components/HeartButton/index.tsx

@@ -0,0 +1,23 @@
+import { useState } from 'react';
+import { faHeart as farHeart } from '@fortawesome/free-regular-svg-icons';
+import { faHeart as fasHeart } from '@fortawesome/free-solid-svg-icons';
+import * as S from './styles';
+
+interface HeartButtonProps {
+  initialFilled?: boolean;
+  onClickHeartButton?: (isFilled: boolean) => void;
+}
+
+export const HeartButton = ({ initialFilled = false, onClickHeartButton }: HeartButtonProps) => {
+  const [isFilled, setIsFilled] = useState(initialFilled);
+
+  const onClick = () => {
+    const newFilledState = !isFilled;
+    setIsFilled(prev => !prev);
+    if (onClickHeartButton) {
+      onClickHeartButton(newFilledState);
+    }
+  };
+
+  return <S.HeartButton icon={isFilled ? fasHeart : farHeart} $isFilled={isFilled} onClick={onClick} />;
+};

src/components/HeartButton/styles.ts

@@ -0,0 +1,9 @@
+import { styled } from 'styled-components';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+export const HeartButton = styled(FontAwesomeIcon)<{ $isFilled: boolean }>`
+  color: ${({ theme, $isFilled }) => ($isFilled ? theme.colors.primary : theme.colors.gray)};
+  cursor: pointer;
+  transition: color 0.1s ease;
+  font-size: 18px;
+`;

src/components/Loader/index.tsx

@@ -0,0 +1,6 @@
+import theme from '@/styles/theme';
+import { FidgetSpinnerProps, ThreeDots } from 'react-loader-spinner';
+
+export const Loader = ({ ...rest }: FidgetSpinnerProps) => {
+  return <ThreeDots color={theme.colors.primary} {...rest} />;
+};

src/components/LocalDateTime/index.tsx

@@ -0,0 +1,22 @@
+import { useEffect, useState } from 'react';
+import * as S from './styles';
+
+export const LocalDateTime = () => {
+  const [renderDateTime, setRenderDateTime] = useState('');
+
+  useEffect(() => {
+    const currentTime = new Date();
+    const dateTimeFormat = new Intl.DateTimeFormat('ko-KR', {
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit',
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: false,
+    }).format(currentTime);
+
+    setRenderDateTime(dateTimeFormat + ' 기준');
+  }, []);
+
+  return <S.LocalDateTime>{renderDateTime}</S.LocalDateTime>;
+};

src/components/LocalDateTime/styles.ts

@@ -0,0 +1,6 @@
+import { P16 } from '@/components/Text';
+import styled from 'styled-components';
+
+export const LocalDateTime = styled(P16)`
+  color: ${({ theme }) => theme.colors.text_gray};
+`;

src/components/MenuItemContainer/index.tsx

@@ -5,16 +5,22 @@ import { Seperator } from '@/components/Seperator';
 
 interface MenuItemContainerProps {
   menuItemList: string[];
+  onMenuItemChange?: (index: number) => void;
 }
 
-export const MenuItemContainer = ({ menuItemList }: MenuItemContainerProps) => {
+export const MenuItemContainer = ({ menuItemList, onMenuItemChange }: MenuItemContainerProps) => {
   const [activeItem, setActiveItem] = useState(0);
 
+  const onClick = (index: number) => () => {
+    setActiveItem(index);
+    onMenuItemChange?.(index);
+  };
+
   return (
     <S.MenuItemContainer>
       {menuItemList.map((item, index) => (
         <S.MenuItemWrapper>
-          <MenuItem key={item} item={item} active={index === activeItem} onClick={() => setActiveItem(index)} />
+          <MenuItem key={item} item={item} active={index === activeItem} onClick={onClick(index)} />
           {index < menuItemList.length - 1 && <Seperator />}
         </S.MenuItemWrapper>
       ))}

src/components/NoResultIcon/index.tsx

@@ -0,0 +1,10 @@
+import * as S from './styles';
+
+export const NoResultIcon = () => {
+  return (
+    <S.NoResultContainer>
+      <S.NoResultIcon src="src/assets/imgs/noResultIcon.svg" alt="noResultLogo" />
+      <S.NoResultText>검색 결과가 존재하지 않습니다.</S.NoResultText>
+    </S.NoResultContainer>
+  );
+};

src/components/NoResultIcon/styles.ts

@@ -0,0 +1,19 @@
+import { H32 } from '@/components/Text';
+import styled from 'styled-components';
+
+export const NoResultContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+`;
+
+export const NoResultIcon = styled.img`
+  width: 200px;
+  height: 200px;
+`;
+
+export const NoResultText = styled(H32)`
+  margin-top: 2rem;
+  color: ${({ theme }) => theme.colors.black};
+`;