[ISSUE-45] feat: 회원가입 페이지 input field 제외 UI 추가 완료 (#31)

src/app/(auth)/sign-up/components/SignUpInput.jsx

@@ -0,0 +1,92 @@
+'use client';
+
+import { FaLock, FaUserAlt } from 'react-icons/fa';
+import styled from 'styled-components';
+
+import { COLORS, TEXT_COLORS } from '../../../../constants/colors';
+import { FONTS } from '../../../../constants/font';
+
+const SignUpInput = ({
+    name,
+    value,
+    type = 'text',
+    placeholder = '',
+    onChange,
+    passwordVisible,
+    togglePasswordVisibility,
+}) => {
+    return (
+        <InputWrapper>
+            <IconWrapper>{type === 'id' ? <FaUserAlt /> : <FaLock />}</IconWrapper>
+            <Divider /> {/* 세로 줄 추가 */}
+            <StyledInput
+                type={type === 'password' && !passwordVisible ? 'password' : 'text'}
+                name={name}
+                value={value}
+                placeholder={placeholder}
+                onChange={onChange}
+            />
+            {type === 'password' && (
+                <ShowButton onClick={togglePasswordVisibility}>{passwordVisible ? 'Hide' : 'Show'}</ShowButton>
+            )}
+        </InputWrapper>
+    );
+};
+
+export default SignUpInput;
+
+const InputWrapper = styled.div`
+    width: 100%;
+    height: 3rem;
+    display: flex;
+    align-items: center;
+    background-color: ${COLORS.softMint};
+    border-radius: 0.5rem;
+    padding: 0.75rem;
+    position: relative;
+`;
+
+const StyledInput = styled.input`
+    flex-grow: 1;
+    background-color: ${COLORS.softMint};
+    border: none;
+    font-family: ${FONTS.PRETENDARD[400]};
+    font-size: 1rem;
+    color: ${TEXT_COLORS.default};
+
+    &::placeholder {
+        color: ${TEXT_COLORS.placeholder};
+    }
+
+    &:focus {
+        outline: none;
+        border: none;
+    }
+`;
+
+const IconWrapper = styled.div`
+    padding-right: 0.5rem;
+    color: ${COLORS.primary};
+`;
+
+const Divider = styled.div`
+    width: 0.0625rem; /* 1px */
+    height: 100%;
+    background-color: ${COLORS.mint}; /* 옅은 세로줄 색상 */
+    margin-right: 0.5rem; /* 세로 줄과 입력 필드 사이의 간격 */
+`;
+
+const ShowButton = styled.button`
+    background: none;
+    border: none;
+    color: ${COLORS.primary};
+    cursor: pointer;
+    padding: 0 0.5rem;
+    font-size: 0.875rem;
+    position: absolute;
+    right: 10px;
+
+    &:focus {
+        outline: none;
+    }
+`;

src/app/(auth)/sign-up/page.jsx

@@ -6,9 +6,10 @@ import styled from 'styled-components';
 
 import whitepawImg from '../../../assets/images/white-paw.png';
 import CustomButton from '../../../components/common/CustomButton';
-import { BACKGROUND_COLORS, BUTTON_COLORS, TEXT_COLORS } from '../../../constants/colors';
+import { BACKGROUND_COLORS, BUTTON_COLORS, COLORS, TEXT_COLORS } from '../../../constants/colors';
 import { FONTS } from '../../../constants/font';
 import { PADDING_HORIZONTAL, PADDING_VERTICAL } from '../../../constants/space';
+import SignUpInput from './components/SignUpInput';
 
 const SignUp = () => {
     return (
@@ -20,12 +21,20 @@ const SignUp = () => {
             <SignUpTitle>회원가입</SignUpTitle>
 
             <ContentContainer>
+                <InputFieldContainer>
+                    <SignUpInput />
+                    <SignUpInput />
+                    <SignUpInput />
+                </InputFieldContainer>
+
                 <SignUpButtonContainerColumn>
                     <CustomButton color={BUTTON_COLORS.secondary} text="회원가입 하기" route="/login" />
                 </SignUpButtonContainerColumn>
 
-                <AlreadyMember>이미 회원이신가요?</AlreadyMember>
-                <GoLogin>로그인 하기</GoLogin>
+                <BottomContainer>
+                    <AlreadyMember>이미 회원이신가요?</AlreadyMember>
+                    <GoLogin>로그인 하기</GoLogin>
+                </BottomContainer>
             </ContentContainer>
         </Container>
     );
@@ -57,28 +66,30 @@ const ContentContainer = styled.div`
     gap: 0.5rem;
 `;
 
+const InputFieldContainer = styled.div``;
+
 const SignUpButtonContainerColumn = styled.div`
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
     margin-top: 2rem;
 `;
 
+const BottomContainer = styled.div`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+`;
+
 const AlreadyMember = styled.div`
-    color: #1f5a6e;
-    font-family: 'Noto Sans KR';
+    color: ${COLORS.secondary};
+    font-family: ${FONTS.PRETENDARD[400]};
     font-size: 0.875rem;
-    font-style: normal;
-    font-weight: 400;
-    line-height: normal;
 `;
 
 const GoLogin = styled.div`
-    color: #1f5a6e;
-    font-family: 'Noto Sans KR';
+    color: ${COLORS.secondary};
+    font-family: ${FONTS.PRETENDARD[700]};
     font-size: 0.875rem;
-    font-style: normal;
-    font-weight: 700;
-    line-height: normal;
     text-decoration-line: underline;
 `;