feat: nickname page UI #46

Author: novice0840

frontend/src/pages/NicknamePage/NicknamePage.styled.ts

@@ -0,0 +1,39 @@
+import { css } from '@emotion/react';
+
+import { Theme } from '@/styles/Theme';
+
+export const profile = css`
+  width: 8rem;
+  height: 8rem;
+  margin-top: 4rem;
+
+  background-color: ${Theme.color.gray300};
+  border-radius: 50%;
+`;
+
+export const nickname = css`
+  width: 26.8rem;
+  margin: 2rem 0;
+
+  font-weight: 600;
+  font-size: 1.6rem;
+`;
+
+export const nicknameInputWrapper = css`
+  display: flex;
+  align-items: center;
+  width: 26.8rem;
+  height: 4.9rem;
+  padding: 0 1rem;
+
+  background-color: ${Theme.color.gray200};
+  border-radius: 1rem;
+`;
+
+export const nicknameInput = css`
+  width: 100%;
+  border: 0;
+
+  background-color: ${Theme.color.gray200};
+  outline: none;
+`;

frontend/src/pages/NicknamePage/NicknamePage.tsx

@@ -1,7 +1,17 @@
-import React from 'react';
+import { profile, nickname, nicknameInputWrapper, nicknameInput } from './NicknamePage.styled';
+
+import Content from '@/components/layout/Content/Content';
 
 const NicknamePage = () => {
-  return <div>this is Nick name page</div>;
+  return (
+    <Content>
+      <div css={profile}></div>
+      <div css={nickname}>닉네임</div>
+      <div css={nicknameInputWrapper}>
+        <input css={nicknameInput} type="text" placeholder="닉네임을 입력해 주세요" />
+      </div>
+    </Content>
+  );
 };
 
 export default NicknamePage;