Merge branch 'develop' of https://github.com/prgrms-web-devcourse-fin…

…al-project/WEB1_2_Mallangs_FE into feat/#43
prgrms-web-devcourse-final-project · Dec 4, 2024 · 0a92959 · 0a92959
2 parents 9429661 + 45c67c6
commit 0a92959
Show file tree

Hide file tree

Showing 103 changed files with 5,752 additions and 1,975 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -1,19 +1,19 @@
 {
-  "arrowParens": "always",
-  "bracketSpacing": true,
-  "endOfLine": "lf",
-  "htmlWhitespaceSensitivity": "css",
-  "insertPragma": false,
-  "singleAttributePerLine": false,
-  "bracketSameLine": false,
-  "jsxSingleQuote": false,
-  "printWidth": 80,
-  "proseWrap": "preserve",
-  "quoteProps": "as-needed",
-  "requirePragma": false,
-  "semi": true,
-  "singleQuote": true,
-  "tabWidth": 4,
-  "trailingComma": "all",
-  "useTabs": false
+    "arrowParens": "always",
+    "bracketSpacing": true,
+    "endOfLine": "lf",
+    "htmlWhitespaceSensitivity": "css",
+    "insertPragma": false,
+    "singleAttributePerLine": false,
+    "bracketSameLine": false,
+    "jsxSingleQuote": false,
+    "printWidth": 80,
+    "proseWrap": "preserve",
+    "quoteProps": "as-needed",
+    "requirePragma": false,
+    "semi": true,
+    "singleQuote": true,
+    "tabWidth": 4,
+    "trailingComma": "all",
+    "useTabs": false
 }
diff --git a/index.html b/index.html
@@ -62,6 +62,8 @@
             type="text/javascript"
             src="//dapi.kakao.com/v2/maps/sdk.js?appkey=%VITE_KAKAO_API_KEY%&libraries=services,drawing,clusterer"
         ></script>
+
+        <script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
     </head>
 
     <body>

diff --git a/public/fonts/PretendardVariable.woff2 b/public/fonts/PretendardVariable.woff2
diff --git a/public/images/liquid-efffect.svg b/public/images/liquid-efffect.svg
diff --git a/router.jsx b/router.jsx
diff --git a/src/App.jsx b/src/App.jsx
diff --git a/src/assets/stylesheets/abstracts/_keyframes.scss b/src/assets/stylesheets/abstracts/_keyframes.scss
@@ -42,14 +42,16 @@
     }
 
     75% {
-        rotate: var(--burger-self-rotate) 0 0;
+        transform: rotateZ(var(--burger-self-rotate));
+        // rotate: var(--burger-self-rotate) 0 0;
     }
 
     100% {
         inset-inline-start: 0;
         inset-inline-end: 0;
         height: 0.8rem;
-        rotate: var(--burger-self-rotate) 0 0;
+        transform: rotateZ(var(--burger-self-rotate));
+        // rotate: var(--burger-self-rotate) 0 0;
     }
 }
 
@@ -84,4 +86,18 @@
     }
 }
 
+@keyframes moving-gradient {
+    0% {
+        background-position: 0% 50%;
+    }
+
+    50% {
+        background-position: 100% 50%;
+    }
+
+    100% {
+        background-position: 0% 50%;
+    }
+}
+
 /* _keyframes.scss */
diff --git a/src/assets/stylesheets/base/_default.scss b/src/assets/stylesheets/base/_default.scss
@@ -1,5 +1,15 @@
 @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
 
+@font-face {
+    font-family: 'Pretendard Variable';
+    src:
+        local('Pretendard Variable'),
+        url('/fonts/PretendardVaribale.woff2') format('woff2-variations');
+    font-weight: 100 900;
+    font-style: normal;
+    font-display: swap;
+}
+
 @font-face {
     font-family: 'SUIT';
     src:
@@ -67,6 +77,7 @@
     padding: 0;
     box-sizing: border-box;
     font: inherit;
+    line-height: 1;
     -webkit-tap-highlight-color: transparent;
 }
 

diff --git a/src/assets/stylesheets/components/_areaInfoPanel.scss b/src/assets/stylesheets/components/_areaInfoPanel.scss
@@ -5,9 +5,9 @@
     place-items: center;
     position: fixed;
     inset-block-start: 5.2rem;
-    inset-inline-start: 15.6rem;
-    width: 2.4rem;
-    height: 2.4rem;
+    inset-inline-start: 15.8rem;
+    width: 1.8rem;
+    height: 1.8rem;
     border-radius: var(--rad-full);
     background-color: rgb(var(--clr-text));
     box-shadow: var(--shd-100);
@@ -38,6 +38,7 @@
     position: fixed;
     inset-block-start: 4rem;
     inset-inline-start: 0.8rem;
+    margin-block-end: auto;
     width: 16rem;
     border-radius: var(--rad-lg);
     background-color: rgb(var(--clr-white));
@@ -53,8 +54,9 @@
 }
 
 .area-picture-carousel {
+    flex-shrink: 0;
     position: relative;
-    height: 12rem;
+    height: 9.6rem;
     overflow: hidden;
     user-select: none;
 
@@ -160,7 +162,13 @@
     }
 }
 
+.area-threads-wrapper {
+    display: flex;
+    flex-flow: column nowrap;
+}
+
 .area-section-title {
+    flex-shrink: 0;
     display: flex;
     align-items: center;
     gap: 0.2rem;
@@ -171,7 +179,7 @@
 
 .area-threads-list {
     padding: 0.8rem;
-    max-height: 16rem;
+    max-height: 12rem;
     overflow-y: auto;
 }
 
@@ -228,4 +236,10 @@
     font-size: var(--fnt-xs);
 }
 
+@media screen and (height < 600px) {
+    .area-picture-carousel {
+        display: none;
+    }
+}
+
 /* _areaInfoPanel.scss */
diff --git a/src/assets/stylesheets/components/_articleItem.scss b/src/assets/stylesheets/components/_articleItem.scss
@@ -32,23 +32,19 @@
     flex: 1;
     padding: 0.8rem;
     border-radius: var(--rad-lg);
-}
-
-@mixin sub-descriptions {
-    display: flex;
-    align-items: center;
-    gap: 0.2rem;
-    font-size: var(--fnt-sm);
-    font-weight: 200;
+    overflow: hidden;
 }
 
 .article-item-title {
-    @include sub-descriptions();
+    opacity: 1;
 }
 
 .article-item-title-text {
     font-size: var(--fnt-md);
     font-weight: 900;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
 }
 
 .article-replies-counter {
@@ -57,13 +53,10 @@
 }
 
 .article-item-category {
-    @include sub-descriptions();
+    opacity: 1;
 }
 
 .article-item-datetime {
-    @include sub-descriptions();
-
-    opacity: 0.5;
 }
 
 /* _articleItem.scss */
diff --git a/src/assets/stylesheets/components/_birthdaySelector.scss b/src/assets/stylesheets/components/_birthdaySelector.scss
@@ -0,0 +1,34 @@
+// 생년월일
+.birthday-dropdown {
+    display: flex;
+    width: 100%;
+    gap: 0.4rem;
+
+    select {
+        min-width: 4rem;
+        background-color: white;
+    }
+}
+
+.birthday-container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 1.6rem;
+    border: 1px solid rgba(47, 40, 36, 0.15);
+    border-radius: var(--rad-xs);
+    padding: 0 0.4rem;
+    margin-top: 0.5rem;
+
+    .birthday-wrapper {
+        flex-grow: 1;
+        color: rgb(var(--clr-text));
+        font-size: var(--fnt-md);
+        opacity: 0.5;
+    }
+
+    .birthday-selector {
+        display: flex;
+        align-items: center;
+    }
+}
diff --git a/src/assets/stylesheets/components/_chatItem.scss b/src/assets/stylesheets/components/_chatItem.scss
@@ -79,11 +79,6 @@
 }
 
 .chat-datetime-container {
-    display: flex;
-    align-items: center;
-    gap: 0.2rem;
-    font-size: var(--fnt-sm);
-    opacity: 0.5;
 }
 
 /* _chatItem.scss */