Skip to content

Commit a619ef3

Browse files
createhb21createhb21
committed
FEAT 여러가지 스타일링들 (#develop)
1 parent 79df3c9 commit a619ef3

File tree

7 files changed

+164
-90
lines changed

7 files changed

+164
-90
lines changed

‎services/ahhachul.com/src/assets/icons/jsx/icons.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -89,13 +89,13 @@ function FaceIDIcon() {
8989
height="19"
9090
viewBox="0 0 20 19"
9191
fill="none"
92-
className="mr-[-4px]"
9392
xmlns="http://www.w3.org/2000/svg"
93+
style={{ width: 48, height: 48 }}
9494
>
9595
<title>Face ID</title>
9696
<path
9797
d="M1.66382 6.44434C1.00513 6.44434 0.634033 6.07324 0.634033 5.396V3.16016C0.634033 1.11914 1.72876 0.0429688 3.77905 0.0429688H6.01489C6.69214 0.0429688 7.06323 0.404785 7.06323 1.07275C7.06323 1.74072 6.69214 2.11182 6.01489 2.11182H3.95532C3.13892 2.11182 2.70288 2.52002 2.70288 3.37354V5.396C2.70288 6.07324 2.34106 6.44434 1.66382 6.44434ZM18.1497 6.44434C17.4817 6.44434 17.1106 6.07324 17.1106 5.396V3.37354C17.1106 2.52002 16.6653 2.11182 15.8582 2.11182H13.7986C13.1213 2.11182 12.7502 1.74072 12.7502 1.07275C12.7502 0.404785 13.1213 0.0429688 13.7986 0.0429688H16.0344C18.094 0.0429688 19.1794 1.12842 19.1794 3.16016V5.396C19.1794 6.07324 18.8176 6.44434 18.1497 6.44434ZM9.16919 10.8696C8.67749 10.8696 8.37134 10.6099 8.37134 10.1738C8.37134 9.80273 8.65894 9.52441 9.03931 9.52441H9.29907C9.37329 9.52441 9.41968 9.47803 9.41968 9.39453V6.47217C9.41968 6.07324 9.68872 5.8042 10.0969 5.8042C10.4958 5.8042 10.7556 6.07324 10.7556 6.47217V9.3667C10.7556 10.3315 10.2268 10.8696 9.25269 10.8696H9.16919ZM6.46021 8.69873C5.99634 8.69873 5.65308 8.36475 5.65308 7.8916V6.62988C5.65308 6.15674 5.99634 5.81348 6.46021 5.81348C6.93335 5.81348 7.26733 6.15674 7.26733 6.62988V7.8916C7.26733 8.36475 6.93335 8.69873 6.46021 8.69873ZM13.3347 8.69873C12.8616 8.69873 12.5183 8.36475 12.5183 7.8916V6.62988C12.5183 6.15674 12.8616 5.81348 13.3347 5.81348C13.7986 5.81348 14.1326 6.15674 14.1326 6.62988V7.8916C14.1326 8.36475 13.7986 8.69873 13.3347 8.69873ZM9.86499 13.8848C8.68677 13.8848 7.50854 13.4209 6.77563 12.5767C6.64575 12.4189 6.59009 12.2705 6.59009 12.0942C6.59009 11.7139 6.87769 11.4263 7.25806 11.4263C7.48999 11.4263 7.62915 11.5376 7.79614 11.6953C8.31567 12.2241 9.10425 12.5581 9.86499 12.5581C10.6536 12.5581 11.4421 12.2056 11.9338 11.7046C12.1194 11.5005 12.2585 11.4263 12.4534 11.4263C12.8337 11.4263 13.1306 11.7139 13.1306 12.0942C13.1306 12.2983 13.0657 12.4653 12.9451 12.5859C12.1287 13.4023 10.9875 13.8848 9.86499 13.8848ZM3.77905 18.5884C1.72876 18.5884 0.634033 17.5029 0.634033 15.4712V13.2261C0.634033 12.5581 0.99585 12.187 1.66382 12.187C2.33179 12.187 2.70288 12.5581 2.70288 13.2261V15.2578C2.70288 16.1113 3.13892 16.5195 3.95532 16.5195H6.01489C6.69214 16.5195 7.06323 16.8906 7.06323 17.5493C7.06323 18.2173 6.69214 18.5884 6.01489 18.5884H3.77905ZM13.7986 18.5884C13.1213 18.5884 12.7502 18.2173 12.7502 17.5493C12.7502 16.8906 13.1213 16.5195 13.7986 16.5195H15.8582C16.6653 16.5195 17.1106 16.1113 17.1106 15.2578V13.2261C17.1106 12.5581 17.4724 12.187 18.1497 12.187C18.8083 12.187 19.1794 12.5581 19.1794 13.2261V15.4712C19.1794 17.5029 18.094 18.5884 16.0344 18.5884H13.7986Z"
98-
fill="white"
98+
fill="#29e236"
9999
/>
100100
</svg>
101101
);
@@ -146,22 +146,22 @@ function CloseIcon() {
146146
function LockIcon() {
147147
return (
148148
<svg
149-
style={{ transform: 'translateY(-1px)' }}
150149
width="20"
151150
height="21"
152151
viewBox="0 0 20 21"
153152
fill="none"
154153
xmlns="http://www.w3.org/2000/svg"
154+
style={{ width: 48, height: 48, transform: 'translateY(-1px)' }}
155155
>
156156
<title>Lock</title>
157157
<path
158158
d="M6.00024 9V6C6.00024 3.79086 7.79111 2 10.0002 2V2C12.2094 2 14.0002 3.79086 14.0002 6V9"
159-
stroke="#8F8F8F"
159+
stroke="#29e236"
160160
strokeWidth="2.33319"
161161
/>
162162
<path
163163
d="M6.68423 9H13.3163V7H6.68423V9ZM16.0002 11.684V16.316H18.0002V11.684H16.0002ZM13.3163 19H6.68423V21H13.3163V19ZM4.00024 16.316V11.684H2.00024V16.316H4.00024ZM6.68423 19C5.20191 19 4.00024 17.7983 4.00024 16.316H2.00024C2.00024 18.9029 4.09734 21 6.68423 21V19ZM16.0002 16.316C16.0002 17.7983 14.7986 19 13.3163 19V21C15.9032 21 18.0002 18.9029 18.0002 16.316H16.0002ZM13.3163 9C14.7986 9 16.0002 10.2017 16.0002 11.684H18.0002C18.0002 9.09709 15.9032 7 13.3163 7V9ZM6.68423 7C4.09734 7 2.00024 9.09709 2.00024 11.684H4.00024C4.00024 10.2017 5.20191 9 6.68423 9V7Z"
164-
fill="#8F8F8F"
164+
fill="#29e236"
165165
/>
166166
</svg>
167167
);

‎services/ahhachul.com/src/components/common/comment/error/ErrorCommentList.component.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import type { AxiosError } from 'axios';
22

33
import { ErrorGraphic } from '@/assets/graphics';
4-
import { WarningIcon } from '@/assets/icons/system';
54

65
import * as S from './ErrorCommentList.styled';
76

@@ -17,7 +16,6 @@ const ErrorCommentList = ({ reset }: ErrorCommentListProps) => {
1716
<S.ErrorContainer>
1817
<ErrorGraphic />
1918
<S.Desc>
20-
<WarningIcon />
2119
<p>오류가 발생했습니다.</p>
2220
</S.Desc>
2321
<S.RetryBtn onClick={reset}>다시 시도</S.RetryBtn>

‎services/ahhachul.com/src/components/common/postDropEllipsis/PostDropEllipsis.component.tsx‎

Lines changed: 79 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,14 @@ import { Drawer } from 'vaul';
1010

1111
import { sleep } from '@ahhachul/utils';
1212

13-
import { CloseIcon, DangerIcon, PhraseIcon, WarningIcon } from '@/assets/icons/jsx/icons';
13+
import {
14+
CloseIcon,
15+
DangerIcon,
16+
FaceIDIcon,
17+
LockIcon,
18+
PhraseIcon,
19+
WarningIcon,
20+
} from '@/assets/icons/jsx/icons';
1421
import { MoreVerticalIcon } from '@/assets/icons/system';
1522
import { useUser } from '@/hooks/domain';
1623
import useUpdateLostFound from '@/hooks/domain/lostFound/useUpdateLostFound';
@@ -73,14 +80,7 @@ const PostDropEllipsis = ({
7380
switch (view) {
7481
case 'default':
7582
return isAuthor ? (
76-
<DefaultView
77-
isLost={isLost}
78-
status={status}
79-
articleId={articleId}
80-
setView={setView}
81-
handleEdit={handleEdit}
82-
handleClose={handleClose}
83-
/>
83+
<DefaultView isLost={isLost} status={status} setView={setView} handleEdit={handleEdit} />
8484
) : (
8585
<ReportView handleClose={handleClose} />
8686
);
@@ -93,6 +93,16 @@ const PostDropEllipsis = ({
9393
handleClose={handleClose}
9494
/>
9595
);
96+
case 'update':
97+
return (
98+
<UpdatePost
99+
queryKey={queryKey}
100+
articleId={articleId}
101+
lostStatus={status}
102+
setView={setView}
103+
handleClose={handleClose}
104+
/>
105+
);
96106
}
97107
}, [view, queryKey]);
98108

@@ -181,48 +191,23 @@ function Header({
181191
function DefaultView({
182192
isLost,
183193
status,
184-
articleId,
185194
setView,
186195
handleEdit,
187-
handleClose,
188196
}: {
189197
isLost?: boolean;
190198
status?: LostStatus;
191-
articleId: string;
192199
setView: (view: string) => void;
193200
handleEdit: () => void;
194-
handleClose: () => void;
195201
}) {
196-
const queryClient = useQueryClient();
197-
const { mutate } = useUpdateLostFound();
198-
const handleLost = () => {
199-
mutate(
200-
{
201-
articleId: +articleId,
202-
status: status === 'COMPLETE' ? 'PROGRESS' : 'COMPLETE',
203-
},
204-
{
205-
onSuccess: () => {
206-
handleClose();
207-
setTimeout(() => {
208-
queryClient.invalidateQueries({
209-
queryKey: lostFoundKeys.detail(+articleId),
210-
});
211-
}, 1000);
212-
},
213-
},
214-
);
215-
};
216-
217202
return (
218203
<>
219204
<S.DefaultViewHeader>
220205
<S.DefaultViewTitle>설정</S.DefaultViewTitle>
221206
</S.DefaultViewHeader>
222207
<S.ButtonContainer>
223208
{isLost && (
224-
<S.GreenButton onClick={handleLost}>
225-
<Check size={21} color="white" />
209+
<S.GreenButton onClick={() => setView('update')}>
210+
<Check size={21} color="#42b305ac" />
226211
{status === 'PROGRESS' ? '습득 완료' : '상태 변경'}
227212
</S.GreenButton>
228213
)}
@@ -313,7 +298,7 @@ function RemovePost({
313298
<Header
314299
icon={<DangerIcon />}
315300
title="게시글을 삭제하시겠어요?"
316-
description="삭제하시면 복구할 수 없어요. 해당 게시글을 삭제할까요?"
301+
description={`삭제하시면 복구할 수 없어요.\n해당 게시글을 삭제할까요?`}
317302
/>
318303
<S.ButtonGroup>
319304
<S.SecondaryButton
@@ -330,6 +315,63 @@ function RemovePost({
330315
);
331316
}
332317

318+
function UpdatePost({
319+
articleId,
320+
lostStatus,
321+
setView,
322+
handleClose,
323+
}: {
324+
articleId: string;
325+
queryKey: readonly unknown[];
326+
lostStatus?: LostStatus;
327+
setView: (view: string) => void;
328+
handleClose: () => void;
329+
}) {
330+
const queryClient = useQueryClient();
331+
332+
const { mutateAsync, status } = useUpdateLostFound();
333+
const handleUpdateLostStatus = () => {
334+
mutateAsync(
335+
{
336+
articleId: +articleId,
337+
status: lostStatus === 'COMPLETE' ? 'PROGRESS' : 'COMPLETE',
338+
},
339+
{
340+
onSuccess: () => {
341+
handleClose();
342+
setTimeout(() => {
343+
queryClient.invalidateQueries({
344+
queryKey: lostFoundKeys.detail(+articleId),
345+
});
346+
}, 1000);
347+
},
348+
},
349+
);
350+
};
351+
352+
return (
353+
<div>
354+
<div>
355+
<Header
356+
icon={lostStatus === 'COMPLETE' ? <LockIcon /> : <FaceIDIcon />}
357+
title={lostStatus === 'COMPLETE' ? '찾음 상태를 취소하시겠어요?' : '분실물을 찾으셨나요?'}
358+
description={
359+
lostStatus === 'COMPLETE'
360+
? `물건을 다시 분실 상태로 변경하시겠어요?\n게시글이 '찾지 못함' 상태로 돌아갑니다.`
361+
: `분실물을 찾으셨다면 알려주세요.\n게시글 상태가 '찾음'으로 변경됩니다.`
362+
}
363+
/>
364+
<S.ButtonGroup>
365+
<S.SecondaryButton variant="default" onClick={() => setView('default')}>
366+
취소
367+
</S.SecondaryButton>
368+
<S.SmoothGreenButton status={status} handleClick={handleUpdateLostStatus} />
369+
</S.ButtonGroup>
370+
</div>
371+
</div>
372+
);
373+
}
374+
333375
const DrawerButton = styled.button`
334376
height: 24px;
335377
font-weight: 500;

‎services/ahhachul.com/src/components/common/postDropEllipsis/PostDropEllipsis.styled.tsx‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -125,6 +125,15 @@ export const SmoothSecondaryButton = styled(SmoothButton)`
125125
color: #ffffff;
126126
`;
127127

128+
export const SmoothGreenButton = styled(SmoothButton)`
129+
${buttonBase}
130+
justify-content: center;
131+
border-radius: 9999px;
132+
font-size: 19px;
133+
background-color: #29e236;
134+
color: #42b305ac;
135+
`;
136+
128137
export const HeaderWrapper = styled.header`
129138
margin-top: 21px;
130139
`;
@@ -142,6 +151,7 @@ export const HeaderDescription = styled.p`
142151
color: #33333e;
143152
font-size: 17px;
144153
line-height: 24px;
154+
white-space: break-spaces;
145155
`;
146156

147157
export const List = styled.ul`
@@ -197,6 +207,6 @@ export const DangerButton = styled.button`
197207
export const GreenButton = styled.button`
198208
${buttonBase}
199209
200-
background-color: #4ade80; /* 초록색 배경 */
201-
color: white;
210+
background-color: #4ade8015;
211+
color: #42b305ac;
202212
`;

‎services/ahhachul.com/src/components/domain/lostFound/postDetail/template/LostFoundDetail.component.tsx‎

Lines changed: 25 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -42,29 +42,6 @@ const LostFoundDetail = ({ id }: LostFoundDetailProps) => {
4242
/>
4343

4444
<S.ArticleWrapper>
45-
<UiComponent.ImageCarousel label={post.title} images={images} />
46-
<S.ContentWrapper>
47-
<LostFoundBadge lostFoundType={post.lostType} />
48-
<S.TitleWrapper>{post.title}</S.TitleWrapper>
49-
<S.MetaInfoWrapper>
50-
<S.AuthorDateWrapper>
51-
<S.AuthorText>{post.writer || '로스트 112'}</S.AuthorText>
52-
<S.DateText>{formatDateTime(post.createdAt, { format: 'short' })}</S.DateText>
53-
</S.AuthorDateWrapper>
54-
<S.SubwayLineWrapper>{subwayIconMap.get(post.subwayLineId)}</S.SubwayLineWrapper>
55-
</S.MetaInfoWrapper>
56-
</S.ContentWrapper>
57-
58-
{post.isFromLost112 && (
59-
<>
60-
<S.Lost112Wrapper>
61-
<LazyLoadImage src="/lost112.png" alt="lost112-image" width={24} height={24} />
62-
<S.Lost112Text>로스트 112에 등록된 분실물입니다.</S.Lost112Text>
63-
</S.Lost112Wrapper>
64-
<Lost112InfoTable post={post} />
65-
</>
66-
)}
67-
6845
{post.status === 'COMPLETE' && (
6946
<S.CompleteWrapper>
7047
<svg
@@ -73,6 +50,7 @@ const LostFoundDetail = ({ id }: LostFoundDetailProps) => {
7350
viewBox="0 0 24 24"
7451
fill="none"
7552
xmlns="http://www.w3.org/2000/svg"
53+
style={{ width: 18, height: 18 }}
7654
>
7755
<path
7856
d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z"
@@ -90,10 +68,33 @@ const LostFoundDetail = ({ id }: LostFoundDetailProps) => {
9068
strokeLinejoin="round"
9169
/>
9270
</svg>
93-
<S.CompleteText>유실물 찾기 완료</S.CompleteText>
71+
<S.CompleteText>이 게시글의 분실물은 찾기 완료되었습니다</S.CompleteText>
9472
</S.CompleteWrapper>
9573
)}
9674

75+
<UiComponent.ImageCarousel label={post.title} images={images} />
76+
<S.ContentWrapper>
77+
<LostFoundBadge lostFoundType={post.lostType} />
78+
<S.TitleWrapper>{post.title}</S.TitleWrapper>
79+
<S.MetaInfoWrapper>
80+
<S.AuthorDateWrapper>
81+
<S.AuthorText>{post.writer || '로스트 112'}</S.AuthorText>
82+
<S.DateText>{formatDateTime(post.createdAt, { format: 'short' })}</S.DateText>
83+
</S.AuthorDateWrapper>
84+
<S.SubwayLineWrapper>{subwayIconMap.get(post.subwayLineId)}</S.SubwayLineWrapper>
85+
</S.MetaInfoWrapper>
86+
</S.ContentWrapper>
87+
88+
{post.isFromLost112 && (
89+
<>
90+
<S.Lost112Wrapper>
91+
<LazyLoadImage src="/lost112.png" alt="lost112-image" width={24} height={24} />
92+
<S.Lost112Text>로스트 112에 등록된 분실물입니다.</S.Lost112Text>
93+
</S.Lost112Wrapper>
94+
<Lost112InfoTable post={post} />
95+
</>
96+
)}
97+
9798
<S.ContentContainer isFromLost112={post.isFromLost112}>
9899
{post.isFromLost112 || !isLexicalContent(post.content) ? (
99100
<S.TextContent>{formatLost112Content(post.content)}</S.TextContent>

‎services/ahhachul.com/src/components/domain/lostFound/postDetail/template/LostFoundDetail.styled.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -80,14 +80,14 @@ export const CompleteWrapper = styled.div`
8080
align-items: center;
8181
height: 48px;
8282
width: 100%;
83-
gap: 8px;
83+
gap: 4px;
8484
background-color: ${theme.colors['key-color']};
8585
`}
8686
`;
8787

8888
export const CompleteText = styled.span`
8989
${({ theme }) => css`
90-
${theme.fonts.titleSmall};
90+
${theme.fonts.labelMedium};
9191
color: ${theme.colors.white};
9292
`}
9393
`;

0 commit comments

Comments
 (0)