Skip to content

Commit

Permalink
Merge branch 'sprint/refactor-the-project' into feat/ci
Browse files Browse the repository at this point in the history
  • Loading branch information
guesung committed Aug 13, 2024
2 parents 7df470a + e5abab1 commit f0dbcab
Show file tree
Hide file tree
Showing 64 changed files with 350 additions and 400 deletions.
32 changes: 15 additions & 17 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,38 +1,37 @@
<img align="left" width="170" src="https://github.com/pose-picker/.github/assets/75469131/012da976-4d52-45e9-abfc-fdd700b927be" />

<img height="30" src="https://github.com/pose-picker/.github/assets/75469131/87357edf-8a99-4d4e-88ce-afb48752e45e"/> &nbsp;
---
## <img height="30" src="https://github.com/pose-picker/.github/assets/75469131/87357edf-8a99-4d4e-88ce-afb48752e45e"/> &nbsp;

*포토부스에서 고민하는 당신을 위한 포즈추천 서비스*
_포토부스에서 고민하는 당신을 위한 포즈추천 서비스_

<a href="https://www.posepicker.site/pick">Website</a> | <a href='https://www.instagram.com/posepicker/'>Instagram</a> | <a href='https://github.com/pose-picker'>Github</a> | <a href='https://litt.ly/posepicker'>Feedback</a>
<a href="https://www.posepicker.site/pick">Website</a> | <a href='https://www.instagram.com/posepicker/'>Instagram</a> | <a href='https://github.com/pose-picker'>Github</a> | <a href='https://litt.ly/posepicker'>Feedback</a>

<br/>

## 🪄 Introduce

> 네컷사진 찍을 때면 늘 포즈가 고민되지 않나요? <br/>
포즈피커가 포즈 고민을 해결해 드릴게요! <br/>
미리 포즈 고민할 필요 없이, 찍기 직전에 빠르고 재밌게 포즈를 추천해 주는 포즈피커를 이용해 보세요!
> 포즈피커가 포즈 고민을 해결해 드릴게요! <br/>
> 미리 포즈 고민할 필요 없이, 찍기 직전에 빠르고 재밌게 포즈를 추천해 주는 포즈피커를 이용해 보세요!
<br/>

<img align="right" width="350" src="https://github.com/pose-picker/.github/assets/75469131/1e23a8de-d331-41ba-bc7a-f2bc62f7de01"/>

✨ <br/>
*“빨리 빨리! 우리 무슨 포즈로 찍을래?”* <br/>
_“빨리 빨리! 우리 무슨 포즈로 찍을래?”_ <br/>
시간 없을 땐 **포즈픽**으로 빠르게 랜덤 포즈를 추천받아보세요.

<br/>

🃏 <br/>
*“이미 있는 포즈는 시시해, 우리만의 특별한 포즈가 필요해!”* <br/>
_“이미 있는 포즈는 시시해, 우리만의 특별한 포즈가 필요해!”_ <br/>
**포즈톡**에서 뽑은 랜덤 제시어로 나만의 개성있는 포즈를 완성해보세요.

<br/>

🎞 <br/>
*“또 어떤 포즈가 있을까? 우리 이 포즈로 찍어볼까?”* <br/>
_“또 어떤 포즈가 있을까? 우리 이 포즈로 찍어볼까?”_ <br/>
**포즈피드**에서 특정한 상황을 빛내줄 포즈를 찾고, 친구한테 공유해보세요.

<br/>
Expand All @@ -44,10 +43,8 @@
![18](https://github.com/dnd-side-project/dnd-9th-5-frontend/assets/75469131/7b4bfdb1-a8bf-4cde-b57c-c254fe221985)
![19](https://github.com/dnd-side-project/dnd-9th-5-frontend/assets/75469131/a3fc9896-5fc4-4612-949e-557f3f088815)


<br/>


## 🎞 Demo

[PosePicker Demo Video](https://youtube.com/shorts/dP7VdyoieMs?si=hv7ou7y1iZwkc7m3)
Expand All @@ -56,12 +53,12 @@

## 🙌 Team

| Design | FrontEnd | BackEnd |
|:-:|:-:|:-:|
|<img src='https://hackmd.io/_uploads/r1YwPun63.png' width="200" /> |<img src='https://avatars.githubusercontent.com/u/75469131?v=4' width="200" />|<img src="https://avatars.githubusercontent.com/u/67156494?v=4" width="200"/>|
| 이지영 | [seondal](https://github.com/seondal) | [olive-su](https://github.com/olive-su) |
|<img src="https://hackmd.io/_uploads/Bybimdn62.jpg" width="200"/> |<img src='https://avatars.githubusercontent.com/u/62178788?v=4' width="200"/>|<img src="https://avatars.githubusercontent.com/u/61766218?v=4" width="200"/>|
| 김수빈 | [guesung](https://github.com/guesung) | [leejw-lu](https://github.com/leejw-lu) |
| Design | FrontEnd | BackEnd |
| :----------------------------------------------------------------: | :----------------------------------------------------------------------------: | :---------------------------------------------------------------------------: |
| <img src='https://hackmd.io/_uploads/r1YwPun63.png' width="200" /> | <img src='https://avatars.githubusercontent.com/u/75469131?v=4' width="200" /> | <img src="https://avatars.githubusercontent.com/u/67156494?v=4" width="200"/> |
| 이지영 | [seondal](https://github.com/seondal) | [olive-su](https://github.com/olive-su) |
| <img src="https://hackmd.io/_uploads/Bybimdn62.jpg" width="200"/> | <img src='https://avatars.githubusercontent.com/u/62178788?v=4' width="200"/> | <img src="https://avatars.githubusercontent.com/u/61766218?v=4" width="200"/> |
| 김수빈 | [guesung](https://github.com/guesung) | [leejw-lu](https://github.com/leejw-lu) |

<br/>

Expand All @@ -72,6 +69,7 @@
<br/>

## 📂 Folder Structure

> Next13의 App Rounting을 기반으로 하고있습니다.
```
Expand Down
15 changes: 8 additions & 7 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
"@tanstack/react-query": "^4.32.6",
"axios": "^1.4.0",
"clsx": "^2.0.0",
"es-toolkit": "^1.15.1",
"eslint": "^8.46.0",
"eslint-config-next": "^13.4.12",
"framer-motion": "^10.15.0",
Expand All @@ -34,6 +35,10 @@
"typescript": "5.1.6"
},
"devDependencies": {
"@tanstack/react-query-devtools": "^4.35.0",
"@types/node": "20.4.5",
"@types/react": "18.2.17",
"@types/react-dom": "18.2.7",
"@typescript-eslint/eslint-plugin": "^6.2.1",
"@typescript-eslint/parser": "^6.2.1",
"autoprefixer": "^10.4.14",
Expand All @@ -47,11 +52,7 @@
"postcss": "^8.4.27",
"prettier": "^3.0.0",
"prettier-plugin-tailwindcss": "^0.4.1",
"tailwindcss": "^3.3.3",
"@types/node": "20.4.5",
"@types/react": "18.2.17",
"@types/react-dom": "18.2.7",
"@tanstack/react-query-devtools": "^4.35.0",
"svgstore-cli": "^2.0.1"
"svgstore-cli": "^2.0.1",
"tailwindcss": "^3.3.3"
}
}
}
2 changes: 1 addition & 1 deletion src/apis/apis.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import {
} from '.';
import privateApi from './config/privateApi';
import publicApi from './config/publicApi';
import { KAKAO_REDIRECT_URI } from '@/constants/env';
import { KAKAO_REDIRECT_URI } from '@/constants';

export const getPosePick = (peopleCount: number) =>
publicApi.get<PosePickResponse>(`/pose/pick/${peopleCount}`);
Expand Down
8 changes: 6 additions & 2 deletions src/apis/config/privateApi.ts
Original file line number Diff line number Diff line change
@@ -1,8 +1,12 @@
import axios from 'axios';

import { CustomInstance } from './type';
import { ACCESS_TOKEN, ERROR_UNAUTHORIZED, ERROR_UNSUPPORTED_MEDIA_TYPE } from '@/constants';
import { BASE_API_URL } from '@/constants/env';
import {
ACCESS_TOKEN,
BASE_API_URL,
ERROR_UNAUTHORIZED,
ERROR_UNSUPPORTED_MEDIA_TYPE,
} from '@/constants';
import { getClientCookie, removeClientCookie } from '@/utils';

const privateApi: CustomInstance = axios.create({
Expand Down
2 changes: 1 addition & 1 deletion src/apis/config/publicApi.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import axios from 'axios';

import { CustomInstance } from './type';
import { BASE_API_URL } from '@/constants/env';
import { BASE_API_URL } from '@/constants';

const publicApi: CustomInstance = axios.create({
baseURL: `${BASE_API_URL}/api`,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@

import { usePathname } from 'next/navigation';

import Header from '.';
import FilterTab from './FilterTab';
import MyposeTab from './MyposeTab';
import Tab from './Tab';
import { Spacing } from '../Spacing';
import Header from '@/components/Header';
import FilterTab from '@/components/Header/FilterTab';
import MyposeTab from '@/components/Header/MyposeTab';
import Tab from '@/components/Header/Tab';
import { Spacing } from '@/components/Spacing';

export default function MainHeader() {
const curPath = usePathname();
Expand Down
23 changes: 23 additions & 0 deletions src/app/(Main)/feed/FeedComponent.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
'use client';

import { QueryAsyncBoundary } from '@suspensive/react-query';

import FeedContent from './FeedContent';
import FilterSheet from './FilterSheet';
import { RejectedFallback } from '@/components/ErrorBoundary';
import { Loading } from '@/components/Loading';
import { PageAnimation } from '@/components/PageAnimation';

export default function FeedComponent() {
return (
<QueryAsyncBoundary
rejectedFallback={RejectedFallback}
pendingFallback={<Loading className="h-[calc(100dvh-178px)]" />}
>
<PageAnimation>
<FeedContent />
<FilterSheet />
</PageAnimation>
</QueryAsyncBoundary>
);
}
4 changes: 2 additions & 2 deletions src/app/(Main)/feed/FeedContent.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@ import { usePoseFeedQuery } from '@/apis';
import { PrimaryButton } from '@/components/Button';
import EmptyCase from '@/components/Feed/EmptyCase';
import FeedSection from '@/components/Feed/FeedSection';
import { URL } from '@/constants/url';
import useFilterState from '@/hooks/useFilterState';
import { URL } from '@/constants';
import { useFilterState } from '@/hooks';

export default function FeedContent() {
const { filterState } = useFilterState();
Expand Down
9 changes: 4 additions & 5 deletions src/app/(Main)/feed/FilterSheet.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,8 @@ import { FilterTagsResponse, useFilterTagQuery } from '@/apis';
import { BottomDiv, PrimaryButton } from '@/components/Button';
import BottomSheet from '@/components/Modal/BottomSheet';
import { SelectionBasic, SelectionTagList } from '@/components/Selection';
import { frameCountList, peopleCountList } from '@/constants/data';
import useBottomSheet from '@/hooks/useBottomSheet';
import useFilterState from '@/hooks/useFilterState';
import { frameCountList, peopleCountList } from '@/constants';
import { useBottomSheet, useFilterState } from '@/hooks';

export default function FilterSheet() {
const { data: tagListData } = useFilterTagQuery();
Expand Down Expand Up @@ -74,8 +73,8 @@ export default function FilterSheet() {
</section>
</div>
<BottomDiv>
<PrimaryButton type="outline" icon="restart" text="필터 초기화" onClick={resetFilter} />
<PrimaryButton type="fill" text="포즈보기" onClick={decideFilter} />
<PrimaryButton variant="outline" icon="restart" text="필터 초기화" onClick={resetFilter} />
<PrimaryButton variant="fill" text="포즈보기" onClick={decideFilter} />
</BottomDiv>
</BottomSheet>
);
Expand Down
22 changes: 2 additions & 20 deletions src/app/(Main)/feed/page.tsx
Original file line number Diff line number Diff line change
@@ -1,23 +1,5 @@
'use client';

import { QueryAsyncBoundary } from '@suspensive/react-query';

import FeedContent from './FeedContent';
import FilterSheet from './FilterSheet';
import { RejectedFallback } from '@/components/ErrorBoundary';
import { Loading } from '@/components/Loading';
import { PageAnimation } from '@/components/PageAnimation';
import FeedComponent from './FeedComponent';

export default function Feed() {
return (
<QueryAsyncBoundary
rejectedFallback={RejectedFallback}
pendingFallback={<Loading className="h-[calc(100dvh-178px)]" />}
>
<PageAnimation>
<FeedContent />
<FilterSheet />
</PageAnimation>
</QueryAsyncBoundary>
);
return <FeedComponent />;
}
4 changes: 2 additions & 2 deletions src/app/(Main)/layout.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import MainHeader from '@/components/Header/MainHeader';
import MainHeader from './MainHeader';
import { StrictPropsWithChildren } from '@/types';

export default function MainLayout({ children }: StrictPropsWithChildren) {
return (
<div className="flex h-full flex-col px-20">
<div className="flex flex-col h-full px-20">
<MainHeader />
{children}
</div>
Expand Down
23 changes: 23 additions & 0 deletions src/app/(Main)/mypose/MyPoseComponent.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
'use client';

import { PrimaryButton } from '@/components/Button';
import EmptyCase from '@/components/Feed/EmptyCase';
import { PreparingPopup } from '@/components/Modal';
import { useOverlay } from '@/components/Overlay/useOverlay';

export default function MyPoseComponent() {
const { open } = useOverlay();

return (
<EmptyCase
title={'나만의 포즈를 추가해 보세요!'}
text={'포즈피드에 네컷사진을 업로드할 수 있어요'}
>
<PrimaryButton
onClick={() => open(({ exit }) => <PreparingPopup onClose={exit} />)}
text="포즈 등록하기"
variant="secondary"
/>
</EmptyCase>
);
}
2 changes: 1 addition & 1 deletion src/app/(Main)/mypose/bookmark/BookmarkEmpty.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export default function BookmarkEmpty() {
text={`북마크 버튼으로 포즈를 보관할 수 있어요.\n포즈피드에서 멋진 포즈를 찾아 보관해 보세요.`}
>
<Link href={'/feed'}>
<PrimaryButton text="포즈피드 바로가기" type="secondary" />
<PrimaryButton text="포즈피드 바로가기" variant="secondary" />
</Link>
</EmptyCase>
);
Expand Down
20 changes: 2 additions & 18 deletions src/app/(Main)/mypose/page.tsx
Original file line number Diff line number Diff line change
@@ -1,23 +1,7 @@
'use client';

import { PrimaryButton } from '@/components/Button';
import EmptyCase from '@/components/Feed/EmptyCase';
import { PreparingPopup } from '@/components/Modal';
import { useOverlay } from '@/components/Overlay/useOverlay';
import MyPoseComponent from './MyPoseComponent';

export default function Page() {
const { open } = useOverlay();

return (
<EmptyCase
title={'나만의 포즈를 추가해 보세요!'}
text={'포즈피드에 네컷사진을 업로드할 수 있어요'}
>
<PrimaryButton
onClick={() => open(({ exit }) => <PreparingPopup onClose={exit} />)}
text="포즈 등록하기"
type="secondary"
/>
</EmptyCase>
);
return <MyPoseComponent />;
}
62 changes: 62 additions & 0 deletions src/app/(Main)/pick/PickComponent.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
'use client';

import { delay } from 'es-toolkit';
import { useState } from 'react';
import Lottie from 'react-lottie-player';

import lottiePick from '#/lotties/pick.json';
import { usePosePickQuery } from '@/apis';
import { BottomFixedDiv, PrimaryButton } from '@/components/Button';
import PoseImage from '@/components/Modal/PoseImage';
import { SelectionBasic } from '@/components/Selection';
import { peopleCountList } from '@/constants';
import { useDidMount } from '@/hooks';

const DEFAULT_IMAGE = '/images/image-frame.png';

export default function PickComponent() {
const [countState, setCountState] = useState(1);
const [isLottiePlaying, setIsLottiePlaying] = useState(true);
const { refetch, data } = usePosePickQuery(countState);
const imageSrc = data?.poseInfo?.imageKey || DEFAULT_IMAGE;

useDidMount(async () => {
await delay(2200);
setIsLottiePlaying(false);
});

const handlePickClick = async () => {
refetch();
setIsLottiePlaying(true);
await delay(900);
setIsLottiePlaying(false);
};

return (
<>
<div className="py-16">
<SelectionBasic
data={peopleCountList.slice(1)}
state={countState}
setState={setCountState}
/>
</div>
<div className="relative flex grow">
{isLottiePlaying && (
<div className="absolute inset-x-0 inset-y-0 z-10 flex justify-center bg-black">
<Lottie animationData={lottiePick} play />
</div>
)}
<div className="absolute inset-x-0 inset-y-0 bg-black">
<PoseImage src={imageSrc} />
</div>
</div>
<BottomFixedDiv>
<PrimaryButton
text={!!imageSrc ? `${countState}인 포즈 뽑기` : '인원수 선택하고 포즈 뽑기'}
onClick={handlePickClick}
/>
</BottomFixedDiv>
</>
);
}
Loading

0 comments on commit f0dbcab

Please sign in to comment.