diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz index 6ce74c1..15fbbde 100644 Binary files a/.yarn/install-state.gz and b/.yarn/install-state.gz differ diff --git a/public/svgs/ic_checkbox.svg b/public/svgs/ic_checkbox.svg new file mode 100644 index 0000000..a001d2b --- /dev/null +++ b/public/svgs/ic_checkbox.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/svgs/ic_rightarrow_medium_textgray40.svg b/public/svgs/ic_rightarrow_medium_textgray40.svg new file mode 100644 index 0000000..c0dc17d --- /dev/null +++ b/public/svgs/ic_rightarrow_medium_textgray40.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/svgs/img_6_1.svg b/public/svgs/img_6_1.svg new file mode 100644 index 0000000..8d66e13 --- /dev/null +++ b/public/svgs/img_6_1.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/svgs/img_6_2.svg b/public/svgs/img_6_2.svg new file mode 100644 index 0000000..78cb8a7 --- /dev/null +++ b/public/svgs/img_6_2.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/svgs/img_6_3.svg b/public/svgs/img_6_3.svg new file mode 100644 index 0000000..9117cc1 --- /dev/null +++ b/public/svgs/img_6_3.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/svgs/img_6_4.svg b/public/svgs/img_6_4.svg new file mode 100644 index 0000000..973b431 --- /dev/null +++ b/public/svgs/img_6_4.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/svgs/img_6_5.svg b/public/svgs/img_6_5.svg new file mode 100644 index 0000000..555d6d2 --- /dev/null +++ b/public/svgs/img_6_5.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/svgs/img_6_6.svg b/public/svgs/img_6_6.svg new file mode 100644 index 0000000..49c808a --- /dev/null +++ b/public/svgs/img_6_6.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/svgs/img_6_7.svg b/public/svgs/img_6_7.svg new file mode 100644 index 0000000..d54a212 --- /dev/null +++ b/public/svgs/img_6_7.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/svgs/img_6_8.svg b/public/svgs/img_6_8.svg new file mode 100644 index 0000000..0e8d4fa --- /dev/null +++ b/public/svgs/img_6_8.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/svgs/img_6_9.svg b/public/svgs/img_6_9.svg new file mode 100644 index 0000000..6d5f0d3 --- /dev/null +++ b/public/svgs/img_6_9.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/svgs/BtnFFloating.tsx b/src/assets/svgs/BtnFFloating.tsx index ad45a70..3df62da 100644 --- a/src/assets/svgs/BtnFFloating.tsx +++ b/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) => ( ) => ( ) => ( ) => ( + + + +); +export default SvgIcCheckbox; diff --git a/src/assets/svgs/IcRightarrowMediumTextgray40.tsx b/src/assets/svgs/IcRightarrowMediumTextgray40.tsx new file mode 100644 index 0000000..fbd670a --- /dev/null +++ b/src/assets/svgs/IcRightarrowMediumTextgray40.tsx @@ -0,0 +1,20 @@ +import * as React from 'react'; +import type { SVGProps } from 'react'; +const SvgIcRightarrowMediumTextgray40 = (props: SVGProps) => ( + + + +); +export default SvgIcRightarrowMediumTextgray40; diff --git a/src/assets/svgs/Img61.tsx b/src/assets/svgs/Img61.tsx new file mode 100644 index 0000000..6542a00 --- /dev/null +++ b/src/assets/svgs/Img61.tsx @@ -0,0 +1,34 @@ +import * as React from 'react'; +import type { SVGProps } from 'react'; +const SvgImg61 = (props: SVGProps) => ( + + + + + + + + + +); +export default SvgImg61; diff --git a/src/assets/svgs/Img62.tsx b/src/assets/svgs/Img62.tsx new file mode 100644 index 0000000..3e01f96 --- /dev/null +++ b/src/assets/svgs/Img62.tsx @@ -0,0 +1,34 @@ +import * as React from 'react'; +import type { SVGProps } from 'react'; +const SvgImg62 = (props: SVGProps) => ( + + + + + + + + + +); +export default SvgImg62; diff --git a/src/assets/svgs/Img63.tsx b/src/assets/svgs/Img63.tsx new file mode 100644 index 0000000..a9a1923 --- /dev/null +++ b/src/assets/svgs/Img63.tsx @@ -0,0 +1,34 @@ +import * as React from 'react'; +import type { SVGProps } from 'react'; +const SvgImg63 = (props: SVGProps) => ( + + + + + + + + + +); +export default SvgImg63; diff --git a/src/assets/svgs/Img64.tsx b/src/assets/svgs/Img64.tsx new file mode 100644 index 0000000..9adde44 --- /dev/null +++ b/src/assets/svgs/Img64.tsx @@ -0,0 +1,34 @@ +import * as React from 'react'; +import type { SVGProps } from 'react'; +const SvgImg64 = (props: SVGProps) => ( + + + + + + + + + +); +export default SvgImg64; diff --git a/src/assets/svgs/Img65.tsx b/src/assets/svgs/Img65.tsx new file mode 100644 index 0000000..5925bd8 --- /dev/null +++ b/src/assets/svgs/Img65.tsx @@ -0,0 +1,34 @@ +import * as React from 'react'; +import type { SVGProps } from 'react'; +const SvgImg65 = (props: SVGProps) => ( + + + + + + + + + +); +export default SvgImg65; diff --git a/src/assets/svgs/Img66.tsx b/src/assets/svgs/Img66.tsx new file mode 100644 index 0000000..9f0b1f4 --- /dev/null +++ b/src/assets/svgs/Img66.tsx @@ -0,0 +1,34 @@ +import * as React from 'react'; +import type { SVGProps } from 'react'; +const SvgImg66 = (props: SVGProps) => ( + + + + + + + + + +); +export default SvgImg66; diff --git a/src/assets/svgs/Img67.tsx b/src/assets/svgs/Img67.tsx new file mode 100644 index 0000000..d160c20 --- /dev/null +++ b/src/assets/svgs/Img67.tsx @@ -0,0 +1,34 @@ +import * as React from 'react'; +import type { SVGProps } from 'react'; +const SvgImg67 = (props: SVGProps) => ( + + + + + + + + + +); +export default SvgImg67; diff --git a/src/assets/svgs/Img68.tsx b/src/assets/svgs/Img68.tsx new file mode 100644 index 0000000..c3fc83c --- /dev/null +++ b/src/assets/svgs/Img68.tsx @@ -0,0 +1,34 @@ +import * as React from 'react'; +import type { SVGProps } from 'react'; +const SvgImg68 = (props: SVGProps) => ( + + + + + + + + + +); +export default SvgImg68; diff --git a/src/assets/svgs/Img69.tsx b/src/assets/svgs/Img69.tsx new file mode 100644 index 0000000..0f6b56c --- /dev/null +++ b/src/assets/svgs/Img69.tsx @@ -0,0 +1,34 @@ +import * as React from 'react'; +import type { SVGProps } from 'react'; +const SvgImg69 = (props: SVGProps) => ( + + + + + + + + + +); +export default SvgImg69; diff --git a/src/assets/svgs/index.ts b/src/assets/svgs/index.ts index 71ed951..48b08e3 100644 --- a/src/assets/svgs/index.ts +++ b/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'; diff --git a/src/components/Cart/CheckboxBtn/Checkbox.styled.ts b/src/components/Cart/CheckboxBtn/Checkbox.styled.ts new file mode 100644 index 0000000..864f6fe --- /dev/null +++ b/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` + 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; +`; diff --git a/src/components/Cart/CheckboxBtn/CheckboxBtn.tsx b/src/components/Cart/CheckboxBtn/CheckboxBtn.tsx new file mode 100644 index 0000000..e4d07b2 --- /dev/null +++ b/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 ( + + + + ); +}; + +export default CheckboxBtn; diff --git a/src/components/HomeSection6Scroll/Section6Card.styled.ts b/src/components/HomeSection6Scroll/Section6Card.styled.ts new file mode 100644 index 0000000..e3d8241 --- /dev/null +++ b/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; +`; diff --git a/src/components/HomeSection6Scroll/Section6Card.tsx b/src/components/HomeSection6Scroll/Section6Card.tsx new file mode 100644 index 0000000..9cca01a --- /dev/null +++ b/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(null); + + const handleWheel = (e: React.WheelEvent) => { + if (section6Scroll.current) { + section6Scroll.current.scrollLeft += e.deltaY; + } + }; + + const cardData = [ + { + id: 1, + img: , + label: '15pt 중고매장 FAQ', + }, + { + id: 2, + img: , + label: '책모양 오르골', + }, + { + id: 3, + img: , + label: '북슬리브', + }, + { + id: 4, + img: , + label: '퀄팅 북슬리브', + }, + { + id: 5, + img: , + label: '미니 토트백', + }, + { + id: 6, + img: , + label: '아크릴 스탠드', + }, + { + id: 7, + img: , + label: '데스크 매트', + }, + { + id: 8, + img: , + label: '아크릴 램프', + }, + { + id: 9, + img: , + label: '스틸 북엔드', + }, + ]; + + return ( + <> + + + 알라딘이 만든 사은품 + + + + + {cardData.map((card, id) => ( + + {card.img} + {card.label} + + ))} + + + + ); +}; + +export default Section6Card; diff --git a/src/pages/Main/Main.tsx b/src/pages/Main/Main.tsx index bcc5bd3..aef6382 100644 --- a/src/pages/Main/Main.tsx +++ b/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 ( - - 테스트테스트 - - + <> + ; + ); }; diff --git a/src/styles/GlobalStyle.tsx b/src/styles/GlobalStyle.tsx index 0e67083..94eb3c4 100644 --- a/src/styles/GlobalStyle.tsx +++ b/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;