Skip to content

Refactor: 프로젝트의 전반적인 리팩토링 #83

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 47 commits into from
Closed
Show file tree
Hide file tree
Changes from 28 commits
Commits
Show all changes
47 commits
Select commit Hold shift + click to select a range
888f9f8
✨ feat: CI 추가 (Type, Lint 체크)
guesung Aug 9, 2024
56d106d
refactor: `yarn lint`를 적용한다
guesung Aug 13, 2024
b69c9f1
fix: 미사용 컴포넌트를 제거한다
guesung Aug 13, 2024
a3090c8
fix: 빌드를 위해 임시로 타입을 수정한다
guesung Aug 13, 2024
07b832c
feat: metadata에 base url을 추가한다
guesung Aug 13, 2024
c2b2137
refactor: auth를 Sub분류 폴더에 이동한다
guesung Aug 13, 2024
8b3cf78
refactor: pick컴포넌트를 분리한다
guesung Aug 13, 2024
acbc3f6
refactor: 불필요한 image상태값을 제거한다
guesung Aug 13, 2024
b756c85
refactor: cn사용 & 변수명 직관적으로 수정한다
guesung Aug 13, 2024
f531849
refactor: isLottie -> isLottiePlaying으로 네이밍을 직관적으로 수정한다
guesung Aug 13, 2024
f54894d
refactor: 불필요한 isRendered 상태값을 제거한다
guesung Aug 13, 2024
90c39f4
feat: toss/es-toolkit을 설치한다
guesung Aug 13, 2024
8a9cffb
refactor: delay함수를 추가함으로써, 조금 더 직관적으로 함수를 리팩토링한다
guesung Aug 13, 2024
bd4a859
fix: es-toolkit을 재설치한다
guesung Aug 13, 2024
ecb8552
refactor: 공통 스타일을 바깥으로 뺀다
guesung Aug 13, 2024
ad8f75a
Merge branch 'develop' into sprint/refactor-the-project
guesung Aug 13, 2024
41d2b33
Merge remote-tracking branch 'origin/develop' into sprint/refactor-th…
guesung Aug 13, 2024
905ec6b
refactor: feed페이지 컴포넌트를 분리한다
guesung Aug 13, 2024
cb572d6
refactor: mypose 컴포넌트를 분리한다
guesung Aug 13, 2024
9fc2f27
refactor: talk페이지에서 tooltip컴포넌트를 분리한다
guesung Aug 13, 2024
9eeeaee
refactor: 불필요한 PageAnimation컴포넌트를 제거한다
guesung Aug 13, 2024
0245830
refactor: SSR을 위해 cookie로 tooltip 정보를 교체한다
guesung Aug 13, 2024
32f9eb4
refactor: 불필요한 상태값을 제거한다
guesung Aug 13, 2024
faf2987
refactor: Talk 컴포넌트의 네이밍을 직관적으로 수정한다
guesung Aug 13, 2024
5c8dc5d
refactor: ButtonProps에서 React.ButtonHTMLAttributes를 확장하고, 기존 type -> …
guesung Aug 13, 2024
f1026bc
refactor: consants를 index.ts에서 export * 한다
guesung Aug 13, 2024
5ecd9f3
refactor: hooks를 exrpot default한다
guesung Aug 13, 2024
1282212
refactor: 사용하지 않는 훅을 제거한다
guesung Aug 13, 2024
b63d310
refactor: MainHeader를 컨벤션에 맞게 폴더 이동을 한다
guesung Aug 13, 2024
b7a54e5
refactor: cn으로 가독성 좋게 수정한다
guesung Aug 13, 2024
95a534c
refactor: import문을 한 줄로 통합한다
guesung Aug 13, 2024
a9350b5
fix: 잘못된 경로를 수정한다
guesung Aug 13, 2024
e5abab1
Merge branch 'develop' into sprint/refactor-the-project
guesung Aug 13, 2024
7df470a
Merge remote-tracking branch 'origin/develop' into feat/ci
guesung Aug 13, 2024
f0dbcab
Merge branch 'sprint/refactor-the-project' into feat/ci
guesung Aug 13, 2024
db69fbf
fix: type 에러를 고친다
guesung Aug 13, 2024
084cc2c
Merge pull request #80 from dnd-side-project/feat/ci
guesung Aug 13, 2024
a7e0d87
refactor: deeplink url을 url.ts로 옮긴다
guesung Aug 13, 2024
790d94e
refactor: `IS_TOOLTIP_OPEN`를 상수화한다
guesung Aug 13, 2024
ceaff3d
refactor: auth관련 쿠키 상수를 cookie파일에 통일한다
guesung Aug 13, 2024
5555975
refactor: 상수의 변수명을 UPPER_CASE로 통일한다
guesung Aug 13, 2024
619271e
refactor: 기존 window.open에서 Link태그로 수정한다
guesung Aug 13, 2024
74f96cd
refactor: Banner에서 더 명확한 이름인 AppDownLoadBanner로 네이밍 수정
guesung Aug 13, 2024
39ca442
feat: .bottom-fixed 스타일을 추가한다
guesung Aug 13, 2024
300c235
refactor: 불필요한 컴포넌트 depth를 제거한다
guesung Aug 13, 2024
c5b5b75
refactor: `.bottom-fixed` 유틸 스타일을 제거한다
guesung Aug 13, 2024
0e89fe2
refactor: 네이밍을 MainFooter로 수정한다
guesung Aug 13, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .github/workflows/cr.yml
Original file line number Diff line number Diff line change
Expand Up @@ -16,4 +16,4 @@ jobs:
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
LANGUAGE: Korean
LANGUAGE: Korean
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 @@ -16,6 +16,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 @@ -33,6 +34,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 @@ -46,11 +51,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"
}
}
}

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이 코드 패치는 새로운 패키지(es-toolkit) 추가와 의존성 버전 업데이트를 포함하고 있습니다.
개선 제안:

  • "es-toolkit"의 올바른 사용을 확인하세요.
  • 중복되는 의존성 버전을 최신 상태로 유지하세요.
  • 파일 끝에 새로운 줄(개행)을 추가하는 것이 좋습니다.

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
2 changes: 1 addition & 1 deletion src/apis/config/privateApi.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ 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 { BASE_API_URL } from '@/constants';
import { getClientCookie, removeClientCookie } from '@/utils';

const privateApi: CustomInstance = axios.create({

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

코드 리뷰를 진행하겠습니다:

버그 위험:

  1. BASE_API_URL이 상수로 사용되는 데, 코드의 4번째 줄에서 재선언됨으로써 중복 정의 문제가 발생할 수 있음.

개선 제안:

  1. 중복된 변수 선언을 수정하여 코드를 단순화하세요.
  2. 요청 헤더 또는 인터셉터를 통해 접근 토큰(ACCESS_TOKEN)을 처리하는 로직 추가 고려.

이외에도 API URL, 상수, 유틸리티 함수 등을 더 깊이 파악하기 위해 전체 코드베이스의 컨텍스트를 파악하는 것이 유용할 수 있습니다.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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`,

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이 코드 패치에서 발견된 주요 변경 사항은 상대 경로 @/constants/env에서 @/constants로의 수정입니다. 코드 리뷰 및 개선 사항은 다음과 같습니다:

  1. 버그 위험:

    • 문제가 없어 보입니다.
  2. 개선 제안:

    • 경로 수정 시 코드에 대한 주석 추가: 왜 env 파일에서 constants 파일로 변경되었는지 이유를 설명.
    • TypeScript를 사용한다면 import { CustomInstance } from './type';에 대한 주석 설명이 필요할 수 있음.
    • publicApi 변수에 대한 설명 주석 추가: 왜 사용하는지, 어떻게 사용하는지 설명.

이러한 변경 사항과 개선 제안을 고려하여 코드 가독성을 높일 수 있습니다.

Expand Down
2 changes: 1 addition & 1 deletion src/apis/queries.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import {
getPosePick,
getPoseTalk,
} from '.';
import { FilterState } from '@/hooks/useFilterState';
import { FilterState } from '';

export const usePoseDetailQuery = (poseId: number) =>
useQuery(['poseId', poseId], () => getPoseDetail(poseId));

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이 코드 패치에는 오류 위험의 가능성이 있습니다. import 구문에서 수정된 부분은 FilterState 객체를 가져오는 경로가 잘못되었습니다. 대괄호 안에 있는 경로 '@/hooks/useFilterState'를 올바르게 지정해야 합니다. 현재 코드에서는 빈 문자열로 변경되어 있습니다. 이 문제를 해결하려면 올바른 경로로 수정해야 합니다.

수정 전:

import { FilterState } from '@/hooks/useFilterState';

수정 후:

import { FilterState } from '@/your-correct-path-to-useFilterState';

추가적으로, usePoseDetailQuery 함수 내부의 useQuery(['poseId', poseId], () => getPoseDetail(poseId)); 코드는 보다 명시적으로 구현할 수 있다는 점을 고려해 볼 수 있습니다. Pose ID와 관련된 정보에 대한 더 자세한 주석을 추가하거나, 함수 이름을 더 명확하게 표현하는 등의 개선 사항을 실시할 수 있습니다.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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>
);
}

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이 코드는 상대적으로 깔끔해 보입니다. 개선을 위한 제안은 다음과 같습니다:

  1. useClient가 무엇을 하는지 주석으로 설명해주세요.
  2. 각 import 구문 사이에 빈 줄을 추가하여 가독성을 향상시킵니다.
  3. CSS 클래스 이름 h-[calc(100dvh-178px)]가 이해하기 어려울 수 있으므로 더 명확하고 직관적인 이름으로 변경하는 것이 좋습니다.
  4. 성능 상의 이점을 위해서, 컴포넌트가 불필요한 매번 리렌더링되지 않도록 React.memo를 사용할 수 있습니다.
  5. 각 요소 사이에 간단한 주석을 추가하여 각 구성 요소가 하는 일을 설명하는 것이 도움이 될 수 있습니다.

이상은 해당 코드에서 발견된 개선 사항 및 잠재적 위험 사항 중 규모가 있는 것들입니다.

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();

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

코드 리뷰를 해볼게요:

  1. URL import 변경: URL을 가리키는 경로가 변경되었으므로 import 구문 업데이트 필요.
  2. useFilterState import 변경: useFilterState 함수의 import 경로도 변경되었으므로 해당 부분을 수정해야 함.
  3. 코드는 보다 일관성 있게 유지되며, 이상한 곳이 없어 개선 사항은 현재로서는 없어 보입니다. 계속하여 테스트하고 추가 기능을 고려하면서 코드의 확장 및 유지보수를 진행하는 것이 좋습니다.

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>
);

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

코드 리뷰:

  1. 잠재적 버그 위험:

    • 코드 변경에 따른 경로 수정에서 잠재적인 오류가 발생할 수 있음.
  2. 개선 제안:

    • 상수 데이터(frameCountList, peopleCountList)가 이동되면서 해당 상수를 사용하는 파일들을 업데이트해야 함.
    • PrimaryButton 컴포넌트의 type 속성 대신 variant 속성을 사용하는 것이 확장 가능하고 명확함.
  3. 추가적으로 고려해볼 점:

    • 함수 및 변수의 네이밍이 명확하고 일관성 있게 되어 있는지 확인.
    • 코드 스타일과 포맷팅이 일관되게 유지되고 있는지 확인.

위 내용들을 고려하여 코드를 보완하고 관리하기 쉽도록 항상 주의 깊게 유지하는 것이 중요합니다.

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 />;
}

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이 코드 패치의 간단한 코드 리뷰를 도와드리겠습니다.

개선 제안:

  1. 불필요한 코드 삭제: import 문과 QueryAsyncBoundary 관련 코드가 제거되었습니다. 이제는 FeedComponent만 import하고 사용하도록 변경되었습니다.
  2. 단순화: 코드가 단순해지고 가독성이 향상되었습니다.
  3. 중복 코드 제거: FeedComponent를 통해 중복되는 부분을 하나로 통합하여 유지보수가 더 쉽게 되었습니다.

버그 위험:

  1. 코드를 보면서 명확한 버그 위험은 보이지 않습니다.

총평:
이 코드 패치는 단순화 및 가독성 향상을 위한 좋은 변화를 가져왔습니다. 개발자들이 더 쉽게 코드를 이해하고 유지보수할 수 있도록 도와줍니다.

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>
);
}

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

주요 내용:

  • "use client" 대신 "useEffect" 또는 "useState"와 같은 React 훅을 import 하는 것이 옳다.
  • Props로 전달되는 문자열을 작은따옴표 대신에 백틱(`)으로 감싸는 것이 일반적이다.
  • 버튼 클릭 시 모달 팝업 컴포넌트가 열리는데, 이 때의 경험 흐름을 고려하여 애니메이션 효과 추가를 검토할 수 있다.

잠재적인 버그 리스크:

  • EmptyCase 컴포넌트나 PrimaryButton 컴포넌트가 예상치 못한 방식으로 상태를 변경하거나 부작용을 일으킬 수 있음.
  • useOverlay() 훅이 반환하는 값의 사용에 오류가 없는지 확인 필요.

개선 제안:

  • 컴포넌트의 가독성을 높이기 위해 JSX 템플릿 내에서 줄바꿈 및 들여쓰기를 조정하는 것이 좋다.
  • 텍스트는 별도로 관리할 수 있는 형태로 추출하여 다국어 지원 등을 고려할 수 있다.

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>
);

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

주어진 코드 패치를 살펴봤을 때, 수정된 부분에서는 PrimaryButton 컴포넌트에 type 속성 대신 variant 속성이 사용되고 있습니다. 이러한 변경은 적절해 보입니다. 따라서 해당 코드의 버그 리스크나 개선 제안은 없는 것으로 보입니다. 패치는 안전하게 보이며 개선 사항도 없습니다.

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 />;
}

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이 코드 패치의 코드 리뷰:

  1. 버그 위험이나 개선 제안:

    • use clientuseClient로 수정해야 할 수도 있습니다.
    • EmptyCase, PrimaryButton, PreparingPopup, useOverlay 등 사용되지 않는 import 문을 제거할 필요가 있습니다.
    • MyPoseComponent를 렌더링하는 대신 EmptyCasePrimaryButton의 사용 여부에 따라 더 나은 구조 설계 고려가 필요합니다.
  2. 개선 사항:

    • 코드 스타일 일관성을 유지하고자 JSX 요소들에 대해 구분을 명확히 하는 것이 좋습니다.
    • 보다 구조화된 코드를 원한다면, MyPoseComponent 내부에서 세부 사항을 처리하여 Page 컴포넌트에서 불필요한 로직을 줄일 수 있습니다.

개선을 위해서는 페이지의 전반적인 목적과 UI 요소들 간 상호 작용에 대한 이해가 필요합니다.

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>
</>
);
}

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이 코드에 대한 간단한 코드 리뷰를 해보겠습니다.

  1. 버그 위험:

    • usePosePickQuery에서 반환된 데이터의 논리적 구조를 제대로 확인하는 절차가 부족합니다.
    • 오류 처리(에러 핸들링)가 미흡할 수 있습니다.
  2. 개선 제안:

    • setIsLottiePlaying(false)를 호출하고 있는 두 번째 delay 이후의 setIsLottiePlaying(false) 호출을 조정하여, 의도를 명확히 합니다.
    • 변경 상태를 더 잘 관리하거나 추적하기 위해 상태 값에 대한 주석을 추가하는 것이 도움이 될 수 있습니다.
    • 코드 스타일 일관성 유지를 위해 컴포넌트와 상호작용하는 함수에 대한 명명 규칙을 검토하십시오.
  3. 개발자 경험 향상:

    • 컴포넌트 간의 커뮤니케이션 및 데이터 흐름이 더 자세히 설명될 수 있도록 주석을 추가하세요.
    • 디자인 변경 사항에 대한 소통을 강화하기 위해 스타일 클래스 이름을 변수에 할당하여 중복을 줄일 수 있습니다.
  4. 기타 고려 사항:

    • React Developer Tools와 같은 개발 도구로 컴포넌트의 렌더링 횟수를 최소화하려고 하십시오.
    • 코드에서 사용하고 있는 외부 의존성의 신뢰성과 업데이트 여부를 확인하세요.

코드 품질을 향상시키고 유지보수성을 높이기 위해 주의깊게 검토해 보시길 바랍니다.

Loading