-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'develop' into feature/Register
- Loading branch information
Showing
100 changed files
with
2,455 additions
and
22 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1 +1,151 @@ | ||
아루밍 비니 쩡우 도리 큐비들 사랑해~❤️ | ||
<div align="center"> | ||
<h1> 💌 Lecue 💌 </h1> | ||
|
||
<img alt="로고 대문 이미지" width="257" alt="image" src="https://github.com/Team-Lecue/Lecue-Client/assets/65286685/f5211974-831b-4743-9948-345ec16fc196"> | ||
</div> | ||
|
||
<br/> | ||
|
||
## 💡서비스 소개 | ||
다 함께 마음을 전해요. 최애를 위한 우리들의 롤링페이퍼, 레큐 | ||
|
||
- 최애만을 위한 레큐북을 만들고 링크로 전달해요. | ||
- 각자의 마음을 담아 레큐노트를 작성해요. | ||
- 다 함께 레큐북을 꾸며요. | ||
|
||
<br/> | ||
|
||
## ✨ OUR TEAM | ||
|
||
| <img src="https://avatars.githubusercontent.com/u/80264647?v=4" width="200" height="200" alt="프로필사진"> | <img src="https://avatars.githubusercontent.com/u/65286685?v=4" width="200" height="200" alt="프로필사진"> | <img src="https://avatars.githubusercontent.com/u/60962533?v=4" width="200" height="200" alt="프로필사진"> | <img src="https://velog.velcdn.com/images/aroo_ming/post/a9437eb2-9104-4c8b-912f-1a8b6eaf6f9d/image.jpeg" width="200" height="200" alt="프로필사진"> | | ||
| :-------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------: | | ||
| <div align = "center"><b>[짱리드]아름</b></div> | <div align = "center"><b>은빈</b></div> | <div align = "center"><b>정우</b></div> | <div align = "center"><b>도윤</b></div> | | ||
| [@Arooming](https://github.com/Arooming) | [@eunbeann](https://github.com/eunbeann) | [@jungwoo3490](https://github.com/jungwoo3490) | [@binllionaire](https://github.com/binllionaire) | | ||
|
||
|
||
<br/> | ||
|
||
<h2> 🛠 기술스택 </h2> | ||
|
||
<div align="center"> | ||
|
||
| 역할 | 종류 | | ||
| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ||
| Library | ![React](https://img.shields.io/badge/React-61DAFB?style=for-the-badge&logo=React&logoColor=black) | | ||
| Programming Language | ![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?style=for-the-badge&logo=TypeScript&logoColor=white) | | ||
| Styling | ![Emotion](https://img.shields.io/badge/Emotion-000000?style=for-the-badge&logo=emotion&logoColor=white) | | ||
| Data Fetching | ![React Query](https://img.shields.io/badge/react--query-FF4154?style=for-the-badge&logo=react-query&logoColor=white) | | ||
| State Management | ![State Management](https://img.shields.io/badge/recoil-007af4?style=for-the-badge&logo=Recoil&logoColor=white) | | ||
| Formatting | ![ESLint](https://img.shields.io/badge/ESLint-4B3263?style=for-the-badge&logo=eslint&logoColor=white) ![Prettier](https://img.shields.io/badge/prettier-1A2C34?style=for-the-badge&logo=prettier&logoColor=F7BA3E) ![StyleLint](https://img.shields.io/badge/stylelint-E0EFEF?style=for-the-badge&logo=stylelint&logoColor=000) | | ||
| Package Manager | ![Yarn](https://img.shields.io/badge/Yarn-2C8EBB?style=for-the-badge&logo=yarn&logoColor=white) | | ||
| Version Control | ![Git](https://img.shields.io/badge/git-%23F05033.svg?style=for-the-badge&logo=git&logoColor=white) ![GitHub](https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white) | | ||
| Deployment | ![Vercel](https://img.shields.io/badge/Vercel-000000?style=for-the-badge&logo=vercel&logoColor=white) | | ||
|
||
</div> | ||
|
||
<br/> | ||
|
||
<h2> 💡 주요 라이브러리 </h2> | ||
|
||
``` | ||
"@emotion/react": "^11.11.3", | ||
"@emotion/styled": "^11.11.0", | ||
"axios": "^1.6.5", | ||
"postcss": "^8.4.33", | ||
"react-query": "^3.39.3", | ||
"react-router-dom": "^6.21.1", | ||
"vite-plugin-svgr": "^4.2.0" | ||
``` | ||
|
||
<br/> | ||
|
||
<h2> 📄 컨벤션 및 브랜치 전략 </h2> | ||
<h3>🔽💌 큐비들 공간 💌🔽</h3> | ||
<a href="https://rileybyeon.notion.site/88b85dd3178242b9a78458970a6aa5d7?pvs=4"><img src="https://img.shields.io/badge/Notion 링크-white?style=for-the-badge&logo=Notion&logoColor=000000"/></a> | ||
|
||
<br/> | ||
|
||
## 💻 Commit 컨벤션 | ||
|
||
- 기본적인것 (feat, fix, chore, ..) 위주로만 지키기! | ||
|
||
| 제목 | 내용 | | ||
| ----------- | -------------------------------------------------------------------------------- | | ||
| init | 브랜치 첫 커밋 | | ||
| feat | 새로운 기능을 추가할 경우 | | ||
| style | 기능에 영향을 주지 않는 커밋, 코드 순서, css 등의 포맷에 관한 커밋 | | ||
| fix | 버그를 고친 경우 | | ||
| refactor | 코드 리팩토링에 대한 커밋 | | ||
| docs | 문서를 수정한 경우, 파일 삭제, 파일명 수정 등 | | ||
| chore | 빌드 테스트 업데이트, 패키지 매니저를 설정하는 경우, 주석 추가, 자잘한 문서 수정 | | ||
|
||
<br/> | ||
|
||
## 🎋 브랜치 전략 | ||
- **`feature/페이지명`** | ||
- feature/SelectPage (파스칼) | ||
- **`페이지명/#이슈번호-기능설명`** | ||
- SelectPage/#3-select-custom (-로 연결) | ||
|
||
- 페이지명/이슈번호-기능설명 브랜치 ⇒ feature/페이지명으로 머지 | ||
- feature/페이지명 완료 되면 ⇒ develop으로 머지 | ||
- 중간 중간 develop ⇒ main 머지 | ||
|
||
<br/> | ||
|
||
## 💒 브랜치 운영 | ||
- **main**: 우리가 개발 최종시에 Merge를 하는 곳 ❗️ | ||
- **develop** : 개발할때 Merge | ||
- **hotfix** : QA 시 수정사항 반영 | ||
- **feature**: 기능을 개발하면서 각자가 사용할 브랜치 | ||
- **test**: 개인 연습 브랜치 | ||
|
||
<br/> | ||
|
||
<h2> 📁 폴더 구조 </h2> | ||
|
||
- 지역성의 원칙을 고려한 폴더구조 | ||
- 한글 네이밍 가능 | ||
|
||
``` | ||
├── public 🗂 썸네일 이미지, 로고 이미지 저장 | ||
├── .eslintrc.cjs ✨ 린트 설정 | ||
├── .prettierrc.cjs ✨ 프리티어 설정 | ||
├── package.json 📦 설치된 패키지를 관리하는 파일 | ||
└── src | ||
├── App.tsx ✡️ 앱의 라우팅과 글로벌 스타일 지정 | ||
│ | ||
├── main.tsx | ||
│ | ||
├── Router.tsx ✡️ 라우터 설정 | ||
│ | ||
├── assets | ||
│ ├── icon 🖼 이미지 파일들 저장 | ||
│ ├── └── svgs 🌁 svg 파일들 저장 | ||
│ | ||
├── components 🗂 공통 컴포넌트들 저장 | ||
│ └── Modal.tsx | ||
│ | ||
├── Login 🗂 각 기능 별 폴더 생성 | ||
│ ├── pages 🗂 라우팅 시 보여질 페이지 컴포넌트 저장 | ||
│ │ └── LoginPage.tsx | ||
│ ├── components 🗂 해당 기능을 구현하는데 필요한 컴포넌트 저장 | ||
│ │ ├── LoginFooter.tsx | ||
│ │ ├── LoginCallback.tsx | ||
│ │ └── LoginHome.tsx | ||
│ │ | ||
│ └── constants 🗂 상수 파일 저장 | ||
│ | ||
├── styles 🗂 전역 스타일 관련 파일들 저장 | ||
│ ├── GlobalStyle.ts | ||
│ └── theme.ts | ||
│ | ||
├── utils 🗂 util 함수 관련 파일들 저장 | ||
│ | ||
├── libs 🗂 라이브러리리 관련 파일 저장 | ||
│ ├── hooks 🗂 커스텀 훅 저장 | ||
│ ├── api.ts | ||
│ | ||
``` | ||
|
||
<br/> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Empty file.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,77 @@ | ||
import styled from '@emotion/styled'; | ||
|
||
export const BigLecueNoteWrapper = styled.div<{ | ||
noteBackgroundColor: number; | ||
noteBackgroundImage: string; | ||
noteTextColor: number; | ||
}>` | ||
width: 100%; | ||
height: 34.2rem; | ||
padding: 2rem 1.1rem 1.7rem 1.9rem; | ||
border-radius: 0.6rem; | ||
background: ${({ theme, noteBackgroundColor, noteBackgroundImage }) => { | ||
if (noteBackgroundColor === -1) { | ||
return `url(${noteBackgroundImage})`; | ||
} else { | ||
switch (noteBackgroundColor) { | ||
case 1: | ||
return theme.colors.sub_pink; | ||
case 2: | ||
return theme.colors.sub_blue; | ||
case 3: | ||
return theme.colors.sub_green; | ||
case 4: | ||
return theme.colors.sub_purple; | ||
case 5: | ||
return theme.colors.sub_yellow; | ||
case 6: | ||
return theme.colors.sub_ivory; | ||
default: | ||
return 'transparent'; | ||
} | ||
} | ||
}}; | ||
background-size: cover; | ||
color: ${({ theme, noteTextColor }) => { | ||
switch (noteTextColor) { | ||
case 0: | ||
return theme.colors.white; | ||
case 1: | ||
return theme.colors.BG; | ||
} | ||
}}; | ||
`; | ||
|
||
export const BigLecueNoteNickname = styled.p` | ||
${({ theme }) => theme.fonts.Head1_B_20}; | ||
`; | ||
|
||
export const BigLecueNoteContentWrapper = styled.div` | ||
display: flex; | ||
justify-content: center; | ||
align-items: center; | ||
overflow: scroll; | ||
width: 100%; | ||
height: 22.4rem; | ||
padding-right: 0.8rem; | ||
margin-top: 1.5rem; | ||
`; | ||
|
||
export const BigLecueNoteContent = styled.div` | ||
width: 100%; | ||
max-height: 100%; | ||
${({ theme }) => theme.fonts.Body1_R_16}; | ||
`; | ||
|
||
export const BigLecueNoteDate = styled.p` | ||
width: 100%; | ||
padding-right: 0.8rem; | ||
margin-top: 2.1rem; | ||
${({ theme }) => theme.fonts.E_Body2_R_14}; | ||
text-align: end; | ||
`; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,35 @@ | ||
import * as S from './BigLecueNote.style'; | ||
|
||
interface BigLecueNoteProps { | ||
content: string; | ||
noteDate: string; | ||
noteNickname: string; | ||
noteTextColor: number; | ||
noteBackgroundColor: number; | ||
noteBackgroundImage: string; | ||
} | ||
|
||
function BigLecueNote({ | ||
content, | ||
noteDate, | ||
noteNickname, | ||
noteTextColor, | ||
noteBackgroundColor, | ||
noteBackgroundImage, | ||
}: BigLecueNoteProps) { | ||
return ( | ||
<S.BigLecueNoteWrapper | ||
noteBackgroundColor={noteBackgroundColor} | ||
noteBackgroundImage={noteBackgroundImage} | ||
noteTextColor={noteTextColor} | ||
> | ||
<S.BigLecueNoteNickname>{noteNickname}</S.BigLecueNoteNickname> | ||
<S.BigLecueNoteContentWrapper> | ||
<S.BigLecueNoteContent>{content}</S.BigLecueNoteContent> | ||
</S.BigLecueNoteContentWrapper> | ||
<S.BigLecueNoteDate>{noteDate}</S.BigLecueNoteDate> | ||
</S.BigLecueNoteWrapper> | ||
); | ||
} | ||
|
||
export default BigLecueNote; |
Oops, something went wrong.