Skip to content

Commit

Permalink
Merge pull request #23 from potato-club/dlgusdn
Browse files Browse the repository at this point in the history 
Design Header,Main,Make page css change
  • Loading branch information
@gusdn010158
gusdn010158 authored Feb 29, 2024
2 parents 3438cf1 + 0894d66 commit 6789ed8
Show file tree
Hide file tree
Showing 5 changed files with 143 additions and 50 deletions.
120 changes: 84 additions & 36 deletions src/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { AiOutlineMenu } from "react-icons/ai";
import { Link } from 'react-router-dom';
import { CgSearch } from "react-icons/cg";


interface HeaderProps {
toggleSidebar: () => void;
isSidebarOpen: boolean;
Expand All @@ -15,40 +16,51 @@ z-index: 9999;
width: 100%;
height: 70px;
justify-content: space-between;
background-color: #272829;
color: white;
background-color:white;
color: black;
align-items: center;
border-left: 50px;
position: fixed;
border:1px solid black;
`;

const LeftContainer = styled.div`
display: flex;
width: 300px;
width: 400px;
align-items: center;
justify-content: space-around;
`;

const RightContainer = styled.div`
display: flex;
width: 500px;
width: 600px;
justify-content: space-around;
`;

const SearchContainer = styled.div`
display: flex;
width: 250px;
width: 280px;
align-items: center;
justify-content: space-around;
`;
const Searchinput = styled.input`
width: 220px;
border-right:0px solid black;
border-top:0px solid black;
border-left:0px solid black;
`;
const Searchbutton = styled.button`
border:0px;
display:flex;
const Input = styled.input`
width: 230px;
background-color:white;
`;



const LoginContainer = styled.div`
height: 25px;
width: 150px;
justify-content: space-around;
display: flex;
align-items: center;
Expand All @@ -61,43 +73,72 @@ const Sidebar = styled.div`
position: absolute;
height: 880px;
width: 200px;
background-color: #272829;
background-color:white;
border:1px solid black;
`;

const SidebarItem = styled.div`
text-decoration:none;
font-size:22px;
display:flex;
align-items:center;
height:100%;
color:white;
background-color: #272829;
`;

const SidebarLink=styled(Link)`
text-decoration:none;
font-size:22px;
display:flex;
align-items:center;
height:100%;
color:white;
background-color: #272829;
border-radius:15px;
padding-left:15px;
color:black;
background-color: white;
&.active {
background-color: white;
color:black;
background-color: #7ba1da;
color:white;
}
&:hover{
background-color: #b7c9e2;
color:white;
transition: 1s;
}
`;
const SidebarMe=styled.div`
font-size:22px;
height:100%;
padding-left:15px;
display:flex;
align-items:center;
`;
const Sidebardiv=styled.div`
border-right:1px solid black;
height:55px;
width:198px;
background-color: #272829;
margin:15px;
background-color: white;
&.active {
background-color: white;
color:black;
color:white;
}
`;
const Logo=styled.div`
background-image: url(https://t3.ftcdn.net/jpg/03/53/02/50/360_F_353025063_sgL2uW9B1Euw2QOR79zFIOWcUY5CrWxZ.jpg);
background-repeat: no-repeat;
width:150px;
height:70px;
background-position:center;
background-size: cover;
`;
const HeadLink=styled(Link)`
text-decoration:none;
margin-right:30px;
display:flex;
align-items:center;
height:50px;
width:110px;
border-radius:15px;
justify-content:center;
color:white;
background-color: #7ba1da;
`;

const Header: React.FC<HeaderProps> = ({ toggleSidebar, isSidebarOpen }) => {
const [activeLink, setActiveLink] = useState<number | null>(null);

Expand All @@ -121,7 +162,10 @@ const Header: React.FC<HeaderProps> = ({ toggleSidebar, isSidebarOpen }) => {

<Sidebardiv className={`SidebarLink ${activeLink === 1 ? "active" : ""}`}
onClick={() => handleClick(1)}>
<SidebarItem>설정</SidebarItem>
<SidebarLink to="/"
className={`SidebarLink ${activeLink === 1 ? "active" : ""}`}
onClick={() => handleClick(1)}
>설정</SidebarLink>
</Sidebardiv>

<Sidebardiv className={`SidebarLink ${activeLink === 2 ? "active" : ""}`}
Expand All @@ -132,13 +176,15 @@ const Header: React.FC<HeaderProps> = ({ toggleSidebar, isSidebarOpen }) => {
<hr />
<Sidebardiv className={`SidebarLink ${activeLink === 3 ? "active" : ""}`}
onClick={() => handleClick(3)}>
<SidebarItem>나</SidebarItem>
<SidebarMe>나</SidebarMe>
</Sidebardiv>
<hr />
<Sidebardiv className={`SidebarLink ${activeLink === 4 ? "active" : ""}`}
onClick={() => handleClick(4)}>
<SidebarItem>친구창</SidebarItem>
<SidebarLink to="/" className={`SidebarLink ${activeLink === 4 ? "active" : ""}`}
onClick={() => handleClick(4)}>친구창</SidebarLink>
</Sidebardiv>

<Sidebardiv className={`SidebarLink ${activeLink === 5 ? "active" : ""}`}
onClick={() => handleClick(5)}>
<SidebarLink to="/MyPage" className={`SidebarLink ${activeLink === 5 ? "active" : ""}`}
Expand All @@ -147,22 +193,24 @@ const Header: React.FC<HeaderProps> = ({ toggleSidebar, isSidebarOpen }) => {
</Sidebardiv>
<Sidebardiv className={`SidebarLink ${activeLink === 6 ? "active" : ""}`}
onClick={() => handleClick(6)}>
<SidebarItem>사이드바 내용</SidebarItem>
<SidebarLink to="/" className={`SidebarLink ${activeLink === 6 ? "active" : ""}`}
onClick={() => handleClick(6)}>사이드바 내용</SidebarLink>
</Sidebardiv>
</Sidebar>
)}
</div>
<Link to="/" style={{ textDecoration: "none", color: "white" }}>SWS</Link>

<Link to="/"><Logo></Logo></Link>
</LeftContainer>
<RightContainer>
<SearchContainer>
<Input />
<div><CgSearch size="25" /></div>
<Searchinput placeholder='해시 태크를 검색해 보세요'/>
<Searchbutton><CgSearch size="25" /></Searchbutton>

</SearchContainer>
<LoginContainer>
<Link to="/SignInUpPage/SignInUpBox" style={{ textDecoration: "none", color: "white" }}>로그인</Link>
<Link to="/SignInUpPage/SignUpBox" style={{ textDecoration: "none", color: "white" }}>회원가입</Link>
<HeadLink to="/SignInUpPage/SignInUpBox">로그인</HeadLink>
<HeadLink to="/SignInUpPage/SignUpBox">회원가입</HeadLink>
</LoginContainer>
</RightContainer>
</HeaderContainer>
Expand Down
5 changes: 5 additions & 0 deletions src/Lounge.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,3 +147,8 @@ const App: React.FC<MainProps> = ({ isSidebarOpen }) => {
};

export default App;





31 changes: 23 additions & 8 deletions src/Main.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,10 @@ height:36%;
`;
const TopButton = styled.button`
background-color:#272829;
background-color: #7ba1da;
color:white;
border-radius: 50%;
border-radius: 15px;
border:0px;
width:40px;
height:40px;
display:flex;
Expand Down Expand Up @@ -81,7 +82,7 @@ height:50px;
width:220px;
border-right: 50px;
border-radius: 25px;
background-color:#b9b9b9;
background-color: #7ba1da;
`;
const BottomInputInput=styled.input`
border-radius: 25px;
Expand Down Expand Up @@ -109,24 +110,38 @@ const BottomComponent1Caffee=styled.div`
border-radius: 25px;
width:250px;
border:#272829;
height:200px;`;
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-bottom: 0;
border: 0;
border-radius:25px 25px 0px 0px;
background-position: center;
background-repeat: repeat;
background-size:cover;
box-sizing: border-box;
width:100%;
height:80%;`;
height:85%;
`;

const BottomComponent1CaffeeText=styled.div`
height:15%;
display:flex;
justify-content: space-around;
border-style: solid;
border: 0;
border-radius: 0px 0px 25px 25px;`;


const BottomCheck=styled.div`
display:flex;
align-items: center;
Expand Down
37 changes: 31 additions & 6 deletions src/Make.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ flex-direction:column;
`;
const MakeLeftNumber=styled.div`
background-Color:gray;
background-color: #7ba1da;
font-size:100px;
width:500px;
height:500px;
Expand All @@ -37,8 +37,11 @@ align-items:center;
margin-bottom:50px;
`;
const MakeLeftButton=styled.button`
background-color:gray;
padding:12px;
background-color: #7ba1da;
padding:6px 25px 6px 25px;
border-radius: 15px;
color:white;
border:0;
`;
const MakeLeftIn=styled.div`
Expand All @@ -62,7 +65,7 @@ height:660px;
flex-direction:column;
`;
const MakeRightTitle=styled.div`
background-color:gray;
background-color: #7ba1da;
width:600px;
max-height:50px;
border-radius:25px;
Expand All @@ -73,16 +76,30 @@ justify-content:center;

const MakeRightfriend=styled.div`
display:flex;
justify-content:space-around;
align-items:center;
`;
const MakeRightinput =styled.input`
height:70px;
width:600px;
width:530px;
margin-right:20px;
border-left:0px;
border-top:0px;
border-right:0px;
display:flex;
align-items:center;
`;
const MakeRightbutton =styled.button`
display:flex;
align-items:center;
height:60px;
width:80px;
justify-content:center;
border:0px;
color:white;
border-radius:10px;
background-color:#7ba1da;
`;
const MakeRightCenter=styled.div`
height:550px;
Expand All @@ -99,8 +116,16 @@ align-items:center;
const MakeBottomButton=styled.button`
padding:30px 70px 30px 70px;
font-size:30px;
border:0;
border-radius:25px;
background-color:gray;
background-color: #7ba1da;
&:hover{
height:110px;
width:350px;
transition: 1s;
}
`;


Expand Down
Binary file added src/img/logo.PNG
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 6789ed8

Please sign in to comment.