Merge pull request #34 from SOPT-all/feat/#33/checkboxBtn

[feat/#33] 체크박스 컴포넌트 구현

src/assets/svgs/BtnFFloating.tsx

@@ -1,5 +1,5 @@
-import * as React from "react";
-import type { SVGProps } from "react";
+import * as React from 'react';
+import type { SVGProps } from 'react';
 const SvgBtnFFloating = (props: SVGProps<SVGSVGElement>) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"

src/assets/svgs/BtnFloating.tsx

@@ -1,5 +1,5 @@
-import * as React from "react";
-import type { SVGProps } from "react";
+import * as React from 'react';
+import type { SVGProps } from 'react';
 const SvgBtnFloating = (props: SVGProps<SVGSVGElement>) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"

src/assets/svgs/Hihi.tsx

@@ -1,5 +1,5 @@
-import * as React from "react";
-import type { SVGProps } from "react";
+import * as React from 'react';
+import type { SVGProps } from 'react';
 const SvgHihi = (props: SVGProps<SVGSVGElement>) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"

src/assets/svgs/IcCheckbox.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+const SvgIcCheckbox = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={16}
+    height={16}
+    fill="none"
+    {...props}
+  >
+    <path
+      stroke="#fff"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      d="m3 8 3.5 3.5L13 5"
+    />
+  </svg>
+);
+export default SvgIcCheckbox;

src/assets/svgs/IcRightarrowMediumTextgray40.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+const SvgIcRightarrowMediumTextgray40 = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={20}
+    height={20}
+    fill="none"
+    {...props}
+  >
+    <path
+      stroke="#333"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="m8 4 6 6-6 6"
+    />
+  </svg>
+);
+export default SvgIcRightarrowMediumTextgray40;

src/assets/svgs/index.ts

@@ -1,3 +1,14 @@
-export { default as BtnFFloating } from "./BtnFFloating";
-export { default as BtnFloating } from "./BtnFloating";
-export { default as Hihi } from "./Hihi";
+export { default as IcRightarrowMediumTextgray40 } from './IcRightarrowMediumTextgray40';
+export { default as Img61 } from './Img61';
+export { default as Img62 } from './Img62';
+export { default as Img63 } from './Img63';
+export { default as Img64 } from './Img64';
+export { default as Img65 } from './Img65';
+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 BtnFFloating } from './BtnFFloating';
+export { default as BtnFloating } from './BtnFloating';
+export { default as Hihi } from './Hihi';
+export { default as IcCheckbox } from './IcCheckbox';

src/components/Cart/CheckboxBtn/Checkbox.styled.ts

@@ -0,0 +1,20 @@
+import styled from "@emotion/styled";
+import theme from "@styles/theme";
+
+interface StyledBtnProps {
+  isChecked: boolean;
+}
+
+export const StyledBtn = styled.button<StyledBtnProps>`
+  border-radius: 3px;
+  border: ${({ isChecked }) =>
+    isChecked ? "none" : `1px solid ${theme.colors.stroke_gray50}`};
+  background-color: ${({ isChecked }) =>
+    isChecked ? theme.colors.purple50 : "none"};
+  width: 1.8rem;
+  height: 1.8rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+`;

src/components/Cart/CheckboxBtn/CheckboxBtn.tsx

@@ -0,0 +1,19 @@
+import { useState } from "react";
+import SvgIcCheckbox from "@assets/svgs/IcCheckbox";
+import * as S from "./Checkbox.styled";
+
+const CheckboxBtn = () => {
+  const [isChecked, setIsChecked] = useState(false);
+
+  const handleClick = () => {
+    setIsChecked((prev) => !prev);
+  };
+
+  return (
+    <S.StyledBtn isChecked={isChecked} onClick={handleClick}>
+      <SvgIcCheckbox />
+    </S.StyledBtn>
+  );
+};
+
+export default CheckboxBtn;

src/components/HomeSection6Scroll/Section6Card.styled.ts

@@ -0,0 +1,52 @@
+import styled from '@emotion/styled';
+
+export const Section6CardWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 3.5rem;
+  padding: 7rem 0 10.5rem 16.8rem;
+`;
+
+export const Section6TitleLayout = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+`;
+
+export const Title = styled.h3`
+  ${({ theme }) => theme.fonts.head_b_24};
+  color: ${({ theme }) => theme.colors.text_gray40};
+`;
+
+export const Section6CardLayout = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 1.1rem;
+  overflow-x: scroll;
+  scrollbar-width: none;
+
+  & > div:last-child {
+    padding-right: 16.8rem;
+  }
+`;
+
+export const Section6CardContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  position: relative;
+`;
+
+export const CardLabel = styled.p`
+  ${({ theme }) => theme.fonts.body1_b_15};
+  color: ${({ theme }) => theme.colors.text_gray40};
+  background-color: ${({ theme }) => theme.colors.tp_white50};
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 3.8rem;
+  padding: 1rem 1.2rem;
+  position: absolute;
+  bottom: 0;
+  border-bottom-left-radius: 1rem;
+  border-bottom-right-radius: 1rem;
+`;

src/components/HomeSection6Scroll/Section6Card.tsx

@@ -0,0 +1,95 @@
+import { useRef } from 'react';
+import * as S from './Section6Card.styled';
+import {
+  IcRightarrowMediumTextgray40,
+  Img61,
+  Img62,
+  Img63,
+  Img64,
+  Img65,
+  Img66,
+  Img67,
+  Img68,
+  Img69,
+} from '@assets/svgs';
+
+const Section6Card = () => {
+  //무언가 수정 ~
+  const section6Scroll = useRef<HTMLDivElement>(null);
+
+  const handleWheel = (e: React.WheelEvent) => {
+    if (section6Scroll.current) {
+      section6Scroll.current.scrollLeft += e.deltaY;
+    }
+  };
+
+  const cardData = [
+    {
+      id: 1,
+      img: <Img61 style={{ flexShrink: 0, borderRadius: '1rem' }} />,
+      label: '15pt 중고매장 FAQ',
+    },
+    {
+      id: 2,
+      img: <Img62 style={{ flexShrink: 0, borderRadius: '1rem' }} />,
+      label: '책모양 오르골',
+    },
+    {
+      id: 3,
+      img: <Img63 style={{ flexShrink: 0, borderRadius: '1rem' }} />,
+      label: '북슬리브',
+    },
+    {
+      id: 4,
+      img: <Img64 style={{ flexShrink: 0, borderRadius: '1rem' }} />,
+      label: '퀄팅 북슬리브',
+    },
+    {
+      id: 5,
+      img: <Img65 style={{ flexShrink: 0, borderRadius: '1rem' }} />,
+      label: '미니 토트백',
+    },
+    {
+      id: 6,
+      img: <Img66 style={{ flexShrink: 0, borderRadius: '1rem' }} />,
+      label: '아크릴 스탠드',
+    },
+    {
+      id: 7,
+      img: <Img67 style={{ flexShrink: 0, borderRadius: '1rem' }} />,
+      label: '데스크 매트',
+    },
+    {
+      id: 8,
+      img: <Img68 style={{ flexShrink: 0, borderRadius: '1rem' }} />,
+      label: '아크릴 램프',
+    },
+    {
+      id: 9,
+      img: <Img69 style={{ flexShrink: 0, borderRadius: '1rem' }} />,
+      label: '스틸 북엔드',
+    },
+  ];
+
+  return (
+    <>
+      <S.Section6CardWrapper>
+        <S.Section6TitleLayout>
+          <S.Title>알라딘이 만든 사은품</S.Title>
+          <IcRightarrowMediumTextgray40 />
+          <IcRightarrowMediumTextgray40 />
+        </S.Section6TitleLayout>
+        <S.Section6CardLayout ref={section6Scroll} onWheel={handleWheel}>
+          {cardData.map((card, id) => (
+            <S.Section6CardContainer key={id}>
+              {card.img}
+              <S.CardLabel>{card.label}</S.CardLabel>
+            </S.Section6CardContainer>
+          ))}
+        </S.Section6CardLayout>
+      </S.Section6CardWrapper>
+    </>
+  );
+};
+
+export default Section6Card;

src/pages/Main/Main.tsx

@@ -1,15 +1,11 @@
 //import React from 'react'
-import * as S from './Main.styled';
-import { BtnFloating } from '@assets/svgs';
-import { Hihi } from '@assets/svgs';
+import Section6Card from '@components/HomeSection6Scroll/Section6Card';
 
 const Main = () => {
-  console.log('hi');
   return (
-    <S.MainWrapper>
-      테스트테스트
-      <BtnFloating width={'100px'} height={'100px'} />
-    </S.MainWrapper>
+    <>
+      <Section6Card />;
+    </>
   );
 };
 

src/styles/GlobalStyle.tsx

@@ -154,6 +154,7 @@ export const globalStyles = css`
     -webkit-touch-callout: none;
     -webkit-tap-highlight-color: rgb(0 0 0 / 0%);
     scroll-behavior: smooth;
+    font-size: 62.5%;
   }
 
   body {
@@ -162,7 +163,6 @@ export const globalStyles = css`
     margin: 0;
     padding: 0;
 
-    font-size: 62.5%;
     scrollbar-width: none;
     justify-content: center;
     align-items: center;