Skip to content

Commit

Permalink
Merge pull request #85 from mju-likelion/feat/edit-ui
Browse files Browse the repository at this point in the history 
feat: 반응형 UI
  • Loading branch information
@zzzzzuuuuu
zzzzzuuuuu authored Aug 18, 2023
2 parents 74220c3 + baa7902 commit 3467d82
Show file tree
Hide file tree
Showing 13 changed files with 35 additions and 31 deletions.
3 changes: 0 additions & 3 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,13 @@
# Likelion 11th Hackathon 3team
<<<<<<< HEAD
# 써핑
정보검색시간 최소화와 정보 질 향상을 위해 다양한 검색엔진에서 활용할 수 있는 기능을 게임을 통해 학습하는 교육 서비스<br />
<br />
20대 남녀 대학생이 정보 검색 시 느끼는 어려움과 불편을 해결합니다.
=======

# Project Name

프로젝트설명

>>>>>>> develop
## 웹개발팀 소개

| 김아영 | 안지유 | 오현의 |
Expand Down
3 changes: 3 additions & 0 deletions src/components/Button/ChoiceCircle.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,9 @@ const ChoiceCircle = ({ value, onClick, userAnswer }) => {
};

const Circle = styled.button`
display: flex;
justify-content: center;
align-items: center;
width: 175px;
height: 175px;
padding: 20px;
Expand Down
13 changes: 7 additions & 6 deletions src/components/Game/Content.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -204,8 +204,8 @@ const shakeAnimation = keyframes`
40%, 60% {transform: translate3d(2px, 0, 0);}
`;
const ContentContainer = styled.div`
width: 900px;
height: 100%;
width: calc(100vw - 240px);
height: calc(100vh - 130px);
`;
const ChapterTitle = styled.p`
font-size: 35px;
Expand All @@ -215,16 +215,17 @@ const ChapterTitle = styled.p`
const TapWrapper = styled.div`
display: flex;
justify-content: space-between;
width: calc(100vw - 350px);
`;
const TapContainer = styled.div`
margin-left: 40px;
margin-left: 60px;
display: flex;
align-items: flex-end;
`;
const HelpButton = styled.button`
width: 70px;
height: 70px;
margin-right: 25px;
margin-right: 55px;
border-radius: 20px 20px 0 0;
background-color: ${({ theme, isModal }) =>
isModal ? `#ffe755` : theme.colors.YELLOW};
Expand Down Expand Up @@ -263,8 +264,8 @@ const Tap = styled.button`
`;
const ContentWrapper = styled.div`
margin: 0 auto;
width: 880px;
height: 550px;
width: calc(100vw - 250px - 60px - 100px);
height: 75vh;
padding: 15px 70px 0 70px;
border-radius: 25px;
background-color: ${({ theme, bgColor }) => theme.colors[bgColor]};
Expand Down
3 changes: 2 additions & 1 deletion src/components/Game/SideBar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ const SideBar = ({

const SideBarContainer = styled.div`
width: 250px;
height: 730px;
height: calc(100vh - 70px);
padding: 20px;
box-shadow: 0 2px 1px rgba(37, 37, 37, 0.5);
position: relative;
Expand All @@ -78,6 +78,7 @@ const Hr = styled.hr`
`;
const Contents = styled.div`
white-space: normal;
height: calc(100vh - 70px - 55px - 40px);
display: flex;
flex-direction: column;
align-items: start;
Expand Down
9 changes: 5 additions & 4 deletions src/components/Game/Type_Choice.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ const TypeChoice = ({
})}
</CircleContainer>
<ButtonContainer>
<SquareButton disabled={true} />
<SubmitBtn
btnName='제출하기'
width={300}
Expand All @@ -63,9 +64,10 @@ const TypeChoice = ({
};
const ChoiceWrapper = styled.div`
width: 100%;
height: 100%;
height: 40vh;
display: flex;
flex-direction: column;
justify-content: space-around;
gap: 20px;
`;
const CircleContainer = styled.div`
Expand All @@ -75,10 +77,9 @@ const CircleContainer = styled.div`
`;
const ButtonContainer = styled.div`
display: flex;
justify-content: space-between;
align-items: center;
`;
const SubmitBtn = styled(ButtonLong)`
margin: 0 auto 0 220px;
`;
const SubmitBtn = styled(ButtonLong)``;

export default TypeChoice;
6 changes: 3 additions & 3 deletions src/components/Game/Type_FillBlank.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ const TypeFillBlank = ({

const FillBlankWrapper = styled.div`
width: 100%;
height: 250px;
height: calc(40vh);
display: flex;
flex-direction: column;
justify-content: space-between;
Expand All @@ -73,13 +73,13 @@ const Form = styled.form`
justify-content: space-between;
`;
const QuestionBox = styled.div`
width: 640px;
height: 70px;
width: calc(100vw - 250px - 60px - 200px - 140px);
padding: 13px 20px 20px 20px;
border-radius: 8px;
background-color: white;
`;
const InputContainer = styled.div`
width: calc(100vw - 250px - 60px - 200px - 140px - 30px);
border-bottom: 5px solid ${({ theme }) => theme.colors.BLUE};
display: flex;
align-items: center;
Expand Down
6 changes: 3 additions & 3 deletions src/components/Game/Type_ShortInput.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ const TypeShortInput = ({

const InputWrapper = styled.div`
width: 100%;
height: 250px;
height: calc(40vh);
display: flex;
flex-direction: column;
justify-content: space-between;
Expand All @@ -64,15 +64,15 @@ const Form = styled.form`
justify-content: space-between;
`;
const InputContainer = styled.div`
width: 640px;
width: calc(100vw - 250px - 60px - 200px - 140px);
height: 70px;
padding: 0 20px;
border-radius: 8px;
background-color: white;
`;
const AnswerInput = styled.input`
margin: 5px 0;
width: 600px;
width: calc(100vw - 250px - 60px - 200px - 140px - 30px);
height: 50px;
border: none;
border-bottom: 5px solid ${({ theme }) => theme.colors.BLUE};
Expand Down
2 changes: 1 addition & 1 deletion src/components/Header.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ const Header = () => {
export default Header;

const HeaderBar = styled.div`
width: 1280px;
width: 100vw;
height: 70px;
box-shadow: 0 0 5px black;
display: flex;
Expand Down
2 changes: 1 addition & 1 deletion src/components/MyPage/MyPageCategory.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export default MyPageCategory;

const CategoryBox = styled.div`
width: 228px;
height: 730px;
height: calc(100vh - 70px);
display: flex;
flex-direction: column;
align-items: center;
Expand Down
4 changes: 2 additions & 2 deletions src/pages/Education/EducationSelect.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,8 +57,8 @@ const EducationSelect = () => {
};

const PageContainer = styled.div`
width: 1280px;
height: 730px;
width: 100vw;
height: calc(100vh - 250px);
`;
const ContentContainer = styled.div`
display: flex;
Expand Down
4 changes: 2 additions & 2 deletions src/pages/Education/Game.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,8 +100,8 @@ const PageContainer = styled.div`
display: flex;
`;
const ContentWrapper = styled.div`
width: 1030px;
height: 730px;
width: calc(100vw - 240px);
height: calc(100vh - 70px);
padding: 30px;
display: flex;
justify-content: space-between;
Expand Down
5 changes: 3 additions & 2 deletions src/pages/Main/Main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,8 +37,9 @@ const Main = () => {
export default Main;

const MainContainer = styled.div`
width: 1280px;
height: 730px;
width: 100vw;
height: calc(100vh - 100px);
display: flex;
flex-direction: column;
align-items: center;
Expand Down
6 changes: 3 additions & 3 deletions src/pages/MyPage/MyPageEducation.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,13 +67,13 @@ export default MyPageEducation;

const MyPageEduBox = styled.div`
display: flex;
width: 1280px;
height: 730px;
width: calc(100vw);
`;
const MyPageEdu = styled.div`
display: flex;
width: 1052px;
width: calc(100vw - 278px);
flex-direction: column;
margin-left: 50px;
`;
const MyPageEduTitle = styled.h2`
font-size: 25px;
Expand Down

1 comment on commit 3467d82

@vercel
Copy link

@vercel vercel bot commented on 3467d82 Aug 18, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

hackathon-team3-web – ./

www.surfing-likelion.com
hackathon-team3-web.vercel.app
hackathon-team3-web-surfing-likelion.vercel.app
hackathon-team3-web-git-main-surfing-likelion.vercel.app
surfing-likelion.com

Please sign in to comment.