Feat : PosterWithButton 컴포넌트 구현

package.json

@@ -19,6 +19,7 @@
     "@types/xml-js": "^1.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "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/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/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};
+`;

src/components/PItem/index.tsx

@@ -0,0 +1,28 @@
+import { HeartButton } from '@/components/HeartButton';
+import * as S from './styles';
+import { Poster } from '@/components/Poster';
+interface PItemProps {
+  id: string;
+  rank: number;
+  title: string;
+  area: string;
+  location: string;
+  period: string;
+  posterUrl: string;
+}
+
+export const PItem = ({ rank, title, location, period, posterUrl, area }: PItemProps) => {
+  return (
+    <S.ItemContainer>
+      <S.Rank>{rank}</S.Rank>
+      {posterUrl && <Poster src={posterUrl} width="90px" rank={rank} />}
+      <S.InfoContainer>
+        <S.Title>{title}</S.Title>
+        <S.Info>{area}</S.Info>
+        <S.Info>{location}</S.Info>
+        <S.Info>{period}</S.Info>
+      </S.InfoContainer>
+      <HeartButton />
+    </S.ItemContainer>
+  );
+};

src/components/PItem/styles.ts

@@ -0,0 +1,33 @@
+import { H16, H24, P14 } from '@/components/Text';
+import styled from 'styled-components';
+
+export const ItemContainer = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 16px;
+  border-bottom: 1px solid ${({ theme }) => theme.colors.gray};
+`;
+
+export const Rank = styled(H24)`
+  width: 40px;
+  text-align: center;
+  margin-right: 24px;
+`;
+
+export const InfoContainer = styled.div`
+  display: flex;
+  flex: 1;
+  justify-content: space-between;
+  align-items: center;
+  margin-left: 24px;
+`;
+
+export const Title = styled(H16)`
+  flex: 2;
+`;
+
+export const Info = styled(P14)`
+  flex: 1;
+  text-align: center;
+  color: ${({ theme }) => theme.colors.text_gray};
+`;

src/components/PItemContainer/index.tsx

@@ -0,0 +1,32 @@
+import { Loader } from '@/components/Loader';
+import * as S from './styles';
+import { PItem } from '@/components/PItem';
+import { CommonResponseType } from '@/types/apis';
+
+interface PItemContainerProps {
+  data: Pick<CommonResponseType, 'mt20id' | 'prfnm' | 'fcltynm' | 'prfpdfrom' | 'prfpdto' | 'poster' | 'area'>[];
+  isLoading: boolean;
+}
+
+export const PItemContainer = ({ data, isLoading }: PItemContainerProps) => {
+  if (isLoading) {
+    return <Loader />;
+  }
+
+  return (
+    <S.PItemContainer>
+      {data.map((item, index) => (
+        <PItem
+          key={item.mt20id}
+          rank={index + 1}
+          id={item.mt20id}
+          title={item.prfnm}
+          location={item.fcltynm}
+          period={`${item.prfpdfrom} ~ ${item.prfpdto}`}
+          posterUrl={item.poster}
+          area={item.area}
+        />
+      ))}
+    </S.PItemContainer>
+  );
+};

src/components/PItemContainer/styles.ts

@@ -0,0 +1,6 @@
+import { styled } from 'styled-components';
+
+export const PItemContainer = styled.div`
+  width: 100%;
+  margin: 0 auto;
+`;