Merge pull request #208 from gsainfoteam/207-feature-imageurl-imageur…

…ls-in-get-notice

⚡ Change imageUrl to imagesUrl

README.md

@@ -1,8 +1,16 @@
+
 This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 
 ## Getting Started
 
-First, run the development server:
+
+
+First, generate gql codes:
+```bash
+  yarn generate
+```
+
+Then, run the development server:
 
 ```bash
 npm run dev

src/api/notice/notice-server.ts

@@ -14,11 +14,5 @@ export const getAllNotices = async (
         Authorization: `Bearer ${cookieStore.get('access_token')?.value}`,
       },
     })
-    .then(({ data }) => ({
-      ...data,
-      list: data.list.map(({ imageUrl, ...notice }) => ({
-        ...notice,
-        imageUrl: imageUrl ? imageUrl : null,
-      })),
-    }));
+    .then((res) => res.data);
 };

src/api/notice/notice.ts

@@ -23,7 +23,7 @@ export interface NoticeSearchParams {
   my?: 'own' | 'reminders';
 }
 
-interface NoticeBase {
+export interface Notice {
   id: number;
   views: number;
   currentDeadline?: dayjs.Dayjs | string | null;
@@ -34,8 +34,8 @@ interface NoticeBase {
   tags: Tag[];
   logName?: string;
   contents: Content[];
+  imagesUrl: string[];
   files?: NoticeFile[] | null;
-  body: string;
 }
 
 export interface Content {
@@ -62,12 +62,7 @@ export interface Tag {
   name: string;
 }
 
-export interface Notice extends NoticeBase {
-  imageUrl: string | null;
-}
-
-export interface NoticeDetail extends NoticeBase {
-  imagesUrl: string[];
+export interface NoticeDetail extends Notice {
   reminder: boolean;
   authorId: string;
 }
@@ -82,10 +77,9 @@ export const getAllNotices = async (
 ) =>
   api.get<Notices>('/notice', { params }).then(({ data }) => ({
     ...data,
-    list: data.list.map(({ imageUrl, currentDeadline, ...notice }) => ({
+    list: data.list.map(({ currentDeadline, ...notice }) => ({
       ...notice,
       currentDeadline: currentDeadline ?? null,
-      imageUrl: imageUrl ?? null,
       contents: notice.contents.map(({ deadline, ...content }) => ({
         ...content,
         deadline: deadline ?? null,
@@ -109,13 +103,12 @@ export const GET_NOTICES = gql(`
       list {
         id
         views
-        body
         currentDeadline
         createdAt
         updatedAt
         deletedAt
         author
-        imageUrl
+        imagesUrl
         tags {
           id
           name

src/app/api/graphql/schema.graphql

@@ -27,22 +27,20 @@ type NoticeFile {
 type Notice {
   id: Int!
   views: Int!
-  body: String!
   currentDeadline: Date
   createdAt: Date!
   updatedAt: Date!
   deletedAt: Date
   author: String!
   tags: [Tag!]!
-  imageUrl: String
+  imagesUrl: [String!]!
   contents: [Content!]!
   files: [NoticeFile!]
 }
 
 type DetailedNotice {
   id: Int!
   views: Int!
-  body: String!
   currentDeadline: Date
   createdAt: Date!
   updatedAt: Date!

src/app/components/organisms/Zabo/ImageZabo.stories.tsx

@@ -16,7 +16,7 @@ const Template: StoryFn<typeof Zabo> = (args) => {
   return <Zabo {...args} t={t} />;
 };
 const args = {
-  imageUrl: 'https://picsum.photos/200/300',
+  imagesUrl: ['https://picsum.photos/200/300'],
   title: '23년도 인포팀 신규 부원 모집',
   content: '인포팀에서는 23년도 신규 부원을 모집합니다. 많은 지원 바랍니다.',
   createdAt: dayjs('2023-02-14T11:57:18.740Z'),

src/app/components/organisms/Zabo/ImageZabo.tsx

@@ -6,10 +6,10 @@ import { PropsWithLng } from '@/app/i18next';
 import getLocaleContents from '@/utils/getLocaleContents';
 
 import DDay from '../../molecules/DDay';
-import { ImageZaboProps, ZaboOrigin, ZaboSize } from './Zabo';
+import { ZaboOrigin, ZaboProps, ZaboSize } from './Zabo';
 
 const ImageZabo = <Origin extends ZaboOrigin>({
-  imageUrl,
+  imagesUrl,
   contents,
   createdAt,
   views,
@@ -19,7 +19,7 @@ const ImageZabo = <Origin extends ZaboOrigin>({
   width,
   height,
   lng,
-}: ImageZaboProps<Origin> & PropsWithLng) => {
+}: ZaboProps<Origin> & PropsWithLng) => {
   const localContents = getLocaleContents(contents, lng);
 
   const deadline = rawDeadline ? dayjs(rawDeadline) : undefined;
@@ -37,7 +37,7 @@ const ImageZabo = <Origin extends ZaboOrigin>({
         }
       >
         <ZaboImage
-          src={imageUrl}
+          src={imagesUrl[0]}
           alt={title}
           className="rounded border border-secondaryText object-cover"
           {...size}

src/app/components/organisms/Zabo/TextZabo.tsx

@@ -5,7 +5,7 @@ import { PropsWithLng } from '@/app/i18next';
 import getLocaleContents from '@/utils/getLocaleContents';
 
 import DDay from '../../molecules/DDay';
-import { TextZaboProps, ZaboOrigin } from './Zabo';
+import { ZaboOrigin, ZaboProps } from './Zabo';
 
 const TextZabo = <Origin extends ZaboOrigin>({
   contents,
@@ -17,7 +17,7 @@ const TextZabo = <Origin extends ZaboOrigin>({
   height,
   width,
   lng,
-}: TextZaboProps<Origin> & PropsWithLng) => {
+}: ZaboProps<Origin> & PropsWithLng) => {
   const deadline = rawDeadline ? dayjs(rawDeadline) : undefined;
   const origin = width ? 'width' : 'height';
   const antiOrigin = width ? 'height' : 'width';

src/app/components/organisms/Zabo/Zabo.tsx

@@ -16,24 +16,16 @@ export type ZaboProps<Origin extends ZaboOrigin> = PropsWithT<
   Notice & ZaboSize<Origin>
 >;
 
-export type ImageZaboProps<Origin extends ZaboOrigin> = ZaboProps<Origin> & {
-  imageUrl: string;
-};
-
-export type TextZaboProps<Origin extends ZaboOrigin> = ZaboProps<Origin>;
-
 const Zabo = <IsImage extends boolean>(
-  props: IsImage extends true
-    ? ImageZaboProps<ZaboOrigin> & PropsWithLng
-    : TextZaboProps<ZaboOrigin> & PropsWithLng,
+  props: ZaboProps<ZaboOrigin> & PropsWithLng,
 ) =>
-  'imageUrl' in props && props.imageUrl && props.imageUrl.length > 0 ? (
+  props.imagesUrl.length > 0 ? (
     <ImageZabo
-      {...(props as ImageZaboProps<ZaboOrigin> & PropsWithLng)}
-      imageUrl={props.imageUrl || ''}
+      {...(props as ZaboProps<ZaboOrigin> & PropsWithLng)}
+      imagesUrl={props.imagesUrl}
     />
   ) : (
-    <TextZabo {...(props as TextZaboProps<ZaboOrigin> & PropsWithLng)} />
+    <TextZabo {...(props as ZaboProps<ZaboOrigin> & PropsWithLng)} />
   );
 
 export default Zabo;

src/app/components/templates/HowAboutThese/HowAboutThese.tsx

@@ -20,14 +20,7 @@ const HowAboutThese = ({ lng }: PropsWithLng) => {
     variables: { offset: 0, limit: ITEMS_PER_CALL },
   });
 
-  const notices = useMemo(
-    () =>
-      data?.notices.list.map(({ imageUrl, ...notice }) => ({
-        ...notice,
-        imageUrl: imageUrl ?? null,
-      })) ?? [],
-    [data],
-  );
+  const notices = useMemo(() => data?.notices.list ?? [], [data]);
 
   useEffect(() => {
     const observer = new IntersectionObserver(

src/app/components/templates/ResultZabo/ResultImageZabo.tsx

@@ -11,7 +11,7 @@ import getLocaleContents from '@/utils/getLocaleContents';
 import HighlightedText from '../../molecules/HighlightedText';
 import ZaboImage from '../../molecules/ZaboImage';
 import Tags from '../../organisms/Tags';
-import { ResultImageZaboProps } from './ResultZabo';
+import { ResultZaboProps } from './ResultZabo';
 
 const ResultImageZabo = async ({
   contents,
@@ -21,11 +21,10 @@ const ResultImageZabo = async ({
   currentDeadline,
   tags,
   searchQuery,
-
-  imageUrl,
+  imagesUrl,
   id,
   lng,
-}: ResultImageZaboProps) => {
+}: ResultZaboProps) => {
   const { t } = await createTranslation(lng);
 
   const localeContents = getLocaleContents(contents, lng);
@@ -37,7 +36,7 @@ const ResultImageZabo = async ({
       <div className="box-border flex w-full flex-nowrap items-stretch justify-start gap-5 overflow-hidden rounded border border-secondaryText">
         <ZaboImage
           width={230} // handle mobile
-          src={imageUrl}
+          src={imagesUrl[0]}
           alt={title}
           style={{ objectFit: 'cover', objectPosition: 'center' }}
         />

src/app/components/templates/ResultZabo/ResultTextZabo.tsx

@@ -13,7 +13,6 @@ import { ResultZaboProps } from './ResultZabo';
 
 const ResultTextZabo = async ({
   contents,
-  body,
   createdAt,
   views,
   author,

src/app/components/templates/ResultZabo/ResultZabo.tsx

@@ -15,17 +15,11 @@ export type ResultZaboProps = PropsWithLng<
   }
 >;
 
-export type ResultImageZaboProps = ResultZaboProps & {
-  imageUrl: string;
-};
-
-export type ResultTextZaboProps = ResultZaboProps;
-
 const ResultZabo = (props: ResultZaboProps) => {
-  return props.imageUrl ? (
-    <ResultImageZabo {...(props as ResultImageZaboProps)} />
+  return props.imagesUrl.length > 0 ? ( // image exists in zabo
+    <ResultImageZabo {...(props as ResultZaboProps)} />
   ) : (
-    <ResultTextZabo {...(props as ResultTextZaboProps)} />
+    <ResultTextZabo {...(props as ResultZaboProps)} />
   );
 };
 

src/app/components/templates/SearchResults/SearchResults.tsx

@@ -33,7 +33,7 @@ const Results = async ({
               event="search_result_click"
               properties={{
                 location: 'SearchPage',
-                isText: notice.imageUrl === null,
+                isText: notice.imagesUrl.length === 0,
               }}
               key={notice.id}
             >