diff --git a/README.md b/README.md index ef0e47e..39c5425 100644 --- a/README.md +++ b/README.md @@ -1,40 +1,138 @@ -This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/pages/api-reference/create-next-app). +## Linkbrary - 코드잇 스프린트 FE 9기 +### 배포 사이트 : https://linkbrary-9-99.vercel.app/ -## Getting Started +### 프로젝트 소개 -First, run the development server: +contents-01 -```bash + +> 자신만의 링크를 저장하고 공유하는 서비스 제공 + +> 작업 기간 : 2024.11.06 (수) - 2024.11.19 (화) + + +## 팀원 소개 + +| | 박문균
**박문균 (👑 PM)** | 전상민
**전상민** | 구민지
**구민지** | 정준영
**정준영** | 홍예림
**홍예림** | +|------------|----------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------| +| 역할 | 팀장으로 프로젝트 참여
로그인 / 회원가입 기능
간편 로그인 / 회원가입 | 랜딩 페이지 구현
유저 정보 관리
소셜 공유 | 즐겨찾기 페이지
즐겨찾기 기능
링크 수정 / 삭제 기능 | - | 폴더 / 링크 관리 모달 구현
자유롭게 소개 | +| 이메일 | mungyun1234@naver.com | venise5224@gmail.com | rnalswl96@naver.com | wn8624@naver.com | hongggy@gmail.com | +| GitHub | [mungyun](https://github.com/mungyun/) | [venise5224](https://github.com/venise5224) | [99minji](https://github.com/99minji/99minji.git) | [junjeeong](https://github.com/junjeeong) | [hongggyelim](https://github.com/hongggyelim) | + +## 🚀 시작하기 + +For building and running the application you need: + +- Node.js (Version 16 or later recommended) +- npm (Included with Node.js) or yarn for dependency management. + +#### Installation + +``` +git clone +cd linkbrary +``` + +#### Running the Development Server + +``` +npm install npm run dev -# or -yarn dev -# or -pnpm dev -# or -bun dev ``` -Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. +## 기술 스택 + +![Next JS](https://img.shields.io/badge/Next-black?style=for-the-badge&logo=next.js&logoColor=white) ![TypeScript](https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white) ![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB) +![TailwindCSS](https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge&logo=tailwind-css&logoColor=white) + +![ESLint](https://img.shields.io/badge/ESLint-4B3263?style=for-the-badge&logo=eslint&logoColor=white) +![Prettier](https://img.shields.io/badge/prettier-%23F7B93E.svg?style=for-the-badge&logo=prettier&logoColor=black) +![Vercel](https://img.shields.io/badge/vercel-%23000000.svg?style=for-the-badge&logo=vercel&logoColor=white) + +![GitHub](https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white) + +![Figma](https://img.shields.io/badge/figma-%23F24E1E.svg?style=for-the-badge&logo=figma&logoColor=white) +![Notion](https://img.shields.io/badge/Notion-%23000000.svg?style=for-the-badge&logo=notion&logoColor=white) + +Zustand + +react-hot-toast +react-icons +react-spinners + + +## 유저 플로우 + +![LinkBrary_UserFlow2](https://github.com/user-attachments/assets/1d2dfd32-c839-423e-9ba2-78277f380997) + +## 주요 기능 + +📝 저장하고 싶은 링크를 추가하고 폴더로 관리하세요 + +💌 나의 링크가 저장된 폴더를 친구에게 공유하세요 + +🌟 즐겨찾는 링크를 모아보세요 + +📱 반응형 웹디자인 + +👥 간편 로그인 + +### ✅메인 랜딩 페이지(“/”) + + ‘로그인' 버튼을 클릭하면 /login 페이지로 이동합니다. + +'링크 추가하기' 버튼을 클릭하면 + +로그인이 되어있는 경우 /link 페이지로 이동합니다. + +로그인이 되지 않은 경우 /login 페이지로 이동합니다. + +### ✅로그인 (“/login” ) & 회원가입 페이지(“/signup” ) + +로그인 성공 시 토스트 창을 보여주고 “/” 페이지로 이동합니다. + +회원가입 성공 시 토스트 창을 보여주고 /login 페이지로 이동합니다. + +구글, 카카오 간편 로그인 & 회원가입이 가능합니다. + +### ✅링크 페이지(“/links”) + +'로고 버튼'을 클릭하면 / 페이지로 이동합니다. + +'폴더 추가' 버튼을 통해 폴더 추가가 가능합니다. + +추가된 폴더에서 폴더 수정/삭제가 가능합니다. + +유효한 링크를 입력하고 '추가하기' 버튼을 누르면 링크가 추가됩니다. -You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file. +추가된 링크 카드는 해당 url에서 title / discription / imageSource createdAt 를 불러옵니다. -[API routes](https://nextjs.org/docs/pages/building-your-application/routing/api-routes) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`. +링크 검색바에 검색어를 입력하면 전체 링크중 “url”, “title”, “description” 중 하나에 검색어가 포함된 링크들만 필터된 상태로 보입니다. -The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/pages/building-your-application/routing/api-routes) instead of React pages. +케밥 버튼을 통해 링크 수정/삭제가 가능합니다. -This project uses [`next/font`](https://nextjs.org/docs/pages/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel. +링크 카드의 별 버튼을 누르면 해당 링크는 즐겨찾기에 추가가 됩니다. -## Learn More +### **✅ 즐겨찾기(“/favorite”)** -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-pages-router) - an interactive Next.js tutorial. +## 노션 링크 +[Notion 구경 가기👀](https://nickel-vegetarian-de0.notion.site/Linkbrary-135f52d774a880c8ba19f7c043a4b1c0?pvs=74) -You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome! +## 브랜치 전략 +#### 📌Git Flow -## Deploy on Vercel +1. **main 브랜치** + - 항상 배포 가능한 상태를 유지하는 브랜치로, 프로덕션에 직접 반영되는 코드가 포함됩니다. +2. **develop 브랜치** + - 개발 중인 코드가 모이는 브랜치로, 모든 새로운 기능과 수정 사항이 병합되기 전에 여기서 통합 테스트가 이루어집니다. +3. **feature 브랜치** + - 각 기능(또는 이슈)을 개발하기 위해 만들어지는 브랜치로, 일반적으로 `feature/이슈명` 형태로 생성됩니다. + - 작업 완료 후 **develop 브랜치**에 병합됩니다. +4. **hotfix 브랜치** + - 프로덕션(main 브랜치)에서 발견된 긴급한 버그를 수정하기 위해 사용하는 브랜치입니다. + - 수정 후 main과 develop 브랜치에 병합됩니다. -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/pages/building-your-application/deploying) for more details.