feat: add followlist page, followerlist page#48
Conversation
β¦to feature/feed
|
The latest updates on your projects. Learn more about Vercel for Git βοΈ
|
|
""" WalkthroughνΌλ κ΄λ ¨ κΈ°λ₯μ΄ λν νμ₯λμμ΅λλ€. νλ‘μ°/νλ‘μ λͺ©λ‘κ³Ό μ¬μ©μ νλ‘ν νλͺ©, νμΈ νΌλ νμ΄μ§, λμ λΌμ°ν λ±μ΄ μΆκ°λμμΌλ©°, κΈ°μ‘΄ νΌλΒ·νλ‘ν μ»΄ν¬λνΈλ€λ 리ν©ν λ§ λ° μνΈμμ© κ°μ μ΄ μ΄λ£¨μ΄μ‘μ΅λλ€. λΉ μν μ²λ¦¬μ λ΄λΉκ²μ΄μ κΈ°λ₯λ 보κ°λμμ΅λλ€. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant FeedPage
participant FollowList
participant Router
participant OtherFeedPage
participant FollowerListPage
User->>FeedPage: νΌλ μ§μ
FeedPage->>FollowList: νλ‘μ°/νλ‘μ λͺ©λ‘ νμ
User->>FollowList: νλ‘μ νλͺ© ν΄λ¦
FollowList->>Router: /otherfeed/:userIdλ‘ μ΄λ
Router->>OtherFeedPage: νμΈ νΌλ νμ΄μ§ λ λλ§
User->>FollowList: λ보기(β) ν΄λ¦
FollowList->>Router: /feed/followlistλ‘ μ΄λ
Router->>FollowerListPage: νλ‘μ μ 체 λͺ©λ‘ νμ΄μ§ λ λλ§
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
π Recent review detailsConfiguration used: CodeRabbit UI π Files selected for processing (4)
β Files skipped from review due to trivial changes (1)
π§ Files skipped from review as they are similar to previous changes (3)
β¨ Finishing Touches
πͺ§ TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
π§Ή Nitpick comments (8)
src/pages/index.tsx (1)
33-34: λ λΌμ°νΈκ° λμΌν μ»΄ν¬λνΈλ₯Ό λ λλ§ν©λλ€.νμ¬
/feed/followerlistμ/feed/followlistλ λΌμ°νΈ λͺ¨λ λμΌνFollowerListPageμ»΄ν¬λνΈλ₯Ό λ λλ§νκ³ μμ΅λλ€. ν₯ν νλ‘μμ νλ‘μ 리μ€νΈλ₯Ό ꡬλΆν΄μ 보μ¬μ€μΌ νλ€λ©΄ κ°κ° λ€λ₯Έ μ»΄ν¬λνΈλ₯Ό μ¬μ©νκ±°λ propsλ‘ κ΅¬λΆνλ κ²μ κ³ λ €ν΄λ³΄μΈμ.src/components/feed/MyProfile.tsx (1)
21-23: μΈλΌμΈ μ€νμΌλ§μ κ°μ ν μ μμ΅λλ€.
titleColorλ₯Ό μΈλΌμΈ μ€νμΌλ‘ μ μ©νκ³ μμ΅λλ€. μ€νμΌ μΌκ΄μ±μ μν΄ styled-componentsμ propsλ CSS λ³μλ₯Ό νμ©νλ κ²μ κ³ λ €ν΄λ³΄μΈμ.-<div className="usertitle" style={{ color: titleColor }}> +<div className="usertitle" style={{ color: titleColor }}>λλ styled-components propsλ₯Ό νμ©:
<UserTitleDiv $titleColor={titleColor}> {userTitle} </UserTitleDiv>src/pages/feed/FollowerListPage.tsx (1)
8-42: Mock λ°μ΄ν° ꡬ쑰λ₯Ό κ°μ ν μ μμ΅λλ€.Mock λ°μ΄ν°μμ μΌλΆ μ¬μ©μλ
followerCountκ° μκ³ μΌλΆλ μμ΅λλ€. λνuserIdκ° μ€λ³΅λλ κ²½μ°κ° μμ΅λλ€. μΌκ΄μ±μ μν΄ λͺ¨λ νλλ₯Ό ν¬ν¨νκ³ κ³ μ ν IDλ₯Ό μ¬μ©νλ κ²μ κΆμ₯ν©λλ€.const mockUserList: UserProfileItemProps[] = [ { profileImgUrl: 'https://placehold.co/36x36', userName: 'ThipOther', userTitle: 'μΉνΈμΉνΈ', titleColor: '#FF8BAC', followerCount: 15, - userId: 1, + userId: 1, + isFollowed: false, }, // λ€λ₯Έ μ¬μ©μλ€λ κ³ μ ν userIdμ λͺ¨λ νλ ν¬ν¨ ];src/components/feed/UserProfileItem.tsx (5)
36-39: API νΈμΆ μ½λκ° μ£Όμ μ²λ¦¬λμ΄ μμ΅λλ€.νλ‘μ°/μΈνλ‘μ° κΈ°λ₯μ΄ μμ ν ꡬνλμ§ μμμ΅λλ€. μ€μ API νΈμΆμ ꡬννκ±°λ TODO μ£Όμμ μΆκ°ν΄μΌ ν©λλ€.
μ€μ API μλν¬μΈνΈμ ν¨κ» μμ ν ꡬνμ μνμλ©΄ λμμ λ릴 μ μμ΅λλ€.
41-41: νλ‘λμ μ½λμμ console.logλ₯Ό μ κ±°νμΈμ.νλ‘λμ νκ²½μμ console.logλ μ κ±°λμ΄μΌ ν©λλ€.
λ€μ μμ μ¬νμ μ μ©νμΈμ:
- console.log(`${userName} - ${followed ? 'νλ‘μ° μ·¨μ' : 'νλ‘μ° μμ²'}`); + // console.log(`${userName} - ${followed ? 'νλ‘μ° μ·¨μ' : 'νλ‘μ° μμ²'}`);
61-71: μ‘°κ±΄λΆ λ λλ§ λ‘μ§μ κ°μ νμΈμ.pathname κΈ°λ° μ‘°κ±΄λΆ λ λλ§μ΄ νλμ½λ©λμ΄ μμ΅λλ€. λ μ μ°νκ³ μ μ§λ³΄μνκΈ° μ¬μ΄ λ°©μμΌλ‘ κ°μ ν μ μμ΅λλ€.
λ€μκ³Ό κ°μ΄ κ°μ ν μ μμ΅λλ€:
+ const showFollowButton = pathname === '/feed/followlist'; + const showFollowerListButton = pathname === '/feed/followerlist'; + - {pathname === '/feed/followlist' && ( + {showFollowButton && ( <div className="followbutton" onClick={toggleFollow}> {followed ? 'λ± μ·¨μ' : 'λ± νκΈ°'} </div> )} - {pathname === '/feed/followerlist' && ( + {showFollowerListButton && ( <div className="followlistbutton" onClick={handleFollowerListClick}> <div>{followerCount}λͺ μ΄ λ±νλ μ€</div> <img src={rightArrow} /> </div> )}
33-42: μλ¬ νΈλ€λ§κ³Ό λ‘λ© μνλ₯Ό μΆκ°νμΈμ.API νΈμΆ μ μλ¬ νΈλ€λ§κ³Ό λ‘λ© μνκ° μμ΅λλ€. μ¬μ©μ κ²½νμ κ°μ νκΈ° μν΄ μΆκ°νλ κ²μ΄ μ’μ΅λλ€.
λ€μκ³Ό κ°μ΄ κ°μ ν μ μμ΅λλ€:
+ const [isLoading, setIsLoading] = useState(false); + - const toggleFollow = (e: React.MouseEvent) => { + const toggleFollow = async (e: React.MouseEvent) => { e.stopPropagation(); + setIsLoading(true); + + try { if (followed) { - // await axios.delete(`/api/unfollow/${userName}`); + await axios.delete(`/api/unfollow/${userName}`); } else { - // await axios.post(`/api/follow/${userName}`); + await axios.post(`/api/follow/${userName}`); } setFollowed(prev => !prev); - console.log(`${userName} - ${followed ? 'νλ‘μ° μ·¨μ' : 'νλ‘μ° μμ²'}`); + } catch (error) { + console.error('νλ‘μ° μν λ³κ²½ μ€ μ€λ₯:', error); + // μλ¬ ν μ€νΈ λ©μμ§ νμ + } finally { + setIsLoading(false); + } };
118-118: νλμ½λ©λ μμ κ°μ μ κ±°νμΈμ.CSS λ³μμ νλμ½λ©λ μμ κ°μ΄ ν¨κ» μ¬μ©λκ³ μμ΅λλ€. μΌκ΄μ±μ μν΄ νλμ½λ©λ μμ κ°μ μ κ±°νμΈμ.
λ€μ μμ μ¬νμ μ μ©νμΈμ:
- color: var(--color-text-literature_mint, #a0f8e8); + color: var(--color-text-literature_mint);
π Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
π Files selected for processing (6)
src/components/feed/FollowList.tsx(4 hunks)src/components/feed/MyFollower.tsx(5 hunks)src/components/feed/MyProfile.tsx(3 hunks)src/components/feed/UserProfileItem.tsx(1 hunks)src/pages/feed/FollowerListPage.tsx(1 hunks)src/pages/index.tsx(2 hunks)
π§° Additional context used
𧬠Code Graph Analysis (2)
src/components/feed/MyProfile.tsx (1)
src/pages/signup/Signup.styled.ts (1)
Container(3-165)
src/pages/feed/FollowerListPage.tsx (2)
src/components/feed/UserProfileItem.tsx (1)
UserProfileItemProps(6-14)src/components/common/Wrapper.tsx (1)
Wrapper(3-14)
π Additional comments (11)
src/pages/index.tsx (1)
15-15: μλ‘μ΄ μ»΄ν¬λνΈ importκ° μ¬λ°λ₯΄κ² μΆκ°λμμ΅λλ€.FollowerListPage μ»΄ν¬λνΈλ₯Ό μ μ ν importνμ΅λλ€.
src/components/feed/MyProfile.tsx (2)
4-9: Mock λ°μ΄ν° κ΅¬μ‘°κ° μ μ μλμμ΅λλ€.νλ‘ν λ°μ΄ν°λ₯Ό κ°μ²΄λ‘ λΆλ¦¬νμ¬ ν₯ν API μ°λμ μ½κ² λ체ν μ μλλ‘ κ΅¬μ‘°ννμ΅λλ€.
76-79: CSS μ€νμΌλ§ μ λ°μ΄νΈκ° μ μ ν©λλ€.ν°νΈ ν¬κΈ°, κ°μ€μΉ, λΌμΈ λμ΄ λ±μ μ€νμΌ λ³κ²½μ΄ μΌκ΄μ± μκ² μ μ©λμμ΅λλ€.
Also applies to: 82-86
src/components/feed/MyFollower.tsx (3)
1-1: λ€λΉκ²μ΄μ ν μ΄ μ¬λ°λ₯΄κ² μΆκ°λμμ΅λλ€.
useNavigateν μ importνκ³ μ¬μ©νμ¬ νλ‘μ 리μ€νΈ νμ΄μ§λ‘μ λ€λΉκ²μ΄μ μ ꡬννμ΅λλ€.Also applies to: 62-62
56-59: νμ μ μκ° λͺ νν©λλ€.
FollowerμΈν°νμ΄μ€λ₯Ό ν΅ν΄ νλ‘μ κ°μ²΄μ ꡬ쑰λ₯Ό λͺ νν μ μνμ΅λλ€.
85-92: μ‘°κ±΄λΆ λ λλ§κ³Ό ν΄λ¦ νΈλ€λ¬κ° μ μ ν©λλ€.νλ‘μκ° μμ λλ§ UIλ₯Ό λ λλ§νκ³ , ν΄λ¦ μ νλ‘μ 리μ€νΈ νμ΄μ§λ‘ μ΄λνλ κΈ°λ₯μ΄ μ ꡬνλμμ΅λλ€.
src/components/feed/FollowList.tsx (2)
2-2: λ€λΉκ²μ΄μ ν μ΄ μ¬λ°λ₯΄κ² μΆκ°λμμ΅λλ€.
useNavigateν μ importνκ³ μ¬μ©νμ¬ λ€μν νμ΄μ§λ‘μ λ€λΉκ²μ΄μ μ ꡬννμ΅λλ€.Also applies to: 25-25
50-50: ν΄λ¦ νΈλ€λ¬κ° μ μ ν μΆκ°λμμ΅λλ€.κ° UI μμμ λν ν΄λ¦ νΈλ€λ¬κ° λ Όλ¦¬μ μΌλ‘ μ μ ν μμΉμ λ°°μΉλμμ΅λλ€.
Also applies to: 58-58, 61-61
src/pages/feed/FollowerListPage.tsx (2)
78-93: κ³ μ μμΉ μ€νμΌλ§μ κ²ν ν΄μΌ ν©λλ€.
TotalBarμposition: fixedμtop: 0μ€μ μ΄ ν€λμ κ²ΉμΉ μ μμ΅λλ€. ν€λ λμ΄λ₯Ό κ³ λ €νtopκ°μ μ€μ νκ±°λ λ€λ₯Έ λ μ΄μμ λ°©μμ κ³ λ €ν΄λ³΄μΈμ.νμ¬
TitleHeaderμ»΄ν¬λνΈμ λμ΄μTotalBarμpadding-top: 76pxκ°μ΄ μ¬λ°λ₯΄κ² κ³μ°λμλμ§ νμΈν΄λ³΄μΈμ.
44-49: μ»΄ν¬λνΈ κ΅¬μ‘°μ λ€λΉκ²μ΄μ ꡬνμ΄ μ μ ν©λλ€.
useNavigate(-1)μ μ¬μ©ν λ€λ‘κ°κΈ° κΈ°λ₯κ³ΌTitleHeaderμ»΄ν¬λνΈλ₯Ό νμ©ν ν€λ ꡬμ±μ΄ μ ꡬνλμμ΅λλ€.Also applies to: 52-66
src/components/feed/UserProfileItem.tsx (1)
16-75: μ λ°μ μΈ κ΅¬μ‘°λ μ ꡬμ±λμμ΅λλ€.μ»΄ν¬λνΈμ μ λ°μ μΈ κ΅¬μ‘°μ λ‘μ§μ΄ μ ꡬμ±λμ΄ μμ΅λλ€. React Routerλ₯Ό νμ©ν λ€λΉκ²μ΄μ κ³Ό μ‘°κ±΄λΆ λ λλ§μ΄ μ μ νκ² κ΅¬νλμμ΅λλ€.
| {mockUserList.map((user, index) => ( | ||
| <UserProfileItem key={index} {...user} /> | ||
| ))} |
There was a problem hiding this comment.
π οΈ Refactor suggestion
λ°°μ΄ μΈλ±μ€λ₯Ό keyλ‘ μ¬μ©νλ κ²μ κ°μ ν΄μΌ ν©λλ€.
key={index}λ₯Ό μ¬μ©νλ©΄ Reactμ λ λλ§ μ΅μ νμ λ¬Έμ κ° λ°μν μ μμ΅λλ€. λμ κ³ μ ν userIdλ₯Ό μ¬μ©νμΈμ.
-{mockUserList.map((user, index) => (
- <UserProfileItem key={index} {...user} />
-))}
+{mockUserList.map((user) => (
+ <UserProfileItem key={user.userId} {...user} />
+))}π Committable suggestion
βΌοΈ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| {mockUserList.map((user, index) => ( | |
| <UserProfileItem key={index} {...user} /> | |
| ))} | |
| {mockUserList.map((user) => ( | |
| <UserProfileItem key={user.userId} {...user} /> | |
| ))} |
π€ Prompt for AI Agents
In src/pages/feed/FollowerListPage.tsx around lines 60 to 62, the map function
uses the array index as the key prop for UserProfileItem, which can cause
rendering inefficiencies. Replace key={index} with a unique identifier from the
user object, such as key={user.userId}, to ensure stable and unique keys for
React's reconciliation process.
|
|
||
| const handleFollowerListClick = (e: React.MouseEvent) => { | ||
| e.stopPropagation(); | ||
| navigate(`/feed/followerlist/${userId}`); |
There was a problem hiding this comment.
π‘ Verification agent
𧩠Analysis chain
νλ‘μ 리μ€νΈ λ€λΉκ²μ΄μ κ²½λ‘κ° μλͺ»λμμ΅λλ€.
νμ¬ κ²½λ‘κ° /feed/followerlistμΈλ° λ€λΉκ²μ΄μ
κ²½λ‘μ userIdκ° ν¬ν¨λμ΄ μμ§ μμ΅λλ€. λΌμ°ν
μ€μ κ³Ό μΌμΉνμ§ μμ μ μμ΅λλ€.
λΌμ°ν μ€μ μ νμΈνμ¬ μ¬λ°λ₯Έ κ²½λ‘ νμμ μ¬μ©νκ³ μλμ§ κ²μ¦νμΈμ:
π Script executed:
#!/bin/bash
# Description: νλ‘μ 리μ€νΈ κ΄λ ¨ λΌμ°ν
μ€μ νμΈ
# Expected: λΌμ°ν
κ²½λ‘μ λ€λΉκ²μ΄μ
κ²½λ‘μ μΌμΉμ± νμΈ
rg -A 3 -B 3 "followerlist" --type=tsx --type=tsLength of output: 76
νμΌ νμ
μΈμ λ¬Έμ λ‘ μ΄μ κ²μμ΄ μ€ν¨νμ΅λλ€. TS λ° TSX νμΌμμ glob ν¨ν΄μ μ¬μ©ν΄ followerlist κ΄λ ¨ λΌμ°ν
μ€μ μ μ¬κ²μν©λλ€.
π Script executed:
#!/bin/bash
# Description: TS/TSX νμΌμμ followerlist λΌμ°ν
μ€μ νμΈ
rg -A 3 -B 3 "followerlist" -g "*.ts*" .Length of output: 2336
νλ‘μ 리μ€νΈ κ²½λ‘ λΆμΌμΉ ν΄κ²° νμ
νμ¬ λΌμ°ν
μ€μ (src/pages/index.tsx)μ /feed/followerlistλ§ μ²λ¦¬νλλ°,
src/components/feed/UserProfileItem.tsxμμλ navigate(/feed/followerlist/${userId})λ‘ IDλ₯Ό λΆμ¬ νΈμΆνκ³ μμ΄ μΌμΉνμ§ μμ΅λλ€.
λ€μ μ€ νλλ‘ μμ ν΄μ£ΌμΈμ:
- κ²½λ‘ λ§€κ°λ³μν
src/pages/index.tsxμμ
<Route path="feed/followerlist" β¦ />
λ₯Ό
<Route path="feed/followerlist/:userId" element={<FollowerListPage />} />
λ‘ λ³κ²½
- ID μ κ±°
src/components/feed/UserProfileItem.tsxμ νΈμΆλΆλ₯Ό
- navigate(
/feed/followerlist/${userId});
- navigate('/feed/followerlist');
λ‘ μμ
π Committable suggestion
βΌοΈ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| navigate(`/feed/followerlist/${userId}`); | |
| // Before: | |
| - navigate(`/feed/followerlist/${userId}`); | |
| // After: | |
| + navigate('/feed/followerlist'); |
π€ Prompt for AI Agents
In src/components/feed/UserProfileItem.tsx at line 46, the navigate call
includes a userId parameter in the path `/feed/followerlist/${userId}`, but the
routing in src/pages/index.tsx only handles `/feed/followerlist` without
parameters. To fix this, either update the route in src/pages/index.tsx to
accept a userId parameter by changing the path to `feed/followerlist/:userId`
and keep the navigate call as is, or remove the userId from the navigate call in
UserProfileItem.tsx to match the existing route.
There was a problem hiding this comment.
Actionable comments posted: 0
π§Ή Nitpick comments (3)
src/components/feed/OtherFeed.tsx (1)
32-32: νλμ½λ©λ νλ‘ν μνλ₯Ό λμ μΌλ‘ μ²λ¦¬νλ κ²μ κ³ λ €ν΄λ³΄μΈμ.νμ¬
showFollowButton={true}μisFollowed={false}κ° νλμ½λ©λμ΄ μμ΄ μ€μ μ¬μ©μ κ΄κ³ μνλ₯Ό λ°μνμ§ λͺ»ν©λλ€. μ΄ν API μ°λ μ propsλ‘ λ°μμ μ²λ¦¬νλ κ²μ΄ μ’μ κ² κ°μ΅λλ€.- <Profile showFollowButton={true} isFollowed={false} /> + <Profile showFollowButton={true} isFollowed={isFollowed} />그리κ³
OtherFeedμ»΄ν¬λνΈμ propsμisFollowed?: booleanμ μΆκ°νλ κ²μ κ³ λ €ν΄λ³΄μΈμ.src/pages/feed/OtherFeedPage.tsx (1)
50-54: URL νλΌλ―Έν° νμ©μ κ³ λ €ν΄λ³΄μΈμ.νμ¬
userIdνλΌλ―Έν°κ° λΌμ°ν μμ μ μλμμ§λ§ μ»΄ν¬λνΈμμ μ¬μ©λμ§ μκ³ μμ΅λλ€. μ΄ν API μ°λ μ νμ©ν μ μλλ‘useParamsν μ μ¬μ©νλ κ²μ κ³ λ €ν΄λ³΄μΈμ.-import { useNavigate } from 'react-router-dom'; +import { useNavigate, useParams } from 'react-router-dom'; const OtherFeedPage = () => { const navigate = useNavigate(); + const { userId } = useParams<{ userId: string }>();src/components/feed/Profile.tsx (1)
38-39: νλμ½λ©λ μΉ΄μ΄νΈ κ°μ λμ μΌλ‘ μ²λ¦¬νλ κ²μ κ³ λ €ν΄λ³΄μΈμ.μ£Όμμμ μΈκΈν λλ‘ μ€μ νΌλ κΈ κ°μλ₯Ό λ°μνλλ‘ propsλ‘ λ°μμ μ²λ¦¬νλ κ²μ΄ μ’κ² μ΅λλ€.
export interface ProfileProps { showFollowButton?: boolean; isFollowed?: boolean; + postCount?: number; } -const Profile = ({ showFollowButton, isFollowed }: ProfileProps) => { +const Profile = ({ showFollowButton, isFollowed, postCount = 0 }: ProfileProps) => { - <div className="count">4</div> + <div className="count">{postCount}</div>
π Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
π Files selected for processing (7)
src/components/feed/FollowList.tsx(2 hunks)src/components/feed/MyFeed.tsx(1 hunks)src/components/feed/OtherFeed.tsx(1 hunks)src/components/feed/Profile.tsx(3 hunks)src/components/feed/TotalFeed.tsx(1 hunks)src/pages/feed/OtherFeedPage.tsx(1 hunks)src/pages/index.tsx(2 hunks)
π§ Files skipped from review as they are similar to previous changes (2)
- src/pages/index.tsx
- src/components/feed/FollowList.tsx
π§° Additional context used
𧬠Code Graph Analysis (3)
src/components/feed/OtherFeed.tsx (2)
src/styles/global/global.ts (2)
colors(4-53)typography(56-76)src/types/post.ts (1)
FeedListProps(18-22)
src/components/feed/MyFeed.tsx (2)
src/styles/global/global.ts (2)
colors(4-53)typography(56-76)src/types/post.ts (1)
FeedListProps(18-22)
src/pages/feed/OtherFeedPage.tsx (1)
src/types/post.ts (1)
PostData(1-16)
π Additional comments (15)
src/components/feed/OtherFeed.tsx (2)
1-6: μ»΄ν¬λνΈ κ΅¬μ‘°κ° μ μ€κ³λμμ΅λλ€.νμν μμ‘΄μ±λ€μ΄ μ μ ν μν¬νΈλμκ³ , νμ μ μμ κΈλ‘λ² μ€νμΌμ μ¬λ°λ₯΄κ² νμ©νκ³ μμ΅λλ€.
27-44: μ‘°κ±΄λΆ λ λλ§κ³Ό λΉ μν μ²λ¦¬κ° μ μ ν©λλ€.
hasPostsλ³μλ₯Ό μ¬μ©ν μ‘°κ±΄λΆ λ λλ§μ΄ λͺ ννκ³ , λΉ μν λ©μμ§κ° λ€λ₯Έ νΌλ μ»΄ν¬λνΈλ€κ³Ό μΌκ΄μ± μκ² μ²λ¦¬λμμ΅λλ€.src/components/feed/TotalFeed.tsx (3)
5-5: μ λ κ²½λ‘ μ¬μ©μΌλ‘ μν¬νΈ μΌκ΄μ±μ΄ κ°μ λμμ΅λλ€.
@/styles/global/globalκ³Ό κ°μ μ λ κ²½λ‘ μ¬μ©μΌλ‘ μ½λλ² μ΄μ€μ μΌκ΄μ±μ΄ ν₯μλμμ΅λλ€.
13-25: λ€λ₯Έ νΌλ μ»΄ν¬λνΈλ€κ³Ό μΌκ΄λ λΉ μν μ€νμΌλ§μ λλ€.
EmptyStateμ»΄ν¬λνΈμ μ€νμΌλ§μ΄MyFeedμOtherFeedμ»΄ν¬λνΈμ μμ ν μΌμΉνμ¬ μΌκ΄λ μ¬μ©μ κ²½νμ μ 곡ν©λλ€.
28-41: μ‘°κ±΄λΆ λ λλ§ λ‘μ§μ΄ κΉλνκ² κ΅¬νλμμ΅λλ€.
hasPostsλ³μλ₯Ό μ¬μ©ν μ‘°κ±΄λΆ λ λλ§ ν¨ν΄μ΄ λ€λ₯Έ νΌλ μ»΄ν¬λνΈλ€κ³Ό μΌκ΄μ± μκ² μ μ©λμμ΅λλ€.src/components/feed/MyFeed.tsx (3)
2-2: Profile μ»΄ν¬λνΈλ‘μ 리ν©ν λ§μ΄ μ μ ν©λλ€.
MyProfileμμProfileλ‘ λ³κ²½νμ¬ μ»΄ν¬λνΈμ μ¬μ¬μ©μ±μ΄ ν₯μλμμ΅λλ€.
32-32: μ¬μ©μ μμ μ νΌλμ λ§λ νλ‘ν μ€μ μ λλ€.
showFollowButton={false}λ‘ μ€μ νμ¬ μ¬μ©μ μμ μ νΌλμμλ νλ‘μ° λ²νΌμ νμνμ§ μλ κ²μ΄ μ μ ν©λλ€.
38-40: μ¬μ©μ λ§₯λ½μ λ§λ λΉ μν λ©μμ§μ λλ€."νΌλμ κΈμ μμ±ν΄ 보μΈμ"λΌλ λ©μμ§κ° μ¬μ©μ μμ μ νΌλμ μ ν©νλ©°, λ€λ₯Έ νΌλ μ»΄ν¬λνΈλ€κ³Ό μ°¨λ³νλ μ¬μ©μ κ²½νμ μ 곡ν©λλ€.
src/pages/feed/OtherFeedPage.tsx (3)
1-8: νμν μμ‘΄μ±λ€μ΄ μ μ ν μν¬νΈλμμ΅λλ€.React Router, μ€νμΌλ§, μ»΄ν¬λνΈ, νμ μ μ λ±μ΄ λͺ¨λ μ¬λ°λ₯΄κ² μν¬νΈλμμ΅λλ€.
16-48: λ€μν μλ리μ€λ₯Ό 컀λ²νλ λͺ¨νΉ λ°μ΄ν°μ λλ€.κΈ΄ μ λͺ©, κΈ΄ λ΄μ©, λ€λ₯Έ κ³΅κ° μ€μ λ± λ€μν ν μ€νΈ μΌμ΄μ€λ₯Ό ν¬ν¨νκ³ μμ΄ UI ν μ€νΈμ μ μ©ν©λλ€.
56-65: νμ΄μ§ ꡬμ±κ³Ό λ€λΉκ²μ΄μ μ΄ μ μ ν©λλ€.ν€λμ λ€λ‘κ°κΈ° κΈ°λ₯, νΌλ μ»΄ν¬λνΈ μ¬μ©, λ€λΉκ²μ΄μ λ° κ΅¬μ±μ΄ λͺ¨λ μ μ νκ² κ΅¬νλμμ΅λλ€.
src/components/feed/Profile.tsx (4)
4-14: λͺ¨νΉ λ°μ΄ν°μ Props μΈν°νμ΄μ€κ° μ μ μλμμ΅λλ€.
mockProfileκ°μ²΄λ‘ λ°μ΄ν°λ₯Ό λΆλ¦¬νκ³ProfilePropsμΈν°νμ΄μ€λ‘ μ»΄ν¬λνΈ APIλ₯Ό λͺ νν μ μν κ²μ΄ μ’μ΅λλ€.
16-17: ꡬ쑰λΆν΄ ν λΉμΌλ‘ μ½λ κ°λ μ±μ΄ ν₯μλμμ΅λλ€.
mockProfileμμ νμν μμ±λ€μ ꡬ쑰λΆν΄ ν λΉμΌλ‘ μΆμΆνμ¬ μ½λκ° λ κΉλν΄μ‘μ΅λλ€.
31-33: νλ‘μ° λ²νΌμ μ‘°κ±΄λΆ λ λλ§μ΄ μ μ ν©λλ€.
showFollowButtonpropsμ λ°λ₯Έ μ‘°κ±΄λΆ λ λλ§κ³ΌisFollowedμνμ λ°λ₯Έ λ²νΌ ν μ€νΈ λ³κ²½μ΄ μ ꡬνλμμ΅λλ€.
83-92: CSS λ³μ μ¬μ©μΌλ‘ μ€νμΌλ§ μΌκ΄μ±μ΄ κ°μ λμμ΅λλ€.κΈλ‘λ² CSS λ³μλ₯Ό μ¬μ©νμ¬ λμμΈ μμ€ν κ³Όμ μΌκ΄μ±μ μ μ§νκ³ μμ΅λλ€.
1 participant
#οΈβ£μ°κ΄λ μ΄μ
#23 [UI] νΌλ νμ΄μ§
πμμ λ΄μ©
μν©λ³ μ»΄ν¬λνΈμ μ‘°κ±΄λΆ λ λλ§ μ²λ¦¬λ₯Ό νμΈνκΈ° μν΄ λͺ©μ λ°μ΄ν°λ₯Ό μμ΄λ λλ λ°μ΄ν°κΉμ§ ν΅ν©ν΄μ νλ²μ λ£μ΄λμ μν©μ λλ€.
API μ°κ²°ν λ, ν΄λΉλΆλΆ κ°μ ν μμ μ λλ€. μ§κΈμ μ‘°κ±΄λΆ λΆκΈ°μ²λ¦¬λ§ μ λμλμ§ νμΈνμλ©΄ λ κ² κ°μ΅λλ€.
κ·Έλ¦¬κ³ μ΅λν μ¬νμ©ν μ μλ μ»΄ν¬λνΈλ μ¬νμ©νκ³ , κ·Έκ² λΉν¨μ¨μ μΌ κ² κ°μ κ²½μ°μλ κ·Έλ₯ λΉμ·ν μ½λλΌλ μλ‘ μ»΄ν¬λνΈ λ° νμ΄μ§λ₯Ό λ§λ€μμ΅λλ€. λνμ μΌλ‘ μ¬νμ©ν μ»΄ν¬λνΈλ UserProfileItem.tsx μ λλ€.
pathnameμ λ°λΌμ μ°μΈ‘μ λ²νΌμ΄ λ€λ₯ΈννμΈλ° λͺ¨μλ°© > λ μλ©μ΄νΈ νμ΄μ§μμ UserProfileItemμ κ°μ Έλ€ μ¨μΌν κ² κ°μλ° μ΄λλ pathnameμΌλ‘ μ²λ¦¬νλκ² λμμ§ μ΄μ§ κ³ λ―Όμ΄ λ©λλ€.
Feedνμ΄μ§μ μ»΄ν¬λνΈμ κ²½μ°μ MyFeed.tsx / TotalFeed.tsx / OtherFeed.tsxλ‘ μ»΄ν¬λνΈ λΆλ¦¬νκ³ , Feed.tsxμ OtherFeedPage.tsxλ‘ νμ΄μ§ λΆλ¦¬νμ΅λλ€.
2. λ΄ νΌλ ν (Feed.tsx > MyFeed.tsx)
3. λ€λ₯Έ μ¬μ©μ νΌλ νμ΄μ§ (OtherFeedPage.tsx > OtherFeed.tsx)
π¬λ¦¬λ·° μꡬμ¬ν
3μ£Όμ°¨λ νΉλ³ν μμ΅λλ€. λ¦κ² μ¬λ €μ μ£μ‘ν©λλ€. μ΄λ²μ£Όμ°¨ μ€νλ¦°νΈ μ§λλ κ³νλλ‘ λλ΄λ³΄κ² μ΅λλ€.
4μ£Όμ°¨μ λ°κ²¬ν΄ μμ ν μ¬νλ ν΄λΉ PRμ μΌλΆ ν¬ν¨λμ΄ μμ΅λλ€. μ°Έκ³ νμΈμ!
Summary by CodeRabbit
μ κ· κΈ°λ₯
κ°μ μ¬ν