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 all 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
18 changes: 18 additions & 0 deletions .github/workflows/ci.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
name: 'CI'
on:
pull_request:
types: [opened, synchronize, reopened]
jobs:
ci:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3

- name: Install dependencies
run: yarn install --frozen-lockfile

- name: Check typescript
run: yarn type:check

- name: Check eslint
run: yarn lint
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
16 changes: 9 additions & 7 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
"build": "next build",
"start": "next start",
"lint": "next lint",
"type:check": "tsc --noEmit",
"format": "prettier --write --ignore-path .gitignore .",
"make-sprite": "rm public/sprite/sprite.svg && svgstore -o public/sprite/sprite.svg public/sprite/icons/**/*.svg"
},
Expand All @@ -16,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 @@ -33,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 @@ -46,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
12 changes: 8 additions & 4 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 {
COOKIE_ACCESS_TOKEN,
BASE_API_URL,
ERROR_UNAUTHORIZED,
ERROR_UNSUPPORTED_MEDIA_TYPE,
} 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 All @@ -16,7 +20,7 @@ privateApi.interceptors.response.use(
const status = error.response.status;
if (status === ERROR_UNAUTHORIZED || status === ERROR_UNSUPPORTED_MEDIA_TYPE) {
alert('세션이 만료되었어요. 다시 로그인이 필요해요!');
removeClientCookie(ACCESS_TOKEN);
removeClientCookie(COOKIE_ACCESS_TOKEN);
}
location.href = '/';
return Promise.reject(error);
Expand All @@ -25,7 +29,7 @@ privateApi.interceptors.response.use(

privateApi.interceptors.request.use(
(config) => {
const accessToken = getClientCookie(ACCESS_TOKEN);
const accessToken = getClientCookie(COOKIE_ACCESS_TOKEN);
config.headers.Authorization = `Bearer ${accessToken}`;
return config;
},
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
4 changes: 2 additions & 2 deletions src/apis/type.ts
Original file line number Diff line number Diff line change
Expand Up @@ -83,8 +83,8 @@ export interface PoseTalkResponse {
// 로그인
export interface RegisterResponse {
id: number;
nickname: string;
email: string;
COOKIE_NICKNAME: string;
COOKIE_EMAIL: string;
token: {
accessToken: string;
refreshToken: string;
Expand Down
17 changes: 17 additions & 0 deletions src/app/(Main)/MainFooter.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import AppDownloadBanner from '../../components/Header/AppDownloadBanner';
import { StrictPropsWithChildren } from '@/types';
import { isIOS } from '@/utils';

export function MainFooter({ children }: StrictPropsWithChildren) {
return (
<>
<div className="fixed inset-x-0 bottom-0 z-30">
<div className="mx-auto max-w-layout bg-white px-20 pb-24 pt-10">
<div className="flex gap-8 [&>*]:flex-1 [&>*]:grow">{children}</div>
</div>
{isIOS() && <AppDownloadBanner />}
</div>
<div className="h-88" />
</>
);
}
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
13 changes: 6 additions & 7 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 { FRAME_COUNT_LIST, PEOPLE_COUNT_LIST } from '@/constants';
import { useBottomSheet, useFilterState } from '@/hooks';

export default function FilterSheet() {
const { data: tagListData } = useFilterTagQuery();
Expand Down Expand Up @@ -52,13 +51,13 @@ export default function FilterSheet() {
<div id="subtitle-2" className="mb-8 text-secondary">
인원 수
</div>
<SelectionBasic data={peopleCountList} state={countState} setState={setCountState} />
<SelectionBasic data={PEOPLE_COUNT_LIST} state={countState} setState={setCountState} />
</section>
<section>
<div id="subtitle-2" className="mb-8 text-secondary">
프레임 수
</div>
<SelectionBasic data={frameCountList} state={frameState} setState={setFrameState} />
<SelectionBasic data={FRAME_COUNT_LIST} state={frameState} setState={setFrameState} />
</section>
<section>
<div id="subtitle-2" className="mb-8 text-secondary">
Expand All @@ -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 />;
}
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
Loading
Loading