Merge pull request #60 from Principes-Artis-Mechanicae/feature/GETP-181

GETP-181 feature: 프로젝트 지원 페이지 퍼블리싱

.vscode/workspace.code-snippets

@@ -1,11 +1,9 @@
 {
     "Import Emotion Styled": {
-        "scope": "typescriptreact",
         "prefix": ["!styled"],
         "body": ["import styled from \"@emotion/styled\";"],
     },
     "StoryBook" : {
-        "scope":"typescript",
         "prefix" : ["!story"],
         "body": [
             "import type { Meta, StoryObj } from \"@storybook/react\";",

package.json

@@ -30,7 +30,7 @@
         "framer-motion": "^11.0.25",
         "jest": "^29.7.0",
         "jwt-decode": "^4.0.0",
-        "principes-getp": "^1.0.3",
+        "principes-getp": "^1.2.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-icons": "^5.2.1",

src/Router.tsx

@@ -10,6 +10,7 @@ import PeopleDetailPage from "@/pages/people/PeopleDetailPage";
 import PeopleInfoRegisterPage from "@/pages/people/PeopleInfoRegisterPage";
 import PeopleListPage from "@/pages/people/PeopleListPage";
 import PeopleProfileEditPage from "@/pages/people/PeopleProfileEditPage";
+import ProjectRequestPage from "@/pages/project/ProjectRequestPage";
 
 import { MemberType } from "@/services/auth/types";
 
@@ -48,6 +49,15 @@ export const Router = () => {
 
                 <Route path="client/register" element={<RegisterClientPage />} />
                 <Route path="client/edit" element={<EditClientPage />} />
+
+                <Route
+                    path="project/request"
+                    element={
+                        <RouteGuard role={MemberType.ROLE_CLIENT}>
+                            <ProjectRequestPage />
+                        </RouteGuard>
+                    }
+                ></Route>
             </Route>
         </Routes>
     );

src/components/project/ProjectRequestSection/PostProjectRequestSection.style.ts

@@ -0,0 +1,11 @@
+import styled from "@emotion/styled";
+
+export const PostProjectRequestContianer = styled.div`
+    width: 100%;
+
+    margin: 20px 0px;
+
+    & > p {
+        margin: 5px 0px;
+    }
+`;

src/components/project/ProjectRequestSection/PostProjectRequestSection.tsx

@@ -0,0 +1,56 @@
+import { useDispatch } from "react-redux";
+
+import { Button, DropDown, DropDownContextProvider, DropDownItem, RadioGroup, RadioItem } from "principes-getp";
+
+import { ProjectRequestPageWrapper } from "@/pages/project/ProjectRequestPage.style";
+
+import { Paragraph } from "../../__common__/typography/Paragraph";
+import { Title } from "../../__common__/typography/Title";
+import { PostProjectRequestContianer } from "./PostProjectRequestSection.style";
+import { projectAction } from "@/store/slice/project.slice";
+import { RootDispatch } from "@/store/store";
+
+export const PostProjectRequestSection = () => {
+    const dispatch: RootDispatch = useDispatch();
+
+    return (
+        <ProjectRequestPageWrapper>
+            <Title>프로젝트 의뢰</Title>
+
+            <PostProjectRequestContianer>
+                <Paragraph weight="bold" size="m">
+                    사전미팅 방식을 선택해주세요
+                </Paragraph>
+
+                <RadioGroup width="100%" height="auto">
+                    <RadioItem name="meeting-type">온라인 미팅</RadioItem>
+                    <RadioItem name="meeting-type">오프라인 미팅</RadioItem>
+                </RadioGroup>
+            </PostProjectRequestContianer>
+
+            <PostProjectRequestContianer>
+                <Paragraph weight="bold" size="m">
+                    프로젝트 카테고리를 선택해주세요
+                </Paragraph>
+
+                <DropDownContextProvider>
+                    <DropDown
+                        width="100%"
+                        height="54px"
+                        itemContainerHeight="200px"
+                        placeholder="카테고리를 선택해주세요"
+                    >
+                        <DropDownItem index={1} value={"프론트엔드 개발"} />
+                        <DropDownItem index={2} value={"백엔드 개발"} />
+                        <DropDownItem index={3} value={"앱 개발"} />
+                        <DropDownItem index={4} value={"프로그램 개발"} />
+                    </DropDown>
+                </DropDownContextProvider>
+            </PostProjectRequestContianer>
+
+            <Button variant="primary" width="100%" height="54px" onClick={() => dispatch(projectAction.nextStep())}>
+                다음으로
+            </Button>
+        </ProjectRequestPageWrapper>
+    );
+};

src/components/project/ProjectRequestSection/ProjectReqeustCompleteSection.style.ts

@@ -0,0 +1,17 @@
+import styled from "@emotion/styled";
+
+export const ProjectRequestCompleteImg = styled.img`
+    display: block;
+    width: min(100%, 300px);
+
+    margin: 60px auto;
+`;
+
+export const ProjectRequestCompleteContainer = styled.div`
+    width: 100%;
+    margin: 20px 0px;
+
+    p {
+        text-align: center;
+    }
+`;

src/components/project/ProjectRequestSection/ProjectRequestCompleteSection.tsx

@@ -0,0 +1,34 @@
+import { useNavigate } from "react-router-dom";
+
+import { Button } from "principes-getp";
+
+import { Paragraph } from "@/components/__common__/typography/Paragraph";
+import { Title } from "@/components/__common__/typography/Title";
+
+import { ProjectRequestPageWrapper } from "@/pages/project/ProjectRequestPage.style";
+
+import congratsImage from "@/assets/auth/congrats1.png";
+
+import { ProjectRequestCompleteContainer, ProjectRequestCompleteImg } from "./ProjectReqeustCompleteSection.style";
+
+export const ProjectReqeustCompleteSection = () => {
+    const navigate = useNavigate();
+
+    return (
+        <ProjectRequestPageWrapper>
+            <Title>프로젝트 의뢰</Title>
+
+            <ProjectRequestCompleteImg src={congratsImage}></ProjectRequestCompleteImg>
+
+            <ProjectRequestCompleteContainer>
+                <Paragraph size="l">의뢰자님의 프로젝트가 등록 신청 되었어요!</Paragraph>
+            </ProjectRequestCompleteContainer>
+
+            <ProjectRequestCompleteContainer>
+                <Button variant="primary" width="100%" height="54px" onClick={() => navigate("/")}>
+                    메인 페이지로
+                </Button>
+            </ProjectRequestCompleteContainer>
+        </ProjectRequestPageWrapper>
+    );
+};

src/components/project/ProjectRequestSection/ProjectRequestContentSection.style.ts

@@ -0,0 +1,7 @@
+import styled from "@emotion/styled";
+
+export const ProjectRequestContentContainer = styled.div`
+    width: 100%;
+
+    margin: 20px 0px;
+`;

src/components/project/ProjectRequestSection/ProjectRequestContentSection.tsx

@@ -0,0 +1,66 @@
+import { useDispatch } from "react-redux";
+
+import { Button, Input, Label, TextArea } from "principes-getp";
+
+import { Paragraph } from "@/components/__common__/typography/Paragraph";
+import { Title } from "@/components/__common__/typography/Title";
+
+import { ProjectRequestPageWrapper } from "@/pages/project/ProjectRequestPage.style";
+
+import { ProjectRequestStep } from "../ProjectRequestStep/ProjectRequestStep";
+import { ProjectRequestContentContainer } from "./ProjectRequestContentSection.style";
+import { projectAction } from "@/store/slice/project.slice";
+import { RootDispatch } from "@/store/store";
+
+export const ProjectRequestContentSection = () => {
+    const dispatch: RootDispatch = useDispatch();
+
+    return (
+        <ProjectRequestPageWrapper>
+            <Title>프로젝트 의뢰</Title>
+
+            <ProjectRequestStep width="100%" total={3} current={1} />
+
+            <ProjectRequestContentContainer>
+                <Paragraph size="l">프로젝트 내용을 작성해주세요</Paragraph>
+            </ProjectRequestContentContainer>
+
+            <ProjectRequestContentContainer>
+                <Label>프로젝트 제목</Label>
+                <Input type="text" width="100%" height="54px" placeholder="프로젝트 제목을 입력해주세요"></Input>
+            </ProjectRequestContentContainer>
+
+            <ProjectRequestContentContainer>
+                <Label>상세설명</Label>
+                <TextArea
+                    variant="primary"
+                    width="100%"
+                    height="150px"
+                    placeholder="프로젝트 상세 설명을 입력해주세요.
+예시) 프로젝트 기간: 0000-00-00 ~ 0000-00-00
+필요 기술: ~~"
+                />
+            </ProjectRequestContentContainer>
+
+            <ProjectRequestContentContainer>
+                <Label>첨부파일</Label>
+                <Button variant="primary" width="100%" height="54px">
+                    + 파일 첨부하기
+                </Button>
+            </ProjectRequestContentContainer>
+
+            <ProjectRequestContentContainer>
+                <Label>프로젝트 보수금</Label>
+                <Button variant="disabled" width="100%" height="54px">
+                    2,000,000 만원
+                </Button>
+            </ProjectRequestContentContainer>
+
+            <ProjectRequestContentContainer>
+                <Button variant="primary" width="100%" height="54px" onClick={() => dispatch(projectAction.nextStep())}>
+                    다음
+                </Button>
+            </ProjectRequestContentContainer>
+        </ProjectRequestPageWrapper>
+    );
+};

src/components/project/ProjectRequestSection/ProjectRequestDateSection.style.ts

@@ -0,0 +1,7 @@
+import styled from "@emotion/styled";
+
+export const ProjectRequestDateSectionContainer = styled.div`
+    width: 100%;
+
+    margin: 20px 0px;
+`;

src/components/project/ProjectRequestSection/ProjectRequestDateSection.tsx

@@ -0,0 +1,53 @@
+import { useDispatch } from "react-redux";
+
+import { Button, DatePicker, Label } from "principes-getp";
+
+import { Paragraph } from "@/components/__common__/typography/Paragraph";
+import { Title } from "@/components/__common__/typography/Title";
+
+import { ProjectRequestPageWrapper } from "@/pages/project/ProjectRequestPage.style";
+
+import { ProjectRequestStep } from "../ProjectRequestStep/ProjectRequestStep";
+import { ProjectRequestDateSectionContainer } from "./ProjectRequestDateSection.style";
+import { projectAction } from "@/store/slice/project.slice";
+import { RootDispatch } from "@/store/store";
+
+export const ProjectRequestDateSection = () => {
+    const dispatch: RootDispatch = useDispatch();
+
+    return (
+        <ProjectRequestPageWrapper>
+            <Title>프로젝트 의뢰</Title>
+
+            <ProjectRequestStep width="100%" total={3} current={2} />
+
+            <Paragraph size="l">마감일자를 선택해주세요</Paragraph>
+
+            <ProjectRequestDateSectionContainer>
+                <Label>지원자 모집 시작일</Label>
+                <DatePicker width="100%" height="54px" />
+            </ProjectRequestDateSectionContainer>
+
+            <ProjectRequestDateSectionContainer>
+                <Label>지원자 모집 마감일</Label>
+                <DatePicker width="100%" height="54px" />
+            </ProjectRequestDateSectionContainer>
+
+            <ProjectRequestDateSectionContainer>
+                <Label>예상 작업 시작일</Label>
+                <DatePicker width="100%" height="54px" />
+            </ProjectRequestDateSectionContainer>
+
+            <ProjectRequestDateSectionContainer>
+                <Label>예상 작업 마감일</Label>
+                <DatePicker width="100%" height="54px" />
+            </ProjectRequestDateSectionContainer>
+
+            <ProjectRequestDateSectionContainer>
+                <Button variant="primary" width="100%" height="54px" onClick={() => dispatch(projectAction.nextStep())}>
+                    다음
+                </Button>
+            </ProjectRequestDateSectionContainer>
+        </ProjectRequestPageWrapper>
+    );
+};

src/components/project/ProjectRequestSection/ProjectRequestTagSection.style.ts

@@ -0,0 +1,7 @@
+import styled from "@emotion/styled";
+
+export const ProjectRequestTagSectionContainer = styled.div`
+    width: 100%;
+
+    margin: 20px 0px;
+`;

src/components/project/ProjectRequestSection/ProjectRequestTagSection.tsx

@@ -0,0 +1,45 @@
+import { useDispatch } from "react-redux";
+
+import { Button, Input, Label } from "principes-getp";
+
+import { Paragraph } from "@/components/__common__/typography/Paragraph";
+import { Title } from "@/components/__common__/typography/Title";
+
+import { ProjectRequestPageWrapper } from "@/pages/project/ProjectRequestPage.style";
+
+import { ProjectRequestStep } from "../ProjectRequestStep/ProjectRequestStep";
+import { ProjectRequestTagSectionContainer } from "./ProjectRequestTagSection.style";
+import { projectAction } from "@/store/slice/project.slice";
+import { RootDispatch } from "@/store/store";
+
+export const ProjectRequestTagSection = () => {
+    const dispatch: RootDispatch = useDispatch();
+
+    return (
+        <ProjectRequestPageWrapper>
+            <Title>프로젝트 의뢰</Title>
+
+            <ProjectRequestStep width="100%" total={3} current={3} />
+
+            <Paragraph size="l">프로젝트 태그를 추가해주세요 (최대 8개)</Paragraph>
+            <Paragraph size="s">유사한 프로젝트 경험자가 검색하는데 도움이 되어요!</Paragraph>
+
+            <ProjectRequestTagSectionContainer>
+                <Label>태그</Label>
+                <Input type="text" width="100%" height="54px" placeholder="태그를 입력해주세요"></Input>
+            </ProjectRequestTagSectionContainer>
+
+            <ProjectRequestTagSectionContainer>
+                <Button variant="outline" width="100%" height="54px">
+                    + 추가
+                </Button>
+            </ProjectRequestTagSectionContainer>
+
+            <ProjectRequestTagSectionContainer>
+                <Button variant="primary" width="100%" height="54px" onClick={() => dispatch(projectAction.nextStep())}>
+                    등록 신청하기
+                </Button>
+            </ProjectRequestTagSectionContainer>
+        </ProjectRequestPageWrapper>
+    );
+};