[FE]Refactor/#145 UI 조정 및 머지 후 자잘한 오류 수정

frontend/src/components/MergeOrSeeTogether/index.tsx

@@ -1,7 +1,7 @@
 import Button from '../common/Button';
 import Flex from '../common/Flex';
 import Space from '../common/Space';
-import Tag from '../common/Tag';
+import Tag from '../Tag';
 
 export interface MergeOrSeeTogetherProps {
   tag: string[];

frontend/src/components/PinPreview/index.tsx

@@ -73,13 +73,14 @@ const PinPreview = ({
         <Text color="black" $fontSize="default" $fontWeight="bold">
           {pinTitle}
         </Text>
+        <Space size={0} />
         <Text color="gray" $fontSize="small" $fontWeight="normal">
           {pinLocation}
         </Text>
         <Space size={3} />
-        <Text color="black" $fontSize="small" $fontWeight="normal">
+        <EllipsisText color="black" $fontSize="small" $fontWeight="normal">
           {pinInformation}
-        </Text>
+        </EllipsisText>
       </Flex>
     </Flex>
   );
@@ -89,8 +90,8 @@ const MultiSelectButton = styled.input`
   width: 24px;
   height: 24px;
   position: absolute;
-  top: 8px;
-  right: 8px;
+  top: 4px;
+  right: 4px;
   background-color: ${({ theme }) => theme.color.white};
   border: 1px solid ${({ theme }) => theme.color.black};
   border-radius: ${({ theme }) => theme.radius.small};
@@ -101,4 +102,14 @@ const MultiSelectButton = styled.input`
   }
 `;
 
+const EllipsisText = styled(Text)`
+  width: 100%;
+  display: -webkit-box;
+  word-wrap: break-word;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  text-overflow: ellipsis;
+  overflow: hidden;
+`;
+
 export default PinPreview;

frontend/src/components/common/Tag/index.tsx → frontend/src/components/Tag/index.tsx

@@ -1,13 +1,14 @@
 import { styled } from 'styled-components';
 
 const Tag = styled.span`
-  height: 28px;
-  max-width: 240px;
+  display: block;
+  height: 32px;
+  max-width: 280px;
 
   padding: ${({ theme }) => `${theme.spacing['1']} ${theme.spacing['3']}`};
 
   color: ${({ theme }) => theme.color.white};
-  font-size: ${({ theme }) => theme.fontSize.extraSmall};
+  font-size: ${({ theme }) => theme.fontSize.small};
 
   background-color: ${({ theme }) => theme.color.black};
   border-radius: ${({ theme }) => theme.radius.medium};

frontend/src/components/TopicCard/index.tsx

@@ -2,6 +2,7 @@ import { styled } from 'styled-components';
 import Flex from '../common/Flex';
 import Text from '../common/Text';
 import useNavigator from '../../hooks/useNavigator';
+import Box from '../common/Box';
 
 export interface TopicCardProps {
   topicId: number;
@@ -42,7 +43,7 @@ const TopicCard = ({
   };
 
   return (
-    <li>
+    <WrapperLi>
       <Flex
         width="360px"
         height="140px"
@@ -53,6 +54,7 @@ const TopicCard = ({
         $borderRadius="small"
         $backgroundImage={topicImage}
         $backgroundSize="360px 140px"
+        $backgroundColor="whiteGray"
       >
         <MultiSelectButton
           type="checkbox"
@@ -61,36 +63,47 @@ const TopicCard = ({
           }
           checked={taggedTopicIds.includes(topicId)}
         />
+        <Box
+          position="absolute"
+          width="100%"
+          height="68px"
+          $backgroundColor="black"
+          opacity="0.6"
+        ></Box>
         <Flex
           width="100%"
-          height="65px"
+          height="68px"
           $flexDirection="column"
           $alignItems="center"
           $justifyContent="center"
           cursor="pointer"
           onClick={goToSelectedTopic}
-          $backdropFilter="blur(20px)"
+          $backdropFilter="blur(12px)"
         >
-          <Text color="black" $fontSize="medium" $fontWeight="normal">
+          <Text color="white" $fontSize="medium" $fontWeight="normal">
             {topicTitle}
           </Text>
-          <Text color="gray" $fontSize="small" $fontWeight="normal">
+          <Text color="lightGray" $fontSize="small" $fontWeight="normal">
             {`업데이트 : ${
               topicUpdatedAt.split('T')[0]
             } | 핀 개수 : ${topicPinCount}`}
           </Text>
         </Flex>
       </Flex>
-    </li>
+    </WrapperLi>
   );
 };
 
+const WrapperLi = styled.li`
+  box-shadow: 2px 4px 4px 0px rgba(69, 69, 69, 0.25);
+`;
+
 const MultiSelectButton = styled.input`
   width: 24px;
   height: 24px;
   position: absolute;
-  top: 8px;
-  right: 8px;
+  top: ${({ theme }) => theme.spacing[0]};
+  right: ${({ theme }) => theme.spacing[0]};
   background-color: ${({ theme }) => theme.color.white};
   border: 1px solid ${({ theme }) => theme.color.black};
   border-radius: ${({ theme }) => theme.radius.small};

frontend/src/components/TopicInfo/index.tsx

@@ -29,6 +29,17 @@ const TopicInfo = ({
     routePage(`/new-pin?topic-id=${topicId}`);
   };
 
+  const copyContent = async () => {
+    try {
+      const topicUrl = window.location.href.split('?')[0];
+      await navigator.clipboard.writeText(topicUrl);
+      alert('토픽 링크가 복사되었습니다.');
+    } catch (err) {
+      if (typeof err === 'string') throw new Error(err);
+      throw new Error('[ERROR] clipboard error');
+    }
+  };
+
   return (
     <Flex
       width="360px"
@@ -49,20 +60,20 @@ const TopicInfo = ({
       <Text color="black" $fontSize="large" $fontWeight="bold">
         {topicTitle}
       </Text>
-      <Space size={0} />
+      <Space size={1} />
       <Text color="black" $fontSize="small" $fontWeight="normal">
         {topicOwner}
       </Text>
-      <Space size={0} />
+      <Space size={1} />
       <Text color="black" $fontSize="small" $fontWeight="normal">
         {topicDescription}
       </Text>
       <Space size={3} />
       <Flex $justifyContent="space-between">
         <Flex>
           <Clipping />
-          <Space size={2} />
-          <Share />
+          <Space size={4} />
+          <Share cursor="pointer" onClick={copyContent} />
         </Flex>
         <Button variant="primary" onClick={goToNewPin}>
           + 핀 추가하기

frontend/src/components/common/Box/index.ts

@@ -33,6 +33,7 @@ export type BoxProps = {
   $backgroundImage?: string;
   $backgroundSize?: string;
   $backdropFilter?: string;
+  opacity?: string;
 };
 
 const Box = styled.div<BoxProps>`
@@ -67,8 +68,11 @@ const Box = styled.div<BoxProps>`
   border-bottom: ${({ $borderBottom }) => $borderBottom};
   border-left: ${({ $borderLeft }) => $borderLeft};
   cursor: ${({ cursor }) => cursor};
-  background-image: url(${({ $backgroundImage }) => $backgroundImage});
+  background-image: ${({ $backgroundImage }) =>
+    $backgroundImage &&
+    `url(${$backgroundImage}),  url('https://velog.velcdn.com/images/semnil5202/post/37dae18f-9860-4483-bad5-1158a210e5a8/image.svg')`};
   background-size: ${({ $backgroundSize }) => $backgroundSize};
   backdrop-filter: ${({ $backdropFilter }) => $backdropFilter};
+  opacity: ${({ opacity }) => opacity};
 `;
 export default Box;

frontend/src/pages/Home.tsx

@@ -28,6 +28,7 @@ const Home = () => {
 
   const onTagCancel = () => {
     setTagTopics([]);
+    setTaggedTopicIds([]);
   };
 
   const getAndSetDataFromServer = async () => {
@@ -82,7 +83,7 @@ const Home = () => {
             );
           })}
       </ul>
-      <Flex position="fixed" bottom="40px" left="130px">
+      <Flex position="fixed" bottom="40px" left="142px">
         <Button variant="primary" onClick={goToNewTopic}>
           {tagTopics.length > 0 ? '토픽 병합하기' : '토픽 추가하기'}
         </Button>

frontend/src/pages/NewPin.tsx

@@ -5,7 +5,7 @@ import Space from '../components/common/Space';
 import Button from '../components/common/Button';
 import Textarea from '../components/common/Textarea';
 import { postApi } from '../utils/postApi';
-import { FormEvent, useContext, useEffect, useState } from 'react';
+import { FormEvent, useContext, useEffect, useRef, useState } from 'react';
 import { getApi } from '../utils/getApi';
 import { getAddress } from '../utils/getAddress';
 import { TopicType } from '../types/Topic';
@@ -32,6 +32,7 @@ const NewPin = () => {
       images: [],
     });
   const { routePage } = useNavigator();
+  const addressRef = useRef<HTMLInputElement | null>(null);
 
   const goToBack = () => {
     routePage(-1);
@@ -41,7 +42,7 @@ const NewPin = () => {
     await postApi('/pins', {
       topicId: topic?.id || 'error',
       name: formValues.name,
-      address: formValues.address,
+      address: addressRef.current?.value,
       description: formValues.description,
       latitude: clickedCoordinate.latitude,
       longitude: clickedCoordinate.longitude,
@@ -76,10 +77,6 @@ const NewPin = () => {
       onComplete: async function (data: any) {
         const addr = data.roadAddress; // 주소 변수
 
-        setFormValues((prev) => {
-          return { ...prev, address: addr };
-        });
-
         //data를 통해 받아온 값을 Tmap api를 통해 위도와 경도를 구한다.
         const { ConvertAdd } = await getAddress(
           `https://apis.openapi.sk.com/tmap/geo/convertAddress?version=1&format=json&callback=result&searchTypCd=NtoO&appKey=P2MX6F1aaf428AbAyahIl9L8GsIlES04aXS9hgxo&coordType=WGS84GEO&reqAdd=${addr}`,
@@ -155,6 +152,8 @@ const NewPin = () => {
             value={formValues.name}
             onChange={onChangeInput}
             placeholder="지도를 클릭하거나 장소의 이름을 입력해주세요."
+            autoFocus={true}
+            tabIndex={1}
           />
         </section>
 
@@ -174,9 +173,11 @@ const NewPin = () => {
           <Input
             name="address"
             readOnly
-            value={clickedCoordinate.address ?? formValues.address}
-            onChange={onChangeInput}
+            value={clickedCoordinate.address}
             onClick={onClickAddressInput}
+            onKeyDown={onClickAddressInput}
+            ref={addressRef}
+            tabIndex={2}
             placeholder="지도를 클릭하거나 장소의 위치를 입력해주세요."
           />
         </section>
@@ -199,17 +200,25 @@ const NewPin = () => {
             value={formValues.description}
             onChange={onChangeInput}
             placeholder="장소에 대한 의견을 자유롭게 남겨주세요."
+            tabIndex={3}
           />
         </section>
 
         <Space size={6} />
 
         <Flex $justifyContent="end">
-          <Button variant="primary">추가하기</Button>
-          <Space size={3} />
-          <Button type="button" variant="secondary" onClick={goToBack}>
+          <Button
+            tabIndex={5}
+            type="button"
+            variant="secondary"
+            onClick={goToBack}
+          >
             취소하기
           </Button>
+          <Space size={3} />
+          <Button tabIndex={4} variant="primary">
+            추가하기
+          </Button>
         </Flex>
       </Flex>
     </form>