diff --git a/src/Header.tsx b/src/Header.tsx index 04379bf..b3cd809 100644 --- a/src/Header.tsx +++ b/src/Header.tsx @@ -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; @@ -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; } @@ -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; @@ -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 = ({ toggleSidebar, isSidebarOpen }) => { @@ -148,7 +162,7 @@ const Header: React.FC = ({ toggleSidebar, isSidebarOpen }) => { return ( -
+ {isSidebarOpen && ( @@ -198,7 +212,7 @@ const Header: React.FC = ({ toggleSidebar, isSidebarOpen }) => { )} -
+ diff --git a/src/Main.tsx b/src/Main.tsx index bd9343f..06313db 100644 --- a/src/Main.tsx +++ b/src/Main.tsx @@ -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; @@ -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; @@ -78,11 +80,11 @@ 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; @@ -90,72 +92,52 @@ 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 { @@ -165,27 +147,7 @@ interface MainProps { const Main: React.FC = ({ 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", @@ -252,30 +214,28 @@ const Main: React.FC = ({ isSidebarOpen }) => { - - {[...Array(8)].map((_, index) => ( - - - - - - -
{`카페 ${index + 1}`}
-
{local[index]}
- - - - ))} - + + + } /> + } /> + } /> + } /> + } /> + + + - - 1 - 2 - 3 - 4 - 5 - - + + + 1 + 2 + 3 + 4 + 5 + + + + diff --git a/src/MainContents.tsx b/src/MainContents.tsx new file mode 100644 index 0000000..1147349 --- /dev/null +++ b/src/MainContents.tsx @@ -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 ( + + {[...Array(8)].map((_, index) => ( + + + + + + +
{`카페 ${index + 1}`}
+
{local[index]}
+ + + + ))} + + ); +} + +export default MainContents; \ No newline at end of file diff --git a/src/MainContents2.tsx b/src/MainContents2.tsx new file mode 100644 index 0000000..4d00beb --- /dev/null +++ b/src/MainContents2.tsx @@ -0,0 +1,95 @@ +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 MainContents2() { + const coffee=[ + "https://gyeongju.go.kr/upload/content/thumb/20200429/AF0FBCACF6E141DEBAD30FDB6082D979.jpg", + "https://i.namu.wiki/i/5FGUIiyTGl3EkaSlnnRnmoAsPBMkL8w1tVdj5pgDOoydk2T0brSqYsWyLgGqyELwn5oP8HWRhF8A-p8ZyN4FtQ.webp", + "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://cdn.imweb.me/thumbnail/20230522/31017371829ad.jpg", + "https://a.cdn-hotels.com/gdcs/production161/d1403/b5f1876a-9e64-4d13-ab7a-a0fd2cbc5224.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://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 ( + + {[...Array(8)].map((_, index) => ( + + + + + + +
{`카페 ${index + 1}`}
+
{local[index]}
+ + + + ))} + + ); +} + +export default MainContents2; \ No newline at end of file diff --git a/src/Make.tsx b/src/Make.tsx index ba1cc29..34c8690 100644 --- a/src/Make.tsx +++ b/src/Make.tsx @@ -1,6 +1,8 @@ import React , { useState, useEffect }from 'react'; import styled from 'styled-components'; -import { BiChevronLeft, BiChevronRight } from "react-icons/bi"; +import { PRIMARY_COLOR_BLUE} from "../src/constants"; +import { FaPlus } from "react-icons/fa"; +import { FaMinus } from "react-icons/fa"; const MainContainer = styled.div<{ paddingLeft: number }>` padding-top: 70px; margin-left: 0; @@ -26,7 +28,9 @@ flex-direction:column; `; const MakeLeftNumber=styled.div` -background-color: #7ba1da; +box-shadow: 5px 5px 5px 5px gray; +background-color:${PRIMARY_COLOR_BLUE}; +color:white; font-size:100px; width:500px; height:500px; @@ -37,22 +41,23 @@ align-items:center; margin-bottom:50px; `; const MakeLeftButton=styled.button` -background-color: #7ba1da; -padding:6px 25px 6px 25px; +background-color:${PRIMARY_COLOR_BLUE}; +padding:18px 25px 18px 25px; border-radius: 15px; color:white; border:0; +margin-left:50px; +margin-right:50px; +box-shadow: 2px 2px 2px 2px gray; +&:active{ + height:85px; + width:95px; + transition: 0.5s; +} -`; -const MakeLeftIn=styled.div` -padding:12px; -display:flex; -align-items:center; -justify-content:center; -width:100px; -font-size:40px; `; + const MakeLeftButtonBox=styled.div` display:flex; `; @@ -65,9 +70,10 @@ height:660px; flex-direction:column; `; const MakeRightTitle=styled.div` -background-color: #7ba1da; +background-color:${PRIMARY_COLOR_BLUE}; +color:white; width:600px; -max-height:50px; +min-height:50px; border-radius:25px; display:flex; align-items:center; @@ -98,12 +104,24 @@ justify-content:center; border:0px; color:white; border-radius:10px; -background-color:#7ba1da; +background-color:${PRIMARY_COLOR_BLUE}; +margin-right:10px; `; const MakeRightCenter=styled.div` height:550px; overflow-y: auto; + +&::-webkit-scrollbar { + width: 15px; + height: 8px; + border-radius: 6px; + + } + &::-webkit-scrollbar-thumb { + background-color:${PRIMARY_COLOR_BLUE}; + border-radius: 6px; + } `; const MakeBottom=styled.div` width:100%; @@ -117,14 +135,14 @@ const MakeBottomButton=styled.button` padding:30px 70px 30px 70px; font-size:30px; border:0; - +color:white; border-radius:25px; -background-color: #7ba1da; +background-color:${PRIMARY_COLOR_BLUE}; -&:hover{ +&:active{ height:110px; width:350px; - transition: 1s; + transition: 0.5s; } `; @@ -163,9 +181,9 @@ const Click = () => { {number} - - {number} - + + + @@ -178,7 +196,7 @@ const Click = () => { {Array.from({ length: number }).map((_, index) => ( - + 확인 ))} diff --git a/src/MyPage.tsx b/src/MyPage.tsx index e349fbc..83e2479 100644 --- a/src/MyPage.tsx +++ b/src/MyPage.tsx @@ -2,7 +2,7 @@ import React from 'react'; import styled from 'styled-components'; import { Link } from 'react-router-dom'; import { AiOutlineUser } from 'react-icons/ai'; - +import { PRIMARY_COLOR_BLUE} from "../src/constants"; const MyPageContaine = styled.div` width: 100%; height: 880px; @@ -14,7 +14,7 @@ const MyPageContaine = styled.div` const MyPageContent = styled.div` box-sizing: border-box; margin-top: 260px; - background-color: rgb(155, 154, 154); + background-color: ${PRIMARY_COLOR_BLUE}; width: 50%; height: 1000px; `; @@ -33,12 +33,17 @@ border-radius: 50%; display: flex; align-items: center; justify-content: center; -background-color: aliceblue; +background-color: white; `; const MPTname = styled.div` -width: 230px; -height: 40px; -background-color: aliceblue;`; +width: 210px; +border-radius:5px; +height: 30px; +color: ${PRIMARY_COLOR_BLUE}; +display:Flex; +align-items:center; +justify-content:center; +background-color: white;`; @@ -47,11 +52,16 @@ background-color: aliceblue;`; border-radius: 25px; border: none; height: 30px; + width:150px; + background-color:white; + box-shadow: 3px 3px 3px 3px gray; + color: ${PRIMARY_COLOR_BLUE}; + margin-bottom:20px; `; const MPBfriendContent = styled.div` - background-color: aliceblue; + background-color: white; width: 750px; height: 110px; display: flex; @@ -61,6 +71,8 @@ background-color: aliceblue;`; padding-left: 25px; padding-right: 25px; border-radius: 25px; + color: ${PRIMARY_COLOR_BLUE}; + box-shadow: 3px 3px 3px 3px gray; `; const MyPageBottom = styled.div` @@ -72,7 +84,7 @@ const MyPageBottom = styled.div` width: 85%; margin: 70px; `; -const MPBwrite = styled.button` +const MPBwrite = styled(Link)` width: 200px; height: 50px; display: flex; @@ -80,27 +92,53 @@ const MPBwrite = styled.button` justify-content: center; border-radius: 25px; margin-bottom: 25px; - background-color: aliceblue; - `; + background-color: white; + border:none; + text-decoration:none; + color: ${PRIMARY_COLOR_BLUE}; + box-shadow: 3px 3px 3px 3px gray; +`; const MPBfriendContentButton = styled.button` height: 40px; width: 80px; border-radius: 15px; - background-color: red; + background-color: #d13c3c; + color:white; border: none; + `; -const MPBfriendPage=styled.button` - height: 40px; +const MPBfriendPage=styled(Link)` + height: 40px; width: 90px; + display: flex; + align-items:center; + justify-content: center; border-radius: 15px; - border: none; + margin-right:15px; + color: white; + border:none; + text-decoration:none; + background-color: ${PRIMARY_COLOR_BLUE}; + `; const MPBfriend=styled.div` overflow-y:auto; + `; +const MPBTopBUTTON=styled.div` +display:Flex; +flex-direction:column; +`; + +const MPTtag =styled.div` +color:white; +`; +const MPBbottomBUTTON=styled.div` +display:flex; +`; const MyPage = () => { const friend = [ @@ -121,22 +159,25 @@ alert("삭제되었습니다.");
- 이름 -
#강서 #프론트엔드 #웹 개발
+ 이름: 아무이름 + #강서 #프론트엔드 #웹 개발
+ 내 정보 수정 + 해시태그 수정 + - 내가 쓴 글 목록 + 내가 쓴 글 목록 -
내 친구들
+
내 친구들
{[...Array(3)].map((_, index) => ( -
{friend[index]}
-
- 친구 페이지 +
{friend[index]}
+ + 친구 페이지 친구 삭제 -
+ ))} diff --git a/src/SignInUpPage/LoginForm.tsx b/src/SignInUpPage/LoginForm.tsx index 782dea3..27e6ee0 100644 --- a/src/SignInUpPage/LoginForm.tsx +++ b/src/SignInUpPage/LoginForm.tsx @@ -2,6 +2,7 @@ import React from "react"; import { useState } from "react"; import styled from "styled-components"; import { KakaoSignInBtn } from "./KakaoSignInBtn"; + interface LoginFormProps{ onSubmit: (username: string, password: string) => void } diff --git a/src/SignInUpPage/SignInUpBox.tsx b/src/SignInUpPage/SignInUpBox.tsx index b165093..c9de464 100644 --- a/src/SignInUpPage/SignInUpBox.tsx +++ b/src/SignInUpPage/SignInUpBox.tsx @@ -1,5 +1,9 @@ //로그인 페이지 +import { PRIMARY_COLOR_BLUE} from "../../src/constants"; +// @ts-ignore +import logo from "./logo.png"; + import styled from "styled-components"; import LoginForm from "./LoginForm"; const SignInUpBox=()=>{ @@ -10,7 +14,7 @@ const SignInUpBox=()=>{ return( - 대충 로고이미지 넣을 곳 + @@ -33,6 +37,9 @@ const LogInBoxContainer = styled.div` const ContainerWithLogo = styled.div` text-align :center ; margin-top: 150px; + display:flex; + flex-direction:column; + align-items:center; `; const LogInBox = styled.div` @@ -41,13 +48,19 @@ const LogInBox = styled.div` text-align: left; width:500px; height: 500px; - background-color: #cac8c8; + background-color: ${PRIMARY_COLOR_BLUE}; border-radius: 30px; box-shadow: 0 0 15px rgba(0,0,0,0.4); `; const Logo = styled.div` margin-bottom: 30px; + background: url(${logo}); + width:120px; + height:50px; + background-position:center; + background-size: cover; + background-repeat: no-repeat; `; const Contents = styled.div` diff --git a/src/SignInUpPage/SignUpBox.tsx b/src/SignInUpPage/SignUpBox.tsx index 83dc7ff..8891fb3 100644 --- a/src/SignInUpPage/SignUpBox.tsx +++ b/src/SignInUpPage/SignUpBox.tsx @@ -1,5 +1,9 @@ //회원가입 페이지 +import { PRIMARY_COLOR_BLUE} from "../../src/constants"; + +// @ts-ignore +import logo from "./logo.png"; import styled from "styled-components"; import SignUpForm from "./SignUpForm"; const SignUpBox=()=>{ @@ -10,7 +14,7 @@ const SignUpBox=()=>{ return( - 대충 로고이미지 넣을 곳 + @@ -33,6 +37,9 @@ const LogInBoxContainer = styled.div` const ContainerWithLogo = styled.div` text-align :center ; margin-top: 150px; + display:flex; + flex-direction:column; + align-items:center; `; const LogInBox = styled.div` @@ -41,13 +48,20 @@ const LogInBox = styled.div` text-align: left; width:500px; height: 500px; - background-color: #cac8c8; + background-color: ${PRIMARY_COLOR_BLUE}; border-radius: 30px; box-shadow: 0 0 15px rgba(0,0,0,0.4); `; const Logo = styled.div` margin-bottom: 30px; + background: url(${logo}); + width:120px; + height:50px; + background-position:center; + background-size: cover; + background-repeat: no-repeat; + `; const Contents = styled.div` diff --git a/src/SignInUpPage/logo.png b/src/SignInUpPage/logo.png new file mode 100644 index 0000000..b85afa3 Binary files /dev/null and b/src/SignInUpPage/logo.png differ diff --git a/src/constants.tsx b/src/constants.tsx new file mode 100644 index 0000000..2f38ee9 --- /dev/null +++ b/src/constants.tsx @@ -0,0 +1,4 @@ + +export const PRIMARY_COLOR_SKY = "#b7c9e2"; +export const PRIMARY_COLOR_WHITE = "#f8f5f1"; +export const PRIMARY_COLOR_BLUE = "#7ba1da"; \ No newline at end of file