[🎨 Style] Signup page style components #2

FRONTENDSCHOOL5 · Jun 10, 2023 · 4ade0db · 4ade0db
1 parent f4e489b
commit 4ade0db
Show file tree

Hide file tree

Showing 8 changed files with 103 additions and 68 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5501
+}
diff --git a/src/App.js b/src/App.js
@@ -6,7 +6,7 @@ function App() {
   return (
     <div>
       <GlobalStyle />
-      <Signup />
+      {/* <Signup /> */}
       <SetProfile />
     </div>
   );

diff --git a/src/assets/img/L-button(clay).svg → src/assets/img/L-button-clay.svg b/src/assets/img/L-button(clay).svg → src/assets/img/L-button-clay.svg
diff --git a/src/components/Common/Button.jsx b/src/components/Common/Button.jsx
@@ -11,11 +11,14 @@ export const ButtonStyle = styled.button`
   background-color: ${(props) => props.bg};
   border-radius: ${(props) => props.br};
   border: ${(props) => props.border};
+  background-img: ${(props) => props.bgimg};
 `;
 
 // //예시
-{/* <ButtonDiv>
+{
+  /* <ButtonDiv>
   <ButtonStyle type='button' bg='black' width='432px' height='56px' br='4px'>
     다음
   </ButtonStyle>
-</ButtonDiv>; */}
+</ButtonDiv>; */
+}
diff --git a/src/components/Common/Input.jsx b/src/components/Common/Input.jsx
@@ -1,13 +1,13 @@
-import React from 'react'
-import styled from 'styled-components';
+import React from "react";
+import styled from "styled-components";
 
 export default function Input() {
   return (
     <>
       <InputDiv>
         <Label>이메일</Label>
         <InputBox
-          width="432px"
+          width="322px"
           height="48px"
           padding="15px"
           onChange={() => {}}
@@ -17,15 +17,15 @@ export default function Input() {
       <InputDiv>
         <Label>비밀번호</Label>
         <InputBox
-          width="432px"
+          width="322px"
           height="48px"
           onChange={() => {}}
           type="password"
           placeholder="비밀번호를 입력하세요"
         />
       </InputDiv>
     </>
-  )
+  );
 }
 
 export const InputDiv = styled.div`
@@ -37,20 +37,21 @@ export const Label = styled.label`
   font-family: var(--font--Bold);
   margin-bottom: 9px;
   font-weight: 700;
+  color: #767676;
+  font-size: 12px;
 `;
 
 export const InputBox = styled.input`
   border: none;
   border-bottom: 1px solid #dbdbdb;
-  width: ${ props => props.width};
-  height: ${ props => props.height};
-  padding: 15px;
+  width: ${(props) => props.width};
+  height: ${(props) => props.height};
   box-sizing: border-box;
-  border-radius: 4px;
+  // border-radius: 4px;
   &::placeholder {
     color: #dbdbdb;
   }
   &:focus {
-    border-color: black;
+    border-color: #036635;
   }
-`;
+`;
diff --git a/src/components/Common/UploadProfile.jsx b/src/components/Common/UploadProfile.jsx
@@ -1,7 +1,7 @@
-import React, { useRef, useState } from 'react';
-import BasicProfile from '../../assets/img/basic-profile-img.svg';
-import UploadBtnImg from '../../assets/img/img-upload-button.svg';
-import styled from 'styled-components';
+import React, { useRef, useState } from "react";
+import BasicProfile from "../../assets/img/basic-profile-img.svg";
+import UploadBtnImg from "../../assets/img/img-upload-button.svg";
+import styled from "styled-components";
 
 export default function UploadProfile() {
   const fileInputRef = useRef(null);
@@ -26,13 +26,13 @@ export default function UploadProfile() {
 
   return (
     <UploadProfileWrap>
-      <img src={previewImage} alt='' />
-      <ImgUploadBtn type='button' onClick={handleImageUpload}>
-        <img src={UploadBtnImg} alt='' />
+      <img src={previewImage} alt="" />
+      <ImgUploadBtn type="button" onClick={handleImageUpload}>
+        <img src={UploadBtnImg} alt="" />
         <input
-          type='file'
+          type="file"
           ref={fileInputRef}
-          style={{ display: 'none' }}
+          style={{ display: "none" }}
           onChange={handleImageChange}
         />
       </ImgUploadBtn>
@@ -45,7 +45,7 @@ const UploadProfileWrap = styled.div`
   width: 110px;
   height: 110px;
   overflow: hidden;
-
+  margin: auto;
   img {
     width: 100%;
     height: 100%;

diff --git a/src/pages/Signup/SetProfile.jsx b/src/pages/Signup/SetProfile.jsx
@@ -2,21 +2,23 @@ import React from "react";
 import styled from "styled-components";
 import { ArrowLeftNavigation } from "../../components/Common/TopNav";
 import { ButtonStyle } from "../../components/Common/Button";
-import UploadProfile from "../../components/Common/UploadProfile"
-
+import UploadProfile from "../../components/Common/UploadProfile";
+import ClayImg from "../../assets/img/L-button-clay.svg";
 
 export default function SetProfile() {
   return (
-    <div>
+    <SignupDiv>
       <ArrowLeftNavigation />
-      <h1>프로필 설정</h1>
-      <p>나중에 언제든지 변경할 수 있습니다.</p>
+      <Heading>프로필 설정</Heading>
+      <Wrap>
+        <P>나중에 언제든지 변경할 수 있습니다.</P>
 
-    <UploadProfile />
-    <SetProfileDiv>
+        <UploadProfile />
+      </Wrap>
+      <SetProfileDiv>
         <SetProfileLabel>사용자 이름</SetProfileLabel>
         <SetProfileInputBox
-          width="432px"
+          width="322px"
           height="48px"
           padding="15px"
           onChange={() => {}}
@@ -26,7 +28,7 @@ export default function SetProfile() {
       <SetProfileDiv>
         <SetProfileLabel>계정 ID</SetProfileLabel>
         <SetProfileInputBox
-          width="432px"
+          width="322px"
           height="48px"
           padding="15px"
           onChange={() => {}}
@@ -36,52 +38,78 @@ export default function SetProfile() {
       <SetProfileDiv>
         <SetProfileLabel>소개</SetProfileLabel>
         <SetProfileInputBox
-          width="432px"
+          width="322px"
           height="48px"
           padding="15px"
           onChange={() => {}}
           placeholder="자신과 판매할 상품에 대해 소개해 주세요!"
         />
       </SetProfileDiv>
 
-      <ButtonStyle
-        type="button"
-        bg="black"
-        width="432px"
-        height="56px"
-        br="4px"
-      >
-        만들만들 시작하기
-      </ButtonStyle>
-    </div>
+      <ButtonImg />
+    </SignupDiv>
   );
 }
 
+export const SignupDiv = styled.div`
+  margin: auto;
+  padding: auto;
+  max-width: 390px;
+`;
+
 export const TypeDiv = styled.div`
-display:flex;
-`
+  display: flex;
+`;
 export const SetProfileDiv = styled.div`
-display: flex;
-flex-direction: column;
-margin-top: 28px;
-`
+  display: flex;
+  flex-direction: column;
+  margin-top: 28px;
+`;
 export const SetProfileLabel = styled.label`
   font-family: var(--font--Bold);
   margin-bottom: 9px;
-  font-weight: 700;
+  font-weight: normal;
+  font-size: 12px;
 `;
 export const SetProfileInputBox = styled.input`
-border: none;
-border-bottom: 1px solid #dbdbdb;
-width: ${ props => props.width};
-height: ${ props => props.height};
-padding: 15px;
-box-sizing: border-box;
-border-radius: 4px;
-&::placeholder {
-  color: #dbdbdb;
-}
-&:focus {
-  border-color: black;
-}
-`;
+  border: none;
+  border-bottom: 1px solid #dbdbdb;
+  width: ${(props) => props.width};
+  height: ${(props) => props.height};
+  box-sizing: border-box;
+  // border-radius: 4px;
+  &::placeholder {
+    color: #dbdbdb;
+  }
+  &:focus {
+    border-color: #036635;
+  }
+`;
+
+export const ButtonImg = styled.button`
+  display: block;
+  width: 322px;
+  height: 70px;
+  margin-top: 17px;
+  background: url(${ClayImg}) center / contain no-repeat;
+`;
+
+export const Heading = styled.h1`
+  font-size: 24px;
+  position: absolute;
+  top: 13px;
+  left: 50%;
+  transform: translate(-50%);
+`;
+
+export const P = styled.p`
+  font-size: 12px;
+  color: #767676;
+  margin-top: 10px;
+  margin-bottom: 10px;
+`;
+export const Wrap = styled.div`
+  width: 322px;
+  margin: auto;
+  text-align: center;
+`;
diff --git a/src/styles/GlobalStyles.jsx b/src/styles/GlobalStyles.jsx
@@ -1,6 +1,6 @@
-import { createGlobalStyle } from 'styled-components';
-import reset from 'styled-reset';
-import './font.css';
+import { createGlobalStyle } from "styled-components";
+import reset from "styled-reset";
+import "./font.css";
 
 const GlobalStyle = createGlobalStyle`