pluto-bssm · x0gux · Jul 2, 2025 · Jun 14, 2025 · Jun 14, 2025 · Jun 19, 2025
diff --git 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
@@ -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(<App {...props} />),
+        });
+
+      const initialProps = await Document.getInitialProps(ctx);
+      return {
+        ...initialProps,
+        styles: (
+          <>
+            {initialProps.styles}
+            {sheet.getStyleElement()}
+          </>
+        ),
+      };
+    } finally {
+      sheet.seal();
+    }
+  }
+
+  render() {
+    return (
+      <Html>
+        <Head />
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    );
+  }
+}
diff --git 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,50 +18,62 @@ import {
   Title,
   SubLink,
   SubText,
+  Userdiv,
+  UserLink
 } from "../style/sidebar";
 
+const VoteSection = ({ isOpen, toggle }: { isOpen: boolean; toggle: () => void }) => (
+  <Section>
+    <Title active={isOpen} onClick={toggle}>투표</Title>
+    {isOpen && (
+      <div style={{ marginTop: "0.5vh", display: "flex", flexDirection: "column", gap: "1vh" }}>
+        <SubLink href="/vote"><SubText>투표 하기</SubText></SubLink>
+        <SubLink href="/votemake"><SubText>투표 만들기</SubText></SubLink>
+      </div>
+    )}
+  </Section>
+);
+
 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 (
     <SidebarContainer rotated={rotated}>
       <Header>
         <Link href="/">
           <LogoImage src={logo} alt="Logo" visible={rotated} />
         </Link>
-        <ToggleButton onClick={() => setRotated(!rotated)}>
+        <ToggleButton onClick={toggleSidebar}>
           <ToggleIcon src={bar} alt="Toggle" rotated={rotated} />
         </ToggleButton>
       </Header>
 
       <Content visible={rotated}>
         <div style={{ marginTop: "5vh", display: "flex", flexDirection: "column" }}>
-          <Section>
-            <Title active={voteClick} onClick={() => setVoteClick(!voteClick)}>
-              투표
-            </Title>
-            {voteClick && (
-              <div style={{ marginTop: "0.5vh", display: "flex", flexDirection: "column", gap: "1vh" }}>
-                <SubLink href="/vote">
-                  <SubText>투표 하기</SubText>
-                </SubLink>
-                <SubLink href="/votemake">
-                  <SubText>투표 만들기</SubText>
-                </SubLink>
-              </div>
-            )}
-          </Section>
-
-          <Section>
-            <Title>가이드</Title>
-          </Section>
-
-          <Section>
-            <Title>상점</Title>
-          </Section>
+          <VoteSection isOpen={voteOpen} toggle={toggleVote} />
+          <Section><Title>가이드</Title></Section>
+          <Section><Title>상점</Title></Section>
         </div>
       </Content>
+
+      <Userdiv visible={rotated}>
+        <Image src={user} alt="유저" width={24} height={24} />
+        <UserLink href="/mypage"><p>{username}님</p></UserLink>
+      </Userdiv>
     </SidebarContainer>
   );
 }
diff --git a/apps/client/src/app/images/arrow3.svg b/apps/client/src/app/images/arrow3.svg
diff --git a/apps/client/src/app/images/user.svg b/apps/client/src/app/images/user.svg
diff --git a/apps/client/src/app/mypage/page.tsx 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 (
+    <Container>
+      <Title>마이페이지</Title>
+      <ContentBox>
+        <Form>
+        <InfoContainer>
+          <NameForm>
+            <Name>{name}</Name>
+            <p>{email}</p>
+          </NameForm>
+          <ButtonForm>
+            <Button>
+              <ButtonContent>
+                <ButtonSection>
+                <Buttonp>내가쓴 투표조회</Buttonp>
+                <StyledArrowImage src={arrow} alt="checkimg"  width={30} height={30}/>
+                </ButtonSection>
+                <ButtonSub>내가 쓴 다양한 게시글을 볼 수 있어요!</ButtonSub>
+              </ButtonContent>
+            </Button>
+            <Button>
+            <ButtonContent>
+                <ButtonSection>
+                <Buttonp>신고조회</Buttonp>
+                <StyledArrowImage src={arrow} alt="checkimg"  width={30} height={30}/>
+                </ButtonSection>
+                <ButtonSub>내가 신고한 게시물들과 상태를 볼 수 있어요!</ButtonSub>
+              </ButtonContent>
+            </Button>
+          </ButtonForm>
+        </InfoContainer>
+        </Form>
+      </ContentBox>
+    </Container>
+  );
+}
diff --git a/apps/client/src/app/style/Mypage.ts 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;
+`;