Merge pull request #54 from wanted-fork-fork/develop

[Release] v0.3.1 스터디 생성 페이지
wanted-fork-fork · Nov 12, 2021 · 3ca77bf · 3ca77bf
2 parents 093409f + d313334
commit 3ca77bf
Show file tree

Hide file tree

Showing 35 changed files with 731 additions and 34 deletions.
diff --git a/src/components/atoms/Button.tsx b/src/components/atoms/Button.tsx
@@ -1,21 +1,25 @@
 import styled, { css } from "styled-components";
-import { BaseProps, BaseStyleProps } from "@src/styles/common";
-import theme, { Color } from "@src/styles/theme";
+import { BaseProps, BaseStyleProps, LightUnderline } from "@src/styles/common";
+import theme, { Color, FontSize } from "@src/styles/theme";
 
 export interface ButtonStyleProps extends BaseProps {
   mb?: string;
+  mt?: string;
   disabled?: boolean;
   filled?: boolean;
   width?: string;
   height?: string;
   color: "gray" | "primary" | "white";
 }
 
+export interface InputLikeButtonStyleProps extends ButtonStyleProps {
+  selected?: boolean;
+}
+
 const BaseButton = css<ButtonStyleProps>`
   ${BaseStyleProps};
 
   border: none;
-  border-radius: 12px;
   height: ${({ height }) => height || "58px"};
   text-align: center;
   cursor: pointer;
@@ -25,6 +29,8 @@ const BaseButton = css<ButtonStyleProps>`
 export const Button = styled.button<ButtonStyleProps>`
   ${BaseButton};
 
+  border-radius: 12px;
+
   background: ${({ color, disabled, filled = true }) => {
     if (disabled) return theme.color.gray2;
     if (!filled) return "#fff";
@@ -56,3 +62,16 @@ export const Button = styled.button<ButtonStyleProps>`
 
   width: ${({ width }) => width || "100%"};
 `;
+
+export const InputLikeButton = styled.button<InputLikeButtonStyleProps>`
+  ${BaseButton};
+  ${LightUnderline};
+  background-color: transparent;
+  font-size: ${FontSize.PrimaryDescription};
+  height: auto;
+
+  width: 100%;
+
+  color: ${({ selected = false }) =>
+    selected ? theme.color.black : theme.color.gray4};
+`;
diff --git a/src/components/atoms/DatePicker.tsx b/src/components/atoms/DatePicker.tsx
@@ -0,0 +1,8 @@
+import { Dayjs } from "dayjs";
+import dayjsGenerateConfig from "rc-picker/lib/generate/dayjs";
+import generatePicker from "antd/lib/date-picker/generatePicker";
+import "antd/lib/date-picker/style/index";
+
+const DatePicker = generatePicker<Dayjs>(dayjsGenerateConfig);
+
+export default DatePicker;
diff --git a/src/components/atoms/Input.tsx b/src/components/atoms/Input.tsx
@@ -1,7 +1,12 @@
 import styled, { css } from "styled-components";
 
 // styles
-import { BaseProps, BaseStyleProps, Underline } from "@src/styles/common";
+import {
+  BaseProps,
+  BaseStyleProps,
+  LightUnderline,
+  Underline,
+} from "@src/styles/common";
 import theme from "@src/styles/theme";
 
 export interface InputStyleProps extends BaseProps {
@@ -38,3 +43,8 @@ export const UnderlineInput = styled.input<InputStyleProps>`
     color: ${theme.color.gray5};
   }
 `;
+
+export const LightUnderlineInput = styled.input<InputStyleProps>`
+  ${LightUnderline};
+  ${BaseInput};
+`;
diff --git a/src/components/atoms/Select.tsx b/src/components/atoms/Select.tsx
@@ -1,51 +1,92 @@
-import { ReactEventHandler, useMemo } from "react";
+import { ReactEventHandler, SelectHTMLAttributes, useMemo } from "react";
 import styled from "styled-components";
 
 // style
-import { Underline } from "@src/styles/common";
+import { LightUnderline, Underline } from "@src/styles/common";
+import theme from "@src/styles/theme";
 
-const Select = styled.select`
-  ${Underline};
-  width: 100%;
+export type SelectStyleProp = {
+  shape: "default" | "light";
+  selected: string | null;
+};
+
+const Select = styled.select<SelectStyleProp>`
+  ${({ shape }) => {
+    switch (shape) {
+      case "default":
+        return Underline;
+      case "light":
+        return LightUnderline;
+      default:
+        return Underline;
+    }
+  }};
 
+  ${({ shape }) => (shape === "light" ? "padding-left: 6px;" : "")};
+
+  width: 100%;
   cursor: pointer;
 
   &:focus {
     outline: none;
   }
+
+  color: ${({ selected }) =>
+    selected ? theme.color.black : theme.color.gray4};
+
+  option {
+    margin: 0;
+    padding: 0;
+  }
 `;
 
-type SelectProp<T> = {
-  selected: string;
+interface SelectProp<T> extends SelectHTMLAttributes<HTMLSelectElement> {
+  selected?: string | null;
   list: T[];
   idKeyName: string;
   labelKeyName: string;
-  defaultText: string;
+  defaultText: string | null;
   onSelect: ReactEventHandler<HTMLSelectElement>;
+  shape?: "default" | "light";
+}
+SelectComponent.defaultProps = {
+  shape: "default",
+  selected: null,
 };
 function SelectComponent<T>({
-  selected = "",
+  name,
+  selected,
   list,
   idKeyName,
   labelKeyName,
   onSelect,
   defaultText = "",
+  shape,
 }: SelectProp<T>) {
   const options = useMemo(() => {
+    const disabledKeyName = "disabled";
     const optionList = list.map((x) => ({
       key: x[idKeyName],
       label: x[labelKeyName],
+      disabled: x[disabledKeyName],
     }));
     return optionList.map((x) => (
-      <option key={x.key} value={x.key}>
+      <option key={x.key} value={x.key} disabled={x.disabled}>
         {x.label}
       </option>
     ));
   }, [list, idKeyName, labelKeyName]);
 
   return (
-    <Select defaultValue={selected} onChange={onSelect}>
-      <option disabled value="">
+    <Select
+      name={name}
+      selected={selected}
+      defaultValue={selected}
+      placeholder={defaultText}
+      onChange={onSelect}
+      shape={shape}
+    >
+      <option disabled hidden>
         {defaultText}
       </option>
       {options}

diff --git a/src/components/icon/Calendar.icon.tsx b/src/components/icon/Calendar.icon.tsx
@@ -0,0 +1,21 @@
+function CalendarIcon({ color = "#222" }) {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect x="3.5" y="5.5" width="17" height="13" rx="1.5" stroke={color} />
+      <path
+        d="M3.5 7C3.5 6.17157 4.17157 5.5 5 5.5H19C19.8284 5.5 20.5 6.17157 20.5 7V9.5H3.5V7Z"
+        stroke={color}
+      />
+      <path d="M8 4V8" stroke={color} strokeLinecap="round" />
+      <path d="M16 4V8" stroke={color} strokeLinecap="round" />
+    </svg>
+  );
+}
+
+export default CalendarIcon;
diff --git a/src/components/icon/Close.icon.tsx b/src/components/icon/Close.icon.tsx
@@ -0,0 +1,26 @@
+function CloseIcon() {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M16.8117 17.0877L6.91217 7.18817L7.85498 6.24536L17.7545 16.1449L16.8117 17.0877Z"
+        fill="#333333"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M17.7539 7.18833L7.85443 17.0878L6.91162 16.145L16.8111 6.24552L17.7539 7.18833Z"
+        fill="#333333"
+      />
+    </svg>
+  );
+}
+
+export default CloseIcon;
diff --git a/src/components/icon/Pin.icon.tsx b/src/components/icon/Pin.icon.tsx
@@ -0,0 +1,26 @@
+function PinIcon() {
+  return (
+    <svg
+      width="32"
+      height="32"
+      viewBox="0 0 32 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M19.4471 18.5679C20.6228 15.8725 21.3336 13.2709 21.3336 11.7946C21.3336 8.6613 18.8909 6.22236 16.0003 6.22236C13.1097 6.22236 10.6669 8.6613 10.6669 11.7946C10.6669 13.2709 11.3777 15.8725 12.5535 18.5679C13.6063 20.9816 14.8829 23.1281 16.0003 24.346C17.1176 23.1281 18.3942 20.9816 19.4471 18.5679ZM16.8312 26.0313C19.7786 23.3013 23.1114 15.4999 23.1114 11.7946C23.1114 7.73528 19.9276 4.44458 16.0003 4.44458C12.0729 4.44458 8.88916 7.73528 8.88916 11.7946C8.88916 15.4999 12.222 23.3013 15.1693 26.0313C15.6446 26.4714 16.356 26.4714 16.8312 26.0313Z"
+        fill="#333333"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M16.0001 14.2224C17.4729 14.2224 18.6668 13.0285 18.6668 11.5558C18.6668 10.083 17.4729 8.88911 16.0001 8.88911C14.5273 8.88911 13.3334 10.083 13.3334 11.5558C13.3334 13.0285 14.5273 14.2224 16.0001 14.2224ZM16.0001 16.0002C18.4547 16.0002 20.4446 14.0104 20.4446 11.5558C20.4446 9.10117 18.4547 7.11133 16.0001 7.11133C13.5455 7.11133 11.5557 9.10117 11.5557 11.5558C11.5557 14.0104 13.5455 16.0002 16.0001 16.0002Z"
+        fill="#333333"
+      />
+    </svg>
+  );
+}
+
+export default PinIcon;
diff --git a/...omponents/molcules/AppTitle.component.tsx → ...mponents/molecules/AppTitle.component.tsx b/...omponents/molcules/AppTitle.component.tsx → ...mponents/molecules/AppTitle.component.tsx
diff --git a/.../molcules/AutoCompleteInput.component.tsx → ...molecules/AutoCompleteInput.component.tsx b/.../molcules/AutoCompleteInput.component.tsx → ...molecules/AutoCompleteInput.component.tsx
@@ -4,11 +4,16 @@ import { SelectEventHandler } from "rc-menu/es/interface";
 import styled from "styled-components";
 
 // components
-import { UnderlineInput } from "@src/components/atoms/Input";
+import {
+  LightUnderlineInput,
+  UnderlineInput,
+} from "@src/components/atoms/Input";
 
 interface AutoCompleteInputProps<T> {
   list: T[];
   inputValue: string;
+  shape?: string;
+  fontSize?: "default" | "large" | "small";
   selected: string;
   onChange: ChangeEventHandler<HTMLInputElement>;
   onSelect: SelectEventHandler;
@@ -22,10 +27,16 @@ const Wrapper = styled.div`
     width: 100%;
   }
 `;
+AutoCompleteInputComponent.defaultProps = {
+  shape: "default",
+  fontSize: "default",
+};
 
 function AutoCompleteInputComponent<T>({
   list,
   inputValue,
+  shape = "default",
+  fontSize,
   selected,
   onChange,
   onSelect,
@@ -78,14 +89,42 @@ function AutoCompleteInputComponent<T>({
     [options, selected, onSelect, inputValue],
   );
 
+  const input = useMemo(() => {
+    switch (shape) {
+      case "default":
+        return (
+          <UnderlineInput
+            value={inputValue}
+            fontSize={fontSize}
+            onChange={onChange}
+            placeholder={placeholder}
+          />
+        );
+      case "light":
+        return (
+          <LightUnderlineInput
+            value={inputValue}
+            onChange={onChange}
+            fontSize={fontSize}
+            placeholder={placeholder}
+          />
+        );
+      default:
+        return (
+          <UnderlineInput
+            value={inputValue}
+            onChange={onChange}
+            fontSize={fontSize}
+            placeholder={placeholder}
+          />
+        );
+    }
+  }, [shape, inputValue, fontSize, onChange, placeholder]);
+
   return (
     <Wrapper>
       <Dropdown overlay={menu} trigger={["click"]}>
-        <UnderlineInput
-          value={inputValue}
-          onChange={onChange}
-          placeholder={placeholder}
-        />
+        {input}
       </Dropdown>
     </Wrapper>
   );

diff --git a/src/components/molecules/AutocompleteCategory.component.tsx b/src/components/molecules/AutocompleteCategory.component.tsx
@@ -0,0 +1,45 @@
+import AutoCompleteInputComponent from "@src/components/molecules/AutoCompleteInput.component";
+import { useStores } from "@src/store/root.store";
+import { observer } from "mobx-react";
+import useInput from "@src/hooks/useInput.hook";
+import { useCallback, useEffect } from "react";
+
+const AutocompleteCategoryComponent = observer(
+  ({ selected, setSelected, placeholder }) => {
+    const { categoryStore } = useStores();
+
+    useEffect(() => {
+      categoryStore.getCategoryList();
+    }, [categoryStore]);
+
+    const { value, handleChange, setValue } = useInput("");
+    const handleSelect = useCallback(
+      (e) => {
+        const id = e.key;
+        const category = categoryStore.categoryList.find(
+          (x) => x.id.toString() === id,
+        );
+        setValue(category?.name || "");
+        setSelected(id);
+      },
+      [categoryStore.categoryList, setValue, setSelected],
+    );
+
+    return (
+      <AutoCompleteInputComponent
+        shape="light"
+        fontSize="small"
+        list={categoryStore.categoryList}
+        labelKeyName="name"
+        valueKeyName="id"
+        placeholder={placeholder}
+        inputValue={value}
+        selected={selected}
+        onChange={handleChange}
+        onSelect={handleSelect}
+      />
+    );
+  },
+);
+
+export default AutocompleteCategoryComponent;
diff --git a/...omponents/molcules/Category.component.tsx → ...mponents/molecules/Category.component.tsx b/...omponents/molcules/Category.component.tsx → ...mponents/molecules/Category.component.tsx
diff --git a/...ts/molcules/InputWithSuffix.component.tsx → ...s/molecules/InputWithSuffix.component.tsx b/...ts/molcules/InputWithSuffix.component.tsx → ...s/molecules/InputWithSuffix.component.tsx