Skip to content

Commit

Permalink
Merge branch 'develop' into feature/Register
Browse files Browse the repository at this point in the history
  • Loading branch information
doyn511 authored Jan 13, 2024
2 parents 916937e + 4e36712 commit 4bb7c7d
Show file tree
Hide file tree
Showing 100 changed files with 2,455 additions and 22 deletions.
9 changes: 9 additions & 0 deletions .stylelintrc.json
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@
"noEmptyLineBetween": true,
"properties": [
"display",
"gap",
"justify-content",
"align-items",
"flex-direction",
Expand All @@ -30,6 +31,12 @@
"flex-grow",
"flex-shrink",
"flex-basis",
"grid-template-columns",
"grid-area",
"grid-template-rows",
"grid-column",
"grid-template-areas",
"grid-gap",
"position",
"top",
"right",
Expand Down Expand Up @@ -77,6 +84,8 @@
"border-style",
"background",
"background-color",
"background-position",
"background-size",
"color",
"font-style",
"font-weight",
Expand Down
152 changes: 151 additions & 1 deletion README.md
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/>
1 change: 1 addition & 0 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
</head>
<body>
<div id="root"></div>
<div id="lecuenote-modal"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
"@emotion/styled": "^11.11.0",
"axios": "^1.6.5",
"eslint-plugin-react": "^7.33.2",
"lottie-react": "^2.4.0",
"postcss": "^8.4.33",
"postcss-styled-syntax": "^0.6.3",
"prettier": "^3.1.1",
Expand Down
Empty file added src/Detail/components/.gitkeep
Empty file.
77 changes: 77 additions & 0 deletions src/Detail/components/BigLecueNote/BigLecueNote.style.ts
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;
`;
35 changes: 35 additions & 0 deletions src/Detail/components/BigLecueNote/index.tsx
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;
Loading

0 comments on commit 4bb7c7d

Please sign in to comment.