Skip to content

Commit

Permalink
Design mypage,main,make signupbox signinupboxpage css change #16 #12 #9
Browse files Browse the repository at this point in the history 
#5
  • Loading branch information
@gusdn010158
gusdn010158 committed Mar 7, 2024
1 parent 7f7c3a8 commit 7fed598
Show file tree
Hide file tree
Showing 11 changed files with 410 additions and 157 deletions.
32 changes: 23 additions & 9 deletions src/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,9 @@ import styled from 'styled-components';
import { AiOutlineMenu } from "react-icons/ai";
import { Link } from 'react-router-dom';
import { CgSearch } from "react-icons/cg";

import { PRIMARY_COLOR_BLUE,PRIMARY_COLOR_SKY} from "../src/constants";
// @ts-ignore
import logo from "../src/img/logo.png";

interface HeaderProps {
toggleSidebar: () => void;
Expand Down Expand Up @@ -89,11 +91,11 @@ padding-left:15px;
color:black;
background-color: white;
&.active {
background-color: #7ba1da;
background-color:${PRIMARY_COLOR_BLUE};
color:white;
}
&:hover{
background-color: #b7c9e2;
background-color: ${PRIMARY_COLOR_SKY};
color:white;
transition: 1s;
}
Expand All @@ -116,10 +118,10 @@ background-color: white;
}
`;
const Logo=styled.div`
background-image: url(https://t3.ftcdn.net/jpg/03/53/02/50/360_F_353025063_sgL2uW9B1Euw2QOR79zFIOWcUY5CrWxZ.jpg);
background: url(${logo});
background-repeat: no-repeat;
width:150px;
height:70px;
width:120px;
height:50px;
background-position:center;
background-size: cover;
Expand All @@ -134,9 +136,21 @@ width:110px;
border-radius:15px;
justify-content:center;
color:white;
background-color: #7ba1da;
background-color:${PRIMARY_COLOR_BLUE};
`;
const MenuWrapper=styled.div`
background-color:white;
width:55px;
height:50px;
display:flex;
border-radius:50%;
justify-content:center;
align-items:center;
&:active {
background-color:${PRIMARY_COLOR_BLUE};
}
`;

const Header: React.FC<HeaderProps> = ({ toggleSidebar, isSidebarOpen }) => {
Expand All @@ -148,7 +162,7 @@ const Header: React.FC<HeaderProps> = ({ toggleSidebar, isSidebarOpen }) => {
return (
<HeaderContainer>
<LeftContainer>
<div className="MenuWrapper" onClick={toggleSidebar}>
<MenuWrapper onClick={toggleSidebar}>
<AiOutlineMenu size="40" />
{isSidebarOpen && (
<Sidebar>
Expand Down Expand Up @@ -198,7 +212,7 @@ const Header: React.FC<HeaderProps> = ({ toggleSidebar, isSidebarOpen }) => {
</Sidebardiv>
</Sidebar>
)}
</div>
</MenuWrapper>

<Link to="/"><Logo></Logo></Link>
</LeftContainer>
Expand Down
158 changes: 59 additions & 99 deletions src/Main.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
// Main 컴포넌트
import React, { useEffect, useState } from 'react';

import { Route, Routes ,Link } from 'react-router-dom';
import { BiChevronLeft, BiChevronRight } from "react-icons/bi";
import styled from 'styled-components'

import { PRIMARY_COLOR_BLUE} from "../src/constants";
import MainContents from './MainContents';
import MainContents2 from './MainContents2';

const MainContainer = styled.div<{ paddingLeft: number }>`
padding-top: 70px;
Expand All @@ -20,7 +22,7 @@ height:36%;
`;
const TopButton = styled.button`
background-color: #7ba1da;
background-color: ${PRIMARY_COLOR_BLUE};
color:white;
border-radius: 15px;
border:0px;
Expand Down Expand Up @@ -78,84 +80,64 @@ const BottomInputIn=styled.div`
display:flex;
align-items: center;
justify-content: center;
height:50px;
height:30px;
width:220px;
border-right: 50px;
border-radius: 25px;
background-color: #7ba1da;
background-color: ${PRIMARY_COLOR_BLUE};
`;
const BottomInputInput=styled.input`
border-radius: 25px;
width:80%;
height:60%;
border:none;
`;
const BottomComponent=styled.div`
box-sizing: border-box;
max-width:100%;
display:flex;
flex-wrap: wrap;
height:90%;
`;
const BottomComponent1=styled.div`
box-sizing: border-box;
width:25%;
align-items: center;
justify-content: center;
display:flex;
height:50%;`;
const BottomComponent1Caffee=styled.div`
border-radius: 25px;
width:250px;
height:200px;
box-shadow: 5px 5px 5px 5px gray;
&:hover{
height:220px;
width:270px;
transition: 0.5s;
}
`;

const BottomComponent1CaffeeImg=styled.div`
border-style: solid;
border: 0;
border-radius:25px 25px 0px 0px;
background-position: center;
background-repeat: repeat;
background-size:cover;
box-sizing: border-box;

width:100%;
height:85%;
`;

const BottomComponent1CaffeeText=styled.div`
height:15%;
const BottomCheck=styled.div`
display:flex;
justify-content: space-around;
border: 0;
border-radius: 0px 0px 25px 25px;`;
align-items: center;
justify-content: center;
`;
const BottomCheckbox=styled.div`
width:600px;
height:45px;
const BottomCheck=styled.div`
display:flex;
align-items: center;
justify-content: center;
`;
const BottomCheckDiv =styled.div`
margin: 0px 10px 0px 10px;
const BottomCheckLink=styled(Link)`
width:35px;
display:Flex;
align-items:center;
justify-content:center;
text-decoration:none;
background-color: white;
border:1px solid ${PRIMARY_COLOR_BLUE};
color: ${PRIMARY_COLOR_BLUE};
height:35px;
&:hover {
background-color:${PRIMARY_COLOR_BLUE};
color:white;
}
`;
const BottomCheckButton=styled.button`
background-color: white;
background-color: ${PRIMARY_COLOR_BLUE};
border:1px solid ${PRIMARY_COLOR_BLUE};
display:flex;
align-items: center;
justify-content: center;
border:none;
width:35px;
height:37px;
color: white;
`;

interface MainProps {
Expand All @@ -165,27 +147,7 @@ interface MainProps {
const Main: React.FC<MainProps> = ({ isSidebarOpen }) => {
const [currentSlide, setCurrentSlide] = useState(0);
const [paddingLeft, setPaddingLeft] = useState(0);
const coffee=[
"https://a.cdn-hotels.com/gdcs/production161/d1403/b5f1876a-9e64-4d13-ab7a-a0fd2cbc5224.jpg",
"https://img.freepik.com/premium-photo/generative-ai-a-large-bright-cafe-environment-with-chairs-concrete-walls-and-a-hardwood-floor_28914-19636.jpg",
"https://i.namu.wiki/i/5FGUIiyTGl3EkaSlnnRnmoAsPBMkL8w1tVdj5pgDOoydk2T0brSqYsWyLgGqyELwn5oP8HWRhF8A-p8ZyN4FtQ.webp",
"https://cdn.imweb.me/thumbnail/20230522/31017371829ad.jpg",
"https://www.qplace.kr/content/images/2022/10/No.3185------.jpg",
"https://media.istockphoto.com/id/1286692956/ko/%EC%82%AC%EC%A7%84/%EC%9D%98%EC%9E%90%EC%99%80-%ED%85%8C%EC%9D%B4%EB%B8%94%EC%9D%B4-%EC%9E%88%EB%8A%94-%EB%B9%88-%EC%B9%B4%ED%8E%98-%EC%9D%B8%ED%85%8C%EB%A6%AC%EC%96%B4.jpg?s=612x612&w=0&k=20&c=dgWlZUPam-dJb_bRpXqCPUyRd-UWaYxCKiFkJT4fYSQ=",
"https://gyeongju.go.kr/upload/content/thumb/20200429/AF0FBCACF6E141DEBAD30FDB6082D979.jpg",
"https://media.istockphoto.com/id/1428594094/ko/%EC%82%AC%EC%A7%84/%EB%82%98%EB%AC%B4-%ED%85%8C%EC%9D%B4%EB%B8%94-%EC%BB%A4%ED%94%BC-%EB%A9%94%EC%9D%B4%EC%BB%A4-%ED%8C%A8%EC%8A%A4%ED%8A%B8%EB%A6%AC-%EB%B0%8F-%ED%8E%9C%EB%8D%98%ED%8A%B8-%EC%A1%B0%EB%AA%85%EC%9D%B4%EC%9E%88%EB%8A%94-%EB%B9%88-%EC%BB%A4%ED%94%BC-%EC%88%8D-%EC%9D%B8%ED%85%8C%EB%A6%AC%EC%96%B4.jpg?s=612x612&w=0&k=20&c=5bHJXVEZ4D9zsN_ZV-XVZsTxwxL5GdUOo5D0PPs3fsI="
];
const local = [
"강서",
"인천",
"김포",
"당정",
"홍대",
"이태원",
"강남",
"판교"

];

const slides = ["예시1", "예시2", "예시3"];
const images = [
"https://www.lge.co.kr/kr/upload/admin/storyThumbnail/tvc_codezero_thumb[20230607_105950].jpg",
Expand Down Expand Up @@ -252,30 +214,28 @@ const Main: React.FC<MainProps> = ({ isSidebarOpen }) => {

</BottomInputIn>
</BottomInput>
<BottomComponent>
{[...Array(8)].map((_, index) => (
<BottomComponent1 key={index} >

<BottomComponent1Caffee>
<BottomComponent1CaffeeImg style={{ backgroundImage: `url(${coffee[index]})` }}></BottomComponent1CaffeeImg>

<BottomComponent1CaffeeText>
<div>{`카페 ${index + 1}`}</div>
<div>{local[index]}</div>
</BottomComponent1CaffeeText>
</BottomComponent1Caffee>
</BottomComponent1>
))}
</BottomComponent>
<Routes>

<Route path="/*" element={<MainContents/>} />
<Route path="/2" element={<MainContents2/>} />
<Route path="/3" element={<MainContents/>} />
<Route path="/4" element={<MainContents/>} />
<Route path="/5" element={<MainContents/>} />

</Routes>

<BottomCheck>
<BottomCheckButton><BiChevronLeft size="15" /></BottomCheckButton>
<BottomCheckDiv>1</BottomCheckDiv>
<BottomCheckDiv>2</BottomCheckDiv>
<BottomCheckDiv>3</BottomCheckDiv>
<BottomCheckDiv>4</BottomCheckDiv>
<BottomCheckDiv>5</BottomCheckDiv>
<BottomCheckButton><BiChevronRight size="15" /></BottomCheckButton>
</BottomCheck>
<BottomCheckbox>
<BottomCheckButton><BiChevronLeft size="40"/></BottomCheckButton>
<BottomCheckLink to="/">1</BottomCheckLink>
<BottomCheckLink to="2">2</BottomCheckLink>
<BottomCheckLink to="3">3</BottomCheckLink>
<BottomCheckLink to="4">4</BottomCheckLink>
<BottomCheckLink to="5">5</BottomCheckLink>
<BottomCheckButton><BiChevronRight size="40"/></BottomCheckButton>
</BottomCheckbox>
</BottomCheck>

</Bottom>
</MainContainer>

Expand Down
93 changes: 93 additions & 0 deletions src/MainContents.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
import React from 'react';
import styled from 'styled-components'
const BottomComponent=styled.div`
box-sizing: border-box;
max-width:100%;
display:flex;
flex-wrap: wrap;
height:90%;
`;
const BottomComponent1=styled.div`
box-sizing: border-box;
width:25%;
align-items: center;
justify-content: center;
display:flex;
height:50%;`;
const BottomComponent1Caffee=styled.div`
border-radius: 25px;
width:250px;
height:200px;
box-shadow: 5px 5px 5px 5px gray;
&:hover{
height:220px;
width:270px;
transition: 0.5s;
}
`;

const BottomComponent1CaffeeImg=styled.div`
border-style: solid;
border: 0;
border-radius:25px 25px 0px 0px;
background-position: center;
background-repeat: repeat;
background-size:cover;
box-sizing: border-box;
width:100%;
height:85%;
`;

const BottomComponent1CaffeeText=styled.div`
height:15%;
display:flex;
justify-content: space-around;
border: 0;
border-radius: 0px 0px 25px 25px;`;
function MainContents() {
const coffee=[
"https://a.cdn-hotels.com/gdcs/production161/d1403/b5f1876a-9e64-4d13-ab7a-a0fd2cbc5224.jpg",
"https://img.freepik.com/premium-photo/generative-ai-a-large-bright-cafe-environment-with-chairs-concrete-walls-and-a-hardwood-floor_28914-19636.jpg",
"https://i.namu.wiki/i/5FGUIiyTGl3EkaSlnnRnmoAsPBMkL8w1tVdj5pgDOoydk2T0brSqYsWyLgGqyELwn5oP8HWRhF8A-p8ZyN4FtQ.webp",
"https://cdn.imweb.me/thumbnail/20230522/31017371829ad.jpg",
"https://www.qplace.kr/content/images/2022/10/No.3185------.jpg",
"https://media.istockphoto.com/id/1286692956/ko/%EC%82%AC%EC%A7%84/%EC%9D%98%EC%9E%90%EC%99%80-%ED%85%8C%EC%9D%B4%EB%B8%94%EC%9D%B4-%EC%9E%88%EB%8A%94-%EB%B9%88-%EC%B9%B4%ED%8E%98-%EC%9D%B8%ED%85%8C%EB%A6%AC%EC%96%B4.jpg?s=612x612&w=0&k=20&c=dgWlZUPam-dJb_bRpXqCPUyRd-UWaYxCKiFkJT4fYSQ=",
"https://gyeongju.go.kr/upload/content/thumb/20200429/AF0FBCACF6E141DEBAD30FDB6082D979.jpg",
"https://media.istockphoto.com/id/1428594094/ko/%EC%82%AC%EC%A7%84/%EB%82%98%EB%AC%B4-%ED%85%8C%EC%9D%B4%EB%B8%94-%EC%BB%A4%ED%94%BC-%EB%A9%94%EC%9D%B4%EC%BB%A4-%ED%8C%A8%EC%8A%A4%ED%8A%B8%EB%A6%AC-%EB%B0%8F-%ED%8E%9C%EB%8D%98%ED%8A%B8-%EC%A1%B0%EB%AA%85%EC%9D%B4%EC%9E%88%EB%8A%94-%EB%B9%88-%EC%BB%A4%ED%94%BC-%EC%88%8D-%EC%9D%B8%ED%85%8C%EB%A6%AC%EC%96%B4.jpg?s=612x612&w=0&k=20&c=5bHJXVEZ4D9zsN_ZV-XVZsTxwxL5GdUOo5D0PPs3fsI="
];
const local = [
"강서",
"인천",
"김포",
"당정",
"홍대",
"이태원",
"강남",
"판교"

];
return (
<BottomComponent>
{[...Array(8)].map((_, index) => (
<BottomComponent1 key={index} >

<BottomComponent1Caffee>
<BottomComponent1CaffeeImg style={{ backgroundImage: `url(${coffee[index]})` }}></BottomComponent1CaffeeImg>

<BottomComponent1CaffeeText>
<div>{`카페 ${index + 1}`}</div>
<div>{local[index]}</div>
</BottomComponent1CaffeeText>
</BottomComponent1Caffee>
</BottomComponent1>
))}
</BottomComponent>
);
}

export default MainContents;
Loading

0 comments on commit 7fed598

Please sign in to comment.