Skip to content

Commit

Permalink
Merge pull request #78 from capstone-maru/fix/shared-api
Browse files Browse the repository at this point in the history 
feat: 교수님 피드백 이전 임시 PR
  • Loading branch information
@cjeongmin
cjeongmin authored May 10, 2024
2 parents 7b38040 + 7e16cff commit c08dc3c
Show file tree
Hide file tree
Showing 11 changed files with 421 additions and 107 deletions.
30 changes: 22 additions & 8 deletions src/app/pages/main-page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import { CircularButton } from '@/components';
import { UserCard } from '@/components/main-page';
import { useAuthActions, useAuthValue, useUserData } from '@/features/auth';
import { getGeolocation } from '@/features/geocoding';
import { useRecommendationMate } from '@/features/recommendation';
import { useDummyUsers } from '@/features/shared';

const styles = {
container: styled.div`
Expand Down Expand Up @@ -94,11 +94,11 @@ export function MainPage() {

const { data: userData } = useUserData(auth?.accessToken !== undefined);

const { data: recommendationMates } = useRecommendationMate({
memberId: auth?.user?.memberId ?? 'undefined',
cardType: 'mate',
enabled: auth?.accessToken != null,
});
// const { data: recommendationMates } = useRecommendationMate({
// memberId: auth?.user?.memberId ?? 'undefined',
// cardType: 'mate',
// enabled: auth?.accessToken != null,
// });

const [map, setMap] = useState<naver.maps.Map | null>(null);

Expand Down Expand Up @@ -147,6 +147,8 @@ export function MainPage() {
}
}, [userData, router, setAuthUserData]);

const users = useDummyUsers();

return (
<styles.container>
<styles.map id="map">
Expand All @@ -168,14 +170,26 @@ export function MainPage() {
onClick={handleScrollLeft}
/>
<styles.mateRecommendation ref={scrollRef}>
{recommendationMates?.map(({ name, similarity, userId }) => (
{/* {recommendationMates?.map(({ name, similarity, userId }) => (
<Link key={userId} href={`/profile/${userId}`}>
<UserCard
name={name}
percentage={Math.floor(similarity * 100)}
/>
</Link>
))}
))} */}
{users?.map(
({
userId,
data: {
authResponse: { name },
},
}) => (
<Link key={userId} href={`/profile/${userId}`}>
<UserCard name={name} percentage={50} />
</Link>
),
)}
</styles.mateRecommendation>
<CircularButton
direction="right"
Expand Down
103 changes: 56 additions & 47 deletions src/app/pages/shared-post-page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -373,20 +373,19 @@ const styles = {
`,
};

const dummyImages = [
'https://s3-alpha-sig.figma.com/img/efd0/12b5/6a0078a4aa75b0e9a9fb53a6d9a7c560?Expires=1714348800&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=ciMXf2L3kV1XzY76T5Ak5h2Ii1fEeZvK7KAykXxq3BIrlhdagKrN13jKM7UcWH5KgkEkHQjTDTHgII6Wv9Ffzswzz1ZabaSwefdVk9~NveeheHxjY2asCCinzAyQOtSXSqFavmapvkqIsc3YKmtqm6ic13PHPfaKEkoqm9lIrpb2fE60VY9A9gWTK1JycwjACH4hy4R44fDTNWaji9ItzR4Ch-vzDWd3rqINyRRFYbnIFj-ow6CSsBDqKWu-5X3Bq2teT9N8Xj2mULZjQtfd7pLtd55QoMHtRzzqtR-M-Pf4cLpmBZYN-0hkC4XHY3rq2HKQHOSd16k~azGjBkOBqQ__',
'https://s3-alpha-sig.figma.com/img/ff85/788d/96b4a3ec1b31b6baf36b11c772529753?Expires=1714348800&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=nvS2kVR-bHmV41ZhIADPEQMxhHJcFPtvDB2S4-h6IVQRRaRrzmPfYac5YIKkghcQELjIqKfePgsmRO-jVIQj-k6GVCcMQPkXxYJjT7x6UVeygGkBx5AVkmgE4yBgrpv~UzCIPKMY5TrK1KnCkZp9N9rus-8ooKMenzuYjbqqNS41WzYkQQvHD9KHafnRU7nb7pgA0fMe88teFauhpW3sCAgJvEWdkQQTtBgedIiphLU7vX9Kww54tCoNZ3vshSbggZW6L4wG39ztH5oSpjiRyviYmZ6z5WXUCno3YPGSVQLfzpfBYYh-tPEaicdxyUD5QhP9rDTee1aU3DDkPCwx1g__',
];

// const dummyMates = [
// 'https://s3-alpha-sig.figma.com/img/59a5/3c6f/ae49249b51c7d5d81ab89eeb0bf610f1?Expires=1714348800&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=Ou47yOoRJ57c0QqtWD~w0S6BP1UYWpmpCOCgsq9YTqfbNq~TmwfAI2T24-fYxpKSiBDv8y1Tkup68OTc5v2ZHIG~~CLwn6NCBF7QqTu7sQB0oPCvdRFdBm~y4wI8VEIErYhPsCuV2k7L0GVlJss4KkeM1tt1RX0kwfINvh03yzFf8wtjd0xsUJjMaKjNxU3muS2Cj8BZymckjgNGrTvafiGbAfHt0Bw2fTkH8tctfNNXpnZgqrEeDldEuENV~g-fSsLSFbMceZGN5ILEd9gd6fnY2YYeB7qtb9xozvczwTbz6kYIzzHJc7veYTsvxjqx~qTiKF2Yrn45cn5pXvOv1w__',
// ];

export function SharedPostPage({ postId }: { postId: number }) {
const auth = useAuthValue();
const [, setMap] = useState<naver.maps.Map | null>(null);

const { data: sharedPost } = useSharedPost({
const [selected, setSelected] = useState<
| {
memberId: string;
profileImage: string;
}
| undefined
>(undefined);

const { isLoading, data: sharedPost } = useSharedPost({
postId,
enabled: auth?.accessToken !== undefined,
});
Expand Down Expand Up @@ -438,97 +437,107 @@ export function SharedPostPage({ postId }: { postId: number }) {
const members = [userId];
const { mutate: chattingMutate } = useCreateChatRoom(roomName, members);

if (isLoading || sharedPost == null) return <></>;

return (
<styles.container>
<styles.contentContainer>
<styles.postContainer>
<styles.ImageGrid images={dummyImages} />
<styles.ImageGrid
images={sharedPost.data.roomImages.map(({ fileName }) => fileName)}
/>
<styles.postInfoContainer>
<div>
<h1>{sharedPost?.data.title}</h1>
<h1>{sharedPost.data.title}</h1>
<Bookmark
hasBorder={false}
marked={sharedPost?.data.isScrapped ?? false}
marked={sharedPost.data.isScrapped}
onToggle={() => {
scrapPost(postId);
}}
color="black"
/>
</div>
<styles.postInfoContent>
<span>모집 1명 / 총원 2명</span>
<span>원룸 / 방 1</span>
<span>모집 {sharedPost.data.roomInfo.recruitmentCapacity}명</span>
<span>
{sharedPost.data.roomInfo.roomType} · 방{' '}
{sharedPost.data.roomInfo.numberOfRoom} · 화장실{' '}
{sharedPost.data.roomInfo.numberOfBathRoom}
</span>
<div>
<span>희망 월 분담금 65만원</span>
<span>저장 4 · 조회 22</span>
<span>
희망 월 분담금 {sharedPost.data.roomInfo.expectedPayment}만원
</span>
<span>
저장 {sharedPost.data.scrapCount} · 조회{' '}
{sharedPost.data.viewCount}
</span>
</div>
</styles.postInfoContent>
</styles.postInfoContainer>
<styles.postContentContainer>
<h2>상세 정보</h2>
<p>
안녕하세요! 저는 현재 룸메이트를 찾고 있는 정연수입니다. 서울시
정릉동에서 함께 살아갈 룸메이트를 구하고 있습니다. 주로 밤에
작업을 하며 새벽 2시~3시쯤에 취침합니다. 관심있으신 분들 연락
주세요!
</p>
<p>{sharedPost.data.content}</p>
</styles.postContentContainer>
<styles.divider />
<styles.dealInfoContainer>
<h2>거래 정보</h2>
<div>
<span>거래 방식</span>
<span>월세</span>
<span>{sharedPost.data.roomInfo.rentalType}</span>
</div>
<div>
<span>희망 월 분담금</span>
<span>65만원</span>
<span>{sharedPost.data.roomInfo.expectedPayment}</span>
</div>
</styles.dealInfoContainer>
<styles.roomInfoContainer>
<h2>방 정보</h2>
<div>
<span>방 종류</span>
<span>원룸</span>
<span>{sharedPost.data.roomInfo.roomType}</span>
</div>
<div>
<span>거실 보유</span>
<span>있음</span>
<span>
{sharedPost.data.roomInfo.hasLivingRoom ? '유' : '무'}
</span>
</div>
<div>
<span>방 개수</span>
<span>2개</span>
<span>{sharedPost.data.roomInfo.numberOfRoom}개</span>
</div>
<div>
<span>화장실 개수</span>
<span>1개</span>
<span>{sharedPost.data.roomInfo.numberOfBathRoom}개</span>
</div>
<div>
<span>평수</span>
<span>14평</span>
<span>{sharedPost.data.roomInfo.size}평</span>
</div>
</styles.roomInfoContainer>
<styles.locationInfoContainer>
<h2>위치 정보</h2>
<p>{sharedPost?.data.roomInfo.address.roadAddress}</p>
<p>{sharedPost.data.address.roadAddress}</p>
<div id="map" />
</styles.locationInfoContainer>
</styles.postContainer>
<styles.mateContainer>
<styles.mates>
<styles.mate
$selected
$zIndex={3}
src="https://s3-alpha-sig.figma.com/img/59a5/3c6f/ae49249b51c7d5d81ab89eeb0bf610f1?Expires=1714348800&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=Ou47yOoRJ57c0QqtWD~w0S6BP1UYWpmpCOCgsq9YTqfbNq~TmwfAI2T24-fYxpKSiBDv8y1Tkup68OTc5v2ZHIG~~CLwn6NCBF7QqTu7sQB0oPCvdRFdBm~y4wI8VEIErYhPsCuV2k7L0GVlJss4KkeM1tt1RX0kwfINvh03yzFf8wtjd0xsUJjMaKjNxU3muS2Cj8BZymckjgNGrTvafiGbAfHt0Bw2fTkH8tctfNNXpnZgqrEeDldEuENV~g-fSsLSFbMceZGN5ILEd9gd6fnY2YYeB7qtb9xozvczwTbz6kYIzzHJc7veYTsvxjqx~qTiKF2Yrn45cn5pXvOv1w__"
/>
<styles.mate
$zIndex={2}
src="https://s3-alpha-sig.figma.com/img/59a5/3c6f/ae49249b51c7d5d81ab89eeb0bf610f1?Expires=1714348800&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=Ou47yOoRJ57c0QqtWD~w0S6BP1UYWpmpCOCgsq9YTqfbNq~TmwfAI2T24-fYxpKSiBDv8y1Tkup68OTc5v2ZHIG~~CLwn6NCBF7QqTu7sQB0oPCvdRFdBm~y4wI8VEIErYhPsCuV2k7L0GVlJss4KkeM1tt1RX0kwfINvh03yzFf8wtjd0xsUJjMaKjNxU3muS2Cj8BZymckjgNGrTvafiGbAfHt0Bw2fTkH8tctfNNXpnZgqrEeDldEuENV~g-fSsLSFbMceZGN5ILEd9gd6fnY2YYeB7qtb9xozvczwTbz6kYIzzHJc7veYTsvxjqx~qTiKF2Yrn45cn5pXvOv1w__"
/>
<styles.mate
$zIndex={1}
src="https://s3-alpha-sig.figma.com/img/59a5/3c6f/ae49249b51c7d5d81ab89eeb0bf610f1?Expires=1714348800&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=Ou47yOoRJ57c0QqtWD~w0S6BP1UYWpmpCOCgsq9YTqfbNq~TmwfAI2T24-fYxpKSiBDv8y1Tkup68OTc5v2ZHIG~~CLwn6NCBF7QqTu7sQB0oPCvdRFdBm~y4wI8VEIErYhPsCuV2k7L0GVlJss4KkeM1tt1RX0kwfINvh03yzFf8wtjd0xsUJjMaKjNxU3muS2Cj8BZymckjgNGrTvafiGbAfHt0Bw2fTkH8tctfNNXpnZgqrEeDldEuENV~g-fSsLSFbMceZGN5ILEd9gd6fnY2YYeB7qtb9xozvczwTbz6kYIzzHJc7veYTsvxjqx~qTiKF2Yrn45cn5pXvOv1w__"
/>
{sharedPost.data.participants.map(
({ memberId, profileImage }, index) => (
<styles.mate
key={memberId}
$selected={memberId === selected?.memberId}
$zIndex={index}
src={profileImage}
onClick={() => {
setSelected({ memberId, profileImage });
}}
/>
),
)}
</styles.mates>
<styles.selectedMateContainer>
<styles.profile>
Expand All @@ -539,15 +548,15 @@ export function SharedPostPage({ postId }: { postId: number }) {
/>
<styles.profileInfo>
<p className="name">
{sharedPost?.data.publisherAccount.nickname}
{sharedPost.data.publisherAccount.nickname}
</p>
<div>
<p>
{sharedPost?.data.publisherAccount.birthYear != null
{sharedPost.data.publisherAccount.birthYear != null
? getAge(+sharedPost.data.publisherAccount.birthYear)
: new Date().getFullYear()}
</p>
<p>서웉특별시 성북구</p>
<p>{sharedPost.data.address.roadAddress}</p>
</div>
</styles.profileInfo>
</styles.profile>
Expand Down
33 changes: 23 additions & 10 deletions src/app/pages/shared-posts-page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,7 @@ import {
type SharedPostsType,
} from '@/entities/shared-posts-filter';
import { useAuthActions, useAuthValue, useUserData } from '@/features/auth';
import { useRecommendationMate } from '@/features/recommendation';
import { usePaging, useSharedPosts } from '@/features/shared';
import { useDummyUsers, usePaging, useSharedPosts } from '@/features/shared';
import { type GetSharedPostsDTO } from '@/features/shared/';

const styles = {
Expand Down Expand Up @@ -120,7 +119,7 @@ export function SharedPostsPage() {
useState<GetSharedPostsDTO | null>(null);
const { setAuthUserData } = useAuthActions();

const { filter, derivedFilter, reset: resetFilter } = useSharedPostsFilter();
const { derivedFilter, reset: resetFilter } = useSharedPostsFilter();
const { data: userData } = useUserData(auth?.accessToken != null);

const {
Expand All @@ -143,11 +142,11 @@ export function SharedPostsPage() {
page: page - 1,
});

const { data: recommendationMates } = useRecommendationMate({
memberId: auth?.user?.memberId ?? 'undefined',
cardType: filter.cardType ?? 'mate',
enabled: auth?.accessToken != null && selected === 'homeless',
});
// const { data: recommendationMates } = useRecommendationMate({
// memberId: auth?.user?.memberId ?? 'undefined',
// cardType: filter.cardType ?? 'mate',
// enabled: auth?.accessToken != null && selected === 'homeless',
// });

useEffect(() => {
resetFilter();
Expand All @@ -172,6 +171,8 @@ export function SharedPostsPage() {
}
}, [userData, router, setAuthUserData]);

const users = useDummyUsers();

return (
<styles.container>
<styles.SharedPostsMenu selected={selected} handleSelect={setSelected} />
Expand Down Expand Up @@ -254,11 +255,23 @@ export function SharedPostsPage() {
</>
) : (
<styles.cards>
{recommendationMates?.map(({ userId, name, similarity }) => (
{/* {recommendationMates?.map(({ userId, name, similarity }) => (
<Link href={`/profile/${userId}`} key={userId}>
<UserCard name={name} percentage={Math.floor(similarity * 100)} />
</Link>
))}
))} */}
{users?.map(
({
userId,
data: {
authResponse: { name },
},
}) => (
<Link key={userId} href={`/profile/${userId}`}>
<UserCard name={name} percentage={50} />
</Link>
),
)}
</styles.cards>
)}
</styles.container>
Expand Down
14 changes: 9 additions & 5 deletions src/components/card/VitalSection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -271,15 +271,15 @@ export function VitalSection({
});
onFeatureChange(key, value);
},
[],
[onFeatureChange],
);

const [initialLocation, setInitialLocation] = useState('');
useEffect(() => {
if (location !== undefined && type === 'myCard') {
setInitialLocation(location);
}
}, [location]);
}, [location, type]);

const [locationInput, setLocation] = useState('');
useEffect(() => {
Expand All @@ -289,9 +289,10 @@ export function VitalSection({
const handleLocationChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setLocation(event.target.value);
};

useEffect(() => {
onLocationChange(locationInput);
}, [locationInput]);
}, [onLocationChange, locationInput]);

const [initialAge, setInitialAge] = useState<number>(0);
const [ageValue, setAgeValue] = useState<number>(0);
Expand All @@ -305,8 +306,11 @@ export function VitalSection({
}, [initialAge]);

const handleAgeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setAgeValue(Number(e.target.value));
onMateAgeChange(Number(e.target.value));
if (!Number.isNaN(e.target.value)) {
const n = Number(e.target.value);
setAgeValue(n);
onMateAgeChange(n === 11 ? undefined : n);
}
};

let ageValueString;
Expand Down
Loading

0 comments on commit c08dc3c

Please sign in to comment.