diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx index 631bf1c..e4c46f4 100644 --- a/src/app/login/page.tsx +++ b/src/app/login/page.tsx @@ -3,7 +3,7 @@ import React from 'react'; import styled from 'styled-components'; import arrow from '@/assets/images/arrow.svg'; import Link from 'next/link'; -import Sign_button from '@/components/common/Sign_button'; +import Sign_button from '@/components/register/Sign_button'; export default async function page() { return ( diff --git a/src/app/main/page.tsx b/src/app/main/page.tsx index 5066d6f..cae39e5 100644 --- a/src/app/main/page.tsx +++ b/src/app/main/page.tsx @@ -3,7 +3,7 @@ import React from 'react'; import styled from 'styled-components'; import vote from '@/assets/images/vote.png'; import Link from 'next/link'; -import Sign_button from '@/components/common/Sign_button'; +import Sign_button from '@/components/register/Sign_button'; export default async function page() { return ( diff --git a/src/app/register/page.tsx b/src/app/register/page.tsx index b70a7c8..aa2a725 100644 --- a/src/app/register/page.tsx +++ b/src/app/register/page.tsx @@ -5,7 +5,7 @@ import styled, { css } from 'styled-components'; import arrow from '@/assets/images/arrow.svg'; import arrows from '@/assets/images/arrows.svg'; import Link from 'next/link'; -import Sign_button from '@/components/common/Sign_button'; +import Sign_button from '@/components/register/Sign_button'; export default async function page() { const [isOpen, setIsOpen] = useState(false); diff --git a/src/app/start/page.tsx b/src/app/start/page.tsx index 0085846..350c179 100644 --- a/src/app/start/page.tsx +++ b/src/app/start/page.tsx @@ -3,7 +3,7 @@ import React from 'react'; import styled from 'styled-components'; import vote from '@/assets/images/vote.png'; import Link from 'next/link'; -import Sign_button from '@/components/common/Sign_button'; +import Sign_button from '@/components/register/Sign_button'; export default async function page() { return ( diff --git a/src/app/vote/demo/page.tsx b/src/app/vote/demo/page.tsx index 33b2e87..384041e 100644 --- a/src/app/vote/demo/page.tsx +++ b/src/app/vote/demo/page.tsx @@ -1,32 +1,15 @@ 'use client'; import React from 'react'; import styled from 'styled-components'; -import Title from '@/components/common/title/Title'; -import Line from '@/components/common/line/Line'; -import Check from '@/components/common/check/Check'; -import Footer from '@/components/common/footer/Footer'; -import arrow from '@/assets/images/arrow.svg'; -import Link from 'next/link'; -import Result from '@/components/common/result/Result'; - +import Line from '@/components/common/Line'; +import Header from '@/components/common/Header'; +import SelectMenuResult from '@/components/vote/SelectMenuResult'; function page() { return ( - - - - - - </Head> + <Header content = "데모데이 투표" href = "/vote" /> <Line /> - - <VoteForm> - <VoteName>{'데모데이 투표'}</VoteName> - <div className="button"> - <Check contnet="/vote"/> - <Result /> - </div> - </VoteForm> + <SelectMenuResult content = "데모데이 투표" href = "" /> </Container> ); } @@ -41,33 +24,4 @@ const Container = styled.div` .vote { margin-top: 30px; } -`; -const Head = styled.div` - display: flex; - align-items: center; -`; -const Arrow = styled.img` - width: 20px; - margin-top: 30px; -`; -const VoteForm = styled.div` - width: 300px; - height: 150px; - background-color: #f5f5f5; - border: 3px solid #000000; - display: flex; - align-items: center; - margin-top: 110px; - .button { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - } -`; -const VoteName = styled.div` - white-space: pre-line; - font-size: 19px; - font-weight: bold; - margin-left: 40px; -`; +`; \ No newline at end of file diff --git a/src/app/vote/layout.tsx b/src/app/vote/layout.tsx index 44ecb46..1dd4084 100644 --- a/src/app/vote/layout.tsx +++ b/src/app/vote/layout.tsx @@ -1,5 +1,5 @@ import '../globals.css'; -import Footer from '@/components/common/footer/Footer'; +import Footer from '@/components/common/Footer'; export default function VoteLayout({ children, }: { diff --git a/src/app/vote/page.tsx b/src/app/vote/page.tsx index 2efb2bc..91bda84 100644 --- a/src/app/vote/page.tsx +++ b/src/app/vote/page.tsx @@ -1,24 +1,17 @@ 'use client'; import React from 'react'; import styled from 'styled-components'; -import Title from '@/components/common/title/Title'; -import Line from '@/components/common/line/Line'; -import Check from '@/components/common/check/Check'; -import Footer from '@/components/common/footer/Footer'; +import Title from '@/components/common/Title'; +import Line from '@/components/common/Line'; +import SelectMenu from '@/components/vote/SelectMenu'; function vote() { return ( <Container> <Title content="파트장 / 데모데이 투표" /> <Line /> - <VoteForm> - <VoteName>{'파트장 투표'}</VoteName> - <Check content="/vote/part" /> - </VoteForm> - <VoteForm> - <VoteName>{'데모데이 투표'}</VoteName> - <Check content="/vote/demo" /> - </VoteForm> + <SelectMenu content = "파트장 투표" href = "/vote/part" /> + <SelectMenu content = "데모데이 투표" href = "/vote/demo" /> </Container> ); } @@ -30,18 +23,3 @@ const Container = styled.div` flex-direction: column; align-items: center; `; -const VoteForm = styled.div` - width: 300px; - height: 90px; - background-color: #f5f5f5; - border: 3px solid #000000; - display: flex; - align-items: center; - justify-content: space-between; - margin-top: 70px; -`; -const VoteName = styled.div` - font-size: 19px; - font-weight: bold; - margin-left: 40px; -`; diff --git a/src/app/vote/part/page.tsx b/src/app/vote/part/page.tsx index 62252ce..f06b799 100644 --- a/src/app/vote/part/page.tsx +++ b/src/app/vote/part/page.tsx @@ -1,40 +1,19 @@ 'use client'; import React from 'react'; import styled from 'styled-components'; -import Title from '@/components/common/title/Title'; -import Line from '@/components/common/line/Line'; -import Check from '@/components/common/check/Check'; -import Footer from '@/components/common/footer/Footer'; -import arrow from '@/assets/images/arrow.svg'; -import Link from 'next/link'; -import Result from '@/components/common/result/Result'; +import Line from '@/components/common/Line'; +import Header from '@/components/common/Header'; +import SelectMenuResult from '@/components/vote/SelectMenuResult'; function page() { return ( <Container> - <Head> - <Link href={'/vote'}> - <Arrow src={arrow.src} /> - </Link> - <Title content="파트장 투표" /> - </Head> + <Header content = "파트장 투표" href = "/vote"/> <Line /> - <div className="vote"> - <VoteForm> - <VoteName>{'FRONT-END \n 파트장 투표'}</VoteName> - <div className="button"> - <Check content="" /> - <Result /> - </div> - </VoteForm> - <VoteForm> - <VoteName>{'BACK-END \n 파트장 투표'}</VoteName> - <div className="button"> - <Check content="" /> - <Result /> - </div> - </VoteForm> - </div> + <SelectMenuResultWrapper> + <SelectMenuResult content = "FRONT-END br 파트장 투표" href = "" /> + <SelectMenuResult content = "BACK-END br 파트장 투표" href = "" /> + </SelectMenuResultWrapper> </Container> ); } @@ -45,38 +24,7 @@ const Container = styled.div` display: flex; flex-direction: column; align-items: center; - - .vote { - margin-top: 30px; - } -`; -const Head = styled.div` - display: flex; - align-items: center; -`; -const Arrow = styled.img` - width: 20px; - margin-top: 30px; -`; -const VoteForm = styled.div` - width: 300px; - height: 150px; - background-color: #f5f5f5; - border: 3px solid #000000; - display: flex; - align-items: center; - justify-content: space-between; - margin-top: 30px; - .button { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - } -`; -const VoteName = styled.div` - white-space: pre-line; - font-size: 19px; - font-weight: bold; - margin-left: 40px; `; + +const SelectMenuResultWrapper = styled.div` +` diff --git a/src/components/common/footer/Footer.tsx b/src/components/common/Footer.tsx similarity index 100% rename from src/components/common/footer/Footer.tsx rename to src/components/common/Footer.tsx diff --git a/src/components/common/Header.tsx b/src/components/common/Header.tsx new file mode 100644 index 0000000..23ffc82 --- /dev/null +++ b/src/components/common/Header.tsx @@ -0,0 +1,42 @@ +'use client'; +import React from 'react'; +import styled from 'styled-components'; +import Title from '@/components/common/Title'; +import arrow from '@/assets/images/arrow.svg'; +import Link from 'next/link'; + +function Header({ content, href }: { content: string , href : string }) { + return ( + <> + <Head> + <LinkWrapper> + <Link href={href}> + <Arrow src={arrow.src} /> + </Link> + </LinkWrapper> + <TitleWrapper> + <Title content={content} /> + </TitleWrapper> + </Head> + </> + ) +} + +export default Header; +const Head = styled.div` + display: flex; + align-items: center; + justify-content : space-between; + width : 100%; +`; +const Arrow = styled.img` + width: 20px; + margin-top: 30px; +`; +const LinkWrapper = styled.div` + padding-left : 30px; +` +const TitleWrapper = styled.div` + margin : 0 auto; + padding-right : 50px; +` \ No newline at end of file diff --git a/src/components/common/line/Line.tsx b/src/components/common/Line.tsx similarity index 100% rename from src/components/common/line/Line.tsx rename to src/components/common/Line.tsx diff --git a/src/components/common/title/Title.tsx b/src/components/common/Title.tsx similarity index 100% rename from src/components/common/title/Title.tsx rename to src/components/common/Title.tsx diff --git a/src/components/common/Sign_button.tsx b/src/components/register/Sign_button.tsx similarity index 100% rename from src/components/common/Sign_button.tsx rename to src/components/register/Sign_button.tsx diff --git a/src/components/common/check/Check.tsx b/src/components/vote/Check.tsx similarity index 100% rename from src/components/common/check/Check.tsx rename to src/components/vote/Check.tsx diff --git a/src/components/common/result/Result.tsx b/src/components/vote/Result.tsx similarity index 100% rename from src/components/common/result/Result.tsx rename to src/components/vote/Result.tsx diff --git a/src/components/vote/SelectMenu.tsx b/src/components/vote/SelectMenu.tsx new file mode 100644 index 0000000..1b80ce1 --- /dev/null +++ b/src/components/vote/SelectMenu.tsx @@ -0,0 +1,32 @@ +'use client'; +import React from 'react'; +import styled from 'styled-components'; +import Check from '@/components/vote/Check'; + +function SelectMenu({ content,href }: {content : string, href : string}) { + return ( + <> + <VoteForm> + <VoteName>{content}</VoteName> + <Check content={href} /> + </VoteForm> + </> + ); +} + +export default SelectMenu; +const VoteForm = styled.div` + width: 300px; + height: 90px; + background-color: #f5f5f5; + border: 3px solid #000000; + display: flex; + align-items: center; + justify-content: space-between; + margin-top: 70px; +`; +const VoteName = styled.div` + font-size: 19px; + font-weight: bold; + margin-left: 40px; +`; diff --git a/src/components/vote/SelectMenuResult.tsx b/src/components/vote/SelectMenuResult.tsx new file mode 100644 index 0000000..63b1b87 --- /dev/null +++ b/src/components/vote/SelectMenuResult.tsx @@ -0,0 +1,52 @@ +'use client'; +import React from 'react'; +import styled from 'styled-components'; +import Check from '@/components/vote/Check'; +import Result from '@/components/vote/Result'; + +function SelectMenuResult({ content,href }: {content : string, href : string}) { + const lines = content.split('br'); + return ( + <> + <VoteForm> + <VoteName> + {lines.map((line, index) => ( + <React.Fragment key={index}> + {line} + {index !== lines.length - 1 && <br />} + </React.Fragment> + ))} + </VoteName> + <CheckWrapper> + <Check content={href} /> + <Result /> + </CheckWrapper> + </VoteForm> + </> + ); +} + +export default SelectMenuResult; +const VoteForm = styled.div` + width: 300px; + height: 90px; + background-color: #f5f5f5; + border: 3px solid #000000; + display: flex; + align-items: center; + justify-content: space-between; + margin-top: 70px; +`; +const VoteName = styled.div` + font-size: 19px; + font-weight: bold; + margin-left: 40px; + white-space: pre-line; +`; +const CheckWrapper = styled.div` + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + +` \ No newline at end of file