-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #51 from kakao-tech-campus-2nd-step3/Feat/issue-#48
λ§μ΄νμ΄μ§(μλλμ©) ꡬν λ° UI λΆλΆ μμ
- Loading branch information
Showing
14 changed files
with
435 additions
and
64 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
49 changes: 49 additions & 0 deletions
49
src/pages/guard/guide-line/components/guide-info-box/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,49 @@ | ||
import { Box, Flex, Text } from '@chakra-ui/react'; | ||
import styled from '@emotion/styled'; | ||
|
||
type GuidelineType = { | ||
title: string; | ||
content: string; | ||
}; | ||
|
||
const GuideLineInfo = ({ guideline }: { guideline: GuidelineType }) => { | ||
return ( | ||
<GuideLineInfoContainer> | ||
<Box display='flex' flexDir='column' w='100%' maxW='300px'> | ||
<Text fontSize='1rem' fontWeight={700} mb={2}> | ||
{guideline.title} | ||
</Text> | ||
<InfoBox mb={1}> | ||
<InfoText>{guideline.content}</InfoText> | ||
</InfoBox> | ||
</Box> | ||
</GuideLineInfoContainer> | ||
); | ||
}; | ||
|
||
export default GuideLineInfo; | ||
|
||
const GuideLineInfoContainer = styled(Flex)` | ||
width: 100%; | ||
max-width: 330px; | ||
min-height: 8rem; | ||
background-color: var(--color-white); | ||
border: 1px solid var(--color-white); | ||
border-radius: 10px; | ||
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); | ||
margin: 0.5rem 0; | ||
padding: 1rem; | ||
`; | ||
|
||
const InfoText = styled(Text)` | ||
font-size: 0.8rem; | ||
color: var(--color-black); | ||
`; | ||
|
||
const InfoBox = styled(Box)` | ||
width: 100%; | ||
max-width: 300px; | ||
display: flex; | ||
flex-direction: row; | ||
justify-content: space-between; | ||
`; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,39 @@ | ||
const GUIDELINE_DATA = [ | ||
{ | ||
id: 1, | ||
title: 'μ°κ²©μ΄λ±νκ΅', | ||
content: 'μ°κ²©μ΄λ±νκ΅μ μμ£Ό λ΄λ¦¬μλ λ° μ§μ μ΄λμ΄λμ λλ€.', | ||
}, | ||
{ | ||
id: 2, | ||
title: 'κ²½λ‘λΉ', | ||
content: | ||
'μμ§κ³ λ±νκ΅ νμ κ΅μ°¨λ‘ μ€λ₯Έμͺ½ μμ κΈΈλ‘ μ§μ νμ¬ μ°νμ ν λ§μ§λ§μ μμΉν λ¨λ 건물μ λλ€!', | ||
}, | ||
{ | ||
id: 3, | ||
title: 'κ²½λ‘λΉ', | ||
content: | ||
'μμ§κ³ λ±νκ΅ νμ κ΅μ°¨λ‘ μ€λ₯Έμͺ½ μμ κΈΈλ‘ μ§μ νμ¬ μ°νμ ν λ§μ§λ§μ μμΉν λ¨λ 건물μ λλ€!', | ||
}, | ||
{ | ||
id: 4, | ||
title: 'κ²½λ‘λΉ', | ||
content: | ||
'μμ§κ³ λ±νκ΅ νμ κ΅μ°¨λ‘ μ€λ₯Έμͺ½ μμ κΈΈλ‘ μ§μ νμ¬ μ°νμ ν λ§μ§λ§μ μμΉν λ¨λ 건물μ λλ€!', | ||
}, | ||
{ | ||
id: 5, | ||
title: 'κ²½λ‘λΉ', | ||
content: | ||
'μμ§κ³ λ±νκ΅ νμ κ΅μ°¨λ‘ μ€λ₯Έμͺ½ μμ κΈΈλ‘ μ§μ νμ¬ μ°νμ ν λ§μ§λ§μ μμΉν λ¨λ 건물μ λλ€!', | ||
}, | ||
{ | ||
id: 6, | ||
title: 'κ²½λ‘λΉ', | ||
content: | ||
'μμ§κ³ λ±νκ΅ νμ κ΅μ°¨λ‘ μ€λ₯Έμͺ½ μμ κΈΈλ‘ μ§μ νμ¬ μ°νμ ν λ§μ§λ§μ μμΉν λ¨λ 건물μ λλ€!', | ||
}, | ||
]; | ||
|
||
export default GUIDELINE_DATA; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,105 @@ | ||
import GuideLineInfo from './components/guide-info-box'; | ||
import GUIDELINE_DATA from './data'; | ||
import { Box, Flex, Input, Text, Textarea } from '@chakra-ui/react'; | ||
import styled from '@emotion/styled'; | ||
|
||
const GuideLinePage = () => { | ||
const guidelines = GUIDELINE_DATA; | ||
|
||
return ( | ||
<Container> | ||
<Flex | ||
h='100%' | ||
flexDir='column' | ||
alignItems='center' | ||
flexGrow={1} | ||
overflowY='auto' | ||
> | ||
{guidelines.map((guideline) => ( | ||
<GuideLineInfo key={guideline.id} guideline={guideline} /> | ||
))} | ||
</Flex> | ||
<RegisterBox> | ||
<InputBox> | ||
<InputText>κ°μ΄λλΌμΈ μ λͺ©</InputText> | ||
<GuideLineInput /> | ||
</InputBox> | ||
<InputBox> | ||
<InputText>κ°μ΄λλΌμΈ λ΄μ©</InputText> | ||
<GuideLineContentInput /> | ||
</InputBox> | ||
<StyledButton>κ°μ΄λλΌμΈ μΆκ°νκΈ°</StyledButton> | ||
</RegisterBox> | ||
</Container> | ||
); | ||
}; | ||
|
||
export default GuideLinePage; | ||
|
||
const Container = styled(Box)` | ||
position: relative; | ||
height: 100vh; | ||
`; | ||
const RegisterBox = styled(Box)` | ||
position: absolute; | ||
bottom: 0; | ||
width: 100%; | ||
height: 350px; | ||
left: 50%; | ||
transform: translateX(-50%); | ||
max-width: 370px; | ||
display: flex; | ||
flex-direction: column; | ||
align-items: center; | ||
background-color: var(--color-white-gray); | ||
border: 1px solid var(--color-white-gray); | ||
border-radius: 15px; | ||
`; | ||
|
||
const InputBox = styled(Box)` | ||
width: 300px; | ||
height: 80px; | ||
display: flex; | ||
flex-direction: column; | ||
margin: 0.5rem; | ||
`; | ||
|
||
const GuideLineContentInput = styled(Textarea)` | ||
background-color: var(--color-white); | ||
border: none; | ||
font-size: 1rem; | ||
`; | ||
|
||
const InputText = styled(Text)` | ||
font-size: 18px; | ||
font-weight: bold; | ||
margin-bottom: 0.5rem; | ||
`; | ||
|
||
const GuideLineInput = styled(Input)` | ||
background-color: var(--color-white); | ||
border: none; | ||
font-size: 1rem; | ||
`; | ||
|
||
const StyledButton = styled.button` | ||
position: absolute; | ||
bottom: 1rem; | ||
width: 300px; | ||
height: 40px; | ||
background-color: #c69090; | ||
color: #ffffff; | ||
border: none; | ||
border-radius: 5px; | ||
cursor: pointer; | ||
font-size: 16px; | ||
transition: background-color 0.3s; | ||
&:hover { | ||
background-color: #a67070; | ||
} | ||
&:active { | ||
transform: scale(0.98); | ||
} | ||
`; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
import ProfileBox from './components/profile-box'; | ||
import PointBox from '@/shared/components/features/mypage/point-box'; | ||
import UseDetailBox from '@/shared/components/features/mypage/use-detail'; | ||
import { Box } from '@chakra-ui/react'; | ||
import styled from '@emotion/styled'; | ||
|
||
const GuardMyPage = () => { | ||
return ( | ||
<MyPageLayout> | ||
<ProfileBox /> | ||
<PointBox /> | ||
<UseDetailBox /> | ||
</MyPageLayout> | ||
); | ||
}; | ||
|
||
export default GuardMyPage; | ||
|
||
const MyPageLayout = styled(Box)` | ||
display: flex; | ||
flex-direction: column; | ||
align-items: center; | ||
`; |
Oops, something went wrong.