>;
9 | }
10 |
11 | function PeopleInformation(props: PeopleInformationProps) {
12 | const { setNextValid } = props;
13 |
14 | return (
15 |
16 | 어떤 집인가요?
17 |
18 |
19 | 몇 명이 지낼 수 있나요?
20 |
21 |
22 |
23 | 다른 사람과
24 |
25 | 함께 지내는 집인가요?
26 |
27 |
28 |
29 | );
30 | }
31 |
32 | export default PeopleInformation;
33 |
34 | const StLine = styled.div`
35 | max-width: 420px;
36 | width: 100%;
37 | background: #f9f9f9;
38 | height: 10px;
39 | `;
40 |
41 | const StTitle = styled.h2`
42 | padding: 0 20px;
43 | padding-top: 38px;
44 |
45 | &:last-child {
46 | margin-bottom: 30px;
47 | }
48 | `;
49 |
--------------------------------------------------------------------------------
/public/assets/icons/index.ts:
--------------------------------------------------------------------------------
1 | export { default as icBack } from './ic_back.svg';
2 | export { default as icClose } from './ic_close.svg';
3 | export { default as icMinusGray } from './ic_minus_gray.svg';
4 | export { default as icMinusActive } from './ic_minus_active.svg';
5 | export { default as icPlusGray } from './ic_plus_gray.svg';
6 | export { default as icPlusActive } from './ic_plus_active.svg';
7 | export { default as icCheckEmpty } from './ic_check_empty.svg';
8 | export { default as icCheckActive } from './ic_check_active.svg';
9 | export { default as icCloseBg } from './ic_close_bg.svg';
10 | export { default as icAlert } from './ic_alert.svg';
11 | export { default as icLocation } from './ic_location.svg';
12 | export { default as icLocationColored } from './ic_location_colored.svg';
13 | export { default as icLine } from './ic_line.svg';
14 | export { default as icCalendar } from './ic_calendar.svg';
15 | export { default as icLike } from './ic_like.svg';
16 | export { default as icMark } from './ic_mark.svg';
17 | export { default as icKakao } from './ic_kakao.svg';
18 | export { default as icBrand } from './ic_brand.svg';
19 | export { default as icHome } from './ic_home.svg';
20 | export { default as icNotice } from './ic_notice.svg';
21 | export { default as icDetailBack } from './ic_detail_back.svg';
22 |
--------------------------------------------------------------------------------
/src/pages/_document.tsx:
--------------------------------------------------------------------------------
1 | import Document, { DocumentContext, Html, Head, Main, NextScript } from 'next/document';
2 | import { ServerStyleSheet } from 'styled-components';
3 |
4 | export default class MyDocument extends Document {
5 | static async getInitialProps(ctx: DocumentContext) {
6 | const sheet = new ServerStyleSheet();
7 | const originalRenderPage = ctx.renderPage;
8 | try {
9 | ctx.renderPage = () =>
10 | originalRenderPage({
11 | enhanceApp: (App) => (props) => sheet.collectStyles(),
12 | });
13 | const initialProps = await Document.getInitialProps(ctx);
14 | return {
15 | ...initialProps,
16 | styles: (
17 | <>
18 | {' '}
19 | {initialProps.styles} {sheet.getStyleElement()}{' '}
20 |
21 | ),
22 | };
23 | } finally {
24 | sheet.seal();
25 | }
26 | }
27 |
28 | render() {
29 | return (
30 |
31 |
32 |
36 |
37 |
38 |
39 |
40 |
41 |
42 | );
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/public/assets/icons/ic_brand.svg:
--------------------------------------------------------------------------------
1 |
8 |
--------------------------------------------------------------------------------
/src/components/common/DropZone.tsx:
--------------------------------------------------------------------------------
1 | import { Dispatch, SetStateAction } from 'react';
2 | import { ReactElement, useCallback } from 'react';
3 | import { useDropzone } from 'react-dropzone';
4 |
5 | interface IProps {
6 | setFiles: Dispatch>;
7 | setImages: Dispatch>;
8 | children: React.ReactNode;
9 | }
10 | const DropZone: React.FC = ({ setFiles, setImages, children }) => {
11 | const onDrop = useCallback((acceptedFiles: Blob[]) => {
12 | acceptedFiles.forEach((file: Blob) => {
13 | const reader = new FileReader();
14 | setFiles((prev) => [...prev, file]);
15 | const bloburl = URL.createObjectURL(file);
16 | setImages((prev) => [...prev, bloburl]);
17 | reader.onabort = () => console.log('file reading was aborted');
18 | reader.onerror = () => console.log('file reading has failed');
19 | reader.onload = () => {
20 | // Do whatever you want with the file contents
21 | const binaryStr = reader.result;
22 | };
23 | reader.readAsArrayBuffer(file);
24 | });
25 | }, []);
26 | const { getRootProps, getInputProps } = useDropzone({ onDrop });
27 | return (
28 |
29 |
30 | {children}
31 |
32 | );
33 | };
34 |
35 | export default DropZone;
36 |
--------------------------------------------------------------------------------
/src/components/register/SelectHomeImage/index.tsx:
--------------------------------------------------------------------------------
1 | import { Dispatch, SetStateAction } from 'react';
2 | import styled from 'styled-components';
3 | import SelectImage from './SelectImage';
4 | import UploadImage from './UploadImage';
5 |
6 | interface IProps {
7 | setFiles: Dispatch>;
8 | setImages: Dispatch>;
9 | setRepresentImg: Dispatch>;
10 | setNextValid: Dispatch>;
11 | images: string[];
12 | representImg: string | null;
13 | }
14 |
15 | export default function SelectHomeImage(props: IProps) {
16 | const { setFiles, setImages, images, representImg, setRepresentImg, setNextValid } = props;
17 | return (
18 |
19 |
20 | 내 집은
21 | 이렇게 생겼어요!
22 |
23 | {images.length === 0 ? (
24 |
25 | ) : (
26 |
32 | )}
33 |
34 | );
35 | }
36 |
37 | const StMainDiv = styled.div`
38 | width: 100%;
39 | `;
40 |
41 | const StHeaderDiv = styled.div`
42 | margin-top: 40px;
43 | padding: 0 20px;
44 | `;
45 |
--------------------------------------------------------------------------------
/src/hooks/useModal.tsx:
--------------------------------------------------------------------------------
1 | import Modal from '@src/components/common/Modal';
2 | import { useState } from 'react';
3 |
4 | interface IProps {
5 | isConfirm: boolean;
6 | title: string;
7 | content: string;
8 | rightComment: string;
9 | leftComment: string;
10 | handleRightButton?: () => void;
11 | handleLeftButton: () => void;
12 | }
13 |
14 | export default function useModal(props: IProps) {
15 | const { isConfirm, title, rightComment, content, leftComment, handleRightButton, handleLeftButton } = props;
16 | const [isOpen, setIsOpen] = useState(false);
17 | const openModal = () => setIsOpen(true);
18 | const closeModal = () => setIsOpen(false);
19 | const handleRightButtonClick = () => {
20 | if (isConfirm) {
21 | setIsOpen(false);
22 | return;
23 | }
24 | if (handleRightButton) handleRightButton();
25 | setIsOpen(false);
26 | };
27 | const modal = () => (
28 | {
37 | handleLeftButton();
38 | setIsOpen(false);
39 | }}
40 | handleRightButton={handleRightButtonClick}
41 | />
42 | );
43 | return {
44 | openModal,
45 | Modal: modal,
46 | };
47 | }
48 |
--------------------------------------------------------------------------------
/public/assets/icons/ic_notice.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/components/register/CohabitInformation.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react';
2 | import styled from 'styled-components';
3 | import CheckboxButton from '../common/CheckboxButton';
4 |
5 | function CohabitInformation() {
6 | const [checkedButton, setCheckedButton] = useState('집 전체');
7 |
8 | return (
9 |
10 | setCheckedButton('집 전체')}
12 | isChecked={checkedButton === '집 전체'}
13 | option="집 전체"
14 | description="모든 공간을 단독으로 사용하고 있어요."
15 | />
16 | setCheckedButton('1인실')}
18 | isChecked={checkedButton === '1인실'}
19 | option="1인실"
20 | description="침실은 단독으로 사용하지만, 욕실 및 주방 등 다른 사람과 공유하는 공간이 있어요."
21 | />
22 | setCheckedButton('다인실')}
24 | isChecked={checkedButton === '다인실'}
25 | option="다인실"
26 | description="침실을 포함한 모든 공간을 다른 사람과 공유하고 있어요."
27 | />
28 |
29 | );
30 | }
31 |
32 | export default CohabitInformation;
33 |
34 | const StCohabitInformation = styled.div`
35 | margin: 30px 20px 40px 20px;
36 |
37 | & > button {
38 | display: flex;
39 | align-items: center;
40 | gap: 15px;
41 | width: 100%;
42 | min-width: fit-content;
43 | padding: 10px 0;
44 |
45 | &:not(:last-child) {
46 | margin-bottom: 15px;
47 | }
48 | }
49 | `;
50 |
--------------------------------------------------------------------------------
/src/styles/globalStyle.ts:
--------------------------------------------------------------------------------
1 | import { createGlobalStyle } from 'styled-components';
2 | import reset from 'styled-reset';
3 |
4 | const GlobalStyle = createGlobalStyle`
5 | ${reset};
6 |
7 | html,
8 | body {
9 | width: 100%;
10 | height: 100%;
11 | }
12 |
13 | h2 {
14 | font-size: 21px;
15 | font-weight: 700;
16 | line-height: 28px;
17 | letter-spacing: -0.004em;
18 | text-align: left;
19 | }
20 |
21 | h5 {
22 | font-size: 21px;
23 | font-weight: 700;
24 | line-height: 34px;
25 | text-align: left;
26 | }
27 |
28 | #__next {
29 | display: flex;
30 | flex-direction: column;
31 | max-width: 42rem;
32 | min-height: 100vh;
33 | margin: 0 auto;
34 | }
35 |
36 | html {
37 | font-size: 62.5%;
38 | }
39 |
40 | * {
41 | box-sizing: border-box;
42 | }
43 |
44 | body, button, input, textarea {
45 | font-family: 'Noto Sans KR', sans-serif;
46 | }
47 |
48 | textarea {
49 | border: none;
50 | outline: none;
51 | resize: none;
52 | }
53 |
54 | button {
55 | cursor: pointer;
56 | border: none;
57 | outline: none;
58 | background-color: transparent;
59 | -webkit-tap-highlight-color : transparent;
60 | padding: 0;
61 | }
62 |
63 | input {
64 | outline: none;
65 | border: none;
66 | }
67 |
68 | a, a:visited {
69 | text-decoration: none;
70 | color: black;
71 | }
72 | `;
73 |
74 | export default GlobalStyle;
75 |
--------------------------------------------------------------------------------
/src/components/register/LinkShare.tsx:
--------------------------------------------------------------------------------
1 | import { Dispatch, SetStateAction, useEffect, useState } from 'react';
2 | import styled from 'styled-components';
3 | import ImageDiv from '../common/ImageDiv';
4 | import { icKakao } from 'public/assets/icons';
5 |
6 | interface LinkShareProps {
7 | setNextValid: Dispatch>;
8 | }
9 |
10 | function LinkShare(props: LinkShareProps) {
11 | const { setNextValid } = props;
12 | const [link, setLink] = useState('');
13 | const handleChange = (e: React.ChangeEvent) => {
14 | setLink(e.target.value);
15 | };
16 |
17 | useEffect(() => {
18 | setNextValid(link ? true : false);
19 | }, [link]);
20 |
21 | return (
22 |
23 |
24 |
25 |
26 | 소통할 채팅방의 링크를
27 |
28 | 공유해 주세요
29 |
30 |
31 |
32 | );
33 | }
34 |
35 | export default LinkShare;
36 |
37 | const StLinkShare = styled.div`
38 | padding: 0 20px;
39 |
40 | input {
41 | width: 100%;
42 | height: 46px;
43 | margin-top: 30px;
44 | font-size: 12px;
45 | line-height: 160.3%;
46 | border-bottom: 1px solid #e1e1e1;
47 | }
48 | `;
49 |
50 | const StHeader = styled.div`
51 | font-weight: 700;
52 | font-size: 21px;
53 | line-height: 160.3%;
54 | margin-top: 40px;
55 |
56 | & > p {
57 | display: flex;
58 | }
59 | `;
60 |
--------------------------------------------------------------------------------
/public/assets/images/img_ocean_small.svg:
--------------------------------------------------------------------------------
1 |
18 |
--------------------------------------------------------------------------------
/src/components/register/SelectHomeImage/SelectImage.tsx:
--------------------------------------------------------------------------------
1 | import ImageDiv from '@src/components/common/ImageDiv';
2 | import { Dispatch, SetStateAction } from 'react';
3 | import styled from 'styled-components';
4 |
5 | interface IProps {
6 | images: string[];
7 | representImg: string | null;
8 | setRepresentImg: Dispatch>;
9 | setNextValid: Dispatch>;
10 | }
11 |
12 | export default function SelectImage(props: IProps) {
13 | const { images, representImg, setRepresentImg, setNextValid } = props;
14 | setNextValid(true);
15 | return (
16 |
17 |
18 |
19 | {images.map((image) => (
20 | setRepresentImg(image)}
26 | />
27 | ))}
28 |
29 |
30 | );
31 | }
32 |
33 | const StSelectImage = styled.div`
34 | margin-top: 40px;
35 | padding: 0 20px;
36 |
37 | .representative {
38 | position: relative;
39 | width: 100%;
40 | max-width: 420px;
41 | height: 312px;
42 | margin-bottom: 16px;
43 | }
44 |
45 | img {
46 | border-radius: 8px;
47 | object-fit: cover;
48 | }
49 | `;
50 |
51 | const StImageContainer = styled.div`
52 | display: flex;
53 | flex-wrap: wrap;
54 | gap: 14px;
55 |
56 | .selected-image {
57 | position: relative;
58 | width: calc(calc(100% - 28px) / 3);
59 | height: 108px;
60 | cursor: pointer;
61 | }
62 | `;
63 |
--------------------------------------------------------------------------------
/public/assets/icons/ic_alert.svg:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/public/assets/images/img_ocean.svg:
--------------------------------------------------------------------------------
1 |
18 |
--------------------------------------------------------------------------------
/public/assets/images/img_upload.svg:
--------------------------------------------------------------------------------
1 |
7 |
--------------------------------------------------------------------------------
/public/assets/icons/ic_home.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/components/register/HouseType.tsx:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | function HouseType() {
4 | return (
5 |
6 |
7 |
건물 유형
8 |
14 |
16 |
방 개수
17 |
23 |
25 |
전체 평수
26 |
32 |
이런 활동은 주의해 주세요!
18 |
19 |
20 |