From 31951e9c6a47aa84102c3bd173358e5578dc15b4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=ED=83=9C=ED=98=84?= <143389711+taehyun00@users.noreply.github.com> Date: Sat, 14 Jun 2025 13:41:16 +0900 Subject: [PATCH 1/2] =?UTF-8?q?feat=20::=20=ED=9A=8C=EC=9B=90=EC=A0=95?= =?UTF-8?q?=EB=B3=B4=20=EA=B4=80=EB=A6=AC=20=ED=8F=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/client/next.config.ts | 3 + apps/client/src/app/_document.tsx | 43 +++++++++++ apps/client/src/app/component/sidebar.tsx | 66 ++++++++++------- apps/client/src/app/images/user.svg | 3 + apps/client/src/app/mypage/page.tsx | 45 ++++++++++++ apps/client/src/app/style/Mypage.ts | 89 +++++++++++++++++++++++ apps/client/src/app/style/sidebar.ts | 29 ++++++++ 7 files changed, 252 insertions(+), 26 deletions(-) create mode 100644 apps/client/src/app/_document.tsx create mode 100644 apps/client/src/app/images/user.svg create mode 100644 apps/client/src/app/mypage/page.tsx create mode 100644 apps/client/src/app/style/Mypage.ts 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/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..09ed6e1 --- /dev/null +++ b/apps/client/src/app/mypage/page.tsx @@ -0,0 +1,45 @@ +"use client"; + +import React from "react"; +import Image from "next/image"; +import user from "@/app/images/user.svg"; +import { + Container, + Title, + ContentBox, + ProfileImage, + InfoContainer, + Label, + Input, + Button, + Form +} from "../style/Mypage" + +export default function Mypage() { + return ( + + 마이페이지 + + +
+ +
+ + +
+
+ + +
+
+ + +
+ + + +
+ + + ); +} diff --git a/apps/client/src/app/style/Mypage.ts b/apps/client/src/app/style/Mypage.ts new file mode 100644 index 0000000..8023534 --- /dev/null +++ b/apps/client/src/app/style/Mypage.ts @@ -0,0 +1,89 @@ +"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; + + margin-left : 3vh; + + margin-top : -10vh; +`; + +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 Button = styled.button` + + width: 110px; + height: 36px; + background-color: #0064ff; + color: white; + font-weight: 600; + border: none; + border-radius: 6px; + cursor: pointer; + + &:hover { + background-color: #0050d7; + } +`; + + +export const Form = styled.div` + display : flex; + flex-direction : column; + gap : 10vh; + +`; \ 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 From ae180e1a630c840b1bc414fbf5c690476a590d58 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=ED=83=9C=ED=98=84?= <143389711+taehyun00@users.noreply.github.com> Date: Thu, 19 Jun 2025 17:40:46 +0900 Subject: [PATCH 2/2] =?UTF-8?q?refact=20::=20=EB=A7=88=EC=9D=B4=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/client/src/app/images/arrow3.svg | 3 + apps/client/src/app/mypage/page.tsx | 58 ++++++++++++------- apps/client/src/app/style/Mypage.ts | 80 +++++++++++++++++++++++---- 3 files changed, 110 insertions(+), 31 deletions(-) create mode 100644 apps/client/src/app/images/arrow3.svg 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/mypage/page.tsx b/apps/client/src/app/mypage/page.tsx index 09ed6e1..e0a6fc7 100644 --- a/apps/client/src/app/mypage/page.tsx +++ b/apps/client/src/app/mypage/page.tsx @@ -1,43 +1,59 @@ "use client"; import React from "react"; -import Image from "next/image"; -import user from "@/app/images/user.svg"; +import arrow from "@/app/images/arrow3.svg"; import { Container, Title, ContentBox, - ProfileImage, InfoContainer, - Label, - Input, + NameForm, + Name, + Form, Button, - Form + 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 index 8023534..422110f 100644 --- a/apps/client/src/app/style/Mypage.ts +++ b/apps/client/src/app/style/Mypage.ts @@ -23,10 +23,9 @@ export const ContentBox = styled.div` justify-content: start; gap: 10vh; width: 100vh; - - margin-left : 3vh; - - margin-top : -10vh; + height : 30vh; + background-color : #FFFFFF; + border-radius: 2vh; `; export const ProfileImage = styled(Image)` @@ -64,26 +63,87 @@ export const Input = styled.input` } `; +export const StyledArrowImage = styled(Image)` + transition: filter 0.1s ease; +`; + export const Button = styled.button` - width: 110px; - height: 36px; - background-color: #0064ff; - color: white; + width: 43vh; + height: 12vh; + background-color: #FFFFFF; + font-weight: 600; - border: none; + border: 2px solid #8B8B8B; border-radius: 6px; cursor: pointer; &:hover { - background-color: #0050d7; + 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