Merge pull request #288 from Team-TenTen/develop

[Release] v0.1.10

README.md

@@ -1,36 +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">
 
-## Getting Started
+![main](https://github.com/Team-TenTen/LinkHub-FE/assets/39931980/3627e31b-e8fe-471f-a1df-6106a072d563)
 
-First, run the development server:
+<h1>LinkHub</h1>
 
-```bash
+[![Hits](https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fgithub.com%2Fprgrms-fe-devcourse%2FFEDC4_Angola_NaYoung&count_bg=%2379C83D&title_bg=%23555555&icon=&icon_color=%23E7E7E7&title=hits&edge_flat=false)](https://hits.seeyoufarm.com)
+
+<a href="https://link-hub.site/">LinkHub 바로가기</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="https://www.notion.so/prgrms/10-c76d868c091f457298748b77cca6ae86">팀 노션</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="https://www.notion.so/prgrms/LinkHub-546003d57aa34297a09ee98efa65cc25">기획서</a>
+
+<br/>
+
+</div>
+
+## 실행 방법
+
+```
+npm install
+```
+
+```
 npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
+npm run build
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+<br>
+
+## 기술 스택
+
+<div align="center">
+
+<img width="800" alt="image" src="https://github.com/Team-TenTen/LinkHub-FE/assets/39931980/81a3591c-e7e7-4281-b172-33e265e77872">
+
+</div>
+
+<br>
+
+## 팀원 소개
+
+<div align="center">
+
+<table>
+  <tr>
+    <td><img src="https://avatars.githubusercontent.com/u/66124037?v=4" width="186" height="186"/></td>
+    <td><img src="https://avatars.githubusercontent.com/u/39931980?v=4" width="186" height="186"/></td>
+    <td><img src="https://avatars.githubusercontent.com/u/49032882?v=4" width="186" height="186"/></td>
+  </tr>
+  <tr>
+     <td align="center"><a href="https://github.com/JIY00N2">권기범</a><br><br><span>스페이스 생성/수정<br>카카오 로그인<br>회원가입<br>유저 정보 수정<br>공용 헤더</span></a>
+    </td>
+    <td align="center"><a href="https://github.com/dudwns">김영준</a><br><br><span>링크 생성/수정/삭제 및 좋아요<br>프로필 및 팔로우<br>스페이스 즐겨찾기<br>알림 조회 및 삭제<br>CI/CD 구축</span>
+    </td>
+    <td align="center"><a href="https://github.com/hayamaster">이승희</a><br><br><span>스페이스 댓글<br>검색<br>메인<br>무한 스크롤 기능<br>CI/CD 구축</span>
+    </td>
+  </tr>
+</table>
+
+</div>
+
+<br>
+
+## 서비스 개요
+
+### LinkHub란 ?
+
+**링크 아카이빙 및 공유 서비스**
+
+<br>
+
+### 서비스 주요 기능
+
+**1. 링크 아카이빙** <br>
+
+  <img width="800" alt="image" src="https://github.com/Team-TenTen/LinkHub-FE/assets/39931980/a1b91932-d7b1-41d4-82a3-110539a103d7">
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+<br>
+<br>
 
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+**2. 공유 아카이빙 공간** <br>
 
-## Learn More
+  <img width="800" alt="image" src="https://github.com/Team-TenTen/LinkHub-FE/assets/39931980/922bef19-3d59-47c9-841e-a8852a3a4dbc">
 
-To learn more about Next.js, take a look at the following resources:
+<br>
+<br>
 
-- [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.
+**3. 스페이스 즐겨찾기** <br>
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+  <img width="800" alt="image" src="https://github.com/Team-TenTen/LinkHub-FE/assets/39931980/3f8178e5-b808-4424-a0ca-ac7951d86e89">
 
-## Deploy on Vercel
+<br>
+<br>
 
-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.
+**4. 스페이스 가져오기** <br>
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+  <img width="800" alt="image" src="https://github.com/Team-TenTen/LinkHub-FE/assets/39931980/02bf4698-e386-4794-92af-838eb8b2e404">

package.json

@@ -14,6 +14,7 @@
     "@heroicons/react": "^2.0.18",
     "@tanstack/react-query": "^5.8.4",
     "@types/js-cookie": "^3.0.6",
+    "browser-image-compression": "^2.0.2",
     "dayjs": "^1.11.10",
     "js-cookie": "^3.0.5",
     "lodash": "^4.17.21",

src/components/Space/SpaceForm.tsx

@@ -10,6 +10,7 @@ import {
   fetchSettingSpace,
 } from '@/services/space/space'
 import { CreateSpaceReqBody, SpaceDetailResBody } from '@/types'
+import imageCompression from 'browser-image-compression'
 import Image from 'next/image'
 import { usePathname, useRouter } from 'next/navigation'
 import Button from '../common/Button/Button'
@@ -35,7 +36,6 @@ const SpaceForm = ({ spaceType, space }: SpaceFormProps) => {
   const spaceId = Number(path.split('/')[2])
   const router = useRouter()
   const getSpace = useGetSpace()
-
   const {
     register,
     getValues,
@@ -58,15 +58,18 @@ const SpaceForm = ({ spaceType, space }: SpaceFormProps) => {
     setThumnail(space?.spaceImagePath)
   }, [space])
 
-  const handleFileChange = (e?: ChangeEvent<HTMLInputElement>) => {
+  const handleFileChange = async (e?: ChangeEvent<HTMLInputElement>) => {
     e?.preventDefault()
     if (e?.target.files) {
       const blob = new Blob([e.target.files[0]], {
         type: e.target.files[0].type,
       })
       const thumbNailImage = URL.createObjectURL(blob)
       setThumnail(thumbNailImage)
-      setImageFile(e?.target.files[0])
+      const resizingBlob = await imageCompression(e?.target.files[0], {
+        maxSizeMB: 0.5,
+      })
+      setImageFile(resizingBlob)
     }
   }
 

src/components/UserInfoForm/UserInfoForm.tsx

@@ -8,6 +8,7 @@ import { fetchPostUserProfile } from '@/services/user/profile/profile'
 import { UserProfileResBody } from '@/types'
 import { cls } from '@/utils'
 import { CheckIcon } from '@heroicons/react/24/solid'
+import imageCompression from 'browser-image-compression'
 import Cookies from 'js-cookie'
 import { useRouter } from 'next/navigation'
 import Button from '../common/Button/Button'
@@ -67,7 +68,7 @@ const UserInfoForm = ({ userData, formType }: UserInfoFormProps) => {
     },
   })
 
-  const handleFileChange = (e?: ChangeEvent<HTMLInputElement>) => {
+  const handleFileChange = async (e?: ChangeEvent<HTMLInputElement>) => {
     e?.preventDefault()
 
     if (e?.target.files) {
@@ -77,7 +78,10 @@ const UserInfoForm = ({ userData, formType }: UserInfoFormProps) => {
 
       const thumbNailImage = URL.createObjectURL(blob)
       setThumnail(thumbNailImage)
-      setImageFile(e.target.files[0])
+      const resizingBlob = await imageCompression(e?.target.files[0], {
+        maxSizeMB: 0.5,
+      })
+      setImageFile(resizingBlob)
     }
   }
 

src/components/common/SearchModal/SearchModal.tsx

@@ -57,7 +57,7 @@ const SearchModal = ({ onClose }: SearchModalProps) => {
           </div>
           <div className="grow">
             <Input
-              {...register('search', { required: true })}
+              {...register('search')}
               placeholder="검색어를 입력하세요."
               inputButton={true}
               buttonText="검색"

src/components/common/SearchModal/hooks/useSearchModal.ts

@@ -6,6 +6,7 @@ import {
 } from 'react-hook-form'
 import { mock_trendData } from '@/data'
 import { useRouter } from 'next/navigation'
+import { notify } from '../../Toast/Toast'
 import { SearchFormValues } from '../SearchModal'
 
 export interface useSearchModalProps {
@@ -43,6 +44,11 @@ const useSearchModal = ({
   }
 
   const onSubmit: SubmitHandler<SearchFormValues> = (data) => {
+    if (data.search.length === 1) {
+      notify('info', '검색어는 최소 2글자여야 합니다.')
+      return
+    }
+
     router.push(`/search?target=${data.target}&keyword=${data.search}`)
   }
 

src/data/index.ts

@@ -19,7 +19,7 @@ export const mock_LinkData = [
   },
   {
     id: 2,
-    title: '배포!!!!!!!',
+    title: '링크 제목',
     url: 'https://github.com',
     tagName: '오둥이',
     tagColor: 'pink',

src/hooks/useProfileSpacesSearch.ts

@@ -1,5 +1,6 @@
 import { SubmitHandler, UseFormSetValue } from 'react-hook-form'
 import { SearchFormValue } from '@/app/(routes)/user/[userId]/space/page'
+import { notify } from '@/components/common/Toast/Toast'
 import { useRouter } from 'next/navigation'
 
 export interface UseSpaceSearchProps {
@@ -18,6 +19,10 @@ const useProfileSpacesSearch = ({
     type === 'space' ? `/user/${userId}/space?` : `/user/${userId}/favorite?`
 
   const onSubmit: SubmitHandler<SearchFormValue> = (data) => {
+    if (data.keyword.length === 1) {
+      notify('info', '검색어는 최소 2글자여야 합니다.')
+      return
+    }
     if (category) {
       router.push(`${basePath}category=${category}&keyword=${data.keyword}`)
     } else {