diff --git a/apps/client/next.config.ts b/apps/client/next.config.ts index e9ffa30..cffe9f0 100644 --- a/apps/client/next.config.ts +++ b/apps/client/next.config.ts @@ -2,6 +2,9 @@ import type { NextConfig } from "next"; const nextConfig: NextConfig = { /* config options here */ + compiler: { + styledComponents: true + } }; export default nextConfig; diff --git a/apps/client/src/app/_document.tsx b/apps/client/src/app/_document.tsx new file mode 100644 index 0000000..b5e97c1 --- /dev/null +++ b/apps/client/src/app/_document.tsx @@ -0,0 +1,43 @@ +// _document.tsx +import Document from 'next/document'; +import { ServerStyleSheet } from 'styled-components'; +import { Html, Head, Main, NextScript } from 'next/document'; + +export default class MyDocument extends Document { + static async getInitialProps(ctx: any) { + const sheet = new ServerStyleSheet(); + const originalRenderPage = ctx.renderPage; + + try { + ctx.renderPage = () => + originalRenderPage({ + enhanceApp: (App: any) => (props: any) => sheet.collectStyles(), + }); + + const initialProps = await Document.getInitialProps(ctx); + return { + ...initialProps, + styles: ( + <> + {initialProps.styles} + {sheet.getStyleElement()} + + ), + }; + } finally { + sheet.seal(); + } + } + + render() { + return ( + + + +
+ + + + ); + } +} diff --git a/apps/client/src/app/component/sidebar.tsx b/apps/client/src/app/component/sidebar.tsx index 159d4f9..b193f58 100644 --- a/apps/client/src/app/component/sidebar.tsx +++ b/apps/client/src/app/component/sidebar.tsx @@ -1,10 +1,12 @@ "use client"; -import { useState } from "react"; +import { useState ,useEffect } from "react"; import Image from "next/image"; import Link from "next/link"; import logo from "@/app/images/logo.svg"; import bar from "@/app/images/bar.svg"; +import user from "@/app/images/user.svg"; + import { SidebarContainer, Header, @@ -16,11 +18,38 @@ import { Title, SubLink, SubText, + Userdiv, + UserLink } from "../style/sidebar"; +const VoteSection = ({ isOpen, toggle }: { isOpen: boolean; toggle: () => void }) => ( +
+ 투표 + {isOpen && ( +
+ 투표 하기 + 투표 만들기 +
+ )} +
+); + export default function Sidebar() { + + const [mounted, setMounted] = useState(false); + + useEffect(() => { + setMounted(true); + }, []); + const [rotated, setRotated] = useState(false); - const [voteClick, setVoteClick] = useState(false); + const [voteOpen, setVoteOpen] = useState(false); + + const toggleSidebar = () => setRotated((prev) => !prev); + const toggleVote = () => setVoteOpen((prev) => !prev); + const username = "플루토"; + + if (!mounted) return null; return ( @@ -28,38 +57,23 @@ export default function Sidebar() { - setRotated(!rotated)}> +
-
- setVoteClick(!voteClick)}> - 투표 - - {voteClick && ( -
- - 투표 하기 - - - 투표 만들기 - -
- )} -
- -
- 가이드 -
- -
- 상점 -
+ +
가이드
+
상점
 + + + 유저 +

{username}님

 + ); } diff --git a/apps/client/src/app/images/arrow3.svg b/apps/client/src/app/images/arrow3.svg new file mode 100644 index 0000000..e76682d --- /dev/null +++ b/apps/client/src/app/images/arrow3.svg @@ -0,0 +1,3 @@ + + + diff --git a/apps/client/src/app/images/user.svg b/apps/client/src/app/images/user.svg new file mode 100644 index 0000000..0ea2099 --- /dev/null +++ b/apps/client/src/app/images/user.svg @@ -0,0 +1,3 @@ + + + diff --git a/apps/client/src/app/mypage/page.tsx b/apps/client/src/app/mypage/page.tsx new file mode 100644 index 0000000..e0a6fc7 --- /dev/null +++ b/apps/client/src/app/mypage/page.tsx @@ -0,0 +1,61 @@ +"use client"; + +import React from "react"; +import arrow from "@/app/images/arrow3.svg"; +import { + Container, + Title, + ContentBox, + InfoContainer, + NameForm, + Name, + Form, + Button, + ButtonForm, + StyledArrowImage, + ButtonSection, + Buttonp, + ButtonSub, + ButtonContent +} from "../style/Mypage" + +const name = "1134박기주"; +const email = "24.013@bssm.hs.kr"; + +export default function Mypage() { + return ( + + 마이페이지 + +
+ + + {name} +

{email}

+ + + + + + +
+ + + ); +} diff --git a/apps/client/src/app/style/Mypage.ts b/apps/client/src/app/style/Mypage.ts new file mode 100644 index 0000000..422110f --- /dev/null +++ b/apps/client/src/app/style/Mypage.ts @@ -0,0 +1,149 @@ +"use client"; + +import styled from "styled-components"; +import Image from "next/image"; + +export const Container = styled.div` + height: 100vh; + padding: 3rem; + margin-left : 10vh; + +`; + +export const Title = styled.h1` + font-size: 5vh; + font-weight: 500; + margin-bottom: 5rem; +`; + +export const ContentBox = styled.div` + display: flex; + flex-direction: row; + align-items: start; + justify-content: start; + gap: 10vh; + width: 100vh; + height : 30vh; + background-color : #FFFFFF; + border-radius: 2vh; +`; + +export const ProfileImage = styled(Image)` + width: 15vh; + height: 15vh; + margin-top : 14vh; + +`; + +export const InfoContainer = styled.div` + display: flex; + flex-direction: column; + gap: 1.25rem; + margin-top : 12vh; +`; + +export const Label = styled.p` + font-size: 2vh; + font-weight: 400; + margin-bottom:2vh; +`; + +export const Input = styled.input` + width: 40vh; + height: 40px; + border-radius: 8px; + border: none; + padding: 0 1rem; + font-size: 0.95rem; + background-color: white; + + + &::placeholder { + color: #a0a0a0; + } +`; + +export const StyledArrowImage = styled(Image)` + transition: filter 0.1s ease; +`; + +export const Button = styled.button` + + width: 43vh; + height: 12vh; + background-color: #FFFFFF; + + font-weight: 600; + border: 2px solid #8B8B8B; + border-radius: 6px; + cursor: pointer; + + &:hover { + border: 2px solid #0050d7; + ${StyledArrowImage} { + filter: invert(22%) sepia(100%) saturate(5740%) hue-rotate(213deg) brightness(95%) contrast(99%); + + } +`; + + + + +export const Form = styled.div` + display : flex; + flex-direction : column; + gap : 10vh; + +`; + + +export const Name = styled.p` + font-size: 2.5vh; +`; + + +export const NameForm = styled.div` + display : flex; + justify-content : start; + align-items: end; + gap : 2vh; + margin-left : 6vh; + margin-top : -15vh; +`; + +export const ButtonForm = styled.div` + display : flex; + justify-content : start; + align-items: end; + gap : 2vh; + margin-left : 6vh; + margin-top : 0vh; +`; + +export const ButtonSection = styled.div` + display : flex; + justify-content : start; + align-items: start; + gap : 25vh; +`; + +export const Buttonp = styled.p` + font-size: 2vh; + font-weight: 400; + +`; + + +export const ButtonSub = styled.p` + font-size: 1.4vh; + font-weight: 400; +`; + + + +export const ButtonContent = styled.div` + display : flex; + flex-direction : column; + align-items : start; + gap : 3vh; +`; \ No newline at end of file diff --git a/apps/client/src/app/style/sidebar.ts b/apps/client/src/app/style/sidebar.ts index e6966e3..47f4d6e 100644 --- a/apps/client/src/app/style/sidebar.ts +++ b/apps/client/src/app/style/sidebar.ts @@ -81,3 +81,32 @@ export const SubText = styled.p` font-family: 'P_Regular'; font-size: 1.5vh; `; + + + +export const Userdiv = styled.div.withConfig({ + shouldForwardProp: filterBooleanProps(["visible"]), + })<{ visible: boolean }>` + display: ${({ visible }) => (visible ? "flex" : "none")}; + flex-direction: row; + align-items: center; + + gap: 1vh; + padding: 5vh; + + font-family: 'P_Regular'; + font-size: 1.8vh; + color : #737373; + + + `; + + + export const UserLink = styled(Link)` + text-decoration: none; + color: #737373; + + &:hover { + color: #0158DE; + } +`; \ No newline at end of file