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

[Release] v0.7.1 신청자 명단 및 신청서 상세 외 디테일 추가
wanted-fork-fork · Nov 20, 2021 · 79ee77b · 79ee77b
2 parents cce0dba + 75f4b20
commit 79ee77b
Show file tree

Hide file tree

Showing 40 changed files with 989 additions and 152 deletions.
diff --git a/src/components/atoms/Input.tsx b/src/components/atoms/Input.tsx
@@ -22,6 +22,13 @@ const BaseInput = css<InputStyleProps>`
   }
 `;
 
+export const BoxInput = styled.input<InputStyleProps>`
+  ${BaseInput};
+  padding: 10px 20px;
+  border-radius: 50px;
+  border: 1px solid ${theme.color.point};
+`;
+
 export const DividedInput = styled.input`
   ${BaseInput};
   border: none;

diff --git a/src/components/icon/Document.icon.tsx b/src/components/icon/Document.icon.tsx
@@ -0,0 +1,34 @@
+function DocumentIcon() {
+  return (
+    <svg
+      width="32"
+      height="32"
+      viewBox="0 0 32 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect
+        x="6.5"
+        y="3.5"
+        width="20"
+        height="24"
+        fill="white"
+        stroke="#222222"
+      />
+      <rect
+        x="10.5"
+        y="6.5"
+        width="12"
+        height="3"
+        rx="1.5"
+        fill="#FA5D66"
+        stroke="#222222"
+      />
+      <path d="M10 14H23" stroke="#222222" />
+      <path d="M10 18H23" stroke="#222222" />
+      <path d="M10 22H23" stroke="#222222" />
+    </svg>
+  );
+}
+
+export default DocumentIcon;
diff --git a/src/components/icon/Empty.icon.tsx b/src/components/icon/Empty.icon.tsx
diff --git a/src/components/molecules/ApplierListElement.component.tsx b/src/components/molecules/ApplierListElement.component.tsx
@@ -0,0 +1,70 @@
+import { Switch } from "antd";
+import Link from "next/link";
+import styled from "styled-components";
+
+// components
+import ProfileFrameComponent from "@src/components/molecules/ProfileFrame.component";
+import StarIcon from "@src/components/icon/Star.icon";
+import DocumentIcon from "@src/components/icon/Document.icon";
+import { FontSize } from "@src/styles/theme";
+import { StudyState } from "@src/constant/enum.constant";
+
+const Container = styled.div`
+  display: grid;
+  grid-template-columns: 52px auto 52px 52px;
+  align-items: center;
+  gap: 15px;
+`;
+const InfoWrapper = styled.div`
+  width: 100%;
+`;
+
+const Nickname = styled.p`
+  margin-bottom: 5px;
+  font-size: ${FontSize.Default};
+`;
+const RateWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  svg {
+    margin-right: 5px;
+  }
+  span {
+    font-size: ${FontSize.Small};
+  }
+`;
+const CenterWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+function ApplierListElementComponent({ userInfo }) {
+  return (
+    <Container>
+      <ProfileFrameComponent
+        size="mid-small"
+        imgSrc={userInfo.profileImg}
+        allowUpload={false}
+      />
+      <InfoWrapper>
+        <Nickname>{userInfo.nickname}</Nickname>
+        <RateWrapper>
+          <StarIcon />
+          <span>{userInfo.rate || "비공개"}</span>
+        </RateWrapper>
+      </InfoWrapper>
+      <CenterWrapper>
+        <Switch checked={userInfo.state === StudyState.JOINED} />
+      </CenterWrapper>
+      <CenterWrapper>
+        <Link href={`/study/manage/apply/${userInfo.studyMemberId}`}>
+          <a>
+            <DocumentIcon />
+          </a>
+        </Link>
+      </CenterWrapper>
+    </Container>
+  );
+}
+
+export default ApplierListElementComponent;
diff --git a/src/components/molecules/Empty.component.tsx b/src/components/molecules/Empty.component.tsx
@@ -0,0 +1,27 @@
+import EmptyIcon from "@src/components/icon/Empty.icon";
+import styled from "styled-components";
+import { FontSize } from "@src/styles/theme";
+
+const EmptyWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 60px;
+  svg {
+    margin-bottom: 20px;
+  }
+  p {
+    font-size: ${FontSize.PrimaryDescription};
+  }
+`;
+
+function EmptyComponent({ message }) {
+  return (
+    <EmptyWrapper>
+      <EmptyIcon />
+      <p>{message}</p>
+    </EmptyWrapper>
+  );
+}
+
+export default EmptyComponent;
diff --git a/src/components/molecules/ProfileFrame.component.tsx b/src/components/molecules/ProfileFrame.component.tsx
@@ -11,7 +11,7 @@ import { FolderPathType } from "@src/constant/enum.constant";
 
 interface ProfileFrameProps {
   mb?: string;
-  size?: "large" | "small" | "medium";
+  size?: "large" | "small" | "mid-small" | "medium";
   allowUpload?: boolean;
   imgSrc?: string;
   onUploadImage?: (e: Resource[]) => void;
@@ -34,6 +34,8 @@ const CircleImageFrame = styled.div<ProfileFrameProps>`
           return "80px";
         case "medium":
           return "72px";
+        case "mid-small":
+          return "56px";
         case "small":
           return "32px";
         default:
@@ -50,6 +52,8 @@ const CircleImageFrame = styled.div<ProfileFrameProps>`
           return "48px";
         case "medium":
           return "48px";
+        case "mid-small":
+          return "32px";
         case "small":
           return "18px";
         default:
@@ -71,6 +75,12 @@ const CircleImageFrame = styled.div<ProfileFrameProps>`
         height: 72px;
         border-width: 5px;
         `;
+      case "mid-small":
+        return `  
+        width: 56px;
+        height: 56px;
+        border-width: 5px;
+        `;
       case "small":
         return `  
         width: 32px;

diff --git a/src/components/molecules/SearchLikeFilterLinkButton.component.tsx b/src/components/molecules/SearchLikeFilterLinkButton.component.tsx
@@ -0,0 +1,38 @@
+import Link from "next/link";
+import { Button } from "@src/components/atoms/Button";
+import theme, { Padding } from "@src/styles/theme";
+import ColoredSearchIcon from "@src/components/icon/ColoredSearch.icon";
+import styled from "styled-components";
+
+const SearchContentsWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 0 ${Padding.pageX};
+  svg {
+    margin-right: 10px;
+  }
+`;
+
+function SearchLikeFilterLinkButtonComponent({ contents, mb = "0" }) {
+  return (
+    <Link href="/filter">
+      <a>
+        <Button
+          color={theme.color.gray1}
+          textAlign="left"
+          shape="full-rounded"
+          height="48px"
+          fontSize="small"
+          mb={mb}
+        >
+          <SearchContentsWrapper>
+            <ColoredSearchIcon />
+            <span>{contents}</span>
+          </SearchContentsWrapper>
+        </Button>
+      </a>
+    </Link>
+  );
+}
+
+export default SearchLikeFilterLinkButtonComponent;
diff --git a/src/components/organs/BottomNavigation.component.tsx b/src/components/organs/BottomNavigation.component.tsx
@@ -50,11 +50,11 @@ function BottomNavigationComponent({ selected = NaviType.MAIN }) {
           <NavButton type="button">
             <CategoryMenuIcon selected={selected === NaviType.FILTER} />
             <Description selected={selected === NaviType.FILTER}>
-              카테고리
+              스터디 필터링
             </Description>
           </NavButton>
         </Link>
-        <Link href="/profile/study">
+        <Link href="/study/manage">
           <NavButton type="button">
             <StudyManageIcon selected={selected === NaviType.STUDY} />
             <Description selected={selected === NaviType.STUDY}>