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

Main Release/1.8.0 #301

Merged
merged 7 commits into from
Mar 8, 2024
Merged
Changes from all commits
Commits
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
1 change: 1 addition & 0 deletions .env.example
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
BASE_URL=
KAKAO_KEY=
Binary file not shown.
7 changes: 7 additions & 0 deletions @types/custom-types/global.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
export {};

declare global {
interface Window {
daum: any;
}
}
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -46,6 +46,7 @@
"@testing-library/react": "^12.1.2",
"@testing-library/react-hooks": "^7.0.2",
"@testing-library/user-event": "^13.5.0",
"@types/daum-postcode": "^2.0.3",
"@types/editorjs__header": "^2.6.0",
"@types/jest": "^27.4.0",
"@types/lodash-es": "^4.17.6",
Original file line number Diff line number Diff line change
@@ -1,15 +1,16 @@
import React, { useMemo } from 'react';
import { useFieldArray, useFormContext } from 'react-hook-form';
import { useRecoilValue } from 'recoil';
import { DatePickerField, InputField, SelectField } from '@/components';
import { Button, DatePickerField, InputField, RadioButtonField, SelectField } from '@/components';
import { InputSize } from '@/components/common/Input/Input.component';
import * as Styled from './ScheduleTemplate.styled';
import { $generations } from '@/store';
import { SelectOption } from '@/components/common/Select/Select.component';
import { SessionTemplate } from '../SessionTemplate';
import Plus from '@/assets/svg/plus-20.svg';
import { EventCreateRequest } from '@/types';
import { ScheduleFormValues } from '@/utils';
import { LocationType, ScheduleFormValues } from '@/utils';
import { useScript } from '@/hooks';

const DEFAULT_SESSION: EventCreateRequest = {
startedAt: '',
@@ -18,15 +19,23 @@ const DEFAULT_SESSION: EventCreateRequest = {
contentsCreateRequests: [],
};

const DAUM_POSTCODE_SCRIPT = '//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js';
const DAUM_POSTCODE_API_URL = 'https://dapi.kakao.com/v2/local/search/address';

const ScheduleTemplate = () => {
const { register, control, formState, getValues } = useFormContext<ScheduleFormValues>();
const { register, control, formState, getValues, watch, setValue } =
useFormContext<ScheduleFormValues>();
const generations = useRecoilValue($generations);

const locationType = watch('locationType');

const { fields, append, remove } = useFieldArray({
name: 'sessions',
control,
});

useScript(DAUM_POSTCODE_SCRIPT);

const generationOptions = useMemo<SelectOption[]>(() => {
return generations.map(({ generationNumber }) => ({
label: `${generationNumber}기`,
@@ -37,6 +46,36 @@ const ScheduleTemplate = () => {
const defaultOption = generationOptions.find(
(option) => option.value === getValues('generationNumber')?.toString(),
);
const handleClickAddressSearch = () => {
new window.daum.Postcode({
async oncomplete(data: { address: string }) {
const res = await fetch(`${DAUM_POSTCODE_API_URL}?query=${data.address}`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
Authorization: `KakaoAK ${process.env.KAKAO_KEY}`,
},
});
const json = await res.json();

const {
address_name: address,
x: longitude,
y: latitude,
building_name: buildingName,
} = json.documents[0].road_address;
const placeName = buildingName || address;

setValue('locationInfo', {
address,
latitude,
longitude,
placeName,
});
setValue('placeName', placeName);
},
}).open();
};

return (
<>
@@ -66,6 +105,45 @@ const ScheduleTemplate = () => {
defaultDate={getValues('date')}
{...register('date', { required: true })}
/>
<div>
<Styled.InputLabel htmlFor="location">
<span>장소</span>
<Styled.RequiredDot />
</Styled.InputLabel>
<Styled.RadioButtonGroup>
<RadioButtonField
label="오프라인"
required
value={LocationType.OFFLINE}
{...register('locationType', { required: true })}
/>
<RadioButtonField
label="온라인"
required
value={LocationType.ONLINE}
{...register('locationType', { required: true })}
/>
</Styled.RadioButtonGroup>
{locationType === LocationType.OFFLINE && (
<Styled.LocationWrapper>
<Styled.InputWithButton>
<InputField
$size="md"
placeholder="장소"
{...register('placeName', { required: locationType === LocationType.OFFLINE })}
/>
<Button shape="primaryLine" $size="md" onClick={handleClickAddressSearch}>
주소 검색
</Button>
</Styled.InputWithButton>
<InputField
$size="md"
placeholder="상세 주소를 입력해 주세요 (ex. 동, 호, 층 등)"
{...register('detailAddress')}
/>
</Styled.LocationWrapper>
)}
</div>
</Styled.ScheduleContent>
<Styled.SessionContent>
<Styled.Title>세션 정보</Styled.Title>
Original file line number Diff line number Diff line change
@@ -6,7 +6,6 @@ export const ScheduleContent = styled.div`
display: flex;
flex-direction: column;
gap: 2rem;
height: 36.9rem;
padding: 2.4rem;
background-color: ${theme.colors.white};
border: 0.1rem solid ${theme.colors.gray30};
@@ -43,3 +42,38 @@ export const AddButton = styled.button`
margin-top: 2.4rem;
background-color: transparent;
`;

export const InputLabel = styled.label`
${({ theme }) => css`
${theme.fonts.medium15}
display: flex;
margin-bottom: 0.6rem;
color: ${theme.colors.gray70};
`}
`;

export const RequiredDot = styled.span`
width: 0.6rem;
min-width: 0.6rem;
height: 0.6rem;
margin: 0.8rem 0 0 0.6rem;
background-color: #eb6963;
border-radius: 50%;
`;

export const RadioButtonGroup = styled.div`
display: flex;
gap: 2rem;
margin-bottom: 0.6rem;
`;

export const InputWithButton = styled.div`
display: flex;
gap: 1rem;
`;

export const LocationWrapper = styled.div`
display: flex;
flex-direction: column;
gap: 0.6rem;
`;
Original file line number Diff line number Diff line change
@@ -11,6 +11,10 @@ interface ScheduleInfoListProps {
startedAt: string;
publishedAt?: string;
status: ValueOf<typeof ScheduleStatus>;
location: {
address: string | null;
placeName: string;
};
}

const ScheduleInfoList = ({
@@ -20,6 +24,7 @@ const ScheduleInfoList = ({
createdAt,
publishedAt,
status,
location,
}: ScheduleInfoListProps) => {
const scheduleInfoListItem = useMemo(() => {
return [
@@ -39,6 +44,13 @@ const ScheduleInfoList = ({
label: '등록 일시',
value: formatDate(createdAt, 'YYYY년 M월 D일 A hh시 mm분'),
},
{
label: '장소',
value:
location.address === null
? location.placeName
: `${location.placeName}, ${location.address}`,
},
{
label: '배포 일시',
value: formatDate(publishedAt, 'YYYY년 M월 D일 A hh시 mm분'),
@@ -48,7 +60,7 @@ const ScheduleInfoList = ({
value: getScheduleStatusText(status),
},
];
}, [createdAt, generationNumber, name, publishedAt, startedAt, status]);
}, [createdAt, generationNumber, name, publishedAt, startedAt, status, location]);

return (
<Styled.ScheduleInfoList>
2 changes: 1 addition & 1 deletion src/components/common/RadioButton/RadioButton.styled.ts
Original file line number Diff line number Diff line change
@@ -67,6 +67,6 @@ export const RadioButtonMark = styled.span`
export const RadioButtonText = styled.span`
${({ theme }) => css`
${theme.fonts.medium14}
padding-left: 3.8rem;
padding-left: 3rem;
`}
`;
1 change: 1 addition & 0 deletions src/hooks/index.ts
Original file line number Diff line number Diff line change
@@ -13,3 +13,4 @@ export { default as useHistory } from './useHistory';
export { default as usePrompt } from './usePrompt';
export { default as useMyTeam } from './useMyTeam';
export { default as useRefreshSelectorFamilyByKey } from './useRefreshSelectorFamilyByKey';
export { default as useScript } from './useScript';
15 changes: 15 additions & 0 deletions src/hooks/useScript.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import { useEffect } from 'react';

const useScript = (url: string) => {
useEffect(() => {
const script = document.createElement('script');
script.src = url;
script.async = true;
document.body.appendChild(script);
return () => {
document.body.removeChild(script);
};
}, [url]);
};

export default useScript;
2 changes: 2 additions & 0 deletions src/pages/ScheduleDetail/ScheduleDetail.page.tsx
Original file line number Diff line number Diff line change
@@ -29,6 +29,7 @@ const ScheduleDetail = () => {
publishedAt,
status,
eventList: sessionList,
location,
} = useRecoilValue($scheduleDetail({ scheduleId: scheduleId ?? '' }));

const isPublished = status === ScheduleStatus.PUBLIC;
@@ -147,6 +148,7 @@ const ScheduleDetail = () => {
createdAt={createdAt}
publishedAt={publishedAt}
status={status}
location={location}
/>
</Styled.Content>
<Styled.Content>
14 changes: 14 additions & 0 deletions src/types/dto/schedule.ts
Original file line number Diff line number Diff line change
@@ -31,6 +31,10 @@ export interface ScheduleCreateRequest {
name: string;
startedAt: string;
eventsCreateRequests: EventCreateRequest[];
address?: string;
latitude?: number;
longitude?: number;
placeName?: string;
}

export interface ScheduleUpdateRequest {
@@ -39,6 +43,10 @@ export interface ScheduleUpdateRequest {
name: string;
startedAt: string;
eventsCreateRequests: EventCreateRequest[];
address?: string;
latitude?: number;
longitude?: number;
placeName?: string;
}

export interface ScheduleResponse {
@@ -51,6 +59,12 @@ export interface ScheduleResponse {
publishedAt?: string;
eventList: Session[];
status: ValueOf<typeof ScheduleStatus>;
location: {
address: string | null;
latitude: number | null;
longitude: number | null;
placeName: string;
};
}

export interface QRCodeRequest {
Loading

Unchanged files with check annotations Beta

return () => {
editorRef.current?.destroy();
};
}, []);

Check warning on line 51 in src/components/common/Editor/Editor.component.tsx

GitHub Actions / build (18.x)

React Hook useEffect has a missing dependency: 'initEditor'. Either include it or remove the dependency array
useEffect(() => {
if (!editorRef.current) return;
setEditorData(newEditorData);
editorRef.current.render(newEditorData);
setLocalStorageData(id, newEditorData);
}, [editorReady, savedData]);

Check warning on line 59 in src/components/common/Editor/Editor.component.tsx

GitHub Actions / build (18.x)

React Hook useEffect has a missing dependency: 'id'. Either include it or remove the dependency array
/** Tab을 입력했을 때 에디터 밖으로 TabIndex가 변경되는 것을 방지 */
useEffect(() => {
return { columns, data };
};
it('data가 없는 경우, data가 없다는 문구가 렌더링 되어야 한다.', () => {});

Check warning on line 168 in src/components/common/Table/Table.test.tsx

GitHub Actions / build (18.x)

Test has no assertions
it('기본 필드가 렌더링 되어야 한다.', () => {
// Given
);
});
it('data를 받아오는 중에는 loading 화면이 렌더링 되어야 한다.', () => {});

Check warning on line 192 in src/components/common/Table/Table.test.tsx

GitHub Actions / build (18.x)

Test has no assertions
it('정렬을 할 수 있는 column은 화살표 icon이 함께 렌더링되어야 한다.', () => {});

Check warning on line 194 in src/components/common/Table/Table.test.tsx

GitHub Actions / build (18.x)

Test has no assertions
it('정렬을 할 수 있는 column은 클릭할 수 있으며, 바인딩 된 핸들러가 실행되어야 한다.', () => {});

Check warning on line 196 in src/components/common/Table/Table.test.tsx

GitHub Actions / build (18.x)

Test has no assertions
it('row를 선택할때는 checkbox가 렌더링 되어야 한다.', () => {});

Check warning on line 198 in src/components/common/Table/Table.test.tsx

GitHub Actions / build (18.x)

Test has no assertions
it('row를 선택하면, 해당 row가 선택되어야 한다.', () => {});

Check warning on line 200 in src/components/common/Table/Table.test.tsx

GitHub Actions / build (18.x)

Test has no assertions
it('row를 전부 선택하면 전체 checkbox가 선택되어야 한다.', () => {});

Check warning on line 202 in src/components/common/Table/Table.test.tsx

GitHub Actions / build (18.x)

Test has no assertions
it('전체 checkbox를 선택하면, 전체 row가 선택되어야 한다.', () => {});

Check warning on line 204 in src/components/common/Table/Table.test.tsx

GitHub Actions / build (18.x)

Test has no assertions
it('넘겨받은 renderProps로 Cell을 커스텀할 수 있어야 한다.', () => {
// // Given