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

[Release] v0.5.3 디테일 추가
wanted-fork-fork · Nov 17, 2021 · 79c9957 · 79c9957
2 parents 5791004 + 0ba596d
commit 79c9957
Show file tree

Hide file tree

Showing 44 changed files with 1,254 additions and 126 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -23,6 +23,7 @@
     "next-plugin-antd-less": "1.5.2",
     "react": "17.0.2",
     "react-dom": "17.0.2",
+    "react-image-gallery": "1.2.7",
     "styled-components": "5.3.3"
   },
   "devDependencies": {

diff --git a/src/components/atoms/Textarea.tsx b/src/components/atoms/Textarea.tsx
@@ -8,6 +8,7 @@ export const Textarea = styled.textarea<BaseProps>`
   border-radius: 9px;
   border: 1px solid ${theme.color.primary};
   padding: 8px;
+  margin-bottom: 0;
 
   &:placeholder-shown {
     border: 1px solid ${theme.color.gray3};

diff --git a/src/components/icon/Coin.icon.tsx b/src/components/icon/Coin.icon.tsx
@@ -0,0 +1,99 @@
+function CoinIcon() {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle cx="12" cy="12" r="12" fill="#FBE889" />
+      <g filter="url(#filter0_i_326_3547)">
+        <path
+          d="M22.4001 12.0001C22.4001 17.7439 17.7439 22.4001 12.0001 22.4001C6.25634 22.4001 1.6001 17.7439 1.6001 12.0001C1.6001 6.25634 6.25634 1.6001 12.0001 1.6001C17.7439 1.6001 22.4001 6.25634 22.4001 12.0001Z"
+          fill="#F7D467"
+        />
+      </g>
+      <g filter="url(#filter1_d_326_3547)">
+        <path
+          d="M16 13.4194C15.8861 14.5161 15.4793 15.3871 14.7796 16.0323C14.0839 16.6774 13.1971 17 12.119 17C10.8579 17 9.85507 16.5548 9.1106 15.6645C8.3702 14.7742 8 13.5699 8 12.0516C8 10.5032 8.3702 9.27527 9.1106 8.36774C9.85507 7.45591 10.8579 7 12.119 7C13.1848 7 14.0676 7.30538 14.7674 7.91613C15.4671 8.52258 15.878 9.34624 16 10.3871H14.1205C14.0595 9.87527 13.85 9.46882 13.492 9.16774C13.1381 8.86667 12.6865 8.71613 12.1373 8.71613C11.4416 8.71613 10.8965 9.01075 10.5019 9.6C10.1073 10.1849 9.90999 10.9978 9.90999 12.0387C9.90999 13.0538 10.1053 13.8495 10.4958 14.4258C10.8904 14.9978 11.4376 15.2839 12.1373 15.2839C12.6865 15.2839 13.1381 15.1161 13.492 14.7806C13.85 14.4452 14.0595 13.9914 14.1205 13.4194H16Z"
+          fill="#FBE889"
+        />
+      </g>
+      <defs>
+        <filter
+          id="filter0_i_326_3547"
+          x="1.6001"
+          y="1.6001"
+          width="21.7998"
+          height="21.7998"
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="BackgroundImageFix"
+            result="shape"
+          />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset dx="1" dy="1" />
+          <feGaussianBlur stdDeviation="1" />
+          <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+          <feColorMatrix
+            type="matrix"
+            values="0 0 0 0 0.952941 0 0 0 0 0.72549 0 0 0 0 0.262745 0 0 0 1 0"
+          />
+          <feBlend
+            mode="normal"
+            in2="shape"
+            result="effect1_innerShadow_326_3547"
+          />
+        </filter>
+        <filter
+          id="filter1_d_326_3547"
+          x="7"
+          y="6"
+          width="12"
+          height="14"
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset dx="1" dy="1" />
+          <feGaussianBlur stdDeviation="1" />
+          <feComposite in2="hardAlpha" operator="out" />
+          <feColorMatrix
+            type="matrix"
+            values="0 0 0 0 0.94902 0 0 0 0 0.698039 0 0 0 0 0.243137 0 0 0 0.25 0"
+          />
+          <feBlend
+            mode="normal"
+            in2="BackgroundImageFix"
+            result="effect1_dropShadow_326_3547"
+          />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="effect1_dropShadow_326_3547"
+            result="shape"
+          />
+        </filter>
+      </defs>
+    </svg>
+  );
+}
+
+export default CoinIcon;
diff --git a/src/components/icon/ColoredCamera.icon.tsx b/src/components/icon/ColoredCamera.icon.tsx
@@ -0,0 +1,32 @@
+function ColoredCameraIcon() {
+  return (
+    <svg
+      width="36"
+      height="36"
+      viewBox="0 0 36 36"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M28 13H8L8 25H28V13ZM8 11C6.89543 11 6 11.8954 6 13V25C6 26.1046 6.89543 27 8 27H28C29.1046 27 30 26.1046 30 25V13C30 11.8954 29.1046 11 28 11H8Z"
+        fill="#FC1150"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M15 8C14.4477 8 14 8.44772 14 9V11C14 11.5523 14.4477 12 15 12H21C21.5523 12 22 11.5523 22 11V9C22 8.44772 21.5523 8 21 8H15Z"
+        fill="#FC1150"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M18 22C19.6569 22 21 20.6569 21 19C21 17.3431 19.6569 16 18 16C16.3431 16 15 17.3431 15 19C15 20.6569 16.3431 22 18 22ZM18 24C20.7614 24 23 21.7614 23 19C23 16.2386 20.7614 14 18 14C15.2386 14 13 16.2386 13 19C13 21.7614 15.2386 24 18 24Z"
+        fill="#FC1150"
+      />
+    </svg>
+  );
+}
+
+export default ColoredCameraIcon;
diff --git a/src/components/icon/ForkRate.icon.tsx b/src/components/icon/ForkRate.icon.tsx
@@ -0,0 +1,24 @@
+function ForkRateIcon() {
+  return (
+    <svg
+      width="14"
+      height="34"
+      viewBox="0 0 14 34"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M13 31.7395C13 32.5384 12.3524 33.186 11.5534 33.186C10.7545 33.186 10.1069 32.5384 10.1069 31.7395L10.1069 28.1228L10.1067 28.1228L10.1067 27.7611C10.1067 27.3616 9.78285 27.0378 9.38339 27.0378C8.9891 27.0378 8.6685 27.3533 8.66028 27.7456L8.66028 31.7395C8.66028 32.5384 8.01263 33.186 7.21372 33.186C6.41481 33.186 5.76716 32.5384 5.76716 31.7395L5.76716 27.739C5.75548 27.3497 5.43627 27.0378 5.04421 27.0378C4.64476 27.0378 4.32094 27.3616 4.32094 27.7611L4.32094 28.1228L4.32056 28.1228L4.32056 31.7395C4.32056 32.5384 3.67291 33.186 2.874 33.186C2.07509 33.186 1.42744 32.5384 1.42744 31.7395L1.42744 27.0382C1.42744 27.0325 1.42747 27.0269 1.42754 27.0212L1.42754 25.2297C1.42754 22.8013 2.92357 20.7222 5.0443 19.8639C5.04379 19.8445 5.04353 19.825 5.04353 19.8054L5.04353 3.17002C5.04353 1.97165 6.015 1.00018 7.21337 1.00018C8.41173 1.00018 9.3832 1.97165 9.3832 3.17002L9.3832 19.8054C9.3832 19.8249 9.38295 19.8443 9.38244 19.8636C11.5036 20.7217 13 22.801 13 25.2297L13 27.0382L13 28.1228L13 31.7395Z"
+        fill="white"
+      />
+      <path
+        d="M10.1069 28.1228L10.6069 28.1228L10.6069 27.6228L10.1069 27.6228L10.1069 28.1228ZM10.1067 28.1228L9.60667 28.1228L9.60667 28.6228L10.1067 28.6228L10.1067 28.1228ZM8.66028 27.7456L8.16028 27.7352L8.16028 27.7456L8.66028 27.7456ZM5.76716 31.7395L5.26716 31.7395L5.76716 31.7395ZM5.76716 27.739L6.26716 27.739L6.26716 27.7315L6.26694 27.724L5.76716 27.739ZM4.32094 27.7611L4.82094 27.7611L4.32094 27.7611ZM4.32094 28.1228L4.32094 28.6228L4.82094 28.6228L4.82094 28.1228L4.32094 28.1228ZM4.32056 28.1228L4.32056 27.6228L3.82056 27.6228L3.82056 28.1228L4.32056 28.1228ZM4.32056 31.7395L4.82056 31.7395L4.32056 31.7395ZM1.42754 27.0212L1.92754 27.027L1.92754 27.0212L1.42754 27.0212ZM5.0443 19.8639L5.23188 20.3274L5.55331 20.1973L5.54413 19.8507L5.0443 19.8639ZM9.38244 19.8636L8.88261 19.8505L8.87348 20.1971L9.19493 20.3271L9.38244 19.8636ZM11.5534 33.686C12.6285 33.686 13.5 32.8145 13.5 31.7395L12.5 31.7395C12.5 32.2622 12.0762 32.686 11.5534 32.686L11.5534 33.686ZM9.60688 31.7395C9.60688 32.8145 10.4784 33.686 11.5534 33.686L11.5534 32.686C11.0307 32.686 10.6069 32.2622 10.6069 31.7395L9.60688 31.7395ZM9.60688 28.1228L9.60688 31.7395L10.6069 31.7395L10.6069 28.1228L9.60688 28.1228ZM10.1067 28.6228L10.1069 28.6228L10.1069 27.6228L10.1067 27.6228L10.1067 28.6228ZM9.60667 27.7611L9.60667 28.1228L10.6067 28.1228L10.6067 27.7611L9.60667 27.7611ZM9.38339 27.5378C9.50671 27.5378 9.60667 27.6378 9.60667 27.7611L10.6067 27.7611C10.6067 27.0855 10.059 26.5378 9.38339 26.5378L9.38339 27.5378ZM9.16017 27.7561C9.1627 27.6352 9.26173 27.5378 9.38339 27.5378L9.38339 26.5378C8.71646 26.5378 8.17429 27.0714 8.16039 27.7352L9.16017 27.7561ZM9.16028 31.7395L9.16028 27.7456L8.16028 27.7456L8.16028 31.7395L9.16028 31.7395ZM7.21372 33.686C8.28877 33.686 9.16028 32.8145 9.16028 31.7395L8.16028 31.7395C8.16028 32.2622 7.73649 32.686 7.21372 32.686L7.21372 33.686ZM5.26716 31.7395C5.26716 32.8145 6.13867 33.686 7.21372 33.686L7.21372 32.686C6.69095 32.686 6.26716 32.2622 6.26716 31.7395L5.26716 31.7395ZM5.26716 27.739L5.26716 31.7395L6.26716 31.7395L6.26716 27.739L5.26716 27.739ZM5.04421 27.5378C5.16516 27.5378 5.26379 27.6341 5.26739 27.754L6.26694 27.724C6.24717 27.0654 5.70739 26.5378 5.04421 26.5378L5.04421 27.5378ZM4.82094 27.7611C4.82094 27.6378 4.9209 27.5378 5.04421 27.5378L5.04421 26.5378C4.36862 26.5378 3.82094 27.0855 3.82094 27.7611L4.82094 27.7611ZM4.82094 28.1228L4.82094 27.7611L3.82094 27.7611L3.82094 28.1228L4.82094 28.1228ZM4.32056 28.6228L4.32094 28.6228L4.32094 27.6228L4.32056 27.6228L4.32056 28.6228ZM4.82056 31.7395L4.82056 28.1228L3.82056 28.1228L3.82056 31.7395L4.82056 31.7395ZM2.874 33.686C3.94905 33.686 4.82056 32.8145 4.82056 31.7395L3.82056 31.7395C3.82056 32.2622 3.39677 32.686 2.874 32.686L2.874 33.686ZM0.927441 31.7395C0.927441 32.8145 1.79895 33.686 2.874 33.686L2.874 32.686C2.35123 32.686 1.92744 32.2622 1.92744 31.7395L0.927441 31.7395ZM0.92744 27.0382L0.927441 31.7395L1.92744 31.7395L1.92744 27.0382L0.92744 27.0382ZM0.927571 27.0155C0.927483 27.023 0.92744 27.0306 0.92744 27.0382L1.92744 27.0382C1.92744 27.0344 1.92746 27.0307 1.9275 27.027L0.927571 27.0155ZM0.927537 25.2297L0.927537 27.0212L1.92754 27.0212L1.92754 25.2297L0.927537 25.2297ZM4.85673 19.4005C2.55366 20.3325 0.927537 22.5906 0.927537 25.2297L1.92754 25.2297C1.92754 23.0119 3.29348 21.1119 5.23188 20.3274L4.85673 19.4005ZM5.54413 19.8507C5.54373 19.8357 5.54353 19.8206 5.54353 19.8054L4.54353 19.8054C4.54353 19.8294 4.54385 19.8533 4.54448 19.8772L5.54413 19.8507ZM5.54353 19.8054L5.54353 3.17002L4.54353 3.17002L4.54353 19.8054L5.54353 19.8054ZM5.54353 3.17002C5.54353 2.24779 6.29114 1.50018 7.21337 1.50018L7.21337 0.500184C5.73886 0.500184 4.54353 1.69551 4.54353 3.17002L5.54353 3.17002ZM7.21337 1.50018C8.13559 1.50018 8.8832 2.24779 8.8832 3.17002L9.8832 3.17002C9.8832 1.69551 8.68788 0.500183 7.21337 0.500184L7.21337 1.50018ZM8.8832 3.17002L8.8832 19.8054L9.8832 19.8054L9.8832 3.17002L8.8832 3.17002ZM8.8832 19.8054C8.8832 19.8205 8.883 19.8355 8.88261 19.8505L9.88226 19.8768C9.88289 19.8531 9.8832 19.8293 9.8832 19.8054L8.8832 19.8054ZM13.5 25.2297C13.5 22.5903 11.8735 20.332 9.56994 19.4001L9.19493 20.3271C11.1337 21.1114 12.5 23.0116 12.5 25.2297L13.5 25.2297ZM13.5 27.0382L13.5 25.2297L12.5 25.2297L12.5 27.0382L13.5 27.0382ZM13.5 28.1228L13.5 27.0382L12.5 27.0382L12.5 28.1228L13.5 28.1228ZM13.5 31.7395L13.5 28.1228L12.5 28.1228L12.5 31.7395L13.5 31.7395Z"
+        fill="#222222"
+      />
+    </svg>
+  );
+}
+
+export default ForkRateIcon;
diff --git a/src/components/icon/RightArrow.icon.tsx b/src/components/icon/RightArrow.icon.tsx
@@ -0,0 +1,15 @@
+function RightArrowIcon() {
+  return (
+    <svg
+      width="36"
+      height="36"
+      viewBox="0 0 36 36"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M15 25L22.5 17.5L15 10" stroke="black" strokeWidth="2" />
+    </svg>
+  );
+}
+
+export default RightArrowIcon;
diff --git a/src/components/molecules/AutoCompleteInput.component.tsx b/src/components/molecules/AutoCompleteInput.component.tsx
@@ -66,21 +66,26 @@ function AutoCompleteInputComponent<T>({
         style={{ maxHeight: "300px", overflowY: "auto" }}
       >
         {inputValue === "" && options.length === 0 ? (
-          <Menu.Item key={-1} disabled>
+          <Menu.Item style={{ height: "52px" }} key={-1} disabled>
             검색어를 입력해주세요.
           </Menu.Item>
         ) : (
           ""
         )}
         {inputValue !== "" && options.length === 0 ? (
-          <Menu.Item key={-2} disabled>
+          <Menu.Item style={{ height: "52px" }} key={-2} disabled>
             일치하는 항목을 찾지 못했습니다.
           </Menu.Item>
         ) : (
           ""
         )}
         {options.map((x) => (
-          <Menu.Item onClick={onSelect} key={x.key} title={x.label}>
+          <Menu.Item
+            style={{ height: "52px" }}
+            onClick={onSelect}
+            key={x.key}
+            title={x.label}
+          >
             {x.label}
           </Menu.Item>
         ))}

diff --git a/src/components/molecules/CategorySelectComponent.tsx b/src/components/molecules/CategorySelectComponent.tsx
@@ -11,12 +11,22 @@ const CategoryWrapper = styled.div<CategoryWrapperProp>`
   width: fit-content;
   margin: 0;
 `;
-const CategoryImageWrapper = styled.div`
+const CategoryImageWrapper = styled.div<CategoryImageWrapperProp>`
   border-radius: 12px;
   background-color: ${theme.color.gray2};
 
-  height: calc((100vw - 2 * ${Padding.pageX} - 30px) / 4);
-  width: calc((100vw - 2 * ${Padding.pageX} - 30px) / 4);
+  ${({ size = "full" }) => {
+    switch (size) {
+      case "grid":
+        return `height: auto; width: 25%;`;
+      case "full":
+      default:
+        return `
+        height: calc((100vw - 2 * ${Padding.pageX} - 30px) / 4);
+        width: calc((100vw - 2 * ${Padding.pageX} - 30px) / 4);
+        `;
+    }
+  }};
 
   overflow: hidden;
   display: flex;
@@ -65,22 +75,29 @@ type CategoryComponentProp = {
   img: string | null;
   name: string;
   onClick: MouseEventHandler<HTMLDivElement>;
+  size?: "full" | "grid";
+};
+
+type CategoryImageWrapperProp = {
+  size?: "full" | "grid";
 };
 
 type CategoryWrapperProp = {
   onClick: MouseEventHandler<HTMLDivElement>;
 };
-
+CategorySelectComponent.defaultProps = {
+  size: "full",
+};
 function CategorySelectComponent({
   selected = false,
   img = null,
   name = "",
   onClick = null,
+  size,
 }: CategoryComponentProp) {
   return (
     <CategoryWrapper onClick={onClick}>
-      <CategoryImageWrapper>
-        {/* TODO:: 여기에 아이콘 대신 이미지를 삽입 */}
+      <CategoryImageWrapper size={size}>
         {img ? <CategoryImage src={img} alt={name} /> : <CameraIcon />}
         <SelectedMask selected={selected}>
           <CheckIcon />

diff --git a/src/components/molecules/ImageGallery.component.tsx b/src/components/molecules/ImageGallery.component.tsx
@@ -0,0 +1,74 @@
+import { useCallback, useMemo, useState } from "react";
+import ImageGallery from "react-image-gallery";
+import "react-image-gallery/styles/css/image-gallery.css";
+import styled from "styled-components";
+
+const Container = styled.div`
+  .image-gallery {
+    width: 100vw;
+  }
+  .image-gallery-image {
+    height: 250px;
+  }
+`;
+
+const Popup = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.3);
+  z-index: 10000;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  button {
+    position: absolute;
+    width: fit-content;
+    top: 5px;
+    right: 5px;
+  }
+  img {
+    width: 100%;
+    height: auto;
+  }
+`;
+
+function ImageGalleryComponent({ images = [] as string[] }) {
+  const [popupImgSrc, setPopupImgSrc] = useState(null);
+  const imageList = useMemo(
+    () =>
+      images.map((x) => ({
+        original: x,
+        originalHeight: "250px",
+        originalWidth: "auto",
+      })),
+    [images],
+  );
+  const onClick = useCallback((e) => {
+    setPopupImgSrc(e.target.src);
+  }, []);
+  const onClickPopup = useCallback(() => {
+    setPopupImgSrc(null);
+  }, []);
+  return (
+    <Container>
+      <ImageGallery
+        items={imageList}
+        onClick={onClick}
+        showThumbnails={false}
+        showFullscreenButton={false}
+        showPlayButton={false}
+        showBullets
+      />
+      {popupImgSrc && (
+        <Popup onClick={onClickPopup}>
+          <img src={popupImgSrc} alt="popup" />
+        </Popup>
+      )}
+    </Container>
+  );
+}
+
+export default ImageGalleryComponent;