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

[Release] v0.5.1 스터디 상세 & 관리 & 검색 & 신청 페이지 추가 및 디테일 추가
wanted-fork-fork · Nov 14, 2021 · fa674c2 · fa674c2
2 parents b128422 + 904c53d
commit fa674c2
Show file tree

Hide file tree

Showing 79 changed files with 2,215 additions and 355 deletions.
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
     "build-storybook": "build-storybook"
   },
   "dependencies": {
+    "@ant-design/icons": "4.7.0",
     "@netlify/plugin-nextjs": "3.9.2",
     "antd": "4.16.13",
     "axios": "0.24.0",

diff --git a/src/components/atoms/BottomSection.tsx b/src/components/atoms/BottomSection.tsx
@@ -12,7 +12,7 @@ export const BottomSection = styled.div<BottomProps>`
   height: ${({ height }) => height ?? "68px"};
   background: #fff;
   border-top: 1px solid ${theme.color.gray2};
-  z-index: 9999;
+  z-index: 5000;
   ${theme.window.tab} {
     width: ${windowSize.mobile};
     left: auto;

diff --git a/src/components/atoms/Button.tsx b/src/components/atoms/Button.tsx
@@ -9,7 +9,7 @@ export interface ButtonStyleProps extends BaseProps {
   filled?: boolean;
   width?: string;
   height?: string;
-  color?: "gray" | "primary" | "white" | string;
+  color?: "gray" | "primary" | "white" | "point" | string;
   shape?: "rounded" | "full-rounded";
   textAlign?: "left" | "center";
 }
@@ -53,6 +53,8 @@ export const Button = styled.button<ButtonStyleProps>`
         return Color.mainGradient;
       case "gray":
         return theme.color.gray2;
+      case "point":
+        return theme.color.point;
       default:
         return color;
     }
@@ -71,21 +73,27 @@ export const Button = styled.button<ButtonStyleProps>`
     return `1px solid ${theme.color.primary}`;
   }};
 
-  color: ${({ color, disabled, filled = true }) =>
-    color === "primary" && !disabled && filled ? "#fff" : theme.color.black};
+  color: ${({ color, disabled, filled = true }) => {
+    if ((color === "primary" || color === "point") && !disabled && filled)
+      return "#fff";
+    if (color === "gray" || disabled) return theme.color.gray4;
+    return theme.color.black;
+  }};
 
   width: ${({ width }) => width || "100%"};
 `;
 
 export const InputLikeButton = styled.button<InputLikeButtonStyleProps>`
+  height: auto;
   ${BaseButton};
   ${LightUnderline};
   background-color: transparent;
   font-size: ${FontSize.PrimaryDescription};
-  height: auto;
 
   width: 100%;
 
   color: ${({ selected = false }) =>
     selected ? theme.color.black : theme.color.gray4};
+
+  border-radius: 0;
 `;
diff --git a/src/components/atoms/Category.tsx b/src/components/atoms/Category.tsx
@@ -0,0 +1,19 @@
+import styled from "styled-components";
+import theme, { FontSize } from "@src/styles/theme";
+
+export const Category = styled.span`
+  font-size: ${FontSize.Small};
+  padding-top: 2px;
+
+  color: ${theme.color.black};
+  word-break: keep-all;
+
+  &:not(:last-child) {
+    ::after {
+      content: ",";
+      margin-right: 4px;
+    }
+  }
+`;
+
+export default { Category };
diff --git a/src/components/atoms/Divider.tsx b/src/components/atoms/Divider.tsx
@@ -3,12 +3,13 @@ import theme from "@src/styles/theme";
 
 interface DividerProps {
   my?: string;
+  mx?: string;
 }
 export const BoldDivider = styled.hr<DividerProps>`
   border: 4px solid ${theme.color.gray1};
-  margin: ${({ my = "0" }) => my} 0;
+  margin: ${({ my = "0" }) => my} ${({ mx = "0" }) => mx};
 `;
 export const LightDivider = styled.hr<DividerProps>`
   border: 0.5px solid ${theme.color.gray1};
-  margin: ${({ my = "0" }) => my} 0;
+  margin: ${({ my = "0" }) => my} ${({ mx = "0" }) => mx};
 `;
diff --git a/src/components/atoms/Input.tsx b/src/components/atoms/Input.tsx
@@ -47,4 +47,8 @@ export const UnderlineInput = styled.input<InputStyleProps>`
 export const LightUnderlineInput = styled.input<InputStyleProps>`
   ${LightUnderline};
   ${BaseInput};
+
+  &:disabled {
+    background-color: #fff;
+  }
 `;
diff --git a/src/components/atoms/Select.tsx b/src/components/atoms/Select.tsx
@@ -4,13 +4,20 @@ import styled from "styled-components";
 // style
 import { LightUnderline, Underline } from "@src/styles/common";
 import theme from "@src/styles/theme";
+import DownArrowIcon from "@src/components/icon/DownArrow.icon";
 
 export type SelectStyleProp = {
-  shape: "default" | "light";
+  shape: "default" | "light" | "rounded";
   selected: string | null;
 };
 
 const Select = styled.select<SelectStyleProp>`
+  -moz-appearance: none; /* Firefox */
+  -webkit-appearance: none; /* Safari and Chrome */
+  appearance: none;
+
+  position: relative;
+
   ${({ shape }) => {
     switch (shape) {
       case "default":
@@ -29,39 +36,74 @@ const Select = styled.select<SelectStyleProp>`
 
   &:focus {
     outline: none;
+    background-color: #fff;
   }
 
   color: ${({ selected }) =>
     selected ? theme.color.black : theme.color.gray4};
 
+  ${({ shape }) =>
+    shape === "rounded"
+      ? `
+      height: 58px;
+      padding: 0 15px;
+    border-radius: 100px;
+    border: 1px solid ${theme.color.primary};  
+  `
+      : ""}
+
   option {
     margin: 0;
     padding: 0;
+    &:disabled {
+      background-color: #fff;
+    }
+  }
+
+  &:disabled {
+    background-color: #fff;
   }
+  background-color: #fff;
 `;
 
 interface SelectProp<T> extends SelectHTMLAttributes<HTMLSelectElement> {
   selected?: string | null;
   list: T[];
   idKeyName: string;
   labelKeyName: string;
-  defaultText: string | null;
   onSelect: ReactEventHandler<HTMLSelectElement>;
-  shape?: "default" | "light";
+  shape?: "default" | "light" | "rounded";
+  iconPosition?: string;
 }
 SelectComponent.defaultProps = {
   shape: "default",
   selected: null,
+  iconPosition: "10px",
 };
+interface ArrowWrapperType {
+  iconPosition: string;
+}
+const ArrowWrapper = styled.div<ArrowWrapperType>`
+  position: absolute;
+  right: ${({ iconPosition }) => iconPosition};
+  top: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+`;
+const Wrapper = styled.div`
+  position: relative;
+`;
 function SelectComponent<T>({
   name,
   selected,
   list,
   idKeyName,
   labelKeyName,
   onSelect,
-  defaultText = "",
   shape,
+  iconPosition = "10px",
+  placeholder = "",
 }: SelectProp<T>) {
   const options = useMemo(() => {
     const disabledKeyName = "disabled";
@@ -78,19 +120,20 @@ function SelectComponent<T>({
   }, [list, idKeyName, labelKeyName]);
 
   return (
-    <Select
-      name={name}
-      selected={selected}
-      defaultValue={selected}
-      placeholder={defaultText}
-      onChange={onSelect}
-      shape={shape}
-    >
-      <option disabled hidden>
-        {defaultText}
-      </option>
-      {options}
-    </Select>
+    <Wrapper>
+      <Select
+        name={name}
+        selected={selected}
+        placeholder={placeholder}
+        onChange={onSelect}
+        shape={shape}
+      >
+        {options}
+      </Select>
+      <ArrowWrapper iconPosition={iconPosition}>
+        <DownArrowIcon color={theme.color.primary} />
+      </ArrowWrapper>
+    </Wrapper>
   );
 }
 

diff --git a/src/components/atoms/Textarea.tsx b/src/components/atoms/Textarea.tsx
@@ -0,0 +1,22 @@
+import styled from "styled-components";
+import theme from "@src/styles/theme";
+import { BaseProps, BaseStyleProps } from "@src/styles/common";
+
+export const Textarea = styled.textarea<BaseProps>`
+  ${BaseStyleProps};
+  width: 100%;
+  border-radius: 9px;
+  border: 1px solid ${theme.color.primary};
+  padding: 8px;
+
+  &:placeholder-shown {
+    border: 1px solid ${theme.color.gray3};
+  }
+
+  &:focus {
+    outline: none;
+    border: 1px solid ${theme.color.primary};
+  }
+`;
+
+export default { Textarea };
diff --git a/src/components/atoms/text/ErrorMessage.tsx b/src/components/atoms/text/ErrorMessage.tsx
@@ -6,5 +6,5 @@ export default {};
 export const ErrorMessage = styled.p<BaseProps>`
   ${BaseStyleProps};
   font-size: ${FontSize.PrimaryDescription};
-  color: ${theme.color.black};
+  color: ${theme.color.point};
 `;
diff --git a/src/components/icon/CakeV2.icon.tsx b/src/components/icon/CakeV2.icon.tsx
@@ -0,0 +1,94 @@
+function CakeV2Icon() {
+  return (
+    <svg
+      width="81"
+      height="55"
+      viewBox="0 0 81 55"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M81 39.2432C81 47.9455 62.8675 55 40.5 55C18.1325 55 0 47.9455 0 39.2432C0 30.541 18.1325 23.4865 40.5 23.4865C62.8675 23.4865 81 30.541 81 39.2432Z"
+        fill="#F2FDFF"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M77.1312 44.6331C79.0549 42.8636 79.9875 41.0412 79.9875 39.2432C79.9875 37.4453 79.0549 35.6228 77.1312 33.8534C75.2066 32.083 72.3658 30.4422 68.7702 29.0433C61.5853 26.248 51.5907 24.4973 40.5 24.4973C29.4094 24.4973 19.4147 26.248 12.2298 29.0433C8.6342 30.4422 5.79341 32.083 3.86876 33.8534C1.94508 35.6228 1.0125 37.4453 1.0125 39.2432C1.0125 41.0412 1.94508 42.8636 3.86876 44.6331C5.79341 46.4035 8.6342 48.0442 12.2298 49.4431C19.4147 52.2384 29.4094 53.9892 40.5 53.9892C51.5907 53.9892 61.5853 52.2384 68.7702 49.4431C72.3658 48.0442 75.2066 46.4035 77.1312 44.6331ZM40.5 55C62.8675 55 81 47.9455 81 39.2432C81 30.541 62.8675 23.4865 40.5 23.4865C18.1325 23.4865 0 30.541 0 39.2432C0 47.9455 18.1325 55 40.5 55Z"
+        fill="black"
+      />
+      <path
+        d="M72.6614 37.9054C72.6614 44.2268 58.2621 49.3513 40.4997 49.3513C22.7372 49.3513 8.33789 44.2268 8.33789 37.9054C8.33789 31.584 22.7372 26.4594 40.4997 26.4594C58.2621 26.4594 72.6614 31.584 72.6614 37.9054Z"
+        fill="#F2FDFF"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M69.4815 41.5878C70.9873 40.3207 71.6489 39.072 71.6489 37.9054C71.6489 36.7387 70.9873 35.4901 69.4815 34.223C67.9805 32.9601 65.7484 31.7772 62.9015 30.764C57.2166 28.7408 49.2964 27.4703 40.4997 27.4703C31.7029 27.4703 23.7827 28.7408 18.0978 30.764C15.2509 31.7772 13.0188 32.9601 11.5178 34.223C10.012 35.4901 9.35039 36.7387 9.35039 37.9054C9.35039 39.072 10.012 40.3207 11.5178 41.5878C13.0188 42.8507 15.2509 44.0336 18.0978 45.0468C23.7827 47.07 31.7029 48.3405 40.4997 48.3405C49.2964 48.3405 57.2166 47.07 62.9015 45.0468C65.7484 44.0336 67.9805 42.8507 69.4815 41.5878ZM40.4997 49.3513C58.2621 49.3513 72.6614 44.2268 72.6614 37.9054C72.6614 31.584 58.2621 26.4594 40.4997 26.4594C22.7372 26.4594 8.33789 31.584 8.33789 37.9054C8.33789 44.2268 22.7372 49.3513 40.4997 49.3513Z"
+        fill="black"
+      />
+      <path
+        d="M21.9229 23.1961L41.3875 3.83581C42.2241 3.00377 43.4113 2.63135 44.5324 2.98813C49.0807 4.43552 57.8891 8.57376 61.9317 13.9842V21.0585V28.3874V32.9005C61.9317 34.5563 60.8148 36.0004 59.2206 36.406L26.3929 44.758C24.1246 45.3351 21.9229 43.6085 21.9229 41.2525V38.3374V30.7795V23.1961Z"
+        fill="white"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M44.3825 3.34194C43.4868 3.06049 42.5068 3.34471 41.7918 4.04691L23.6032 21.9099C33.0216 19.7339 50.7505 15.6653 61.0882 13.3888C59.1065 11.07 56.2229 8.99033 53.2449 7.29232C49.9726 5.4265 46.6389 4.05093 44.3825 3.34194ZM61.5457 14.4749C50.6499 16.872 31.2514 21.3297 22.309 23.3988V29.7643L61.5457 20.3512V14.4749ZM61.5457 21.5432L22.309 30.9563V37.2961L61.5457 27.6613V21.5432ZM61.5457 28.8549L22.309 38.4897V40.9427C22.309 42.9143 24.1751 44.3592 26.0975 43.8762L59.248 35.5485C60.5991 35.2091 61.5457 34.0006 61.5457 32.615V28.8549ZM40.9728 3.22248C41.9473 2.26544 43.3651 1.80698 44.7337 2.23701C47.0703 2.97121 50.4806 4.38034 53.8247 6.28709C57.1609 8.18935 60.4837 10.6164 62.5941 13.4052L62.7111 13.5599V32.615C62.7111 34.5312 61.402 36.2026 59.5335 36.672L26.383 44.9997C23.7243 45.6676 21.1436 43.6693 21.1436 40.9427V22.6967L40.9728 3.22248Z"
+        fill="black"
+      />
+      <path
+        d="M21.9229 38.3859V30.821L61.9317 21.0085V28.3541L21.9229 38.3859Z"
+        fill="#FC1150"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M44.3825 3.34194C43.4868 3.06049 42.5068 3.34471 41.7918 4.04691L23.6032 21.9099C33.0216 19.7339 50.7505 15.6653 61.0882 13.3888C59.1065 11.07 56.2229 8.99033 53.2449 7.29232C49.9726 5.4265 46.6389 4.05093 44.3825 3.34194ZM61.5457 14.4749C50.6499 16.872 31.2514 21.3296 22.309 23.3988V29.7643L61.5457 20.3512V14.4749ZM61.5457 21.5432L22.309 30.9563V37.2961L61.5457 27.6613V21.5432ZM61.5457 28.8549L22.309 38.4897V40.9427C22.309 42.9143 24.1751 44.3592 26.0975 43.8762L59.248 35.5485C60.5991 35.2091 61.5457 34.0006 61.5457 32.615V28.8549ZM40.9728 3.22248C41.9473 2.26544 43.3651 1.80698 44.7337 2.23701C47.0703 2.97121 50.4806 4.38034 53.8247 6.28709C57.1609 8.18935 60.4837 10.6164 62.5941 13.4052L62.7111 13.5599V32.615C62.7111 34.5312 61.402 36.2026 59.5335 36.672L26.383 44.9997C23.7243 45.6676 21.1436 43.6693 21.1436 40.9427V22.6967L40.9728 3.22248Z"
+        fill="black"
+      />
+      <path
+        d="M53.098 9.14824C53.098 12.1203 50.5973 13.4869 47.5124 13.4869C44.4275 13.4869 41.9268 12.1203 41.9268 9.14824C41.9268 6.17622 44.4275 0 47.5124 0C50.5973 0 53.098 6.17622 53.098 9.14824Z"
+        fill="#FC1150"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M50.8585 11.5956C51.5928 11.0775 52.0589 10.306 52.0589 9.14824C52.0589 7.87101 51.4972 5.74762 50.5407 3.93497C50.0676 3.03826 49.5291 2.27895 48.9722 1.75775C48.4103 1.23186 47.9187 1.02758 47.5124 1.02758C47.1061 1.02758 46.6145 1.23186 46.0526 1.75775C45.4957 2.27895 44.9572 3.03826 44.4841 3.93497C43.5276 5.74762 42.9659 7.87101 42.9659 9.14824C42.9659 10.306 43.432 11.0775 44.1663 11.5956C44.9448 12.1449 46.1053 12.4594 47.5124 12.4594C48.9195 12.4594 50.08 12.1449 50.8585 11.5956ZM47.5124 13.4869C50.5973 13.4869 53.098 12.1203 53.098 9.14824C53.098 6.17622 50.5973 0 47.5124 0C44.4275 0 41.9268 6.17622 41.9268 9.14824C41.9268 12.1203 44.4275 13.4869 47.5124 13.4869Z"
+        fill="black"
+      />
+      <path
+        d="M46.1744 5.04969C46.1261 5.43725 45.9153 5.7301 45.7035 5.70379C45.4918 5.67747 45.3593 5.34195 45.4076 4.95438C45.4559 4.56681 45.6668 4.27396 45.8785 4.30028C46.0903 4.3266 46.2228 4.66212 46.1744 5.04969Z"
+        fill="#FFE871"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M46.4179 5.8321C46.2863 6.01494 46.0199 6.26145 45.6392 6.21414C45.2585 6.16683 45.0608 5.86264 44.9781 5.65315C44.8872 5.42306 44.863 5.15318 44.8957 4.89083C44.9284 4.62848 45.0182 4.37277 45.1628 4.17194C45.2944 3.9891 45.5609 3.74259 45.9415 3.7899C46.3222 3.83721 46.5199 4.14141 46.6026 4.35089C46.6935 4.58098 46.7177 4.85086 46.685 5.11321C46.6523 5.37556 46.5625 5.63127 46.4179 5.8321ZM45.7028 5.70378C45.9146 5.7301 46.1254 5.43724 46.1738 5.04968C46.2221 4.66211 46.0896 4.32659 45.8779 4.30027C45.6661 4.27395 45.4553 4.5668 45.4069 4.95437C45.3586 5.34194 45.4911 5.67746 45.7028 5.70378Z"
+        fill="black"
+      />
+      <path
+        d="M47.8998 6.92888C47.9273 7.31848 47.7771 7.64646 47.5642 7.66145C47.3514 7.67645 47.1565 7.37278 47.129 6.98319C47.1014 6.5936 47.2517 6.26561 47.4645 6.25062C47.6774 6.23562 47.8723 6.53929 47.8998 6.92888Z"
+        fill="#FFE871"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M48.291 7.64958C48.1972 7.85435 47.9835 8.14758 47.6009 8.17454C47.2182 8.20149 46.9654 7.94114 46.8437 7.75154C46.71 7.54329 46.6341 7.28316 46.6154 7.01944C46.5968 6.75572 46.6354 6.48752 46.7384 6.2626C46.8322 6.05782 47.046 5.7646 47.4286 5.73764C47.8112 5.71068 48.0641 5.97104 48.1858 6.16064C48.3194 6.36888 48.3954 6.62901 48.414 6.89273C48.4327 7.15645 48.394 7.42466 48.291 7.64958ZM47.5646 7.66151C47.7774 7.64651 47.9277 7.31853 47.9001 6.92894C47.8726 6.53934 47.6777 6.23568 47.4649 6.25067C47.252 6.26567 47.1018 6.59365 47.1293 6.98324C47.1568 7.37283 47.3517 7.6765 47.5646 7.66151Z"
+        fill="black"
+      />
+      <path
+        d="M45.672 8.99757C45.6671 9.3881 45.4901 9.70251 45.2768 9.69984C45.0634 9.69716 44.8944 9.37841 44.8993 8.98788C44.9042 8.59735 45.0812 8.28293 45.2945 8.28561C45.5079 8.28828 45.6769 8.60704 45.672 8.99757Z"
+        fill="#FFE871"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M46.0006 9.74803C45.8901 9.94433 45.6527 10.2189 45.2692 10.214C44.8856 10.2092 44.6552 9.92885 44.5497 9.72983C44.4338 9.51124 44.3797 9.24572 44.3831 8.98136C44.3864 8.71701 44.4472 8.45293 44.5685 8.23731C44.679 8.041 44.9163 7.76647 45.2999 7.77128C45.6835 7.77609 45.9138 8.05649 46.0193 8.2555C46.1352 8.47409 46.1893 8.73962 46.186 9.00397C46.1827 9.26833 46.1219 9.53241 46.0006 9.74803ZM45.2756 9.69978C45.489 9.70246 45.666 9.38804 45.6709 8.99751C45.6758 8.60698 45.5068 8.28823 45.2934 8.28555C45.0801 8.28287 44.9031 8.59729 44.8982 8.98782C44.8933 9.37835 45.0623 9.69711 45.2756 9.69978Z"
+        fill="black"
+      />
+    </svg>
+  );
+}
+
+export default CakeV2Icon;