[Feat/#49] footer 구현

.env

@@ -0,0 +1 @@
+VITE_API_BASE_URL = https://www.koreanjpark.o-r.kr

package.json

@@ -14,6 +14,7 @@
   "dependencies": {
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
+    "axios": "^1.7.8",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.28.0"

src/App.tsx

@@ -10,7 +10,7 @@ const router = createBrowserRouter([
     element: <Layout />,
     children: [
       {
-        path: '/main',
+        path: '/',
         element: <Main />,
       },
       {

src/apis/apis.ts

@@ -1 +1,6 @@
+import axios from 'axios';
+
 //예시
+export const instance = axios.create({
+  baseURL: import.meta.env.VITE_API_BASE_URL,
+});

src/assets/svgs/IcAdd.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import type { SVGProps } from 'react';
 const SvgIcAdd = (props: SVGProps<SVGSVGElement>) => (
   <svg

src/assets/svgs/IcCheckbox.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import type { SVGProps } from 'react';
 const SvgIcCheckbox = (props: SVGProps<SVGSVGElement>) => (
   <svg

src/assets/svgs/IcLocation.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import type { SVGProps } from 'react';
 const SvgIcLocation = (props: SVGProps<SVGSVGElement>) => (
   <svg

src/assets/svgs/IcRemove.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import type { SVGProps } from 'react';
 const SvgIcRemove = (props: SVGProps<SVGSVGElement>) => (
   <svg

src/assets/svgs/IcRightV.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+const SvgIcRightV = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={5}
+    height={8}
+    fill="none"
+    {...props}
+  >
+    <path stroke="#444" d="m1 7 3-3-3-3" />
+  </svg>
+);
+export default SvgIcRightV;

src/assets/svgs/index.ts

@@ -1,5 +1,26 @@
+export { default as AladinLogo } from './AladinLogo';
 export { default as BtnFFloating } from './BtnFFloating';
+export { default as BtnFloating } from './BtnFloating';
+export { default as Hihi } from './Hihi';
+export { default as HomeSection2Indicator } from './HomeSection2Indicator';
+export { default as IcAdd } from './IcAdd';
+export { default as IcArrowSaleBefore } from './IcArrowSaleBefore';
+export { default as IcCheckbox } from './IcCheckbox';
+export { default as IcChevronSmallRight } from './IcChevronSmallRight';
+export { default as IcLocation } from './IcLocation';
+export { default as IcMenuSmallGray } from './IcMenuSmallGray';
+export { default as IcMypageGray } from './IcMypageGray';
+export { default as IcPick } from './IcPick';
+export { default as IcRemove } from './IcRemove';
 export { default as IcRightarrowMediumTextgray40 } from './IcRightarrowMediumTextgray40';
+export { default as IcRightarrowSmall } from './IcRightarrowSmall';
+export { default as IcRightV } from './IcRightV';
+export { default as IcSearch } from './IcSearch';
+export { default as IcShoppingcartGray } from './IcShoppingcartGray';
+export { default as Img11 } from './Img11';
+export { default as Img12 } from './Img12';
+export { default as Img13 } from './Img13';
+export { default as Img14 } from './Img14';
 export { default as Img61 } from './Img61';
 export { default as Img62 } from './Img62';
 export { default as Img63 } from './Img63';
@@ -9,25 +30,12 @@ export { default as Img66 } from './Img66';
 export { default as Img67 } from './Img67';
 export { default as Img68 } from './Img68';
 export { default as Img69 } from './Img69';
-export { default as AladinLogo } from './AladinLogo';
-export { default as BtnFloating } from './BtnFloating';
-export { default as Hihi } from './Hihi';
-export { default as IcArrowSaleBefore } from './IcArrowSaleBefore';
-export { default as IcRightarrowSmall } from './IcRightarrowSmall';
-export { default as Img11 } from './Img11';
-export { default as Img12 } from './Img12';
-export { default as Img13 } from './Img13';
-export { default as Img14 } from './Img14';
+export { default as Img71 } from './Img71';
+export { default as Img72 } from './Img72';
+export { default as Img73 } from './Img73';
+export { default as Img74 } from './Img74';
+export { default as Img75 } from './Img75';
 export { default as Playno } from './Playno';
 export { default as Playyes } from './Playyes';
-export { default as IcChevronSmallRight } from './IcChevronSmallRight';
-export { default as IcMenuSmallGray } from './IcMenuSmallGray';
-export { default as IcMypageGray } from './IcMypageGray';
-export { default as IcSearch } from './IcSearch';
-export { default as IcShoppingcartGray } from './IcShoppingcartGray';
 export { default as SerachUnder } from './SerachUnder';
 export { default as XGroup2 } from './XGroup2';
-export { default as IcAdd } from './IcAdd';
-export { default as IcCheckbox } from './IcCheckbox';
-export { default as IcLocation } from './IcLocation';
-export { default as IcRemove } from './IcRemove';

src/components/Footer/Footer.styled.ts

@@ -0,0 +1,165 @@
+import styled from '@emotion/styled';
+
+export const Wrapper = styled.div`
+  display: flex;
+  justify-content: center;
+`;
+
+export const FooterWrapper = styled.footer`
+  display: flex;
+  width: 136.7rem;
+  padding-bottom: 5rem;
+  flex-direction: column;
+  align-items: center;
+  gap: 3.6rem;
+
+  background: ${({ theme }) => theme.colors.white};
+`;
+
+export const FooterTop = styled.div`
+  display: flex;
+  width: 100%;
+  height: 6.2rem;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  align-self: stretch;
+  gap: 2.6rem;
+
+  border-top: 1px solid ${({ theme }) => theme.colors.stroke_gray10};
+  border-bottom: 1px solid ${({ theme }) => theme.colors.stroke_gray10};
+`;
+
+export const FooterTopContent = styled.div<{ $isBold: boolean }>`
+  display: flex;
+  height: 1.8rem;
+
+  color: ${({ theme }) => theme.colors.text_gray40};
+  ${({ theme, $isBold }) =>
+    $isBold ? theme.fonts.body5_b_13 : theme.fonts.body5_r_13};
+
+  align-items: center;
+`;
+
+export const FooterBottomWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 0.3rem;
+  align-self: stretch;
+
+  width: 100%;
+  height: 15.5rem;
+`;
+
+export const LeftLayout = styled.div`
+  display: flex;
+  width: 71rem;
+  padding-bottom: 3rem;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1.5rem;
+
+  background-color: ${({ theme }) => theme.colors.white};
+`;
+
+export const LeftTitle = styled.div`
+  align-self: stretch;
+
+  color: ${({ theme }) => theme.colors.text_gray40};
+  ${({ theme }) => theme.fonts.title2_b_17};
+`;
+
+export const LeftContent = styled.div`
+  display: flex;
+  padding-bottom: 2rem;
+  align-items: center;
+  align-content: center;
+  align-self: stretch;
+  flex-wrap: wrap;
+  max-width: 55rem;
+`;
+
+export const LeftSmallText = styled.span<{ $isHolder?: boolean }>`
+  display: flex;
+  padding: 0 1.8rem 0.5rem 0;
+  justify-content: center;
+  align-items: center;
+  gap: ${({ $isHolder }) => ($isHolder ? '0.5rem' : '1rem')};
+
+  ${({ theme }) => theme.fonts.body7_r_12};
+`;
+
+export const RightLayout = styled.div`
+  display: flex;
+  width: 32rem;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.9rem;
+`;
+
+export const RightTitle = styled.div`
+  align-self: stretch;
+
+  color: ${({ theme }) => theme.colors.text_gray40};
+  ${({ theme }) => theme.fonts.title2_b_17};
+`;
+
+export const RightContent = styled.div`
+  display: flex;
+  padding: 0 0.8rem 0.5rem 0;
+  align-items: center;
+  gap: 1rem;
+  align-self: stretch;
+
+  color: ${({ theme }) => theme.colors.text_gray30};
+  ${({ theme }) => theme.fonts.body7_r_12};
+`;
+
+export const RightBottomBox = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2rem;
+  align-self: stretch;
+`;
+
+export const BtnWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  align-self: stretch;
+`;
+
+export const Btn = styled.button`
+  display: flex;
+  width: 15.7rem;
+  height: 3.6rem;
+  padding: 0.7rem 3.7rem;
+  justify-content: center;
+  align-items: center;
+  gap: 1rem;
+
+  border-radius: 0.4rem;
+  border: 1px solid ${({ theme }) => theme.colors.stroke_gray30};
+  background: ${({ theme }) => theme.colors.white};
+
+  color: ${({ theme }) => theme.colors.text_gray40};
+  ${({ theme }) => theme.fonts.body5_r_13};
+`;
+
+export const LongBtn = styled.button`
+  display: flex;
+  height: 36px;
+  padding: 7px 37px;
+  justify-content: center;
+  align-items: center;
+  align-self: stretch;
+
+  border-radius: 4px;
+  border: 1px solid ${({ theme }) => theme.colors.stroke_gray30};
+  background: ${({ theme }) => theme.colors.white};
+
+  color: ${({ theme }) => theme.colors.text_gray40};
+  ${({ theme }) => theme.fonts.body5_r_13};
+`;

src/components/Footer/Footer.tsx

@@ -0,0 +1,78 @@
+import { IcLocation, IcRightV } from '@assets/svgs';
+import * as S from './Footer.styled';
+
+const Footer = () => {
+  const handleClickBtn = () => {
+    alert('이스터에그 발견!');
+  };
+
+  return (
+    <S.Wrapper>
+      <S.FooterWrapper>
+        <S.FooterTop>
+          <S.FooterTopContent $isBold={false}>회사소개</S.FooterTopContent>
+          <S.FooterTopContent $isBold={false}>채용안내</S.FooterTopContent>
+          <S.FooterTopContent $isBold={false}>이용약관</S.FooterTopContent>
+          <S.FooterTopContent $isBold={true}>
+            개인정보처리방침
+          </S.FooterTopContent>
+          <S.FooterTopContent $isBold={false}>
+            청소년 보호정책
+          </S.FooterTopContent>
+          <S.FooterTopContent $isBold={false}>중고매장</S.FooterTopContent>
+          <S.FooterTopContent $isBold={false}>
+            제휴,마케팅 안내
+          </S.FooterTopContent>
+          <S.FooterTopContent $isBold={false}>판매자 매니저</S.FooterTopContent>
+          <S.FooterTopContent $isBold={false}>
+            출판사,공급사 안내
+          </S.FooterTopContent>
+          <S.FooterTopContent $isBold={false}>광고 안내</S.FooterTopContent>
+          <S.FooterTopContent $isBold={false}>
+            학교,기업,기관 대량구매
+          </S.FooterTopContent>
+        </S.FooterTop>
+
+        <S.FooterBottomWrapper>
+          <S.LeftLayout>
+            <S.LeftTitle>(주)알라딘커뮤니케이션</S.LeftTitle>
+            <S.LeftContent>
+              <S.LeftSmallText>대표이사 최우영</S.LeftSmallText>
+              <S.LeftSmallText>고객정보보호 책임자 최우영</S.LeftSmallText>
+              <S.LeftSmallText>
+                사업자등록 201-81-23094 <IcRightV />
+              </S.LeftSmallText>
+              <S.LeftSmallText>통신판매업신고 중구01520호</S.LeftSmallText>
+              <S.LeftSmallText>이메일 [email protected]</S.LeftSmallText>
+              <S.LeftSmallText>
+                호스팅 제공자 알라딘커뮤니케이션
+              </S.LeftSmallText>
+              <S.LeftSmallText>
+                (본사) 서울시 중구 서소문로 89-31
+              </S.LeftSmallText>
+              <S.LeftSmallText>
+                © Aladin Communication. All Rights Reserved.
+              </S.LeftSmallText>
+            </S.LeftContent>
+          </S.LeftLayout>
+          <S.RightLayout>
+            <S.RightTitle>고객센터 1544-2514 (발신자 부담)</S.RightTitle>
+            <S.RightContent>
+              서울시 마포구 백범로 71 숨도빌딩 7층 Fax 02-6926-2600
+            </S.RightContent>
+            <S.BtnWrapper>
+              <S.Btn onClick={handleClickBtn}>1:1 문의</S.Btn>
+              <S.Btn onClick={handleClickBtn}>FAQ</S.Btn>
+            </S.BtnWrapper>
+            <S.LongBtn onClick={handleClickBtn}>
+              <IcLocation />
+              중고매장 위치, 영업시간 안내
+            </S.LongBtn>
+          </S.RightLayout>
+        </S.FooterBottomWrapper>
+      </S.FooterWrapper>
+    </S.Wrapper>
+  );
+};
+
+export default Footer;