Merge pull request #301 from mash-up-kr/develop

Main Release/1.8.0

Author: kikiyeom

.env.example

@@ -1 +1,2 @@
 BASE_URL=
+KAKAO_KEY=

.yarn/cache/@types-daum-postcode-npm-2.0.3-f480b4f904-72283bd2c3.zip

@@ -0,0 +1,7 @@
+export {};
+
+declare global {
+  interface Window {
+    daum: any;
+  }
+}

@types/custom-types/global.d.ts

@@ -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",

package.json

@@ -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>

src/components/Schedule/ScheduleTemplate/ScheduleTemplate.component.tsx

@@ -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;
+`;

src/components/Schedule/ScheduleTemplate/ScheduleTemplate.styled.ts

@@ -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>

src/components/ScheduleDetail/ScheduleInfoList/ScheduleInfoList.component.tsx

@@ -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;
   `}
 `;

src/components/common/RadioButton/RadioButton.styled.ts

@@ -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';

src/hooks/index.ts

@@ -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;

src/hooks/useScript.ts

@@ -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>

src/pages/ScheduleDetail/ScheduleDetail.page.tsx

@@ -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 {