Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(apply): implement the function to preview the application form before final submission #649

Merged
merged 36 commits into from
Oct 13, 2022
Merged
Changes from 1 commit
Commits
Show all changes
36 commits
Select commit Hold shift + click to select a range
f925cf6
feat: add modal portal and provider
greenblues1190 Oct 2, 2022
c4dc97c
feat: add Modal Window
greenblues1190 Oct 2, 2022
33c6513
feat: merge to rebase
greenblues1190 Oct 2, 2022
b39596d
refactor: import domain types
greenblues1190 Oct 2, 2022
53c22e0
fix: remove memory router on storybook preview
greenblues1190 Oct 3, 2022
5b950d7
feat: close modal when escape key is down
greenblues1190 Oct 4, 2022
9cdbdd0
refactor: apply react component type convention
greenblues1190 Oct 5, 2022
1cdb355
refactor: remove unused messages
greenblues1190 Oct 5, 2022
75dc3ed
feat: add answer length
greenblues1190 Oct 5, 2022
50a1043
refactor: move modal root to top level
greenblues1190 Oct 10, 2022
24b7697
refactor: change application item style
greenblues1190 Oct 10, 2022
08a4d3d
refactor: change string to constants
greenblues1190 Oct 10, 2022
76095e5
refactor: use recuruitmentItem id as key
greenblues1190 Oct 10, 2022
7cfb738
refactor: change modal styles
greenblues1190 Oct 10, 2022
a5d21b7
refactor: change string to constants
greenblues1190 Oct 10, 2022
749238a
refactor: initialize modal root in modal portal
greenblues1190 Oct 10, 2022
47f7b84
refactor: change hex code to css variable
greenblues1190 Oct 10, 2022
1332944
refactor: change z-index unit to 10
greenblues1190 Oct 10, 2022
665b0a8
refactor: change modal window style
greenblues1190 Oct 10, 2022
3ac8aa6
refactor: change interface to type alias
greenblues1190 Oct 10, 2022
5d824c6
refactor: remove title from modal window
greenblues1190 Oct 10, 2022
76ef71a
refactor: change modal portal children prop type
greenblues1190 Oct 10, 2022
088a1c5
refactor: seperate ModalProvider props type
greenblues1190 Oct 10, 2022
4451f19
refactor: reconstruct modal directory structure
greenblues1190 Oct 10, 2022
37d6963
refactor: declare event handler for checkbox
greenblues1190 Oct 10, 2022
c63d990
style: change code style
greenblues1190 Oct 10, 2022
64ed0c3
refactor: change preview modal style
greenblues1190 Oct 10, 2022
0c49bf1
refactor: move mock data to dummy.js
greenblues1190 Oct 10, 2022
6d18199
style: remove unused import
greenblues1190 Oct 10, 2022
be7b7e1
fix: pass empty string to Button className
greenblues1190 Oct 10, 2022
f9203e2
style: remove unused import
greenblues1190 Oct 10, 2022
a804967
refactor: remove unused html element
greenblues1190 Oct 10, 2022
0634200
style: apply code convention
greenblues1190 Oct 10, 2022
8d11b2f
style: update stale type name
greenblues1190 Oct 10, 2022
fc98c15
feat: break word in answer paragraph
greenblues1190 Oct 11, 2022
5ad7d64
feat: break all characters in answer paragraph
greenblues1190 Oct 11, 2022
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
refactor: apply react component type convention
greenblues1190 committed Oct 11, 2022
commit 9cdbdd0fc2a0c7c84b9b0b6d91f7f8438e2a6c49
Original file line number Diff line number Diff line change
@@ -23,7 +23,7 @@ const ApplicationPreviewModalWindow = ({
const { closeModal } = useModalContext();
const [isChecked, setIsChecked] = useState(false);

const handleClickDismissButton: React.MouseEventHandler<HTMLButtonElement> = (e) => {
const handleClickDismissButton: React.MouseEventHandler<HTMLButtonElement> = () => {
closeModal();
};

5 changes: 3 additions & 2 deletions frontend/src/components/Modal/ModalPortal/ModalPortal.tsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
import { useEffect, useRef, useState } from "react";
import { createPortal } from "react-dom";
import { ModalContextValue } from "../../../provider/ModalProvider";
import styles from "./ModalPortal.module.css";

type ModalPortalProps = React.PropsWithChildren<{
closeModal: () => void;
closeModal: ModalContextValue["closeModal"];
}>;

const ModalPortal: React.FC<ModalPortalProps> = ({ children, closeModal }) => {
const ModalPortal = ({ children, closeModal }: ModalPortalProps) => {
const ref = useRef<Element | null>();
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

r : ref가 undefined 타입도 추론되어서 명시적으로 null로 초기화하면 좋을 것 같네요.

Suggested change
const ref = useRef<Element | null>();
const ref = useRef<Element | null>(null);

function useRef<T = undefined>(): MutableRefObject<T | undefined>;

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

놓쳤었네요 반영했습니다 :DD e53b044

const [mounted, setMounted] = useState(false);

1 change: 0 additions & 1 deletion frontend/src/components/Modal/ModalWindow/ModalWindow.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import classNames from "classnames";
import useModalContext from "../../../hooks/useModalContext";
import styles from "./ModalWindow.module.css";

interface ModalWindowProps
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

r : interface 🚨

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

반영했습니다 😓 4f623bb

9 changes: 2 additions & 7 deletions frontend/src/hooks/useModalContext.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,6 @@
import React, { useContext, createContext } from "react";
import { useContext, createContext } from "react";
import { ERROR_MESSAGE } from "../constants/messages";

export type ModalContextValue = {
Modal: React.FC<{ children: NonNullable<React.ReactNode> }>;
openModal: () => void;
closeModal: () => void;
};
import { ModalContextValue } from "../provider/ModalProvider";

export const ModalContext = createContext<ModalContextValue | null>(null);

14 changes: 10 additions & 4 deletions frontend/src/provider/ModalProvider.tsx
Original file line number Diff line number Diff line change
@@ -1,21 +1,27 @@
import { useState } from "react";
import React, { useState } from "react";
import ModalPortal from "../components/Modal/ModalPortal/ModalPortal";
import { ModalContext } from "../hooks/useModalContext";

export type ModalContextValue = {
Modal: (props: { children: NonNullable<React.ReactNode> }) => JSX.Element | null;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

r : 해당 children 타입과 ModalPortal의 children prop의 타입이 동일해야 되지 않나요?

해당 children 타입
: NonNullable<React.ReactNode>

ModalPortal children 타입
: React.ReactNode

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

..!! d567def

openModal: () => void;
closeModal: () => void;
};

const ModalProvider = ({ children }: { children: React.ReactNode }) => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

r : ModalProvider도 컴포넌트이기에 type을 분리해주세요!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

분리했습니다. 0cf7ff6

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

NonNullable 😎

const [isModalOpened, setIsModalOpened] = useState(false);

const openModal = () => {
const openModal: ModalContextValue["openModal"] = () => {
document.body.style.overflow = "hidden";
setIsModalOpened(true);
};

const closeModal = () => {
const closeModal: ModalContextValue["closeModal"] = () => {
document.body.style.overflow = "auto";
setIsModalOpened(false);
};

const Modal: React.FC<{ children: NonNullable<React.ReactNode> }> = (props) => {
const Modal: ModalContextValue["Modal"] = (props) => {
if (isModalOpened) {
return <ModalPortal closeModal={closeModal} {...props} />;
}