Merge pull request #42 from go-cham/devKim2

Fixed: 아이콘, 텍스트 태그 처리 등등 수정
go-cham · Jul 24, 2023 · b1df880 · b1df880
2 parents 68b3074 + c5ab5f4
commit b1df880
Show file tree

Hide file tree

Showing 23 changed files with 562 additions and 71 deletions.
diff --git a/src/components/icons/age/Age10Icon.tsx b/src/components/icons/age/Age10Icon.tsx
@@ -0,0 +1,14 @@
+export default function Age10Icon() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="none">
+      <path
+        fill="#F4F4F5"
+        d="M0 12.5C0 5.596 5.596 0 12.5 0S25 5.596 25 12.5 19.404 25 12.5 25 0 19.404 0 12.5Z"
+      />
+      <path
+        fill="#B0B2B8"
+        d="M10.23 17H8.462v-6.809h-.047l-1.945 1.22V9.85l2.098-1.335h1.664V17Zm4.902.117c-.707 0-1.316-.17-1.828-.51-.511-.343-.904-.841-1.177-1.494-.27-.652-.405-1.437-.405-2.355 0-.914.137-1.697.41-2.35.274-.656.667-1.154 1.178-1.494.512-.344 1.12-.516 1.822-.516.704 0 1.311.172 1.823.516.512.34.904.838 1.178 1.494.273.652.41 1.436.41 2.35 0 .922-.137 1.709-.41 2.361-.274.652-.666 1.149-1.178 1.488-.508.34-1.115.51-1.822.51Zm-1.605-4.307c0 .938.143 1.649.428 2.133.285.48.678.721 1.178.721.503 0 .898-.244 1.183-.732.285-.492.426-1.217.422-2.174 0-.633-.064-1.166-.193-1.6-.13-.437-.315-.765-.557-.984a1.259 1.259 0 0 0-.855-.334c-.504.004-.899.258-1.184.762-.281.503-.422 1.24-.422 2.208Z"
+      />
+    </svg>
+  );
+}
diff --git a/src/components/icons/age/Age20Icon.tsx b/src/components/icons/age/Age20Icon.tsx
@@ -0,0 +1,14 @@
+export default function Age20Icon() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="none">
+      <path
+        fill="#F4F4F5"
+        d="M0 12.5C0 5.596 5.596 0 12.5 0S25 5.596 25 12.5 19.404 25 12.5 25 0 19.404 0 12.5Z"
+      />
+      <path
+        fill="#B0B2B8"
+        d="m5.713 15.723 3.047-2.801c.3-.29.533-.527.697-.715a2.53 2.53 0 0 0 .387-.568 1.43 1.43 0 0 0 .135-.616c0-.246-.059-.46-.176-.644a1.09 1.09 0 0 0-.48-.428 1.576 1.576 0 0 0-.692-.146c-.402-.004-.722.113-.96.351-.24.235-.356.555-.352.961H5.643c0-.543.125-1.02.375-1.43a2.516 2.516 0 0 1 1.06-.955c.457-.222.983-.334 1.577-.334.597 0 1.125.108 1.582.323.457.21.81.506 1.06.884.254.38.381.813.381 1.301 0 .336-.064.659-.193.967-.13.305-.354.645-.674 1.02-.316.375-.766.826-1.348 1.353L8.174 15.5v.047h3.621V17h-6.07l-.012-1.277Zm10.27 1.394c-.708 0-1.317-.17-1.829-.51-.512-.343-.904-.841-1.178-1.494-.27-.652-.404-1.437-.404-2.355 0-.914.137-1.697.41-2.35.274-.656.666-1.154 1.178-1.494.512-.344 1.119-.516 1.822-.516.703 0 1.31.172 1.822.516.512.34.905.838 1.178 1.494.274.652.41 1.436.41 2.35 0 .922-.136 1.709-.41 2.361-.273.652-.666 1.149-1.178 1.488-.507.34-1.115.51-1.822.51Zm-1.606-4.307c0 .938.142 1.649.427 2.133.285.48.678.721 1.178.721.504 0 .899-.244 1.184-.732.285-.492.425-1.217.422-2.174 0-.633-.065-1.166-.194-1.6-.129-.437-.314-.765-.556-.984a1.259 1.259 0 0 0-.856-.334c-.504.004-.898.258-1.183.762-.282.503-.422 1.24-.422 2.208Z"
+      />
+    </svg>
+  );
+}
diff --git a/src/components/icons/age/Age30Icon.tsx b/src/components/icons/age/Age30Icon.tsx
@@ -0,0 +1,14 @@
+export default function Age30Icon() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="none">
+      <path
+        fill="#F4F4F5"
+        d="M0 12.5C0 5.596 5.596 0 12.5 0S25 5.596 25 12.5 19.404 25 12.5 25 0 19.404 0 12.5Z"
+      />
+      <path
+        fill="#B0B2B8"
+        d="M8.696 17.117c-.614 0-1.164-.105-1.653-.316a2.772 2.772 0 0 1-1.148-.885 2.267 2.267 0 0 1-.434-1.307h1.781c.008.207.077.391.206.551a1.3 1.3 0 0 0 .521.37c.219.09.465.134.738.134.278 0 .526-.049.744-.146.223-.102.395-.239.516-.41.121-.176.182-.378.182-.604 0-.23-.065-.434-.194-.61a1.266 1.266 0 0 0-.556-.421 2.201 2.201 0 0 0-.856-.153h-.785v-1.3h.785c.278 0 .524-.047.739-.141.214-.094.38-.227.498-.399a.993.993 0 0 0 .181-.585c0-.215-.05-.405-.152-.569a1.008 1.008 0 0 0-.434-.38 1.4 1.4 0 0 0-.644-.141c-.25 0-.48.045-.692.134a1.24 1.24 0 0 0-.51.37.926.926 0 0 0-.204.562H5.637c.008-.476.147-.902.416-1.277a2.673 2.673 0 0 1 1.107-.88 3.73 3.73 0 0 1 1.56-.316c.577 0 1.089.106 1.534.317.45.21.795.498 1.037.861.246.363.37.768.37 1.213 0 .309-.067.59-.2.844-.133.25-.322.457-.568.62a2.24 2.24 0 0 1-.838.329v.07c.617.075 1.094.288 1.43.639.336.352.5.795.492 1.33.004.477-.135.906-.416 1.29-.277.378-.666.675-1.166.89-.5.21-1.067.316-1.7.316Zm7.456 0c-.707 0-1.316-.17-1.828-.51-.512-.343-.904-.841-1.178-1.494-.27-.652-.404-1.437-.404-2.355 0-.914.137-1.697.41-2.35.274-.656.666-1.154 1.178-1.494.511-.344 1.119-.516 1.822-.516.703 0 1.31.172 1.822.516.512.34.905.838 1.178 1.494.273.652.41 1.436.41 2.35 0 .922-.137 1.709-.41 2.361-.273.652-.666 1.149-1.178 1.488-.508.34-1.115.51-1.822.51Zm-1.605-4.307c0 .938.142 1.649.427 2.133.285.48.678.721 1.178.721.504 0 .898-.244 1.184-.732.285-.492.425-1.217.422-2.174 0-.633-.065-1.166-.194-1.6-.129-.437-.314-.765-.556-.984a1.258 1.258 0 0 0-.856-.334c-.504.004-.898.258-1.184.762-.28.503-.421 1.24-.421 2.208Z"
+      />
+    </svg>
+  );
+}
diff --git a/src/components/icons/age/Age40Icon.tsx b/src/components/icons/age/Age40Icon.tsx
@@ -0,0 +1,14 @@
+export default function Age40Icon() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="none">
+      <path
+        fill="#F4F4F5"
+        d="M0 12.5C0 5.596 5.596 0 12.5 0S25 5.596 25 12.5 19.404 25 12.5 25 0 19.404 0 12.5Z"
+      />
+      <path
+        fill="#B0B2B8"
+        d="m5.303 14.105 3.586-5.59h2.215v5.567h1.078V15.5h-1.078V17H9.428v-1.5H5.303v-1.395Zm4.148-.023v-3.633H9.37l-2.285 3.563v.07h2.367Zm6.812 3.035c-.707 0-1.316-.17-1.828-.51-.511-.343-.904-.841-1.178-1.494-.269-.652-.404-1.437-.404-2.355 0-.914.137-1.697.41-2.35.274-.656.666-1.154 1.178-1.494.512-.344 1.12-.516 1.822-.516.703 0 1.31.172 1.823.516.511.34.904.838 1.177 1.494.274.652.41 1.436.41 2.35 0 .922-.136 1.709-.41 2.361-.273.652-.666 1.149-1.177 1.488-.508.34-1.116.51-1.823.51Zm-1.605-4.307c0 .938.143 1.649.428 2.133.285.48.677.721 1.177.721.504 0 .899-.244 1.184-.732.285-.492.426-1.217.422-2.174 0-.633-.065-1.166-.194-1.6-.128-.437-.314-.765-.556-.984a1.258 1.258 0 0 0-.856-.334c-.504.004-.898.258-1.183.762-.281.503-.422 1.24-.422 2.208Z"
+      />
+    </svg>
+  );
+}
diff --git a/src/components/icons/age/Age40PlusIcon.tsx b/src/components/icons/age/Age40PlusIcon.tsx
@@ -0,0 +1,14 @@
+export default function Age40PlusIcon() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="none">
+      <path
+        fill="#F4F4F5"
+        d="M0 12.5C0 5.596 5.596 0 12.5 0S25 5.596 25 12.5 19.404 25 12.5 25 0 19.404 0 12.5Z"
+      />
+      <path
+        fill="#B0B2B8"
+        d="m2.975 13.847 3.287-5.124h2.03v5.102h.988v1.3h-.988V16.5H6.756v-1.375H2.975v-1.278Zm3.802-.022v-3.33h-.075l-2.095 3.266v.064h2.17Zm6.244 2.782c-.648 0-1.206-.155-1.675-.467-.47-.315-.83-.772-1.08-1.37-.247-.598-.37-1.317-.37-2.159 0-.838.125-1.556.375-2.154.251-.601.611-1.058 1.08-1.37.47-.314 1.026-.472 1.67-.472.645 0 1.202.158 1.67.473.47.311.83.768 1.08 1.37.251.598.377 1.315.377 2.153 0 .845-.126 1.567-.377 2.165-.25.598-.61 1.053-1.08 1.364-.465.312-1.021.467-1.67.467ZM11.55 12.66c0 .859.13 1.51.392 1.955.261.44.621.66 1.08.66.461 0 .823-.223 1.084-.671.262-.451.39-1.115.387-1.993 0-.58-.059-1.069-.177-1.466-.118-.401-.288-.702-.51-.902a1.154 1.154 0 0 0-.784-.306c-.462.003-.824.236-1.085.698-.258.462-.387 1.137-.387 2.025Zm7.694.639h-2.009v-1.343h2.01V9.947h1.342v2.01h2.009v1.342h-2.009v2.009h-1.343v-2.01Z"
+      />
+    </svg>
+  );
+}
diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx
@@ -1,10 +1,17 @@
+import BackgroundText from '@/images//backgroundText.svg';
+
 interface LayoutProps {
   children: React.ReactNode;
 }
 
 export default function Layout({ children }: LayoutProps) {
   return (
-    <div className="h-full w-screen overflow-hidden bg-without-character bg-cover bg-center xl:bg-with-character">
+    <div className="flex h-full w-screen overflow-hidden bg-without-character bg-cover bg-center xl:bg-with-character">
+      <img
+        src={BackgroundText}
+        alt="백그라운드 텍스트"
+        className="fixed left-[10rem] top-[10rem] h-[39.3rem] w-[43.5rem]"
+      />
       <div className="relative mx-auto h-full w-full max-w-[43rem] bg-background-mainBg-0 xl:left-[25rem]">
         {children}
       </div>

diff --git a/src/components/post/PostCard/PostCardContent.tsx b/src/components/post/PostCard/PostCardContent.tsx
@@ -1,3 +1,6 @@
+import { useState } from 'react';
+
+import ThumbnailLoading from '@/images/Common/thumbnailLoading.svg';
 import { formatText } from '@/utils/formatText';
 
 interface PostCardContentProps {
@@ -11,6 +14,10 @@ export default function PostCardContent({
   content,
   image,
 }: PostCardContentProps) {
+  const [imageLoading, setImageLoading] = useState(true);
+  const handleImageLoad = () => {
+    setImageLoading(false);
+  };
   return (
     <div className="relative -top-[0.4rem] flex h-[6.4rem] items-center">
       <div className="flex-1 space-y-[0.9rem] overflow-hidden">
@@ -19,13 +26,21 @@ export default function PostCardContent({
           {formatText(content)}
         </p>
       </div>
-      {image && (
-        <img
-          src={image}
-          alt={'게시글 이미지'}
-          className="ml-[1.7rem] aspect-square w-[6.4rem] rounded-[5px] border border-background-dividerLine-300 object-cover"
-        />
-      )}
+      {image &&
+        (!imageLoading ? (
+          <img
+            src={image}
+            alt={'게시글 이미지'}
+            className="ml-[1.7rem] aspect-square w-[6.4rem] rounded-[5px] border border-background-dividerLine-300 object-cover"
+          />
+        ) : (
+          <img
+            src={ThumbnailLoading}
+            alt={'게시글 이미지 로딩'}
+            onLoad={handleImageLoad}
+            className="ml-[1.7rem] aspect-square w-[6.4rem] rounded-[5px] border border-background-dividerLine-300 object-cover"
+          />
+        ))}
     </div>
   );
 }
diff --git a/src/components/post/PostUserProfile.tsx b/src/components/post/PostUserProfile.tsx
@@ -1,3 +1,9 @@
+import Age10Icon from '../icons/age/Age10Icon';
+import Age20Icon from '../icons/age/Age20Icon';
+import Age30Icon from '../icons/age/Age30Icon';
+import Age40Icon from '../icons/age/Age40Icon';
+import Age40PlusIcon from '../icons/age/Age40PlusIcon';
+
 interface PostUserProfileProps {
   nickname: string;
   age: number;
@@ -11,14 +17,12 @@ export default function PostUserProfile({
 }: PostUserProfileProps) {
   return (
     <div className="flex items-center space-x-[0.5rem]">
-      <span
-        className={`flex h-[2.5rem] w-[2.5rem] items-center justify-center rounded-full text-[1.2rem] font-bold tracking-[-0.36px] ${
-          color === 'primary'
-            ? 'bg-mainSub-main-100 text-mainSub-main-500'
-            : 'bg-[#f4f4f5] text-[#b0b2b8]'
-        }`}
-      >
-        {String(age)[0] + '0'}
+      <span className="h-[2.5rem] w-[2.5rem] tracking-[-0.36px]">
+        {age < 20 && <Age10Icon />}
+        {age >= 20 && age < 30 && <Age20Icon />}
+        {age >= 30 && age < 40 && <Age30Icon />}
+        {age >= 40 && age < 50 && <Age40Icon />}
+        {age >= 50 && <Age40PlusIcon />}
       </span>
       <span className="font-system-body2">{nickname}</span>
     </div>

diff --git a/src/images/Common/HomeLogoFull.svg b/src/images/Common/HomeLogoFull.svg
diff --git a/src/images/Common/HomeLogoStarve.svg b/src/images/Common/HomeLogoStarve.svg
diff --git a/src/images/Common/LogoAndTitle.svg b/src/images/Common/LogoAndTitle.svg
diff --git a/src/images/Common/thumbnailLoading.svg b/src/images/Common/thumbnailLoading.svg