Merge pull request #81 from oduck-team/feature/80

feat: 고객센터 페이지 퍼블리싱
oduck-team · Aug 28, 2023 · 43ee388 · 43ee388
2 parents 5af564e + 0d346be
commit 43ee388
Show file tree

Hide file tree

Showing 6 changed files with 348 additions and 56 deletions.
diff --git a/index.html b/index.html
@@ -1,13 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>오덕</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <div id="modal-root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
+  <title>오덕</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <div id="modal-root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+
+</html>
diff --git a/src/components/TextArea/index.tsx b/src/components/TextArea/index.tsx
@@ -0,0 +1,28 @@
+import { ComponentProps } from "react";
+
+import { Message, TextareaBox, TextareaContainer } from "./style";
+
+export interface TextareaProps extends ComponentProps<"textarea"> {
+  readonly warn?: boolean;
+  readonly message?: string;
+  readonly className?: string;
+}
+
+export interface TextareaBoxProps extends ComponentProps<"textarea"> {
+  readonly warn?: boolean;
+}
+
+export default function Textarea({
+  warn = false,
+  message = "",
+  style,
+  className = "",
+  ...rest
+}: TextareaProps) {
+  return (
+    <TextareaContainer style={style} className={className}>
+      <TextareaBox warn={warn} {...rest}></TextareaBox>
+      {warn && message !== "" && <Message>{message}</Message>}
+    </TextareaContainer>
+  );
+}
diff --git a/src/components/TextArea/style.ts b/src/components/TextArea/style.ts
@@ -0,0 +1,57 @@
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+
+import { TextareaBoxProps } from ".";
+
+export const TextareaBox = styled.textarea<TextareaBoxProps>`
+  ${({ warn = false, theme }) => css`
+    ${theme.typo["body-2-r"]};
+    display: flex;
+    width: 100%;
+    height: calc(100% - 19px);
+    padding: 0.5rem 1rem;
+    justify-content: space-between;
+    align-items: center;
+    flex-shrink: 0;
+    background-color: white;
+    color: ${theme.colors["neutral"]["50"]};
+    border-radius: 6px;
+    border: 1px solid
+      ${warn ? theme.colors["warn"]["40"] : theme.colors["neutral"]["30"]};
+    transition: all 0.2s;
+    resize: none;
+
+    &::placeholder {
+      color: ${theme.colors["neutral"]["50"]};
+    }
+
+    &:hover {
+      ${!warn && `border: 1px solid ${theme.colors["primary"]["60"]};`}
+    }
+
+    // pressed
+    &:focus {
+      color: ${theme.colors["neutral"]["90"]};
+      outline: none;
+      ${!warn && `border: 1px solid ${theme.colors["primary"]["60"]};`}
+      ${!warn && `box-shadow: 0px 0px 2px 0px rgba(17, 124, 255, 0.8);`}
+    }
+  `}
+`;
+
+export const Message = styled.div`
+  ${({ theme }) => css`
+    ${theme.typo["micro-r"]};
+    color: ${theme.colors["warn"]["40"]};
+    width: fit-content;
+    margin: 4px 0px 0px 8px;
+  `}
+  flex-shrink: 0;
+`;
+
+export const TextareaContainer = styled.div`
+  width: 328px;
+  height: 138px;
+  display: flex;
+  flex-direction: column;
+`;
diff --git a/src/components/TextInput/index.tsx b/src/components/TextInput/index.tsx
@@ -5,21 +5,27 @@ import { Message, TextInputBox, TextInputContainer } from "./style";
 export interface TextInputProps extends ComponentProps<"input"> {
   readonly warn?: boolean;
   readonly message?: string;
+  readonly className?: string;
+  readonly icon?: React.ReactNode;
 }
 
 export interface TextInputBoxProps extends ComponentProps<"input"> {
   readonly warn?: boolean;
+  readonly icon?: React.ReactNode;
 }
 
 export default function TextInput({
   warn = false,
   message = "",
   style,
+  icon,
+  className = "",
   ...rest
 }: TextInputProps) {
   return (
-    <TextInputContainer style={style}>
-      <TextInputBox warn={warn} {...rest}></TextInputBox>
+    <TextInputContainer style={style} className={className}>
+      {icon}
+      <TextInputBox warn={warn} icon {...rest}></TextInputBox>
       {warn && message !== "" && <Message>{message}</Message>}
     </TextInputContainer>
   );

diff --git a/src/components/TextInput/style.ts b/src/components/TextInput/style.ts
@@ -4,53 +4,64 @@ import styled from "@emotion/styled";
 import { TextInputBoxProps } from ".";
 
 export const TextInputBox = styled.input<TextInputBoxProps>`
-  ${({ warn = false, theme }) => {
-    return css`
-      ${theme.typo["body-2-r"]};
-      display: flex;
-      width: 328px;
-      height: 40px;
-      padding: 0px 1rem;
-      justify-content: space-between;
-      align-items: center;
-      flex-shrink: 0;
-      background-color: white;
+  ${({ warn = false, icon, theme }) => css`
+    ${theme.typo["body-2-r"]};
+    display: flex;
+    width: 100%;
+    height: 40px;
+    padding: ${icon ? `0 1rem 0 calc(1rem + 20px)` : `0 1rem`};
+
+    justify-content: space-between;
+    align-items: center;
+    flex-shrink: 0;
+    background-color: white;
+    color: ${theme.colors["neutral"]["50"]};
+    border-radius: 6px;
+    border: 1px solid
+      ${warn ? theme.colors["warn"]["40"] : theme.colors["neutral"]["30"]};
+    transition: all 0.2s;
+
+    &::placeholder {
       color: ${theme.colors["neutral"]["50"]};
-      border-radius: 6px;
-      border: 1px solid
-        ${warn ? theme.colors["warn"]["40"] : theme.colors["neutral"]["30"]};
-      transition: all 0.2s;
-
-      &::placeholder {
-        color: ${theme.colors["neutral"]["50"]};
-      }
-
-      &:hover {
-        ${!warn && `border: 1px solid ${theme.colors["primary"]["60"]};`}
-      }
-
-      // pressed
-      &:focus {
-        color: ${theme.colors["neutral"]["90"]};
-        outline: none;
-        ${!warn && `border: 1px solid ${theme.colors["primary"]["60"]};`}
-        ${!warn && `box-shadow: 0px 0px 2px 0px rgba(17, 124, 255, 0.8);`}
-      }
-    `;
-  }}
+    }
+
+    &:hover {
+      ${!warn && `border: 1px solid ${theme.colors["primary"]["60"]};`}
+    }
+
+    // pressed
+    &:focus {
+      color: ${theme.colors["neutral"]["90"]};
+      outline: none;
+      ${!warn && `border: 1px solid ${theme.colors["primary"]["60"]};`}
+      ${!warn && `box-shadow: 0px 0px 2px 0px rgba(17, 124, 255, 0.8);`}
+    }
+  `}
 `;
 
 export const Message = styled.div`
-  ${({ theme }) => {
-    return css`
-      ${theme.typo["micro-r"]};
-      color: ${theme.colors["warn"]["40"]};
-      width: fit-content;
-      margin: 4px 0px 0px 8px;
-    `;
-  }}
+  ${({ theme }) => css`
+    ${theme.typo["micro-r"]};
+    color: ${theme.colors["warn"]["40"]};
+    width: fit-content;
+    margin: 4px 0px 0px 8px;
+  `}
 `;
 
 export const TextInputContainer = styled.div`
-  width: fit-content;
+  width: 328px;
+  position: relative;
+  & > svg {
+    position: absolute;
+    top: calc(50% - 10px);
+    left: 10px;
+    color: ${({ theme }) => theme.colors["neutral"]["50"]};
+    transition: all 0.2s;
+  }
+
+  &:focus-within {
+    svg {
+      color: ${({ theme }) => theme.colors["primary"]["60"]};
+    }
+  }
 `;