-
Notifications
You must be signed in to change notification settings - Fork 50
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[ DDeong ] 1차 완성 / Carousel npm 배포 #19
Changes from all commits
bb8c52f
9972e02
a21599d
9166a9f
e624fc6
ec56e53
8efbbc4
eda8cdb
14887f4
91653c2
882e695
4bc5da1
3d10305
9c7c77f
4513241
9cb4ae0
013ad52
2ea9a0b
28b5b90
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
{ | ||
// IntelliSense를 사용하여 가능한 특성에 대해 알아보세요. | ||
// 기존 특성에 대한 설명을 보려면 가리킵니다. | ||
// 자세한 내용을 보려면 https://go.microsoft.com/fwlink/?linkid=830387을(를) 방문하세요. | ||
"version": "0.2.0", | ||
"configurations": [ | ||
{ | ||
"type": "pwa-chrome", | ||
"request": "launch", | ||
"name": "Launch Chrome against localhost", | ||
"url": "http://localhost:3000", | ||
"webRoot": "${workspaceFolder}" | ||
} | ||
] | ||
} |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,22 +1,9 @@ | ||
import BestList from "./js/components/bestList/BestList"; | ||
import Main from "./js/components/Main"; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. p5) 개인적으로 jsx파일 형식자 인듯 한데 혹시 js폴더 밑에 두는게 이상해보이긴하네요. |
||
import TestCarousel from "./js/util/TestCarousel"; | ||
function App() { | ||
const test = { | ||
detail_hash: "HBDEF", | ||
image: | ||
"http://public.codesquad.kr/jk/storeapp/data/2d3f99a9a35601f4e98837bc4d39b2c8.jpg", | ||
alt: "[미노리키친] 규동 250g", | ||
delivery_type: ["새벽배송", "전국택배"], | ||
title: "[미노리키친] 규동 250g", | ||
description: "일본인의 소울푸드! 한국인도 좋아하는 소고기덮밥", | ||
n_price: "6,500", | ||
s_price: "7,000원", | ||
badge: ["이벤트특가"], | ||
}; | ||
|
||
return ( | ||
<> | ||
<BestList /> | ||
<Main /> | ||
<TestCarousel /> | ||
</> | ||
); | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,149 @@ | ||
import { useState } from "react"; | ||
import styled from "styled-components"; | ||
|
||
const HeaderWrapper = styled.div` | ||
position: relative; | ||
width: 1440px; | ||
height: 122px; | ||
|
||
font-family: Noto Sans KR; | ||
font-style: normal; | ||
`; | ||
const Title = styled.div` | ||
position: absolute; | ||
width: 190px; | ||
height: 58px; | ||
top: 32px; | ||
left: 0px; | ||
|
||
font-weight: 900; | ||
font-size: 40px; | ||
line-height: 58px; | ||
letter-spacing: -0.04em; | ||
text-transform: uppercase; | ||
color: #333333; | ||
`; | ||
const MenuWrapper = styled.div` | ||
display: flex; | ||
flex-direction: row; | ||
align-items: flex-start; | ||
justify-content: space-between; | ||
position: absolute; | ||
padding: 0px; | ||
width: 360px; | ||
height: 23px; | ||
top: 50px; | ||
left: 246px; | ||
`; | ||
const Menu = styled.div``; | ||
const MenuTitle = styled.div` | ||
font-weight: ${(props) => (props.isOn ? "bold" : "normal")}; | ||
font-size: 16px; | ||
line-height: 23px; | ||
color: #333; | ||
`; | ||
const MenuBodyWrapper = styled.div` | ||
visibility: ${(props) => (props.isOn ? "visible" : "hidden")}; | ||
display: flex; | ||
flex-direction: column; | ||
align-items: flex-start; | ||
position: relative; | ||
top: 16px; | ||
padding: 16px; | ||
background: #fff; | ||
box-shadow: 0px 0px 4px rgba(204, 204, 204, 0.5), 0px 2px 4px rgba(0, 0, 0, 0.25); | ||
z-index: 1; | ||
`; | ||
const MenuBody = styled.div` | ||
font-size: 16px; | ||
line-height: 28px; | ||
color: #828282; | ||
&:hover { | ||
color: #333333; | ||
text-decoration-line: underline; | ||
} | ||
`; | ||
const SearchBar = styled.input` | ||
position: absolute; | ||
width: 248px; | ||
height: 40px; | ||
top: 41px; | ||
left: 898px; | ||
border-radius: 5px; | ||
border: none; | ||
background: #f5f5f7; | ||
`; | ||
const SearchBarIcon = styled.div` | ||
position: absolute; | ||
top: 50px; | ||
left: 1116px; | ||
`; | ||
const Login = styled.div` | ||
position: absolute; | ||
top: 50px; | ||
left: 1172px; | ||
font-weight: normal; | ||
font-size: 16px; | ||
line-height: 23px; | ||
color: #333; | ||
&:hover { | ||
font-weight: bold; | ||
} | ||
`; | ||
const Basket = styled.div` | ||
position: absolute; | ||
top: 50px; | ||
left: 1241px; | ||
font-weight: normal; | ||
font-size: 16px; | ||
line-height: 23px; | ||
color: #333; | ||
&:hover { | ||
font-weight: bold; | ||
} | ||
`; | ||
|
||
const Header = () => { | ||
const [isM1On, setM1On] = useState(false); | ||
const [isM2On, setM2On] = useState(false); | ||
const [isM3On, setM3On] = useState(false); | ||
return ( | ||
<HeaderWrapper> | ||
<Title>banchan</Title> | ||
<MenuWrapper> | ||
<Menu onMouseEnter={() => setM1On(true)} onMouseLeave={() => setM1On(false)}> | ||
<MenuTitle isOn={isM1On}>든든한 메인요리</MenuTitle> | ||
<MenuBodyWrapper isOn={isM1On}> | ||
<MenuBody>육류 요리</MenuBody> | ||
<MenuBody>해산물 요리</MenuBody> | ||
</MenuBodyWrapper> | ||
</Menu> | ||
<Menu onMouseEnter={() => setM2On(true)} onMouseLeave={() => setM2On(false)}> | ||
<MenuTitle isOn={isM2On}>뜨끈한 국물요리</MenuTitle> | ||
<MenuBodyWrapper isOn={isM2On}> | ||
<MenuBody>국/밥/찌개</MenuBody> | ||
</MenuBodyWrapper> | ||
</Menu> | ||
<Menu onMouseEnter={() => setM3On(true)} onMouseLeave={() => setM3On(false)}> | ||
<MenuTitle isOn={isM3On}>정갈한 밑반찬</MenuTitle> | ||
<MenuBodyWrapper isOn={isM3On}> | ||
<MenuBody>나물/무침</MenuBody> | ||
<MenuBody>조림/볶음</MenuBody> | ||
<MenuBody>절임/장아찌</MenuBody> | ||
</MenuBodyWrapper> | ||
</Menu> | ||
Comment on lines
+114
to
+134
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. text내용과 MenuBody갯수만 다른것 같은데 혹시 자식 컴포넌트로 분리해서 재사용할 수 있지 않을까요? |
||
</MenuWrapper> | ||
<SearchBar /> | ||
<SearchBarIcon> | ||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> | ||
<path d="M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19Z" stroke="#BDBDBD" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /> | ||
<path d="M20.9999 21L16.6499 16.65" stroke="#BDBDBD" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /> | ||
</svg> | ||
Comment on lines
+138
to
+141
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. svg도 파일이름으로 만들어서 import하면 해석하기 편할 것 같네용
|
||
</SearchBarIcon> | ||
<Login>로그인</Login> | ||
<Basket>장바구니</Basket> | ||
</HeaderWrapper> | ||
); | ||
}; | ||
|
||
export default Header; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,39 @@ | ||
import { useState } from "react"; | ||
import styled from "styled-components"; | ||
import Header from "./Header"; | ||
import BestList from "./bestList/BestList"; | ||
import Modal from "./Modal/Modal"; | ||
|
||
const Wrapper = styled.div` | ||
filter: ${(props) => (props.isModalOn ? "brightness(40%)" : "brightness(100%)")}; | ||
background-color: #fff; | ||
margin-left: 40px; | ||
`; | ||
|
||
const Main = () => { | ||
const test = { | ||
data: { | ||
top_image: "", | ||
thumb_images: [""], | ||
product_description: "", | ||
point: "", | ||
delivery_info: "", | ||
delivery_fee: "", | ||
prices: ["원"], | ||
detail_section: [], | ||
}, | ||
}; | ||
const [modalData, setModalData] = useState(test); | ||
const [isModalOn, setModalOn] = useState(false); | ||
return ( | ||
<> | ||
<Wrapper isModalOn={isModalOn}> | ||
<Header /> | ||
<BestList setModalData={setModalData} setModalOn={setModalOn} /> | ||
</Wrapper> | ||
<Modal data={modalData.data} isModalOn={isModalOn} setModalOn={setModalOn} /> | ||
</> | ||
); | ||
}; | ||
|
||
export default Main; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
직접 만드신 모듈이신걸까요? 👍