Skip to content

Commit 50b8f4d

Browse files
ssoogitssoogit
authored
Merge pull request #212 from DeepDirect/feature/DP-438/profile-page-refac
[Fix] 프로필 페이지 비공개일때, 본인의 경우 보이게 수정
2 parents e66a6e9 + 7d6d4b8 commit 50b8f4d

18 files changed

+471
-206
lines changed

‎src/features/Profile/components/ProfileView.tsx‎

Lines changed: 54 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -156,29 +156,69 @@ const ProfileView = forwardRef<HTMLDivElement, ExtendedProfileViewProps>(
156156
</div>
157157
</div>
158158

159-
{/* 상세 정보 섹션 - 공개 상태에 따라 조건부 렌더링 */}
160-
{isProfilePublic ? (
161-
// 공개 프로필: 모든 정보 표시
159+
{/* 상세 정보 섹션 - 본인이 아니고 비공개일 때만 숨김 */}
160+
{!user.isMine && !isProfilePublic ? (
161+
// 타인의 비공개 프로필: 비공개 메시지만 표시
162+
<PrivateProfileMessage />
163+
) : (
164+
// 본인 프로필 또는 타인의 공개 프로필: 모든 정보 표시
162165
<div className={styles.twoColumnLayout}>
163166
{/* 왼쪽 컬럼 (737px) */}
164167
<div className={styles.leftColumn}>
165-
<LocationSection user={user} isEditable={isEditable} onEdit={handleSectionEdit} />
166-
<TechStackSection user={user} isEditable={isEditable} onEdit={handleSectionEdit} />
167-
<ProjectSection user={user} isEditable={isEditable} onEdit={handleSectionEdit} />
168-
<StudySection user={user} isEditable={isEditable} onEdit={handleSectionEdit} />
168+
<LocationSection
169+
user={user}
170+
isEditable={isEditable}
171+
onEdit={handleSectionEdit}
172+
isPrivate={user.isMine && !isProfilePublic}
173+
/>
174+
<TechStackSection
175+
user={user}
176+
isEditable={isEditable}
177+
onEdit={handleSectionEdit}
178+
isPrivate={user.isMine && !isProfilePublic}
179+
/>
180+
<ProjectSection
181+
user={user}
182+
isEditable={isEditable}
183+
onEdit={handleSectionEdit}
184+
isPrivate={user.isMine && !isProfilePublic}
185+
/>
186+
<StudySection
187+
user={user}
188+
isEditable={isEditable}
189+
onEdit={handleSectionEdit}
190+
isPrivate={user.isMine && !isProfilePublic}
191+
/>
169192
</div>
170193

171194
{/* 오른쪽 컬럼 (404px) */}
172195
<div className={styles.rightColumn}>
173-
<PositionSection user={user} isEditable={isEditable} onEdit={handleSectionEdit} />
174-
<TraitsSection user={user} isEditable={isEditable} onEdit={handleSectionEdit} />
175-
<TimeSection user={user} isEditable={isEditable} onEdit={handleSectionEdit} />
176-
<PortfolioSection user={user} isEditable={isEditable} onEdit={handleSectionEdit} />
196+
<PositionSection
197+
user={user}
198+
isEditable={isEditable}
199+
onEdit={handleSectionEdit}
200+
isPrivate={user.isMine && !isProfilePublic}
201+
/>
202+
<TraitsSection
203+
user={user}
204+
isEditable={isEditable}
205+
onEdit={handleSectionEdit}
206+
isPrivate={user.isMine && !isProfilePublic}
207+
/>
208+
<TimeSection
209+
user={user}
210+
isEditable={isEditable}
211+
onEdit={handleSectionEdit}
212+
isPrivate={user.isMine && !isProfilePublic}
213+
/>
214+
<PortfolioSection
215+
user={user}
216+
isEditable={isEditable}
217+
onEdit={handleSectionEdit}
218+
isPrivate={user.isMine && !isProfilePublic}
219+
/>
177220
</div>
178221
</div>
179-
) : (
180-
// 비공개 프로필: 비공개 메시지만 표시
181-
<PrivateProfileMessage />
182222
)}
183223
</div>
184224
);

‎src/features/Profile/components/sections/LocationSection.module.scss‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -102,3 +102,22 @@
102102
font-size: v.$fs-xxxsmall;
103103
}
104104
}
105+
106+
.privateMessage {
107+
display: flex;
108+
align-items: center;
109+
justify-content: center;
110+
gap: 6px;
111+
margin-top: 16px;
112+
padding: 17px 12px 0;
113+
border-top: 1px solid v.$gray-4;
114+
font-size: v.$fs-xxxsmall;
115+
text-align: center;
116+
color: v.$gray-1;
117+
118+
@include m.mobile {
119+
margin-top: 12px;
120+
padding: 13px 8px 0;
121+
font-size: 11px;
122+
}
123+
}

‎src/features/Profile/components/sections/LocationSection.tsx‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33

44
import { forwardRef } from 'react';
55

6-
import { PencilSimpleIcon } from '@phosphor-icons/react';
6+
import { LockIcon, PencilSimpleIcon } from '@phosphor-icons/react';
77
import clsx from 'clsx';
88

99
import ProfileMap from '@/features/map/components/ProfileMap/ProfileMap';
@@ -16,7 +16,7 @@ interface LocationSectionProps extends ProfileSectionProps {
1616
}
1717

1818
const LocationSection = forwardRef<HTMLElement, LocationSectionProps>(
19-
({ user, isEditable = false, onEdit, className }, ref) => {
19+
({ user, isEditable = false, onEdit, isPrivate = false, className }, ref) => {
2020
const handleEdit = () => {
2121
if (isEditable && onEdit) {
2222
onEdit('location');
@@ -61,6 +61,14 @@ const LocationSection = forwardRef<HTMLElement, LocationSectionProps>(
6161
{/* 지도 영역 */}
6262
<ProfileMap playerId={user.userId} location={user.location} />
6363
</div>
64+
65+
{/* 비공개 메시지 */}
66+
{isPrivate && (
67+
<div className={styles.privateMessage}>
68+
<LockIcon size={16} weight="regular" />
69+
<span>프로필 비공개 중입니다. 다른 사용자에게는 보이지 않습니다.</span>
70+
</div>
71+
)}
6472
</section>
6573
);
6674
}

‎src/features/Profile/components/sections/PortfolioSection.module.scss‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -126,3 +126,22 @@
126126
@include m.font-tiny-text;
127127
}
128128
}
129+
130+
.privateMessage {
131+
display: flex;
132+
align-items: center;
133+
justify-content: center;
134+
gap: 6px;
135+
margin-top: 16px;
136+
padding: 17px 12px 0;
137+
border-top: 1px solid v.$gray-4;
138+
font-size: v.$fs-xxxsmall;
139+
text-align: center;
140+
color: v.$gray-1;
141+
142+
@include m.mobile {
143+
margin-top: 12px;
144+
padding: 13px 8px 0;
145+
font-size: 11px;
146+
}
147+
}

‎src/features/Profile/components/sections/PortfolioSection.tsx‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33

44
import { forwardRef } from 'react';
55

6-
import { PencilSimpleIcon } from '@phosphor-icons/react';
6+
import { LockIcon, PencilSimpleIcon } from '@phosphor-icons/react';
77
import clsx from 'clsx';
88

99
import type { ProfileSectionProps } from '@/types/user';
@@ -15,7 +15,7 @@ interface PortfolioSectionProps extends ProfileSectionProps {
1515
}
1616

1717
const PortfolioSection = forwardRef<HTMLElement, PortfolioSectionProps>(
18-
({ user, isEditable = false, onEdit, className }, ref) => {
18+
({ user, isEditable = false, onEdit, isPrivate = false, className }, ref) => {
1919
const handleEdit = () => {
2020
if (isEditable && onEdit) {
2121
onEdit('portfolio');
@@ -72,6 +72,14 @@ const PortfolioSection = forwardRef<HTMLElement, PortfolioSectionProps>(
7272
</div>
7373
)}
7474
</div>
75+
76+
{/* 비공개 메시지 */}
77+
{isPrivate && (
78+
<div className={styles.privateMessage}>
79+
<LockIcon size={16} weight="regular" />
80+
<span>프로필 비공개 중입니다. 다른 사용자에게는 보이지 않습니다.</span>
81+
</div>
82+
)}
7583
</section>
7684
);
7785
}

‎src/features/Profile/components/sections/PositionSection.module.scss‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -136,3 +136,22 @@
136136
padding: 2px 10px;
137137
}
138138
}
139+
140+
.privateMessage {
141+
display: flex;
142+
align-items: center;
143+
justify-content: center;
144+
gap: 6px;
145+
margin-top: 16px;
146+
padding: 17px 12px 0;
147+
border-top: 1px solid v.$gray-4;
148+
font-size: v.$fs-xxxsmall;
149+
text-align: center;
150+
color: v.$gray-1;
151+
152+
@include m.mobile {
153+
margin-top: 12px;
154+
padding: 13px 8px 0;
155+
font-size: 11px;
156+
}
157+
}

‎src/features/Profile/components/sections/PositionSection.tsx‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33

44
import { forwardRef } from 'react';
55

6-
import { PencilSimpleIcon } from '@phosphor-icons/react';
6+
import { LockIcon, PencilSimpleIcon } from '@phosphor-icons/react';
77
import clsx from 'clsx';
88

99
import type { ProfileSectionProps } from '@/types/user';
@@ -15,7 +15,7 @@ interface PositionSectionProps extends ProfileSectionProps {
1515
}
1616

1717
const PositionSection = forwardRef<HTMLElement, PositionSectionProps>(
18-
({ user, isEditable = false, onEdit, className }, ref) => {
18+
({ user, isEditable = false, onEdit, isPrivate = false, className }, ref) => {
1919
const handleEdit = () => {
2020
if (isEditable && onEdit) {
2121
onEdit('position');
@@ -70,6 +70,14 @@ const PositionSection = forwardRef<HTMLElement, PositionSectionProps>(
7070
</div>
7171
)}
7272
</div>
73+
74+
{/* 비공개 메시지 */}
75+
{isPrivate && (
76+
<div className={styles.privateMessage}>
77+
<LockIcon size={16} weight="regular" />
78+
<span>프로필 비공개 중입니다. 다른 사용자에게는 보이지 않습니다.</span>
79+
</div>
80+
)}
7381
</section>
7482
);
7583
}

‎src/features/Profile/components/sections/ProjectSection.module.scss‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -195,3 +195,22 @@
195195
padding: 6px 12px;
196196
}
197197
}
198+
199+
.privateMessage {
200+
display: flex;
201+
align-items: center;
202+
justify-content: center;
203+
gap: 6px;
204+
margin-top: 16px;
205+
padding: 17px 12px 0;
206+
border-top: 1px solid v.$gray-4;
207+
font-size: v.$fs-xxxsmall;
208+
text-align: center;
209+
color: v.$gray-1;
210+
211+
@include m.mobile {
212+
margin-top: 12px;
213+
padding: 13px 8px 0;
214+
font-size: 11px;
215+
}
216+
}

0 commit comments

Comments
 (0)