🌈 Design: 1:1 대화 방 마크업 추가 (#10)

prgrms-web-devcourse-final-project · Dec 8, 2024 · ffcaa57 · ffcaa57
1 parent e036de3
commit ffcaa57
Show file tree

Hide file tree

Showing 11 changed files with 244 additions and 24 deletions.
diff --git a/src/assets/stylesheets/components/_mainModal.scss b/src/assets/stylesheets/components/_mainModal.scss
@@ -365,6 +365,56 @@
     }
 }
 
+/* 사용자 1:1 대화 */
+
+#user-chat-room-container {
+    display: flex;
+    flex-flow: column nowrap;
+    height: 100%;
+    overflow: hidden;
+}
+
+#user-chat-room-body {
+    flex: 1;
+    overflow-y: scroll;
+}
+
+#user-chat-room-controls {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    position: sticky;
+    inset-block-start: 0;
+    padding-inline: 0.8rem;
+    height: 2.4rem;
+    background-color: rgb(var(--clr-text) / 0.75);
+    backdrop-filter: blur(1.8rem);
+    color: rgb(var(--clr-text-on-tint));
+    z-index: 2;
+}
+
+#user-chat-room-stacks {
+}
+
+#user-chat-room-input-container {
+    flex-shrink: 0;
+}
+
+.chat-input-wrapper {
+    display: flex;
+    gap: 0.4rem;
+    padding: 0.4rem;
+    background-color: rgb(var(--clr-white));
+    background-image: linear-gradient(
+        rgb(var(--clr-tint-100) / 0.05),
+        rgb(var(--clr-tint-100) / 0.05)
+    );
+}
+
+#input-chat-text {
+    flex: 1;
+}
+
 /* 반응형 쿼리 */
 
 @container main-container (max-width: 720px) {

diff --git a/src/assets/stylesheets/layouts/_commons.scss b/src/assets/stylesheets/layouts/_commons.scss
@@ -239,7 +239,6 @@ a:has(#logo-primary) {
 
     > .nametag-username {
         max-width: 8rem;
-        color: rgb(var(--clr-text));
         font-size: var(--fnt-md);
         font-weight: 700;
         text-overflow: ellipsis;

diff --git a/src/assets/stylesheets/style.css b/src/assets/stylesheets/style.css
@@ -785,7 +785,6 @@ a:has(#logo-primary) {
 }
 .user-nametag > .nametag-username {
   max-width: 8rem;
-  color: rgb(var(--clr-text));
   font-size: var(--fnt-md);
   font-weight: 700;
   text-overflow: ellipsis;
@@ -3725,6 +3724,50 @@ input[type=checkbox]:is([data-checkbox-type=toggle]):focus + label .switch-rail
   font-weight: 700;
 }
 
+/* 사용자 1:1 대화 */
+#user-chat-room-container {
+  display: flex;
+  flex-flow: column nowrap;
+  height: 100%;
+  overflow: hidden;
+}
+
+#user-chat-room-body {
+  flex: 1;
+  overflow-y: scroll;
+}
+
+#user-chat-room-controls {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: sticky;
+  inset-block-start: 0;
+  padding-inline: 0.8rem;
+  height: 2.4rem;
+  background-color: rgb(var(--clr-text)/0.75);
+  -webkit-backdrop-filter: blur(1.8rem);
+          backdrop-filter: blur(1.8rem);
+  color: rgb(var(--clr-text-on-tint));
+  z-index: 2;
+}
+
+#user-chat-room-input-container {
+  flex-shrink: 0;
+}
+
+.chat-input-wrapper {
+  display: flex;
+  gap: 0.4rem;
+  padding: 0.4rem;
+  background-color: rgb(var(--clr-white));
+  background-image: linear-gradient(rgb(var(--clr-tint-100)/0.05), rgb(var(--clr-tint-100)/0.05));
+}
+
+#input-chat-text {
+  flex: 1;
+}
+
 /* 반응형 쿼리 */
 @container main-container (max-width: 720px) {
   #main-modal:has(.cover-signature-image-container) #main-modal-side-menu {
@@ -5483,4 +5526,33 @@ input[type=checkbox]:is([data-checkbox-type=toggle]):focus + label .switch-rail
   margin-top: 0.2rem;
   font-size: var(--fnt-xs);
   color: rgb(var(--clr-alert));
+}
+
+.gallery-swiper.swiper {
+  width: 100%;
+  height: 8rem;
+}
+.gallery-swiper.swiper .swiper-pagination-bullet {
+  width: 0.5rem;
+  height: 0.5rem;
+  background: rgb(var(--clr-white)/0.5);
+  border: 0.1rem solid rgb(var(--clr-gray));
+  opacity: 1;
+  transition: all 0.25s;
+}
+.gallery-swiper.swiper .swiper-pagination-bullet-active {
+  border-color: rgb(var(--clr-info));
+  background: rgb(var(--clr-white));
+  transform: scale(1.2);
+  opacity: 1;
+}
+.gallery-slide {
+  height: 100%;
+}
+.gallery-slide img {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+  border-radius: var(--rad-lg);
 }
diff --git a/src/components/MainModal.jsx b/src/components/MainModal.jsx
@@ -94,6 +94,7 @@ const MainModal = ({ routeName }) => {
         'user-reviews': <UserReviews />,
         'user-chat-list': <UserChatList />,
         'user-chat-room': <UserChatRoom />,
+        'user-ignores': <>차단한 유저 목록입니다.</>,
 
         // 장소 글타래 라우트 매치
         'place-info': <PlaceInfo />,

diff --git a/src/components/common/ChatItem.jsx b/src/components/common/ChatItem.jsx
@@ -3,7 +3,7 @@ import dateFormat from '../../utils/dateFormat';
 import hourFormat from '../../utils/hourFormat';
 
 const ChatItem = ({
-    chatFrom = 'my',
+    chatFrom = 'my', // my, opposite
     chatUser = { userID: 0, userImage: null, userName: '대화 상대' },
     chatContent = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas laboriosam, debitis veniam nobis eligendi sequi modi deleniti repellat harum aliquid possimus, repellendus, quisquam voluptatem! Exercitationem voluptas dolorem natus architecto laborum.',
     dateTime = '1970-01-01',

diff --git a/src/components/common/ChatRoomItem.jsx b/src/components/common/ChatRoomItem.jsx
@@ -8,9 +8,19 @@ const ChatRoomItem = ({
     chatLatestMessage = '가장 최근에 주고받은 대화 내용',
     chatMessageStack = 0,
     chatLetestDateTime = '1970-01-01 16:36:45',
+    onNav,
 }) => {
     return (
-        <div className="chat-room-item">
+        <div
+            className="chat-room-item"
+            onClick={() =>
+                onNav({
+                    label: '1 : 1 대화',
+                    value: 'user-chat-room',
+                    count: 0,
+                })
+            }
+        >
             <UserProfileImage imageSize={1.8} />
 
             <dl className="chat-room-descriptions">

diff --git a/src/components/common/MallangItem.jsx b/src/components/common/MallangItem.jsx
@@ -59,7 +59,13 @@ const MallangItem = ({
 
                     <span>·</span>
 
-                    <p>{mallangObject.petGender}</p>
+                    <p>
+                        {mallangObject.petGender === 'M'
+                            ? '수컷'
+                            : mallangObject.petGender === 'F'
+                              ? '암컷'
+                              : '알 수 없음'}
+                    </p>
                 </dd>
             </dl>
         </div>

diff --git a/src/components/layout/Header.jsx b/src/components/layout/Header.jsx
@@ -127,11 +127,12 @@ const Header = ({ setPanel }) => {
                         <button
                             type="button"
                             id="button-user-profile"
+                            title="대표 말랑이 보기"
                             onClick={() => setPanel('user-profile')}
                         >
                             <UserProfileImage
                                 imageSrc={
-                                    'https://picsum.photos/36/36?random=1'
+                                    'https://picsum.photos/seed/kim/128/128'
                                 }
                                 imageSize={1.8}
                             />

diff --git a/src/datas/modalNavObject.json b/src/datas/modalNavObject.json
@@ -55,6 +55,11 @@
                         "value": "user-chat-list",
                         "count": null
                     },
+                    {
+                        "label": "1 : 1 대화 (임시)",
+                        "value": "user-chat-room",
+                        "count": null
+                    },
                     {
                         "label": "차단 유저 목록 (미확정)",
                         "value": "user-ignores",

diff --git a/src/pages/UserChatList.jsx b/src/pages/UserChatList.jsx
@@ -9,18 +9,6 @@ const UserChatList = () => {
                 <ChatRoomItem />
 
                 <ChatRoomItem />
-
-                <ChatRoomItem />
-
-                <ChatRoomItem />
-
-                <ChatRoomItem />
-
-                <ChatRoomItem />
-
-                <ChatRoomItem />
-
-                <ChatRoomItem />
             </div>
         </>
     );

diff --git a/src/pages/UserChatRoom.jsx b/src/pages/UserChatRoom.jsx
@@ -1,14 +1,102 @@
+import { useEffect, useRef } from 'react';
+import Remix from '../components/common/Remix';
+import NameTag from '../components/common/NameTag';
+import ModalDateSeparator from '../components/common/ModalDateSeparator';
+import ModalInstruction from '../components/common/ModalInstruction';
 import ChatItem from '../components/common/ChatItem';
 
-const UserChatRoom = () => {
+const UserChatRoom = ({ sessionID = 0 }) => {
+    const chatList = useRef();
+    const chatOppsite = {
+        userID: 1,
+        userImage: 'https://picsum.photos/seed/choi/128/128',
+        userName: '최사용자',
+    };
+
+    const handleRefreshMessage = () => {
+        // 대화창이 refresh 되었을 때 대화창을 맨 아래로 내릴 것
+        chatList.current.scrollTop = chatList.current.scrollHeight;
+    };
+
+    useEffect(() => {
+        handleRefreshMessage();
+    }, []);
+
     return (
-        <>
-            <div>
-                <ChatItem />
+        <div id="user-chat-room-container">
+            <div id="user-chat-room-body" ref={chatList}>
+                <div id="user-chat-room-controls">
+                    <button
+                        type="button"
+                        onClick={() => console.log(sessionID)}
+                    >
+                        <Remix iconName={'arrow-left-s-line'} />
+                    </button>
+
+                    <NameTag userObject={chatOppsite} />
+
+                    <button type="button">
+                        <Remix iconName={'close-line'} />
+                    </button>
+                </div>
+
+                <div className="user-common-item-list">
+                    <ModalInstruction
+                        instEmoji="🎉"
+                        inst
+                        instHeadline={chatOppsite.userName}
+                        instContent="님과의 대화가 시작되었습니다. 상대방의 금전 요구 등으로 인한 피해를 입지 않도록 주의해 주세요."
+                    />
+                </div>
+
+                <div id="user-chat-room-stacks">
+                    <section id="user-chat-date-block-container">
+                        <article className="user-chat-date-block">
+                            <ModalDateSeparator dateString="2024-01-01" />
+
+                            <div className="user-common-item-list">
+                                <ChatItem />
+
+                                <ChatItem
+                                    chatFrom={'opposite'}
+                                    chatUser={chatOppsite}
+                                />
+
+                                <ChatItem />
+
+                                <ChatItem
+                                    chatFrom={'opposite'}
+                                    chatUser={chatOppsite}
+                                />
+
+                                <ChatItem />
+
+                                <ChatItem
+                                    chatFrom={'opposite'}
+                                    chatUser={chatOppsite}
+                                />
+                            </div>
+                        </article>
+                    </section>
+                </div>
+            </div>
+
+            <div id="user-chat-room-input-container">
+                <hr />
+
+                <div className="chat-input-wrapper">
+                    <input
+                        type="text"
+                        id="input-chat-text"
+                        placeholder="대화 입력..."
+                    />
 
-                <ChatItem />
+                    <button type="button" className="buttons">
+                        <span>보내기</span>
+                    </button>
+                </div>
             </div>
-        </>
+        </div>
     );
 };