Skip to content

Commit

Permalink
refactor: tailwindCSS 순서 정렬 (TEAM-CLIP#8)
Browse files Browse the repository at this point in the history
  • Loading branch information
@NeoSelf1
NeoSelf1 committed Aug 25, 2024
1 parent 3d6a449 commit 2d14fc4
Show file tree
Hide file tree
Showing 19 changed files with 121 additions and 93 deletions.
8 changes: 4 additions & 4 deletions src/app/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,16 +28,16 @@
@apply h-[3rem] px-[1.5rem] py-[0.75rem] rounded-lg transition-colors duration-200 w-full text-center font-medium;
}
.btn-container {
@apply fixed bottom-0 left-1/2 transform -translate-x-1/2 flex justify-center bg-white p-4 max-w-md w-full;
@apply fixed bottom-0 flex justify-center w-full max-w-md p-4 transform -translate-x-1/2 bg-white left-1/2;
}
.btn-primary {
@apply btn bg-gray-800 text-white hover:bg-gray-700;
@apply text-white bg-gray-800 btn hover:bg-gray-700;
}
.btn-default {
@apply btn bg-gray-100 text-gray-900 hover:bg-gray-200;
@apply text-gray-900 bg-gray-100 btn hover:bg-gray-200;
}
.btn-selected {
@apply btn bg-gray-800 text-white;
@apply text-white bg-gray-800 btn;
}
.placeholder-gray-300::placeholder {
color: #c1cbd8;
Expand Down
7 changes: 3 additions & 4 deletions src/app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,14 @@ const Home = () => {
<Image
src={BackgroundImage}
alt="background"
layout="fill"
objectFit="cover"
fill
quality={100}
className="pointer-events-none"
className="object-cover pointer-events-none"
/>
</div>

<div className="absolute inset-0 z-10 bg-gradient-to-t from-black/80 via-black/70 to-transparent" />
<div className="relative z-20 h-full flex flex-col justify-between">
<div className="relative z-20 flex flex-col justify-between h-full">
<div className="pl-[1.25rem]">
<h1 className="body-2 mt-[6.94rem] mb-[0.64rem] text-white">
순간을 Chik다,
Expand Down
4 changes: 2 additions & 2 deletions src/app/photographer/loading.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@ import React from 'react';

const Loading = () => {
return (
<div className="flex justify-center items-center h-screen">
<div className="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-gray-900"></div>
<div className="flex items-center justify-center h-screen">
<div className="w-32 h-32 border-t-2 border-b-2 border-gray-900 rounded-full animate-spin"></div>
</div>
);
};
Expand Down
85 changes: 54 additions & 31 deletions src/app/photographer/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,12 @@ import Link from 'next/link';
import { useSearchParams } from 'next/navigation';
import Loading from '@/components/Loading';
import { photoData, photographerData, snapTypeChoice } from '@/data/database';
import Instagram from '@/data/instagram.svg';
import { Photographer } from '@/types';

const RecommendedPhotographers = () => {
const [isLoading, setIsLoading] = useState(true);
const [moodData, setMoodData] = useState<any>([]);
const [data, setData] = useState<any>([]);

const searchParams = useSearchParams();
Expand All @@ -24,6 +26,7 @@ const RecommendedPhotographers = () => {
?.split(',')
.map((id: string) => photoData.find((item) => item.id === +id)?.mood)
.sort();
setMoodData(moods);
if (!types || !moods) return;

const filteredPhotographerByType = photographerData.filter((item) =>
Expand All @@ -36,8 +39,8 @@ const RecommendedPhotographers = () => {

const photographerMoodCounts = filteredPhotographerByType.map(
(photographer) => {
// 모든 사진작가들에 대해,
const moodCounts = new Map<number, number>();
// 모든 사진작가들에 대해,
for (const imageId of photographer.works) {
//순회하는 사진작가 작품 이미지의 무드를
const mood = photoMoodMap.get(imageId);
Expand All @@ -58,9 +61,10 @@ const RecommendedPhotographers = () => {
)
.map((item) => item.photographer),
);
console.log('moodSortedPhotographers:', moodSortedPhotographers);

const selectedPhotographers = new Set<Photographer>();
const moodIndices = new Array(moods.length).fill(0);
const moodIndices = [0, 0, 0];

while (selectedPhotographers.size < 3) {
for (let i = 0; i < moods.length; i++) {
Expand All @@ -71,6 +75,7 @@ const RecommendedPhotographers = () => {
if (selectedPhotographers.size === 3) break;
}
}

if (
moodIndices.every(
(index, i) => index === moodSortedPhotographers[i].length,
Expand Down Expand Up @@ -98,16 +103,16 @@ const RecommendedPhotographers = () => {

return (
<div className="relative flex flex-col mx-4 mb-24">
<h2 className="title-1 mt-2">칙스냅에서 추천드리는 작가예요!</h2>
<h2 className="mt-2 title-1">칙스냅에서 추천드리는 작가예요!</h2>

<h3 className="body-3 text-gray-500 mt-1 mb-6 text-balance">
<h3 className="mt-1 mb-6 text-gray-500 body-3 text-balance">
아래 작가분들은 여러분의 선택을 기반으로 칙스냅에서 추천드리는
작가님이에요. 자세히 보기를 통해 작가님의 정보를 확인하고 그리던 사진을
촬영해요
</h3>

<div className="flex flex-col gap-[0.62rem]">
{data.map((photographer: Photographer) => (
{data.map((photographer: Photographer, index: number) => (
<div
key={photographer.id}
className="flex flex-col w-full bg-gray-50 hover:bg-gray-100 p-[0.75rem] rounded-[0.5rem] cursor-pointer"
Expand All @@ -116,34 +121,39 @@ const RecommendedPhotographers = () => {
target={'_blank'}
href={`https://www.instagram.com/${photographer.instagram_id}`}
>
<div className="flex flex-col w-full justify-center">
<div className="flex w-full mb-[0.63rem]">
<div className="flex relative w-[2.25rem] h-[2.25rem] mr-[0.62rem] rounded-[0.25rem]">
<Image
src={photographer.profile_image_url}
alt={photographer.name}
width={54}
height={54}
objectFit="cover"
className="rounded-lg transition-transform duration-300 ease-in-out hover:scale-110"
/>
</div>

<div className="flex items-center gap-[0.5rem]">
<span className="body-1 text-gray-900">
{photographer.name}
</span>

<span className="caption text-gray-600">
{`@${photographer.instagram_id}`}
</span>
</div>
<div className="flex flex-col justify-center w-full">
<div className="flex w-full items-center space-x-2 mb-2.5">
<Image
src={photographer.profile_image_url}
alt={photographer.name}
width={36}
height={36}
className="object-cover transition-transform duration-300 ease-in-out rounded-lg hover:scale-110"
/>

<span className="text-gray-900 body-1">
{photographer.name}
</span>

<span className="flex-grow text-gray-600 caption">
{`@${photographer.instagram_id}`}
</span>

<Image
src={Instagram}
width={24}
height={24}
alt="Instagram"
style={{ filter: 'invert(60%)' }}
className="object-cover"
/>
</div>

<div className="flex items-center gap-[0.25rem] mb-[0.62rem]">
<div className="items-center gap-[0.25rem] mb-[0.62rem] flex">
<div className="caption px-[0.5rem] py-[0.25rem] bg-gray-200 rounded-[0.25rem]">
{photographer.price}
</div>

{photographer.types.map((typeId, index) => (
<div
key={index}
Expand All @@ -154,19 +164,32 @@ const RecommendedPhotographers = () => {
))}
</div>
</div>

<div className="flex gap-[0.5rem]">
{photographerData
.find((item) => item.id === photographer.id)
?.works.slice(0, 3)
?.works.sort(
(a, b) =>
Math.abs(
photoData.find((item) => item.id === a)!.mood -
moodData[index],
) -
Math.abs(
photoData.find((item) => item.id === b)!.mood -
moodData[index],
),
)
.slice(0, 3)
.map((imageId, index) => (
<div key={index} className="relative w-1/3 h-[8.5rem]">
<Image
src={
photoData.find((item) => item.id === imageId)?.url!
}
alt="example image"
layout="fill"
className="rounded-[0.25rem] object-cover"
fill
quality={100}
className="rounded-[0.25rem] object-cover w-auto h-auto"
/>
</div>
))}
Expand Down
4 changes: 2 additions & 2 deletions src/app/request-custom/loading.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@ import React from 'react';

const Loading = () => {
return (
<div className="flex justify-center items-center h-screen">
<div className="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-gray-900"></div>
<div className="flex items-center justify-center h-screen">
<div className="w-32 h-32 border-t-2 border-b-2 border-gray-900 rounded-full animate-spin"></div>
</div>
);
};
Expand Down
8 changes: 4 additions & 4 deletions src/app/request-custom/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,11 +29,11 @@ const RequestCustom = () => {

try {
await submitForm({ phone_number: phoneNumber, prefer_style: text });
setIsModalOpen(true);
} catch (error) {
console.error('실패: ', error);
alert('요청 전송에 실패했습니다. 다시 시도해주세요.');
} finally {
setIsModalOpen(true);
setLoading(false);
}
};
Expand All @@ -45,17 +45,17 @@ const RequestCustom = () => {

return (
<div className="relative flex flex-col mx-4 mb-24">
<h2 className="title-1 mt-2">맞춤형 작가 요청해보세요.</h2>
<h2 className="mt-2 title-1">맞춤형 작가 요청해보세요.</h2>

<h3 className="body-3 text-gray-500 mt-1 mb-6 whitespace-pre-line">
<h3 className="mt-1 mb-6 text-gray-500 whitespace-pre-line body-3">
{`칙스냅에서 회원님에게 최적화된 작가분들을 찾아 추천해드릴게요.
약 1~3일 정도 소요될 수 있어요!`}
</h3>

<div className="flex flex-col gap-[0.5rem]">
<div className="flex justify-between">
<h2 className="body-1">전화번호</h2>
<h2 className="body-3 text-gray-500">*필수</h2>
<h2 className="text-gray-500 body-3">*필수</h2>
</div>
<div className="mb-[1.75rem]">
<input
Expand Down
24 changes: 14 additions & 10 deletions src/app/request-notification/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,11 +26,11 @@ const RequestNotification = () => {

try {
await submitForm({ phone_number: phoneNumber, prefer_style: '알림요청' });
setIsModalOpen(true);
} catch (error) {
console.error('실패: ', error);
alert('요청 전송에 실패했습니다. 다시 시도해주세요.');
} finally {
setIsModalOpen(true);
setLoading(false);
}
};
Expand All @@ -42,16 +42,15 @@ const RequestNotification = () => {

return (
<div className="relative flex flex-col mx-4 mb-24">
<div className="py-3 flex justify-end" onClick={() => router.back()}>
<div className="flex justify-end py-3" onClick={() => router.back()}>
<Image
src={Close}
alt="Back"
className="flex w-[1.5rem] h-[1.5rem]"
style={{ objectFit: 'cover' }}
className="flex w-[1.5rem] h-[1.5rem] object-cover"
/>
</div>
<h2 className="title-1 mt-2">칙스냅이 오픈되면, 알려드릴게요!</h2>
<h3 className="body-3 text-gray-500 mt-1 mb-6 whitespace-pre-line">
<h2 className="mt-2 title-1">칙스냅이 오픈되면, 알려드릴게요!</h2>
<h3 className="mt-1 mb-6 text-gray-500 whitespace-pre-line body-3">
{`안녕하세요, 순간을 Chik다. chiksnap입니다.
Chiksnap은 스냅사진작가를 추천해주는 플랫폼으로 10월 출시 예정에
있습니다.
Expand All @@ -60,7 +59,7 @@ Chiksnap은 스냅사진작가를 추천해주는 플랫폼으로 10월 출시
<div className="flex flex-col gap-[0.5rem]">
<div className="flex justify-between">
<h2 className="body-1">전화번호</h2>
<h2 className="body-3 text-gray-500">*필수</h2>
<h2 className="text-gray-500 body-3">*필수</h2>
</div>

<div className="mb-[1.75rem]">
Expand All @@ -76,13 +75,18 @@ Chiksnap은 스냅사진작가를 추천해주는 플랫폼으로 10월 출시
/>
</div>
</div>
<div className="btn-container space-x-2">
<div className="space-x-2 btn-container">
<Link
target="_blank"
href={`https://www.instagram.com/chik_snap/`}
className="btn-default flex justify-center space-x-1"
className="flex justify-center space-x-1 btn-default"
>
<Image src={Instagram} width={24} alt="Instagram" objectFit="cover" />
<Image
src={Instagram}
width={24}
alt="Instagram"
className="object-cover"
/>
<h1 className="body-3">칙스냅에 문의하기</h1>
</Link>

Expand Down
4 changes: 2 additions & 2 deletions src/app/select-mood/loading.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@ import React from 'react';

const Loading = () => {
return (
<div className="flex justify-center items-center h-screen">
<div className="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-gray-900"></div>
<div className="flex items-center justify-center h-screen">
<div className="w-32 h-32 border-t-2 border-b-2 border-gray-900 rounded-full animate-spin"></div>
</div>
);
};
Expand Down
8 changes: 4 additions & 4 deletions src/app/select-mood/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,22 +26,22 @@ const SelectMood = () => {
return (
<div className="flex flex-col">
<div className="fixed w-[28rem] bg-white px-4 pb-2 z-20 pt-2">
<div className="flex flex-row justify-between items-center">
<div className="flex flex-row items-center justify-between">
<h2 className="title-1">마음에 드는 스냅 3장을 골라주세요.</h2>
<span className="body-1">
2<span className="text-gray-400">/2</span>
</span>
</div>

<h3 className="body-3 text-gray-500 mt-1 whitespace-pre-line">
<h3 className="mt-1 text-gray-500 whitespace-pre-line body-3">
{`선택하신 스냅의 분위기와 유사한 스타일의
작가님을 추천해드릴게요.`}
</h3>
</div>

{/* 스크롤 가능한 이미지 섹션 */}
<div className="flex-grow px-4 mt-28 mb-20">
<div className="flex flex-row space-x-1 pb-4">
<div className="flex-grow px-4 mb-20 mt-28">
<div className="flex flex-row pb-4 space-x-1">
<MoodImageGroup
images={arrangedPhotos[0]}
selectedMoods={selectedMoods}
Expand Down
Loading

0 comments on commit 2d14fc4

Please sign in to comment.