Skip to content

Commit

Permalink
Feat: 추천도서
Browse files Browse the repository at this point in the history
  • Loading branch information
@foodeco
foodeco committed Jun 12, 2023
1 parent 637a883 commit f5ea74c
Show file tree
Hide file tree
Showing 4 changed files with 200 additions and 118 deletions.
11 changes: 6 additions & 5 deletions src/App.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,13 @@

body {
margin: 0;
// width: 100%;
// width: 100%;
//height: 100vh;
background-color: #F8EDE3;
background-color: #f8ede3;
//background-color: rebeccapurple;
// font-family: 'Dovemayo_gothic';
};
font-family: 'SUITE-Regular';
}

a {
text-decoration: none;
Expand All @@ -26,8 +27,8 @@ a {

@font-face {
font-family: 'SUITE-Regular';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/SUITE-Regular.woff2') format('woff2');
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/SUITE-Regular.woff2')
format('woff2');
font-weight: 400;
font-style: normal;
}

189 changes: 116 additions & 73 deletions src/Components/Views/CartPage/CartItems/CartItems.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,42 +1,73 @@
import React from "react"
import { useState } from "react";
import React from 'react';
import { useState } from 'react';
import Box from '@mui/material/Box';
import Checkbox from '@mui/material/Checkbox';
import FormControlLabel from '@mui/material/FormControlLabel';
import YearBox from "Common/section/number";
import './CartItems.scss'
import YearBox from 'Common/section/number';
import './CartItems.scss';

function CartItems() {

interface Item {
id: number;
// image:string;
name: string;
text: string;
price: string;
sale: string;
malize:string;
malize: string;
}

const [info, setInfo] = useState([])
const [info, setInfo] = useState([]);
const [checked, setChecked] = useState([true, false]);
const [items, setItems] = useState<Item[]>([
{ id: 1, name: '[국내도서]시작하세요! C# 10프로그래밍', text:"*밤 11시 잠들기전 배송",
price:"정가: 36000", sale:"판매가:32,400", malize:"마일리지: 1,800원"},
{ id: 2, name: '도서명2', text:"*밤 11시 잠들기전 배송",
price:"정가: 36000", sale:"판매가:32,400", malize:"마일리지: 1,800원" },
{ id: 3, name: '도서명3', text:"*밤 11시 잠들기전 배송",
price:"정가: 36000", sale:"판매가:32,400", malize:"마일리지: 1,800원"},
{ id: 4, name: '도서명3', text:"*밤 11시 잠들기전 배송",
price:"정가: 36000", sale:"판매가:32,400", malize:"마일리지: 1,800원"},
{ id: 5, name: '도서명3', text:"*밤 11시 잠들기전 배송",
price:"정가: 36000", sale:"판매가:32,400", malize:"마일리지: 1,800원"},
{
id: 1,
name: '[국내도서]시작하세요! C# 10프로그래밍',
text: '*밤 11시 잠들기전 배송',
price: '정가: 36000',
sale: '판매가:32,400',
malize: '마일리지: 1,800원',
},
{
id: 2,
name: '도서명2',
text: '*밤 11시 잠들기전 배송',
price: '정가: 36000',
sale: '판매가:32,400',
malize: '마일리지: 1,800원',
},
{
id: 3,
name: '도서명3',
text: '*밤 11시 잠들기전 배송',
price: '정가: 36000',
sale: '판매가:32,400',
malize: '마일리지: 1,800원',
},
{
id: 4,
name: '도서명3',
text: '*밤 11시 잠들기전 배송',
price: '정가: 36000',
sale: '판매가:32,400',
malize: '마일리지: 1,800원',
},
{
id: 5,
name: '도서명3',
text: '*밤 11시 잠들기전 배송',
price: '정가: 36000',
sale: '판매가:32,400',
malize: '마일리지: 1,800원',
},
]);
const [checkedItems, setCheckedItems] = useState<number[]>([]);

const handleChange1 = (event: React.ChangeEvent<HTMLInputElement>) => {
const checkedValue = event.target.checked;
const updatedCheckedItems = checkedValue ? items.map((item) => item.id) : [];
const updatedCheckedItems = checkedValue
? items.map((item) => item.id)
: [];
setCheckedItems(updatedCheckedItems);
};

Expand All @@ -51,86 +82,98 @@ function CartItems() {
}
setCheckedItems(updatedCheckedItems);
};

const children = (itemId: number) => (
<Box sx={{ display: 'flex', flexDirection: 'column', ml: 3, fontSize: 'large' }}>
<Box
sx={{
display: 'flex',
flexDirection: 'column',
ml: 3,
fontSize: 'large',
}}
>
<FormControlLabel
label=""
control={<Checkbox checked={checkedItems.includes(itemId)} onChange={handleChange2} name={itemId.toString()} />}
control={
<Checkbox
checked={checkedItems.includes(itemId)}
onChange={handleChange2}
name={itemId.toString()}
/>
}
/>
</Box>
);

const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
console.log()
console.log();
setInfo({
...info, [e.target.name]: e.target.value
...info,
[e.target.name]: e.target.value,
});
};

return(
return (
<>
<div className="CartPageTable__Buy">
<FormControlLabel
label=""
control={
<div className='LableBox'>
<Checkbox
size='large'
checked={checkedItems.length === items.length}
indeterminate={checkedItems.length > 0 && checkedItems.length < items.length}
onChange={handleChange1}
/>
</div>
}
/>
<div className="CartPageTable__Buy">
<FormControlLabel
label=""
control={
<div className="LableBox">
<Checkbox
size="large"
checked={checkedItems.length === items.length}
indeterminate={
checkedItems.length > 0 && checkedItems.length < items.length
}
onChange={handleChange1}
/>
</div>
}
/>

{/* <div className="Product-Buy">
{/* <div className="Product-Buy">
<span>구매</span>
</div> */}

<div className='ProductNameBox'>
<div className="ProductNameBox">
<span>상품명</span>
</div>
</div>

<div className='PriceNameBox'>
<div className="PriceNameBox">
<p>가격</p>
</div>
</div>

<div className='DeleteNameBox'>
<div className="DeleteNameBox">
<span>보관/삭제</span>
</div>
</div>

<div className='ItemsContainer'>
{items.map((item) => (
<div className='ItemContainer'>
<div className='CheckContainer'>
{children(item.id)}
</div>
<div key={item.id} className='ImageBox'>
<img src='/images/cartbookimage.jpg' alt='cartbookimage'/>
</div>
<div className='TextInner'>
<span>{item.name}</span>
<span>{item.text}</span>
</div>
</div>
</div>

<div className='PriceInner'>
<span>{item.price}</span>
<span>{item.sale}</span>
<span>{item.malize}</span>
</div>
<div className="ItemsContainer">
{items.map((item) => (
<div className="ItemContainer">
<div className="CheckContainer">{children(item.id)}</div>
<div key={item.id} className="ImageBox">
<img src="/images/cartbookimage.jpg" alt="cartbookimage" />
</div>
<div className="TextInner">
<span>{item.name}</span>
<span>{item.text}</span>
</div>


<div className="PriceInner">
<span>{item.price}</span>
<span>{item.sale}</span>
<span>{item.malize}</span>
</div>

<div className='CartButtonBox'>
<button>삭제</button>
<div className="CartButtonBox">
<button>삭제</button>
</div>
</div>
</div>
))}
</div>
))}
</div>
</>
)
);
}
export default CartItems
export default CartItems;
72 changes: 63 additions & 9 deletions src/Components/Views/MainPage/Component/Recommand.scss
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,74 @@
.recommand {
border: 2px solid;
border-radius: 10px;
margin-top: 100px;
//border: 2px solid;
//border-radius: 10px;
margin: 100px auto 0;
width: 80%;
overflow: hidden;

h1 {
border-bottom: 1px solid;
padding-bottom: 10px;
}
}
.recommand-wrapper {
display: grid;
grid-template-columns: 2fr 8fr;
//display: grid;
//grid-template-columns: 2fr 8fr;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
gap: 20px;
padding: 20px 0;
background-color: #fff;
}
.test {
width: calc(100% / 4);
height: 150px;
overflow: hidden;
border-radius: 10px;

h3 {
padding: 10px 5px;
text-align: center;
}
p {
padding: 5px;
}

&:nth-child(1) {
background-color: #3e47bc;
color: #fafffb;
p {
color: #c3c2ea;
}
}
&:nth-child(2) {
background-color: #8edcb4;
color: #000000;
p {
color: #56886f;
}
}
&:nth-child(3) {
background-color: #f8e83b;
color: #000201;
p {
color: #807718;
}
}
&:nth-child(4) {
background-color: #f8ff97;
color: #000004;
p {
color: #9c9f5a;
}
}
&:nth-child(5) {
background-color: #f1eae2;
color: #000000;
p {
color: #94918c;
}
}
}
.title {
border-right: 1px solid;
Expand All @@ -35,7 +93,3 @@
}
}
}
.selected {
border-right: none;
background-color: rgb(254, 246, 243);
}
Loading

0 comments on commit f5ea74c

Please sign in to comment.