Merge pull request #107 from Eagle2gle/dev

[release] 4차 배포
Eagle2gle · Mar 23, 2023 · 2acf4b3 · 2acf4b3
2 parents 38d662e + 8bb1649
commit 2acf4b3
Show file tree

Hide file tree

Showing 36 changed files with 1,450 additions and 336 deletions.
diff --git a/.env b/.env
@@ -1 +1,2 @@
-SERVER_DOMAIN=http://wealth-server.kro.kr
+SERVER_DOMAIN=http://wealth-server.kro.kr
+NEXT_PUBLIC_WS_URL=ws://wealth-server.kro.kr:7070/ws-market
diff --git a/README.md b/README.md
@@ -1,38 +1,95 @@
-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).
+<div align="center">
+  <br />
+  <h2>🌴 부의 마블 - Frontend 🌴</h2>
+  <div>
+  우리가 어렸을 때 한 번쯤은 부루마블 게임을 하면서 해외에 땅을 사고 집을 짓고 호텔을 지은 적이 많이 있습니다. <br />
+  즐겁게 게임을 했던 그 순간을 현실에서 진행하며 꿈을 이루어 가는 것은 어떨까요? <br /> 휴양지에 투자하여 이익도 얻고 내가 원할 때는 휴양도 즐기는 YOLO의 삶을 저희와 함께 이루어가요.
+  </div>
+<br />
 
-## Getting Started
+[부의 마블 기획서](https://jinsungone.notion.site/b93a27bdd0f444d9a6e4d0dbe4f6ae0b)
+  <p>
+      <a href="http://wealth-marble.kro.kr/" target="_blank">부의 마블 서비스 바로가기</a>
+  </p>
+  <br />
+  <img src="https://img.shields.io/badge/Next.js-000000?style=flat-square&logo=Next.js&logoColor=white"/>
+  <img src="https://img.shields.io/badge/Typescript-3178C6?style=flat-square&logo=Typescript&logoColor=white"/>
+  <br />
+  <img src="https://img.shields.io/badge/React Query-FF4154?style=flat-square&logo=React Query&logoColor=white"/>
+  <img src="https://img.shields.io/badge/Redux Toolkit-764ABC?style=flat-square&logo=Redux&logoColor=white"/>
+      <img src="https://img.shields.io/badge/NPM-CB3837?style=flat-square&logo=NPM&logoColor=white"/>
+  <img src="https://img.shields.io/badge/Tailwind CSS-06B6D4?style=flat-square&logo=Tailwind CSS&logoColor=white"/>
+  <br />
+  <img src="https://img.shields.io/badge/Sentry-362D59?style=flat-square&logo=Sentry&logoColor=white"/>
+  <img src="https://img.shields.io/badge/Github Actions-2088FF?style=flat-square&logo=Github Actions&logoColor=white"/>
+  <br />
 
-First, run the development server:
+  <img src="https://img.shields.io/badge/ORACLE-F80000?style=flat-square&logo=oracle&logoColor=white"/>
+    <img src="https://img.shields.io/badge/Google Cloud-4285F4?style=flat-square&logo=Google Cloud&logoColor=white"/>
+  <img src="https://img.shields.io/badge/NGINX-009639?style=flat-square&logo=NGINX&logoColor=white"/>
+<!-- 아이콘 찾는 사이트: https://simpleicons.org/?q=query -->
+    <!-- <img src="https://img.shields.io/badge/Socket.io-4.5.3-010101?logo=Socket.io"> -->
+  <br />
+  <br />
+  <p>
 
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-```
+  기술스택 선정 이유는 [이곳에서](https://github.com/Eagle2gle/wealth-marble-frontend/wiki/%EA%B8%B0%EC%88%A0-%EC%8A%A4%ED%83%9D) 보실 수 있습니다.
+  </p>
+</div>
+<br />
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+## ⭐ 주요 기능
+1. 부동산 공모 등록 기능
+    - 해외에 휴양지를 짓고 싶은 사람이 부동산 공모를 등록할 수 있는 기능
+2. 부동산 공모 참여 기능
+    - 해외 휴양지를 만드는 과정에 참여를 하고 싶은 투자자들이 돈을 넣을 수 있는 기능
+3. 지분 거래 기능
+    - 해외 휴양지 지분을 가지고 있는 사람들과 일반 사용자들이 공모 후 풀린 지분을 구매하거나 판매 가능
 
-You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+<br />
 
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
+## ⚙️ 시스템 아키텍처
+<img width="828" alt="부의마블 프론트엔드 시스템 아키텍처" src="https://user-images.githubusercontent.com/55318618/225216191-ff3738ca-a8f0-4b63-a983-f260b8c48460.png">
 
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+<br />
 
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+## 🔎 프로젝트 중점 사항
+- GitHub Actions를 활용한 CI/CD 환경 구축
+- Nginx의 reverse proxy와 virtual host를 활용한 개발 빌드와 프로덕션 빌드 배포
+- React query와 Intersection Observer API를 활용한 검색 목록 무한 스크롤 기능 구현
+- React query와 Suspense를 활용한 Concurrent UI Pattern 적용 (스켈레톤 UI 적용 예정)
+- React query를 활용한 관심 상품 Optimistic Update 적용 (예정)
 
-## Learn More
+<br />
 
-To learn more about Next.js, take a look at the following resources:
+## 👥 팀원
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+<table>
+  <tbody>
+    <tr>
+        <td align="center"><a href="https://github.com/m4nd4r1n">김도형</a></td>
+        <td align="center"><a href="https://github.com/YuriKwon">권유리</a></td>
+        <td align="center"><a href="https://github.com/CEOJINSUNG">김진성</a></td>
+        <td align="center"><a href="https://github.com/NaayoungKwon">권나영</a></td>
+    </tr>
+    <tr>
+      <td align="center">
+        <img src="https://user-images.githubusercontent.com/34162358/224486418-5d615f74-9505-4870-b1ca-9a74fd3ea2a9.png" width="100px;" height="100px;" alt="김도형"/>
+      </td>
+      <td align="center">
+        <img src="https://user-images.githubusercontent.com/34162358/224486435-dc1c67ff-cdc3-46ce-ad92-d25b287b0c99.jpeg" width="100px;" height="100px;" alt="권유리"/>
+      <td align="center">
+        <img src="https://user-images.githubusercontent.com/34162358/224486392-cfdeef7c-4210-4646-a689-caa6a8e07464.jpeg" width="100px;" height="100px;"        </td>
+      <td align="center">
+        <img src="https://user-images.githubusercontent.com/34162358/224486703-1621bd02-ed4d-4eef-873a-f76078c586be.jpeg" width="100px;" height="100px;" alt="권나영"/>
+       </td>
+    </td>
+    </tr>
+    <tr>
+        <td align="center">Frontend</td>
+        <td align="center">Frontend</td>
+        <td align="center">Backend</td>
+        <td align="center">Backend</td>
+    </tr>
+  </tbody>
+</table>
diff --git a/next.config.js b/next.config.js
@@ -14,6 +14,10 @@ const moduleExports = {
         protocol: 'https',
         hostname: 'wealth-marble-image.s3.ap-northeast-2.amazonaws.com',
       },
+      {
+        protocol: 'https',
+        hostname: '**',
+      },
     ],
   },
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
     "@next/font": "13.1.2",
     "@reduxjs/toolkit": "^1.9.1",
     "@sentry/nextjs": "^7.30.0",
+    "@stomp/stompjs": "^7.0.0",
     "@tanstack/react-query": "^4.22.0",
     "@tanstack/react-query-devtools": "^4.22.0",
     "@types/node": "18.11.18",

diff --git a/public/images/thumbnail.jpeg b/public/images/thumbnail.jpeg
diff --git a/src/components/RecentUploadCarousel.tsx b/src/components/RecentUploadCarousel.tsx
@@ -1,61 +1,54 @@
 import Image from 'next/image';
 import Link from 'next/link';
 
-import { useQuery } from '@tanstack/react-query';
+import { useSuspendedQuery } from '@/hooks/useSuspendedQuery';
+import { api } from '@/libs/client/api';
+import { RecentCahootListType } from '@/types/cahoot';
+import type { Response } from '@/types/response';
 
 import Carousel from './common/Carousel';
 
-interface MockDataType {
-  id: number;
-  title: string;
-  stockStart: string;
-  expectedRateOfReturn: string;
-  images: string;
-}
-
-// TODO: API 연동
 const RecentUploadCarousel = () => {
-  const { data } = useQuery<MockDataType[]>({
-    queryKey: ['RecentUploadCarouselData'],
-    queryFn: () =>
-      fetch(`${process.env.NEXT_PUBLIC_HOST}/RecentUploadCarouselData.json`).then((res) =>
-        res.json()
-      ),
-  });
-
+  const {
+    data: {
+      data: { result },
+    },
+  } = useSuspendedQuery<Response<RecentCahootListType>>(['RecentUploadCarouselData'], () =>
+    api.get('cahoots/recent').json()
+  );
   return (
     <div className="flex flex-col gap-2 px-3 md:px-0">
       <div className="flex flex-col">
         <h1 className="font-bold">최근에 올라온 공모</h1>
-        <h2 className="text-black/60 text-xs font-semibold">
+        <h2 className="text-xs font-semibold text-black/60">
           참여하면 수익도 얻고 휴양지 예약권도 얻을 수 있다고!?{' '}
         </h2>
       </div>
-      <Carousel itemCount={data?.length ?? 0}>
-        {data?.map(({ id, title, images, expectedRateOfReturn }) => (
+      <Carousel itemCount={result?.length ?? 0}>
+        {result?.map(({ id, title, images, expectedRateOfReturn }) => (
           <Link
             key={id}
             href={`/cahoots/detail/${id}`}
             className="carousel-item flex-col items-center font-semibold"
           >
             <div className="avatar -z-10">
               {/* 이미지 */}
-              {/* TODO: 이미지 연결 */}
               <div className="w-24 rounded-full bg-grey">
-                {/* <Image
-                  alt="공모 이미지"
-                  src={images}
-                  className="object-contain"
-                  fill
-                  width={96}
-                  height={96}
-                /> */}
+                {images[0] && (
+                  <Image
+                    alt="공모 이미지"
+                    src={images[0]}
+                    className="rounded-full object-contain"
+                    fill
+                    sizes="96px"
+                  />
+                )}
               </div>
             </div>
-            <div className="w-32 overflow-ellipsis text-center overflow-hidden text-sm whitespace-nowrap">
+            <div className="w-32 overflow-hidden overflow-ellipsis whitespace-nowrap text-center text-sm">
               {title}
             </div>
-            <span className="text-center text-black/60 text-xs font-semibold">
+            <span className="text-center text-xs font-semibold text-black/60">
               예상 수익률 <span className="text-main">{expectedRateOfReturn}%</span>
             </span>
           </Link>
@@ -64,5 +57,4 @@ const RecentUploadCarousel = () => {
     </div>
   );
 };
-
 export default RecentUploadCarousel;